/* ==========================================================================
   0. HOMEPAGE DESIGN SYSTEM (2026 "Editorial Resort" redesign)
   ==========================================================================
   Tokens for the index.php redesign: hero, search dock, apartment carousel,
   services grid, footer. Builds on the existing --primary/--gold tokens in
   styles.css rather than replacing them — this is an addition, so nothing
   outside the sections listed below is affected.

   Everything new on the homepage is namespaced "mgv-" (hero, search dock,
   section headers, service cards) specifically so it can never collide with
   a bare class also used by the admin dashboard or another public page —
   several of the old homepage classes it replaces (.hero-content,
   .hero-subtitle, .apartment-name, .apartment-location, .section-header)
   turned out to be shared with admin_dashboard.php / view_apartments.php /
   hotel.php / car.php / partner.php, so this file never edits those bare
   rules — only adds new ones under these tokens and the "mgv-" classes below.

   Reuse this section wholesale when the redesign extends past the homepage;
   nothing here should need to be reverse-engineered from the rules that use it.
   -------------------------------------------------------------------------- */
:root {
    /* Spacing scale — 4px base, used for gaps/padding across every new
       homepage block so the vertical rhythm reads as one system. */
    --mgv-space-3xs: 4px;
    --mgv-space-2xs: 8px;
    --mgv-space-xs: 12px;
    --mgv-space-sm: 20px;
    --mgv-space-md: 32px;
    --mgv-space-lg: 48px;
    --mgv-space-xl: 72px;
    --mgv-space-2xl: 104px;
    /* Section top/bottom padding, one clamp reused everywhere instead of a
       different fixed value + separate @media override per section. */
    --mgv-section-pad: clamp(64px, 9vw, 140px);

    /* Gold system — the flat #d4af37 is kept as the solid fallback/icon
       color, but CTAs and accent edges use this sheen gradient instead so
       gold reads as metal, not a flat fill. */
    --mgv-gold-gradient: linear-gradient(135deg, #f3e0a3 0%, #d4af37 45%, #a9791a 100%);
    --mgv-gold-gradient-hover: linear-gradient(135deg, #f8ecc4 0%, #e2bd4c 45%, #b8860c 100%);
    --mgv-gold-soft: rgba(212, 175, 55, 0.14);
    --mgv-gold-border: rgba(212, 175, 55, 0.28);
    --mgv-gold-glow: 0 0 40px rgba(212, 175, 55, 0.18);

    /* Ink — warm ivory instead of pure #fff for body copy; headings stay
       brighter for contrast. Softer on the eye against the dark-green
       surfaces than stark white, which is what read "generic dark mode"
       rather than "warm hospitality" in the old design. */
    --mgv-ink: #f6f1e4;
    --mgv-ink-strong: #fffaf0;
    --mgv-ink-muted: rgba(246, 241, 228, 0.7);
    --mgv-ink-faint: rgba(246, 241, 228, 0.46);

    /* Surfaces — the same deep-green panel gradient every card/dock/panel
       on the homepage uses, so they all read as one material. */
    --mgv-surface: linear-gradient(165deg, #0a120a 0%, #0f1a0e 22%, #16261a 45%, #1a2e19 65%, #16261a 85%, #0f1a0e 100%);
    --mgv-surface-raised: linear-gradient(145deg, rgba(22, 38, 21, 0.94), rgba(30, 50, 28, 0.94));

    /* Radius + shadow scale, shared by cards/docks/buttons */
    --mgv-radius-sm: 12px;
    --mgv-radius-md: 20px;
    --mgv-radius-lg: 28px;
    --mgv-radius-pill: 999px;
    --mgv-shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.25);
    --mgv-shadow-md: 0 24px 60px rgba(0, 0, 0, 0.35);
    --mgv-shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.45);

    /* Motion — one easing curve, three durations, used for every hover/
       transition on the homepage instead of each block picking its own. */
    --mgv-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mgv-fast: 0.25s;
    --mgv-base: 0.45s;
    --mgv-slow: 0.75s;

    /* How far .mgv-search-dock rises into the hero's bottom padding (see
       "5. SEARCH DOCK"). One token instead of two independent hardcoded
       values, because .scroll-indicator's clearance is derived from it
       (bottom: calc(overlap + gap)) — override this per breakpoint and both
       stay in sync automatically instead of drifting out of step. */
    --mgv-dock-overlap: 88px;
}

body.lang-ready [data-translate] {
    visibility: visible;
}

/* ==========================================================================
   3. NAVBAR - Luxury Dark Theme
   ========================================================================== */
.luxury-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5%;
    background: linear-gradient(135deg, #0f1a0e 0%, #1a2e19 50%, #162615 100%);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
    position: relative;
    transition: all 0.4s ease;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.navbar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        #d4af37 20%,
        #d4af37 80%,
        transparent 100%);
    opacity: 0.6;
}

.navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.navbar.scrolled {
    padding: 8px 5%;
    background: rgba(15, 26, 14, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* The horizontal "MANGROOV stays" wordmark. Sized by height so its 2.85:1
   ratio decides the width; at 38px that is ~108px, well clear of the nav
   controls even at 375px.

   Whitened because the artwork ships in brand green (#326e30), which is only
   2.35:1 against the navbar — below the 3:1 WCAG asks of a graphical object,
   and muddy to look at. Same treatment .footer-logo img has always applied to
   the mark it carried. Remove the brightness/invert pair to go back to green. */
.logo-mark {
    display: block;
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s ease;
}

/* Navigation Links
   --------------------------------------------------------------------------
   Spacing here is what the desktop row (>= 1440px) can afford with six links
   beside the logo, the language toggle and Login/Register. It used to be
   gap:8px / padding:12px 20px, which fitted five links; the sixth pushed the
   row past the viewport, and letting it wrap turned "Become a Partner" into
   three stacked lines. Below 1440px the drawer takes over and restates its own,
   roomier spacing — see section 3b. */
.nav-links {
    list-style: none;
    display: flex;
    gap: 4px;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 12px;
    border-radius: 50px;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    background: transparent;
    /* A wrapped nav label is never what we want: it makes the whole bar two or
       three rows tall for one long item. If the row cannot fit, that is the
       drawer's job, not the label's. */
    white-space: nowrap;
}

.nav-links li a i {
    font-size: 0.85rem;
    color: #d4af37;
    transition: transform 0.3s ease;
}

.nav-links li a:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
}

.nav-links li a:hover i {
    transform: scale(1.2);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

/* Same reason as .nav-links li a: a wrapped button label makes the whole bar
   taller. "تسجيل الدخول" and "إنشاء حساب" are the ones that did it. */
.nav-actions .lang-toggle,
.nav-actions .login-btn,
.nav-actions .register-btn,
.nav-actions .user-btn {
    white-space: nowrap;
}

.register-btn {
    color: #1a2e19;
    background: linear-gradient(135deg, #d4af37, #c9a030);
    border: 2px solid #d4af37;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.register-btn:hover {
    background: linear-gradient(135deg, #e5c048, #d4af37);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.1));
    border-color: #d4af37;
}

.dropdown-arrow {
    color: #d4af37;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: linear-gradient(145deg, #162615, #1e3a1c);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.dropdown-menu a i {
    color: #d4af37;
    width: 18px;
    text-align: center;
}

.dropdown-menu a:hover {
    background: rgba(212, 175, 55, 0.15);
    color: #fff;
}

.dropdown-menu .logout-link:hover {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.dropdown-menu .logout-link:hover i {
    color: #e74c3c;
}

.dropdown-divider {
    height: 1px;
    background: rgba(212, 175, 55, 0.2);
    margin: 8px 0;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    position: relative;
}

/* Three 2px bars with 5px gaps come to 16px, so even with the 10px padding the
   button was only 45x36 — under the 44px minimum touch target. Widening the
   button itself would grow the mobile navbar and eat into the drawer's
   hardcoded 70px top offset, so the hit area is expanded here instead and the
   bars stay exactly where they were. */
.mobile-menu-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.mobile-menu-btn span {
    width: 25px;
    height: 2px;
    background: #d4af37;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile User Section - Hidden on Desktop */
.mobile-user-section {
    display: none;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 2000;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 10px;
    transition: all var(--transition-normal);
}

/* ==========================================================================
   3b. NAVBAR DRAWER
   --------------------------------------------------------------------------
   Below 1200px the navbar collapses into the hamburger drawer.

   ── Why these rules are in this file ────────────────────────────────────────
   They used to live in styles.css, and never once applied. components/head.php
   loads styles.css first and public.css second, and the rules directly above —
   .nav-links, .nav-actions, .mobile-menu-btn, .mobile-user-section — are
   declared here at top level with no media query. Same specificity, later
   file, so this file won at every width and the drawer lost.

   The symptom was not "no drawer": opacity/visibility were among the few
   declarations styles.css *did* win (nothing here sets them), so on a phone
   the nav links were invisible while still taking their inline space — a
   ~350px-tall empty header with no links and no menu button. Moving the block
   here, after the rules that were beating it, is what makes it take effect.
   Keep it below them.

   ── Why 1440px and not 768px ────────────────────────────────────────────────
   The full row is six links plus the language toggle plus Login/Register, and
   it stopped fitting long before 768px. Measured against the right edge of the
   Register button, with the five links this site had before Car Rental: 63px
   of clearance at 1280px, 5px at 1200px, then 90px off-screen at 1100px and
   162px off-screen at 1024px.

   1440px is where the six-link row fits on ONE line in BOTH languages, with
   the tightened spacing set on .nav-links above: 71px of clearance in English,
   18px in Arabic, whose labels are the wider set. It fits at narrower widths
   only by wrapping the labels, and a wrapped label is worse than a drawer —
   at 1366px "Become a Partner" broke across three lines and stood the whole
   bar 122px tall.

   Measure this with the Cairo webfont actually loaded. It is requested
   deferred (media="print" onload) in components/head.php, so anything sampled
   before it swaps in is using fallback metrics and reads 30-50px narrow.

   The logo shrink belongs to this breakpoint too, not to the phone one: the
   drawer is positioned at top:70px, which is only correct while the header is
   at its compact height.
   ========================================================================== */
@media (max-width: 1439px) {
    .mobile-menu-btn {
        display: flex;
    }

    .hamburger {
        display: flex;
        position: static;
        margin-right: 10px;
        transform: none;
    }

    .navbar {
        padding: 12px 5%;
        justify-content: space-between;
    }

    .logo { margin: 0; }
    .logo-mark { height: 34px; }

    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: linear-gradient(180deg, #0f1a0e 0%, #162615 100%);
        padding: 20px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        gap: 5px;
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none; /* Prevent clicks when hidden */
        transition: all 0.3s ease;
        z-index: 999;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* Enable clicks when visible */
        transform: translateY(0);
    }

    .nav-links li { width: 100%; }
    .nav-links li a {
        display: flex;
        justify-content: center;
        padding: 15px 20px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .nav-actions {
        display: none;
    }

    .nav-actions.mobile-show {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, #0f1a0e 0%, #162615 100%);
        padding: 20px;
        gap: 15px;
        border-top: 1px solid rgba(212, 175, 55, 0.2);
        z-index: 998;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .login-button {
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }

    .login-button span {
        font-size: 0.85rem;
        padding: 8px 14px 8px 10px;
        margin-right: 0;
        order: 2;
        width: 100%;
        text-align: center;
    }

    .login-button span::before { width: 22px; height: 22px; font-size: 0.75rem; }

    .login-button a, .login-button button { order: 1; }

    /* User Dropdown */
    .user-dropdown {
        width: 100%;
    }

    .user-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    }

    .user-name {
        max-width: none;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        margin-top: 12px;
        background: linear-gradient(145deg, #1a2e19, #243d22);
        border: 1px solid rgba(212, 175, 55, 0.25);
    }

    .dropdown-menu a {
        justify-content: center;
        padding: 14px 20px;
        font-size: 1rem;
    }

    /* Login/Register Buttons */
    .login-btn,
    .register-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
    }

    /* Hamburger Animation */
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* ---- The account block inside the drawer ---- */

    .mobile-user-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 20px;
        margin-top: 15px;
        border-top: 1px solid rgba(212, 175, 55, 0.2);
    }

    .mobile-user-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 15px 20px;
        background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
        border-radius: 12px;
        border: 1px solid rgba(212, 175, 55, 0.25);
    }

    .mobile-user-avatar {
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, #d4af37, #c9a030);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1a2e19;
        font-size: 1rem;
    }

    .mobile-user-name {
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
    }

    .mobile-nav-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 20px;
        background: linear-gradient(145deg, rgba(26, 46, 25, 0.8), rgba(34, 61, 33, 0.8));
        border: 1px solid rgba(212, 175, 55, 0.2);
        border-radius: 12px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        font-size: 0.95rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .mobile-nav-action i {
        color: #d4af37;
        font-size: 1rem;
    }

    .mobile-nav-action:hover {
        background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
        border-color: rgba(212, 175, 55, 0.4);
        color: #fff;
    }

    .mobile-nav-action.logout:hover {
        background: rgba(231, 76, 60, 0.15);
        border-color: rgba(231, 76, 60, 0.4);
        color: #e74c3c;
    }

    .mobile-nav-action.logout:hover i {
        color: #e74c3c;
    }

    .mobile-nav-action.login,
    .mobile-nav-action.register {
        background: linear-gradient(145deg, #d4af37, #c9a030);
        color: #1a2e19;
        border: none;
    }

    .mobile-nav-action.login i,
    .mobile-nav-action.register i {
        color: #1a2e19;
    }

    .mobile-nav-action.register {
        background: transparent;
        border: 2px solid #d4af37;
        color: #d4af37;
    }

    .mobile-nav-action.register i {
        color: #d4af37;
    }
}

/* ==========================================================================
   4. HERO SECTION — editorial layout: text sits directly on the image (no
   boxed glass card), bottom third left clear for the search dock below to
   overlap. See "0. HOMEPAGE DESIGN SYSTEM" above for the --mgv-* tokens.
   ========================================================================== */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    /* Reserves room below the (now vertically centred) text block for the
       open image, the scroll cue and the search dock's overlap — see
       .scroll-indicator and .mgv-search-dock below. */
    padding-bottom: clamp(150px, 15vw, 240px);
    overflow: hidden;
    color: var(--mgv-ink);
}

/* Replaces the old per-element box-shadow/backdrop-blur card: a single
   scrim over the slideshow so hero text reads without boxing it in.
   Symmetric on purpose — the hero copy is centred, in both languages, so
   the darkening can't favour one side. */
.mgv-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(0deg, rgba(6, 12, 6, 0.85) 0%, rgba(6, 12, 6, 0.42) 38%, rgba(8, 14, 8, 0.12) 62%, rgba(8, 14, 8, 0.36) 100%),
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(6, 12, 6, 0.32) 0%, transparent 72%);
    pointer-events: none;
}

.mgv-hero {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mgv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-color);
    margin: 0 0 var(--mgv-space-sm);
}

.mgv-eyebrow::before {
    content: '';
    width: 34px;
    height: 2px;
    flex: none;
    background: var(--mgv-gold-gradient);
    border-radius: 2px;
}

.mgv-hero-title {
    font-size: clamp(2.75rem, 6vw, 5.25rem);
    line-height: 1.05;
    font-weight: 700;
    color: var(--mgv-ink-strong);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    max-width: 16ch;
    margin: 0 0 var(--mgv-space-md);
}

.mgv-hero-lede {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.7;
    color: var(--mgv-ink-muted);
    max-width: 46ch;
    margin: 0 0 var(--mgv-space-lg);
}

.mgv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mgv-space-sm);
    animation: fadeUp 1s ease forwards 0.9s;
    opacity: 0;
}

/* Button system — reused by the hero CTA and the search submit so every
   primary action on the homepage shares one shape/motion language. */
.mgv-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 38px;
    border-radius: var(--mgv-radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--mgv-base) var(--mgv-ease), box-shadow var(--mgv-base) var(--mgv-ease), background var(--mgv-base) var(--mgv-ease);
}

.mgv-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    left: -100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s ease;
}

.mgv-btn:hover::before { left: 100%; }

.mgv-btn-gold {
    background: var(--mgv-gold-gradient);
    color: #14210f;
    box-shadow: var(--mgv-shadow-sm), var(--mgv-gold-glow);
}

.mgv-btn-gold:hover {
    background: var(--mgv-gold-gradient-hover);
    transform: translateY(-3px);
    box-shadow: var(--mgv-shadow-md), 0 0 55px rgba(212, 175, 55, 0.3);
}

.mgv-btn-gold i { transition: transform var(--mgv-base) var(--mgv-ease); }
.mgv-btn-gold:hover i { transform: translateY(3px); }

/* Scroll Indicator — cleared above .mgv-search-dock's overlap (24px of
   breathing room past it) so the dock can never sit over it; z-index is
   belt-and-braces on top of that, since .booking-section (the dock's
   parent) follows .hero-section in the DOM and would otherwise paint over
   it regardless of the gap. */
.scroll-indicator {
    position: absolute;
    bottom: calc(var(--mgv-dock-overlap) + 24px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--mgv-ink);
    animation: fadeIn 1s ease forwards 1.5s, bounce 2s ease-in-out infinite 2s;
    opacity: 0;
    z-index: 4;
}

.scroll-indicator span {
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-color);
    font-weight: 600;
}

.scroll-indicator .mouse {
    width: 26px;
    height: 42px;
    border: 2px solid var(--gold-color);
    border-radius: 20px;
    position: relative;
    opacity: 0.8;
}

.scroll-indicator .mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background-color: var(--gold-color);
    border-radius: 3px;
    animation: scrollMouse 2s ease infinite;
}

/* ==========================================================================
   5. SEARCH DOCK — floating booking widget. Sits in normal flow inside
   .booking-section but is pulled up with a negative margin so it overlaps
   the hero's bottom edge, stitching the two sections into one composition.
   ========================================================================== */
.booking-section {
    position: relative;
    padding: 0 5% var(--mgv-section-pad);
    background: linear-gradient(180deg, #142010 0%, #1a2e19 10%, #1a2e19 100%);
}

.mgv-search-dock {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: calc(-1 * var(--mgv-dock-overlap)) auto 0;
    background: var(--mgv-surface);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-lg);
    box-shadow: var(--mgv-shadow-lg), 0 0 0 1px rgba(212, 175, 55, 0.08);
    padding: var(--mgv-space-lg) var(--mgv-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--mgv-space-md);
}

.mgv-search-dock::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mgv-gold-gradient);
    border-radius: var(--mgv-radius-lg) var(--mgv-radius-lg) 0 0;
}

.mgv-search-intro {
    max-width: 640px;
}

.mgv-search-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: var(--mgv-ink-strong);
    margin: 0 0 10px;
}

.mgv-search-lede {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--mgv-ink-muted);
    margin: 0;
}

.mgv-search {
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: var(--mgv-radius-md);
    overflow: hidden;
}

.mgv-search-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 16px 22px;
    min-width: 150px;
    transition: background var(--mgv-fast) var(--mgv-ease);
}

.mgv-search-field:focus-within {
    background: rgba(212, 175, 55, 0.08);
}

.mgv-search-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--gold-color);
}

.mgv-search-field input {
    border: none;
    background: transparent;
    color: var(--mgv-ink-strong);
    font-size: 0.98rem;
    font-family: inherit;
    padding: 0;
    color-scheme: dark;
}

.mgv-search-field input:focus {
    outline: none;
}

.mgv-search-field input::placeholder {
    color: var(--mgv-ink-faint);
}

.mgv-search-field input[type="number"] {
    -moz-appearance: textfield;
}

.mgv-search-field input[type="number"]::-webkit-outer-spin-button,
.mgv-search-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mgv-search-divider {
    width: 1px;
    align-self: center;
    height: 34px;
    background: rgba(212, 175, 55, 0.2);
    flex: none;
}

.mgv-search-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 var(--mgv-space-lg);
    background: var(--mgv-gold-gradient);
    color: #14210f;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background var(--mgv-base) var(--mgv-ease);
}

.mgv-search-submit:hover {
    background: var(--mgv-gold-gradient-hover);
}

.mgv-search-submit i {
    transition: transform var(--mgv-base) var(--mgv-ease);
}

.mgv-search-submit:hover i {
    transform: rotate(90deg);
}

/* Homepage section headers — hero uses its own (above); every other
   homepage section (carousel intro, services intro) shares this so the
   page reads as one system instead of each block picking its own scale. */
.mgv-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--mgv-space-xl);
}

.mgv-section-head .mgv-eyebrow {
    justify-content: center;
}

.mgv-section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 700;
    color: var(--mgv-ink-strong);
    margin: 0 0 14px;
}

.mgv-section-lede {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--mgv-ink-muted);
    margin: 0;
}

.section-subtitle {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--gold-color);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ==========================================================================
   6. FEATURED CAROUSEL — apartment cards
   --------------------------------------------------------------------------
   The .card / .card-image-container / .card-content / .details-btn /
   .price-tag family is defined in styles.css (restyled there — grepped
   the codebase, that markup is emitted only by scripts.js's buildCard()
   for this carousel, nothing else uses those bare classes).

   .apartment-name and .apartment-location were NOT restyled in place:
   admin_dashboard.php (.guest-details .apartment-name) and
   view_apartments.php (bare .apartment-location) also use those two, so
   scripts.js now emits .mgv-card-title / .mgv-card-location here instead —
   new names, styled fresh below, zero risk to the admin pages.
   ========================================================================== */
.featured-apartments {
    position: relative;
    padding-top: var(--mgv-space-2xl);
    z-index: 5;
}

.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Card Image Container */
.card-image-container {
    position: relative;
    overflow: hidden;
    height: 240px;
}

.card-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(15, 26, 14, 0.6) 80%,
        rgba(15, 26, 14, 0.95) 100%
    );
    z-index: 2;
    pointer-events: none;
    transition: all 0.5s ease;
}

.card-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.mgv-card-title {
    text-align: center;
    font-size: 1.3rem;
    margin: 0 0 14px;
    color: var(--mgv-ink-strong);
    font-weight: 700;
    padding: 0 10px;
    line-height: 1.3;
}

.mgv-card-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 16px;
    font-size: 0.88rem;
    color: var(--mgv-ink-muted);
    background: var(--mgv-gold-soft);
    padding: 9px 18px;
    border-radius: var(--mgv-radius-pill);
    max-width: fit-content;
    border: 1px solid var(--mgv-gold-border);
    transition: all var(--mgv-base) var(--mgv-ease);
}

.mgv-card-location:hover {
    transform: translateY(-2px);
    color: var(--gold-color);
    border-color: rgba(212, 175, 55, 0.4);
}

.mgv-card-location i {
    color: var(--gold-color);
}

/* Card Info - Features Grid */
.card-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px 8px;
    margin: 8px -8px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
    border-radius: 12px;
}

.card-info span {
    font-size: 0.78rem;
    color: var(--mgv-ink-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 10px;
    transition: all var(--mgv-fast) var(--mgv-ease);
    text-align: center;
    font-weight: 500;
}

.card-info span:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--mgv-ink-strong);
}

.card-info span i {
    color: var(--gold-color);
    font-size: 1.1rem;
    background: rgba(212, 175, 55, 0.15);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mgv-fast) var(--mgv-ease);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.card-info span:hover i {
    transform: scale(1.1);
    background: rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

/* ==========================================================================
   7. CAROUSEL — homepage apartment slider. (.carousel / .carousel-inner /
   .carousel-control below belong to the separate apartments.php image
   gallery and are untouched.)
   ========================================================================== */
.carousel-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 34px;
}

.carousel-track {
    display: flex;
    gap: 24px;
    transition: transform var(--mgv-base) var(--mgv-ease);
    padding: 12px 0 44px;
}

/* Carousel Navigation Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: var(--mgv-surface-raised);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mgv-gold-border);
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--gold-color);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mgv-base) var(--mgv-ease);
    box-shadow: var(--mgv-shadow-sm);
    line-height: 1;
    padding: 0;
}

.carousel-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: transform var(--mgv-fast) var(--mgv-ease);
}

.carousel-arrow:hover {
    background: var(--mgv-gold-gradient);
    color: #14210f;
    border-color: var(--gold-color);
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--mgv-shadow-md), 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(1.02);
}

/* ==========================================================================
   8. APARTMENT DETAIL PAGE (apartments.php) — "Editorial Resort" redesign,
   built on the section 0 tokens. Full-bleed gallery, then a two-column
   body: property story (specs/description/amenities) plus a booking card
   that sticks in view while the story column scrolls.

   Grepped the codebase before touching any of this: view_apartments.php
   (admin) is the only other page pulling from this set, and only for
   .apartment-specs/.spec-item — so apartments.php's markup now emits
   .mgv-specs/.mgv-spec-item instead and those two bare admin classes are
   untouched below. Everything else here (.carousel*, .apartment-details*,
   .details-text, .price-badge, .features-list, .booking-form-details,
   .book-btn, .booking-grid, .booking-header) belonged only to this page,
   so it's replaced in place rather than left dead.

   The gallery keeps its original #carousel / .carousel-item /
   .carousel-control / #current-slide / #total-slides markup and ids — the
   inline slideshow script at the bottom of apartments.php targets them
   directly, so only their styling changes here, nothing is renamed.
   ========================================================================== */
.mgv-property {
    padding: var(--mgv-section-pad) 5%;
    background: linear-gradient(180deg, #1a2e19 0%, #223d21 50%, #1a2e19 100%);
    position: relative;
}

.mgv-property::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.mgv-property-head {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto var(--mgv-space-lg);
}

.mgv-property-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    color: var(--mgv-ink-strong);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin: 0 0 10px;
}

.mgv-property-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mgv-ink-muted);
    font-size: 1rem;
    margin: 0;
}

.mgv-property-location i {
    color: var(--gold-color);
}

/* Gallery */
#carousel.carousel {
    position: relative;
    max-width: 1400px;
    margin: 0 auto var(--mgv-space-xl);
    overflow: hidden;
    border-radius: var(--mgv-radius-lg);
    border: 1px solid var(--mgv-gold-border);
    box-shadow: var(--mgv-shadow-lg);
    background-color: #000;
    z-index: 1;
    transition: none;
}

#carousel.carousel:hover {
    transform: none;
}

.carousel-inner {
    display: flex;
    min-height: 460px;
    max-height: 640px;
}

.carousel-item {
    min-width: 100%;
    display: none;
    position: relative;
    background-color: #000;
}

.carousel-item.active {
    animation: fadeIn var(--mgv-base) var(--mgv-ease);
}

.carousel img {
    width: 100%;
    height: 100%;
    min-height: 460px;
    max-height: 640px;
    object-fit: cover;
    display: block;
}

.carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--mgv-surface-raised);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--mgv-gold-border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--mgv-base) var(--mgv-ease);
    box-shadow: var(--mgv-shadow-sm);
    color: var(--gold-color);
    font-size: 0.9rem;
}

.carousel-control.prev { left: 20px; }
.carousel-control.next { right: 20px; }

.carousel-control i {
    color: inherit;
    font-size: inherit;
    transition: none;
}

.carousel-control:hover {
    background: var(--mgv-gold-gradient);
    border-color: var(--gold-color);
    color: #14210f;
    transform: translateY(-50%) scale(1.08);
    box-shadow: var(--mgv-shadow-md);
}

.carousel-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    color: var(--mgv-ink);
    padding: 8px 18px;
    border-radius: var(--mgv-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 5;
    border: 1px solid var(--mgv-gold-border);
}

.carousel-counter i,
.carousel-counter span:first-of-type {
    color: var(--gold-color);
}

.mgv-gallery-fallback {
    display: block;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto var(--mgv-space-xl);
    border-radius: var(--mgv-radius-lg);
    border: 1px solid var(--mgv-gold-border);
}

@media (max-width: 992px) {
    .carousel-inner {
        min-height: 360px;
        max-height: 460px;
    }

    .carousel img {
        min-height: 360px;
        max-height: 460px;
    }
}

@media (max-width: 480px) {
    .carousel-inner {
        min-height: 260px;
        max-height: 340px;
    }

    .carousel img {
        min-height: 260px;
        max-height: 340px;
    }

    .carousel-control {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Two-column body: story + sticky booking card */
.mgv-property-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--mgv-space-xl);
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.mgv-property-main {
    display: flex;
    flex-direction: column;
    gap: var(--mgv-space-lg);
}

.mgv-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mgv-space-sm) var(--mgv-space-lg);
    background: var(--mgv-surface-raised);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-md);
    padding: var(--mgv-space-md);
}

.mgv-spec-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 160px;
}

.mgv-spec-icon {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mgv-gold-soft);
    border: 1px solid var(--mgv-gold-border);
    color: var(--gold-color);
    font-size: 1.1rem;
}

.mgv-spec-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
    color: var(--mgv-ink-muted);
}

.mgv-spec-text strong {
    font-size: 1.15rem;
    color: var(--mgv-ink-strong);
}

.mgv-property-block {
    background: var(--mgv-surface);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-md);
    padding: var(--mgv-space-lg);
}

.mgv-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mgv-ink-strong);
    margin: 0 0 var(--mgv-space-sm);
}

.mgv-block-title i {
    color: var(--gold-color);
}

.mgv-property-description {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--mgv-ink-muted);
    margin: 0;
}

.mgv-amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.mgv-amenity-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--mgv-gold-soft);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-sm);
    color: var(--mgv-ink);
    font-size: 0.93rem;
    transition: all var(--mgv-base) var(--mgv-ease);
}

.mgv-amenity-chip:hover {
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

.mgv-amenity-chip i {
    flex: none;
    color: var(--gold-color);
}

/* Booking card */
.mgv-booking-card {
    position: sticky;
    top: 96px;
    background: var(--mgv-surface);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-lg);
    box-shadow: var(--mgv-shadow-lg);
    padding: var(--mgv-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--mgv-space-sm);
}

.mgv-booking-card::before {
    content: '';
    display: block;
    height: 3px;
    margin: calc(-1 * var(--mgv-space-lg)) calc(-1 * var(--mgv-space-lg)) var(--mgv-space-sm);
    background: var(--mgv-gold-gradient);
    border-radius: var(--mgv-radius-lg) var(--mgv-radius-lg) 0 0;
}

.mgv-booking-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.mgv-booking-price span {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mgv-ink-faint);
}

.mgv-booking-price strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gold-color);
}

.mgv-booking-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--mgv-ink-strong);
    margin: var(--mgv-space-xs) 0 0;
}

.mgv-booking-heading i {
    color: var(--gold-color);
}

.mgv-booking-sub {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--mgv-ink-muted);
    margin: 0 0 6px;
}

.mgv-booking-form {
    display: flex;
    flex-direction: column;
    gap: var(--mgv-space-sm);
}

.mgv-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mgv-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold-color);
}

.mgv-field input {
    padding: 14px 16px;
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-sm);
    background: rgba(0, 0, 0, 0.22);
    color: var(--mgv-ink-strong);
    font-size: 0.98rem;
    font-family: inherit;
    transition: all var(--mgv-fast) var(--mgv-ease);
}

.mgv-field input:focus {
    outline: none;
    border-color: var(--gold-color);
    background: rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0 3px var(--mgv-gold-soft);
}

.mgv-field input::placeholder {
    color: var(--mgv-ink-faint);
}

.mgv-booking-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

@media (max-width: 992px) {
    .mgv-property-body {
        grid-template-columns: 1fr;
    }

    .mgv-booking-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .mgv-property-block {
        padding: var(--mgv-space-md);
    }

    .mgv-booking-card {
        padding: var(--mgv-space-md);
    }
}

/* ==========================================================================
   10. FEEDBACK SECTION - Guest Reviews
   ========================================================================== */

/* Feedback Slider */

/* ==========================================================================
   11. FEEDBACK FORM - Leave a Review Section
   ========================================================================== */

/* Message Box */

/* Override for #feedback-form - Dark Theme */

/* ==========================================================================
   12. WHATSAPP BUTTON
   ========================================================================== */
.whatsapp-chat {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: linear-gradient(145deg, #25d366 0%, #128C7E 100%);
    color: #ffffff;
    padding: 0;
    border-radius: 60px;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3), 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: translateY(0);
}

.whatsapp-chat:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4), 0 6px 12px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #128C7E 0%, #25d366 100%);
}

.whatsapp-chat a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    width: 100%;
    height: 100%;
}

.whatsapp-chat .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    animation: pulse 2s infinite;
}

.whatsapp-chat .icon-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 3s infinite;
}

.whatsapp-chat i {
    font-size: 1.8rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

/* Inline SVG glyph (see icon-container markup) instead of the fa-whatsapp
   webfont glyph — this button is the one icon on the site that's both
   persistent (fixed on every public page) and brand-critical, so it
   shouldn't depend on a third-party font CDN request finishing before the
   page is usable: a slow/blocked/cached-stale load of Font Awesome's
   deferred stylesheet (components/head.php, media="print" trick) left this
   specific icon rendering as the raw Private Use Area codepoint in
   whatever font the browser fell back to, i.e. an arbitrary glyph instead
   of the WhatsApp logo. currentColor/drop-shadow mirror the color/
   text-shadow above so the swap is visually identical. */
.whatsapp-chat .icon-container svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: currentColor;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 2;
}

.whatsapp-chat span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0 20px 0 15px;
    white-space: nowrap;
    opacity: 1;
    transition: all var(--transition-normal);
    transform: translateX(0);
}

/* Icon-only on mobile. The pill (icon + label) reads fine on desktop, but
   on a narrow phone viewport the label is the same fixed width right up
   against the screen edge, so it gets clipped by the viewport instead of
   wrapping or shrinking — a ragged sliver of text hanging off a circle
   instead of the plain round button every other WhatsApp widget collapses
   to at this size. */
@media (max-width: 600px) {
    .whatsapp-chat span {
        display: none;
    }
}

/* ==========================================================================
   13. FOOTER — shared component (components/footer.php), included on every
   public page, not just the homepage. Redesigned as part of this pass on
   purpose (same "mgv-" visual language as the rest of the page) — flagging
   here because editing it changes the footer everywhere it's included, not
   only on index.php.
   ========================================================================== */
.luxury-footer,
footer {
    background: linear-gradient(180deg, #0a1209 0%, #0d160c 100%);
    border-top: 1px solid var(--mgv-gold-border);
    color: var(--mgv-ink);
    position: relative;
    overflow: hidden;
}

.footer-top-accent {
    height: 3px;
    background: var(--mgv-gold-gradient);
}

.footer-main {
    padding: var(--mgv-space-2xl) 5% var(--mgv-space-xl);
    position: relative;
}

.footer-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(212, 175, 55, 0.09) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 100%, rgba(212, 175, 55, 0.09) 0%, transparent 50%);
    pointer-events: none;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: var(--mgv-space-xl);
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--mgv-space-sm);
}

/* The wordmark carries the brand name itself, so no text sits beside it and
   there is nothing to keep a right margin clear of. */
.footer-logo img {
    height: 44px;
    width: auto;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform var(--mgv-base) var(--mgv-ease);
}

.footer-logo:hover img {
    transform: scale(1.04);
}

.footer-tagline {
    color: var(--gold-color);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: var(--mgv-space-sm);
}

.footer-description {
    font-size: 0.98rem;
    line-height: 1.85;
    color: var(--mgv-ink-muted);
    margin-bottom: var(--mgv-space-md);
    max-width: 350px;
}

/* Seven icons at 42px + 10px gaps is ~370px, wider than this column gets on a
   narrow viewport, so the row has to be allowed to wrap. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-social a {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(246, 241, 228, 0.08);
    color: var(--mgv-ink);
    font-size: 1.05rem;
    transition: all var(--mgv-base) var(--mgv-ease);
    border: 1px solid rgba(246, 241, 228, 0.12);
}

.footer-social a:hover {
    background: var(--mgv-gold-gradient);
    color: #14210f;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--mgv-shadow-sm), 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.footer-links h3,
.footer-contact h3 {
    font-size: 1.1rem;
    margin-bottom: var(--mgv-space-md);
    font-weight: 700;
    position: relative;
    padding-bottom: 14px;
    color: var(--mgv-ink-strong);
    letter-spacing: 0.3px;
}

.footer-links h3::after,
.footer-contact h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--mgv-gold-gradient);
    border-radius: 2px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: var(--mgv-space-xs);
}

.footer-links a {
    color: var(--mgv-ink-muted);
    transition: all var(--mgv-base) var(--mgv-ease);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.footer-links a i {
    font-size: 0.65rem;
    color: var(--gold-color);
    transition: transform var(--mgv-base) var(--mgv-ease);
}

.footer-links a:hover {
    color: var(--mgv-ink-strong);
    transform: translateX(5px);
}

body.rtl .footer-links a:hover {
    transform: translateX(-5px);
}

.footer-links a:hover i {
    transform: translateX(3px);
}

.footer-contact .contact-item {
    display: flex;
    align-items: center;
    gap: var(--mgv-space-xs);
    margin-bottom: var(--mgv-space-sm);
    color: var(--mgv-ink-muted);
    transition: all var(--mgv-base) var(--mgv-ease);
}

.footer-contact .contact-item:hover {
    color: var(--mgv-ink-strong);
    transform: translateX(5px);
}

body.rtl .footer-contact .contact-item:hover {
    transform: translateX(-5px);
}

.footer-contact .contact-item i {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(246, 241, 228, 0.08);
    border-radius: 50%;
    color: var(--gold-color);
    font-size: 0.9rem;
}

.footer-contact .contact-item span {
    font-size: 0.95rem;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.25);
    padding: var(--mgv-space-md) 5%;
    text-align: center;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom p {
    font-size: 0.88rem;
    color: var(--mgv-ink-muted);
    margin-bottom: 6px;
}

.footer-bottom .footer-credits {
    font-size: 0.82rem;
    color: var(--mgv-ink-faint);
}

.footer-bottom .footer-credits i {
    color: #e74c3c;
    animation: heartbeat 1.5s ease infinite;
}

.footer-bottom a {
    color: var(--gold-color);
    font-weight: 600;
    transition: all var(--mgv-base) var(--mgv-ease);
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
    }
    
    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .footer-links h3::after,
    .footer-contact h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-contact .contact-item {
        justify-content: center;
    }
}

.modal-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin-top: 8px;
}

.modal-form-group {
    position: relative;
}

.modal-form-group label {
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
}

.modal-form-group label i {
    color: var(--gold-color);
    font-size: 0.9rem;
}

.modal-form-group input:focus,
.modal-form-group select:focus {
    border-color: var(--gold-color);
    outline: none;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.modal-form-group:focus-within label {
    color: var(--gold-color);
}

.modal-form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Modal Divider */
.modal-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    gap: 15px;
}

.modal-divider::before,
.modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.modal-divider span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Forgot Password Link */
.forgot-password {
    text-align: right;
    margin-top: -10px;
}

.forgot-password a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    transition: all var(--transition-normal);
}

.forgot-password a:hover {
    color: var(--gold-color);
}

/* Gender Selection */
.gender-options {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.gender-option {
    flex: 1;
    position: relative;
}

.gender-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.gender-option label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    border: 2px solid #e8e8e8;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    background: #fafafa;
}

.gender-option label i {
    font-size: 1.3rem;
    color: #999;
    transition: all var(--transition-normal);
}

.gender-option label span {
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
}

.gender-option input:checked + label {
    border-color: var(--primary-color);
    background: rgba(57, 76, 56, 0.05);
}

.gender-option input:checked + label i {
    color: var(--gold-color);
}

.gender-option input:checked + label span {
    color: var(--primary-color);
}

.gender-option label:hover {
    border-color: var(--primary-light);
}

.notification-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
}

.notification-message {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    line-height: 1.5;
}

.notification-btn {
    background: linear-gradient(145deg, var(--gold-color), #c9a030);
    color: #0f1a0e;
    padding: 14px 45px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
    position: relative;
    overflow: hidden;
}

.notification-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4);
}

.popup-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

/* RTL Support for Admin Header */
body.rtl .admin-brand {
    flex-direction: row-reverse;
}

body.rtl .admin-brand img {
    margin-right: 0;
    margin-left: 15px;
}

body.rtl .admin-info {
    align-items: flex-start;
}

body.rtl .admin-actions {
    flex-direction: row-reverse;
}

body.rtl .admin-welcome {
    flex-direction: row-reverse;
}

body.rtl .admin-header-bottom a {
    flex-direction: row-reverse;
}

body.rtl .language-toggle {
    flex-direction: row-reverse;
}
/* ==========================================================================
   LANGUAGE TOGGLE BUTTON
   ========================================================================== */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.lang-toggle:hover {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15));
    border-color: var(--gold-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
}

.lang-toggle .lang-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: linear-gradient(145deg, var(--gold-color), #c9a030);
    color: #0f1a0e;
}

.lang-toggle .lang-text {
    color: rgba(255, 255, 255, 0.9);
    transition: color 0.3s ease;
}

.lang-toggle:hover .lang-text {
    color: var(--gold-color);
}

/* Mobile Language Toggle */
.mobile-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.mobile-lang-toggle:hover {
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.25), rgba(212, 175, 55, 0.15));
    border-color: var(--gold-color);
    color: var(--gold-color);
}

.mobile-lang-toggle i {
    color: var(--gold-color);
}

/* ==========================================================================
   RTL (Right-to-Left) SUPPORT FOR ARABIC
   ========================================================================== */
html[dir="rtl"],
body.rtl {
    direction: rtl;
    text-align: right;
}

/* Navbar RTL */
body.rtl .navbar {
    flex-direction: row-reverse;
}

body.rtl .nav-links {
    flex-direction: row-reverse;
}

body.rtl .nav-links li a {
    flex-direction: row-reverse;
}

body.rtl .nav-links li a i {
    margin-left: 8px;
    margin-right: 0;
}

body.rtl .nav-actions {
    flex-direction: row-reverse;
}

body.rtl .user-btn {
    flex-direction: row-reverse;
}

body.rtl .dropdown-menu {
    left: 0;
    right: auto;
}

body.rtl .dropdown-menu a {
    flex-direction: row-reverse;
}

body.rtl .dropdown-menu a i {
    margin-left: 12px;
    margin-right: 0;
}

/* Search Dock RTL */
body.rtl .mgv-search {
    /* Don't reverse the field order, just the text inside each field */
    direction: ltr;
}

body.rtl .mgv-search-field input {
    text-align: right;
    direction: rtl;
}

body.rtl .mgv-search-submit {
    flex-direction: row-reverse;
}

body.rtl .card-info span {
    flex-direction: column;
}

/* Carousel RTL - Keep same direction, don't reverse */
body.rtl .carousel-track {
    direction: ltr;
}

/* Cards Carousel - don't reverse direction */
body.rtl .cards-container {
    direction: ltr;
}

/* Feedback Cards RTL - Keep same as LTR, only change text direction inside cards */

/* Feedback Form RTL */

/* Footer RTL */
body.rtl .footer-content {
    flex-direction: row-reverse;
}

body.rtl .footer-brand {
    /* Keep like LTR - no changes */
}

body.rtl .footer-logo {
    /* Keep like LTR - logo left, text right */
}

body.rtl .footer-social {
    /* Keep like LTR */
}

body.rtl .footer-links {
    text-align: right;
}

body.rtl .footer-links h3,
body.rtl .footer-contact h3 {
    text-align: right;
}

body.rtl .footer-links h3::after,
body.rtl .footer-contact h3::after {
    left: auto;
    right: 0;
}

/* .footer-links a is inline-flex with the icon as its first child, no
   flex-direction override here — html[dir="rtl"]'s inherited `direction: rtl`
   (public.css ~2489) already flips the flex main axis on its own, so the
   icon lands at the line's leading (right) edge and the text trails to its
   left, mirroring the LTR icon-then-text order instead of just rotating the
   arrow in place. Only the glyph itself needs flipping, chevron-right (▶)
   pointing away from the reading direction otherwise. */
body.rtl .footer-links ul li a i {
    transform: rotate(180deg);
}

body.rtl .footer-contact {
    text-align: right;
}

body.rtl .modal-form-group label {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* In rem — see styles.css's .modal-form-group input for why the icon side's
   reservation can't be a fixed px value. */
body.rtl .modal-form-group input {
    padding-left: 1.125rem;
    padding-right: 3.125rem;
    text-align: right;
}

body.rtl .modal-form-group select {
    padding-left: 1.125rem;
    padding-right: 3.125rem;
    text-align: right;
}

/* .password-toggle crosses to the left in RTL, same as .input-icon crosses
   to the right — see styles.css's rule for why that side's reservation on
   the input needs to grow past the plain .modal-form-group input default. */
body.rtl .password-toggle {
    right: auto;
    left: 1rem;
}

body.rtl .modal-form-group input[type="password"] {
    padding-left: 2.8125rem;
}

/* Apartment detail page RTL — the .mgv-property component (section 8)
   is plain flex/grid rows with no flex-direction override, same as the
   footer fix above: html[dir="rtl"]'s inherited direction: rtl already
   flips the main axis, so icons lead at the right and the booking card
   swaps to the left column on its own. Nothing to override here. */

body.rtl .popup-buttons {
    flex-direction: row-reverse;
}

/* WhatsApp Chat RTL - Keep like LTR (on right side) */
body.rtl .whatsapp-chat {
    /* Keep on right side like LTR */
}

/* Back Button RTL */
body.rtl .back-btn {
    flex-direction: row-reverse;
}

body.rtl .back-btn i {
    margin-right: 0;
    margin-left: 8px;
    transform: rotate(180deg);
}

body.rtl .back-btn:hover {
    transform: translateX(5px);
}

body.rtl .back-btn:hover i {
    transform: translateX(3px) rotate(180deg);
}

body.rtl .section-description {
    text-align: center;
}

/* Drawer RTL Adjustments — matched to the drawer's own breakpoint (section
   3b), not to the site's mobile one. These come after the desktop RTL rules
   above on purpose: body.rtl .nav-links sets row-reverse there, and the
   drawer needs column. */
@media (max-width: 1439px) {
    body.rtl .mobile-user-section {
        text-align: center;
    }
    
    body.rtl .mobile-user-info {
        flex-direction: row-reverse;
    }
    
    body.rtl .mobile-nav-action {
        flex-direction: row-reverse;
    }
    
    body.rtl .mobile-nav-action i {
        margin-left: 10px;
        margin-right: 0;
    }
    
    /* Override desktop RTL row-reverse for mobile - keep column */
    body.rtl .nav-links {
        flex-direction: column;
    }
    
    body.rtl .nav-links li a {
        justify-content: center;
    }
    
    body.rtl .hamburger,
    body.rtl .mobile-menu-btn {
        left: auto;
        right: 20px;
    }
}

/* User Reservations Page RTL */
body.rtl .res-page {
    text-align: right;
}

body.rtl .res-hero {
    text-align: center;
}

body.rtl .res-hero h1 i {
    margin-right: 0;
    margin-left: 15px;
}

body.rtl .res-stats {
    direction: ltr;
}

body.rtl .res-filters {
    direction: ltr;
}

body.rtl .res-card {
    /* Keep like LTR - text starts from beginning */
}

body.rtl .res-card-title {
    text-align: left;
    direction: ltr;
}

body.rtl .res-card-loc {
    text-align: left;
    direction: ltr;
}

body.rtl .res-card-image {
    border-radius: 0 16px 16px 0;
}

body.rtl .date-badge {
    flex-direction: row-reverse;
}

body.rtl .date-badge i {
    margin-right: 0;
    margin-left: 8px;
}

body.rtl .res-badge {
    /* Keep badge on right like LTR */
}

body.rtl .res-dates {
    direction: ltr;
}

body.rtl .res-date {
    text-align: left;
}

body.rtl .res-total {
    direction: ltr;
}

body.rtl .res-actions {
    direction: ltr;
}

body.rtl .admin-info {
    text-align: left;
}

body.rtl .admin-header-bottom ul li a.logout-btn {
    margin-left: 0;
    margin-right: auto;
}

.show-more {
    display: block;
    margin: 30px auto 0;
    padding: 12px 30px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.show-more:hover {
    background: var(--button-hover);
    transform: translateY(-2px);
}

.price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-color);
}

.review-rating-ultra .stars {
    display: flex;
    gap: 0.25rem;
}

.review-rating-ultra .stars i {
    color: #fbbf24;
    font-size: 0.9rem;
}

/* ==========================================================================
   PARTNER PAGE (partner.php)
   --------------------------------------------------------------------------
   Reuses the public site's dark-green + gold language: the section
   backgrounds match .booking-section / .feedback-section, the field labels
   match .booking-form .form-group label (gold text, circular icon chip), and
   the card treatment matches .review-form. Nothing here restyles a shared
   class — every selector is scoped to the partner page.

   RTL: the layout is flex/grid with logical gaps and inherits direction from
   body.rtl, so it mirrors without per-side overrides. The few exceptions are
   grouped at the bottom of this block.
   ========================================================================== */

.service-hero {
    padding: 140px 5% 90px;
    background: linear-gradient(180deg, #14240f 0%, #1a2e19 55%, #223d21 100%);
    position: relative;
    text-align: center;
    overflow: hidden;
}

.service-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(212, 175, 55, 0.08) 0%, transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(212, 175, 55, 0.08) 0%, transparent 35%);
    pointer-events: none;
}

.service-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.service-hero-badge {
    display: inline-block;
    padding: 8px 22px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 50px;
    color: var(--gold-color);
    background: rgba(212, 175, 55, 0.08);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.service-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 22px;
}

.service-hero-lead {
    font-size: 1.2rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 35px;
}

.service-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 42px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold-color), #c9a030);
    color: #1a2e19;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.service-hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.45);
    background: linear-gradient(135deg, #e5c048, var(--gold-color));
}

/* ---- Marketing copy ---- */

.service-intro {
    padding: 90px 5%;
    background: linear-gradient(180deg, #1a2e19 0%, #1f3520 50%, #1a2e19 100%);
    position: relative;
}

.service-intro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
}

.service-copy {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
}

.service-copy p {
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 20px;
}

/* A single highlighted offer between the copy and the benefit cards
   (car.php's 20% bundled-stay discount). Gold-filled rather than another
   dark card, because the point of it is to not read as one of the four
   benefits below. */
.service-offer {
    max-width: 820px;
    margin: 0 auto 60px;
    padding: 34px 40px;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.06));
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.service-offer-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 7px 20px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--gold-color), #c9a030);
    color: #1a2e19;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.service-offer h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gold-color);
    margin-bottom: 12px;
}

.service-offer p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.service-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
    max-width: 1150px;
    margin: 0 auto;
}

.service-benefit {
    background: linear-gradient(145deg, #162615 0%, #1e3a1c 50%, #243d22 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 38px 28px;
    text-align: center;
    transition: all 0.3s ease;
}

.service-benefit:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.service-benefit-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.14);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--gold-color);
    font-size: 1.5rem;
}

.service-benefit h3 {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
    margin-bottom: 12px;
}

.service-benefit p {
    font-size: 0.98rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
}

/* ---- Request form ---- */

.service-form-section {
    padding: 90px 5%;
    background: linear-gradient(180deg, #1a2e19 0%, #223d21 50%, #1a2e19 100%);
    position: relative;
}

.service-form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 30%);
    pointer-events: none;
}

.service-form-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.service-form {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(145deg, #162615 0%, #1e3a1c 50%, #243d22 100%);
    padding: 48px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(212, 175, 55, 0.2);
    overflow: hidden;
}

.service-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
}

.service-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 26px;
    margin-bottom: 32px;
}

.service-field {
    display: flex;
    flex-direction: column;
}

.service-field-full {
    grid-column: 1 / -1;
}

.service-field label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--gold-color);
    font-weight: 600;
    margin-bottom: 12px;
}

.service-field label i {
    color: var(--gold-color);
    font-size: 0.95rem;
    background: rgba(212, 175, 55, 0.15);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.2);
    flex-shrink: 0;
}

.service-required {
    color: #e5c048;
}

.service-optional {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    font-size: 0.85rem;
}

.service-field input,
.service-field select,
.service-field textarea {
    width: 100%;
    padding: 15px 18px;
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.service-field textarea {
    resize: vertical;
    min-height: 130px;
}

.service-field input::placeholder,
.service-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.service-field input:focus,
.service-field select:focus,
.service-field textarea:focus {
    border-color: var(--gold-color);
    outline: none;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

/* The native dropdown list is painted by the OS and does not inherit the
   closed field's colours, so the options need their own dark background —
   without this they render as near-white-on-white on Windows. Same class of
   bug as the admin panel's white-on-white search box. */
.service-field select option {
    background: #1e3a1c;
    color: #fff;
}

/* Date inputs, same treatment .booking-form already uses on index.php:
   color-scheme so the browser paints its own calendar chrome dark, and the
   picker icon tinted gold instead of the default near-black that is invisible
   against this field. */
.service-field input[type="date"] {
    color-scheme: dark;
}

.service-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8) sepia(1) saturate(5) hue-rotate(10deg);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.service-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* [hidden] must beat .service-field's display:flex, or the conditional
   "Other destination" field would render even while hidden. */
.service-field[hidden] {
    display: none;
}

/* Phone: country dial code + national number as one control.
   The select is sized to its content and the number takes the rest; both keep
   dir="ltr" in the markup so digits and the +code read correctly under RTL,
   and the row itself is forced back to LTR so the code always sits before the
   number the way a phone number is written in either language. */
.service-phone-group {
    display: flex;
    gap: 10px;
    direction: ltr;
}

.service-phone-group select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 45%;
}

.service-phone-group input {
    flex: 1 1 auto;
    min-width: 0;
}

.service-hint {
    display: block;
    margin-top: 9px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
}

/* Same reason .service-field[hidden] needs stating: the display:block above is
   an author rule and would otherwise beat the [hidden] attribute's UA default.
   car.php's category hint is hidden until a brand is chosen. */
.service-hint[hidden] {
    display: none;
}

.service-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold-color), #c9a030);
    color: #1a2e19;
    padding: 16px 42px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.service-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.45);
    background: linear-gradient(135deg, #e5c048, var(--gold-color));
}

.service-form-note {
    margin-top: 18px;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   OUR SERVICES — HOMEPAGE PROMO GRID (index.php #services)
   --------------------------------------------------------------------------
   One grid promoting every service-request type, replacing the single
   full-width partner block. Three stacked promos of that size would have been
   ~1,800px of near-identical gold cards; each service's long-form marketing
   lives on its own page instead.

   Card styling deliberately matches .service-benefit on the request pages, so
   the homepage promo and the pages it links to read as one family.
   ========================================================================== */

.services-section {
    position: relative;
    padding: var(--mgv-section-pad) 5%;
    background: linear-gradient(180deg, #1a2e19 0%, #16280f 55%, #14240f 100%);
}

.services-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 32%),
        radial-gradient(circle at 88% 70%, rgba(212, 175, 55, 0.06) 0%, transparent 32%);
    pointer-events: none;
}

.services-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
}

/* Flex rather than grid, so an incomplete last row centres.
   --------------------------------------------------------------------------
   This was grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), which
   fits three columns only from ~996px up while the 768px query below drops to
   one. Between those two — iPad portrait sits right in the middle of it, at
   810-834px — three cards became two plus one hanging off the left with a
   384px hole beside it.

   auto-fit cannot fix that: the orphan occupies track 1 whatever the tracks
   do. A flex line, though, is centred by justify-content, orphan included.

   The numbers are chosen to leave the desktop layout untouched:
   3 x 348 + 2 x 28 = 1100, exactly the max-width. Below 768px the cards go
   full width, as before. */
.services-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

/* The whole card is the link — a card-sized target rather than a small
   text one, which matters most on a phone. */
.service-card {
    /* 280px is the width below which a card stops being readable; 348px is the
       desktop width, and capping it there is what lets the last line centre
       instead of one card stretching to fill the row. */
    flex: 1 1 280px;
    max-width: 348px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    background: var(--mgv-surface);
    border: 1px solid var(--mgv-gold-border);
    border-radius: var(--mgv-radius-lg);
    padding: 44px 32px 36px;
    box-shadow: var(--mgv-shadow-md);
    transition: transform var(--mgv-base) var(--mgv-ease), box-shadow var(--mgv-base) var(--mgv-ease), border-color var(--mgv-base) var(--mgv-ease);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--mgv-gold-gradient);
    opacity: 0;
    transition: opacity var(--mgv-base) var(--mgv-ease);
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: var(--mgv-shadow-lg), var(--mgv-gold-glow);
}

.service-card:hover::before {
    opacity: 1;
}

.service-card-icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--mgv-space-sm);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mgv-gold-soft);
    border: 1px solid var(--mgv-gold-border);
    color: var(--gold-color);
    font-size: 1.8rem;
    transition: all var(--mgv-base) var(--mgv-ease);
}

.service-card:hover .service-card-icon {
    background: rgba(212, 175, 55, 0.22);
    transform: scale(1.08);
}

.service-card h3 {
    font-size: 1.35rem;
    color: var(--mgv-ink-strong);
    font-weight: 700;
    margin-bottom: 14px;
}

.service-card p {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--mgv-ink-muted);
    margin-bottom: 28px;
    flex-grow: 1;
}

.service-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 34px;
    border-radius: var(--mgv-radius-pill);
    background: var(--mgv-gold-gradient);
    color: #14210f;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--mgv-shadow-sm);
    transition: all var(--mgv-base) var(--mgv-ease);
}

.service-card:hover .service-card-cta {
    background: var(--mgv-gold-gradient-hover);
    box-shadow: var(--mgv-shadow-md);
}

/* ---- RTL ---- */

/* body.rtl sets text-align: right globally; these blocks are centred by
   design in both languages. */
body.rtl .service-hero-content,
body.rtl .service-copy,
body.rtl .service-benefit,
body.rtl .service-card {
    text-align: center;
}

/* Phone, email and unit-count carry dir="ltr" in the markup so their digits
   read correctly. Left to itself that also left-aligns the text inside an
   otherwise right-to-left form; this puts it back against the field's
   starting edge. */
body.rtl .service-field input[dir="ltr"] {
    text-align: right;
}

/* ---- Responsive ---- */

/* The search dock's four fields + submit button stop fitting comfortably in
   one row below this width, so it switches to a stacked layout — same dock,
   same fields, just column instead of row. */
@media (max-width: 900px) {
    /* The dock grows taller once its fields stack into a column below, so
       it rises a little less into the hero — .scroll-indicator's clearance
       (bottom: calc(overlap + 24px)) follows automatically. */
    :root {
        --mgv-dock-overlap: 64px;
    }

    .mgv-search {
        flex-direction: column;
    }

    .mgv-search-field {
        padding: 14px 20px;
    }

    .mgv-search-divider {
        width: 100%;
        height: 1px;
    }

    .mgv-search-submit {
        padding: 18px;
    }
}

@media (max-width: 768px) {
    .mgv-search-dock {
        padding: var(--mgv-space-md);
        border-radius: var(--mgv-radius-md);
    }

    .service-hero {
        padding: 120px 5% 70px;
    }

    .service-hero h1 {
        font-size: 2.1rem;
    }

    /* .section-header h2's 2.8rem base has a mobile override for every other
       section on the site (styles.css: .booking-section h2 → 2rem,
       .feedback-section h2 → 2.2rem). These three inherited the desktop size
       and rendered at 44.8px on a 375px screen — "Turn Your Unit Into a
       Successful Investment" came out five lines and 287px tall. Matched to
       .feedback-section, which they sit next to on the homepage. */
    .service-intro .section-header h2,
    .service-form-section .section-header h2 {
        font-size: 2.2rem;
    }

    .service-hero-lead {
        font-size: 1.05rem;
    }

    .service-form {
        padding: 32px 22px;
    }

    .service-offer {
        padding: 26px 22px;
        margin-bottom: 44px;
    }

    .service-offer h3 {
        font-size: 1.35rem;
    }

    .service-offer p {
        font-size: 0.98rem;
    }

    .service-form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-submit {
        width: 100%;
        justify-content: center;
    }

    /* Homepage promo grid */
    .services-grid {
        gap: 20px;
    }

    .service-card {
        /* One per row on a phone, as before the grid became a flex row. */
        flex-basis: 100%;
        max-width: none;
        padding: 34px 22px 28px;
    }

    .service-card p {
        font-size: 0.97rem;
        line-height: 1.85;
    }

    .service-card-cta {
        width: 100%;
        padding: 14px 24px;
    }

    /* Homepage cards */
    .card-image-container {
        height: 210px;
    }

    .carousel-wrapper {
        padding: 0 12px;
    }

    .carousel-arrow {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
}

/* Phones. The site steps its headings down a second time at this width
   (styles.css: .booking-section h2 → 1.8rem, .feedback-section h2 → 2rem);
   these follow suit rather than stopping at the 768px size. */
@media (max-width: 480px) {
    .service-hero h1 {
        font-size: 1.85rem;
    }

    .service-intro .section-header h2,
    .service-form-section .section-header h2 {
        font-size: 1.9rem;
    }

    .service-hero-lead,
    .service-copy p,
    .service-card p {
        font-size: 0.98rem;
    }

    .service-form {
        padding: 28px 18px;
    }

    .service-card {
        padding: 30px 18px 26px;
    }

    /* Homepage hero + search dock */
    :root {
        --mgv-dock-overlap: 40px;
    }

    .mgv-hero-actions {
        width: 100%;
    }

    .mgv-hero-actions .mgv-btn {
        width: 100%;
        justify-content: center;
    }

    .mgv-search-dock {
        padding: var(--mgv-space-sm);
    }

    .mgv-search-field {
        padding: 12px 16px;
    }

    .card-image-container {
        height: 190px;
    }
}