/* ==========================================================================
   Страница "Квест на день рождения" — использует переменные из style.css
   основной темы (цвета, шрифты, радиусы). Ниже — только специфичные для
   этой страницы компоненты.
   ========================================================================== */

/* ---------- Hero ---------- */
.bq-hero{ padding:50px 0; }
.bq-hero-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:stretch; }
@media (min-width:900px){ .bq-hero-grid{ grid-template-columns:1fr 1fr; gap:40px; padding-top:50px; } }
.bq-hero-carousel{ min-height:280px; background:var(--color-surface); overflow:hidden; }
.bq-hero-carousel.carousel--media{ width:100%; height:100%; aspect-ratio:4/3; border-radius:0; }
@media (max-width:899px){ .bq-hero-carousel{ width:100vw; margin-left:calc(50% - 50vw); } }
@media (min-width:900px){ .bq-hero-carousel.carousel--media{ aspect-ratio:auto; border-radius:var(--radius); } }
.bq-hero-content{ text-align:center; display:flex; flex-direction:column; justify-content:center; padding:0 20px; }
@media (min-width:900px){ .bq-hero-content{ text-align:left; padding:0; } }
.bq-hero-title{ font-size:clamp(2rem,5vw,3rem); margin-bottom:.4em; }
.bq-hero-lede{ font-size:2.4rem; margin-bottom:0; }

.bq-hero-bottom{
  margin-top:40px; padding-top:32px; border-top:1px solid var(--color-border);
  display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
}
.bq-hero-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.bq-hero-social{ display:flex; gap:14px; justify-content:center; }
.bq-hero-social a{
  width:72px; height:72px; border-radius:50%; border:1px solid var(--color-border); color:#000;
  display:inline-flex; align-items:center; justify-content:center;
}
.bq-hero-social a svg{ width:30px; height:30px; }
.bq-hero-address{ font-size:1.6rem; color:var(--color-text-dim); font-weight:600; }

/* ---------- О празднике (текст + галерея сбоку) ---------- */
.bq-about-grid{ display:grid; grid-template-columns:1fr; gap:32px; align-items:stretch; }
@media (min-width:900px){ .bq-about-grid{ grid-template-columns:3fr 2fr; } }
.bq-about-text p{ font-size:1.75rem; }
.bq-about-gallery{ min-height:280px; }
.bq-about-gallery.carousel--media{ aspect-ratio:4/3; }
@media (min-width:900px){ .bq-about-gallery.carousel--media{ height:100%; aspect-ratio:auto; } }
.bq-about-more{ max-width:820px; margin:36px auto 0; }
.bq-about-more p{ font-size:1.75rem; }

/* ---------- Program pricing cards ---------- */
.program-grid-wrap{ position:relative; }
.program-grid-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
}
.program-grid-arrow--prev{ left:-6px; }
.program-grid-arrow--next{ right:-6px; }
@media (max-width:900px){
  .program-grid-arrow{ display:none; } /* на планшетах/мобильных достаточно свайпа, стрелки только для десктопа с курсором */
}

.program-grid{
  display:flex; gap:28px; overflow-x:auto; padding:20px 4px 28px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.program-grid::-webkit-scrollbar{ display:none; } /* нативный скроллбар скрыт: своя полоса ниже (custom, не зависит от браузера/ОС) */

/* Кастомная полоса прокрутки — рисуется нами, а не браузером, поэтому одинаково видна и настраивается
   на iOS Safari/Android Chrome, где ::-webkit-scrollbar на тач-скролле браузеры игнорируют. */
.program-grid-scrollbar{
  position:relative; height:12px; margin:0 4px 4px; border-radius:999px; background:var(--color-surface); border:1px solid var(--color-border);
  cursor:pointer; touch-action:none;
}
.program-grid-scrollbar-thumb{
  position:absolute; top:0; left:0; height:100%; min-width:40px; border-radius:999px; background:var(--color-accent);
  cursor:grab; touch-action:none;
}
.program-grid-scrollbar-thumb:active{ cursor:grabbing; }
.program-card{
  position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:32px 30px; display:flex; flex-direction:column; gap:16px; text-align:center;
  flex:0 0 340px; width:340px; scroll-snap-align:start;
}
.program-card.is-hit{ border-color:var(--color-accent); box-shadow:0 4px 18px rgba(194,102,11,.18); }
.program-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--color-accent); color:#fff;
  font-size:.8rem; font-weight:700; letter-spacing:.04em; padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.program-card h3{ font-size:1.5rem; text-align:center; margin-bottom:0; }
.program-duration{ text-align:center; color:var(--color-accent); font-weight:700; }
.program-includes{ list-style:none; margin:0; padding:0; flex:1; text-align:center; }
.program-includes li{ padding:8px 0; border-top:1px dashed var(--color-border); font-size:1.5rem; }
.program-includes li:first-child{ border-top:none; }
.program-bonus{ font-size:1.35rem; color:var(--color-text-dim); font-style:italic; }
.program-price{ text-align:center; font-family:var(--font-heading); font-size:1.8rem; color:var(--color-counter); font-weight:700; }
.program-schedule{
  max-width:700px; margin:40px auto 0; text-align:center; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius); padding:24px 28px; font-size:1.65rem;
}

/* ---------- Quest cards ---------- */
.quest-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
@media (min-width:860px){ .quest-grid{ grid-template-columns:repeat(2,1fr); } }
.quest-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.quest-card-carousel{ --carousel-ratio:4/3; }
.quest-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:14px; flex:1; }
.quest-card h3{ font-size:1.6rem; margin-bottom:0; }
.quest-card p{ font-size:1.6rem; }
.quest-card details{ margin-top:4px; }
.quest-card summary{
  cursor:pointer; color:var(--color-accent); font-weight:700; font-family:var(--font-heading); font-size:1.05rem; list-style:none;
}
.quest-card summary::-webkit-details-marker{ display:none; }
.quest-card summary::after{ content:" ▾ подробнее"; font-weight:400; font-size:.9rem; }
.quest-card details[open] summary::after{ content:" ▴ свернуть"; }
.quest-card details p{ margin-top:12px; color:var(--color-text-dim); }
.quest-card .btn{ align-self:flex-start; margin-top:auto; }

/* ---------- Workshop cards ---------- */
.workshop-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:640px){ .workshop-grid{ grid-template-columns:repeat(2,1fr); } }
.workshop-card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; }
.workshop-card-carousel{ --carousel-ratio:4/3; }
.workshop-card-body{ padding:22px 24px; }
.workshop-card h3{ font-size:2rem; }
.workshop-card p{ font-size:1.5rem; }
.workshop-note{ font-size:1.35rem; color:var(--color-text-dim); font-style:italic; }

/* ---------- Services ---------- */
.service-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.service-row{
  display:flex; justify-content:space-between; gap:16px; padding:16px 6px; border-bottom:1px dashed var(--color-border);
  font-size:1.65rem;
}
.service-row .price{ color:var(--color-counter); font-weight:700; white-space:nowrap; }
.service-gallery{ margin-top:36px; }

/* ---------- Team (reuses .team-grid/.team-card from main theme) ---------- */
.bq-team-role{ color:var(--color-text-dim); font-size:1.5rem; }
@media (min-width:640px){
  #bq-team .team-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  #bq-team .team-grid{ grid-template-columns:repeat(3,1fr); }
}
.bq-team-role .exp-divider{ display:block; border-top:1px solid var(--color-border); margin:10px 0 8px; }

/* ---------- Booking form ---------- */
.booking-grid{ display:grid; grid-template-columns:1fr; gap:18px; min-width:0; }
.booking-grid .form-row{ min-width:0; }
.booking-grid .form-row.full{ grid-column:1 / -1; }
.form-row select{
  background:var(--color-bg); border:1px solid var(--color-border); border-radius:6px; padding:14px 16px; color:var(--color-text); width:100%; max-width:100%; box-sizing:border-box;
  font-size:1.1rem;
}
#bq-booking-form .form-row label{ font-size:1.65rem; }
#bq-booking-form .form-row input,
#bq-booking-form .form-row select{ font-size:1.65rem; padding:14px 16px; }

/* ---------- Общее увеличение обычного текста на этой странице (не заголовки) ---------- */
.page-template-page-birthday-php .faq-item p,
.page-template-page-birthday-php .contacts-info p,
.page-template-page-birthday-php .section-subtitle,
.page-template-page-birthday-php .consent-check{
  font-size:1.65rem;
}
.page-template-page-birthday-php .consent-check{ font-size:1.3rem; }

/* ---------- Выбор времени начала праздника ---------- */
.time-slot-picker{ display:flex; gap:16px; flex-wrap:wrap; }
.time-slot{
  position:relative; display:inline-flex; cursor:pointer; overflow:hidden;
  border-radius:var(--radius);
}
.time-slot input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.time-slot-visual{
  display:inline-flex; align-items:center; justify-content:center; min-width:150px; padding:16px 24px;
  font-family:var(--font-heading); font-size:1.3rem; color:var(--color-text); background:var(--color-surface);
  border:2px solid var(--color-border); border-radius:var(--radius); transition:border-color .2s ease, background .2s ease;
}
.time-slot input:checked + .time-slot-visual{ border-color:var(--color-accent); background:var(--color-bg); color:var(--color-accent); }
.time-slot input:focus-visible + .time-slot-visual{ outline:2px solid var(--color-accent); outline-offset:2px; }
.time-slot-taken-badge{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:rgba(255,255,255,.88); color:var(--color-counter); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:0; border-radius:var(--radius);
  padding:0 6px; text-align:center; box-sizing:border-box; overflow-wrap:anywhere;
}
.time-slot.is-taken{ cursor:not-allowed; }
.time-slot.is-taken .time-slot-visual{ opacity:.5; }
.time-slot.is-taken .time-slot-taken-badge{ display:flex; }

/* ---------- Чекбоксы доп.услуг ---------- */
.service-checklist{ display:flex; flex-direction:column; gap:4px; max-width:760px; margin:0 auto; }
.service-check{
  display:flex; align-items:center; gap:14px; padding:10px 6px; font-size:1.4rem; cursor:pointer; border-bottom:1px dashed var(--color-border);
}
.service-check .price{ margin-left:auto; color:var(--color-counter); font-weight:700; white-space:nowrap; }

/* ---------- Калькулятор стоимости ---------- */
.price-calc{
  display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:760px; margin:24px auto;
  background:var(--color-surface); border:1px solid var(--color-accent); border-radius:var(--radius); padding:20px 26px;
  font-size:1.3rem;
}
.price-calc strong{ font-family:var(--font-heading); font-size:1.9rem; color:var(--color-counter); }

/* ---------- Simple gallery strip (sections 2, 5 bonus) ---------- */
.gallery-strip{ --carousel-ratio:16/9; max-width:900px; margin:32px auto 0; }
/* Отзывы на этой странице — независимый размер от главного сайта, в 2 раза крупнее прежнего. */
.reviews-carousel{ --carousel-ratio:2/1; }

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (совокупные правки)
   ========================================================================== */
@media (max-width:767px){

  /* ---- Общее уменьшение обычного текста (не заголовков) и межстрочного интервала ---- */
  .bq-hero-lede{ font-size:1.6rem; line-height:1.35; }
  .bq-about-text p,
  .bq-about-more p{ font-size:1.17rem; line-height:1.4; }
  .bq-hero-address{ font-size:1.07rem; line-height:1.4; }
  .program-includes li{ font-size:1rem; }
  .program-bonus{ font-size:.9rem; line-height:1.4; }
  .program-schedule{ font-size:1.1rem; line-height:1.4; }
  .quest-card p{ font-size:1.07rem; line-height:1.4; }
  .workshop-card p{ font-size:1rem; line-height:1.4; }
  .workshop-note{ font-size:.9rem; line-height:1.4; }
  .bq-team-role{ font-size:1rem; line-height:1.4; }
  .service-row{ font-size:1.1rem; }
  .service-check{ font-size:.95rem; }
  #bq-booking-form .form-row label{ font-size:1.1rem; }
  #bq-booking-form .form-row input,
  #bq-booking-form .form-row select{ font-size:1.1rem; }
  .page-template-page-birthday-php .faq-item p,
  .page-template-page-birthday-php .contacts-info p,
  .page-template-page-birthday-php .section-subtitle{ font-size:1.1rem; line-height:1.4; }
  .price-calc{ font-size:.9rem; }
  .price-calc strong{ font-size:1.3rem; }

  /* ---- "О празднике": галерея переезжает наверх секции, во всю ширину экрана ---- */
  .bq-about-gallery{ order:-1; width:100vw; margin-left:calc(50% - 50vw); border-radius:0; min-height:0; }
  .bq-about-gallery.carousel--media{ aspect-ratio:4/3; }

  /* ---- Карусели квестов и мастер-классов: в 1.5 раза выше ---- */
  .quest-card-carousel,
  .workshop-card-carousel,
  .bq-about-gallery{ --carousel-ratio:2/3; }
  .quest-card-carousel.carousel--media,
  .workshop-card-carousel.carousel--media{ aspect-ratio:2/3; }

  /* ---- Карусель отзывов: в 3 раза ниже ---- */
  .reviews-carousel.carousel--media{ aspect-ratio:3/4; }

  /* ---- Карточки программ: крупный, стилизованный, центрирующий скролл ---- */
  .program-grid{
    scroll-snap-type:x mandatory; padding-left:8vw; padding-right:8vw; gap:16px;
  }
  .program-card{ width:82vw; flex:0 0 82vw; scroll-snap-align:center; padding:26px 22px; }

  /* Полоса прокрутки на мобильных — в 3 раза выше, чем на десктопе (12px → 36px) */
  .program-grid-scrollbar{ height:36px; margin:0 8vw 4px; }

  /* ---- Доп.услуги: список не должен вылезать за экран ---- */
  .service-list, .service-checklist{ max-width:100%; padding:0 4px; }
  .service-row{ flex-wrap:wrap; }
  .service-check{ padding:10px 2px; }
}

/* ---------- Шапка страницы ДР: логотип слева на всю высоту, меню в 2 строки, кнопки справа столбиком ---------- */
.header-auth-column{ display:none; }
@media (min-width:1300px){
  .header-inner--birthday{ align-items:stretch; flex-wrap:nowrap; }
  .main-nav--2rows{ align-self:stretch; }
  .main-nav--2rows ul{ max-width:760px; row-gap:6px; column-gap:16px; align-content:center; }
  .header-auth-column{
    display:flex; flex-direction:column; justify-content:center; gap:6px; margin-left:auto; flex-shrink:0;
  }
  .header-auth-column .auth-trigger{ font-size:.85rem; padding:6px 14px; text-align:center; }
}

/* ---------- Слайдеры страницы ДР: фото целиком, тёмный фон вокруг ----------
   Раньше стояло object-fit:cover — снимки обрезались по краям, чтобы
   заполнить слайд. Теперь contain: фото видно полностью, а свободное место
   вокруг заливается тёмным фоном в цветах сайта. */
#bq-content .carousel--media,
.bq-hero-carousel.carousel--media,
.bq-about-gallery.carousel--media,
.quest-card-carousel.carousel--media,
.workshop-card-carousel.carousel--media,
.reviews-carousel.carousel--media,
.bq-place-carousel.carousel--media{
  background:var(--bq-carousel-bg, #2b2119);
}
#bq-content .carousel--media .carousel-slide img,
.bq-hero-carousel.carousel--media .carousel-slide img,
.bq-about-gallery.carousel--media .carousel-slide img,
.quest-card-carousel.carousel--media .carousel-slide img,
.workshop-card-carousel.carousel--media .carousel-slide img,
.reviews-carousel.carousel--media .carousel-slide img,
.bq-place-carousel.carousel--media .carousel-slide img{
  object-fit:contain;
  background:var(--bq-carousel-bg, #2b2119);
}

/* ---------- Предупреждение об обязательном игротехнике ---------- */
.bq-notice-overlay{
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.bq-notice{
  background:var(--color-surface); border-radius:var(--radius); padding:26px 24px; max-width:460px;
  width:100%; box-sizing:border-box; text-align:center;
}
.bq-notice p{ margin:0 0 20px; font-size:1.02rem; line-height:1.5; overflow-wrap:anywhere; }
.bq-notice .btn{ width:100%; box-sizing:border-box; }

/* Обязательная услуга: галочку видно, но снять её нельзя. */
.service-check--locked.is-locked{ opacity:.9; }
.service-check--locked.is-locked .check-visual{ cursor:not-allowed; }
.service-check--locked.is-locked .service-check-label::after{
  content:" (обязательно для этого квеста)"; font-size:.82em; color:var(--color-counter);
}

/* Карусель из одного снимка — растягиваем на весь блок: тёмные поля вокруг
   единственного фото выглядят как ошибка, а не как оформление. */
#bq-content .carousel--media.is-single .carousel-slide img,
.bq-place-carousel.carousel--media.is-single .carousel-slide img,
.bq-about-gallery.carousel--media.is-single .carousel-slide img{
  object-fit:cover;
}

/* Фотографии внутри карточки программы */
.program-card-photos{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.program-card-photos img{
  width:72px; height:72px; object-fit:cover; border-radius:8px; cursor:zoom-in; flex-shrink:0;
  border:1px solid var(--color-border);
}
@media (max-width:600px){
  .program-card-photos img{ width:60px; height:60px; }
}