/* --- APP STYLE LIGHTBOX --- */
.ga-lightbox-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #000; z-index: 9999;
    display: flex; flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ga-lightbox-close {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  cursor: pointer;
  z-index: 10001;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
    backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ga-lightbox-image-area {
    position: relative; flex: 1; display: flex;
    align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.ga-lightbox-image-area img {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px;
}
#ga-lightbox-reply-input {
  flex: 1;
  height: 44px;
  min-height: 44px;
  max-height: 120px;
  padding: 9px 15px;
  line-height: 24px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid #d3d9de;
  border-radius: 20px;
  resize: none;
  outline: none;
  box-sizing: border-box;
  overflow-y: hidden;
  transition: border-color 0.2s ease;
  margin: 0;
  width: 100%;
}

/* Красивая подсветка при клике на поле (как в ВК) */
#ga-lightbox-reply-input:focus {
    border-color: #5181b8; 
}
#ga-lightbox-reply-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #2588eb;
  color: #fff;
}
/* Невидимые кнопки перелистывания (левая и правая половина экрана) */
.ga-nav-area { position: absolute; top: 0; bottom: 150px; width: 40%; z-index: 10000; cursor: pointer; }
.ga-area-left { left: 0; }
.ga-area-right { right: 0; }

.ga-lightbox-bottom-panel {
    --internal--Gradient_gradient: rgba(0, 0, 0, 0)0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.33) 30%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.75) 70%, rgba(0,0,0,0.8) 85%, rgba(0,0,0,0.9) 100%;
    position: absolute; bottom: 0; left: 0; right: 0;
    background: -webkit-gradient(linear,left top, left bottom,from(var(--internal--Gradient_gradient)));
    background: linear-gradient(to bottom,var(--internal--Gradient_gradient));
    padding: 40px 15px 15px; z-index: 10001;
    pointer-events: none; /* Чтобы можно было свайпать через нее */
}
.ga-lightbox-bottom-panel * { pointer-events: auto; } /* Возвращаем клики внутренностям */

.ga-lightbox-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ga-lightbox-header a { color: #fff; text-decoration: none; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.ga-lightbox-desc { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.9); margin-bottom: 15px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.ga-lightbox-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.ga-lb-action-btn { display: flex; align-items: center; color: rgba(255, 255, 255, 0.7);  gap: 6px; cursor: pointer; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }


.ga-sheet { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10005; pointer-events: none; }
.ga-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s; }
.ga-sheet-panel { 
    position: absolute; bottom: 0; left: 0; right: 0; height: 75vh;
    background: #fff; border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex; flex-direction: column; pointer-events: auto;
}
.ga-sheet.active { pointer-events: auto; }
.ga-sheet.active .ga-sheet-backdrop { opacity: 1; }
.ga-sheet.active .ga-sheet-panel { transform: translateY(0); }

.ga-sheet-handle { width: 40px; height: 5px; background: #e1e1e6; border-radius: 3px; margin: 10px auto; }
.ga-sheet-header { text-align: center; font-weight: 600; padding: 0 15px 15px; border-bottom: 1px solid #e1e1e6; color: #000; }
.ga-sheet-content { flex: 1; overflow-y: auto; padding: 15px; }
.ga-sheet-input-area { padding: 10px 15px; border-top: 1px solid #e1e1e6; background: #fafbfc; display: flex; gap: 10px; align-items: center; }
.ga-sheet-input-area textarea { flex: 1; height: 40px; padding: 10px; border: 1px solid #d3d9de; border-radius: 20px; resize: none; font-family: inherit; }
.ga-sheet-input-area button { background: none; border: none; color: #5181b8; font-weight: 600; cursor: pointer; }

/* Крутилка */
.ga-lightbox-spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s infinite linear; position: absolute; z-index: 10000;}
@keyframes spin { 100% { transform: rotate(360deg); } }
#ga-lightbox-img {
    display: none;
}

#ga-lightbox {
    display: none; 
}

.img-snap-back {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.ga-lightbox-actions .PostBottomButton {
    background: transparent !important;
    padding-left: 0 !important;;
}
.ga-lightbox-actions .reaction-icon { border: 0 !important; }
.ga-lightbox-actions .ReactionsPreview__label { color: rgba(255, 255, 255, 0.7); font-size: var(--site-font-size) !important; }
.ga-lightbox-actions .PostBottomButton__icon { width: 30px !important; height: 30px !important; }
.ga-lightbox-actions .PostBottomButtonReaction__icon { width: 26px !important; height: 26px !important; }
.ga-lightbox-actions .reaction-icon img { width: 20px !important; height: 20px !important; }
.ga-lightbox-actions .PostBottomButtonReaction__label { font-size: var(--site-font-size) !important; }

#ga-lightbox .ReactionsMenu {
  background-color: rgba(30, 30, 30, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  top: -70px;
  left: -8px;
}

#ga-lightbox .ReactionMenuItem__title {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}


/* Стили для элементов меню действий в шторке */
.ga-sheet-menu-item {
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 16px 20px; 
    font-size: 16px; 
    color: #000; 
    text-decoration: none; 
    background: transparent; 
    border: none; 
    width: 100%; 
    text-align: left;
    font-family: inherit; 
    cursor: pointer; 
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
}
.ga-sheet-menu-item:active { background: rgba(0,0,0,0.05); }
.ga-sheet-menu-item svg { color: #818c99; }
.ga-sheet-menu-item.danger { color: #ff3347; }
.ga-sheet-menu-item.danger svg { color: #ff3347; }


/* Стили панели оценок */
#ga-lightbox-rating-wrap {
  position: absolute;
  bottom: 118px;
  left: 50%;
  transform: translate(-50%,0);
  display: flex;
  flex-wrap: wrap;
}
#ga-lightbox-rating-wra2 {
  position: relative;
  display: flex;
  width: 100%;
  bottom: 12px;
}
.ga-rate-stars2 {
  display: inline-flex;
  align-items: end;
  justify-content: flex-end;
  margin-left: auto;
}
.ga-rate-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ga-rate-title {
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  font-weight: 500;
}
.ga-rate-stars {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.ga-star {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.ga-star:hover:not(.voted) { background: #007aff; transform: scale(1.1); }
.ga-star-vip { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #d6336c; }
.ga-star-vip:hover:not(.voted) { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); opacity: 0.9; }
.ga-star.voted { background: #007aff; cursor: default; }
.ga-star-vip.voted { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #d6336c; cursor: default; }


.np_marks {
  text-align: center;
  position: relative;
  z-index: 1;
}
.np_marks_current-mark {
  vertical-align: top;
  line-height: 1.35;
  font-size: 15px;
  color: #fff;
  z-index: 99999999;
  text-shadow: .07em .07em rgba(0,0,0,.3);
}
.np_mark, .np_mark::before {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.np_mark {
  padding: 5px;
  background-repeat: no-repeat;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.np_mark::before {
  content: '';
}
.np_mark1::before, .np_mark2::before, .np_mark3::before, .np_mark4::before, .np_mark5::before, .np_mark6::before {
  background-image: url(/version/img/2ea644e3bebbfb0b480948b09be1fb72.png);
  background-size: 32px 664px;
}
.np_mark1::before {
  background-position: 0 -504px;
}
.np_mark2::before {
  background-position: 0 -472px;
}
.np_mark3::before {
  background-position: 0 -440px;
}
.np_mark4::before {
  background-position: 0 -408px;
}
.np_mark5::before {
  background-position: 0 -376px;

}
.np_mark6::before {
  background-position: 0 -344px;
}

.ga-lightbox-overlay .overlay__ugpyu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: 1;
  overflow: hidden;
}

/* Сама размытая картинка */
.ga-lightbox-overlay .overlay_img__ugpyu {
  position: absolute;
  top: -100px;
  right: -100px;
  bottom: -100px;
  left: -100px;
  filter: blur(80px); /* 80-100px оптимально для мягкости */
  will-change: transform;
  opacity: 0.6; /* Можно менять от 0.4 до 0.8 для яркости фона */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 0.3s ease; /* Плавная смена фона */
}

/* Важно: чтобы сама фотка была поверх размытия */
#ga-lightbox-img {
    position: relative;
    z-index: 2;
}