/* ============================================================
   OPTISALON — Theme CSS — CLEAN VERSION
   ============================================================ */

/* ===== BODY ===== */
body { background: #08080f !important; color: rgba(240,240,248,0.85) !important; }
body.light-mode { background: #f5f5fa !important; color: #1a1a2e !important; }

/* ===== NAVBAR ===== */
header .iq-navbar, nav.iq-navbar, .iq-navbar {
    background: rgba(8,8,20,0.97) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(168,45,134,0.15) !important;
}
body.light-mode header .iq-navbar,
body.light-mode nav.iq-navbar,
body.light-mode .iq-navbar {
    background: rgba(255,255,255,0.98) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06) !important;
}

/* ===== DESKTOP NAV LINKS ===== */
.iq-navbar .nav-link,
.iq-navbar .item-name,
#header-menu > .nav-item > .nav-link,
#header-menu > .nav-item > .nav-link .item-name {
    color: rgba(240,240,255,0.88) !important;
    font-weight: 500 !important;
}
.iq-navbar .nav-link:hover .item-name,
.iq-navbar .nav-link.active .item-name {
    color: #d44aad !important;
}
body.light-mode .iq-navbar .nav-link,
body.light-mode .iq-navbar .item-name,
body.light-mode #header-menu > .nav-item > .nav-link .item-name {
    color: #1a1a2e !important;
}
body.light-mode .iq-navbar .nav-link:hover .item-name,
body.light-mode .iq-navbar .nav-link.active .item-name {
    color: #a82d86 !important;
}

/* ===== DESKTOP NAV TRANSPARENT ===== */
@media (min-width: 1200px) {
    #navbar_main,
    .mobile-offcanvas,
    .horizontal-nav.mobile-offcanvas {
        position: static !important;
        background: transparent !important;
        background-color: transparent !important;
        height: auto !important;
        width: auto !important;
        box-shadow: none !important;
        border: none !important;
    }
    .offcanvas-header { display: none !important; }
    .iq-nav-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        background: transparent !important;
    }
    .iq-nav-menu > .nav-item > .nav-link {
        padding: 8px 14px !important;
        border-radius: 8px !important;
    }
    .iq-nav-menu > .nav-item > .nav-link:hover {
        background: rgba(168,45,134,0.1) !important;
    }
}

/* ===== MOBILE MENU ===== */
@media (max-width: 1199px) {
    /* Dark mode — default */
    #navbar_main {
        position: fixed !important;
        top: 0 !important;
        left: -100vw !important;
        height: 100vh !important;
        width: 75vw !important;
        max-width: 320px !important;
        background: #0d0d1f !important;
        background-color: #0d0d1f !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        transition: left 0.32s cubic-bezier(.4,0,.2,1) !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    #navbar_main.show {
        left: 0 !important;
        box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
    }

    /* Light mode menu */
    body.light-mode #navbar_main,
    body.light-mode #navbar_main.show {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* Offcanvas header (logo zone) */
    #navbar_main .offcanvas-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        background: #0d0d1f !important;
        background-color: #0d0d1f !important;
        border-bottom: 1px solid rgba(168,45,134,0.2) !important;
    }
    body.light-mode #navbar_main .offcanvas-header {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    }

    /* btn-close */
    #navbar_main .offcanvas-header .btn-close {
        filter: invert(1) !important;
        opacity: 0.7 !important;
    }
    body.light-mode #navbar_main .offcanvas-header .btn-close {
        filter: none !important;
        opacity: 0.5 !important;
    }

    /* Nav items */
    #navbar_main .nav-link,
    #navbar_main .item-name {
        color: rgba(240,240,255,0.88) !important;
        padding: 14px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #navbar_main .nav-link:hover .item-name,
    #navbar_main .nav-link.active .item-name {
        color: #d44aad !important;
    }
    body.light-mode #navbar_main .nav-link,
    body.light-mode #navbar_main .item-name {
        color: #1a1a2e !important;
    }
    body.light-mode #navbar_main .nav-link:hover .item-name,
    body.light-mode #navbar_main .nav-link.active .item-name {
        color: #a82d86 !important;
    }

    /* Nav item borders */
    #navbar_main .nav-item {
        border-bottom: 1px solid rgba(168,45,134,0.12) !important;
    }
    body.light-mode #navbar_main .nav-item {
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }

    /* Menu icon caret */
    #navbar_main .menu-icon {
        color: rgba(212,74,173,0.5) !important;
    }

    /* Overlay */
    #navOverlay {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 99998 !important;
        display: none !important;
        background: rgba(0,0,0,0.75) !important;
    }
    #navOverlay.active { display: block !important; }

    /* Iq-nav-menu column */
    .iq-nav-menu {
        flex-direction: column !important;
        width: 100% !important;
    }
}

/* ===== DROPDOWN (features/resources) ===== */
.sub-nav, .mega-menu-item, #features, #resources {
    background: #0d0d1a !important;
    background-color: #0d0d1a !important;
    border: 1px solid rgba(168,45,134,0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 45px rgba(0,0,0,0.5) !important;
}
.sub-nav *, .mega-menu-item *, #features *, #resources * {
    color: rgba(240,240,255,0.82) !important;
    background: transparent !important;
}
.sub-nav .nav-link:hover, .mega-menu-item .nav-link:hover,
#features .nav-link:hover .item-name, #resources .nav-link:hover .item-name {
    color: #d44aad !important;
}
body.light-mode .sub-nav,
body.light-mode .mega-menu-item,
body.light-mode #features,
body.light-mode #resources {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: rgba(168,45,134,0.12) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
}
body.light-mode .sub-nav *,
body.light-mode .mega-menu-item *,
body.light-mode #features *,
body.light-mode #resources * {
    color: #1a1a2e !important;
    background: transparent !important;
}
body.light-mode .sub-nav .nav-link:hover .item-name,
body.light-mode #features .nav-link:hover .item-name,
body.light-mode #resources .nav-link:hover .item-name {
    color: #a82d86 !important;
}

/* ===== NOTICE BADGE ===== */
.notice-badge {
    background: rgba(168,45,134,0.12) !important;
    color: #d44aad !important;
    border-radius: 8px !important;
    padding: 5px 12px !important;
    display: inline-block !important;
}

/* ===== THEME TOGGLE ===== */
.os-theme-btn {
    width: 40px !important; height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    background: rgba(255,255,255,0.07) !important;
    cursor: pointer !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: all 0.3s !important;
}
.os-theme-btn:hover {
    background: rgba(168,45,134,0.2) !important;
    border-color: rgba(168,45,134,0.45) !important;
    transform: rotate(20deg) scale(1.1) !important;
}
body.light-mode .os-theme-btn {
    border-color: rgba(168,45,134,0.35) !important;
    background: rgba(168,45,134,0.1) !important;
}

/* ===== BUTTONS ===== */
.os-btn-register {
    background: linear-gradient(135deg, #a82d86, #6437c8) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(168,45,134,0.35) !important;
}
.os-btn-login {
    background: transparent !important;
    border: 1.5px solid rgba(168,45,134,0.55) !important;
    color: #d44aad !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
}
body.light-mode .os-btn-login {
    border-color: rgba(168,45,134,0.4) !important;
    color: #a82d86 !important;
}

/* ===== FOOTER ===== */
footer { background: #05050c !important; }
footer h5, footer h6 { color: #f0f0f8 !important; }
footer p, footer li, footer a { color: rgba(240,240,248,0.45) !important; }
footer a:hover { color: #a82d86 !important; }

/* ===== CARDS ===== */
.feature-dark-card, .pricing-card, .blog-card, .testimonial {
    background: rgba(18,18,30,0.9) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
}
body.light-mode .feature-dark-card,
body.light-mode .pricing-card,
body.light-mode .blog-card,
body.light-mode .testimonial {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(168,45,134,0.1) !important;
    color: #1a1a2e !important;
}

/* ===== BREADCRUMB ===== */
.breadcrumb-card {
    background: #08080f !important;
    border-bottom: 1px solid rgba(168,45,134,0.12) !important;
}
.breadcrumb-card .breadcrumb-item a { color: rgba(240,240,248,0.5) !important; }
.breadcrumb-card .breadcrumb-item.active { color: rgba(240,240,248,0.75) !important; }
body.light-mode .breadcrumb-card { background: #f5f5fa !important; }
body.light-mode .breadcrumb-card .breadcrumb-item a { color: rgba(26,26,46,0.6) !important; }
body.light-mode .breadcrumb-card .breadcrumb-item.active { color: #1a1a2e !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #08080f; }
::-webkit-scrollbar-thumb { background: rgba(168,45,134,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a82d86; }

/* ===== SECTIONS LIGHT ===== */
body.light-mode section[class*="os-"],
body.light-mode .os-pricing-page {
    background: #f5f5fa !important;
}


/* ===== DESKTOP NAVBAR HEIGHT ===== */
.navbar-inner {
    min-height: 72px !important;
    padding: 0 32px !important;
}
@media (min-width: 1200px) {
    .iq-navbar {
        padding: 0 !important;
        min-height: 72px !important;
    }
    .navbar-brand img.logo {
        max-height: 42px !important;
    }
    .iq-nav-menu > .nav-item > .nav-link {
        padding: 10px 16px !important;
        font-size: 0.93rem !important;
    }
}

/* ===== MOBILE LIGHT MODE — OFFCANVAS HEADER FIX ===== */
@media (max-width: 1199px) {
    body.light-mode #navbar_main .offcanvas-header,
    body.light-mode .horizontal-nav.mobile-offcanvas .offcanvas-header {
        background: #ffffff !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(168,45,134,0.1) !important;
    }
    /* Also fix the inline style on the div */
    body.light-mode #navbar_main [style*="background:#0d0d1f"],
    body.light-mode #navbar_main [style*="background: #0d0d1f"] {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
}
/* ===== END ===== */