/* ============================================================
   Shymbulak Resort Hotel — общий дизайн-система внутренних страниц
   Палитра: брендбук стр. 14. Шрифт: Geologica. Motion: утончённый.
   ============================================================ */
:root {
    --navy: #27304c;         /* Night Blue — основной текст, логотип */
    --navy-deep: #1c2438;
    --ice: #8fbfe2;          /* Ice Blue — вторичный акцент */
    --water: #f0f7fc;        /* фон */
    --water-tint: #f0f7fc;
    --sunset: #f15623;       /* Sunset Orange — фирменный CTA-акцент */
    --sunset-deep: #c53f0a;  /* тёмный sunset для текста: 4.9:1 на белом и #f0f7fc */
    --cta: #d13f0c;          /* подложка CTA: белый текст 4.7:1 */
    --muted-orange: #f4826d;
    --text-secondary: #5c6478;
    --surface: #ffffff;
    --ink: #141a28;          /* глубокий navy — подложка под слайды */
    --ease-refined: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; scrollbar-color: var(--navy) var(--water); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
/* Мобильная платформа: мгновенный tap, без выделения текста на контролах */
button, a, [role="button"] { touch-action: manipulation; }
button, .dropbtn, .site-nav a, .lang-btn, .social-btn, .pill-link, [role="button"] { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--water); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 10px; border: 2px solid var(--water); }
::-webkit-scrollbar-thumb:hover { background: var(--sunset); }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    background-color: var(--water); color: var(--navy);
    display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
}
/* fade-in только при включённом JS (класс html.js ставится в <head>) — иначе контент невидим */
html.js body { opacity: 0; transition: opacity 0.7s var(--ease-refined); }
html.js body.is-loaded, body.is-loaded { opacity: 1; }
::selection { background: var(--sunset); color: #fff; }

/* Skip-link для клавиатурных пользователей */
.skip-link {
    position: absolute; top: -70px; inset-inline-start: 16px; z-index: 200;
    background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 500; text-decoration: none;
    transition: transform 0.2s var(--ease-refined);
}
.skip-link:focus { transform: translateY(82px); }
#main { scroll-margin-top: 80px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Сплит-лейаут: фото слева, контент справа ===== */
.split-layout { display: flex; flex: 1; flex-direction: column; }
@media (min-width: 992px) { .split-layout { flex-direction: row; } }

.image-panel {
    flex: 1; min-height: 40vh; position: relative; overflow: hidden; background-color: var(--ink); z-index: 10;
}
@media (min-width: 992px) {
    .image-panel {
        min-height: 100vh; height: 100vh; position: sticky; top: 0;
        box-shadow: 25px 0 50px rgba(0, 0, 0, 0.08), 5px 0 15px rgba(0, 0, 0, 0.04);
    }
}

.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; opacity: 0; transform: scale(1);
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide.active { opacity: 1; transform: scale(1.08); will-change: opacity, transform; }

.content-panel {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 100px 20px 60px 20px; text-align: center; position: relative;
    background-color: var(--water); z-index: 1; isolation: isolate;
}

/* Фоновая текстура — «следы лыж на снегу» (раздел "Узор" брендбука), едва заметна */
.content-panel::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cpath d='M-20 60 C 60 20, 100 140, 180 90 S 300 30, 420 100' stroke='%23dedcd6' stroke-width='2' fill='none'/%3E%3Cpath d='M-20 220 C 80 180, 120 300, 220 250 S 340 190, 420 260' stroke='%23dedcd6' stroke-width='2' fill='none'/%3E%3Cpath d='M-20 340 C 60 300, 140 400, 220 360' stroke='%23dedcd6' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 500px 500px;
}

@media (min-width: 992px) {
    .content-panel { padding: 130px 40px 60px; }
    .content-panel::before {
        content: ''; position: absolute; top: 10%; bottom: 10%; left: 0; width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(143, 191, 226, 0.6), transparent);
        z-index: 2;
    }
    [dir="rtl"] .content-panel::before { left: auto; right: 0; }
}

/* ===== Хедер: закреплённый, матовое стекло; логотип слева, меню справа ===== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(39, 48, 76, 0.08);
    box-shadow: 0 4px 24px rgba(39, 48, 76, 0.06);
}
.site-header__row {
    display: flex; align-items: center; gap: 12px;
    height: 70px; padding: 0 40px;
}

/* «На главную» — иконка домика */
.home-btn {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--navy); border: 1px solid rgba(39, 48, 76, 0.08);
    box-shadow: 0 3px 12px rgba(39, 48, 76, 0.05);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .home-btn:hover { transform: translateY(-2px); border-color: var(--sunset); color: var(--sunset-deep); box-shadow: 0 8px 20px rgba(39, 48, 76, 0.1); } }
.home-btn:active { transform: translateY(0) scale(0.98); }
.home-btn:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }

.brand-mark { height: 34px; display: flex; align-items: center; }
.brand-mark img { height: 100%; width: auto; display: block; }
@media (hover: hover) and (pointer: fine) { .brand-mark:hover { opacity: 0.85; } }
.brand-mark:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }

/* Основное меню: текст-ссылки, справа от логотипа */
.site-nav {
    margin-inline-start: auto;
    display: flex; align-items: center; gap: 2px;
}
.site-nav > a, .dropbtn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 13px; min-height: 44px; border-radius: 10px;
    font-family: inherit; font-size: 0.78rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--navy); background: transparent; border: none; cursor: pointer;
    text-decoration: none; white-space: nowrap;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav > a:active, .dropbtn:active { transform: scale(0.98); }
.dropdown.open .dropbtn {
    color: var(--sunset-deep); background: rgba(39, 48, 76, 0.05);
}
@media (hover: hover) and (pointer: fine) {
    .site-nav > a:hover, .dropbtn:hover {
        color: var(--sunset-deep); background: rgba(39, 48, 76, 0.05);
    }
}
.site-nav > a:focus-visible, .dropbtn:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }
.site-nav > a.is-active, .dropdown-content a.is-active { color: var(--sunset-deep); }

/* Dropdown «Гостям» */
.dropdown { position: relative; }
.arrow { display: inline-block; font-size: 0.6em; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.dropdown.open .arrow { transform: rotate(180deg); }
.dropdown-content {
    display: none;
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
    min-width: 260px; padding: 8px 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(39, 48, 76, 0.1); border-radius: 14px;
    box-shadow: 0 15px 40px rgba(39, 48, 76, 0.15);
}
.dropdown.open .dropdown-content { display: block; }
/* Desktop: плавное прерываемое открытие дропдауна (transition, не display-тоггл) */
@media (min-width: 992px) {
    .dropdown-content {
        display: block; visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: opacity 0.2s var(--ease-refined), transform 0.2s var(--ease-refined), visibility 0s linear 0.2s;
    }
    .dropdown.open .dropdown-content {
        visibility: visible; opacity: 1; transform: none;
        transition: opacity 0.2s var(--ease-refined), transform 0.2s var(--ease-refined);
    }
    /* hover-открытие — только для десктопных указателей (на тач-планшете остаётся клик) */
    @media (hover: hover) and (pointer: fine) {
        .dropdown:hover .dropdown-content {
            visibility: visible; opacity: 1; transform: none;
            transition: opacity 0.2s var(--ease-refined), transform 0.2s var(--ease-refined);
        }
    }
}
@media (hover: hover) and (pointer: fine) {
    .dropdown:hover .dropdown-content { display: block; }
    .dropdown:hover .arrow { transform: rotate(180deg); }
}
.dropdown-content a {
    display: flex; align-items: center;
    padding: 11px 20px; min-height: 44px;
    font-size: 0.85rem; font-weight: 400; letter-spacing: 0.02em; text-transform: none;
    color: var(--navy); text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}
@media (hover: hover) and (pointer: fine) { .dropdown-content a:hover { background: var(--water); color: var(--sunset-deep); } }
.dropdown-content a:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: -2px; }

/* Мобильный: хедер в две строки — строка 1: домик/лого/язык, строка 2: меню */
@media (max-width: 991px) {
    .site-header__row { flex-wrap: wrap; height: auto; row-gap: 4px; padding: 10px 16px 12px; }
    .site-nav { order: 3; width: 100%; margin: 0; flex-wrap: wrap; gap: 2px; }
    .site-header__row { position: relative; }
    .lang-dropdown { margin-inline-start: 0; }
    .site-header__row .lang-dropdown { position: absolute; inset-inline-end: 16px; top: 10px; }
    .home-btn { width: 40px; height: 40px; }
    .home-btn svg { width: 18px; height: 18px; }
    .brand-mark { height: 44px; display: flex; align-items: center; }
    .site-nav > a, .dropbtn { font-size: 0.72rem; padding: 9px 11px; }
    /* Dropdown — панель под строкой, без абсолютного позиционирования (не режется скроллом) */
    .dropdown { width: 100%; }
    .dropdown-content {
        position: static; display: none; width: 100%; min-width: 0;
        background: rgba(39, 48, 76, 0.05); border: none; border-radius: 12px; box-shadow: none;
        margin-bottom: 6px;
    }
}

.lang-dropdown { position: relative; z-index: 100; }

.lang-btn {
    background-color: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--navy); padding: 12px 22px; min-height: 44px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(39, 48, 76, 0.06); border: 1px solid rgba(39, 48, 76, 0.08);
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: transform 0.4s var(--ease-refined), box-shadow 0.4s var(--ease-refined), border-color 0.4s var(--ease-refined), color 0.4s var(--ease-refined), background-color 0.4s var(--ease-refined);
}
.lang-btn:active { transform: translateY(0) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
    .lang-dropdown:hover .lang-btn, .lang-btn:hover {
        transform: translateY(-2px); box-shadow: 0 10px 25px rgba(39, 48, 76, 0.12);
        border-color: var(--sunset); color: var(--sunset-deep);
    }
}

.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background-color: #ffffff; border-radius: 14px; box-shadow: 0 15px 40px rgba(39, 48, 76, 0.12);
    border: 1px solid rgba(39, 48, 76, 0.05); padding: 8px 0; display: flex; flex-direction: column;
    min-width: 130px; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease-refined), transform 0.25s var(--ease-refined), visibility 0s linear 0.25s;
}
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-dropdown.is-open .lang-menu, .lang-dropdown:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) { .lang-dropdown:hover .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } }
.lang-menu button {
    background: none; border: none; padding: 10px 18px; min-height: 44px; color: var(--navy); font-size: 0.85rem;
    font-weight: 400; text-align: left; cursor: pointer; transition: background-color 0.25s, color 0.25s;
}
[dir="rtl"] .lang-menu button { text-align: right; }
@media (hover: hover) and (pointer: fine) { .lang-menu button:hover { background-color: var(--water); color: var(--sunset-deep); } }

@media (max-width: 768px) {
    .lang-btn { padding: 10px 18px; min-height: 44px; font-size: 0.8rem; }
    .image-panel { box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
    .content-panel { padding-top: 190px; }
}

/* ===== Заголовки и появление при скролле ===== */
h1 {
    margin-top: 50px; margin-bottom: 28px; line-height: 1.15; position: relative;
    display: inline-block; width: 100%; max-width: 100%;
}
.brand-name {
    display: block; font-size: clamp(1.6rem, 5vw, 3rem); font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy);
    overflow-wrap: break-word; word-break: keep-all;
}
.brand-sub {
    display: block; margin-top: 8px; font-size: clamp(0.75rem, 2.5vw, 1.2rem); font-weight: 300;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
    overflow-wrap: break-word;
}
h1::after {
    content: ''; display: block; margin: 22px auto 0; height: 2px; width: 64px;
    background: linear-gradient(90deg, var(--sunset), var(--muted-orange));
    transform: scaleX(0); transform-origin: center;
    transition: transform 1s var(--ease-refined) 0.3s;
}
h1.is-visible::after { transform: scaleX(1); }

.reveal-on-scroll {
    opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(4px);
    transition: opacity 0.9s var(--ease-refined), transform 0.9s var(--ease-refined), filter 0.9s var(--ease-refined);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }

.delay-1 { transition-delay: 0.05s; } .delay-2 { transition-delay: 0.1s; }
.delay-3 { transition-delay: 0.15s; } .delay-4 { transition-delay: 0.2s; }
.delay-5 { transition-delay: 0.25s; } .delay-6 { transition-delay: 0.3s; }

/* ===== Карточки ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background-color: var(--navy); color: #ffffff; font-size: 0.85rem;
    font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 24px 12px 18px;
    border-radius: 50px; box-shadow: 0 8px 24px rgba(39, 48, 76, 0.18); margin-bottom: 40px;
}
[dir="rtl"] .status-badge { padding: 12px 18px 12px 24px; }
.status-badge::before {
    content: ''; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sunset);
    opacity: 0.9;
}

.location-card {
    display: flex; align-items: center; background-color: var(--surface); padding: 20px 25px;
    border-radius: 16px; max-width: 500px; width: 100%; margin-bottom: 45px;
    box-shadow: 0 4px 20px rgba(39, 48, 76, 0.05); text-align: left;
    font-style: normal;
    transition: transform 0.5s var(--ease-refined), box-shadow 0.5s var(--ease-refined);
}
[dir="rtl"] .location-card { text-align: right; }
@media (hover: hover) and (pointer: fine) { .location-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(39, 48, 76, 0.09); } }

.location-icon {
    flex-shrink: 0; width: 32px; height: 32px; fill: none; stroke: var(--sunset);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-right: 20px;
}
[dir="rtl"] .location-icon { margin-right: 0; margin-left: 20px; }
.location-details { display: flex; flex-direction: column; }
.location-city { font-weight: 600; font-size: 1.05rem; color: var(--navy); margin-bottom: 4px; }
.location-park { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.3; }

.seo-about-text {
    max-width: 500px; margin-bottom: 30px; text-align: left;
    background-color: var(--surface); padding: 35px 30px; border-radius: 18px; box-shadow: 0 4px 20px rgba(39, 48, 76, 0.05);
    transition: transform 0.5s var(--ease-refined), box-shadow 0.5s var(--ease-refined);
}
[dir="rtl"] .seo-about-text { text-align: right; }
@media (hover: hover) and (pointer: fine) { .seo-about-text:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(39, 48, 76, 0.08); } .resort-info-block:hover { transform: none; box-shadow: none; } }

.resort-info-block {
    margin-bottom: 45px; background-color: transparent; box-shadow: none;
    padding: 4px 10px 2px; border-top: 2px solid var(--ice); border-radius: 0;
}

.seo-about-text p, .resort-info-block p { font-size: 0.95rem; line-height: 1.618; color: var(--text-secondary); margin-bottom: 15px; font-weight: 300; }
.resort-info-block p:last-child, .seo-about-text p:last-child { margin-bottom: 0; }
.seo-about-text ul, .resort-info-block ul { list-style-type: none; padding: 0; margin-top: 10px; }
.seo-about-text ul li, .resort-info-block ul li { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.seo-about-text strong, .resort-info-block strong { color: var(--navy); font-weight: 600; }
.seo-about-text a, .resort-info-block a { color: var(--sunset-deep); text-decoration: none; border-bottom: 1px solid rgba(241, 86, 35, 0.35); transition: border-color 0.3s; }
@media (hover: hover) and (pointer: fine) { .seo-about-text a:hover, .resort-info-block a:hover { border-color: var(--sunset-deep); } }

/* Таблицы (графики, тарифы) — в лексике карточек */
.info-table {
    width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.88rem;
}
.info-table th {
    text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--navy); padding: 8px 10px; border-bottom: 1.5px solid var(--navy);
}
.info-table td {
    padding: 9px 10px; color: var(--text-secondary); font-weight: 300; border-bottom: 1px solid rgba(39, 48, 76, 0.08);
}
.info-table tr:last-child td { border-bottom: none; }
[dir="rtl"] .info-table th, [dir="rtl"] .info-table td { text-align: right; }

/* Строки контактов — телефон как контрол */
.contact-lines { margin-top: 12px; }
.contact-line {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 16px; margin-bottom: 8px; border-radius: 14px;
    background: var(--water); border: 1px solid rgba(39, 48, 76, 0.06);
    transition: transform 0.4s var(--ease-refined), box-shadow 0.4s var(--ease-refined);
}
@media (hover: hover) and (pointer: fine) { .contact-line:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(39, 48, 76, 0.08); } }
.contact-label { font-size: 0.85rem; color: var(--text-secondary); font-weight: 300; text-align: left; }
[dir="rtl"] .contact-label { text-align: right; }
.contact-value {
    font-size: 0.95rem; font-weight: 600; color: var(--navy);
    white-space: normal; overflow-wrap: anywhere;
    text-decoration: none; letter-spacing: 0.02em;
}
a.contact-value { transition: color 0.3s; }
@media (hover: hover) and (pointer: fine) { a.contact-value:hover { color: var(--sunset-deep); } }

.secondary-image-container { width: 100%; max-width: 450px; margin: 0 auto 45px auto; overflow: hidden; border-radius: 14px; box-shadow: 0 8px 25px rgba(39, 48, 76, 0.08); }
.secondary-image { width: 100%; height: auto; display: block; transition: transform 1.2s var(--ease-refined); }
@media (hover: hover) and (pointer: fine) { .secondary-image-container:hover .secondary-image { transform: scale(1.06); } }

.map-section-container {
    width: 100%; max-width: 500px; margin: 0 auto; background-color: var(--surface); padding: 20px;
    border-radius: 18px; box-shadow: 0 4px 20px rgba(39, 48, 76, 0.05); border: 1px solid rgba(39, 48, 76, 0.05);
}
.map-title {
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 12px; text-align: left;
}
[dir="rtl"] .map-title { text-align: right; }
.map-frame-wrapper { width: 100%; height: 300px; border-radius: 12px; overflow: hidden; background-color: var(--water); filter: grayscale(0.15) contrast(1.02); }
.map-frame-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== CTA: WhatsApp ===== */
.cta-section {
    width: 100%; max-width: 500px; margin: 0 auto 45px auto;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cta-caption { font-size: 0.9rem; color: var(--text-secondary); font-weight: 300; line-height: 1.5; text-align: center; }
.cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--cta); color: #ffffff; padding: 15px 30px; border-radius: 50px;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none;
    box-shadow: 0 8px 24px rgba(241, 86, 35, 0.28);
    transition: background-color 0.4s var(--ease-refined), transform 0.4s var(--ease-refined), box-shadow 0.4s var(--ease-refined);
}
@media (hover: hover) and (pointer: fine) { .cta-btn:hover { background: var(--sunset-deep); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(241, 86, 35, 0.34); } }
.cta-btn:active { transform: translateY(0) scale(0.98); }
.cta-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== CTA-система: кнопка в шапке, secondary WhatsApp, FAB, hero-CTA ===== */
/* Компактная контрастная кнопка в закреплённой шапке (всегда на виду при скролле) */
.header-cta {
    display: inline-flex; align-items: center; flex-shrink: 0;
    background: var(--cta); color: #ffffff; padding: 11px 20px; border-radius: 50px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; box-shadow: 0 4px 15px rgba(241, 86, 35, 0.25);
    transition: background-color 0.4s var(--ease-refined), transform 0.4s var(--ease-refined), box-shadow 0.4s var(--ease-refined);
}
@media (hover: hover) and (pointer: fine) {
    .header-cta:hover { background: var(--sunset-deep); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(241, 86, 35, 0.32); }
}
.header-cta:active { transform: translateY(0) scale(0.98); }
.header-cta:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }

/* Secondary-связка «спросить в WhatsApp» под основной CTA */
.cta-wa {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--navy); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em;
    text-decoration: none; padding: 6px 10px; border-radius: 10px;
    transition: color 0.3s var(--ease-refined), background-color 0.3s var(--ease-refined), transform 0.3s var(--ease-refined);
}
.cta-wa svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .cta-wa:hover { color: var(--sunset-deep); background: rgba(241, 86, 35, 0.06); } }
.cta-wa:active { transform: scale(0.98); }
.cta-wa:focus-visible { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }

/* Мобильная плавающая кнопка (≤768px, появляется после первого экрана) */
.fab-cta { display: none; }

/* CTA в первом экране (hero) — под заголовком, перед location-card */
.hero-cta {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin: 0 0 30px; max-width: 500px;
}

/* CTA внутри контента (после блока бонусов/условий) */
.note-cta { display: flex; justify-content: center; margin-top: 22px; }

/* Страница онлайн-бронирования (booking.html) */
.booking-page { max-width: 960px; margin: 0 auto; }
.booking-embed {
    width: 100%; min-height: 560px; height: calc(100vh - 240px);
    border-radius: 16px; overflow: hidden; background: #ffffff;
    box-shadow: 0 10px 30px rgba(39, 48, 76, 0.08);
    margin-bottom: 20px;
}
.booking-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.booking-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; min-height: 320px; height: 100%; padding: 40px 24px; text-align: center;
}
.booking-placeholder p { font-size: 0.95rem; color: var(--text-secondary); font-weight: 300; max-width: 420px; line-height: 1.5; }
/* Consent-блок перед бронированием: две галочки (условия + персональные данные),
   пока обе не отмечены — CTA неактивна, виджет (Exely) под veil */
.booking-consent {
    max-width: 560px; margin: 0 auto 28px; text-align: start;
    background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(39, 48, 76, 0.10);
    border-radius: 16px; padding: 20px 22px;
}
.booking-consent__title {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--navy); margin: 0 0 14px;
}
.consent-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.consent-row__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-row__box {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    border: 1.5px solid rgba(39, 48, 76, 0.30); background: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color 0.25s var(--ease-refined), border-color 0.25s var(--ease-refined), transform 0.25s var(--ease-refined);
}
.consent-row__box svg {
    width: 15px; height: 15px; fill: none; stroke: #ffffff; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.2s var(--ease-refined), transform 0.2s var(--ease-refined);
}
.consent-row__input:checked + .consent-row__box { background: var(--cta); border-color: var(--cta); }
.consent-row__input:checked + .consent-row__box svg { opacity: 1; transform: scale(1); }
.consent-row__input:focus-visible + .consent-row__box { outline: 2px solid var(--sunset-deep); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .consent-row:hover .consent-row__box { border-color: var(--sunset); } }
.consent-row:active .consent-row__box { transform: scale(0.94); }
.consent-row__text { font-size: 0.9rem; line-height: 1.5; color: var(--navy); }
.consent-row__text a { color: var(--sunset-deep); text-decoration: none; border-bottom: 1px solid rgba(241, 86, 35, 0.35); }
.booking-consent__hint { font-size: 0.82rem; color: var(--text-secondary); margin: 12px 0 0; }

/* CTA бронирования: неактивна до согласия (body.consent-given — JS) */
.booking-cta { transition: opacity 0.3s var(--ease-refined); }
body:not(.consent-given) .booking-cta { opacity: 0.45; pointer-events: none; }

/* Veil поверх виджета (появляется, когда Exely-iframe подключён) */
.booking-embed { position: relative; }
.booking-veil {
    position: absolute; inset: 0; z-index: 5; display: none;
    align-items: center; justify-content: center; text-align: center;
    background: rgba(240, 247, 252, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 24px;
}
.booking-veil p { font-size: 0.95rem; line-height: 1.5; color: var(--navy); max-width: 380px; margin: 0; }
.booking-embed--active .booking-veil { display: flex; }
body.consent-given .booking-veil { display: none; }

.booking-note { text-align: center; font-size: 0.9rem; color: var(--text-secondary); font-weight: 300; margin-bottom: 40px; }
.booking-note a { color: var(--sunset-deep); font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(241, 86, 35, 0.35); }

.brand-footer {
    margin-top: 10px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--text-secondary); opacity: 0.8;
}
.brand-footer span { color: var(--sunset-deep); }

/* Скролл-подсказка */
.scroll-cue {
    position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    z-index: 50; width: 22px; height: 34px; border: 1.5px solid rgba(39, 48, 76, 0.35);
    border-radius: 12px; display: none; opacity: 1; transition: opacity 0.5s var(--ease-refined);
}
.scroll-cue::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 3px; height: 8px;
    background: var(--sunset); border-radius: 2px; transform: translate(-50%, 0);
    opacity: 0.85;
}
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
@media (min-width: 480px) { .scroll-cue { display: block; } }

/* Футер: логотип, соцсети, копирайт */
.site-footer {
    background: var(--water, #f0f7fc);
    border-top: 1px solid rgba(39, 48, 76, 0.08);
    padding: 36px 40px calc(30px + env(safe-area-inset-bottom, 0px));
}
.site-footer__inner {
    display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap;
}
.site-footer__brand img { height: 30px; width: auto; display: block; opacity: 0.9; }
@media (hover: hover) and (pointer: fine) { .site-footer__brand:hover img { opacity: 1; } }
.site-footer__social { display: flex; gap: 10px; margin-inline-start: auto; }
.social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(39, 48, 76, 0.12);
    color: var(--navy, #27304c);
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.social-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .social-btn:hover { background: var(--navy, #27304c); color: #fff; transform: translateY(-2px); } }
.social-btn:active, .pill-link:active { transform: translateY(0) scale(0.98); }
.social-btn:focus-visible { outline: 2px solid var(--sunset-deep, #6e2405); outline-offset: 2px; }
.site-footer__copy {
    width: 100%; margin: 4px 0 0;
    font-size: 0.78rem; letter-spacing: 0.02em;
    color: rgba(39, 48, 76, 0.72);
}
@media (max-width: 768px) {
    .site-footer { padding: 26px 16px 22px; }
}

/* Категории номеров: grid карточек */
.rooms-cats { margin-top: 8px; }
.rooms-cats__title {
    font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--navy); margin: 0 0 6px;
}
.rooms-cats__inc {
    margin: 0 0 20px; font-size: 0.88rem; color: rgba(39, 48, 76, 0.72);
}
.rooms-cats__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.room-cat {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(39, 48, 76, 0.08); border-radius: 16px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) { .room-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(39, 48, 76, 0.1); } }
.room-cat__photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.room-cat__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) { .room-cat__photo:hover img { transform: scale(1.04); } }
.room-cat__price {
    position: absolute; top: 12px; inset-inline-end: 12px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(39, 48, 76, 0.82);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em;
    white-space: nowrap;
}
.room-cat__body { padding: 14px 16px 16px; }
.room-cat__name { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.room-cat__meta { font-size: 0.82rem; color: rgba(39, 48, 76, 0.66); letter-spacing: 0.01em; }
@media (max-width: 640px) {
    .rooms-cats__grid { grid-template-columns: 1fr; }
}

/* Контакты: ряд соцкнопок и pill-ссылки на карты */
.social-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.map-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pill-link {
    display: inline-flex; align-items: center;
    padding: 10px 18px; min-height: 44px; border-radius: 999px;
    background: rgba(39, 48, 76, 0.06);
    border: 1px solid rgba(39, 48, 76, 0.12);
    color: var(--navy, #27304c); font-size: 0.85rem; font-weight: 500;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) { .pill-link:hover { background: var(--navy, #27304c); color: #fff; transform: translateY(-1px); } }
.pill-link:focus-visible { outline: 2px solid var(--sunset-deep, #6e2405); outline-offset: 2px; }
.menu-pdfs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Правовые страницы (oferta/terms/privacy/consent/payment-refund) */
body.legal-page { background: var(--water, #f0f7fc); }
.legal-wrap { padding: 110px 16px 56px; }
.legal-card {
    max-width: 840px; margin-inline: auto; background: #fff;
    border-radius: 18px; padding: 44px 48px;
    box-shadow: 0 18px 48px rgba(39, 48, 76, 0.10);
}
.legal-crumb { font-size: 0.85rem; color: rgba(39, 48, 76, 0.55); margin-bottom: 20px; }
.legal-crumb a { color: var(--sunset-deep, #6e2405); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .legal-crumb a:hover { text-decoration: underline; } }
.legal-crumb__sep { margin-inline: 8px; color: rgba(39, 48, 76, 0.35); }
.legal-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600; color: var(--navy, #27304c); margin: 0 0 24px; line-height: 1.25; }
/* Долгие неразбиваемые строки (URL, email) должны переноситься, а не вылетать за карточку */
.legal-doc { overflow-wrap: anywhere; }
.legal-doc p { margin: 0 0 14px; line-height: 1.65; color: rgba(39, 48, 76, 0.85); }
.legal-doc h3 { font-size: 1.15rem; font-weight: 600; color: var(--navy, #27304c); margin: 26px 0 12px; }
.legal-doc h4 { font-size: 1rem; font-weight: 600; color: var(--navy, #27304c); margin: 20px 0 10px; }
.legal-doc ol, .legal-doc ul { margin: 0 0 14px; padding-inline-start: 24px; color: rgba(39, 48, 76, 0.85); }
.legal-doc li { margin-bottom: 8px; line-height: 1.6; }
.legal-doc a { color: var(--sunset-deep, #6e2405); }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.92rem; }
.legal-doc td, .legal-doc th { border: 1px solid rgba(39, 48, 76, 0.15); padding: 8px 12px; vertical-align: top; }

/* Footer: строка документов */
.site-footer__legal { width: 100%; display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(39, 48, 76, 0.12); }
.site-footer__legal a { color: rgba(39, 48, 76, 0.72); font-size: 0.8rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 0.25s; }
@media (hover: hover) and (pointer: fine) { .site-footer__legal a:hover { color: var(--navy, #27304c); } }
.site-footer__legal a:focus-visible { outline: 2px solid var(--sunset-deep, #6e2405); outline-offset: 2px; }

@media (max-width: 720px) {
    .legal-wrap { padding: 96px 10px 40px; }
    .legal-card { padding: 28px 22px; border-radius: 14px; }
}