/* ============================================================
   HEADER v2 — Pokhara Finance Style
   आकाश सहकारी — Himal Background + Utility Top Bar
   FIX v2: clip-path removed, banner logo properly shown
   ============================================================ */

/* ── Top Utility Bar ── */
.pfl-top-bar {
    background: var(--header-color, var(--topbar-bg, var(--secondary-color)));
    color: #fff;
    font-size: 12.5px;
    line-height: 1;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    position: relative;
    z-index: 1200; /* keep login dropdown above banner/logo on mobile */
    overflow: visible;
}
.pfl-top-bar .container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    min-height: 34px;
}

/* Quick utility links — left */
.pfl-quick-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 0;
}
.pfl-quick-links > li {
    position: relative;
}
.pfl-quick-links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    transition: background .2s, color .2s;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.pfl-quick-links > li > a:hover {
    background: rgba(0,0,0,0.2);
    color: #fff;
}
.pfl-quick-links > li > a .pfl-badge {
    background: var(--accent-color, #f39c12);
    color: #fff;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 700;
    line-height: 1.4;
}

/* Dropdown in top bar */
.pfl-quick-links > li.has-drop .pfl-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 175px;
    background: var(--header-dark, var(--secondary-dark, var(--secondary-color)));
    border-top: 2px solid var(--accent-color, #f39c12);
    box-shadow: 0 4px 15px rgba(0,0,0,.25);
    z-index: 9999;
    padding: 4px 0;
    border-radius: 0 0 6px 6px;
}
.pfl-quick-links > li.has-drop:hover .pfl-drop {
    display: block;
}
.pfl-drop a {
    display: block;
    padding: 7px 14px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    font-size: 12px;
    transition: background .15s;
}
.pfl-drop a:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Right controls */
.pfl-top-right {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 8px;
}
.pfl-top-right > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.9);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: background .2s;
    white-space: nowrap;
}
.pfl-top-right > li > a:hover { background: rgba(0,0,0,.2); color: #fff; }
/* ── Login Dropdown Trigger ── */
.pfl-login-drop-wrap { position: relative; }
.pfl-login-toggle {
    background: rgba(255,255,255,.18) !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.pfl-login-toggle:hover { background: rgba(255,255,255,.32) !important; }
.pfl-login-caret {
    font-size: 10px;
    opacity: .85;
    transition: transform .22s;
}
.pfl-login-drop-wrap.open .pfl-login-caret { transform: rotate(180deg); }

/* ── Dropdown Menu (compact — not wider than trigger feel) ── */
.pfl-login-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(236px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 1300; /* above top-bar + main header */
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s, visibility .2s;
    pointer-events: none;
}
.pfl-login-drop-wrap.open .pfl-login-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.pfl-login-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: #2c3e50;
    text-decoration: none;
    transition: background .15s;
    background: none !important;
    border: none !important;
    font-weight: 400 !important;
    min-height: 0;
}
.pfl-login-menu li a:hover { background: #f4faf5 !important; }

/* ── Icon badge ── */
.pfl-lm-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.pfl-lm-web    { background: #e8f5e9; color: #1a5f2a; }
.pfl-lm-android{ background: #e8f5e9; color: #2e7d32; }
.pfl-lm-ios    { background: #f3e5f5; color: #6a1b9a; }
.pfl-lm-admin  { background: #e3f2fd; color: #1565c0; }
.pfl-lm-member { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: var(--text-on-primary, #fff); }
.pfl-lm-verify { background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark, var(--secondary-color))); color: var(--text-on-secondary, #fff); }

/* ── Text block ── */
.pfl-lm-text {
    display: flex;
    flex-direction: column;
    line-height: 1.28;
    flex: 1;
    min-width: 0;
}
.pfl-lm-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: .01em;
    line-height: 1.25;
}
.pfl-lm-text small {
    font-size: .6875rem;
    color: #64748b;
    margin-top: 0;
    font-weight: 500;
    line-height: 1.2;
}
.pfl-lm-badge {
    background: #f59e0b;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1.25;
}
/* ── Divider ── */
.pfl-lm-divider {
    border-top: 1px solid #eef2f0;
    margin: 2px 0;
    pointer-events: none;
}
.pfl-lang-wrap {
    display: flex; align-items: center; gap: 2px;
    border-left: 1px solid rgba(255,255,255,.2);
    padding-left: 8px; margin-left: 4px;
}
.pfl-lang-wrap a {
    color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600;
    padding: 3px 6px; border-radius: 3px; text-decoration: none;
    transition: background .2s;
}
.pfl-lang-wrap a.active,
.pfl-lang-wrap a:hover { background: rgba(255,255,255,.2); color: #fff; }
.pfl-lang-wrap span { color: rgba(255,255,255,.4); font-size: 10px; }

/* ═══════════════════════════════════════════
   MAIN HEADER — Brand (Himal BG) + Nav
   ═══════════════════════════════════════════ */
.pfl-main-header {
    background: #fff;
    display: flex;
    align-items: center;
    overflow: visible;               /* must be visible for dropdown menus */
    min-height: 88px;
    position: relative;
    z-index: 1100;                   /* below top-bar dropdown, above page content */
    isolation: isolate;
}

/*
 * हिमाल фोटो — पूरा हेडर पङ्क्तिमा (Pokhara Finance जस्तो), नेभ क्षेत्र मात्र होइन।
 * Desktop मात्र; मोबाइलमा v9 ले हटाउँछ / साँघो पट्टी देखिँदैन।
 */
@media (min-width: 992px) {
    .pfl-main-header::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-color: #fff;
        background-image:
            linear-gradient(to right,
                rgba(255, 255, 255, 1) 0%,
                rgba(255, 255, 255, 0.995) clamp(170px, 26vw, 390px),
                rgba(255, 255, 255, 0.94) 52%,
                rgba(255, 255, 255, 0.72) 72%,
                rgba(255, 255, 255, 0.36) 88%,
                rgba(255, 255, 255, 0.12) 100%
            ),
            var(--himal-bg, none);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, cover;
        background-position: 0 0, 82% 40%;
    }

    body.dark-mode .pfl-main-header::after {
        background-color: #1c1c2e;
        background-image:
            linear-gradient(to right,
                #1c1c2e 0%,
                rgba(28, 28, 46, 0.99) clamp(160px, 26vw, 360px),
                rgba(28, 28, 46, 0.92) 54%,
                rgba(28, 28, 46, 0.68) 74%,
                rgba(28, 28, 46, 0.3) 90%,
                rgba(28, 28, 46, 0.08) 100%
            ),
            var(--himal-bg, none);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 100%, cover;
        background-position: 0 0, 82% 40%;
        filter: brightness(0.48);
    }
}

@media (max-width: 991px) {
    .pfl-main-header::after {
        display: none !important;
        content: none !important;
    }
}

/* ════════════════════════════════════════════════════
   LEFT: Logo / Brand area — 100% solid white, NO himal
   isolation: isolate ensures z-stacking context
════════════════════════════════════════════════════ */
.pfl-brand-area {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: min(520px, 46vw);
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 18px;
    overflow: visible;
    background: #fff !important;
    border-right: none;               /* no hard line */
}

/* Double-guarantee: ::before is also solid white */
.pfl-brand-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff !important;
    z-index: -1;
    pointer-events: none;
}

/* Right-edge: wide white fade — seamless blend into nav himal area */
.pfl-brand-area::after {
    content: '';
    position: absolute;
    top: 0; right: -32px;
    width: 40px; height: 100%;
    background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.7) 60%, transparent 100%);
    z-index: 11;
    pointer-events: none;
}

/* Himal silhouette div — not used in this design */
.pfl-himal-silhouette { display: none; }

/* ── Banner logo ─ */
.pfl-brand-content {
    position: relative;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

.pfl-brand-content.no-logo {
    flex: 1 1 auto;
    width: 100%;
}

.pfl-brand-content.has-logo {
    padding-right: 12px; /* badge सँग सानो breathing space */
}

.pfl-brand-logo {
    width: auto;
    max-width: min(400px, 100%);
    height: auto;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 1;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.10));
}

/* Text labels — hide if logo is banner type */
.pfl-brand-text { display: none !important; }

/* "Since XXXX" badge — flow मा राख्दा wide banner logo माथि overlap हुँदैन */
.pfl-since-badge {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translate(50%, -50%);
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 55%, var(--primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255,255,255,.9);
    box-shadow:
        0 4px 14px color-mix(in srgb, var(--primary-dark) 40%, rgba(0,0,0,.35)),
        0 0 0 4px rgba(255,255,255,0.55);
    z-index: 13;
    flex-shrink: 0;
    margin-left: 0;
}

/* Soft halo pulse for eye-catching badge */
.pfl-since-badge::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.55);
    opacity: 0.7;
    animation: sincePulse 2.4s ease-out infinite;
}

@keyframes sincePulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.08); opacity: 0.15; }
    100% { transform: scale(1.12); opacity: 0; }
}
.pfl-since-badge .since-text {
    font-size: 7px; color: #fff; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1;
}
.pfl-since-badge .since-year {
    font-size: 13px; color: #fff; font-weight: 800; line-height: 1.2;
}

/* ════════════════════════════════════════════════════
   RIGHT: Navigation area — himal fades in from RIGHT
   Gradient starts strongly white on LEFT, himal only on right 60%
════════════════════════════════════════════════════ */
.pfl-nav-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 14px 0 12px;
    position: relative;
    z-index: 2;
    background: transparent;
    overflow: visible;               /* MUST be visible for dropdowns to show */
}

/* पहिले हिमाल यही pseudo मा थियो — अब पूरा पङ्क्ति .pfl-main-header::after मा */
.pfl-nav-area::before {
    display: none !important;
}

.pfl-nav-area .main-nav {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

/* Desktop readability on himal background */
@media (min-width: 992px) {
    .pfl-nav-area .main-nav {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }
}

/* ════════════════════════════════════════════════════
   NAV MENU — Eye-catching colors (override style.css)
   Deep green text + gold/green hover with gradient pill
════════════════════════════════════════════════════ */
body.header-v2 .pfl-nav-area .nav-menu > li > a {
    color: #0b3b1a;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 10px;
    border-radius: 6px;
    position: relative;
    transition: background .22s, color .22s, box-shadow .22s;
    white-space: nowrap;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Colored underline bar on each item */
body.header-v2 .pfl-nav-area .nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%; right: 50%;
    height: 2px;
    background: var(--accent-color, #d4a017);
    border-radius: 2px;
    transition: left .22s, right .22s;
}
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover::after,
body.header-v2 .pfl-nav-area .nav-menu > li.active > a::after {
    left: 10px; right: 10px;
}

/* Hover state — green gradient pill */
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--text-on-primary, #fff) !important;
    box-shadow: var(--shadow-primary, 0 3px 9px rgba(26,107,50,0.28));
    transform: translateY(-0.5px);
}
body.header-v2 .pfl-nav-area .nav-menu > li > a:hover::after {
    background: transparent;
}

/* Active page — strong green gradient */
body.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    color: var(--text-on-primary, #fff) !important;
    box-shadow: var(--shadow-primary, 0 2px 7px rgba(20,82,38,0.32));
}
body.header-v2 .pfl-nav-area .nav-menu > li.active > a::after {
    background: var(--accent-color, #f5c518);
    left: 10px; right: 10px;
}

/* Dropdown chevron icon styling */
body.header-v2 .pfl-nav-area .nav-menu > li > a .fa-chevron-down {
    font-size: 9px;
    opacity: 0.75;
    margin-top: 1px;
}

/* Dropdown menu styling — high z-index to ensure it appears above all */
body.header-v2 .pfl-nav-area .nav-menu .dropdown {
    border-top: 3px solid var(--primary-color);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
    z-index: 9999 !important;
    min-width: 210px;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a {
    color: #1a3a25;
    font-size: 13px;
    font-weight: 500;
    transition: background .15s, color .15s, padding-left .15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li:last-child a {
    border-bottom: none;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a:hover {
    background: linear-gradient(to right, #edf7f0, #f5fbf7);
    color: var(--primary-dark);
    padding-left: 26px;
}
body.header-v2 .pfl-nav-area .nav-menu .dropdown li a i {
    color: var(--primary-color);
    width: 16px;
    text-align: center;
}

.pfl-mobile-toggle {
    display: none;
    margin-left: auto;
    padding: 8px 12px;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    font-size: 18px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════
   STICKY WRAPPER
   ═══════════════════════════════════════════ */
.pfl-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.pfl-main-header { position: relative !important; }
.pfl-top-bar     { position: relative !important; }

/* Scroll shadow */
.pfl-header-wrapper.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 1280px) {
    .pfl-brand-area { max-width: min(480px, 48vw); }
    .pfl-brand-logo { max-width: min(360px, 100%); max-height: 56px; }
    body.header-v2 .pfl-nav-area .nav-menu > li > a { font-size: 12.5px; padding: 7px 9px; }
}
@media (max-width: 1100px) {
    .pfl-brand-area { max-width: min(420px, 50vw); }
    .pfl-brand-logo { max-width: min(320px, 100%); max-height: 52px; }
    .pfl-since-badge {
        width: 44px;
        height: 44px;
        right: -12px;
        transform: translate(42%, -50%);
    }
    .pfl-since-badge .since-year { font-size: 11px; }
    body.header-v2 .pfl-nav-area .nav-menu > li > a { font-size: 12px; padding: 6px 8px; }
}
@media (max-width: 991px) {
    /* एउटै पङ्क्ति: लोगो + ह्याम्बर्गर (v9-mobile-fix सँग मेल) */
    .pfl-main-header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }
    .pfl-brand-area {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        max-width: none;
        padding: 8px 10px 8px 14px;
        border-right: none;
        border-bottom: none;
        box-shadow: none;
    }
    .pfl-brand-area::after { display: none; }
    .pfl-nav-area {
        flex: 0 0 auto;
        width: auto !important;
        padding: 0 10px 0 6px;
    }
    .pfl-nav-area::before { display: none; }
    .pfl-mobile-toggle { display: flex; align-items: center; }
    .pfl-since-badge { display: none; }
    .pfl-brand-logo { max-height: 48px; }
}
@media (max-width: 767px) {
    .pfl-quick-links { display: none; }
    .pfl-top-bar .container { justify-content: flex-end; }
    .pfl-top-right { padding: 0; }
    .pfl-brand-area { padding: 6px 8px 6px 12px; }
    .pfl-brand-logo { max-height: 42px; }
    /* Keep login menu compact on mobile too (do not supersize rows) */
    .pfl-login-menu {
        width: min(268px, calc(100vw - 20px));
        right: 0;
        max-height: min(70vh, 480px);
    }
    .pfl-login-menu li a {
        padding: 7px 10px;
        min-height: 0;
    }
    .pfl-lm-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .pfl-lm-text strong { font-size: 0.84rem; }
    .pfl-lm-text small { font-size: 0.7rem; }
}

@media (max-width: 480px) {
    .pfl-brand-area { padding: 5px 6px 5px 10px; }
    .pfl-brand-logo { max-height: 40px; }
}

/* ═══════════════════════════════════════════
   HIDE OLD HEADER WHEN v2 ACTIVE
   ═══════════════════════════════════════════ */
body.header-v2 .top-bar    { display: none !important; }
body.header-v2 .main-header { display: none !important; }

/* ── Dark mode ── */
body.dark-mode .pfl-brand-area {
    background: #1c1c2e !important;
    border-right-color: #333;
    box-shadow: 4px 0 12px rgba(28,28,46,1);
}
body.dark-mode .pfl-brand-area::before { background: #1c1c2e !important; }
/* Dark mode: white blend-strip लाई dark navy मा बदल्ने (नत्र brand र nav बीचमा सेतो stripe देखिन्छ) */
body.dark-mode .pfl-brand-area::after {
    background: linear-gradient(to right, #1c1c2e 0%, rgba(28,28,46,0.7) 60%, transparent 100%) !important;
}
body.dark-mode .pfl-nav-area {
    background: transparent;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a { color: #c8e6c9; }
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a:hover,
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: linear-gradient(135deg, #2d5a3d 0%, #3d7a53 100%);
    color: #fff !important;
}

/* ── Notice ticker z-index ── */
.notice-ticker { position: relative; z-index: 998; }

/* ════════════════════════════════════════════
   BELL NOTIFICATION DROPDOWN
   ════════════════════════════════════════════ */
.pfl-bell-wrap {
    position: relative;
}
.pfl-bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.9);
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .2s, color .2s;
    line-height: 1;
}
.pfl-bell-btn:hover { background: rgba(0,0,0,.2); color: #fff; }
.pfl-bell-badge {
    position: absolute;
    top: 1px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 1.5px solid rgba(192,57,43,.7);
    animation: bellPulse 2s infinite;
}
@keyframes bellPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}
.pfl-bell-drop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: -10px;
    width: 340px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.1);
    border: 1px solid #e8e8e8;
    z-index: 10000;
    overflow: hidden;
}
.pfl-bell-drop::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    transform: rotate(45deg);
    border-radius: 2px;
}
.pfl-bell-drop.open { display: block; }
.pfl-bell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.pfl-bell-new-chip {
    background: var(--accent-color, #f39c12);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.pfl-bell-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}
.pfl-bell-list::-webkit-scrollbar { width: 4px; }
.pfl-bell-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.pfl-bell-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    color: #aaa;
    font-size: 13px;
    text-align: center;
}
.pfl-bell-empty i { font-size: 28px; color: #ddd; }
.pfl-bell-item a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #f2f2f2;
    transition: background .15s;
}
.pfl-bell-item:last-child a { border-bottom: none; }
.pfl-bell-item a:hover { background: #f8fdf9; }
.pfl-bell-item--new a { border-left: 3px solid var(--primary-color); padding-left: 11px; }
.pfl-bell-item-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #e8f5e9;
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-top: 1px;
}
.pfl-bell-item--new .pfl-bell-item-icon { background: var(--primary-color); color: var(--text-on-primary, #fff); }
.pfl-bell-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pfl-bell-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pfl-bell-item-date { font-size: 11px; color: #999; }
.pfl-bell-new-dot {
    flex-shrink: 0;
    background: #e74c3c;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 2px;
    letter-spacing: .5px;
}
.pfl-bell-footer {
    padding: 10px 14px;
    border-top: 1px solid #eee;
    background: #fafafa;
    text-align: center;
}
.pfl-bell-footer a {
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .2s;
}
.pfl-bell-footer a:hover { color: var(--primary-light); text-decoration: underline; }
@media (max-width: 480px) {
    .pfl-bell-drop { width: calc(100vw - 20px); right: -40px; }
}

/* ── Rollback instructions (for developer reference) ──
   To disable v2 header: Remove "header-v2" from <body> class in includes/header.php
   हिमाल फोटो: Admin → Site Settings → हिमाल पृष्ठभूमि (वा `assets/images/himal-bg.jpg`)
   सिफारिस: चौडाइ 1400–1800px, उचाइ 500–800px, ल्यान्डस्केप (पोखरा फाइनान्स जस्तो दायाँ ब्लेन्ड)
─────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════
   DARK MODE — COMPLETE SUPPLEMENT
   (loaded after style.css, so cascade wins at same spec)
   ══════════════════════════════════════════════════════ */

/* ── Main header background ── */
body.dark-mode .pfl-main-header {
    background: #1c1c2e !important;
}
body.dark-mode .pfl-brand-area,
body.dark-mode .pfl-brand-area::before {
    background: #1c1c2e !important;
    border-color: #2a2a4a !important;
}
body.dark-mode .pfl-brand-area::after {
    background: linear-gradient(to right, #1c1c2e 0%, rgba(28,28,46,0.7) 60%, transparent 100%) !important;
}
body.dark-mode .pfl-nav-area {
    background: transparent !important;
}
body.dark-mode .pfl-header-wrapper {
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

/* ── TOP BAR ── */
body.dark-mode .pfl-top-bar {
    background: linear-gradient(135deg, #0d0d1a 0%, #111125 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
body.dark-mode .pfl-quick-links > li > a { color: rgba(200,230,201,.85) !important; }
body.dark-mode .pfl-top-right > li > a  { color: rgba(200,230,201,.85) !important; }

/* ── QUICK-LINKS (top bar) dropdown ── */
body.dark-mode .pfl-quick-links > li.has-drop .pfl-drop {
    background: #1e2740 !important;
    border-top-color: var(--primary-color) !important;
    border-color: #2a3a55 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
body.dark-mode .pfl-drop a {
    color: rgba(200,230,201,.88) !important;
}
body.dark-mode .pfl-drop a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}

/* ── NAV MENU ITEMS ── */
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a {
    color: #c8e6c9 !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li > a:hover {
    background: linear-gradient(135deg, #2d5a3d 0%, #3d7a53 100%) !important;
    color: #fff !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu > li.active > a {
    background: linear-gradient(135deg, #1a4a2e 0%, #2d7a45 100%) !important;
    color: #fff !important;
}

/* ── NAV DROPDOWN MENU (desktop) ── */
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown,
body.dark-mode .nav-menu .dropdown {
    background: #1a2535 !important;
    border-top-color: var(--primary-color, #1a8754) !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3) !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a,
body.dark-mode .nav-menu .dropdown li a {
    color: #c8e6c9 !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
    background: transparent !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a:hover,
body.dark-mode .nav-menu .dropdown li a:hover {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
    padding-left: 26px !important;
}
body.dark-mode.header-v2 .pfl-nav-area .nav-menu .dropdown li a i,
body.dark-mode .nav-menu .dropdown li a i {
    color: var(--accent-color, #f5c518) !important;
}

/* ── LOGIN DROPDOWN MENU ── */
body.dark-mode .pfl-login-menu {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.55) !important;
}
body.dark-mode .pfl-login-menu li a {
    color: #c8e6c9 !important;
}
body.dark-mode .pfl-login-menu li a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
body.dark-mode .pfl-lm-text strong { color: #e0e8e2 !important; }
body.dark-mode .pfl-lm-text small  { color: #8a9a8d !important; }
body.dark-mode .pfl-lm-divider     { border-color: rgba(255,255,255,.1) !important; }
body.dark-mode .pfl-lm-web         { background: #1a3a25 !important; color: #7ecf9d !important; }
body.dark-mode .pfl-lm-android     { background: #1a3a25 !important; color: #7ecf9d !important; }
body.dark-mode .pfl-lm-ios         { background: #2a1a3a !important; color: #c49edd !important; }
body.dark-mode .pfl-lm-admin       { background: #1a2a3a !important; color: #7ab0e0 !important; }
body.dark-mode .pfl-lm-badge       { background: #c07000 !important; }

/* ── BELL NOTIFICATION DROPDOWN ── */
body.dark-mode .pfl-bell-drop {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.55) !important;
}
body.dark-mode .pfl-bell-drop::before {
    background: var(--primary-color, #1a8754) !important;
}
body.dark-mode .pfl-bell-item a {
    color: #c8d8cc !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
}
body.dark-mode .pfl-bell-item a:hover { background: rgba(255,255,255,.07) !important; }
body.dark-mode .pfl-bell-item-icon    { background: #1e3525 !important; }
body.dark-mode .pfl-bell-empty        { color: #667766 !important; }
body.dark-mode .pfl-bell-empty i      { color: #334433 !important; }
body.dark-mode .pfl-bell-footer       { border-top-color: rgba(255,255,255,.1) !important; }
body.dark-mode .pfl-bell-list::-webkit-scrollbar-thumb { background: #2a3a4a !important; }

/* ── LOGIN TOGGLE BUTTON ── */
body.dark-mode .pfl-login-toggle {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #c8e6c9 !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE — PAGE CONTENT CARDS / SECTIONS
   ══════════════════════════════════════════════════════ */

/* Notice cards */
body.dark-mode .notice-card,
body.dark-mode .notice-detail-card {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,.4) !important;
    color: #c8d8cc !important;
}
body.dark-mode .notice-card h5 a { color: #c8e6c9 !important; }
body.dark-mode .notice-card h5 a:hover { color: var(--primary-light, #3dba6a) !important; }
body.dark-mode .notice-card p { color: #8a9a8d !important; }
body.dark-mode .notice-detail-card h2 { color: #e0f0e4 !important; }
body.dark-mode .notice-detail-card .notice-content { color: #c0d0c4 !important; }
body.dark-mode .notice-detail-card .notice-header { border-bottom-color: var(--primary-color, #1a8754) !important; }
body.dark-mode .notice-detail-card .notice-attachment { background: #1e2e3a !important; }
body.dark-mode .notice-detail-card .notice-footer { border-top-color: rgba(255,255,255,.1) !important; }
body.dark-mode .notice-date { color: #7a9a7d !important; }

/* Notices section background */
body.dark-mode .notices-section,
body.dark-mode .notices-section.section-padding {
    background-color: #121826 !important;
}

/* General white cards/sections not covered by style.css */
body.dark-mode .feature-box,
body.dark-mode .service-card,
body.dark-mode .stat-card,
body.dark-mode .team-card,
body.dark-mode .gallery-item,
body.dark-mode .loan-card,
body.dark-mode .product-card,
body.dark-mode .branch-card,
body.dark-mode .download-item,
body.dark-mode .faq-answer {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    color: #c0d0c4 !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb-item a   { color: #7ecf9d !important; }
body.dark-mode .breadcrumb-item.active { color: #8a9a8d !important; }
body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #4a6a4d !important; }

/* Section header text */
body.dark-mode .section-header h2,
body.dark-mode .section-header h3 { color: #c8e6c9 !important; }
body.dark-mode .section-header p   { color: #7a9a7d !important; }
body.dark-mode .section-divider    { background: var(--primary-color, #1a8754) !important; }

/* Contact / info boxes */
body.dark-mode .contact-card,
body.dark-mode .info-card,
body.dark-mode .contact-info-box {
    background: #1a2535 !important;
    border-color: #2a3a50 !important;
    color: #c0d0c4 !important;
}

/* Mobile nav area in dark */
body.dark-mode .pfl-mobile-toggle {
    border-color: rgba(255,255,255,.2) !important;
    color: #c8e6c9 !important;
}
body.dark-mode.header-v2 .pfl-brand-area {
    border-bottom-color: rgba(255,255,255,.12) !important;
}