/* =====================================================================
   Action Car Rental — Premium floating navbar
   Visual layer only. Targets EXISTING markup/classes (#menu-style-2,
   .navigation, .custom-nav, .custom-link, .custom-link-btn, .dropdown-*,
   .language-option, .selected-flag). No ids/JS hooks are changed.
   Works globally (light glass on inner pages) with a dark-glass variant
   on the homepage via the `.page-home` body class.
   ===================================================================== */

:root {
    --acr-orange: #f2730c;
    --acr-orange-2: #ff9233;
    --acr-ink: #1b2030;
}

/* ---- floating sticky shell (keeps its space → no content jump) ------ */
#menu-style-2 {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 13px clamp(12px, 4vw, 40px) 6px;
    background: transparent;
    transition: padding .35s ease;
}
#menu-style-2 > div,
#menu-style-2 > div > div { width: 100%; }

/* the translucent glass pill = the existing .navigation wrapper */
#menu-style-2 .navigation {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 4px 14px 4px 22px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.7));
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 16px 40px -24px rgba(15, 23, 42, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}

/* condense slightly once the page is scrolled */
#menu-style-2.is-scrolled { padding-top: 8px; }
#menu-style-2.is-scrolled .navigation {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 44px -26px rgba(15, 23, 42, 0.42);
}

/* ---- nav row ------------------------------------------------------- */
#menu-style-2 .custom-nav {
    align-items: center;
    gap: 2px;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
}
/* three zones: logo (left) · FAQ/Contact/Support (centre) · actions (right) */
#menu-style-2 .custom-nav .nav-center--lead { margin-left: auto !important; }
#menu-style-2 .custom-nav .nav-center--tail { margin-right: auto !important; }
#menu-style-2 .custom-nav .nav-center > .custom-link { font-weight: 500; }
/* logo — crisp, height-based sizing, gently integrated (not redrawn) */
#menu-style-2 .custom-nav > a:first-child .menu-item img,
#menu-style-2 .custom-nav .menu-item img.img-fluid[style*="165"] {
    width: auto !important;
    height: 46px !important;
    padding: 0 6px;
    filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.18));
    transition: transform .35s ease, filter .35s ease;
}
#menu-style-2 .custom-nav > a:first-child { display: inline-flex; align-items: center; }
#menu-style-2 .custom-nav > a:first-child:hover .menu-item img { transform: scale(1.04); }
#menu-style-2 .custom-nav .menu-item { padding: 0; margin: 0; }

/* push account / actions cluster to the right (overrides inline margin) */
#menu-style-2 .custom-nav .loat-lg-right,
#menu-style-2 .custom-nav .float-lg-right:first-of-type { margin-left: auto !important; }

/* ---- links --------------------------------------------------------- */
#menu-style-2 .custom-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .1px;
    color: var(--acr-ink);
    padding: 8px 14px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, transform .2s ease;
}
#menu-style-2 .custom-link:hover,
#menu-style-2 .custom-link:focus {
    color: #0e1116 !important;
    background: rgba(15, 17, 22, 0.06);
    border-color: transparent;
    transform: translateY(-1px);
}
/* balance the icons: drop the dated targeting glyph next to "My reservations" */
#menu-style-2 .custom-link .fa-crosshairs { display: none; }
/* animated underline (skip pill buttons) */
#menu-style-2 .menu-item.nav-center > .custom-link::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--acr-orange-2), var(--acr-orange));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.16,.84,.44,1);
}
#menu-style-2 .menu-item.nav-center > .custom-link:hover::after { transform: scaleX(1); }

/* ---- primary pill (Submit A Ticket) -------------------------------- */
#menu-style-2 .custom-link-btn {
    color: #fff !important;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff8a1e 0%, var(--acr-orange) 70%, #e1620a 100%);
    box-shadow: 0 12px 26px -12px rgba(242, 115, 12, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
#menu-style-2 .custom-link-btn:hover,
#menu-style-2 .custom-link-btn:focus {
    color: #fff !important;
    background: #15151a;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.55);
}
#menu-style-2 .custom-link-btn::after { display: none !important; }

/* ---- right cluster: language · reservations · account · BOOK NOW ---- */
#menu-style-2 .custom-nav .nav-lang { margin-left: 8px; }
#menu-style-2 .custom-nav .nav-reservations { margin: 0 6px; }

/* compact, discreet language switcher (flag + caret, no label) */
#menu-style-2 .nav-lang__toggle { gap: 6px; padding: 7px 9px; }
#menu-style-2 .nav-lang__toggle::after { display: none !important; }
#menu-style-2 .nav-lang__toggle .selected-flag {
    width: 20px !important; height: 20px !important;
    border-radius: 4px; margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
#menu-style-2 .nav-caret { opacity: .5; flex: none; transition: transform .25s ease; }
#menu-style-2 .nav-lang.show .nav-caret,
#menu-style-2 .nav-account.show .nav-caret { transform: rotate(180deg); }

/* My reservations — refined, clean glyph */
#menu-style-2 .nav-reservations > .custom-link { gap: 7px; }
#menu-style-2 .nav-reservations svg { opacity: .85; }

/* account — premium profile-icon dropdown (replaces split Log In / Register) */
#menu-style-2 .custom-nav .nav-account { margin-left: 6px; }
#menu-style-2 .nav-account__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(15, 17, 22, 0.16);
    background: rgba(15, 17, 22, 0.03);
    color: var(--acr-ink);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
#menu-style-2 .nav-account__toggle::after { display: none !important; }
#menu-style-2 .nav-account__toggle:hover {
    transform: translateY(-1px);
    border-color: var(--acr-orange);
    background: rgba(242, 115, 12, .08);
}
#menu-style-2 .nav-account__img { width: 24px !important; height: 24px !important; border-radius: 50%; }
#menu-style-2 .nav-account__icon { width: 20px; height: 20px; }
/* logged-in: premium initial avatar (orange gradient + white letter) */
#menu-style-2 .nav-account__initial {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}
#menu-style-2 .nav-account__toggle--initial {
    border-color: transparent;
    background: linear-gradient(135deg, #2a2f3c 0%, #1b2030 100%);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.5);
}
#menu-style-2 .nav-account__toggle--initial:hover {
    transform: translateY(-1px);
    border-color: transparent;
    background: var(--acr-orange);
}
#menu-style-2 .nav-account__menu { min-width: 200px; }
#menu-style-2 .nav-account__name { font-weight: 700; color: var(--acr-ink); padding-bottom: 1px; }
#menu-style-2 .nav-account__email { color: #8a90a0; font-size: 12px; padding-top: 0; }

/* ---- BOOK NOW — the single, dominant primary CTA ------------------- */
#menu-style-2 .custom-nav .nav-booknow-li { margin-left: 28px; }
#menu-style-2 .nav-booknow {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 11px 24px;
    border-radius: 13px;
    background: linear-gradient(135deg, #ff9233 0%, var(--acr-orange) 60%, #e1620a 100%);
    box-shadow: 0 10px 26px -8px rgba(242, 115, 12, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
#menu-style-2 .nav-booknow:hover,
#menu-style-2 .nav-booknow:focus {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -8px rgba(242, 115, 12, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
#menu-style-2 .nav-booknow::after { display: none !important; }

/* ---- language + account flags / icons ------------------------------ */
#menu-style-2 .selected-flag,
#menu-style-2 .language-option img {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
#menu-style-2 .custom-link img.rounded-circle {
    padding: 2px;
    background: rgba(242, 115, 12, 0.12);
    border: 1px solid rgba(242, 115, 12, 0.35);
    box-sizing: content-box;
}

/* ---- dropdown cards ------------------------------------------------- */
#menu-style-2 .dropdown-menu {
    margin-top: 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 24px 60px -22px rgba(15, 23, 42, 0.45);
    animation: acrNavDrop .22s cubic-bezier(.16,.84,.44,1);
}
@keyframes acrNavDrop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
#menu-style-2 .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--acr-ink);
    transition: background .2s ease, color .2s ease;
}
#menu-style-2 .dropdown-item:hover {
    background: rgba(242, 115, 12, 0.1);
    color: var(--acr-orange);
}
#menu-style-2 .dropdown-item-text { font-size: 12px; padding: 6px 12px; }
#menu-style-2 .dropdown-divider { margin: 6px 4px; opacity: .5; }

/* ===================================================================== */
/*  HOMEPAGE — dark glass over the cinematic hero (.page-home on body)    */
/* ===================================================================== */
/* overlay the hero (no reserved space) so the cinematic image runs to the
   very top behind the bar; it stays pinned while scrolling. Desktop only —
   on mobile the bar stays sticky so it never overlaps the search form.
   Inner pages keep the sticky behaviour above (reserves space → no overlap). */
@media (min-width: 769px) {
    .page-home #menu-style-2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
}
/* DESKTOP: light, airy glass over the bright hero photo — same dark-ink text
   & light controls as the inner pages (just a touch more transparent).
   MOBILE keeps the dark pill below (its burger/login text are white). */
@media (min-width: 768px) {
    .page-home #menu-style-2 .navigation {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.5));
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow:
            0 16px 44px -24px rgba(15, 23, 42, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
    .page-home #menu-style-2.is-scrolled .navigation {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(255, 255, 255, 0.7);
    }
}
/* MOBILE: keep the dark glass pill (unchanged) */
@media (max-width: 767px) {
    .page-home #menu-style-2 .navigation {
        background: linear-gradient(180deg, rgba(17, 18, 22, 0.62), rgba(12, 13, 16, 0.58));
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow:
            0 18px 55px -26px rgba(0, 0, 0, 0.62),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .page-home #menu-style-2.is-scrolled .navigation {
        background: rgba(10, 11, 14, 0.9);
    }
}

/* ---- mobile: subtle polish on the burger only (off-canvas logic kept) */
#menu-style-2 #mobile-open-nav,
.mobile-nav #mobile-open-nav {
    border: none;
    background: transparent;
    font-size: 22px;
    padding: 8px 12px;
}
.page-home #menu-style-2 .btn-burger-custom { color: #fff !important; }

@media (max-width: 991px) {
    #menu-style-2 { padding: 12px; }
    #menu-style-2 .navigation { border-radius: 16px; padding: 8px 12px; }
}