/* ==========================================================
   Boostwar Custom CSS
   Mobile Offcanvas Menu — Premium Glass Sidebar
   Full-height + Yellow hover/press + Background Freeze
   + Menu Icons + Decorative glow rings
   dark_voilet theme
========================================================== */

:root {
    --smw-blue: #3b5bfd;
    --smw-blue-dark: #1b1740;
    --smw-gold: #ffc95c;
    --smw-yellow: #ffd400;
}

/* সাইট জুড়ে স্মুথ স্ক্রল (Sign In বাটন লগইন কার্ডে স্মুথলি নিয়ে যাওয়ার জন্য) */
html {
    scroll-behavior: smooth;
}

/* ---------- সাইডবার খোলা থাকলে পেছনের পেজ ফ্রিজড থাকবে ---------- */
html:has(.offcanvas-backdrop.show),
body:has(.offcanvas-backdrop.show) {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    touch-action: none;
    overscroll-behavior: none;
}

.smw-sidebar.offcanvas.offcanvas-end {
    touch-action: pan-y;
}

/* ---------- নেভিগেশন লিংক হোভার/অ্যাক্টিভ: হলুদ ---------- */
.dark-voilet-header .navbar-nav > li > a,
.smw-sidebar .navbar-nav > li > a {
    transition: color 0.2s ease, transform 0.2s ease;
}
.dark-voilet-header .navbar-nav > li > a:hover,
.dark-voilet-header .navbar-nav > li > a:focus,
.dark-voilet-header .navbar-nav > li > a.active,
.smw-sidebar .navbar-nav > li > a:hover,
.smw-sidebar .navbar-nav > li > a:focus,
.smw-sidebar .navbar-nav > li > a.active,
.smw-sidebar .navbar-nav > li > a:active {
    color: var(--smw-yellow) !important;
}

/* ---------- ভুল লেবেলযুক্ত ডুপ্লিকেট বাটন হাইড ---------- */
.nav-right .custom-nav li:has(.login-icon) {
    display: none !important;
}

@media (max-width: 991.98px) {

    /* ---------- হ্যামবার্গার বাটন ---------- */
    #mobileMenuToggle {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: none;
        transition: background 0.2s ease, border-color 0.2s ease;
    }
    #mobileMenuToggle i {
        font-size: 17px;
        color: var(--smw-blue);
        transition: color 0.2s ease;
    }
    #mobileMenuToggle:hover,
    #mobileMenuToggle:active {
        background: rgba(255, 212, 0, 0.14);
        border-color: rgba(255, 212, 0, 0.4);
    }
    #mobileMenuToggle:hover i,
    #mobileMenuToggle:active i {
        color: var(--smw-yellow);
    }

    /* ---------- মোবাইলে সঠিক Register/Back বাটন হাইড ---------- */
    .nav-right .custom-nav > a:has(.bi-person-plus) {
        display: none !important;
    }
    .nav-right .custom-nav > a:has(.bi-arrow-left) {
        display: none !important;
    }

    /* =========================================================
       OFFCANVAS PANEL — ফুল-হাইট প্রিমিয়াম গ্লাস সাইডবার
    ========================================================= */
    .smw-sidebar.offcanvas.offcanvas-end {
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: min(80vw, 300px) !important;
        max-width: 300px;
        background:
            linear-gradient(180deg, rgba(27, 23, 64, 0.92) 0%, rgba(14, 12, 34, 0.94) 100%);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        backdrop-filter: blur(22px) saturate(150%);
        border-left: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0 !important;
        box-shadow: -16px 0 50px rgba(0, 0, 0, 0.55);
        position: fixed !important;
        overflow: hidden;
    }

    .offcanvas-backdrop.show {
        opacity: 0.6 !important;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    /* ---------- হেডার (লোগো + ক্লোজ বাটন) ---------- */
    .smw-sidebar .offcanvas-header {
        position: relative;
        z-index: 2;
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.02);
    }
    .smw-sidebar .offcanvas-header .logo {
        max-height: 28px;
        width: auto;
    }
    .smw-sidebar .cmn-btn-close {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }
    .smw-sidebar .cmn-btn-close:hover {
        background: rgba(255, 212, 0, 0.15);
        color: var(--smw-yellow);
    }
    .smw-sidebar .cmn-btn-close:active {
        background: var(--smw-yellow);
        color: #1b1740;
        transform: scale(0.94);
    }

    /* ---------- বডি ---------- */
    .smw-sidebar .offcanvas-body {
        position: relative;
        z-index: 2;
        padding: 0 0 24px;
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: calc(100% - 66px);
        overflow-y: auto;
    }

    /* ---------- Sign in / Sign up বাটন: উপরে ---------- */
    .smw-mobile-auth {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    }
    .smw-mobile-auth a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .smw-mobile-auth .smw-btn-signin {
        background: rgba(255, 255, 255, 0.05);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: none;
    }
    .smw-mobile-auth .smw-btn-signin:hover {
        border-color: var(--smw-yellow);
        color: var(--smw-yellow);
        background: rgba(255, 212, 0, 0.08);
    }
    .smw-mobile-auth .smw-btn-signin:active {
        background: var(--smw-yellow);
        border-color: var(--smw-yellow);
        color: #1b1740 !important;
        transform: scale(0.97);
    }

    .smw-mobile-auth .smw-btn-signup {
        background: linear-gradient(90deg, var(--smw-blue), #6d8bff);
        color: #fff;
        box-shadow: 0 4px 18px rgba(59, 91, 253, 0.35);
    }
    .smw-mobile-auth .smw-btn-signup:hover {
        filter: brightness(1.1);
    }
    .smw-mobile-auth .smw-btn-signup:active {
        background: var(--smw-yellow);
        color: #1b1740 !important;
        box-shadow: 0 4px 18px rgba(255, 212, 0, 0.4);
        transform: scale(0.97);
    }
    .smw-mobile-auth .smw-btn-signup:active i,
    .smw-mobile-auth .smw-btn-signin:active i {
        color: #1b1740 !important;
    }

    /* ---------- মেনু লিস্ট ---------- */
    .smw-sidebar .navbar-nav {
        order: 2;
        margin: 0 !important;
        width: 100%;
        padding-top: 4px;
    }

    .smw-sidebar .navbar-nav > li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        position: relative;
    }
    .smw-sidebar .navbar-nav > li:last-child {
        border-bottom: none;
    }

    .smw-sidebar .navbar-nav > li > a {
        display: flex !important;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 15px 20px;
        font-size: 15px;
        color: #e6e8fb;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .smw-sidebar .navbar-nav > li > a:hover,
    .smw-sidebar .navbar-nav > li > a:active,
    .smw-sidebar .navbar-nav > li > a.active {
        background: linear-gradient(90deg, rgba(255, 212, 0, 0.10), transparent);
        border-left: 3px solid var(--smw-yellow);
        padding-left: 17px;
    }

    /* যদি মেনু ফাংশন থেকে নিজস্ব <i>/<svg> আইকন আসে তাহলেও রঙ ঠিকভাবে বসবে */
    .smw-sidebar .navbar-nav > li > a i,
    .smw-sidebar .navbar-nav > li > a svg {
        flex: 0 0 auto;
        width: 20px;
        text-align: center;
        font-size: 17px;
        color: var(--smw-gold);
        transition: color 0.2s ease;
    }
    .smw-sidebar .navbar-nav > li > a:hover i,
    .smw-sidebar .navbar-nav > li > a:hover svg,
    .smw-sidebar .navbar-nav > li > a:active i,
    .smw-sidebar .navbar-nav > li > a.active i,
    .smw-sidebar .navbar-nav > li > a.active svg {
        color: var(--smw-yellow);
    }

    /* =========================================================
       CSS দিয়ে আইকন যোগ (renderHeaderMenu এ নিজস্ব আইকন না থাকলে)
       ক্রম: 1=Home, 2=About, 3=Faq, 4=Blogs, 5=Services, 6=Contact
       ⚠️ মেনু আইটেমের অর্ডার বদলালে এই নম্বরগুলোও আপডেট করতে হবে
    ========================================================= */
    .smw-sidebar .navbar-nav > li > a::before {
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        font-size: 16px;
        width: 20px;
        text-align: center;
        flex: 0 0 auto;
        color: var(--smw-gold);
        transition: color 0.2s ease;
    }
    .smw-sidebar .navbar-nav > li > a:hover::before,
    .smw-sidebar .navbar-nav > li > a:active::before,
    .smw-sidebar .navbar-nav > li > a.active::before {
        color: var(--smw-yellow);
    }

    .smw-sidebar .navbar-nav > li:nth-child(1) > a::before { content: "\f015"; } /* Home */
    .smw-sidebar .navbar-nav > li:nth-child(2) > a::before { content: "\f2bd"; } /* About - address-card */
    .smw-sidebar .navbar-nav > li:nth-child(3) > a::before { content: "\f059"; } /* Faq - circle-question */
    .smw-sidebar .navbar-nav > li:nth-child(4) > a::before { content: "\f781"; } /* Blogs - blog */
    .smw-sidebar .navbar-nav > li:nth-child(5) > a::before { content: "\f013"; } /* Services - gear */
    .smw-sidebar .navbar-nav > li:nth-child(6) > a::before { content: "\f095"; } /* Contact - phone */

    /* যদি ফাংশন নিজেই <i> ট্যাগ দেয়, তাহলে আমাদের ::before ডুপ্লিকেট icon হবে —
       এই ক্ষেত্রে নিচের লাইনটার কমেন্ট তুলে দিন যাতে আমাদের icon হাইড হয়ে যায়:
    */
    /* .smw-sidebar .navbar-nav > li > a:has(i)::before,
       .smw-sidebar .navbar-nav > li > a:has(svg)::before { content: none; } */

    /* ---------- Decorative concentric glow rings ---------- */
    .smw-sidebar::after {
        content: "";
        position: absolute;
        bottom: -160px;
        right: -160px;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background:
            repeating-radial-gradient(
                circle at center,
                rgba(59, 91, 253, 0.22) 0,
                rgba(59, 91, 253, 0.22) 2px,
                transparent 2px,
                transparent 34px
            );
        -webkit-mask-image: radial-gradient(circle at center, #000 55%, transparent 100%);
        mask-image: radial-gradient(circle at center, #000 55%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }
}