/* Glass site header (resources/views/layouts/site-nav.blade.php) and the shared buttons.
   Loaded by layouts.new-webapp and layouts.web-app, so every public page and the home hero use it.
   It resets the global rules custom.css puts on header / ul / a, and follows the home page's
   sizing: the design value at 1440px and wider, shrinking in proportion below
   (clamp(floor, N/14.4 vw, N px)). */

/* ---------- Navy strip that holds the header on every page except home (home puts it in its hero) ---------- */
.xp-site-header {
    position: relative; z-index: 20;
    background:
        radial-gradient(55% 160% at 85% 0%, rgba(0,120,255,.30), rgba(0,120,255,0) 60%),
        linear-gradient(180deg, #040C1E 0%, #07162D 100%);
}
.xp-site-header-inner { max-width: 1440px; margin: 0 auto; padding: 18px 24px; }

/* ---------- Glass nav ---------- */
.xp-nav, .xp-nav *, .xp-nav *::before, .xp-nav *::after { box-sizing: border-box; }
header.xp-nav {
    /* custom.css makes every <header> absolute + full width + margin:auto */
    position: relative;
    top: auto; left: auto; right: auto; width: auto; margin: 0; z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: clamp(64px, 6.389vw, 92px);
    padding: 0 clamp(10px, 0.972vw, 14px) 0 clamp(20px, 3.194vw, 46px);
    border-radius: clamp(32px, 3.194vw, 46px);
    font-family: 'Poppins', sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    background:
        linear-gradient(90deg, rgba(42,107,255,.14), rgba(42,107,255,0) 50%, rgba(0,200,255,.10)),
        linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 42%, rgba(255,255,255,0) 55%),
        rgba(7,22,45,.68);
    -webkit-backdrop-filter: blur(26px) saturate(140%);
    backdrop-filter: blur(26px) saturate(140%);
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.15),
        inset 0 -1px 3px rgba(0,200,255,.10),
        0 8px 24px rgba(0,0,0,.30),
        0 0 30px rgba(10,108,255,.32);
}
.xp-nav::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(156,200,255,.14) 50%, rgba(255,255,255,.06));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.xp-nav a { color: inherit; text-decoration: none; }
.xp-nav ul { list-style: none; margin: 0; padding: 0; }
.xp-gloss-top {
    position: absolute; top: 1px; left: 90px; width: 1200px; max-width: calc(100% - 180px); height: 1.5px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 25%, rgba(191,230,255,.3) 60%, transparent);
}
.xp-gloss-cyan {
    position: absolute; bottom: 0; right: 16%; width: 25%; max-width: 360px; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(95,216,255,.8), transparent);
    box-shadow: 0 0 6px rgba(0,200,255,.8);
}

.xp-logo { display: flex; align-items: center; gap: 4px; flex: none; }
.xp-logo-img { display: block; height: clamp(44px, 4.167vw, 60px); width: auto; max-width: none; }

/* Gap/indent trimmed from the 1440 design (32px / 55px) so the Partner Portal link fits beside the buttons (Isha, d875d39) */
.xp-nav .xp-menu { display: flex; align-items: center; gap: clamp(10px, 1.25vw, 18px); padding-left: clamp(10px, 1.667vw, 24px); padding-right: clamp(10px, 1.25vw, 18px); }
.xp-nav .xp-menu a {
    position: relative; display: block; padding: 0; background: none;
    font-size: clamp(13px, 1.042vw, 15px); font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; transition: color .2s;
}
.xp-nav .xp-menu a:hover { color: #fff !important; background: none; }
.xp-nav .xp-menu a.active { color: #fff; font-weight: 600; }
.xp-nav .xp-menu a.active::after {
    content: ""; position: absolute; left: -4px; right: -4px; bottom: clamp(-12px, -0.833vw, -8px); height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(0,200,255,.85), #2FE0FF, rgba(0,200,255,.85));
    box-shadow: 0 0 8px rgba(0,200,255,.9), 0 2px 14px rgba(30,123,255,.6);
}
.xp-nav .xp-menu .xp-menu-mobile-only { display: none; }

.xp-ctas { display: flex; align-items: center; gap: clamp(10px, 1.25vw, 18px); flex: none; }

/* ---------- Buttons (also used by the home page sections) ---------- */
.xp-btn-blue {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Poppins', sans-serif; font-weight: 600; color: #fff !important; white-space: nowrap; text-decoration: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 48%, rgba(255,255,255,0) 52%),
        linear-gradient(90deg, #004DFF 0%, #008CFF 55%, #00C8FF 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.5),
        inset 0 -3px 8px rgba(0,38,160,.45),
        0 8px 22px rgba(0,112,255,.55),
        0 0 16px rgba(0,200,255,.45);
    transition: transform .2s, box-shadow .2s;
}
.xp-btn-blue::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.05));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.xp-btn-blue:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -3px 8px rgba(0,38,160,.45), 0 10px 26px rgba(0,112,255,.65), 0 0 22px rgba(0,200,255,.6);
}
.xp-btn-driver {
    width: clamp(180px, 16.944vw, 244px); height: clamp(44px, 4.167vw, 60px); border-radius: 30px;
    gap: clamp(10px, 1.389vw, 20px); padding: 0 clamp(6px, 0.833vw, 12px) 0 clamp(16px, 2.361vw, 34px);
    font-size: clamp(14px, 1.181vw, 17px);
}
.xp-btn-driver .xp-arrow { width: clamp(28px, 2.639vw, 38px); height: auto; }
.xp-arrow { flex: none; display: block; }

.xp-btn-glass {
    position: relative; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; white-space: nowrap;
    font-family: 'Poppins', sans-serif; text-decoration: none;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .2s;
}
.xp-btn-track {
    width: clamp(150px, 13.264vw, 191px); height: clamp(44px, 4.167vw, 60px); border-radius: 30px;
    gap: clamp(8px, 0.833vw, 12px); font-size: clamp(14px, 1.111vw, 16px); font-weight: 500;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 50%), rgba(6,20,48,.5);
    box-shadow: inset 0 0 10px rgba(127,196,255,.18), inset 0 1px 2px rgba(255,255,255,.12);
}
.xp-btn-track svg { width: clamp(18px, 1.528vw, 22px); height: auto; flex: none; }
.xp-btn-track::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(142,194,255,.28));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.xp-btn-glass:hover { background-color: rgba(20,50,100,.55); }

/* Menu button (hidden on desktop) */
.xp-burger {
    display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
    background: rgba(6,20,48,.5); padding: 0; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.xp-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }

/* ---------- Tablet: links move into a dropdown opened by the menu button ---------- */
@media (max-width: 1199px) {
    .xp-burger { display: flex; }
    .xp-nav .xp-menu {
        display: none; position: absolute; top: calc(100% + 10px); right: 0; left: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: 10px;
        border-radius: 22px; border: 1px solid rgba(255,255,255,.18);
        background: rgba(7,22,45,.96);
        -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
        box-shadow: 0 16px 40px rgba(0,0,0,.45);
    }
    .xp-nav.xp-open .xp-menu { display: flex; }
    .xp-nav .xp-menu a { padding: 13px 18px; border-radius: 12px; font-size: 16px; }
    .xp-nav .xp-menu a:hover { background: rgba(255,255,255,.06); }
    .xp-nav .xp-menu a.active::after { display: none; }
    .xp-nav .xp-menu a.active { background: rgba(0,140,255,.18); }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
    .xp-site-header-inner { padding: 12px 16px; }
    header.xp-nav { height: 68px; padding: 0 10px 0 22px; }
    .xp-btn-track, .xp-btn-driver { display: none; }
    .xp-nav .xp-menu .xp-menu-mobile-only { display: block; }
}