.booking-page {
  display: flex !important;
  justify-content: center !important; /* центр по горизонтали */
  align-items: center !important;     /* центр по вертикали */
  padding: 40px 20px !important;
  min-height: 100vh !important;
  background: url('/assets/images/booking-bg.jpg') center/cover no-repeat !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.booking-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
}

.booking-shell {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;  /* центрируем блок */
}

.booking-inner {
  background: var(--beige-light) !important;
  border-radius: 20px !important;
  padding: 2rem 2.5rem !important;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: justify;
}

/* адаптив */
@media (max-width: 768px) {
  .booking-inner {
    width: 95% !important;
    padding: 1.5rem !important;
  }
  .booking-hero { 
    min-height: 200px !important;
  }
}

/* Заголовок */
.booking-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.8rem;
  font-family: 'Noto Serif', serif;
  color: #2b2b2b;
}

/* Кнопка телеги */
.btn-telegram {
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 12px;
  background: #0088cc;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease;
}
.btn-telegram:hover {
  background: #0077b5;
}

.switch-wrap{
  display:flex; justify-content:center; align-items:center; margin-bottom:2rem;
}

/* сам переключатель — по центру, шире */
.switch{
  position:relative;
  width:220px;                  /* шире */
  height:56px;
  background:#e5d2b8;           /* беж */
  border-radius:28px;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.18);
  margin:0 auto;                /* центр */
}

/* инпут прячем */
.switch input{ display:none; }

/* подписи внутри дорожки (левая/правая) */
.switch-left,.switch-right{
  position:absolute; top:0;
  width:50%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; z-index:2;   /* над бегунком */
  transition:color .25s ease, opacity .25s ease;
  pointer-events:none;
}
.switch-left{ left:0; color:#fff; }          /* актив по умолчанию */
.switch-right{ right:0; color:#666; }

/* бегунок */
.switch-thumb{
  position:absolute; top:3px; left:3px;
  width:calc(50% - 6px); height:calc(100% - 6px);
  background:#a67c52;
  border-radius:24px;
  transition:left .28s ease, background .28s ease, box-shadow .28s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* состояние "Ресторан" */
.switch input:checked ~ .switch-thumb{
  left:calc(50% + 3px);
  background:#8b623f;
}
.switch input:checked ~ .switch-left{ color:#666; }
.switch input:checked ~ .switch-right{ color:#fff; }

/* НАДписи-легенды (висят над свитчем, не блок выше) */
.legend{
  position:absolute; z-index:3; bottom:100%;
  font-weight:800; font-size:1.05rem; line-height:1;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5);
  transform:translateY(-8px);
  pointer-events:none;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.legend-left{ left:8px; }        /* выравниваем над левым краем */
.legend-right{ right:8px; text-align:right; }

/* по умолчанию показана левая легенда (Стол) */
.switch .legend-left{ opacity:1; }

/* при выборе ресторана — показываем правую легенду */
.switch input:checked ~ .legend-left{ opacity:0; }
.switch input:checked ~ .legend-right{
  opacity:1; transform:translateY(-8px);
}


/* Фото героя */
.booking-hero {
  width: 100%;
  min-height: 300px;
  border-radius: 16px;
  background: #ddd center/cover no-repeat;
  margin-bottom: 1.8rem;
  transition: background-image 0.5s ease;
}

/* Поля формы */
.field {
  margin-bottom: 1.2rem;
}
.field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 1rem;
  color: #444;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid #ddd;
  border-radius: 12px;
  font-size: 1rem;
  background: #fafafa;
  transition: all 0.2s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #a67c52;
  background: #fff;
  outline: none;
  box-shadow: 0 0 10px rgba(166,124,82,0.25);
}
.field textarea {
  min-height: 60px;
  resize: vertical;
}

/* Дата/время */
.date-row .date-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}
.date-row .btn {
  padding: 10px 16px;
  border-radius: 10px;
  background: #a67c52;
  color: #fff;
  border: none;
  cursor: pointer;
}
.date-display {
  flex: 1;
  padding: 12px 14px;
  background: #f0f0f0;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #444;
}
/* Кнопка отправки */
.btn-primary {
  width: 100%;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #a67c52, #8b623f);
  color: #fff;
  border: none;
  padding: 16px 20px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: 0.25s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(166,124,82,0.45);
}
.btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* === Слайдер-капча — стабильный drag === */
.slider-captcha{ margin-top:12px; user-select:none; }
.sc-track{
  position:relative; height:48px; border-radius:12px;
  background:#f1e6d5; box-shadow:inset 0 2px 6px rgba(0,0,0,.12);
  overflow:hidden;
}
.sc-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(135deg,#a67c52,#8b623f);
  transition:width .06s linear; z-index:1;
}
.sc-text{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:600; color:#6b6b6b; pointer-events:none; z-index:2;
}
.sc-handle{
  position:absolute; top:4px; left:4px; width:40px; height:40px;
  border:none; border-radius:10px; background:#fff; outline:none;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  cursor:grab; transition:box-shadow .2s ease, left .06s linear;
  z-index:3;                           /* поверх всего */
  touch-action:none;                   /* чтобы тач не скроллил страницу */
  -webkit-user-drag:none;
}
.sc-handle:active{ cursor:grabbing; }
.slider-captcha.solved .sc-text{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }


/* === Модалка выбора даты — стиль и анимация === */
.picker-modal{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  justify-content:center; align-items:center;
  z-index:1000; opacity:0; transition:opacity .2s ease;
}
.picker-modal.active{ display:flex !important; opacity:1; }

.picker-panel{
  background:#fff; border-radius:16px;
  padding:22px 24px; min-width:320px; max-width:90vw;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  transform:translateY(8px); transition:transform .2s ease;
}
.picker-modal.active .picker-panel{ transform:translateY(0); }

.picker-panel label{
  display:block; font-weight:700; color:#444; margin:0 0 10px;
}
.picker-panel input[type="date"],
.picker-panel select{
  width:100%; 
  padding-top:12px;
  padding-bottom:12px; 
  border:2px solid #e8e1d6; border-radius:12px;
  background:#faf7f1; font-size:1rem; outline:none; transition:all .2s;
  margin-top:6px; margin-bottom:14px;
}
.picker-panel input[type="date"]:focus,
.picker-panel select:focus{
  border-color:#a67c52; background:#fff; box-shadow:0 0 0 4px rgba(166,124,82,.15);
}

.picker-buttons{ display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
.picker-buttons .btn{
  padding:10px 16px; border:none; border-radius:10px; cursor:pointer; font-weight:700;
  background:#f0e7da; color:#5a5a5a; transition:transform .1s ease, box-shadow .2s;
}
.picker-buttons .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.picker-buttons .btn-primary{
  background:linear-gradient(135deg,#a67c52,#8b623f); color:#fff;
}


/* Адаптив */
@media (max-width: 768px) {
  .booking-inner {
    width: 95%;
    
  }
  .booking-hero { min-height: 200px; }
}