/* ================================
   Variables / Reset for this view
================================ */
:root { --accent: #fc8b08; }

.tour-detail { padding:16px 0 40px; }

/* breadcrumbs */
.breadcrumbs__list { list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumbs__list li+li::before { content:"›"; margin:0 6px; color:#aaa; }
.breadcrumbs--on-hero a{ color:#fff; opacity:.9; }
.breadcrumbs--on-hero a:hover{ opacity:1; }

/* ================================
   HERO
================================ */
.tour-detail__banner{
    --image: none;
    background: var(--image) center/cover no-repeat;
    padding: 120px 0 80px;
    position: relative;
}
.tour-detail__banner::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.35); }
.tour-detail__banner .container{ position: relative; z-index: 1; }
.tour-detail__banner-in{ color:#fff; display:flex; flex-direction:column; gap:10px; }

/* Title + age badge */
.section__title--hero{
    color:#fff; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    margin:0;
}
.age-badge{
    padding:4px 10px; border:1px solid rgba(255,255,255,.7); color:#fff;
    border-radius:999px; font-weight:700; font-size:12px; line-height:1;
}
@media (max-width: 480px){
    .section__title--hero{ gap:8px; }
    .age-badge{ font-size:11px; padding:3px 8px; }
}

/* ================================
   GRID
================================ */
.tour-detail__grid{
    display:grid; grid-template-columns: minmax(0,1fr) 360px;
    gap:24px; align-items:start; margin-top:24px;
}
@media (max-width: 960px){
    .tour-detail__grid{ grid-template-columns: 1fr; }
}

/* ================================
   Gallery (left)
================================ */
.gallery-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.gallery-grid a{ display:block; border-radius:16px; overflow:hidden; }
.gallery-grid img{ width:100%; height:220px; object-fit:cover; display:block; }
@media (max-width: 960px){ .gallery-grid img{ height:180px; } }

/* ================================
   Sidebar (right)
================================ */
.tour-detail__side{ position:relative; }
.tour-detail__side-in{
    position:sticky; top:20px; background:#fff; border:1px solid #eee; border-radius:16px;
    padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
@media (max-width: 960px){ .tour-detail__side-in{ position:static; } }

/* Actions: route + share aligned */
.tour-detail__actions{
    display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:10px; border:1px solid #ddd; background:#fff;
    cursor:pointer; font-weight:600; text-decoration:none; color:#111;
    transition: box-shadow .2s ease, transform .02s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(1px); }
.btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--route{ background:#fff; }

/* share to the right of the button on wide screens */
.tour-detail__actions .ya-share2{ }
@media (max-width: 520px){
    .tour-detail__actions{ gap:10px; }
    .tour-detail__actions .ya-share2{ margin-left:0; }
}

/* blocks inside sidebar */
.tour-detail__address, .tour-detail__duration, .tour-detail__price, .tour-detail__phone{ margin:12px 0; }
.tour-detail__divider{ border:0; border-top:1px solid #eee; margin:12px 0; }

/* ================================
   Dates & Times
================================ */
.tour-detail__dates{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.tour-detail__times-list{ display:flex; flex-wrap:wrap; gap:8px; }

.tour-date{
    padding:8px 14px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer;
    transition: all 0.2s ease; font-size:14px;
}
.tour-date:hover{ border-color: var(--accent); color: var(--accent); }
.tour-date.active{ background: var(--accent); color:#fff; border-color: var(--accent); }

.tour-time{
    padding:6px 12px; border-radius:6px; border:1px solid #ccc; background:#f9f9f9; cursor:pointer;
    transition: all 0.2s ease; font-size:14px;
}
.tour-time:hover{ background:#eee; }
.tour-time.active{ background:#333; color:#fff; border-color:#333; }

/* ================================
   Description
================================ */
.tour-detail__desc{ padding:32px 0; }
.tour-detail__desc .section__title{ margin-bottom:12px; }

/* ================================
   Map
================================ */
.tour-detail__map-body{
    width:100%; height:420px; border-radius:16px; overflow:hidden; border:1px solid #eee;
}

/* ================================
   Contacts
================================ */
.tour-detail__phone { margin:16px 0; }
.tour-detail__phone strong{ display:block; font-weight:700; margin-bottom:6px; }
.tour-detail__phone div{ margin-bottom:4px; }
.tour-detail__phone a{
    color: var(--accent);
    font-weight:600; text-decoration:none;
}
.tour-detail__phone a:hover{ text-decoration:underline; }
/* ======== BOOKING MODAL ======== */
:root{ --accent: #fc8b08; }

.no-scroll{ overflow:hidden; }

.booking-modal[aria-hidden="true"]{ display:none; }
.booking-modal{
    position:fixed; inset:0; z-index:1000;
    display:block;
}
.booking-modal__overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.5);
}
.booking-modal__dialog{
    position:relative; z-index:1; max-width:720px; margin:5vh auto; background:#fff;
    border-radius:16px; border:1px solid #eee; padding:20px 20px 16px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}
@media (max-width: 560px){
    .booking-modal__dialog{ margin:0; min-height:100vh; border-radius:0; }
}

.booking-modal__close{
    position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:50%;
    border:1px solid #eee; background:#fff; cursor:pointer; font-size:20px; line-height:1;
}

.booking-modal__title{ margin:0 0 6px; font-size:22px; font-weight:800; }
.booking-modal__subtitle{ margin:0 0 14px; color:#555; }

.booking-form{ display:grid; gap:12px; }
.bf-row{ display:block; }
.bf-row--split{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 560px){ .bf-row--split{ grid-template-columns:1fr; } }

.bf-label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#777; margin-bottom:6px; }
.bf-value{ font-weight:700; }

.bf-input{
    width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px; outline:0;
    background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
.bf-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(252,139,8,.15); }

textarea.bf-input{ resize:vertical; min-height:84px; }

.bf-stepper{ display:flex; align-items:center; gap:8px; }
.bf-stepper__btn{
    width:36px; height:36px; border-radius:10px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:18px;
}
.bf-stepper__input{ width:72px; text-align:center; }

.bf-contacts{ display:flex; gap:10px; flex-wrap:wrap; }
.bf-chip{ display:inline-flex; align-items:center; }
.bf-chip input{ display:none; }
.bf-chip__ui{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #ddd; border-radius:999px; cursor:pointer;
    transition:all .2s ease;
}
.bf-chip input:checked + .bf-chip__ui{
    border-color: var(--accent); background: rgba(252,139,8,.08); color:#000;
}

.bf-check{ display:flex; gap:8px; align-items:flex-start; font-size:14px; }
.bf-check input{ margin-top:3px; }

.bf-actions{ display:flex; justify-content:flex-end; margin-top:6px; }
.btn.btn--primary{ background: var(--accent); border-color: var(--accent); color:#fff; }
/* Центр модалки */
.booking-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}
.booking-centered .booking-modal__dialog{
    margin: 0;           /* больше не нужен отступ сверху/снизу */
    max-height: 90vh;
    overflow: auto;
}
@media (max-width: 560px){
    .booking-centered .booking-modal__dialog{
        margin: 0; min-height: 100vh; border-radius: 0;
    }
}

/* Пары "Заголовок: Значение" в одну строку */
.bf-inline{
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.bf-inline .bf-label{
    margin: 0; font-size: 14px; text-transform: none; letter-spacing: normal; color:#555;
}
.bf-inline .bf-label::after{ content: ":"; margin-left: 2px; }
.bf-inline .bf-value{ font-weight: 700; color:#111; }

/* Кнопка-пилюля для "Дата и время" */
.bf-chip--pill{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid #ddd; border-radius:999px; padding:8px 12px; background:#fff; color:#111;
}

/* Акцент для ссылки на политику */
.bf-check a{ color: var(--accent); }
.bf-check a:hover{ text-decoration: underline; }
h3 {
    font-size: 1.55rem;
}

.section__header-wrapper {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 20px 20px 15px;
    border-radius: 8px;
    margin: 50px 0 20px;
}
.section__header-wrapper .breadcrumbs__list li a {
    color: #fff;
    opacity: .9;
    transition: opacity .2s;
}
.section__header-wrapper .breadcrumbs__list li a:hover {
    color: #fc8b08;
    opacity: 1;
}
.booking-result[aria-hidden="true"]{ display:none; }
.booking-result[aria-hidden="false"]{ display:block; }
.booking-result__overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
}
.booking-result__dialog{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    z-index:1001;
}
.booking-result__dialog > div{
    background:#fff; border-radius:16px; padding:24px; width:min(560px, 92vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.booking-result__close{
    position:absolute; top:12px; right:12px; background:none; border:none; font-size:22px; cursor:pointer;
}
.br-success h3{ color:#2e7d32; }
.br-error   h3{ color:#c62828; }