/* =================================================================
 * polish.css — visual-only upgrade layer.
 *
 * Strict rules:
 *   - Targets ONLY existing class hooks (no new IDs/classes).
 *   - Never changes display/layout in a way that breaks JS-driven
 *     show/hide states (admin tabs, modals, login/booking gates).
 *   - Loads LAST so it cascades on top of styles.css / booking.css /
 *     admin.css / etc.
 *
 * Themes the site with:
 *   - aurora background glow
 *   - frosted-glass cards (backdrop-filter)
 *   - gradient buttons with lift on hover
 *   - polished form inputs with accent focus ring
 *   - blurred sticky header on scroll
 * ================================================================= */

/* ---- Shared accents (kept inline so this file is drop-in) ---- */
:root {
    --polish-glass-fill: linear-gradient(
        135deg,
        hsla(var(--hue-color), 80%, 60%, 0.10),
        hsla(var(--hue-color), 80%, 60%, 0.02) 45%,
        transparent
    );
    --polish-glass-edge: linear-gradient(
        135deg,
        hsla(var(--hue-color), 95%, 80%, 0.35),
        hsla(var(--hue-color), 95%, 80%, 0.08)
    );
    --polish-accent-sweep: linear-gradient(
        135deg,
        hsl(var(--hue-color), 80%, 60%),
        hsl(calc(var(--hue-color) - 20), 90%, 65%)
    );
    --polish-shadow-soft: 0 20px 50px -20px hsla(var(--hue-color), 90%, 30%, 0.55);
    --polish-shadow-card: 0 14px 40px -16px hsla(var(--hue-color), 70%, 12%, 0.7);
}

/* ---- Aurora background ---- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(
            900px circle at 50% -10%,
            hsla(var(--hue-color), 85%, 55%, 0.18),
            transparent 60%
        ),
        radial-gradient(
            700px circle at 0% 100%,
            hsla(calc(var(--hue-color) - 30), 80%, 50%, 0.10),
            transparent 65%
        ),
        radial-gradient(
            600px circle at 100% 80%,
            hsla(calc(var(--hue-color) + 30), 70%, 50%, 0.08),
            transparent 65%
        );
}

/* ---- Header: frost on scroll ---- */
.scroll-header {
    background-color: hsla(var(--hue-color), 28%, 6%, 0.65) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid hsla(var(--hue-color), 95%, 80%, 0.10);
}

/* ---- Section titles ---- */
.section__title {
    letter-spacing: -0.01em;
}

.section__title-gradient {
    text-shadow: 0 4px 24px hsla(var(--hue-color), 90%, 60%, 0.25);
}

/* ---- Buttons ---- */
.button {
    background: var(--polish-accent-sweep);
    color: var(--white-color);
    box-shadow:
        0 6px 18px -8px hsla(var(--hue-color), 90%, 50%, 0.55),
        inset 0 1px 0 hsla(0, 0%, 100%, 0.18);
    border: 1px solid hsla(0, 0%, 100%, 0.10);
    font-weight: var(--font-semi-bold);
    letter-spacing: 0.01em;
}

.button:hover {
    background: var(--polish-accent-sweep);
    transform: translateY(-1px);
    box-shadow:
        0 10px 26px -10px hsla(var(--hue-color), 90%, 55%, 0.7),
        inset 0 1px 0 hsla(0, 0%, 100%, 0.22);
}

.button:active {
    transform: translateY(0);
}

.button:disabled {
    filter: saturate(0.6) brightness(0.85);
    cursor: not-allowed;
    transform: none;
}

/* The hero CTA is already gradient — make hover lift consistent. */
.custom-redirect-button:hover {
    transform: translateY(-2px);
    background: var(--polish-accent-sweep);
}

/* ---- Glass card pattern (existing card-shaped wrappers) ---- */
.booking-box,
.private-tour-form-container,
.tour-box,
.admin__content,
.admin-login-container,
.admin-settings-container {
    background-color: hsla(var(--hue-color), 28%, 12%, 0.55) !important;
    backdrop-filter: saturate(140%) blur(22px);
    -webkit-backdrop-filter: saturate(140%) blur(22px);
    border: 1px solid hsla(var(--hue-color), 95%, 80%, 0.10);
    box-shadow: var(--polish-shadow-card);
    position: relative;
}

/* Inner gradient wash + edge highlight via a single ::before. */
.booking-box::before,
.private-tour-form-container::before,
.tour-box::before,
.admin__content::before,
.admin-login-container::before,
.admin-settings-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--polish-glass-fill);
    pointer-events: none;
    z-index: 0;
}

/* Make sure card content sits above the wash. */
.booking-box > *,
.private-tour-form-container > *,
.tour-box > *,
.admin__content > *,
.admin-login-container > *,
.admin-settings-container > * {
    position: relative;
    z-index: 1;
}

/* Tour-box hover: keep the original lift, refresh the glow. */
.tour-box:hover {
    border-color: hsla(var(--hue-color), 95%, 70%, 0.45);
    box-shadow:
        0 18px 42px -16px hsla(var(--hue-color), 90%, 50%, 0.55),
        var(--polish-shadow-card);
}

/* ---- Status badges already coloured by booking.css; just round + bg ---- */
.tour-box.status-planning,
.tour-box.status-confirmed,
.tour-box.status-cancelled {
    box-shadow:
        0 14px 40px -16px hsla(var(--hue-color), 70%, 12%, 0.7),
        inset 0 0 0 1px currentColor;
}

/* ---- Form inputs (booking + admin + login) ---- */
.form-group input,
.form-group select,
.form-group textarea,
.booking__form-input,
#admin-login-form input,
#add-tour-form input,
#add-tour-form select,
#edit-private-request-form input,
#edit-private-request-form select,
#edit-private-request-form textarea {
    background-color: hsla(var(--hue-color), 28%, 8%, 0.65) !important;
    border: 1px solid hsla(var(--hue-color), 60%, 60%, 0.18) !important;
    color: var(--title-color) !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.booking__form-input:hover,
#admin-login-form input:hover {
    border-color: hsla(var(--hue-color), 95%, 70%, 0.30) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.booking__form-input:focus,
#admin-login-form input:focus,
#add-tour-form input:focus,
#add-tour-form select:focus,
#edit-private-request-form input:focus,
#edit-private-request-form select:focus,
#edit-private-request-form textarea:focus {
    border-color: hsl(var(--hue-color), 95%, 70%) !important;
    box-shadow: 0 0 0 4px hsla(var(--hue-color), 95%, 70%, 0.15) !important;
    background-color: hsla(var(--hue-color), 28%, 10%, 0.85) !important;
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.booking__form-input::placeholder {
    color: hsla(var(--hue-color), 50%, 80%, 0.45);
}

/* ---- Modal polish ---- */
.modal-content {
    background-color: hsla(var(--hue-color), 28%, 10%, 0.88) !important;
    backdrop-filter: saturate(160%) blur(28px);
    -webkit-backdrop-filter: saturate(160%) blur(28px);
    border: 1px solid hsla(var(--hue-color), 95%, 80%, 0.12);
    box-shadow: 0 30px 70px -20px hsla(0, 0%, 0%, 0.7);
    border-radius: 1rem !important;
}

/* ---- Admin nav pills lift ---- */
.admin-nav-button {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-nav-button:hover {
    transform: translateY(-1px);
}

.admin-nav-button.active {
    background: var(--polish-accent-sweep) !important;
    border-color: transparent !important;
    color: var(--white-color, #fff) !important;
    box-shadow: 0 8px 20px -10px hsla(var(--hue-color), 90%, 55%, 0.6);
}

/* ---- Calendar pills ---- */
.calendar-day:not(.day-name):hover {
    background-color: hsla(var(--hue-color), 95%, 70%, 0.18) !important;
    transform: scale(1.05);
}

.has-booking {
    background: var(--polish-accent-sweep) !important;
    box-shadow: 0 6px 14px -6px hsla(var(--hue-color), 90%, 55%, 0.6);
}

/* ---- Footer hairline ---- */
.footer.section {
    border-top: 1px solid hsla(var(--hue-color), 95%, 80%, 0.08);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--scroll-trumb-color-alt);
}

::-webkit-scrollbar-thumb {
    background-color: hsla(var(--hue-color), 60%, 40%, 0.55);
    border-radius: 999px;
    border: 2px solid var(--scroll-trumb-color-alt);
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--hue-color), 80%, 60%);
}

/* ---- Honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    .button,
    .button:hover,
    .custom-redirect-button:hover,
    .admin-nav-button,
    .admin-nav-button:hover,
    .calendar-day:not(.day-name):hover {
        transition: none !important;
        transform: none !important;
    }
    body::before {
        display: none;
    }
}

/* ================================================================
 * SMOOTHNESS PASS — micro-animations, modal transitions,
 * skeleton loaders, scroll-reveal
 * ================================================================ */

/* ---- Smooth section fade-in on first paint ---- */
.section {
    animation: polish-fade-up 0.5s ease-out both;
    animation-delay: 0.05s;
}

@keyframes polish-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Card hover: smoother lift, accent halo on supported elements ---- */
.tour-box {
    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.tour-box:hover {
    transform: translateY(-4px) scale(1.005);
}

/* ---- Buttons: tighter press feedback ---- */
.button,
.custom-redirect-button,
.admin-nav-button,
.admin-logout-button {
    transition:
        transform 0.18s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.25s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
    will-change: transform;
}

.button:active,
.custom-redirect-button:active,
.admin-nav-button:active,
.admin-logout-button:active {
    transform: translateY(0) scale(0.97);
}

/* ---- Form inputs: micro-bloom on focus ---- */
.form-group input,
.form-group select,
.form-group textarea,
.booking__form-input,
#admin-login-form input {
    transition:
        border-color 0.2s ease,
        box-shadow 0.25s ease,
        background-color 0.2s ease,
        transform 0.18s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.booking__form-input:focus,
#admin-login-form input:focus {
    transform: translateY(-1px);
}

/* ---- Modal animation ---- */
.modal {
    /* Already has display:none/block via JS; layer in opacity + scale. */
    transition: opacity 0.2s ease, backdrop-filter 0.25s ease;
}

.modal[style*="block"] {
    background-color: hsla(var(--hue-color), 28%, 4%, 0.55);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.modal-content {
    animation: polish-modal-in 0.32s cubic-bezier(.2,.8,.2,1);
    transform-origin: center center;
}

@keyframes polish-modal-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- Modal close button polish ---- */
.close-button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    color: var(--text-color);
}

.close-button:hover {
    background-color: hsla(var(--hue-color), 95%, 80%, 0.12);
    color: var(--white-color);
    transform: rotate(90deg);
}

/* ---- Admin section content slide-in ---- */
.admin-section-content.active {
    animation: polish-tab-in 0.32s cubic-bezier(.2,.8,.2,1);
}

@keyframes polish-tab-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Sticky admin nav ---- */
.admin-nav {
    position: sticky;
    top: var(--header-height, 0);
    z-index: 50;
    padding: 0.75rem 1rem;
    background: linear-gradient(
        to bottom,
        hsla(var(--hue-color), 28%, 6%, 0.92),
        hsla(var(--hue-color), 28%, 6%, 0.78)
    );
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid hsla(var(--hue-color), 95%, 80%, 0.07);
    margin-bottom: 1.5rem;
}

/* ---- Skeleton / spinner replacements for the bare .loader ---- */
.loader,
[id$="-list"]:empty::before {
    display: block;
    width: 32px;
    height: 32px;
    margin: 2rem auto;
    border: 3px solid hsla(var(--hue-color), 60%, 60%, 0.2);
    border-top-color: hsl(var(--hue-color), 90%, 65%);
    border-radius: 50%;
    animation: admin-spin 0.7s linear infinite;
    content: "";
}

/* Generic empty-state line (when JS sets the "No upcoming tours found." text) */
[id$="-list"] > p:only-child {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-color-light);
    font-style: italic;
    background-color: hsla(var(--hue-color), 28%, 12%, 0.35);
    border: 1px dashed hsla(var(--hue-color), 95%, 80%, 0.12);
    border-radius: 0.75rem;
}

/* Inline-SVG admin icon defaults. Admin pages don't load chatbot.css
   (where the original .kg-icon rule lives), so without this every
   adminIcon() SVG renders at the 300x150 replaced-element default —
   the search, empty-state, and toast icons all blew up.
   Wrapped in :where() so any context-specific rule (empty-state__icon,
   admin-search > .kg-icon, etc.) wins without needing !important. */
:where(.kg-icon) {
    display: inline-flex;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

/* ---- Search bar (admin lists) ---- */
.admin-search {
    position: relative;
    margin-bottom: 1.25rem;
}

.admin-search input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.6rem;
    border-radius: 999px;
    background-color: hsla(var(--hue-color), 28%, 8%, 0.65);
    border: 1px solid hsla(var(--hue-color), 60%, 60%, 0.18);
    color: var(--title-color);
    font-size: var(--small-font-size);
    transition: all 0.2s ease;
}

.admin-search input:focus {
    outline: none;
    border-color: hsl(var(--hue-color), 95%, 70%);
    box-shadow: 0 0 0 4px hsla(var(--hue-color), 95%, 70%, 0.15);
}

.admin-search i,
.admin-search > svg,
.admin-search > .kg-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-color-light);
    pointer-events: none;
}

.admin-search input::placeholder {
    color: hsla(var(--hue-color), 50%, 80%, 0.5);
}

/* Hide tour-boxes that don't match the active filter (set by JS). */
.tour-box.is-filtered-out {
    display: none !important;
}

/* ---- Toast container ---- */
.toast-container {
    position: fixed;
    top: calc(var(--header-height) + 1rem);
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2000;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    min-width: 240px;
    max-width: 360px;
    padding: 0.75rem 1rem 0.75rem 0.85rem;
    border-radius: 0.75rem;
    background-color: hsla(var(--hue-color), 28%, 12%, 0.85);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid hsla(var(--hue-color), 95%, 80%, 0.14);
    color: var(--title-color);
    box-shadow: 0 16px 36px -16px hsla(0, 0%, 0%, 0.6);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--small-font-size);
    animation: polish-toast-in 0.32s cubic-bezier(.2,.8,.2,1);
}

.toast i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.toast--success { border-left: 3px solid #2ecc71; }
.toast--success i { color: #2ecc71; }
.toast--error   { border-left: 3px solid #ff6b6b; }
.toast--error i { color: #ff6b6b; }
.toast--info    { border-left: 3px solid hsl(var(--hue-color), 90%, 65%); }
.toast--info i  { color: hsl(var(--hue-color), 95%, 75%); }

.toast.is-leaving {
    animation: polish-toast-out 0.25s ease forwards;
}

@keyframes polish-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes polish-toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

/* ---- Settings form: 2-column grid on wider screens ---- */
.admin-settings-container form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1.5rem;
}

.admin-settings-container .subsection-title {
    grid-column: 1 / -1;
    margin-top: 1.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid hsla(var(--hue-color), 95%, 80%, 0.10);
    color: var(--white-color);
    font-size: 1rem;
    font-weight: var(--font-semi-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-settings-container .subsection-title:first-of-type {
    margin-top: 0;
}

.admin-settings-container button[type="submit"] {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
}

@media screen and (min-width: 600px) {
    .admin-settings-container form {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Save indicator ---- */
.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
    color: #2ecc71;
    font-size: var(--smaller-font-size);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.save-indicator.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================================================
   Booking & tours micro-animations
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .tour-option {
        transition:
            transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 0.35s ease,
            filter 0.35s ease;
        will-change: transform;
    }
    .tour-option:hover {
        transform: translateY(-6px) scale(1.015);
        box-shadow: 0 18px 40px hsla(0, 0%, 0%, 0.35);
        filter: brightness(1.08);
    }
    .tour-option:active {
        transform: translateY(-2px) scale(1.005);
        transition-duration: 0.1s;
    }

    .tour-box {
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .tour-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px hsla(0, 0%, 0%, 0.18);
    }

    /* Slider images crossfade smoothly. */
    .slider-container .slide {
        transition: opacity 0.6s ease;
    }

    /* FAQ accordion items expand smoothly. */
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }
    .faq-item.active .faq-answer {
        max-height: 500px;
    }

    /* Public buttons: subtle press feedback. */
    .booking-page .button,
    .booking-form .button {
        transition: transform 0.12s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }
    .booking-page .button:active,
    .booking-form .button:active {
        transform: scale(0.98);
    }
}

/* =====================================================================
   Hero typography + CTA hierarchy
   The first button in .home__buttons is the primary action (filled);
   the second is secondary (outlined). Without this both looked identical
   and disappeared into the background.
   ===================================================================== */

.home__title {
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.home__subtitle {
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.home__description {
    font-weight: 400 !important;
    line-height: 1.55;
    max-width: 38ch;
    padding: 0 !important;
    margin: 0 0 1.5rem;
    color: hsla(255, 100%, 100%, 0.78);
}

.home__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.home__buttons .button {
    min-height: 52px;
    padding: 0.85rem 1.4rem !important;
    border-radius: 0.7rem !important;
    font-size: 0.95rem !important;
}

/* PRIMARY: filled, gradient pill. The "Download App" CTA. */
.home__buttons .button:nth-child(1) {
    background: var(--first-color);
    color: var(--white-color);
    box-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.25);
    border: 1.5px solid transparent;
}
.home__buttons .button:nth-child(1):hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 28px hsla(0, 0%, 0%, 0.35);
}

/* SECONDARY: outlined. The "Book a tour" CTA — equal importance but
   visually distinct. */
.home__buttons .button:nth-child(2) {
    background: transparent;
    color: var(--first-color);
    border: 1.5px solid var(--first-color);
    box-shadow: none;
}
.home__buttons .button:nth-child(2):hover {
    background: hsla(0, 0%, 100%, 0.04);
}

/* Both honor reduced-motion via inheriting the .button transition above. */


/* =====================================================================
   Accessibility: focus-visible rings + minimum tap targets
   ===================================================================== */

/* Global keyboard focus ring. Only shows on keyboard navigation, never on
   click — uses :focus-visible. Stays visible even on dark + light themes
   thanks to a 3px halo with 60% alpha. */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
    border-radius: 0.4rem;
}

/* Larger pill-shaped controls keep their own border-radius. */
.button:focus-visible,
.admin-nav-button:focus-visible,
.tour-toggle-switch:focus-within {
    outline-offset: 3px;
}

/* Tap targets ≥ 44px on phones. Language switcher links were 29×34. */
@media (max-width: 768px) {
    .nav__language a,
    .nav__language span,
    [id^="lang-"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    .scrollup,
    .nav__close,
    .nav__toggle {
        min-width: 44px;
        min-height: 44px;
    }
}


/* =====================================================================
   FAQ accordion: replace the literal "+" with a rotating chevron.
   The base styles in styles.css set `.faq-question::after { content:"+"; }`
   which renders as a fat ASCII glyph. SVG chevron rotates 180° on .active.
   ===================================================================== */

.faq-question { position: relative; align-items: center; }
.faq-question::after {
    content: '' !important;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.75rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f7fe' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: transform 0.25s ease;
    flex: 0 0 auto;
}

.faq-item.active .faq-question::after {
    transform: rotate(180deg);
}


/* =====================================================================
   Footer rhythm + link visibility
   ===================================================================== */

/* Tighten the gap before the copyright line; a 144px margin-top made the
   footer 517px tall on desktop. */
.footer__copy {
    margin-top: 3rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid hsla(255, 100%, 100%, 0.06);
    text-align: center;
    opacity: 0.7;
    font-size: 0.8rem;
}

/* Footer links: distinguishable from body text, animated underline on hover. */
.footer a {
    position: relative;
    color: hsla(255, 100%, 100%, 0.85);
    transition: color 0.2s ease;
    text-decoration: none;
}
.footer a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--first-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.footer a:hover {
    color: var(--white-color);
}
.footer a:hover::after {
    transform: scaleX(1);
}


/* =====================================================================
   Section rhythm: symmetric vertical padding so content feels balanced.
   ===================================================================== */
.section {
    padding-block: clamp(3rem, 7vw, 5.5rem) !important;
}


/* =====================================================================
   Admin button fills.

   Default `.button` had `background: transparent`, so every admin CTA
   ("Save profile", "Save settings", "Save Tour", "Update Status",
   "Create New Tour", "Migrate legacy data") was rendering as ghost text.
   Adopt a clear primary-fill, plus narrow the calendar nav buttons so
   they don't stretch the whole panel width.
   ===================================================================== */

#admin .button:not(.tour-toggle-switch):not(#calendar-regenerate) {
    background: var(--first-color);
    color: var(--white-color);
    border: 1.5px solid transparent;
    box-shadow: 0 4px 14px hsla(0, 0%, 0%, 0.18);
    transition: background-color .2s ease, transform .12s ease, box-shadow .25s ease, filter .15s ease;
    font-weight: 600;
}
#admin .button:not(.tour-toggle-switch):not(#calendar-regenerate):hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.28);
}
#admin .button:not(.tour-toggle-switch):not(#calendar-regenerate):active {
    transform: scale(0.98);
}

/* Destructive accent stays distinguishable. */
#admin #calendar-regenerate {
    background: hsla(0, 80%, 55%, 0.18) !important;
    color: hsl(0, 80%, 75%) !important;
    border: 1.5px solid hsla(0, 80%, 55%, 0.35) !important;
    font-weight: 600 !important;
}
#admin #calendar-regenerate:hover { background: hsla(0, 80%, 55%, 0.3) !important; }

/* Calendar Previous / Next: stop stretching to full width. */
#booking-calendar .calendar-header .button {
    width: auto;
    min-width: 96px;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
}

/* Save settings, settings-save-btn already set width:auto — ensure tap-friendly height. */
.settings-save-btn { min-height: 44px; }


/* =====================================================================
   Public site testing banner: soften the stark full-width amber bar.

   It used to span 100% width with bg #FFC107 + zero radius — alarming
   and visually heavy on every public page. Now it's a centered pill
   with a subtle tint, info icon prefix, and visible mailto styling.
   ===================================================================== */

.testing-info {
    /* booking.css ships an old `.testing-info { position: fixed; width: 100%;
       left: 0 }` rule meant for an overlay banner. The new design is an
       inline centered pill — neutralise position/width/left so margin auto
       can actually centre the element. */
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    background: hsla(45, 95%, 55%, 0.12) !important;
    color: hsl(45, 95%, 75%) !important;
    border: 1px solid hsla(45, 95%, 55%, 0.25);
    border-radius: 0.75rem;
    margin: 1rem auto 0 !important;
    max-width: min(72ch, calc(100% - 2rem));
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4;
    text-align: center;
}
.testing-info::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    vertical-align: -2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5cb55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>");
    background-repeat: no-repeat;
}
.testing-info p { margin: 0; color: inherit; }
.testing-info a {
    color: hsl(45, 100%, 80%);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: hsla(45, 95%, 55%, 0.5);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.testing-info a:hover {
    color: hsl(45, 100%, 90%);
    text-decoration-color: currentColor;
}


/* =====================================================================
   Contact form: fill the submit button + balance heading hierarchy.

   "Send" rendered as transparent text on the dark form card — easy to
   miss. And the page had two stacked titles ("Contact" h2 and
   "Contact Us" h1) where the h2 outranked the h1. Demote the h2.
   ===================================================================== */

main form button[type="submit"],
#contactForm button,
.custom-send-button {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.25);
    border: 1.5px solid transparent;
    transition: filter .2s ease, transform .12s ease, box-shadow .25s ease;
}
main form button[type="submit"]:hover,
#contactForm button:hover,
.custom-send-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px hsla(0, 0%, 0%, 0.32);
}
main form button[type="submit"]:active,
#contactForm button:active,
.custom-send-button:active { transform: scale(0.98); }


/* =====================================================================
   Empty state for /available_tours.html

   Without bookings, the container just renders a single left-aligned
   <p>No tours available...</p>. Lift it into a centered card with a
   calendar SVG so it reads as intentional, not as a server error.
   ===================================================================== */

#tours-container:has(> p:only-child) {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
#tours-container > p:only-child {
    margin: 2rem auto !important;
    padding: 3.5rem 2rem;
    max-width: 480px;
    text-align: center;
    border: 1.5px dashed hsla(255, 100%, 100%, 0.12);
    border-radius: 1rem;
    background: hsla(255, 100%, 100%, 0.025);
    font-size: 1rem;
    line-height: 1.5;
    color: hsla(255, 100%, 100%, 0.75);
    position: relative;
}
#tours-container > p:only-child::before {
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6cce8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}


/* =====================================================================
   Private tour: distinct selected vs unselected for duration + time
   slots. Without this, every option looked filled blue → operator
   couldn't tell which one was active.
   ===================================================================== */

.duration-option,
.time-slot {
    background: transparent !important;
    color: var(--first-color) !important;
    border: 1.5px solid var(--first-color) !important;
    transition: background-color .2s ease, color .2s ease, transform .12s ease;
    font-weight: 500;
}
.duration-option:hover,
.time-slot:hover {
    background: hsla(0, 0%, 100%, 0.04) !important;
}
.duration-option:active,
.time-slot:active {
    transform: scale(0.97);
}
.duration-option.active,
.time-slot.active,
.duration-option.selected,
.time-slot.selected {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    border-color: var(--first-color) !important;
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.18);
}


/* =====================================================================
   Admin calendar header: month/year title was 16.8px — same as body
   copy. Lift it so it anchors the panel. Day cells get a touch more
   breathing room and bolder day-name labels.
   ===================================================================== */

#month-year {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--title-color, #f5f7fe);
    flex: 1;
    text-align: center;
    margin: 0 1rem;
}

.calendar-day.day-name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsla(255, 100%, 100%, 0.5);
}

@media (min-width: 768px) {
    .calendar-day {
        width: 50px;
        height: 50px;
    }
}


/* =====================================================================
   Download badge grid: side-by-side on desktop, stacked on phones.
   The previous default kept them vertical at 250px wide → the whole
   /#download section ballooned to ~1030px tall.
   ===================================================================== */

.download__container {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem !important;
    width: auto !important;
    max-width: 720px;
    margin: 0 auto;
}
.download__container > a {
    flex: 0 0 auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.download__container > a:hover {
    transform: translateY(-2px);
    filter: brightness(1.05) drop-shadow(0 8px 18px hsla(0,0%,0%,0.25));
}
.download__container > a:active {
    transform: scale(0.97);
}

@media (max-width: 600px) {
    .download__container {
        flex-direction: column;
    }
    .download__container > a {
        width: min(280px, 100%);
    }
    .download__img,
    .download__container img {
        width: 100% !important;
        height: auto !important;
    }
}


/* =====================================================================
   Slider polish: add a gradient backdrop to captions for legibility on
   light photos, and round + style the prev/next arrows so they read as
   real controls (with a backdrop blur on hover).
   ===================================================================== */

.slider-container .slide-caption {
    background: linear-gradient(
        180deg,
        hsla(0, 0%, 0%, 0) 0%,
        hsla(0, 0%, 0%, 0.55) 60%,
        hsla(0, 0%, 0%, 0.75) 100%
    ) !important;
    text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.4);
    font-weight: 500;
    letter-spacing: -0.005em;
}

.slider-container .prev,
.slider-container .next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: hsla(0, 0%, 0%, 0.45) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
    line-height: 1 !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
    user-select: none;
    border: 1px solid hsla(255, 100%, 100%, 0.12);
}
.slider-container .prev { left: 1rem; }
.slider-container .next { right: 1rem; }
.slider-container .prev:hover,
.slider-container .next:hover {
    background: hsla(0, 0%, 0%, 0.7) !important;
    transform: translateY(-50%) scale(1.05) !important;
}
.slider-container .prev:active,
.slider-container .next:active {
    transform: translateY(-50%) scale(0.95) !important;
}


/* =====================================================================
   Public site header: glass backdrop + active link indicator + bigger
   brand mark. The fixed header had zero background — text floated over
   page content with no separation.
   ===================================================================== */

.header {
    background: hsla(220, 18%, 7%, 0.7) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid hsla(255, 100%, 100%, 0.06);
    transition: background-color 0.2s ease;
}

/* Active nav link gets a subtle pill highlight.
   Pad ALL nav links uniformly so the active state never causes
   adjacent items to shift horizontally. styles.css uses background-clip:
   text + -webkit-text-fill-color: transparent on .nav__link, which
   conflicts with a solid pill background — the text fill stays
   transparent and the link disappears. We undo both clips on the
   active link so the colour actually paints. */
.nav__menu a,
.nav__menu .nav__link {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.nav__menu a.active-link,
.nav__menu .nav__link.active-link {
    color: var(--first-color) !important;
    -webkit-text-fill-color: var(--first-color) !important;
    -webkit-background-clip: border-box !important;
            background-clip: border-box !important;
    background: hsla(255, 100%, 100%, 0.06) !important;
}

/* Brand mark: 32×32 → 40×40 on phones, 44×44 on desktop. Both the link
   wrapper and the inner img need widening — the wrapper had width:32px
   from styles.css so the img couldn't grow past it. */
.nav .nav__logo,
.nav__logo {
    width: 40px !important;
    height: 40px !important;
}
.nav .nav__logo img,
header.header img:not([class*="badge"]):not([class*="store"]) {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@media (min-width: 768px) {
    .nav .nav__logo,
    .nav__logo {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Anchor jump padding so the sticky header doesn't cover landed sections. */
[id]:not(body):not(html) { scroll-margin-top: 5rem; }


/* =====================================================================
   Scroll-to-top button: from a 37×35 square link to a polished pill
   with backdrop blur, brand tint, lift on hover.
   ===================================================================== */

.scrollup {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: hsla(220, 18%, 7%, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid hsla(255, 100%, 100%, 0.1);
    border-radius: 999px !important;
    color: var(--first-color) !important;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.35);
    transition: bottom 0.4s ease, transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
    right: 1.25rem !important;
    z-index: 90;
}
.scrollup:hover {
    background: hsla(220, 18%, 12%, 0.85) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px hsla(0, 0%, 0%, 0.45);
}
.scrollup:active {
    transform: translateY(-1px) scale(0.96);
}
.scrollup .scrollup__icon {
    font-size: 1.4rem;
}

/* Stack scrollup above the chatbot toggle (60×60 at right:20 bottom:20)
   so they don't collide. The chatbot has a stronger glow than ideal —
   soften the shadow at the same time. */
.scrollup.show-scroll {
    bottom: 5.5rem !important;
}
button[aria-label*="chat" i] {
    box-shadow:
        0 8px 22px hsla(0, 0%, 0%, 0.4),
        0 0 0 1px hsla(255, 100%, 100%, 0.06) !important;
}


/* =====================================================================
   Footer brand column (added with logo + tagline) and 2-col layout.
   ===================================================================== */

.footer__container {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem !important;
    align-items: start !important;
}
@media (max-width: 600px) {
    .footer__container { grid-template-columns: 1fr; gap: 1.75rem !important; }
}

.footer__brand { display: flex; flex-direction: column; gap: 0.85rem; }
.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--title-color, #f5f7fe) !important;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}
.footer__logo img { width: 36px; height: 36px; object-fit: contain; }
.footer__logo:hover { color: var(--first-color) !important; }
.footer__tagline {
    margin: 0;
    max-width: 36ch;
    font-size: 0.85rem;
    line-height: 1.55;
    color: hsla(255, 100%, 100%, 0.6);
}


/* =====================================================================
   Home description grid cards (Download / Language / Location / Listen).
   Markup has Remixicon <i> + h3 + span; without styling they were plain
   text blobs. Frame each as a glass card with a brand-tinted icon chip.
   ===================================================================== */

.description__content {
    gap: 1rem;
}
.description__data {
    padding: 1rem 1.1rem !important;
    background: hsla(255, 100%, 100%, 0.025);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.85rem;
    transition: background-color 0.25s ease, transform 0.18s ease, border-color 0.25s ease;
}
.description__data:hover {
    background: hsla(255, 100%, 100%, 0.045);
    border-color: hsla(220, 80%, 70%, 0.2);
    transform: translateY(-2px);
}

.description__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.6rem;
    border-radius: 50%;
    background: hsla(220, 80%, 65%, 0.15);
    color: var(--first-color);
    font-size: 1.15rem;
}

.description__title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--title-color, #f5f7fe);
    letter-spacing: -0.005em;
}

.description__subtitle {
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
    color: hsla(255, 100%, 100%, 0.65);
}


/* =====================================================================
   Home "Autoplay by Location" feature: was unstyled text. Make it a
   centered hero-style block with a large brand-tinted icon halo.
   ===================================================================== */

.location-feature.section {
    /* The section now spans the full viewport so the asymmetric
       padding (when a sight-deco is present) can reserve a real lane
       for the illustration. The 720px reading-width is moved to the
       inner content children below. */
    max-width: none;
    margin: 0 auto;
    text-align: center;
    padding-block: clamp(3rem, 6vw, 5rem) !important;
}
.location-feature.section > :not(.sight-deco) {
    max-width: 720px;
    margin-inline: auto;
}

.location-feature .feature-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    background: hsla(220, 80%, 65%, 0.15);
    border: 1px solid hsla(220, 80%, 65%, 0.3);
    color: var(--first-color);
    font-size: 2.4rem !important;
    line-height: 1;
}

.location-feature h3 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--title-color, #f5f7fe);
}

.location-feature p {
    margin: 0 auto;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.6;
    color: hsla(255, 100%, 100%, 0.75);
}


/* =====================================================================
   Booking page marketing section + disclaimer.
   Title was 19.6px (too small). Paragraph spanned 736px (no measure).
   Disclaimer link used default browser blue.
   ===================================================================== */

.marketing-text {
    max-width: 60ch !important;
    margin: 0 auto !important;
    padding: 2.5rem 1.5rem 1.5rem !important;
}
.marketing-text h3 {
    font-size: clamp(1.4rem, 2.5vw, 1.75rem) !important;
    font-weight: 600;
    margin: 0 0 0.85rem !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.marketing-text p {
    font-size: 1rem;
    line-height: 1.65;
    color: hsla(255, 100%, 100%, 0.78) !important;
    margin: 0;
}

.disclaimer {
    max-width: 60ch;
    margin: 1rem auto !important;
    text-align: center;
    font-size: 0.85rem !important;
    color: hsla(255, 100%, 100%, 0.55) !important;
}
.disclaimer a {
    color: var(--first-color) !important;
    text-decoration: underline;
    text-decoration-color: hsla(220, 80%, 65%, 0.4);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: text-decoration-color 0.2s ease;
}
.disclaimer a:hover {
    text-decoration-color: currentColor;
}


/* =====================================================================
   Booking-page FAQ accordion: card frame, hover lift, active state.
   ===================================================================== */

.faq-container {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faq-item {
    background: hsla(255, 100%, 100%, 0.025);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.85rem;
    padding: 0 1.25rem;
    transition: background-color 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.faq-item:hover {
    background: hsla(255, 100%, 100%, 0.04);
    border-color: hsla(220, 80%, 70%, 0.2);
}
.faq-item.active {
    background: hsla(220, 80%, 65%, 0.06);
    border-color: hsla(220, 80%, 70%, 0.25);
}

.faq-question {
    width: 100%;
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    color: var(--title-color, #f5f7fe) !important;
    font-size: clamp(1rem, 2vw, 1.15rem) !important;
    font-weight: 600 !important;
    padding: 1.1rem 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.35;
}
.faq-question:focus-visible {
    outline-offset: 4px;
}

.faq-answer {
    /* keep the existing max-height transition from earlier polish.css */
}
.faq-item.active .faq-answer {
    padding: 0 0 1.1rem !important;
}
.faq-answer p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: hsla(255, 100%, 100%, 0.78);
    max-width: 60ch;
}


/* =====================================================================
   Available-tours page caption note ("Tours are typically available
   around 10 days in advance"). Render as a subtle centered helper.
   ===================================================================== */

.calendar__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: 56ch;
    margin: 0.5rem auto 1.5rem !important;
    padding: 0.6rem 1rem;
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: hsla(255, 100%, 100%, 0.6) !important;
    text-align: center;
    background: hsla(255, 100%, 100%, 0.025);
    border: 1px solid hsla(255, 100%, 100%, 0.05);
    border-radius: 999px;
}
.calendar__note::before {
    content: '';
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><line x1='12' y1='8' x2='12.01' y2='8'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 480px) {
    .calendar__note {
        font-size: 0.8rem !important;
        padding: 0.55rem 0.75rem;
        border-radius: 0.75rem;
        text-align: left;
    }
}


/* =====================================================================
   Total-price block on /private_tour.html (and modal). Was a flat dark
   rectangle with label + amount inline. Now a clean split row with the
   amount visually prominent and a left brand accent.
   ===================================================================== */

.total-price {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    padding: 1.1rem 1.4rem !important;
    background:
        linear-gradient(135deg, hsla(220, 80%, 65%, 0.08), hsla(220, 80%, 65%, 0)) ,
        hsla(220, 18%, 9%, 0.6);
    border: 1px solid hsla(220, 80%, 70%, 0.18);
    border-radius: 0.85rem !important;
    overflow: hidden;
}
.total-price::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--first-color);
}

.total-price label {
    margin: 0 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsla(255, 100%, 100%, 0.65) !important;
}
.total-price #totalPrice,
.total-price [id$="totalPrice"] {
    font-size: clamp(1.65rem, 3.5vw, 2.1rem) !important;
    font-weight: 700 !important;
    color: var(--first-color) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}


/* =====================================================================
   Public booking-form checkboxes (AGB / refund policy / privacy).
   The custom .checkmark was a tiny 20×20 dark square with no border.
   Visible state, animated check mark, larger tap target.
   ===================================================================== */

.checkbox-container {
    position: relative;
    display: flex !important;
    align-items: flex-start;
    gap: 0.65rem;
    padding-left: 0 !important;
    padding-block: 0.4rem;
    color: hsla(255, 100%, 100%, 0.78) !important;
    cursor: pointer;
    line-height: 1.5;
}
.checkbox-container input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.checkbox-container .checkmark {
    flex: 0 0 auto;
    position: relative !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 1px 0 0 !important;
    top: auto !important;
    left: auto !important;
    background: hsla(255, 100%, 100%, 0.05) !important;
    border: 1.5px solid hsla(255, 100%, 100%, 0.25) !important;
    border-radius: 0.35rem !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checkbox-container:hover .checkmark {
    border-color: hsla(220, 80%, 70%, 0.5) !important;
}
.checkbox-container input:focus-visible ~ .checkmark {
    outline: 2px solid var(--first-color);
    outline-offset: 2px;
}
.checkbox-container input:checked ~ .checkmark {
    background: var(--first-color) !important;
    border-color: var(--first-color) !important;
}
.checkbox-container input:checked ~ .checkmark::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container .policy-link {
    color: var(--first-color) !important;
    text-decoration: underline;
    text-decoration-color: hsla(220, 80%, 65%, 0.4);
    text-underline-offset: 3px;
    font-weight: 500;
    transition: text-decoration-color 0.2s ease;
}
.checkbox-container .policy-link:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 480px) {
    .checkbox-container { padding-block: 0.5rem; }
    .checkbox-container .checkmark { width: 24px !important; height: 24px !important; }
}


/* =====================================================================
   Contact form <select> alignment with the rest of the form inputs.
   The Subject dropdown was using a bright lavender border that clashed
   with the more subtle borders on email/text inputs. Same visual weight
   now, plus a focus ring + dark option list (Firefox respects this).
   ===================================================================== */

#contactForm select,
form select {
    border: 1px solid hsla(220, 40%, 65%, 0.22) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#contactForm select:hover,
form select:hover {
    border-color: hsla(220, 80%, 70%, 0.4) !important;
}
#contactForm select:focus,
form select:focus {
    outline: none;
    border-color: var(--first-color) !important;
    box-shadow: 0 0 0 3px hsla(220, 80%, 65%, 0.18);
}

/* Dark option styling — Chrome ignores this, but Firefox and Safari
   honor it so the option list isn't a white flash on dark themes. */
#contactForm select option,
form select option {
    background: hsl(220, 18%, 11%);
    color: var(--title-color, #f5f7fe);
}


/* =====================================================================
   Public form text inputs: match the select's border + focus ring so
   contact / booking modal / private_tour fields look like one family.
   ===================================================================== */

#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea,
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form input[type="number"],
.booking-form textarea,
form.contact-form input,
form.contact-form textarea {
    border: 1px solid hsla(220, 40%, 65%, 0.22) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#contactForm input:hover,
#contactForm textarea:hover,
.booking-form input:hover,
.booking-form textarea:hover {
    border-color: hsla(220, 80%, 70%, 0.4) !important;
}

#contactForm input:focus,
#contactForm textarea:focus,
.booking-form input:focus,
.booking-form textarea:focus {
    outline: none !important;
    border-color: var(--first-color) !important;
    box-shadow: 0 0 0 3px hsla(220, 80%, 65%, 0.18) !important;
}

/* Placeholder color tightening for contrast. */
#contactForm input::placeholder,
#contactForm textarea::placeholder,
.booking-form input::placeholder,
.booking-form textarea::placeholder {
    color: hsla(255, 100%, 100%, 0.35);
}


/* =====================================================================
   Public form labels + form-group rhythm.
   Labels were 16.8px bright lavender — competing with field text. Now
   they read as quiet uppercase captions; form groups get consistent
   bottom spacing so vertical rhythm is even.
   ===================================================================== */

#contactForm .form-group,
.booking-form .form-group,
.private-tour-form-container .form-group {
    margin-bottom: 1.1rem !important;
}

#contactForm .form-group label,
#contactForm > label,
.booking-form .form-group label,
.private-tour-form-container .form-group label,
.booking-form > .form-group label {
    display: block;
    margin-bottom: 0.4rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsla(255, 100%, 100%, 0.6) !important;
}

/* Don't apply uppercase caption to checkbox labels — they're full sentences. */
.checkbox-container,
.checkbox-container * {
    text-transform: none !important;
    letter-spacing: normal !important;
}
.checkbox-container {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: hsla(255, 100%, 100%, 0.78) !important;
    margin-bottom: 0 !important;
}


/* =====================================================================
   Private-tour form heading: was 25.2px — small for a page-level
   request title. Scale to a comfortable display size.
   ===================================================================== */

.private-tour-form-container h2 {
    font-size: clamp(1.75rem, 4vw, 2.4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 1.75rem !important;
    text-align: center;
}

/* Section title for "Select an Add-on" + similar subheaders inside the
   form get a softer treatment. */
.private-tour-form-container h3,
.private-tour-form-container .form-group > label[data-key="privateTourDuration"],
.private-tour-form-container .form-group > label[data-key="privateTourTime"] {
    font-size: 0.9rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsla(255, 100%, 100%, 0.65) !important;
}


/* =====================================================================
   Duration options: distribute the 4 buttons (1h / 1.5h / 2h / 3h)
   evenly so they fill the form width instead of clumping left.
   ===================================================================== */

.duration-options {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem !important;
}
.duration-options .duration-option {
    width: 100%;
    min-height: 44px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 0.55rem 0.75rem !important;
}

@media (max-width: 480px) {
    .duration-options { gap: 0.5rem !important; }
    .duration-options .duration-option {
        min-height: 48px !important;
        padding: 0.55rem 0.5rem !important;
        font-size: 1rem !important;
    }
}


/* =====================================================================
   "For custom times…" note + partner phone link.
   Note becomes a quiet hint card with a phone icon; the link reads as
   actionable contact info with underline + brand color.
   ===================================================================== */

.custom-time-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.75rem 0 1.25rem !important;
    padding: 0.75rem 1rem;
    background: hsla(255, 100%, 100%, 0.025);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.65rem;
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: hsla(255, 100%, 100%, 0.7) !important;
}
.custom-time-note::before {
    content: '';
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e8eed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}
.custom-time-note label {
    /* Override the uppercase caption rule we set for form labels — the
       label here is conversational, not a field caption. */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: inherit !important;
    margin: 0 !important;
}

#partner-phone-link {
    color: var(--first-color) !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-decoration-color: hsla(220, 80%, 65%, 0.5);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
    white-space: nowrap;
}
#partner-phone-link:hover {
    text-decoration-color: currentColor;
}


/* =====================================================================
   /available_tours.html date-filter pills.
   All rendered filled blue regardless of state — operators couldn't see
   which day was selected. Outline by default, filled when active.
   ===================================================================== */

#date-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 1.5rem;
    max-width: 720px;
    padding: 0 1rem;
}

.date-filter-btn {
    background: transparent !important;
    color: var(--first-color) !important;
    border: 1.5px solid var(--first-color) !important;
    padding: 0.55rem 1rem !important;
    min-height: 40px;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
    white-space: nowrap;
}
.date-filter-btn:hover {
    background: hsla(0, 0%, 100%, 0.04) !important;
}
.date-filter-btn:active { transform: scale(0.97); }
.date-filter-btn.active {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.18);
    font-weight: 600 !important;
}


/* =====================================================================
   /contact.html form layout: form was 968px wide on desktop with 32px
   gap. Constrain reading width + tighten label rhythm. Markup is flat
   (labels and inputs as direct children) so we use grid auto-flow.
   ===================================================================== */

#contactForm {
    max-width: 560px !important;
    margin: 0 auto !important;
    gap: 0.85rem !important;
    padding: 1.75rem !important;
    border-radius: 1.25rem !important;
}

#contactForm > label {
    margin-bottom: -0.4rem !important;
}

#contactForm > input,
#contactForm > select,
#contactForm > textarea {
    width: 100%;
    max-width: 100%;
    font-size: 0.95rem !important;
}

#contactForm .custom-send-button {
    margin-top: 0.5rem;
    min-height: 50px;
    border-radius: 0.65rem !important;
}

@media (max-width: 480px) {
    #contactForm {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }
}


/* =====================================================================
   Home description container: was 600px wide on a 1270px viewport.
   Widen + add proper gap so cards breathe and the screenshot reads.
   ===================================================================== */

.description__container {
    max-width: 920px !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(1.5rem, 3vw, 3rem) !important;
    align-items: center !important;
}
.description__container > * { min-width: 0; }
.description__container > div:nth-child(2) {
    display: flex !important;
    justify-content: center;
    width: 100%;
    min-width: 0;
}
.description__img {
    width: 100% !important;
    max-width: 380px;
    height: auto !important;
    aspect-ratio: 600 / 1300;
    display: block;
}

.description__content {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
}

@media (max-width: 768px) {
    .description__container {
        grid-template-columns: 1fr !important;
    }
    .description__container > div:has(> .description__img) {
        order: -1; /* image first on mobile */
    }
    .description__img {
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }
}


/* =====================================================================
   Hide native number spinners on admin price inputs.

   Chrome/Safari put up/down arrows inside type=number inputs that flick
   in only on hover and break the otherwise calm dark form. Firefox uses
   -moz-appearance:textfield. Numbers are still typeable + arrow keys
   still increment.
   ===================================================================== */

.settings-grid input[type="number"],
.input-affix input[type="number"],
#admin input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.settings-grid input[type="number"]::-webkit-outer-spin-button,
.settings-grid input[type="number"]::-webkit-inner-spin-button,
.input-affix input[type="number"]::-webkit-outer-spin-button,
.input-affix input[type="number"]::-webkit-inner-spin-button,
#admin input[type="number"]::-webkit-outer-spin-button,
#admin input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* =====================================================================
   Tour status: segmented control instead of stacked full-width radios.
   Original markup: hidden radios with sibling labels — all labels rendered
   the same blue, no selected state visible.
   ===================================================================== */

#tour-status.status-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    background: hsla(220, 18%, 11%, 0.6);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.65rem;
}
#tour-status input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}
#tour-status label {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.55rem 0.75rem !important;
    margin: 0 !important;
    text-align: center;
    border-radius: 0.45rem !important;
    background: transparent !important;
    color: hsla(255, 100%, 100%, 0.7) !important;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
    user-select: none;
}
#tour-status label:hover {
    background: hsla(255, 100%, 100%, 0.04) !important;
    color: hsla(255, 100%, 100%, 0.9) !important;
}
#tour-status input:checked + label {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.25);
    font-weight: 600;
}

@media (max-width: 480px) {
    #tour-status.status-toggle { flex-direction: column !important; }
    #tour-status label { text-align: left; }
}


/* =====================================================================
   Flatpickr dark theme override.
   The CDN ships a white default that blinded users on the booking pages.
   We tint surfaces to match the site's dark glass palette and bump day
   contrast so dates are actually readable.
   ===================================================================== */

.flatpickr-calendar {
    background: hsla(220, 18%, 10%, 0.96) !important;
    color: var(--title-color, #f5f7fe) !important;
    border: 1px solid hsla(255, 100%, 100%, 0.08) !important;
    border-radius: 0.85rem !important;
    box-shadow: 0 24px 48px hsla(0, 0%, 0%, 0.5) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: hsla(220, 18%, 10%, 0.96) !important;
    border-top-color: hsla(220, 18%, 10%, 0.96) !important;
}

.flatpickr-months,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .numInputWrapper {
    color: var(--title-color, #f5f7fe) !important;
    background: transparent !important;
}

.flatpickr-current-month {
    font-weight: 600;
    padding-top: 0.5rem;
}

.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: hsl(220, 18%, 12%) !important;
    color: var(--title-color, #f5f7fe) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--first-color) !important;
    fill: var(--first-color) !important;
    border-radius: 0.4rem;
    transition: background-color .15s ease;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: hsla(255, 100%, 100%, 0.06) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { fill: currentColor !important; }

.flatpickr-weekdays { background: transparent !important; }
.flatpickr-weekday {
    color: hsla(255, 100%, 100%, 0.5) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.flatpickr-day {
    color: hsla(255, 100%, 100%, 0.85) !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    transition: background-color .15s ease, color .15s ease;
}
.flatpickr-day:hover {
    background: hsla(255, 100%, 100%, 0.06) !important;
    border-color: transparent !important;
}
.flatpickr-day.today {
    border-color: var(--first-color) !important;
    color: var(--first-color) !important;
    font-weight: 700;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    border-color: var(--first-color) !important;
    box-shadow: 0 4px 10px hsla(0, 0%, 0%, 0.25);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: hsla(255, 100%, 100%, 0.18) !important;
}

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown { border: none !important; }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--title-color, #f5f7fe) !important; }
.numInputWrapper span.arrowDown::after { border-top-color: var(--title-color, #f5f7fe) !important; }


/* =====================================================================
   Admin login form polish.

   - Browser autofill turns input bg light blue with black text on
     Chrome/Safari, breaking the dark theme. Use the inset-shadow trick
     to spoof the original bg + force the autofilled text white.
   - Submit was rendering at 13.3px (a relative size cascading wrong).
     Pin a sane size + tap-friendly height.
   - Show-password button: 38×38 → 44×44 tap target.
   ===================================================================== */

#admin-email:-webkit-autofill,
#admin-email:-webkit-autofill:hover,
#admin-email:-webkit-autofill:focus,
#admin-password:-webkit-autofill,
#admin-password:-webkit-autofill:hover,
#admin-password:-webkit-autofill:focus,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px hsla(220, 18%, 9%, 1) inset !important;
    -webkit-text-fill-color: hsl(220, 30%, 96%) !important;
    caret-color: var(--first-color);
    transition: background-color 9999s ease-in-out 0s;
}

#admin-login-submit {
    font-size: 1rem !important;
    min-height: 48px;
    letter-spacing: 0.005em;
}

#toggle-password {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    right: 8px !important;
}

/* Caps-lock badge: less alarming, visually attached to the input. */
#caps-lock-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: hsla(45, 95%, 55%, 0.12);
    color: hsl(45, 95%, 75%) !important;
    border: 1px solid hsla(45, 95%, 55%, 0.2);
    border-radius: 0.5rem;
    font-size: 0.8rem !important;
    font-weight: 500;
}
#caps-lock-warning::before {
    content: '⇪';
    font-weight: 700;
    line-height: 1;
}

/* Tighten the login card width a touch on desktop so the form reads more
   focused, and push the title closer to the card. */
.admin-login-container {
    box-shadow: 0 24px 48px -12px hsla(0, 0%, 0%, 0.4);
    border-radius: 1rem !important;
}


/* =====================================================================
   Off-season fallback styling for booking.html.
   Visible only when toursEnabled === false (controlled by inline JS).
   ===================================================================== */
.off-season-slideshow {
    margin: 2rem auto;
    padding: 3rem 2rem;
    max-width: 540px;
    text-align: center;
    border: 1.5px dashed hsla(255, 100%, 100%, 0.12);
    border-radius: 1rem;
    background: hsla(255, 100%, 100%, 0.025);
}
.off-season-slideshow #off-season-message {
    font-size: 1.1rem;
    margin: 0;
    color: hsla(255, 100%, 100%, 0.85);
}


/* =====================================================================
   Booking modal pickers: ≥44px tap targets, framed value chip.

   .picker__button was 31×31, .picker__value was unframed and looked
   like text floating between two pills. Now: pill buttons 44×44, value
   gets a tinted chip the same height for visual cohesion.
   ===================================================================== */

.picker__controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.picker__button {
    flex: 0 0 44px;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    border: 1.5px solid transparent !important;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px hsla(0, 0%, 0%, 0.18);
}
.picker__button:hover { filter: brightness(1.1); }
.picker__button:active { transform: scale(0.94); }
.picker__button:disabled,
.picker__button[disabled] {
    background: hsla(255, 100%, 100%, 0.06) !important;
    color: hsla(255, 100%, 100%, 0.35) !important;
    box-shadow: none;
    cursor: not-allowed;
}

.picker__value {
    flex: 1 1 auto;
    min-width: 2rem;
    height: 44px !important;
    padding: 0 0.5rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: hsla(255, 100%, 100%, 0.04) !important;
    border: 1px solid hsla(255, 100%, 100%, 0.08) !important;
    border-radius: 0.6rem !important;
    color: var(--title-color, #f5f7fe) !important;
    font-size: 1.05rem !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Make sure each picker has enough room for 44+44+gap+value chip. */
.picker { min-width: 0; }
.picker__controls { min-width: 0; }

@media (max-width: 480px) {
    .picker__button {
        width: 48px !important;
        height: 48px !important;
    }
}


/* =====================================================================
   Notifications card + status badge.
   Visually groups the Telegram input as its own block within the
   Provider profile card and surfaces whether notifications are active
   at a glance.
   ===================================================================== */

.notifications-card {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.85rem;
    background: hsla(255, 100%, 100%, 0.02);
}

.notifications-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.status-badge--on {
    background: hsla(140, 60%, 45%, 0.15);
    color: hsl(140, 65%, 65%);
    border: 1px solid hsla(140, 60%, 45%, 0.3);
}
.status-badge--off {
    background: hsla(0, 0%, 100%, 0.04);
    color: hsla(255, 100%, 100%, 0.5);
    border: 1px solid hsla(255, 100%, 100%, 0.1);
}


/* =====================================================================
   Language switcher dropdown (replaces EN|DE).
   13 locales picker-accessible from any public page.
   ===================================================================== */

.lang-switcher { position: relative; display: inline-flex; align-items: center; }

.lang-switcher__current {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    min-height: 36px;
    background: hsla(255, 100%, 100%, 0.04);
    border: 1px solid hsla(255, 100%, 100%, 0.1);
    border-radius: 999px;
    color: var(--title-color, #f5f7fe);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.lang-switcher__current:hover {
    background: hsla(255, 100%, 100%, 0.07);
    border-color: hsla(255, 100%, 100%, 0.2);
}
.lang-switcher__chevron {
    font-size: 1rem;
    transition: transform .2s ease;
}
.lang-switcher__current[aria-expanded="true"] .lang-switcher__chevron {
    transform: rotate(180deg);
}

.lang-switcher__menu {
    /* Force display:block so the dropdown stacks the locale buttons vertically.
       Without this, a generic ul/flex rule elsewhere was rendering the 13
       locales in a single horizontal row 950px wide, blowing out the
       viewport on phones. */
    display: block;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 200;
    min-width: 11rem;
    max-width: min(260px, calc(100vw - 2rem));
    padding: 0.4rem;
    margin: 0;
    list-style: none;
    background: hsla(220, 18%, 9%, 0.95);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 24px 48px -12px hsla(0, 0%, 0%, 0.55);
    max-height: 60vh;
    overflow-y: auto;
}
/* Honour the hidden attribute even when other rules try to force display.
   The header markup ships with `<ul ... hidden>` and JS toggles the
   attribute to open/close — UA default of `display:none` was being
   overridden somewhere, so the closed dropdown stayed visible. */
.lang-switcher__menu[hidden] {
    display: none !important;
}

/* Global horizontal-overflow guard. Several rules across legacy CSS
   leak a few pixels past the viewport (e.g. .description__container at
   ~6px on phones) and trigger a horizontal scrollbar. `overflow-x: clip`
   prevents the scrollbar without breaking position:sticky the way
   `overflow-x: hidden` would. */
html, body {
    overflow-x: clip;
}
.lang-switcher__menu li { margin: 0; }
.lang-switcher__menu button {
    display: block;
    width: 100%;
    padding: 0.55rem 0.8rem;
    background: transparent;
    border: 0;
    border-radius: 0.55rem;
    color: hsla(255, 100%, 100%, 0.85);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.lang-switcher__menu button:hover {
    background: hsla(255, 100%, 100%, 0.06);
    color: var(--title-color, #f5f7fe);
}
.lang-switcher__menu button.is-current {
    background: hsla(255, 100%, 100%, 0.1);
    color: var(--first-color);
    font-weight: 600;
}

@media (max-width: 600px) {
    .lang-switcher__menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* =====================================================================
   Private tour time-slots: tap-target ≥44px, comfortable typography,
   responsive grid that wraps on phones.
   ===================================================================== */

.time-slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.5rem;
}

.time-slot {
    min-height: 44px !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    border-radius: 0.55rem !important;
    cursor: pointer;
    /* Active/selected/hover already styled globally in the duration-option
       block earlier; this rule just enforces the tap target + sizing. */
}

@media (max-width: 480px) {
    .time-slots-container {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 0.4rem;
    }
    .time-slot {
        min-height: 48px !important;
        font-size: 0.95rem !important;
    }
}


/* =====================================================================
   Tour-box (available_tours.html): status accent stripe, clearer
   typographic hierarchy, refined hover. Cards are text-only — no image.
   ===================================================================== */

.tour-box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.28s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.28s ease,
        border-color 0.28s ease,
        background-color 0.28s ease;
}
.tour-box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: hsla(255, 100%, 100%, 0.1);
    transition: background-color 0.25s ease, width 0.25s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .tour-box:hover {
        transform: translateY(-3px);
        box-shadow:
            0 14px 30px hsla(0, 0%, 0%, 0.32),
            0 2px 0 hsla(255, 100%, 100%, 0.05) inset;
        background-color: hsla(255, 100%, 100%, 0.025);
    }
    .tour-box:active { transform: translateY(-1px) scale(0.998); }
}
.tour-box:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px hsla(var(--first-color-h, 226), 80%, 60%, 0.45),
        0 14px 30px hsla(0, 0%, 0%, 0.32);
}
.tour-box.status-confirmed::before { background: hsl(140, 60%, 50%); }
.tour-box.status-planning::before  { background: hsl(40, 90%, 55%); }
.tour-box.status-cancelled::before { background: hsl(0, 75%, 60%); }
.tour-box:hover::before { width: 6px; }

.tour-box__body { padding-left: 0.75rem; }

.tour-box__status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
    padding: 0.15rem 0.6rem;
    background: hsla(255, 100%, 100%, 0.06);
    border-radius: 999px;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--title-color, #f5f7fe) !important;
}
.tour-box.status-confirmed .tour-box__status { background: hsla(140, 60%, 45%, 0.15); color: hsl(140, 65%, 75%) !important; }
.tour-box.status-planning  .tour-box__status { background: hsla(40, 90%, 55%, 0.15); color: hsl(40, 95%, 75%) !important; }
.tour-box.status-cancelled .tour-box__status { background: hsla(0, 75%, 55%, 0.15); color: hsl(0, 80%, 75%) !important; }

.tour-box__date {
    margin: 0 0 0.15rem !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--title-color, #f5f7fe);
}
.tour-box__time {
    margin: 0 0 0.5rem !important;
    font-size: 1rem;
    font-weight: 500;
    color: hsla(255, 100%, 100%, 0.7);
    font-variant-numeric: tabular-nums;
}
.tour-box__note {
    margin: 0 !important;
    font-size: 0.85rem;
    color: hsla(255, 100%, 100%, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
    .tour-box:hover .tour-box__date {
        transform: scale(1.03);
        transform-origin: left center;
        transition: transform 0.25s ease;
    }
}


/* =====================================================================
   Booking summary: emphasize total price + tighten the details list.
   ===================================================================== */

/* Status badge — sits right under the title. Green pill for confirmed
   group bookings; amber for private-tour requests still pending operator
   approval. Gives the customer instant visual confirmation of state. */
.summary-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 1.25rem;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1;
}
.summary-status i {
    font-size: 1rem;
    line-height: 1;
}
.summary-status--confirmed {
    background: hsla(140, 60%, 45%, 0.14);
    border-color: hsla(140, 60%, 45%, 0.32);
    color: hsl(140, 70%, 75%);
}
.summary-status--pending {
    background: hsla(40, 90%, 55%, 0.14);
    border-color: hsla(40, 90%, 55%, 0.32);
    color: hsl(40, 95%, 75%);
}
@media (prefers-reduced-motion: no-preference) {
    .summary-status--pending i {
        animation: summaryStatusPulse 2.4s ease-in-out infinite;
    }
}
@keyframes summaryStatusPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.summary-details ul {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.85rem;
    overflow: hidden;
    background: hsla(255, 100%, 100%, 0.02);
}
.summary-details li,
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem !important;
    margin: 0 !important;
    border-bottom: 1px solid hsla(255, 100%, 100%, 0.04);
    color: hsla(255, 100%, 100%, 0.85);
}
.summary-details li:last-child,
.summary-row:last-child { border-bottom: 0; }
.summary-details li strong { font-weight: 500; opacity: 0.75; }
.summary-details li span { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Total row: pull-quote treatment. */
.summary-row--total {
    background: hsla(140, 60%, 45%, 0.08);
    border-top: 1px solid hsla(140, 60%, 45%, 0.18) !important;
    border-bottom: 1px solid hsla(140, 60%, 45%, 0.18) !important;
}
.summary-row--total strong {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    opacity: 1 !important;
    color: hsl(140, 65%, 75%);
}
.summary-total-amount {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: hsl(140, 70%, 70%) !important;
}

/* Booking ID: monospaced + dim. */
.summary-id-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem !important;
    opacity: 0.65;
    user-select: all;
}

/* Looking-forward closing line gets a soft separator above. */
.summary-looking-forward {
    margin-top: 1.5rem !important;
    padding-top: 1.25rem;
    border-top: 1px solid hsla(255, 100%, 100%, 0.06);
    font-size: 1rem;
    color: hsla(255, 100%, 100%, 0.85);
    line-height: 1.55;
}

/* Action buttons row. */
.summary-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.summary-buttons .button,
.summary-buttons .download-pdf-button {
    flex: 1 1 220px;
    min-height: 48px;
}


/* =====================================================================
   Email verification page: framed card, large mail icon, filled CTA.
   ===================================================================== */

.verification {
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.verification__container { max-width: 540px !important; margin: 0 auto; }

.verification__card {
    padding: 2.5rem 2rem;
    background: hsla(220, 18%, 11%, 0.55);
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: center;
    box-shadow: 0 24px 48px -12px hsla(0, 0%, 0%, 0.4);
}

.verification__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(140, 60%, 45%, 0.15);
    border: 1px solid hsla(140, 60%, 45%, 0.3);
    border-radius: 50%;
    color: hsl(140, 65%, 70%);
    font-size: 2rem;
}

.verification h1 {
    margin: 0 0 0.85rem !important;
    font-size: clamp(1.75rem, 4vw, 2.4rem) !important;
    line-height: 1.15;
}
.verification__text {
    margin: 0 0 2rem !important;
    font-size: 1rem !important;
    line-height: 1.55;
    color: hsla(255, 100%, 100%, 0.8);
}

.verification__cta {
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 8px 22px hsla(0, 0%, 0%, 0.25);
    padding: 0.85rem 1.75rem;
    border: 1.5px solid transparent;
    transition: filter .2s ease, transform .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}
.verification__cta:hover { filter: brightness(1.08); }
.verification__cta:active { transform: scale(0.97); }


/* =====================================================================
   Confirm-booking page: card frame + active spinner while signing in.
   ===================================================================== */

.confirm-section { display: flex; align-items: center; min-height: 60vh; }
.confirm-card {
    max-width: 540px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: hsla(220, 18%, 11%, 0.55);
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px -12px hsla(0, 0%, 0%, 0.4);
}

.confirm-card__spinner {
    width: 48px; height: 48px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    border: 3px solid hsla(255, 100%, 100%, 0.08);
    border-top-color: var(--first-color);
    animation: confirm-spin 0.85s linear infinite;
}
/* Hide spinner once message text appears (success or error). */
#confirmation-message:not(:empty) ~ .confirm-card__spinner,
.confirm-card:has(#confirmation-message:not(:empty)) .confirm-card__spinner {
    display: none;
}

@keyframes confirm-spin {
    to { transform: rotate(360deg); }
}

.confirm-card h2 { margin-top: 0; }

#confirmation-message {
    font-size: 1rem;
    line-height: 1.55;
    color: hsla(255, 100%, 100%, 0.85);
    margin: 0.5rem 0 1.5rem;
}

.confirm-card__cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--first-color) !important;
    color: var(--white-color) !important;
    box-shadow: 0 8px 22px hsla(0, 0%, 0%, 0.25);
    padding: 0.85rem 1.75rem;
    border: 1.5px solid transparent;
    min-height: 48px;
    transition: filter .2s ease, transform .12s ease;
}
.confirm-card__cta:hover { filter: brightness(1.08); }
.confirm-card__cta:active { transform: scale(0.97); }


/* =====================================================================
   Legal pages (impressium.html, privacypolicy.html): readable measure +
   section rhythm. The pages are unstructured text after a few <h2>s so
   constrain main + style the headings, no markup change required.
   ===================================================================== */

body[class*="legal"],
body:has(> main:has(> h2:first-child)) {
    /* No-op marker for downstream tools; the real selector follows. */
}

/* Both legal pages: impressium uses `.impressum.section`, privacypolicy
   uses `.privacy-policy.section`. Constrain reading measure + paragraph
   rhythm. */
.impressum.section,
.privacy-policy.section {
    max-width: 720px !important;
    margin: 3rem auto !important;
    padding: 0 clamp(1rem, 4vw, 2rem) !important;
    font-size: 1rem;
    line-height: 1.7;
    color: hsla(255, 100%, 100%, 0.85);
}

.impressum.section h1,
.privacy-policy.section h1,
.impressum.section h2,
.privacy-policy.section h2 {
    margin: 2.5rem 0 1rem !important;
    font-size: 1.65rem !important;
    line-height: 1.2;
    text-align: left;
    font-weight: 700;
}
/* Page title (first-of-type heading) is bigger and serves as h1. */
.impressum.section > h1,
.impressum.section > h2:first-child,
.privacy-policy.section > h1,
.privacy-policy.section > h2:first-child {
    margin-top: 0 !important;
    font-size: clamp(2rem, 5vw, 2.75rem) !important;
    letter-spacing: -0.015em;
    color: var(--title-color, #f5f7fe);
}
/* Subsequent h2 sections get a soft top divider. */
.impressum.section > h2:not(:first-child),
.privacy-policy.section > h2:not(:first-of-type) {
    margin-top: 2.5rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid hsla(255, 100%, 100%, 0.06);
}


/* =====================================================================
   Modal close button: 31×31 with awkward top/right nudges → 40×40 round
   chip absolutely positioned in the corner. Same treatment for booking,
   private-tour-details, daily-tours, and policy modals.
   ===================================================================== */

.modal-content { position: relative; }

.modal-content .close-button {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    width: 40px;
    height: 40px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: hsla(255, 100%, 100%, 0.06);
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 50%;
    color: hsla(255, 100%, 100%, 0.85) !important;
    font-size: 1.5rem !important;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
    z-index: 10;
}
.modal-content .close-button:hover {
    background: hsla(0, 60%, 55%, 0.18);
    color: hsl(0, 70%, 75%) !important;
    border-color: hsla(0, 60%, 55%, 0.3);
}
.modal-content .close-button:active { transform: scale(0.92); }

/* Modal title: pad it so the close button doesn't crash into it. */
.modal-content > h2,
.modal-content > h3,
.modal-content .booking-box__title {
    padding-right: 3rem !important;
    margin-top: 0.25rem !important;
    font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
}


/* =====================================================================
   Modal viewport-aware sizing: long forms (booking modal at 1056px)
   were spilling off-screen. Cap height + scroll inside. Center the
   content vertically so short modals don't anchor to the top.
   ===================================================================== */

.modal {
    /* When visible, switch the modal to flex so we can center the inner
       box. Two triggers in this codebase open modals: a `.is-visible`
       class (available_tours: bookingModal) and inline `style.display`
       (private_tour: policyModal, admin add/edit modals). Cover both
       — but never default-on, so a fresh page load with neither flag
       leaves the modal invisible per booking.css's `.modal { display:none; }`. */
    align-items: center;
    justify-content: center;
}
.modal.is-visible,
.modal[style*="display: block"],
.modal[style*="display: flex"] {
    display: flex !important;
}

.modal-content {
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    margin: 1rem auto !important;
}

/* Scrollbar styling for Webkit (Chrome / Safari) — minimal track. */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: transparent; }
.modal-content::-webkit-scrollbar-thumb {
    background: hsla(255, 100%, 100%, 0.12);
    border-radius: 999px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
    background: hsla(255, 100%, 100%, 0.18);
}


/* =====================================================================
   Booking modal pickers (Adults / Students / Kids / Dogs).
   Was 3-col grid → 3+1 awkward orphan. Use auto-fit so 4 items fit as
   2×2 with min 180px column, dropping to 1 col only on very narrow
   phones.
   ===================================================================== */

.booking__pickers {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 1rem;
}
.booking__pickers .picker {
    padding: 0.85rem 1rem;
    background: hsla(255, 100%, 100%, 0.025);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 0.65rem;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}
.booking__pickers .picker:hover {
    background: hsla(255, 100%, 100%, 0.04);
    border-color: hsla(220, 80%, 70%, 0.2);
}
.booking__pickers .picker label {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.85rem !important;
    font-weight: 600;
    color: hsla(255, 100%, 100%, 0.85) !important;
    /* Don't apply form uppercase rule to picker labels — they include
       the price in parens which would look weird ALL CAPS. */
    text-transform: none !important;
    letter-spacing: normal !important;
}
.booking__pickers .picker__price {
    color: var(--first-color) !important;
    font-weight: 600;
    font-size: 0.85rem;
}


/* =====================================================================
   Policy modal: legal text gets a comfortable reading rhythm. The
   content (AGB / refund / privacy) is injected as innerHTML containing
   h2/h3/p/ul/li so we target descendants of #policy-text.
   ===================================================================== */

#policy-title {
    font-size: 1.5rem !important;
    font-weight: 700;
    margin: 0 0 1.25rem !important;
    padding-right: 3rem;
    color: var(--title-color, #f5f7fe) !important;
}

#policy-text {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: hsla(255, 100%, 100%, 0.85) !important;
}

#policy-text h2 {
    font-size: 1.15rem !important;
    font-weight: 700;
    margin: 1.5rem 0 0.65rem;
    color: var(--title-color, #f5f7fe) !important;
}
#policy-text h2:first-child { margin-top: 0; }
#policy-text h3 {
    font-size: 0.95rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsla(220, 80%, 75%, 0.95) !important;
    margin: 1.25rem 0 0.4rem;
}
#policy-text p { margin: 0 0 0.85rem; }
#policy-text ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    list-style: disc;
}
#policy-text li {
    margin: 0 0 0.4rem;
    line-height: 1.55;
}
#policy-text strong { color: var(--title-color, #f5f7fe); font-weight: 700; }
#policy-text hr {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid hsla(255, 100%, 100%, 0.06);
}
#policy-text a {
    color: var(--first-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =====================================================================
   Booking modal subtitle (chosen tour name + date). Was 26.4px lavender,
   competing with the title. Demote to a caption with subtle divider.
   ===================================================================== */

#booking-tour-subtitle {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: hsla(255, 100%, 100%, 0.7) !important;
    margin: 0.25rem 0 1rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsla(255, 100%, 100%, 0.06);
    line-height: 1.4;
}
#booking-tour-subtitle:empty {
    display: none;
}

.impressum.section p,
.privacy-policy.section p {
    margin: 0 0 1.1rem;
}
.impressum.section a,
.privacy-policy.section a {
    color: var(--first-color);
    text-decoration: underline;
    text-decoration-color: hsla(220, 80%, 65%, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}
.impressum.section a:hover,
.privacy-policy.section a:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 480px) {
    .impressum.section,
    .privacy-policy.section {
        margin: 1.5rem auto !important;
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Demote the redundant section h2 on /contact.html so the h1 wins. */
body > main > section > h2.section__title:first-child + h1,
body > main > section > h2.section__title-gradient:first-child + h1 {
    font-size: 2.5rem !important;
}
/* The duplicate "Contact" h2 above the contact form is purely
   decorative — shrink it so the real h1 leads. */
.contact-form-section > .section__title:first-child,
section.contact > h2.section__title-gradient:first-child,
/* contact.html structure: <section class="home section"><h2.section__title-gradient>Contact</h2></section> + <h1>Contact Us</h1> below */
section.home.section + .container h1,
section.home.section h2.section__title-gradient:only-child {
    /* no-op anchor for the rule below */
}

/* Demote the standalone gradient h2 above the contact form to an
   eyebrow / kicker so the real h1 leads. */
section.home.section h2.section__title-gradient:only-child {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    margin: 0 auto 0.5rem !important;
    opacity: 0.75;
    line-height: 1.2;
    text-align: center;
}

/* Promote the actual h1. Currently 33.6px — bump to compete with the
   site's section titles. */
.container > h1,
main > .container > h1 {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: var(--title-color, #f5f7fe);
}

/* ============================================================
   Iteration 7 — Settings sticky save bar + form validation states.
   ------------------------------------------------------------
   Why: the Settings form has 13+ price inputs across 4 fieldsets,
   so the single Save button at the bottom scrolls out of view.
   The sticky bar + dirty indicator means the operator always
   knows whether their changes are committed and where to commit
   them. The :user-invalid styling gives every form on the site
   a calm but unmistakable error cue without flashing during typing.
   ============================================================ */

.settings-sticky-save {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    margin: 1.5rem auto 0.5rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-radius: 0.85rem;
    background: rgba(15, 17, 28, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 -4px 24px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.settings-sticky-save .settings-save-btn {
    margin: 0;
    min-width: 180px;
}

.settings-save-status {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(245, 247, 254, 0.65);
    transition: color 0.2s ease;
}

.settings-save-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.settings-save-status[data-state="clean"] {
    color: #6ee7b7;
}

.settings-save-status[data-state="dirty"] {
    color: #fbbf24;
    animation: settingsDirtyPulse 1.6s ease-in-out infinite;
}

@keyframes settingsDirtyPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .settings-save-status[data-state="dirty"] { animation: none; }
}

.settings-form--dirty .settings-save-btn {
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.35),
        0 8px 24px rgba(251, 191, 36, 0.18);
}

@media (max-width: 540px) {
    .settings-sticky-save {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
        bottom: 0.5rem;
        padding: 0.75rem;
    }
    .settings-sticky-save .settings-save-btn { width: 100%; min-width: 0; }
    .settings-save-status { justify-content: center; }
}

/* ---- Global :user-invalid validation state ----
   Uses :user-invalid (only flips after the user has interacted with
   the field) so we never paint pristine forms red. Falls back silently
   on browsers that don't support it. */
.form-group input:user-invalid,
.form-group select:user-invalid,
.form-group textarea:user-invalid,
.booking__form-input:user-invalid,
#admin-login-form input:user-invalid,
#add-tour-form input:user-invalid,
#add-tour-form select:user-invalid,
#edit-private-request-form input:user-invalid,
#edit-private-request-form select:user-invalid,
#edit-private-request-form textarea:user-invalid,
.settings-grid input:user-invalid,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: rgba(255, 107, 107, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(255, 107, 107, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.02) inset !important;
}

.form-group input:user-invalid:focus,
.form-group select:user-invalid:focus,
.form-group textarea:user-invalid:focus,
.booking__form-input:user-invalid:focus,
#admin-login-form input:user-invalid:focus,
.settings-grid input:user-invalid:focus,
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    border-color: rgba(255, 107, 107, 0.85) !important;
    box-shadow:
        0 0 0 4px rgba(255, 107, 107, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
}

/* =====================================================================
   Mobile sticky submit on booking forms.
   ------------------------------------------------------------
   Long booking forms scroll for several screens on phones. Without a
   sticky CTA, customers have to scroll all the way down each time they
   touch a price field. Pinning the submit button to the bottom edge
   keeps the primary action always one tap away.

   Strategy: position: sticky inside the form. No JS. The chatbot
   launcher floats above it in the bottom-right corner — no collision
   because the launcher is corner-anchored while the bar spans the full
   form width to its left.
   ===================================================================== */

@media (max-width: 640px) {
    .booking__form .button--submit,
    .private-tour-form-container .button--submit {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin: 1rem -1rem -1rem;
        padding-top: 0.95rem;
        padding-bottom: max(0.95rem, env(safe-area-inset-bottom, 0.95rem));
        border-radius: 0;
        width: calc(100% + 2rem);
        box-shadow:
            0 -10px 28px -10px rgba(0, 0, 0, 0.55),
            0 -1px 0 hsla(255, 100%, 100%, 0.06) inset;
        /* Re-affirm the brand fill since other rules may have neutered it. */
        background: linear-gradient(
            135deg,
            hsl(var(--hue-color, 226), 80%, 60%),
            hsl(calc(var(--hue-color, 226) - 25), 90%, 65%)
        ) !important;
        color: #fff !important;
    }

    /* Ensure the chatbot launcher doesn't crowd the right side of
       the sticky bar's text on tight viewports. */
    .booking__form .button--submit + *,
    .private-tour-form-container .button--submit + * {
        margin-top: 1rem;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .booking__form .button--submit,
    .private-tour-form-container .button--submit {
        transition: transform 0.15s cubic-bezier(.2,.8,.2,1);
    }
    .booking__form .button--submit:active,
    .private-tour-form-container .button--submit:active {
        transform: scale(0.985);
    }
}

/* =====================================================================
   Highlights strip (index.html) — fills the gap between the description
   grid and the autoplay-by-location card with four concrete value props.
   ===================================================================== */

.highlights-strip {
    padding: 2rem 0;
}

.highlights-strip__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.highlight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: hsla(220, 18%, 11%, 0.55);
    border: 1px solid hsla(255, 100%, 100%, 0.06);
    border-radius: 1rem;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    transition:
        transform 0.25s cubic-bezier(.2,.8,.2,1),
        border-color 0.25s ease,
        background-color 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .highlight-card:hover {
        transform: translateY(-3px);
        background: hsla(220, 18%, 14%, 0.65);
        border-color: hsla(var(--hue-color, 226), 95%, 70%, 0.25);
    }
}

.highlight-card__icon {
    font-size: 1.85rem;
    margin-bottom: 0.6rem;
    color: hsl(var(--hue-color, 226), 90%, 70%);
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        hsla(var(--hue-color, 226), 80%, 60%, 0.20),
        hsla(calc(var(--hue-color, 226) - 25), 90%, 65%, 0.10)
    );
    border: 1px solid hsla(var(--hue-color, 226), 95%, 80%, 0.18);
}

.highlight-card__icon svg {
    width: 1.85rem;
    height: 1.85rem;
    display: block;
}

svg.button__icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-left: var(--mb-0-5);
    vertical-align: middle;
}

.location-feature .feature-icon svg {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
}

svg.scrollup__icon {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--white-color);
    display: block;
}

.nav__toggle svg,
.nav__close svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

svg.lang-switcher__chevron {
    width: 1rem;
    height: 1rem;
    transition: transform .2s ease;
    flex: 0 0 auto;
}

.verification__icon svg {
    width: 2rem;
    height: 2rem;
    display: block;
}

.admin-login-eye svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.admin-login-hint svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.admin-logout-button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.highlight-card__value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--title-color, #f5f7fe);
    letter-spacing: -0.005em;
    margin-bottom: 0.15rem;
}

.highlight-card__label {
    font-size: 0.85rem;
    color: hsla(255, 100%, 100%, 0.65);
    line-height: 1.35;
}

/* =====================================================================
   Booking summary v2 — meeting-point block, framed map, primary +
   ghost buttons. Replaces the bare PDF + back-to-home pair with a
   clearer hierarchy and a styled map preview.
   ===================================================================== */

.summary-meeting-address {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.5rem 0 1rem !important;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: hsla(var(--hue-color, 226), 80%, 60%, 0.10);
    border: 1px solid hsla(var(--hue-color, 226), 95%, 80%, 0.22);
    color: var(--title-color, #f5f7fe);
    font-weight: 500;
    font-size: 0.9rem;
}
.summary-meeting-address i {
    color: hsl(var(--hue-color, 226), 90%, 70%);
    font-size: 1rem;
}

.summary-meeting-note {
    margin: 0.75rem 0 1rem !important;
    color: hsla(255, 100%, 100%, 0.7);
    font-style: italic;
    font-size: 0.9rem;
}

/* Map frame — gives the leaflet map rounded corners + drop shadow
   without breaking the tile layer. The inner #map keeps its existing
   height rule from summary.css. */
.summary-map-frame {
    position: relative;
    margin-top: 0.5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    box-shadow: 0 14px 32px -14px hsla(0, 0%, 0%, 0.5);
    /* Force aspect-ratio fallback if #map has no explicit height. */
    min-height: 280px;
}
.summary-map-frame #map {
    height: 320px !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

/* Directions CTA — outline pill that opens Google Maps directions. */
.summary-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid hsla(var(--hue-color, 226), 95%, 80%, 0.35);
    color: hsl(var(--hue-color, 226), 95%, 80%) !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.summary-directions-link:hover {
    background: hsla(var(--hue-color, 226), 80%, 60%, 0.12);
    transform: translateY(-1px);
}
.summary-directions-link:active {
    transform: scale(0.98);
}
.summary-directions-link i { font-size: 1rem; }

/* Buttons row — primary fill + ghost outline. Using stronger selectors
   so the legacy .download-pdf-button rule from summary.css doesn't win. */
.summary-buttons {
    flex-direction: row !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem !important;
    margin-top: 1.75rem !important;
}
.summary-buttons .download-pdf-button.button--primary,
.summary-buttons .button.button--ghost {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 220px;
    max-width: 320px !important;
    min-height: 52px;
    padding: 0.85rem 1.5rem !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: transform 0.18s ease, box-shadow 0.25s ease, background-color 0.2s ease;
    width: auto !important;
    cursor: pointer;
    text-decoration: none !important;
}
.summary-buttons .download-pdf-button.button--primary {
    background: linear-gradient(
        135deg,
        hsl(var(--hue-color, 226), 80%, 60%),
        hsl(calc(var(--hue-color, 226) - 25), 90%, 65%)
    ) !important;
    color: #fff !important;
    border: 1px solid hsla(255, 100%, 100%, 0.10) !important;
    box-shadow:
        0 8px 22px -10px hsla(var(--hue-color, 226), 90%, 50%, 0.6),
        inset 0 1px 0 hsla(0, 0%, 100%, 0.18);
}
.summary-buttons .download-pdf-button.button--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px -10px hsla(var(--hue-color, 226), 90%, 50%, 0.7),
        inset 0 1px 0 hsla(0, 0%, 100%, 0.18);
}
.summary-buttons .download-pdf-button.button--primary:disabled {
    background: hsla(var(--hue-color, 226), 15%, 35%, 0.6) !important;
    box-shadow: none;
    filter: grayscale(0.4);
    cursor: progress;
}

.summary-buttons .button.button--ghost {
    background: transparent !important;
    color: var(--title-color, #f5f7fe) !important;
    border: 1px solid hsla(255, 100%, 100%, 0.18) !important;
    box-shadow: none !important;
}
.summary-buttons .button.button--ghost:hover {
    background: hsla(255, 100%, 100%, 0.06) !important;
    transform: translateY(-2px);
    border-color: hsla(255, 100%, 100%, 0.28) !important;
}

@media (max-width: 540px) {
    .summary-buttons {
        flex-direction: column !important;
    }
    .summary-buttons .download-pdf-button.button--primary,
    .summary-buttons .button.button--ghost {
        max-width: none !important;
        width: 100% !important;
    }
}

/* =====================================================================
   Tour-options grid equalisation. The base rule is
   `grid-template-columns: 1fr 1fr` but `1fr` can grow past its share
   when card content has its own intrinsic width — which is what was
   producing a ~50px size mismatch between "With Others" and
   "Private Tour". minmax(0, 1fr) clamps the lower bound so the two
   tracks stay exactly equal regardless of content.
   ===================================================================== */

.tour-options-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* Cards are display:flex which makes width:auto shrink to content; force
   them to fill their grid track so both cards are exactly equal width. */
.tour-options-container > .tour-option {
    width: 100% !important;
}

@media (max-width: 720px) {
    .tour-options-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* =====================================================================
   Mobile hamburger menu — closed state.
   ------------------------------------------------------------
   styles.css uses `top: -100%` to hide the menu, but for
   `position: fixed`, percentage top resolves against the containing
   block height (the small header, ~48px) — so the menu only slid up
   by 48px and the rest stayed visible. Replace with a transform-based
   hidden state so the entire menu sits above the viewport on mobile,
   then `.show-menu` slides it back to translateY(0).
   ===================================================================== */

@media screen and (max-width: 767px) {
    .nav__menu {
        top: 0 !important;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(.2,.8,.2,1),
                    opacity 0.25s ease;
        z-index: 1500;
        /* glass backdrop: keep it readable over the page content. */
        background: hsla(220, 18%, 8%, 0.96) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
                backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid hsla(255, 100%, 100%, 0.06);
        max-height: 100vh;
        overflow-y: auto;
    }
    .nav__menu.show-menu {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .nav__list {
        gap: 1rem;
        padding: 0.5rem 1rem;
    }
    .nav__toggle, .nav__close {
        font-size: 1.5rem;
        width: 44px;
        height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease;
    }
    .nav__toggle:hover, .nav__close:hover {
        background-color: hsla(255, 100%, 100%, 0.06);
    }
    /* Lock body scroll when menu open so the page doesn't scroll behind. */
    body.kg-menu-open { overflow: hidden; }
}

/* =====================================================================
   Skeleton heights for async-injected header + footer.
   ------------------------------------------------------------
   `header-loader.js` and `footer-loader.js` populate the empty
   <header> and <footer> shells via fetch + innerHTML AFTER
   DOMContentLoaded. Without a reserved height, the document
   suddenly grows by the footer's ~415px once injection completes,
   contributing to CLS. Set a min-height that matches the rendered
   markup so the layout is stable from the very first paint.
   ===================================================================== */

footer.footer:empty,
footer.footer:not(:has(*)) {
    min-height: 446px;
    display: block;
}

/* Header is position:fixed so it doesn't reflow neighbours, but a
   min-height keeps tools that don't honour fixed (like Lighthouse's
   CLS heuristic in some passes) from flagging the empty shell. */
header.header:empty,
header.header:not(:has(*)) {
    min-height: 49px;
}

/* =====================================================================
   Entrance reveal — replaces the ScrollReveal CDN dependency.
   main.js tags scrolled-into-view elements with .kg-reveal +
   .kg-reveal--{origin}; an IntersectionObserver toggles .is-visible.
   --kg-reveal-delay (set by JS for stagger groups) feeds into the
   transition delay so e.g. tour-box cards fan in.
   ===================================================================== */

.kg-reveal {
    opacity: 0;
    transition:
        opacity 0.9s cubic-bezier(.2,.8,.2,1),
        transform 0.9s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--kg-reveal-delay, 0ms);
    will-change: transform, opacity;
}
.kg-reveal--top    { transform: translateY(-60px); }
.kg-reveal--bottom { transform: translateY(60px); }
.kg-reveal--left   { transform: translateX(-60px); }
.kg-reveal--right  { transform: translateX(60px); }

.kg-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .kg-reveal { transition: none; transform: none; opacity: 1; }
}

/* =====================================================================
   Impressum/Privacy legal pages — link contrast.
   Lighthouse flagged the inline `.privacypolicy` link inside body copy
   as below WCAG AA contrast on the dark theme. Brighten and underline.
   ===================================================================== */

.impressum a.privacypolicy,
.impressum a.impressum-link,
.privacy-content a,
#privacy-policy a {
    color: hsl(var(--hue-color, 226), 95%, 80%) !important;
    text-decoration: underline;
    text-decoration-color: hsla(var(--hue-color, 226), 95%, 70%, 0.55);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}
.impressum a.privacypolicy:hover,
.impressum a.impressum-link:hover,
.privacy-content a:hover,
#privacy-policy a:hover {
    color: hsl(var(--hue-color, 226), 100%, 90%) !important;
    text-decoration-color: currentColor;
}

/* =====================================================================
   Description grid icon: <svg class="description__icon"> replaces the
   previous remixicon <i>. The original got its size from font-size
   (var(--normal-font-size) ≈ 1rem). SVG ignores font-size by default,
   so set width/height + colour explicitly. Description icons get a
   bigger visual on tablets/desktops via the existing media query.
   ===================================================================== */

svg.description__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: hsl(var(--hue-color, 226), 95%, 78%);
    margin-bottom: 0.5rem;
    display: block;
}
@media (max-width: 480px) {
    svg.description__icon {
        width: 2rem;
        height: 2rem;
    }
}

/* =====================================================================
   Sights — side decorations next to content sections
   --------------------------------------------------------------------
   Sight illustrations sit in the negative space to the left and right
   of centered section content. Absolute-positioned so they don't
   disrupt the existing layout — they just float in the margins like
   landmarks the visitor passes while scrolling. Hidden below 1100px
   where there's no side room.
   ===================================================================== */

.section,
.tour-options-section,
.slider-section,
.description,
.highlights-strip,
.location-feature,
.meet-ken { position: relative; }

.sight-deco {
    position: absolute;
    width: clamp(220px, 22vw, 320px);
    height: auto;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    filter:
        drop-shadow(0 20px 36px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 0px hsla(220, 80%, 65%, 0));
    animation: sight-deco-bob 7s ease-in-out infinite;
    transition: filter 0.5s ease, opacity 1s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}
.sight-deco.is-revealed { opacity: 1; }
/* Sights pulled inward from the viewport edge so they sit closer to
   the centered content. `right` (or `left`) value here is the distance
   from the viewport edge — bigger value = sight moves toward center.
   At 1600px the sight lands roughly 25% in from the edge instead of
   hugging it. Sized down a touch so they fit at the new tighter spot. */
.sight-deco--left  { left:  clamp(80px, 11vw, 220px); animation-delay: -1.5s; }
.sight-deco--right { right: clamp(80px, 11vw, 220px); animation-delay: -4s; }

/* On hover: pause the bob, brighten the shadow, glow blue. */
.sight-deco:hover {
    animation-play-state: paused;
    filter:
        drop-shadow(0 24px 44px rgba(0, 0, 0, 0.65))
        drop-shadow(0 0 36px hsla(220, 90%, 70%, 0.55));
}

/* Multi-keyframe boat-on-water sway: rises higher on the upbeat,
   drops with a slight roll. Less metronomic than a sine wave. */
@keyframes sight-deco-bob {
    0%   { transform: translateY(-50%)              rotate(-1.8deg); }
    25%  { transform: translateY(calc(-50% - 14px)) rotate(0.6deg); }
    50%  { transform: translateY(calc(-50% - 6px))  rotate(1.8deg); }
    75%  { transform: translateY(calc(-50% - 18px)) rotate(0.6deg); }
    100% { transform: translateY(-50%)              rotate(-1.8deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sight-deco { animation: none; transform: translateY(-50%); opacity: 1; transition: none; }
    .sight-deco:hover { transform: translateY(-50%); }
}

@media (max-width: 1100px) {
    .sight-deco { display: none; }
}

/* Compact the content + reserve breathing room for sights on wide
   viewports. Section gets asymmetric padding so the content visually
   "leans" away from the sight, giving the illustration roughly 30% of
   the section width as a stage. The sight is bigger and gets its own
   negative space; content cards reflow into a tighter grid. */
@media (min-width: 1100px) {
    /* Right-side sight: push content left, reserve right space */
    .section:has(> .sight-deco--right):not(:has(> .sight-deco--left)),
    .tour-options-section:has(> .sight-deco--right):not(:has(> .sight-deco--left)),
    .slider-section:has(> .sight-deco--right):not(:has(> .sight-deco--left)) {
        padding-right: clamp(360px, 36vw, 560px);
        padding-left: clamp(2rem, 5vw, 5rem);
    }
    /* Left-side sight: push content right, reserve left space */
    .section:has(> .sight-deco--left):not(:has(> .sight-deco--right)),
    .tour-options-section:has(> .sight-deco--left):not(:has(> .sight-deco--right)),
    .slider-section:has(> .sight-deco--left):not(:has(> .sight-deco--right)) {
        padding-left: clamp(360px, 36vw, 560px);
        padding-right: clamp(2rem, 5vw, 5rem);
    }
    /* Both sights: squeeze content in the middle column */
    .section:has(> .sight-deco--left):has(> .sight-deco--right),
    .tour-options-section:has(> .sight-deco--left):has(> .sight-deco--right),
    .slider-section:has(> .sight-deco--left):has(> .sight-deco--right) {
        padding-inline: clamp(340px, 34vw, 520px);
    }

    /* Highlights-strip cards reflow from 1×4 into 2×2 when there's a
       sight competing for horizontal space. Caps each card at ~280px so
       the grid stays tidy. */
    .highlights-strip:has(.sight-deco) .highlights-strip__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 640px;
        gap: 1rem;
    }
}

/* =====================================================================
   "Meet Ken" intro card on the homepage. Compact panel with a circular
   avatar + a couple of sentences introducing the chatbot persona, so
   the launcher button at bottom-right has a face attached.
   ===================================================================== */

.meet-ken {
    padding: clamp(2rem, 5vw, 4rem) 0;
}
.meet-ken__container {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    background: hsla(255, 100%, 100%, 0.04);
    border: 1px solid hsla(255, 100%, 100%, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.4);
}
.meet-ken__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid hsla(220, 80%, 65%, 0.4);
    background: hsla(220, 80%, 65%, 0.08);
}
.meet-ken__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--title-color, #f5f7fe);
}
.meet-ken__body {
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
    font-size: 0.95rem;
}
@media (max-width: 540px) {
    .meet-ken__container {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}