/* ============================================================
   VILA FALO — DESIGN FIXES  (2026)
   Loaded LAST so these rules win. Covers:
   1) Navbar (no more black bar)
   2) Floating buttons (WhatsApp / Gemini) vs. sticky booking bar
   3) Accommodation ("Where you'll sleep") polish
   4) Mobile-friendliness
   Brand: --primary #2a6d4e  --secondary #d9a566  --dark #1e2d32
   ============================================================ */

/* ---------------------------------------------------------------
   1) NAVBAR — soft scrim at top, frosted GREEN once scrolled
   (was a solid black bar — rgba(0,0,0,.85))
   --------------------------------------------------------------- */
.header {
    background: linear-gradient(180deg, rgba(20, 33, 27, 0.55) 0%, rgba(20, 33, 27, 0) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.header.scrolled {
    background: rgba(42, 109, 78, 0.94);   /* brand green, not black */
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: 0 2px 24px rgba(20, 40, 30, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------
   2) FLOATING BUTTONS — WhatsApp on the RIGHT; Gemini chat on the
   LEFT and HIDDEN for now (needs the backend, so nobody should try it).
   --------------------------------------------------------------- */
.whatsapp-float {
    bottom: 24px;
    right: 20px;
    left: auto;
    z-index: 1200;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* Gemini chatbot — parked on the left and hidden (backend is off) */
.chatbot-toggle,
.vila-chatbot,
.chatbot-container,
.chatbot-window {
    display: none !important;
}

/* When the sticky check-in/out bar is showing, hide the WhatsApp button
   so nothing overlaps the bar. */
body.bar-visible .whatsapp-float {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 768px) {
    .whatsapp-float { bottom: 18px; right: 16px; left: auto; }
}

/* ---------------------------------------------------------------
   3) ACCOMMODATION — clean, mobile-friendly room cards
   (replaces the SVG "blinds" scroll section)
   --------------------------------------------------------------- */
.rooms-section-v2 {
    padding: 6rem 20px 6rem;
    /* same textured background as #about / #restaurant so the sections flow as one */
    background: #f5f0e8 url('/images/green-back.png') center/cover no-repeat;
}
/* Header matches the REZERVIMI (booking) header exactly: it keeps the site's
   global .section-title / .section-label / .section-title h2 styles (green
   spaced-out label + italic Playfair heading), so no label/heading overrides here. */
.rooms-section-v2 .rooms-header {
    max-width: 760px;
    margin: 0 auto;
}
.rooms-section-v2 .rooms-header p {
    color: #6b6b6b;
    font-size: 1.05rem;
    margin: 0.4rem 0 0;
    text-align: center;
}

.room-cards {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.room-card {
    /* frosted-glass look, like the SHËRBIMET service cards */
    background: rgba(255, 255, 255, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(30, 45, 50, 0.10);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.room-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 48px rgba(30, 45, 50, 0.18);
}
.room-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.room-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.room-card:hover .room-card-media img { transform: scale(1.06); }
.room-card-price {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(42, 109, 78, 0.95);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 7px 14px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(20, 40, 30, 0.25);
}
.room-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.room-card-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #1f3a24;
    margin: 0 0 16px;
    line-height: 1.2;
}
.room-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.room-card-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #555;
}
.room-card-features i {
    color: var(--primary, #2a6d4e);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.room-card-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
}
.room-card-actions .btn,
.room-card-actions .btn-outline {
    flex: 1;
    text-align: center;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
    line-height: 1.2;
}
.room-card-actions .btn-outline {
    border: 1.5px solid var(--primary, #2a6d4e);
    color: var(--primary, #2a6d4e);
    background: transparent;
}
.room-card-actions .btn-outline:hover { background: rgba(42, 109, 78, 0.08); }
.room-card-actions .btn {
    background: var(--primary, #2a6d4e);
    color: #fff;
    border: 1.5px solid var(--primary, #2a6d4e);
}
.room-card-actions .btn:hover { background: #22583f; }

/* Tablet: keep 3 across, a little tighter */
@media (min-width: 641px) and (max-width: 920px) {
    .room-cards { gap: 16px; max-width: 100%; }
    .rooms-section-v2 { padding: 56px 16px 68px; }
}
/* Phones: big, swipeable room cards — they are the star of the show.
   One large card at a time, swipe sideways, the next one peeks to invite it. */
@media (max-width: 640px) {
    .rooms-section-v2 { padding: 48px 0 56px; }
    .rooms-section-v2 .rooms-header { padding: 0 20px; margin-bottom: 1.6rem; }
    .room-cards {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding: 4px 20px 20px;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .room-cards::-webkit-scrollbar { display: none; }
    .room-card {
        flex: 0 0 86%;
        max-width: 370px;
        scroll-snap-align: center;
        border-radius: 18px;
    }
    .room-card-media { aspect-ratio: 16 / 11; }
    .room-card-body { padding: 20px 20px 22px; }
    .room-card-body h3 { font-size: 1.3rem; margin-bottom: 16px; line-height: 1.2; }
    .room-card-price { font-size: 0.85rem; padding: 7px 14px; top: 12px; right: 12px; }
    .room-card-features { grid-template-columns: 1fr 1fr; gap: 11px 14px; margin-bottom: 20px; }
    .room-card-features li { font-size: 0.86rem; gap: 8px; }
    .room-card-features i { font-size: 1rem; width: 18px; }
    .room-card-actions { flex-direction: row; gap: 10px; }
    .room-card-actions .btn,
    .room-card-actions .btn-outline { font-size: 0.92rem; padding: 12px; }
}

/* Room carousel arrows — swipe AND tap. On the sides, over the photo. Phones only. */
.rooms-carousel { position: relative; }
.rooms-nav { display: none; }
@media (max-width: 640px) {
    .rooms-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        /* vertically centred on the card photo (media is 16/11 of the card width) */
        top: calc(4px + min((100vw - 40px) * 0.86, 370px) * 11 / 32);
        transform: translateY(-50%);
        z-index: 6;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.94);
        color: #2a6d4e;
        font-size: 1.6rem;
        line-height: 1;
        padding: 0 0 3px;
        cursor: pointer;
        box-shadow: 0 3px 12px rgba(20, 40, 30, 0.38);
        transition: transform 0.15s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .rooms-nav-prev { left: 8px; }
    .rooms-nav-next { right: 8px; }
    .rooms-nav:active { transform: translateY(-50%) scale(0.88); background: #fff; }
}

/* Booking validation box — prominent, on the dark form */
#bookingErrors {
    display: none;
    background: rgba(192, 57, 43, 0.22);
    border: 1px solid rgba(231, 76, 60, 0.65);
    color: #ffe2dd;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.4;
}
#bookingErrors strong { color: #fff; display: block; margin-bottom: 4px; }
#bookingErrors ul { margin: 0; padding-left: 20px; list-style: disc; }
#bookingErrors li { margin: 3px 0; }

/* ---------------------------------------------------------------
   4) BOOKING — "why book direct" perks (replaced the calendar)
   --------------------------------------------------------------- */
.booking-perks {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.booking-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.02rem;
    color: #3a4a40;
}
.booking-perks i {
    color: var(--primary, #2a6d4e);
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   5) BOOKING FORM polish
   --------------------------------------------------------------- */
/* Name / Email / Phone are required — mark them clearly */
label[for="guestName"]::after,
label[for="email"]::after,
label[for="phone"]::after {
    content: " *";
    color: #c0392b;
    font-weight: 700;
}

/* Breakfast is always included — static note instead of an uncheckable box */
.breakfast-included-note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary, #2a6d4e);
    font-size: 1rem;
    padding: 6px 0;
}
.breakfast-included-note i { font-size: 1.2rem; }

/* Special requests — smaller, compact box */
.special-requests-group textarea,
#specialRequests {
    min-height: 46px !important;
    height: 46px !important;
    padding: 10px 14px !important;
    resize: vertical;
}

/* Date fields — stop the calendar icon overlapping the text.
   Flatpickr shows a visible ".form-control" altInput, so target it specifically. */
.date-input-wrapper input,
.date-input-wrapper input[type="date"],
.date-input-wrapper input.form-control,
.date-input-wrapper input.flatpickr-input,
.date-input-wrapper .flatpickr-input {
    padding-left: 50px !important;
}
.date-input-icon { pointer-events: none; z-index: 1; }

/* ---------------------------------------------------------------
   6) RESTAURANT videos — native, autoplaying (no play button)
   --------------------------------------------------------------- */
.food-scatter-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* ---------------------------------------------------------------
   7) HERO — lighter on mobile: swap the 32 MB video for its poster image
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    /* keep the hero video PLAYING on mobile; the image only sits behind it as a fallback */
    .hero-video-bg { display: block !important; }
    .hero {
        background: #1e2d32 url('/images/very-nice.jpg') center/cover no-repeat;
    }
}

/* ---------------------------------------------------------------
   8) ABOUT ("Çfarë do të shijoni") — slightly larger photo
   --------------------------------------------------------------- */
#about .about-primland-right { flex: 1.5; }
#about .about-primland-right img { height: 740px; object-fit: cover; }
@media (max-width: 992px) {
    #about .about-primland-right img { height: 480px; }
}
@media (max-width: 600px) {
    #about .about-primland-right img { height: 360px; }
}

/* ---------------------------------------------------------------
   9) BOOKING (REZERVIMI · Zgjidh datat) — richer, footer-style
   dark background image; the light form card pops against it.
   --------------------------------------------------------------- */
.booking {
    background: linear-gradient(rgba(30, 45, 50, 0.90), rgba(30, 45, 50, 0.82)),
                url('/images/voksopoja-winter.jpg') center/cover no-repeat !important;
    padding: 6rem 0 !important;
}
/* light text on the dark backdrop */
.booking .section-label { color: var(--secondary, #d9a566); }
.booking .section-title h2 { color: #fff; }
.booking-info h3 { color: #fff; }
.booking-info p { color: rgba(255, 255, 255, 0.85); }
.booking-perks li { color: rgba(255, 255, 255, 0.92); }
.booking-perks i { color: var(--secondary, #d9a566); }

/* ---------------------------------------------------------------
   10) UNIFIED SECTION HEADERS — one consistent style site-wide
   (green spaced-out label + centered italic Playfair heading)
   so the page reads as one flowing design.
   --------------------------------------------------------------- */
.section-label,
.about-primland-label {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary, #2a6d4e);
    font-weight: 600;
    margin-bottom: 1rem;
}
.section-title h2,
.about-primland-tagline {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--dark, #1e2d32);
    text-align: center;
    line-height: 1.3;
    font-size: clamp(1.7rem, 4.5vw, 2.4rem);
}
/* booking header stays light on its dark background (kept from section 9) */
.booking .section-label { color: var(--secondary, #d9a566); }
.booking .section-title h2 { color: #fff; }

/* ---------------------------------------------------------------
   11) BOOKING FORM — frosted-glass panel (footer dark + SHËRBIMET
   glass), fields restyled to be readable on the dark section.
   --------------------------------------------------------------- */
.booking-form {
    background: rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}
.booking-form .form-group label,
.booking-form label { color: rgba(255, 255, 255, 0.92); }
.booking-form .form-group label i,
.booking-form label i { color: var(--secondary, #d9a566) !important; }

.booking-form .form-group input,
.booking-form .form-group select,
.booking-form .form-group textarea,
.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form .date-input-wrapper input,
.booking-form .date-input-wrapper input.form-control {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: rgba(255, 255, 255, 0.55) !important; }
.booking-form input:focus,
.booking-form textarea:focus,
.booking-form .date-input-wrapper input:focus {
    border-color: var(--secondary, #d9a566) !important;
    box-shadow: 0 0 0 3px rgba(217, 165, 102, 0.15) !important;
    background: rgba(255, 255, 255, 0.14) !important;
}
.booking-form .date-input-icon { color: rgba(255, 255, 255, 0.7); }

/* room-type cards — gold, so they stand out */
.booking-form .room-radio-content {
    background: rgba(217, 165, 102, 0.12) !important;
    border: 1.5px solid rgba(217, 165, 102, 0.45) !important;
    color: #fff;
}
.booking-form .room-radio-text strong { color: #fff; }
.booking-form .room-radio-text span { color: var(--secondary, #d9a566); font-weight: 600; }
.booking-form .room-radio-text small { color: rgba(255, 255, 255, 0.6); }
/* the SELECTED room is highlighted in prominent GREEN (not gold) */
.booking-form .room-radio-card input:checked + .room-radio-content {
    border-color: #4caf72 !important;
    background: rgba(76, 175, 114, 0.32) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 114, 0.55), 0 6px 18px rgba(42, 109, 78, 0.35) !important;
    transform: translateY(-2px);
}

/* steppers (adults / children) */
.booking-form .stepper-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
}
.booking-form .stepper-btn { color: #fff !important; background: transparent !important; }
.booking-form .stepper-control input { color: #fff !important; background: transparent !important; }

/* breakfast note + helper text */
.booking-form .breakfast-included-note { color: #fff; }
.booking-form .breakfast-included-note i { color: var(--secondary, #d9a566); }
.booking-form > form > p,
.booking-form .no-payment-note,
.booking-form .booking-note { color: rgba(255, 255, 255, 0.7) !important; }

/* ---------------------------------------------------------------
   12) FLATPICKR calendar — keep the popup compact and anchored
   (fixes the "very large / floats up / weird" popup)
   --------------------------------------------------------------- */
.flatpickr-calendar {
    width: auto !important;
    max-width: 340px !important;
    font-size: 14px !important;
    background: #22333b !important;
    border: 1px solid rgba(217, 165, 102, 0.35) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45) !important;
    color: #fff !important;
}
.flatpickr-calendar.static { top: calc(100% + 6px); }
.flatpickr-innerContainer,
.flatpickr-days,
.flatpickr-rContainer,
.flatpickr-days .dayContainer { width: 100% !important; min-width: 0 !important; max-width: 100% !important; background: transparent !important; }
.flatpickr-calendar.arrowBottom:after { border-top-color: #1e2d32 !important; }
.flatpickr-calendar.arrowTop:after { border-bottom-color: #1e2d32 !important; }
@media (max-width: 480px) {
    .flatpickr-calendar { max-width: 94vw !important; }
}
/* gold + dark theme to match the booking form (was green) */
.flatpickr-months { background: #1e2d32 !important; }
.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-months .flatpickr-month { color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-weekdays { background: #1e2d32 !important; }
.flatpickr-monthDropdown-months option { background: #1e2d32 !important; color: #fff !important; }
span.flatpickr-weekday { color: var(--secondary, #d9a566) !important; background: #1e2d32 !important; }
.flatpickr-day { color: rgba(255, 255, 255, 0.92) !important; border-color: transparent !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(255, 255, 255, 0.28) !important; }
.flatpickr-day.today:hover { color: #fff !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--secondary, #d9a566) !important;
    border-color: var(--secondary, #d9a566) !important;
    color: #1e2d32 !important;
    box-shadow: 0 2px 8px rgba(217, 165, 102, 0.35) !important;
}
.flatpickr-day:hover { background: rgba(217, 165, 102, 0.18) !important; }
.flatpickr-day.inRange { background: rgba(217, 165, 102, 0.15) !important; box-shadow: none !important; }
.flatpickr-day.today { border-color: var(--secondary, #d9a566) !important; }
.flatpickr-day.today:hover { background: rgba(217, 165, 102, 0.22) !important; color: #1e2d32 !important; }

/* ---------------------------------------------------------------
   13) BOOKING form — wider (so it's shorter) on desktop.
   Name + email now sit side by side (wrapped in .form-row), and the
   form column takes ~2/3 of the width instead of half.
   --------------------------------------------------------------- */
@media (min-width: 993px) {
    .booking-container { gap: 2.5rem; align-items: flex-start; }
    .booking-info { flex: 1; }
    .booking-form { flex: 2.2; }
    /* keep the field rows tidy in the wider form */
    .booking-form .form-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* ---------------------------------------------------------------
   14) OUR HONEY — recreated as a frosted-glass card over the video.
   Renamed from "Mjalti i Malit" to "Mjalti ynë / from our bees".
   --------------------------------------------------------------- */
.honey-card {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    align-items: stretch;
    max-width: 1060px;
    margin: 0 auto;
    background: rgba(28, 20, 10, 0.44);
    border: 1px solid rgba(255, 210, 120, 0.30);
    border-radius: 22px;
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.honey-card-text {
    padding: 46px 46px 42px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.honey-eyebrow {
    display: block;
    color: #ffcf7a;
    letter-spacing: 3px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.honey-card-title {
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.12;
    margin: 0 0 14px;
}
.honey-card-title::after { display: none; } /* kill the generic underline */
.honey-card-sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0 0 26px;
    max-width: 46ch;
}
.honey-card .honey-facts {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    gap: 16px;
    width: 100%;
}
.honey-card .honey-fact { margin: 0; }
.honey-card .honey-fact p { font-size: 1rem; }
.honey-buy {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.honey-price {
    display: inline-flex;
    align-items: center;
    color: #3a2a0c;
    background: linear-gradient(135deg, #ffd27a 0%, #f4b942 100%);
    font-weight: 800;
    font-size: 1rem;
    padding: 11px 20px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(244, 185, 66, 0.35);
    white-space: nowrap;
}
.honey-card-media {
    position: relative;
    min-height: 100%;
}
.honey-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
/* Stack on tablet/phone: photo on top, text below */
@media (max-width: 860px) {
    .honey-card { grid-template-columns: 1fr; max-width: 560px; }
    .honey-card-media { order: -1; min-height: 240px; }
    .honey-card-media img { position: relative; height: 240px; }
    .honey-card-text { padding: 30px 24px 32px; }
}
@media (max-width: 480px) {
    .honey-card-text { padding: 26px 20px 28px; }
    .honey-buy { gap: 14px; }
    .honey-buy .honey-cta-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------
   15) LANGUAGE SWITCHER as flags (desktop nav + mobile menu).
   Replaces the EN | GR | AL text with country flags.
   --------------------------------------------------------------- */
.nav-lang { gap: 10px !important; }
.language-options { display: flex; align-items: center; gap: 10px; }
.language-option {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 3px !important;
    border-radius: 6px;
    background: none !important;
    border: none !important;
    opacity: 0.5;
    filter: saturate(0.85);
    transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.language-option img {
    display: block;
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.language-option:hover { opacity: 0.9; transform: translateY(-1px); }
.language-option.active {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 2px var(--secondary, #c9a227);
}
/* a touch bigger + easier to tap in the mobile menu */
@media (max-width: 768px) {
    .language-options { gap: 14px; }
    .language-option { padding: 4px !important; }
    .language-option img { width: 34px; height: 24px; }
}