@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');



:root {

    /* Color Palette */

    --bg-dark: rgba(1, 23, 40, 0.9);

    --bg-solid: #081d2e;

    --bg-surface: #0b263c;

        --accent-glow: rgba(0, 159, 145, 0.15);

    

    /* Text Colors */

       --text-hover: #f8fafc;

    

    /* Borders & Spacing */

       --border-light: rgba(255, 255, 255, 0.12);

    --header-height: 65px;

    

    /* Shadows & Transitions */

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);

    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



body {

    margin: 0;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* ==========================================================================

   1. MAIN HEADER LAYOUT

   ========================================================================== */

.main-header {

--text-muted: #ffffff;

    --text-main: #ffffff;

    --accent: #009f91;

    --accent-hover: #00b8a9;

    --border-color: rgba(255, 255, 255, 0.08);

    background-color: var(--bg-dark);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--border-color);

    height: var(--header-height);

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

}



.header-container {

    max-width: 1440px;

    margin: 0 auto;

    padding: 0 32px;

    height: 100%;

    

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 16px;

}



/* ==========================================================================

   2. LOGO AREA

   ========================================================================== */

.logo-area {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.logo-area a {

    display: flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    outline: none;

}



.logo-area img {

    height: 46px;

    width: auto;

    display: block;

}



.brand-name {

    color: #009f91;

    font-weight: 700;

    font-size: 1.25rem;

    letter-spacing: -0.01em;

    white-space: nowrap;

}



/* ==========================================================================

   3. DESKTOP NAVIGATION (Center)

   ========================================================================== */

.desktop-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-grow: 1;

    height: 100%;

    min-width: 0; 

}



.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    list-style: none;

    margin: 0;

    padding: 0;

    gap: 8px;

    height: 100%;

}



.nav-links > li {

    height: 100%;

    display: flex;

    align-items: center;

    flex-shrink: 0;

}



.nav-links > li > a {

    color: var(--text-muted);

    font-size: 0.9rem;

    font-weight: 500;

    text-decoration: none;

    padding: 8px 12px;

    border-radius: 6px;

    transition: color var(--transition-fast), background-color var(--transition-fast);

    display: flex;

    align-items: center;

    gap: 6px;

    white-space: nowrap;

}



.nav-links > li > a i.fa-angle-down {

    font-size: 0.75rem;

    transition: transform var(--transition-smooth);

    opacity: 0.7;

}



.nav-links > li > a {

    position: relative; /* important */

}



.nav-links > li > a::after {

    content: '';

    position: absolute;



    left: 10px;

    right: 10px;



    bottom: -4px;   /* ?? yaha magic hai (neeche le gaya) */



    height: 2px;

    background-color: var(--accent);



    transform: scaleX(0);

    transform-origin: center;

    transition: transform var(--transition-smooth), opacity var(--transition-smooth);

    opacity: 0;

}

.nav-links > li > a:hover,

.nav-links > li.clicked > a,

.nav-links > li.hover-active > a {

    color: var(--text-hover);

    background-color: rgba(255, 255, 255, 0.04);

}



.nav-links > li > a:hover::after,

.nav-links > li.clicked > a::after,

.nav-links > li.hover-active > a::after {

    transform: scaleX(1);

    opacity: 1;

}



.nav-links > li.clicked > a i.fa-angle-down,

.nav-links > li.hover-active > a i.fa-angle-down {

    transform: rotate(180deg);

    opacity: 1;

}



/* ==========================================================================

   4. ACTIONS BUUTONS (Right)

   ========================================================================== */

.header-right {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0; 

}



.action-links {

    display: flex;

    align-items: center;

    list-style: none;

    margin: 0;

    padding: 0;

    gap: 12px;

}



.action-links form { 

    margin: 0; 

}



.nav-btn, .nav-btn-alt, .nav-btn-switch {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    border-radius: 8px;

    font-size: 0.875rem;

    font-weight: 500;

    text-decoration: none;

    transition: all var(--transition-fast);

    cursor: pointer;

    border: 1px solid transparent;

    font-family: inherit;

    white-space: nowrap;

    line-height: 1.2;

}



.nav-btn {

    background-color: var(--accent);

    color: #ffffff;

    box-shadow: 0 2px 4px rgba(0, 159, 145, 0.2);

}



.nav-btn:hover {

    background-color: var(--accent-hover);

    box-shadow: 0 4px 12px var(--accent-glow);

    transform: translateY(-1px);

}



.nav-btn-alt {

    color: var(--text-main);

    background-color: transparent;

    border-color: var(--border-light);

}



.nav-btn-alt:hover {

    background-color: rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.2);

}



.nav-btn-switch {

    background-color: var(--bg-surface);

    color: var(--text-main);

    border-color: var(--border-color);

    padding: 8px 14px;

    gap: 8px;

}



.nav-btn-switch i {

    font-size: 0.8rem;

    opacity: 0.8;

}



.nav-btn-switch:hover {

    background-color: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.2);

}



/* ==========================================================================

   5. DESKTOP DROPDOWN ARCHITECTURE

   ========================================================================== */

.has-dropdown, .has-sub-dropdown {

    position: relative;

}



.submenu, .sub-submenu {

    position: absolute;

    top: calc(100% - 4px);

    left: 0;

    background-color: var(--bg-solid);

    min-width: 220px; 

    list-style: none;

    margin: 0;

    padding: 8px;

    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-color);

    border-radius: 10px;

    

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px) scale(0.98);

    transform-origin: top left;

    transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);

    z-index: 100;

}



.sub-submenu {

    top: -8px;

    left: 100%;

    transform: translateX(10px) scale(0.98);

}



.submenu li, .sub-submenu li {

    padding: 0;

    margin-bottom: 2px;

}

.submenu li:last-child, .sub-submenu li:last-child {

    margin-bottom: 0;

}



.submenu a, .sub-submenu a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 14px;

    color: var(--text-muted);

    text-decoration: none;

    font-size: 0.875rem;

    font-weight: 400;

    border-radius: 6px;

    transition: all var(--transition-fast);

    white-space: nowrap;

}



.submenu a:hover, .sub-submenu a:hover {

    color: var(--text-main);

    background-color: rgba(255, 255, 255, 0.06);

}



.nav-links .has-dropdown.clicked > .submenu,

.nav-links .has-sub-dropdown.clicked > .sub-submenu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

    top: 100%;

}



.nav-links .has-sub-dropdown.clicked > .sub-submenu {

    top: -8px;

}



@media (hover: hover) and (min-width: 1024px) {

    .nav-links .has-dropdown:hover > .submenu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0) scale(1);

        top: 100%;

        transition-delay: 30ms;

    }

    

    .nav-links .has-sub-dropdown:hover > .sub-submenu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0) scale(1);

        top: -8px;

        transition-delay: 30ms;

    }

}



.has-sub-dropdown > a > i.arrow-icon {

    font-size: 0.7rem;

    opacity: 0.5;

    transition: transform var(--transition-fast);

}



.has-sub-dropdown:hover > a > i.arrow-icon,

.has-sub-dropdown.clicked > a > i.arrow-icon {

    transform: translateX(4px);

    opacity: 1;

}



/* ==========================================================================

   6. HAMBURGER ICON 

   ========================================================================== */

.hamburger {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    width: 24px;

    height: 18px;

    position: relative;

    z-index: 1001;

    padding: 0;

    outline: none;

    flex-shrink: 0;

}



.hamburger span {

    display: block;

    width: 100%;

    height: 2px;

    background-color: var(--text-main);

    position: absolute;

    left: 0;

    transition: transform 0.3s ease, opacity 0.3s ease;

    border-radius: 2px;

}



.hamburger span:nth-child(1) { top: 0; }

.hamburger span:nth-child(2) { top: 8px; }

.hamburger span:nth-child(3) { bottom: 0; }



.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);

}



/* ==========================================================================

   7. MOBILE DRAWER & MENU

   ========================================================================== */

.mobile-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);

}



.mobile-overlay.active {

    opacity: 1;

    visibility: visible;

}



.mobile-box {

    position: absolute;

    top: 0;

    right: -100%;

    width: 320px;

    max-width: 85vw;

    height: 100dvh;

    background-color: var(--bg-solid);

    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);

    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

}



.mobile-overlay.active .mobile-box {

    right: 0;

}



.mobile-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 24px 28px;

    border-bottom: 1px solid var(--border-color);

    flex-shrink: 0;

}



.mob-brand {

    color: var(--text-main);

    font-size: 1.15rem;

    font-weight: 600;

    text-decoration: none;

    letter-spacing: -0.01em;

}



.close-btn {

    background: none;

    border: none;

    color: var(--text-muted);

    font-size: 1.8rem;

    cursor: pointer;

    line-height: 1;

    padding: 4px;

    transition: color var(--transition-fast);

}



.close-btn:hover {

    color: var(--text-main);

}



.mobile-nav-list {

    list-style: none;

    padding: 24px;

    margin: 0;

    overflow-y: auto;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 6px; 

    overscroll-behavior: contain;

}



.mob-actions-divider {

    height: 1px;

    background-color: var(--border-color);

    margin: 12px 0;

    flex-shrink: 0;

}



.mobile-nav-list a {

    color: var(--text-main);

    text-decoration: none;

    font-size: 0.95rem;

    font-weight: 500;

    padding: 10px 14px;

    border-radius: 8px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: background-color var(--transition-fast);

}



.mobile-nav-list > li > a:hover {

    background-color: rgba(255, 255, 255, 0.06);

}



.mobile-nav-list > li > a i.fa-angle-down {

    transition: transform var(--transition-smooth);

    opacity: 0.6;

}



/* Mobile Buttons inside drawer */

.mobile-nav-list .nav-btn,

.mobile-nav-list .nav-btn-alt,

.mobile-nav-list .nav-btn-switch {

    width: 100%;

    margin-bottom: 6px;

    justify-content: center;

    padding: 10px 16px;

}



/* Mobile Submenu Accordions */

.mobile-nav-list .submenu,

.mobile-nav-list .sub-submenu {

    position: static; 

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    border: none;

    background-color: transparent;

    padding: 0;

    margin: 0;

    max-height: 0; 

    overflow: hidden;

    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.mobile-nav-list .submenu a,

.mobile-nav-list .sub-submenu a {

    color: var(--text-muted);

    font-weight: 400;

    font-size: 0.9rem;

    padding: 8px 16px 8px 32px;

}



.mobile-nav-list .sub-submenu a {

    padding-left: 48px;

}



.mobile-nav-list .submenu a:hover,

.mobile-nav-list .sub-submenu a:hover {

    background-color: transparent;

    color: var(--accent);

}



.mobile-nav-list .has-dropdown.opened > .submenu,

.mobile-nav-list .has-sub-dropdown.opened > .sub-submenu {

    max-height: 900px;

    padding-top: 4px;

    padding-bottom: 8px;

}



.mobile-nav-list .has-dropdown.opened > a > i.fa-angle-down,

.mobile-nav-list .has-sub-dropdown.opened > a > i.fa-angle-right {

    transform: rotate(180deg);

}



/* ==========================================================================

   8. RESPONSIVE BREAKPOINTS (Flawless Tablet/Mobile Scaling)

   ========================================================================== */



/* Large Desktop Tweak */

@media (max-width: 1250px) {

    .header-container { padding: 0 20px; }

    .nav-links > li > a { padding: 8px 8px; font-size: 0.85rem; }

    .action-links { gap: 8px; }

}



/* MOBILE AND TABLET OVERRIDE (<= 1024px) 

   Any screen 1024px or smaller firmly hides the horizontal nav 

   and displays the Hamburger Drawer */

/* ONLY REAL MOBILE DEVICES */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {



    .desktop-nav {

        display: none !important;

    }



    .header-right .desktop-actions,

    .header-right .action-links {

        display: none !important;

    }



    .hamburger {

        display: block !important;

    }

}

.nav-links {

    gap: 4px;

}



.nav-links > li > a {

    font-size: 0.82rem;

    padding: 6px 10px;

}



.nav-links > li > a i.fa-angle-down {

    display: none !important;

}

/* DESKTOP / TABLET / DESKTOP MODE */

@media (hover: hover) and (pointer: fine) {



    .desktop-nav {

        display: flex !important;

    }



    .header-right .desktop-actions,

    .header-right .action-links {

        display: flex !important;

    }



    .hamburger {

        display: none !important;

    }

}

/* COMPACT MODE (TABLET + MOBILE DESKTOP VIEW) */

@media (max-width: 1100px) {



    /* NAV SPACING */

    .nav-links {

        gap: 2px;

        align-items: center;   /* vertical center fix */

    }



    /* NAV ITEMS */

    .nav-links > li {

        display: flex;

        align-items: center;

    }



    .nav-links > li > a {

        font-size: 0.65rem;

        padding: 5px 7px;

        display: flex;

        align-items: center;

        height: 100%;

    }



    /* BRAND ? NAV GAP */

    .desktop-nav {

        margin-left: 16px; 

  /* space between logo & nav */

    }



    /* RIGHT SIDE BUTTONS */

    .header-right {

        gap: 11px;

        align-items: center;

    }



    .nav-btn,

    .nav-btn-alt,

    .nav-btn-switch {

        font-size: 0.75rem;

        padding: 6px 10px;

    }

}

.nav-links > li > a {

    transform: translateY(2px);

}

/* =========================

   STRONG BUTTON COLORS

   ========================= */



/* MY PROFILE (DARK TEAL ??) */

.nav-btn-alt {

    background: linear-gradient(135deg, #009f91, #007f73) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(0, 159, 145, 0.35) !important;

}



.nav-btn-alt:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(0, 159, 145, 0.5) !important;

}





/* LOGOUT (DARK RED ??) */

.header-right .action-links li:nth-child(2) a {

    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;

}



.header-right .action-links li:nth-child(2) a:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;

}





/* SWITCH TO USER (BLUE - already good) */

.nav-btn-switch {

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;

}



.nav-btn-switch:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55) !important;

}



/* =========================

   HAMBURGER FINAL FIX

   ========================= */



.hamburger {

    display: none;

    align-items: center;

    justify-content: center;



    width: 40px;

    height: 40px;



    background: #081D2e;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 10px;



    cursor: pointer;

    transition: all 0.25s ease;

}



/* show only on mobile */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {

    .hamburger {

        display: flex !important;

    }

}



/* ICON FIX (MOST IMPORTANT ??) */

.hamburger span {

    position: absolute;

    width: 16px;   /* ?? chhota kiya */

    height: 2px;

    background-color: #ffff;

    left: 50%;

    transform: translateX(-50%);

}



/* spacing fix */

.hamburger span:nth-child(1) {

    top: 12px;

}

.hamburger span:nth-child(2) {

    top: 19px;

}

.hamburger span:nth-child(3) {

    top: 26px;

}



/* hover */

.hamburger:hover {

    background: #081D2e;

}



/* active (cross) */

.hamburger.active span:nth-child(1) {

    transform: translateX(-50%) rotate(45deg);

    top: 19px;

}

.hamburger.active span:nth-child(2) {

    opacity: 0;

}

.hamburger.active span:nth-child(3) {

    transform: translateX(-50%) rotate(-45deg);

    top: 19px;

}

/* =========================

   MOBILE COLOR FINAL FIX (REAL FIX)

   ========================= */



/* ?? VARIABLES FORCE KARO */

.mobile-overlay {

    --text-main: #ffffff;

    --text-muted: #ffffff;

    --accent: #009f91;

    --accent-hover: #00b8a9;

    --border-color: rgba(255,255,255,0.08);



    --bg-solid: #081d2e;

    --bg-surface: #0d2b39;

}



/* =========================

   APPLY COLORS FORCE

   ========================= */



.mobile-box {

    background: #081d2e !important;

}



/* ALL LINKS */

.mobile-nav-list a {

    color: #ffffff !important;

}



/* submenu */

.mobile-nav-list .submenu a,

.mobile-nav-list .sub-submenu a {

    color: #ffffff !important;

}



/* hover */

.mobile-nav-list a:hover {

    color: #009f91 !important;

    background: rgba(255,255,255,0.06);

}



/* divider */

.mob-actions-divider {

    background: rgba(255,255,255,0.08) !important;

}



/* mobile header */

.mobile-header {

    border-bottom: 1px solid rgba(255,255,255,0.08) !important;

}



/* close btn */

.close-btn {

    color: #ffffff !important;

}



/* BUTTONS */

.mobile-nav-list .nav-btn {

    background: #009f91 !important;

    color: #ffffff !important;

}



.mobile-nav-list .nav-btn-alt {

    border: 1px solid rgba(255,255,255,0.2) !important;

    color: #ffffff !important;

}



.mobile-nav-list .nav-btn-switch {

    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;

    color: #ffffff !important;

}

.mobile-nav-list .logout-btn,

.mobile-nav-list a[href*="logout"] {

    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;

    color: #ffffff !important;

    border: none !important;

}

.btn-support {

    background: linear-gradient(135deg, #dc2626, #b91c1c);

    color: #fff !important;



    padding: 6px 12px;   /* ?? reduce size */

    font-size: 13px;     /* thoda chhota */

    border-radius: 6px;



    display: inline-flex;

    align-items: center;

    gap: 5px;



    font-weight: 500;

    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);



    transition: all 0.25s ease;

}



/* hover */

.btn-support:hover {

    transform: translateY(-1px);

    box-shadow: 0 5px 14px rgba(220, 38, 38, 0.4);

}

/* icon fix */

.btn-support i {

    font-size: 15px;

}

.btn-support {

    text-decoration: none !important;

}



.btn-support:hover {

    text-decoration: none !important;

}

/* =========================

   FINAL TABLET FIX (IMPORTANT)

   ========================= */



/* Tablet + small laptop ? hamburger mode */

@media (max-width: 900px) {



    /* hide desktop nav */

    .desktop-nav {

        display: none !important;

    }



    /* hide header buttons */

    .header-right .desktop-actions,

    .header-right .action-links {

        display: none !important;

    }



    /* show hamburger */

    .hamburger {

        display: flex !important;

    }

}



/* prevent button/text breaking */

@media (max-width: 1200px) {

    .header-right a {

        white-space: nowrap !important;

    }

}



/* =========================

   TABLET SUPPORT BUTTON FIX

   ========================= */



@media (min-width: 768px) and (max-width: 1100px) {



    .btn-support {

        padding: 5px 10px !important;   /* ?? size kam */

        font-size: 12px !important;

        border-radius: 6px;



        display: inline-flex;

        align-items: center;

        gap: 4px;

    }



    /* icon size chhota */

    .btn-support i {

        font-size: 12px !important;

    }



    /* header buttons align */

    .action-links li {

        display: flex;

        align-items: center;

    }

}

/* =========================

   FINAL PERFECT HEADER FIX

   ========================= */



/* keep header stable */

.header-right .action-links {

    flex-wrap: nowrap;

    gap: 8px;

}



/* prevent overlap by controlled shrinking */

.header-right .action-links a {

    white-space: nowrap;

}



/* ?? ONLY problematic range (tablet + mobile desktop view) */

@media (max-width: 1100px) and (min-width: 700px) {



    .header-right .action-links a {

        padding: 1px 2px !important;

        font-size: 9px !important;

        border-radius: 6px;

    }



    .header-right .action-links a i {

        font-size: 11px !important;

    }



    /* nav spacing thoda tight */

    .nav-links > li > a {

        font-size: 0.68rem;

        padding: 3px 5px;

    }

}

/* ?? NAV BELL (YELLOW THEME) */

.notif-nav-item {

    display: flex;

    align-items: center;

    margin-left: 6px;

}



.bell-wrapper-nav {

    position: relative;

    cursor: pointer;



    font-size: 18px;

    color: #facc15;   /* ?? yellow (main) */



    transition: all 0.25s ease;

}



/* HOVER EFFECT */

.bell-wrapper-nav:hover {

    color: #fde047;  /* lighter yellow */

    transform: translateY(-1px) scale(1.1);



    text-shadow: 0 0 8px rgba(250, 204, 21, 0.6); /* glow */

}





#notif-panel {

    display: none;



    position: absolute;



    width: 240px;          /* ?? chhota */

    max-height: 260px;     /* ?? compact */



    overflow-y: auto;



    background: #fff;

    border-radius: 10px;



    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    z-index: 9999;

}

.notif-header {

    padding: 10px 12px;

    background: #009f91;

 font-size: 14px;

    color: #fff;

    font-weight: 600;

    border-radius: 12px 12px 0 0;

}

.notif-item {

    padding: 8px 10px;

    border-bottom: 1px solid #eee;

    transition: 0.2s;

}



.notif-item:hover {

    background: #f1f5f9;

}

/* ?? DESKTOP BELL */

.bell-wrapper-nav {

    position: relative;

    cursor: pointer;

    font-size: 18px;

    color: #facc15;

    transition: 0.25s;

}



.bell-wrapper-nav:hover {

    color: #fde047;

    transform: scale(1.1);

}



/* ?? BADGE */

#notif-count, #notif-count-mobile { position: absolute !important; top: -6px !important; right: -8px !important; background-color: #ef4444 !important; color: #ffffff !important; font-size: 10px !important; font-weight: bold !important; padding: 2px 5px !important; border-radius: 50% !important; min-width: 16px !important; height: 16px !important; line-height: 12px !important; text-align: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; z-index: 99 !important; display: none; }

/* ?? MOBILE BELL */

.mobile-bell {

    display: none;

    position: relative;

    margin-right: 10px;

    font-size: 18px;

    color: #facc15;

    cursor: pointer;

}



/* MOBILE SHOW */

@media (max-width: 900px) {
    .mobile-bell {
        display: flex;
        align-items: center;
    }
}

.hide-bell {

    display: none !important;

}

/* ? CLOSE BUTTON (NOTIFICATION PANEL) */



.notif-header span[onclick] {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    width: 26px;

    height: 26px;



    border-radius: 50%;



    background: rgba(239, 68, 68, 0.15); /* light red */

    color: #ef4444; /* ?? IMPORTANT (text red) */



    font-size: 16px;

    font-weight: bold;



    cursor: pointer;

    transition: all 0.25s ease;

}



/* HOVER */

.notif-header span[onclick]:hover {

    background: #ef4444; /* full red */

    color: #fff;         /* white cross */



    transform: rotate(90deg) scale(1.1);

}



@media (max-width: 768px) {

    #notif-panel {



        width: 90%;              /* ?? full nahi, compact */

        max-width: 320px;       /* ?? limit */



        left: 50% !important;   /* ?? center */

        right: auto !important;



        transform: translateX(-50%);  /* ?? perfect center */



        top: 65px;              /* header ke niche */



        max-height: 260px;      /* ?? chhota height */

        border-radius: 12px;

    }

}



/* ?? TABLET FIX (769px – 1100px) */

@media (min-width: 769px) and (max-width: 1100px) {

    #notif-panel {



        width: 260px;        /* ?? balanced size */

        max-width: 90vw;     /* ?? overflow safe */



        left: auto !important;

        right: 20px !important;  /* ?? right aligned (safe) */



        transform: none;     /* ?? center transform hatao */



        top: 65px;           /* header ke niche */



        max-height: 280px;   /* ?? compact height */

        border-radius: 12px;

    }

}

/* ?? FINAL NOTIFICATION BADGE (ALL DEVICES SAME) */

#notif-count, #notif-count-mobile { position: absolute !important; top: -6px !important; right: -8px !important; background-color: #ef4444 !important; color: #ffffff !important; font-size: 10px !important; font-weight: bold !important; padding: 2px 5px !important; border-radius: 50% !important; min-width: 16px !important; height: 16px !important; line-height: 12px !important; text-align: center !important; box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important; z-index: 99 !important; display: none; }

.bell-wrapper-nav {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}

@media (min-width: 768px) and (max-width: 1100px) {

    #notif-count {

        top: -3px;

        right: -5px;



        min-width: 14px;

        height: 14px;

        font-size: 8px;

        line-height: 14px;

    }

}
/* =========================
   TABLET / SMALL DESKTOP FIX (<=1100px)
   ========================= */

@media (min-width: 769px) and (max-width: 1100px) {

        #notif-panel {
        position: absolute !important;

               right: 20px !important;
        left: auto !important;

        width: 260px;
        max-width: 90vw;

        border-radius: 12px;
        max-height: 280px;

        transform: none !important;
    }