/* =========================================================
   📄 booking-form.css
   Блок: Booking / Форма бронирования
   Проект: КОЧУЙ


   Статус:
   - CANON / FINAL
   ========================================================= */
   /* контекст выбранного тура */
.booking-tour-context{
  max-width: 720px;
  margin: var(--space-6) auto;
}

   /* =========================================================
   📌 СТАТУС ТУРА
   Назначение:
   - короткая служебная подпись над формой
   - статус / тип / метка выбранного тура
   - используется как вводный текст перед media-блоком

   Примечания:
   - НЕ часть media-slot
   - НЕ участвует в логике формы
   - чисто визуальный, страничный элемент
   ========================================================= */

.booking-tour-status{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--color-muted);
  margin-bottom:var(--space-4);
}

   
   .booking-tour-media{
  margin-top: calc(var(--space-6) * -1);
}

   
   
/* =========================================================
   BOOKING MEDIA SLOT
   Назначение:
   - фиксированная геометрия (якорь формы)
   - логотип по умолчанию
   - фото тура с overlay
========================================================= */

.booking-tour-media{
  position: relative;
  width:100%;
  aspect-ratio:16/8;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--color-surface);
}


.booking-tour-media-logo{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  opacity:.25;
  pointer-events:none;
}


.booking-tour-media-logo svg{
  width:64%;          /* ← КЛЮЧ */
  max-width:280px;    /* ← страховка */
  height:auto;
  display:block;
}

.booking-tour-media-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .25s ease;
}

.booking-tour-media:not(.is-empty) .booking-tour-media-logo{
  opacity:0;
}

.booking-tour-media:not(.is-empty) .booking-tour-media-img{
  opacity:1;
}


.booking-tour-media-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:var(--space-8);
  pointer-events:none;
}

.booking-tour-media-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,0)
  );
}

.booking-tour-media-title{

  margin:0;
  font-size:1.45rem;        /* крупнее */
  font-weight:600;          /* жирнее */
  line-height:1.25;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}


.booking-tour-media-duration{


  margin-top:var(--space-3);

  display:inline-block;
  align-self:flex-start;

  padding: var(--space-1) var(--space-8);

  font-size:var(--font-size-xs);
  font-weight:500;

  color:#fff;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  
 border-radius:var(--radius-lg);
  
}

.booking-tour-media-img{
  position:relative;
  z-index:0;
}

.booking-tour-media-logo{
  position:absolute;
  inset:0;
  z-index:1;
}

.booking-tour-media-overlay{
  position:absolute;
  inset:0;
  z-index:0;
}

/* когда есть фото */
.booking-tour-media:not(.is-empty) .booking-tour-media-overlay{
  z-index:2;
}

.booking-tour-media-duration:empty{
  display:none;
}



/* старый заголовок и длительность — скрыты,
   остаются только даты */
.booking-tour-context .booking-tour-title,
.booking-tour-context .booking-tour-duration{
  display:none;
}

/* =========================================================
   📅 TOUR DATES — RADIO AS BADGES
   ========================================================= */

.booking-dates{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
   margin-top: calc(var(--space-4) * -1);
}

.booking-date{
  position:relative;
}

.booking-date input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.booking-date label{
  display:inline-flex;
  align-items:center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.875rem; /* или var(--font-size-sm), если есть */
  
   border-radius: var(--radius-md);
  
  border:1px solid var(--color-border);
  background:var(--color-surface);
  color:var(--color-fg);
  cursor:pointer;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.booking-date label:hover{
  border-color:var(--color-accent);
}

.booking-date input:checked + label{
  background:var(--color-accent);
  color:var(--color-on-accent);
  border-color:var(--color-accent);
}

/* =========================================================
   📅 TOUR DATES —конец
   
   ========================================================= */
/* =========================================================
   🧱 SAFE MODE: block lower fields when selector is active
   NO JS / NO HTML
   ========================================================= */

/* пока селектор в фокусе — выключаем всё ниже */
/* убери opacity вообще */



/* слегка приглушаем форму — чисто визуально */
.booking-tour-select:focus-within ~ .booking-form{
  opacity:.2;
  transition:opacity .2s ease;
}


/* =========================================================
   🧾 BOOKING FORM — HIDE TOP LABELS (EXACT)
   Назначение:
   - убрать label над полями ТОЛЬКО в booking
   - не влиять на другие формы сайта
   ========================================================= */

.booking-form .form-group > .form-label{
  display:none;
}

/* ритм между полями */
.booking-form .form-group{
  margin-bottom: var(--space-4);
}


/* =========================================================
   📌 СЕЛЕКТОР ТУРА — ВЫПАДАЮЩЕЕ МЕНЮ (COMPACT)
   Назначение:
   - пункты уменьшенной высоты
   - меню выпадает поверх, не ломает форму
   - прокрутка внутри меню
   ========================================================= */


/* === reset для пунктов селектора (SAFE, вместо all: unset) === */
.booking-tour-select .tour-select-item{
  display:block;
  width:100%;
  box-sizing:border-box;

  /* сброс браузерных кнопок / ссылок */
  background:none;
  border:0;
  outline:0;

  /* типографика — явно */
  font: inherit;
  color: inherit;
  text-align:left;

  cursor:pointer;
}


/* === базовый вид пунктов === */
.booking-tour-select .tour-select-item{
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-base);
  line-height: 1.2;
  color: var(--color-fg);
}


/* === hover пунктов === */
.booking-tour-select .tour-select-item:hover{
  background: var(--color-accent-light);
   
}

[data-theme="dark"] .booking-tour-select .tour-select-item:hover{
  color: #000;
}




/* === контейнер селектора (якорь для dropdown) === */
.booking-tour-select{
  position: relative;
  overflow: visible;
}


/* === выпадающее меню === */
.tour-select-menu{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;

  margin-top: var(--space-2);

  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;

  background: var(--color-surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);

  z-index: 20;
}

/* убрать маркеры списка в селекторе туров */
.booking-tour-select ul{
  list-style:none;
  padding:0;
  margin:0;
}
.booking-tour-select li{
  list-style:none;
}

/* =========================================================
Тигер селектора 
   ========================================================= */
.tour-select-trigger{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  cursor:pointer;
}

.tour-select-arrow{
  margin-left:auto;
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-muted);
  transition:transform .15s ease, color .15s ease;
}

.tour-select-arrow::before{
  content:'▾';
  font-size:14px;
  line-height:1;
}


.tour-select-trigger:hover{
  background:var(--color-border);
}




/* =========================================================
   TOUR SELECT — visibility (CANON)
   ========================================================= */


/* закрыто по умолчанию */
.booking-tour-select .tour-select-menu{
  display:none;
}

/* открыто */
.booking-tour-select .tour-select-menu.is-open{
  display:block;
}






/* =========================================================
   📌 TOUR SELECT — GROUP TITLE (ONLY THIS)
   ========================================================= */

.booking-tour-select .tour-select-group-title{
  margin: var(--space-3) var(--space-4) var(--space-1);

  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: var(--color-muted);

  pointer-events: none;
}
/* сдвиг пунктов меню вправо относительно заголовка */
.booking-tour-select .tour-select-item{
  padding-left: calc(var(--space-4) + var(--space-3));
}


/* подтянуть список к заголовку */
.booking-tour-select .tour-select-group-title + ul{
  margin-top: 0;
}



/* =========================================================
  контролер коллва людей
   ========================================================= */

.people-control{
  display:grid;
  grid-template-columns: 1fr 80px;
  gap:var(--space-4);
  align-items:center;
}

.people-control input[type="range"]{
  width:100%;
}


/* =========================================================
   📎 BOOKING NOTE
   Назначение:
   - юридическая подпись под кнопкой
   - вторичный, некликабельный по смыслу текст
   ========================================================= */

.booking-note{
  margin-top: var(--space-4);
  font-size: 0.72rem;          /* заметно меньше */
  line-height: 1.4;
  color: var(--color-muted);
}

.booking-note a{

  text-decoration: underline;
}

.booking-note a:hover{
  text-decoration: none;
}

.booking-note a{
  color: inherit;
  text-decoration: none;
  opacity: .7;
}

/* =========================================================
   🧮 NUMBER INPUT — HIDE SPINNERS (BOOKING ONLY)
   ========================================================= */

/* Chrome, Edge, Safari */
.booking-form input[type="number"]::-webkit-inner-spin-button,
.booking-form input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.booking-form input[type="number"]{
  -moz-appearance: textfield;
}