/* ==========================================================================
   ROBO RUPEE — Glass header menu (liquid-glass look)
   Load AFTER style.css:
   <link href="css/header-glass.css" rel="stylesheet">
   ========================================================================== */

/* ---------- 1. Desktop menu pill ---------- */
.main-menu-right-oval {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 7px 8px;
    border-radius: 999px;
    border: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 38%,
            rgba(255, 255, 255, 0.02) 62%,
            rgba(255, 255, 255, 0.11) 100%),
        rgba(20, 18, 34, 0.30);
    -webkit-backdrop-filter: blur(30px) saturate(210%) brightness(1.12) contrast(1.04);
    backdrop-filter: blur(30px) saturate(210%) brightness(1.12) contrast(1.04);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.50),            /* top light rim */
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),             /* bottom rim */
        inset 0 0 26px rgba(255, 255, 255, 0.08),             /* glass depth */
        inset 14px 0 22px -16px rgba(0, 190, 255, 0.45),      /* blue edge fringe */
        inset -14px 0 22px -16px rgba(255, 70, 210, 0.45),    /* pink edge fringe */
        0 12px 40px rgba(0, 0, 0, 0.55),                      /* drop shadow */
        0 0 46px rgba(80, 60, 255, 0.20);                     /* soft violet glow */
    transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

/* bright gradient edge (strongest top-left and bottom-right) */
.main-menu-right-oval::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.2px;
    border-radius: inherit;
    background: conic-gradient(from 200deg,
        rgba(255, 255, 255, 0.95) 0deg,
        rgba(255, 255, 255, 0.15) 70deg,
        rgba(140, 120, 255, 0.35) 140deg,
        rgba(255, 255, 255, 0.70) 180deg,
        rgba(255, 255, 255, 0.10) 250deg,
        rgba(255, 120, 220, 0.35) 310deg,
        rgba(255, 255, 255, 0.95) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    z-index: 2;
}

/* top sheen + slow light streak sweeping across the glass */
.main-menu-right-oval::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(105deg,
            transparent 0%, transparent 40%,
            rgba(255, 255, 255, 0.16) 48%,
            rgba(255, 255, 255, 0.04) 54%,
            transparent 62%, transparent 100%);
    background-size: 100% 100%, 260% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 140% 0;
    animation: rrGlassSweep 7s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes rrGlassSweep {
    0%, 55% { background-position: 0 0, 140% 0; }
    100%    { background-position: 0 0, -40% 0; }
}

.main-menu-right-oval .main-nav {
    position: relative;
    z-index: 1;
    gap: 4px;
}

/* ---------- 2. Menu links ---------- */
.main-nav li a {
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    color: rgba(225, 230, 245, 0.78);
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color .3s var(--ease), background .35s var(--ease),
                border-color .35s var(--ease), box-shadow .35s var(--ease), transform .3s var(--ease);
}

/* hover: light glass bubble */
.main-nav li:hover a {
    color: var(--white);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 4px 14px rgba(0, 0, 0, 0.30);
    transform: translateY(-1px);
}

/* active: stronger liquid-glass bubble with violet glow */
.main-nav li a.active {
    color: #FFFFFF;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.02) 100%),
        linear-gradient(180deg, rgba(110, 90, 255, 0.28) 0%, rgba(53, 0, 244, 0.18) 100%);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -8px 16px rgba(53, 0, 244, 0.25),
        0 6px 18px rgba(0, 0, 0, 0.40),
        0 0 22px rgba(110, 90, 255, 0.45);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* ---------- 3. Sticky header (on scroll) ---------- */
.header-main.sticky {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 70%, rgba(0, 0, 0, 0) 100%);
}
.header-main.sticky .main-menu-right-oval {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 38%,
            rgba(255, 255, 255, 0.03) 62%,
            rgba(255, 255, 255, 0.13) 100%),
        rgba(20, 18, 34, 0.42);
}

/* ---------- 4. Light theme ---------- */
body.light-theme .main-menu-right-oval {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.55) 100%),
        rgba(255, 255, 255, 0.25);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(15, 23, 42, 0.06),
        inset 0 0 24px rgba(255, 255, 255, 0.45),
        inset 14px 0 22px -16px rgba(37, 99, 235, 0.25),
        inset -14px 0 22px -16px rgba(124, 58, 237, 0.25),
        0 10px 32px rgba(15, 23, 42, 0.14);
}
body.light-theme .main-menu-right-oval::before {
    background: conic-gradient(from 200deg,
        rgba(255, 255, 255, 1) 0deg,
        rgba(148, 163, 184, 0.30) 90deg,
        rgba(255, 255, 255, 0.90) 180deg,
        rgba(148, 163, 184, 0.25) 270deg,
        rgba(255, 255, 255, 1) 360deg);
}
body.light-theme .main-nav li a { color: #374151; }
body.light-theme .main-nav li:hover a {
    color: #111827;
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 12px rgba(15, 23, 42, 0.10);
}
body.light-theme .main-nav li a.active {
    color: #111827;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(226, 227, 255, 0.80) 100%);
    border-color: rgba(124, 58, 237, 0.25);
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(124, 58, 237, 0.18);
    text-shadow: none;
}
body.light-theme .header-main.sticky {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.75) 0%, rgba(248, 250, 252, 0) 100%);
}

/* ---------- 5. Mobile / tablet (below 992px) ---------- */
@media (max-width: 992px) {

    /* top bar becomes the glass strip.
       The blur sits on a ::before layer, NOT on the header itself: a blurred parent stops
       the side menu inside it from blurring the page behind it */
    .header-card {
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 10px 30px rgba(0, 0, 0, 0.45);
    }
    .header-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%),
            rgba(14, 12, 26, 0.40);
        -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.08);
        backdrop-filter: blur(26px) saturate(200%) brightness(1.08);
    }

    /* side menu (offcanvas) as frosted glass */
    .offcanvas#offcanvasRight {
        background:
            linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(110, 90, 255, 0.10) 100%),
            rgba(10, 9, 20, 0.62) !important;
        -webkit-backdrop-filter: blur(30px) saturate(190%);
        backdrop-filter: blur(30px) saturate(190%);
        border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
        box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12), -20px 0 60px rgba(0, 0, 0, 0.6);
    }
    #offcanvasRight .offcanvas-header {
        background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    /* menu inside offcanvas: no pill box, links as glass rows */
    .main-menu-right-oval {
        width: 100%;
        overflow: visible;
    }
    .main-menu-right-oval::after { display: none; }
    .main-nav li a {
        width: 100%;
        padding: 12px 20px;
        border-radius: 16px;
    }
    .main-nav li:hover a { transform: none; }
    .main-nav li a.active {
        background:
            linear-gradient(90deg, rgba(110, 90, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            0 0 18px rgba(110, 90, 255, 0.30);
    }

    body.light-theme .header-card {
        border-bottom-color: rgba(148, 163, 184, 0.30);
        box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(15, 23, 42, 0.10);
    }
    body.light-theme .header-card::before { background: rgba(255, 255, 255, 0.55); }
    body.light-theme .offcanvas#offcanvasRight {
        background: rgba(248, 250, 252, 0.75) !important;
        border-left-color: rgba(148, 163, 184, 0.30) !important;
    }
}

/* ---------- 6. Fallback (browsers without backdrop-filter) ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-menu-right-oval { background: rgba(24, 22, 40, 0.88); }
    .offcanvas#offcanvasRight { background: rgba(10, 9, 20, 0.96) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .main-menu-right-oval::after { animation: none; }
}