/* GLOBAL — prevent horizontal scroll on mobile */
html, body{ overflow-x:hidden; }

.pw-sm-toggle{
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    border-radius:8px;
    color:var(--text-secondary);
}

body.dark-mode .pw-sm-toggle{
    background-color:var(--bg-surface);
    border-color:var(--border-color);
    color:var(--text-secondary);
}

/* নোটিফিকেশন ব্যাজ — বেল আইকনের নিচে ঝুলন্ত, ছোট */
.sp-notif-badge{
    position:absolute;
    top:100%;
    left:50%;
    transform:translate(-50%, -30%);
    min-width:15px;
    height:15px;
    padding:0 3px;
    font-size:9px;
    font-weight:700;
    line-height:15px;
    text-align:center;
    border-radius:8px;
    background:#dc3545;
    color:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    z-index:5;
    white-space:nowrap;
}

body.dark-mode .sp-notif-badge{
    background:#f87171;
    color:#111;
}

/* ===== Navbar স্মার্ট সার্চ ===== */
.sp-search-form .sp-search-input{
    border-radius:30px;
    padding-left:38px;
    padding-right:40px;
}

.sp-search-form .sp-search-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#9aa3b2;
    font-size:13px;
    z-index:2;
}

.sp-search-dropdown{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:var(--bg-surface);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    z-index:1080;
    max-height:420px;
    overflow-y:auto;
    padding:6px;
}

.sp-search-group-title{
    font-size:11px;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:8px 10px 4px;
}

.sp-search-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:8px;
    color:var(--text-primary);
    text-decoration:none;
    transition:background .15s ease;
}

.sp-search-item:hover{
    background:var(--primary-soft);
}

.sp-search-item-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:14px;
}

.sp-search-item-body{
    flex:1 1 auto;
    min-width:0;
}

.sp-search-item-title{
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sp-search-item-sub{
    font-size:11px;
    color:var(--text-secondary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sp-search-item-meta{
    flex:0 0 auto;
    text-align:right;
}

.sp-search-empty{
    padding:24px 12px;
    text-align:center;
    color:var(--text-secondary);
    font-size:13px;
}

.sp-search-view-all{
    display:block;
    text-align:center;
    padding:10px;
    margin-top:4px;
    border-top:1px solid var(--border-soft);
    color:var(--primary);
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    border-radius:0 0 8px 8px;
}

.sp-search-view-all:hover{
    background:var(--primary-soft);
}

body.dark-mode .sp-search-dropdown{
    background:var(--bg-surface);
    border-color:var(--border-color);
}

.sp-ad-banner{
    width:100%;
}

.sp-ad-banner-img{
    max-width:728px;
    height:auto;
    border-radius:8px;
    box-shadow:var(--shadow);
    background:var(--bg-surface);
    border:1px solid var(--border-color);
}

.sp-ad-banner a:hover .sp-ad-banner-img{
    box-shadow:var(--shadow-hover);
}

body.dark-mode .sp-ad-banner-img{
    background:var(--bg-surface);
    border-color:var(--border-color);
}

/* =========================================================
   AD SLIDER — একাধিক অ্যাড প্রতি ১ সেকেন্ডে অটো-স্লাইড
   ========================================================= */

.sp-ad-slider{
    position:relative;
    width:100%;
    max-width:728px;
    margin-left:auto;
    margin-right:auto;
}

.sp-ad-slider .sp-ad-slide{
    display:none;
}

.sp-ad-slider .sp-ad-slide.active{
    display:block;
    animation:spAdFade .55s ease;
}

.sp-ad-slider .sp-ad-slide img.sp-ad-banner-img{
    width:100%;
    height:auto;
    max-width:none;
}

/* অ্যাড ব্যানার — PC ও মোবাইলের আলাদা ছবি */
.sp-ad-img-mobile{
    display:none !important;
}

@media (max-width:768px){

    .sp-ad-img-desktop{
        display:none !important;
    }

    .sp-ad-img-mobile{
        display:block !important;
    }

}

@keyframes spAdFade{
    from{ opacity:.15; transform:translateX(6px); }
    to  { opacity:1;   transform:translateX(0); }
}

.sp-ad-dots{
    position:absolute;
    right:12px;
    bottom:8px;
    display:flex;
    gap:6px;
    padding:4px 6px;
    background:rgba(0,0,0,.35);
    border-radius:12px;
    z-index:2;
}

.sp-ad-dot{
    width:8px;
    height:8px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    cursor:pointer;
    transition:background .2s ease;
}

.sp-ad-dot.active{
    background:#fff;
}

body.dark-mode .sp-ad-dot{
    background:rgba(255,255,255,.35);
}

body.dark-mode .sp-ad-dot.active{
    background:#60a5fa;
}

/* =========================================================
   AD SLIDER — Responsive (মোবাইল/ট্যাবলেট)
   ========================================================= */

@media (max-width:768px){

    .sp-ad-slider{
        max-width:100%;
    }

    .sp-ad-slider .sp-ad-slide img.sp-ad-banner-img{
        border-radius:6px;
    }

    .sp-ad-dots{
        right:8px;
        bottom:6px;
        gap:4px;
        padding:3px 5px;
    }

    .sp-ad-dot{
        width:6px;
        height:6px;
    }

}

@media (max-width:576px){

    .sp-ad-banner-img{
        max-width:100%;
    }

    .sp-ad-dots{
        display:none;
    }

}

:root{
    --bg-body:#f4f6fb;
    --bg-surface:#ffffff;
    --bg-soft:#f8fafc;
    --border-color:#e5e7eb;
    --border-soft:#eee;
    --text-primary:#1f2937;
    --text-secondary:#6b7280;
    --primary:#2563eb;
    --primary-strong:#1d4ed8;
    --primary-soft:rgba(37,99,235,.1);
    --shadow:0 2px 10px rgba(0,0,0,.08);
    --shadow-hover:0 8px 20px rgba(0,0,0,.12);
    --notice-bg:#fff8c4;
    --notice-border:#f1d65c;
    --notice-title-bg:#ffe96e;
    --notice-text:#d10000;
    --notice-even:#fff2a8;
}

body.dark-mode{
    --bg-body:#0f172a;
    --bg-surface:#1e293b;
    --bg-soft:#273549;
    --border-color:#334155;
    --border-soft:#2c3a4f;
    --text-primary:#e2e8f0;
    --text-secondary:#94a3b8;
    --primary:#3b82f6;
    --primary-strong:#2563eb;
    --primary-soft:rgba(59,130,246,.15);
    --shadow:0 2px 10px rgba(0,0,0,.35);
    --shadow-hover:0 8px 20px rgba(0,0,0,.45);
    --notice-bg:#3d3205;
    --notice-border:#6b5a1a;
    --notice-title-bg:#51430c;
    --notice-text:#ffd666;
    --notice-even:#453809;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--bg-body);
    color:var(--text-primary);
    font-family:Arial, Helvetica, sans-serif;
    transition:background .3s ease, color .3s ease;
}

.wrapper{
    display:flex;
}

.sidebar{
    width:258.5px;
    min-height:100vh;
    background:var(--bg-surface);
    border-right:1px solid var(--border-color);
    position:fixed;
    left:0;
    top:0;
    transition:background .3s ease;
}

.logo{
    padding:25px;
    text-align:center;
    border-bottom:1px solid var(--border-soft);
}

.logo h3{
    color:var(--primary);
    font-size:24px;
    margin:0;
}

.logo .site-name{
    color:var(--primary);
    font-size:24px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-decoration:none;
}

.sidebar ul{
    list-style:none;
    padding:15px 0;
}

.sidebar ul li{
    margin:6px 0;
}

.sidebar ul li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    color:var(--text-primary);
    text-decoration:none;
    transition:.3s;
    font-size:15px;
}

.sidebar ul li a:hover{
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    margin:0 10px;
}

.content-wrapper{
    margin-left:258.5px;
    width:100%;
    min-height:100vh;
}

.page-content{
    padding:25px 19px;
}

.navbar{
    background:var(--bg-surface);
    padding:18px 19px;
    border-bottom:1px solid var(--border-soft);
    transition:background .3s ease;
}

.dashboard-card{
    background:var(--bg-surface);
    border-radius:12px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    box-shadow:var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease;
}

.dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover);
}

.card-icon{
    width:60px;
    height:60px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
}

.card-content h6{
    margin:0;
    color:var(--text-secondary);
    font-size:14px;
}

.card-content h3{
    margin-top:8px;
    font-weight:bold;
}

.service-card{
    position:relative;
    background:var(--bg-surface);
    border-radius:12px;
    padding:25px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.service-card-link{
    display:none;
}

.service-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
}

.service-icon{
    width:70px;
    height:70px;
    margin:auto;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-bottom:15px;
    overflow:hidden;
}

.service-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-card h5{
    margin-bottom:10px;
}

.service-card p{
    color:var(--text-secondary);
    margin-bottom:18px;
}

.notice-box{

    background:var(--notice-bg);

    border:1px solid var(--notice-border);

    border-radius:10px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:background .3s ease, border-color .3s ease;

}

.notice-title{

    background:var(--notice-title-bg);

    color:var(--notice-text);

    text-align:center;

    font-size:24px;

    font-weight:bold;

    padding:15px;

    transition:background .3s ease, color .3s ease;

}

.notice-subject{

    display:inline-block;

    color:var(--notice-text);

    background:var(--notice-title-bg);

    font-weight:700;

    font-size:15px;

    padding:4px 12px;

    border-radius:6px;

    line-height:1.4;

}

/* Order/Download loading indicator */
.btn-loading{pointer-events:none;opacity:.75}
.btn-loading .spinner-border{display:inline-block;vertical-align:middle;margin-right:6px}
.btn-loading .btn-text{display:none}
.btn-loading .btn-loading-text{display:inline !important}


.notice-list{

    list-style:none;

    margin:0;

    padding:0;

}

.notice-list li{

    padding:18px 20px;

    border-top:1px solid var(--notice-border);

    color:var(--notice-text);

    font-size:18px;

    font-weight:600;

}

.notice-list li:nth-child(even){

    background:var(--notice-even);

}

/* Notice — মোবাইলে ফন্ট সাইজ কমানো */
@media (max-width: 767.98px){
    .notice-title{ font-size:18px; padding:10px; }
    .notice-list li{ padding:12px 14px; font-size:15px; }
    .notice-subject{ font-size:13px; }
}

@media (max-width: 575.98px){
    .notice-title{ font-size:16px; padding:8px; }
    .notice-list li{ padding:10px 12px; font-size:14px; }
}

/* ===== Notice Carousel ===== */

.nh-carousel{

    position:relative;

    overflow:hidden;

}

.nh-slide{

    display:none;

    animation:nhFadeIn .4s ease;

}

.nh-slide.active{

    display:block;

}

@keyframes nhFadeIn{

    from{ opacity:0; transform:translateY(8px); }

    to{ opacity:1; transform:translateY(0); }

}

.nh-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:10px 16px;

    border-top:1px solid var(--border-color, #e5e7eb);

    background:#fafafa;

}

.nh-btn{

    width:32px;

    height:32px;

    border-radius:50%;

    border:1px solid #d1d5db;

    background:#fff;

    color:#374151;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:12px;

    transition:background .15s, border-color .15s;

    flex-shrink:0;

}

.nh-btn:hover{

    background:#10b981;

    border-color:#10b981;

    color:#fff;

}

.nh-dots{

    display:flex;

    gap:6px;

    align-items:center;

}

.nh-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    border:none;

    background:#d1d5db;

    cursor:pointer;

    padding:0;

    transition:background .2s, transform .2s;

}

.nh-dot.active{

    background:#10b981;

    transform:scale(1.3);

}

.nh-dot:hover{

    background:#6b7280;

}

.navbar{

    padding:15px 20px;

}

.navbar .form-control{

    border-radius:30px;

}

.badge{

    padding:10px 16px;

}

.dropdown-toggle{

    font-weight:600;

}
.admin-wrapper{
    display:flex;
}

.main-content{
    margin-left:258.5px;
    width:calc(100% - 258.5px);
    min-height:100vh;
}

.sidebar{
    width:258.5px;
    height:100vh;
    overflow-y:auto;
    position:fixed;
    left:0;
    top:0;
    background:var(--bg-surface);
    border-right:1px solid var(--border-color);
}

.sidebar-menu{
    list-style:none;
    padding:15px 0;
    margin:0;
}

.sidebar-menu li{
    margin:6px 0;
}

.sidebar-menu li a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    color:var(--text-primary);
    text-decoration:none;
    transition:.3s;
    font-size:15px;
}

.sidebar-menu li a:hover{
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    margin:0 10px;
}

.sidebar-menu li.has-submenu > .submenu-toggle{
    justify-content:flex-start;
    cursor:pointer;
}

.sidebar-menu li.has-submenu > .submenu-toggle .submenu-arrow{
    margin-left:auto;
    margin-right:8px;
    font-size:12px;
    transition:transform .3s ease;
}

.sidebar-menu li.has-submenu.open > .submenu-toggle{
    background:var(--primary);
    color:#fff;
    border-radius:8px;
    margin:0 10px;
}

.sidebar-menu li.has-submenu.open > .submenu-toggle .submenu-arrow{
    transform:rotate(180deg);
}

.sidebar-menu .submenu{
    list-style:none;
    margin:0;
    padding:0;
    display:none;
}

.sidebar-menu li.has-submenu.open > .submenu{
    display:block;
}

.sidebar-menu .submenu li a{
    padding:11px 22px 11px 52px;
    font-size:14px;
    gap:12px;
}

.sidebar-menu .submenu .submenu li a{
    padding-left:74px;
}

.sidebar-menu .submenu li a:hover{
    margin:0 10px;
    border-radius:8px;
}

.sidebar-menu .submenu li a i{
    width:18px;
    text-align:center;
    font-size:14px;
}

/* ===== Dark mode : Bootstrap components ===== */

body.dark-mode{
    --bs-body-bg:var(--bg-body);
    --bs-body-color:var(--text-primary);
    --bs-secondary-bg:var(--bg-soft);
    --bs-light-bg:var(--bg-surface);
    --bs-light-rgb:30,41,59;
    --bs-border-color:var(--border-color);
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item{
    background-color:var(--bg-surface);
    border-color:var(--border-color);
    color:var(--text-primary);
}

body.dark-mode .card-header{
    background-color:var(--bg-surface);
    border-bottom-color:var(--border-color);
    color:var(--text-primary);
}

body.dark-mode .card-footer{
    background-color:var(--bg-surface);
    border-top-color:var(--border-color);
}

body.dark-mode .card .text-muted,
body.dark-mode .card p,
body.dark-mode .card small{
    color:var(--text-secondary) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text{
    background-color:var(--bg-soft);
    border-color:var(--border-color);
    color:var(--text-primary);
}

body.dark-mode .form-control::placeholder{
    color:var(--text-secondary);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus{
    background-color:var(--bg-soft);
    color:var(--text-primary);
}

body.dark-mode .form-label,
body.dark-mode label{
    color:var(--text-primary);
}

body.dark-mode .table{
    color:var(--text-primary);
}

body.dark-mode .table-hover tbody tr:hover{
    color:var(--text-primary);
    background-color:var(--primary-soft);
}

body.dark-mode .table thead th,
body.dark-mode .table-light,
body.dark-mode .table-light th,
body.dark-mode .table-light td{
    background-color:var(--bg-soft);
    border-color:var(--border-color);
    color:var(--text-primary);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd){
    background-color:var(--bg-soft);
    color:var(--text-primary);
}

body.dark-mode .navbar{
    background-color:var(--bg-surface);
}

body.dark-mode .dropdown-item{
    color:var(--text-primary);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus{
    background-color:var(--primary-soft);
    color:var(--text-primary);
}

body.dark-mode .dropdown-menu .dropdown-divider{
    border-color:var(--border-color);
}

body.dark-mode .text-dark{
    color:var(--text-primary) !important;
}

body.dark-mode .btn-light,
body.dark-mode .btn-outline-primary{
    background-color:var(--bg-soft);
    border-color:var(--border-color);
    color:var(--text-primary);
}

body.dark-mode .btn-light:hover{
    background-color:var(--primary-soft);
    color:var(--text-primary);
}

body.dark-mode .alert{
    border-color:var(--border-color);
}

body.dark-mode .card.shadow,
body.dark-mode .card{
    box-shadow:var(--shadow);
}

body.dark-mode hr,
body.dark-mode .border,
body.dark-mode .border-bottom,
body.dark-mode .border-top{
    border-color:var(--border-color) !important;
}

body.dark-mode a:not(.btn):not(.dropdown-item){
    color:var(--primary);
}

.site-footer{
    margin-left:258.5px;
    background:var(--bg-surface);
    border-top:1px solid var(--border-color);
    color:var(--text-secondary);
    padding:14px 25px;
    text-align:center;
    font-size:14px;
    transition:background .3s ease, color .3s ease;
}

.sidebar-logo{
    display:block;
    max-width:180px;
    max-height:48px;
    object-fit:contain;
    margin:12px auto;
}

.sidebar-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 16px;
    border-bottom:1px solid var(--border-color);
    background:var(--bg-surface);
}

.sidebar-header .sidebar-logo{
    margin:0;
    width:auto;
    height:auto;
    max-height:48px;
    max-width:170px;
}

.sidebar-header h4{
    color:var(--primary);
    margin:0;
    font-weight:700;
}

.sidebar-header .site-name{
    min-width:0;
    overflow:hidden;
    gap:8px;
    color:var(--text-primary);
    text-decoration:none;
}

.sidebar-header .site-name span{
    color:var(--primary);
    font-size:24px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sidebar-toggle-btn{
    flex-shrink:0;
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid var(--border-color);
    border-radius:8px;
    transition:.2s;
}

.sidebar-toggle-btn:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

body.sidebar-collapsed .sidebar-header{
    justify-content:center;
    padding:14px 6px;
}

body.sidebar-collapsed .sidebar-header .site-name{
    display:none;
}

body.sidebar-collapsed .sidebar-toggle-btn{
    width:36px;
    height:36px;
    margin-left:0;
}

body.dark-mode .sidebar-toggle-btn{
    color:var(--text-primary);
}

body.dark-mode .sidebar-toggle-btn:hover{
    color:#fff;
}

.settings-section-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:var(--text-primary);
    background:var(--primary-soft);
    border:1px solid var(--border-color);
    border-left:4px solid var(--primary);
    border-radius:8px;
    padding:10px 16px;
    margin-bottom:20px;
}

.settings-section-title i{
    color:var(--primary);
}

/* ===== Site Settings page polish ===== */

.settings-tabs{
    border-bottom:2px solid var(--border-color);
    gap:6px;
}

.settings-tabs .nav-link{
    border:1px solid transparent;
    border-bottom:none;
    border-radius:10px 10px 0 0;
    padding:10px 22px;
    font-weight:600;
    color:var(--text-secondary);
    background:var(--bg-soft);
    transition:.25s;
}

.settings-tabs .nav-link:hover{
    color:var(--primary);
    background:var(--primary-soft);
}

.settings-tabs .nav-link.active{
    color:#fff;
    background:var(--primary);
    border-color:var(--primary);
    box-shadow:0 -3px 10px rgba(37,99,235,.18);
}

.settings-tabs .nav-link i{
    margin-right:4px;
}

.settings-card-header{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-strong) 100%) !important;
    border-bottom:0;
    padding:14px 22px;
    position:relative;
}

#settingsTabsContent .card-header.bg-primary{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-strong) 100%) !important;
    border-bottom:0;
}

#settingsTabsContent .card-header h5{
    font-weight:700;
}

.card.shadow.mb-4{
    border-radius:12px;
    border:1px solid var(--border-color);
    overflow:hidden;
}

.tab-pane > .card{
    border-radius:12px;
}

.express-order-section{
    background:var(--primary-soft);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:20px;
    margin-bottom:24px;
}

.express-order-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}

.express-order-heading .heading-icon{
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
}

.quick-action-card{
    display:block;
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:14px;
    padding:22px 16px;
    text-align:center;
    box-shadow:var(--shadow);
    text-decoration:none;
    color:var(--text-primary);
    height:100%;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

.quick-action-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    border-color:var(--primary);
}

.quick-action-icon{
    width:56px;
    height:56px;
    margin:0 auto 12px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    overflow:hidden;
}

.quick-action-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.quick-action-label{
    display:block;
    font-weight:600;
    font-size:15px;
    color:var(--text-primary);
}

.quick-action-label small{
    display:block;
    color:var(--text-secondary);
    font-size:12px;
    font-weight:normal;
    margin-top:2px;
}

.flexiload-action{
    position:relative;
    cursor:pointer;
}

.flexiload-operator-menu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:1050;
    background:var(--bg-surface);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:var(--shadow-hover);
    padding:6px;
    margin-top:8px;
    text-align:left;
}

.flexiload-action.open .flexiload-operator-menu{
    display:block;
}

.flexiload-operator-menu a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    color:var(--text-primary);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
}

.flexiload-operator-menu a:hover{
    background:var(--primary-soft);
    color:var(--primary);
}

.flexiload-operator-menu a i{
    color:var(--primary);
    font-size:16px;
    width:20px;
    text-align:center;
}

.notice-ticker{
    display:flex;
    align-items:stretch;
    background:var(--notice-bg);
    border:1px solid var(--notice-border);
    border-radius:10px;
    overflow:hidden;
    min-width:280px;
    flex:1;
    max-width:720px;
    box-shadow:var(--shadow);
}

.notice-ticker-label{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--notice-title-bg);
    color:var(--notice-text);
    font-weight:bold;
    font-size:14px;
    padding:10px 16px;
    flex-shrink:0;
    white-space:nowrap;
}

.notice-ticker-viewport{
    flex:1;
    overflow:hidden;
    position:relative;
    min-width:0;
}

.notice-ticker-text{
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    padding-right:60px;
    line-height:42px;
    font-size:14px;
    color:var(--notice-text);
    will-change:transform;
    animation:notice-ticker-rl 20s linear infinite;
}

.notice-ticker-text strong{
    color:var(--notice-text);
}

@keyframes notice-ticker-rl{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
}

/* ===== Sidebar collapse + responsive ===== */

.sidebar{
    z-index:1045;
    transition:width .3s ease, transform .3s ease;
}

.content-wrapper,
.main-content,
.site-footer{
    transition:margin-left .3s ease;
}

.main-content{
    transition:width .3s ease, margin-left .3s ease;
}

.sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:1040;
    display:none;
}

@media (min-width: 992px){

    body.sidebar-collapsed .sidebar{
        width:72px;
    }

    body.sidebar-collapsed .content-wrapper,
    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .site-footer{
        margin-left:72px;
    }

    body.sidebar-collapsed .main-content{
        width:calc(100% - 72px);
    }

    body.sidebar-collapsed .logo{
        padding:14px 6px;
    }

    body.sidebar-collapsed .logo h3{
        display:none;
    }

    body.sidebar-collapsed .logo .site-name{
        display:none;
    }

    body.sidebar-collapsed .sidebar-logo{
        max-width:44px;
        max-height:44px;
        margin:8px auto;
    }

    body.sidebar-collapsed .sidebar-header{
        padding:8px 0;
    }

    body.sidebar-collapsed .sidebar-header h4{
        display:none;
    }

    body.sidebar-collapsed .sidebar ul li a{
        padding:14px 0;
        justify-content:center;
        margin:0;
    }

    body.sidebar-collapsed .sidebar ul li a:hover{
        margin:0;
    }

    body.sidebar-collapsed .sidebar ul li a span{
        display:none;
    }

    body.sidebar-collapsed .sidebar-menu li a{
        padding:14px 0;
        justify-content:center;
        margin:0;
        font-size:0;
    }

    body.sidebar-collapsed .sidebar-menu li a:hover{
        margin:0;
    }

    body.sidebar-collapsed .sidebar-menu li a i{
        font-size:16px;
        margin:0;
    }

    body.sidebar-collapsed .sidebar-menu li.has-submenu > .submenu-toggle .submenu-arrow{
        display:none;
    }

    body.sidebar-collapsed .sidebar-menu .submenu{
        display:none !important;
    }

    body.sidebar-collapsed .sidebar-menu li.has-submenu.open > .submenu-toggle{
        margin:0;
    }

}

@media (max-width: 991.98px){

    .sidebar{
        width:258.5px !important;
        transform:translateX(-100%);
        box-shadow:0 0 20px rgba(0,0,0,.15);
        z-index:1060;
    }

    body.sidebar-open .sidebar{
        transform:translateX(0);
    }

    body.sidebar-open .sidebar-backdrop{
        display:block;
        z-index:1050;
    }

    .content-wrapper,
    .main-content,
    .site-footer{
        margin-left:0 !important;
        width:100%;
    }

    .sidebar-logo{
        max-width:150px;
        max-height:44px;
    }

}

/* =========================================================
   FLEXILOAD PAGE
   ========================================================= */

.flexiload-operator-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:16px;
    padding:24px 16px;
    height:100%;
    text-decoration:none;
    color:var(--text-primary);
    box-shadow:var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.flexiload-operator-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-hover);
    border-color:var(--primary);
    color:var(--text-primary);
}

.flop-card-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:14px;
    overflow:hidden;
}

.flop-card-img{
    width:44px;
    height:44px;
    object-fit:contain;
}

.flop-card-label{
    font-weight:700;
    font-size:18px;
    margin-bottom:2px;
    color:var(--text-primary);
}

.flop-card-name{
    font-size:13px;
    color:var(--text-secondary);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:6px;
}

.flop-card-desc{
    display:block;
    color:var(--text-secondary);
    font-size:12px;
    margin-bottom:12px;
    min-height:32px;
}

.flop-card-btn{
    display:inline-block;
    margin-top:auto;
    background:var(--primary);
    color:#fff;
    border-radius:20px;
    padding:6px 16px;
    font-size:13px;
    font-weight:600;
}

/* flexiload operator card — dashboard quick-action style */
.flexiload-op-card .quick-action-icon{
    background:var(--primary-soft);
    color:var(--primary);
}

.flexiload-op-card .quick-action-icon img{
    width:44px;
    height:44px;
    object-fit:contain;
}

.flexiload-op-card .quick-action-label{
    margin-bottom:8px;
}

.flexiload-op-pkg{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    border-radius:20px;
    padding:5px 14px;
    font-size:12px;
    font-weight:600;
    margin-top:auto;
}

.flexiload-operator-page .flop-tabs{
    border-bottom:2px solid var(--border-soft);
    margin-bottom:22px;
    gap:4px;
}

.flexiload-operator-page .flop-tabs .nav-link{
    border:none;
    color:var(--text-secondary);
    font-weight:600;
    border-radius:10px;
    padding:10px 20px;
    transition:background .2s ease, color .2s ease;
}

.flexiload-operator-page .flop-tabs .nav-link:hover{
    color:var(--primary);
}

.flexiload-operator-page .flop-tabs .nav-link.active{
    background:var(--primary-soft);
    color:var(--primary);
}

.flop-tab-panel{
    display:none;
}

.flop-tab-panel.active{
    display:block;
}

.pkg-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:10px;
}

.pkg-chip{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    min-width:150px;
    text-align:left;
    background:var(--bg-surface);
    border:1px solid var(--border-soft);
    border-radius:12px;
    padding:14px 16px;
    color:var(--text-primary);
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.pkg-chip:hover{
    transform:translateY(-2px);
    border-color:var(--primary);
    box-shadow:var(--shadow-hover);
}

.pkg-chip strong{
    font-size:15px;
}

.pkg-chip span{
    font-size:13px;
    color:var(--primary);
    font-weight:700;
}

.pkg-chip .pkg-chip-get{
    color:var(--text-secondary);
    font-weight:500;
}

.pkg-chip .pkg-chip-shop{
    color:var(--primary);
    font-weight:700;
}

.pkg-chip.selected{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.pkg-chip.selected span,
.pkg-chip.selected .pkg-chip-get,
.pkg-chip.selected .pkg-chip-shop{
    color:#fff;
}

.flop-selected-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    background:var(--primary-soft);
    border:1px solid var(--primary);
    border-radius:12px;
    padding:14px 16px;
    margin:14px 0;
}

.flop-selected-info{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
}

.flop-selected-info > i{
    font-size:22px;
}

.flop-selected-info small{
    display:block;
    font-size:12px;
    color:var(--text-secondary);
}

.flop-selected-info strong{
    font-size:16px;
    color:var(--text-primary);
}

.flop-selected-info > div > span{
    display:block;
    font-size:12px;
}

.flop-custom-row{
    width:200px;
}

.flop-price-summary{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin:10px 0 0;
    font-size:14px;
}

.flop-price-summary .flop-price-get{
    color:var(--text-secondary);
    font-weight:500;
}

.flop-price-summary .flop-price-get strong{
    color:var(--text-primary);
    font-weight:700;
}

.flop-price-summary .flop-price-shop{
    color:var(--primary);
    font-weight:600;
}

.flop-price-summary .flop-price-shop strong{
    font-weight:800;
}

.flop-order-form{
    margin-top:6px;
    padding-top:16px;
    border-top:1px solid var(--border-soft);
}

/* ================= FILE DOWNLOAD ================= */

.file-type-badge{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(13,110,253,.12);
    color:var(--primary);
    font-size:1.05rem;
    flex-shrink:0;
}

.file-price-badge{
    font-size:.85rem;
    font-weight:600;
}

/* =========================================================
   DASHBOARD — মোবাইল ভিউতে সার্ভিস কার্ডে ক্লিক করলে সার্ভিস সিলেক্ট
   ========================================================= */

@media (max-width: 991.98px){

    .service-card-link{
        display:block;
        position:absolute;
        inset:0;
        z-index:1;
        border-radius:12px;
    }

    .service-card .btn{
        position:relative;
        z-index:2;
    }

    .service-card:active{
        transform:scale(.98);
    }

}

/* =========================================================
   USER PANEL — ফিক্সড হেডার (navbar)
   শুধুমাত্র ইউজার প্যানেলকে প্রভাবিত করে, admin-wrapper নয়
   ========================================================= */

.wrapper .navbar{
    position:fixed;
    top:0;
    left:258.5px;
    right:0;
    z-index:1045;
}

.wrapper .page-content{
    padding:25px 19px;
    padding-top:calc(64px + var(--topnav-h, 40px) + 16px);
}

.wrapper .logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:18px 16px;
    text-align:left;
}

.wrapper .logo > a{
    min-width:0;
    overflow:hidden;
    color:var(--text-primary);
}

.wrapper .logo .sidebar-logo{
    margin:0;
    max-height:40px;
}

.wrapper .logo h3{
    font-size:19px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.sidebar-collapsed .wrapper .logo{
    justify-content:center;
    padding:12px 6px;
}

body.sidebar-collapsed .wrapper .logo .sidebar-logo{
    display:none;
}

body.sidebar-collapsed .wrapper .navbar{
    left:72px;
}

@media (max-width: 991.98px){
    .wrapper .navbar{
        left:0;
    }
}

/* =========================================================
   ADMIN SIDEBAR — সাপোর্ট রিকুয়েস্ট নোটিফিকেশন ব্যাজ
   ========================================================= */

.sidebar-menu .nav-badge{
    margin-left:auto;
    min-width:22px;
    height:22px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:var(--primary, #0d6efd);
    color:#fff;
    font-size:12px;
    font-weight:600;
    line-height:1;
}

/* =========================================================
   USER SUPPORT CHAT (লেআউটের ভেতরে) — chat-box / bubbles
   ========================================================= */

.chat-box{
    max-width:820px;
    margin:0 auto;
    background:#fff;
    border-radius:14px;
    box-shadow:0 8px 30px rgba(0,0,0,.10);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:calc(100vh - 200px);
    min-height:420px;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:20px;
    background:#f8f9fc;
}

.bubble{
    max-width:75%;
    padding:10px 14px;
    border-radius:16px;
    margin-bottom:10px;
    line-height:1.5;
    word-break:break-word;
    white-space:pre-wrap;
}

.bubble-admin{
    background:#fff;
    border:1px solid #e4e7ee;
    align-self:flex-start;
    border-bottom-left-radius:4px;
}

.bubble-user{
    background:#2563eb;
    color:#fff;
    align-self:flex-end;
    border-bottom-right-radius:4px;
}

.bubble .time{
    font-size:11px;
    opacity:.75;
    margin-top:4px;
    display:block;
}

.chat-form{
    border-top:1px solid #e9ecef;
    background:#fff;
    padding:12px;
}

.chat-empty{
    text-align:center;
    color:#6c757d;
    padding:60px 20px;
}

body.dark-mode .chat-box{
    background:#162739;
    box-shadow:0 8px 30px rgba(0,0,0,.35);
}

body.dark-mode .chat-messages{
    background:#0f1c2b;
}

body.dark-mode .bubble-admin{
    background:#1d2e45;
    border-color:#2a3b52;
    color:#e6ecf5;
}

body.dark-mode .bubble-user{
    background:#2563eb;
    color:#fff;
}

body.dark-mode .bubble .time{
    color:#aebacb;
}

body.dark-mode .chat-form{
    background:#162739;
    border-top:1px solid #2a3b52;
}

body.dark-mode .chat-empty{
    color:#8b98a9;
}

/* নোটিফিকেশন ড্রপডাউন — ডেস্কটপে ফিক্সড চওড়া */
#spNotifMenu,
#spAdminNotifMenu{
    width:340px;
}

/* =========================================================
   নোটিফিকেশন ড্রপডাউন — মোবাইলে সম্পূর্ণ ভিউপোর্টের ভেতরে
   (কাটা/স্ক্রিনের বাইরে যাওয়া আটকাতে)।
   ========================================================= */

@media (max-width: 575.98px){

    #spNotifMenu,
    #spAdminNotifMenu{
        position:fixed !important;
        top:64px !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        transform:none !important;
        margin:0 !important;
        z-index:2100 !important;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        border-radius:12px;
    }

}

/* ইউজার পেনেল হেডার (navbar + সাইডবার হেডার) — এক্সপ্রেস অর্ডার ব্যাকগ্রাউন্ড */
.wrapper .navbar{
    background:#e9effd !important;
    border-bottom:1px solid var(--border-color);
    height:64px;
    padding:0 19px;
}

body.dark-mode .wrapper .navbar{
    background:#162739 !important;
}

.wrapper > .sidebar .logo.sidebar-header{
    background:#e9effd;
    border-bottom:1px solid var(--border-color);
    height:64px;
    padding:0 16px;
    min-height:0;
}

body.dark-mode .wrapper > .sidebar .logo.sidebar-header{
    background:#162739;
}

.wrapper .sidebar .logo.sidebar-header .site-name,
.wrapper .sidebar .logo.sidebar-header h3{
    color:var(--primary);
}

/* ইউজার সাইডবার — হেডার/লগো ফিক্স, শুধু মেনু এলাকা স্ক্রল হবে */
.wrapper > .sidebar{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
}

.wrapper > .sidebar .logo.sidebar-header{
    flex-shrink:0;
}

.wrapper > .sidebar ul{
    flex:1 1 auto;
    overflow-y:auto;
    min-height:0;
}

/* সাইডবার মেনু লেবেল এক লাইনে থাকবে — দ্বিতীয় লাইনে ভাঙলে মনে হয় লেখা কেটে গেছে,
   তাই nowrap + ellipsis */
.wrapper > .sidebar ul li a span,
.sidebar-menu li a span{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* এডমিন পেনেল হেডার (navbar + সাইডবার হেডার) — একই সাইজ ও কালার */
.admin-wrapper .navbar{
    background:#e9effd !important;
    border-bottom:1px solid var(--border-color);
    height:64px;
    padding:0 20px;
}

/* এডমিন navbar উপরে sticky — স্ক্রল করলেও হেডার জায়গায় থাকে, mobile padding-top সমস্যা নেই */
.admin-wrapper .navbar{
    position:sticky;
    top:0;
    left:auto;
    right:auto;
    z-index:1045;
}

.admin-wrapper .main-content{
    padding-top:0;
}

body.dark-mode .admin-wrapper .navbar{
    background:#162739 !important;
}

.admin-wrapper > .sidebar .sidebar-header{
    background:#e9effd;
    border-bottom:1px solid var(--border-color);
    height:64px;
    padding:0 16px;
}

body.dark-mode .admin-wrapper > .sidebar .sidebar-header{
    background:#162739;
}

.admin-wrapper .sidebar .sidebar-header .site-name,
.admin-wrapper .sidebar .sidebar-header h4{
    color:var(--primary);
}

/* এডমিন সাইডবার — হেডার ফিক্স, মেনু এলাকা স্ক্রল */
.admin-wrapper > .sidebar{
    display:flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
}

.admin-wrapper > .sidebar .sidebar-header{
    flex-shrink:0;
}

.admin-wrapper > .sidebar .sidebar-menu{
    flex:1 1 auto;
    overflow-y:auto;
    min-height:0;
}

/* =========================================================
   ইউজার প্যানেল টপ মেনু (হেডার/নেভবারের উপরে ছোট বার)
   ========================================================= */

.sp-top-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    z-index:1035;
    height:40px;
    display:flex;
    align-items:center;
    background:var(--bg-surface);
    border-bottom:1px solid var(--border-soft);
}

.sp-top-nav-inner{
    gap:4px;
    padding:0 14px;
    overflow:visible;
    flex-wrap:nowrap;
}

.sp-tools-nav{
    display:flex;
    align-items:center;
    gap:4px;
}

/* ডেস্কটপে টুল অপশন টপবারেই থাকে — ফুটার-কপি লুকানো */
.sp-footer-tools{
    display:none;
}

.sp-top-nav-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    text-decoration:none;
    border-radius:7px;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}

.sp-top-nav-link i{
    font-size:12px;
    color:var(--primary);
}

.sp-top-nav-link:hover,
.sp-top-nav-link:focus{
    background:var(--primary-soft);
    color:var(--text-primary);
}

.sp-top-nav-link.dropdown-toggle::after{
    font-size:10px;
    margin-left:2px;
}

.sp-top-nav .dropdown-menu{
    margin-top:6px;
}

.sp-top-nav .dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    padding:8px 14px;
}

.sp-top-nav .dropdown-item i{
    width:18px;
    text-align:center;
}

.sp-topbar-ticker{
    display:flex;
    align-items:stretch;
    background:var(--notice-bg);
    border:1px solid var(--notice-border);
    border-radius:7px;
    max-width:none;
    width:auto;
    flex:1;
    min-width:0;
}

.sp-topbar-ticker-label{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--notice-title-bg);
    color:var(--notice-text);
    font-weight:bold;
    font-size:12px;
    padding:0 12px;
    flex-shrink:0;
    white-space:nowrap;
}

.sp-topbar-ticker-label i{
    font-size:11px;
}

/* "নোটিশ" লেবেলটি এখন লিংক — ক্লিক করলে সব নোটিশ পেজ খোলে */
a.sp-topbar-ticker-label{
    text-decoration:none;
    cursor:pointer;
    transition:filter .15s ease;
}

a.sp-topbar-ticker-label:hover{
    filter:brightness(1.12);
}

.sp-topbar-ticker-viewport{
    flex:1;
    overflow:hidden;
    position:relative;
    min-width:0;
}

.sp-topbar-ticker-close{
    flex-shrink:0;
    display:none;
    align-items:center;
    justify-content:center;
    width:24px;
    align-self:stretch;
    border:none;
    background:transparent;
    color:var(--notice-text);
    opacity:.6;
    cursor:pointer;
    font-size:12px;
    transition:opacity .15s ease, background .15s ease;
}

.sp-topbar-ticker-close:hover,
.sp-topbar-ticker-close:focus{
    opacity:1;
    background:rgba(0,0,0,.06);
}

@media (max-width: 767.98px){
    .sp-topbar-ticker-close{
        display:flex;
    }
}

.sp-topbar-ticker-text{
    display:flex;
    width:max-content;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
    padding:5px 0;
    line-height:1.55;
    font-size:13px;
    color:var(--notice-text);
    animation:sp-topbar-ticker-lr 30s linear infinite;
    will-change:transform;
}

.sp-topbar-ticker-inner{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    flex-shrink:0;
    padding:0 6px;
}

.sp-topbar-ticker-item{
    display:inline-block;
    margin:0;
}

.sp-topbar-ticker-subject{
    display:inline-block;
    color:#cc0000;
    background:transparent;
    font-weight:700;
    padding:0 2px;
    margin-right:6px;
}

.sp-topbar-ticker-desc{
    color:inherit;
}

.sp-topbar-ticker-sep{
    display:inline-block;
    margin:0 14px;
    color:inherit;
    opacity:.5;
}

@keyframes sp-topbar-ticker-lr{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-50%); }
}

@keyframes sp-topbar-ticker-rl{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(-100%); }
}

@media (max-width: 1199.98px){
    .sp-topbar-ticker{
        max-width:none;
    }
}

@media (max-width: 767.98px){
    .sp-topbar-ticker{
        max-width:none;
        height:auto;
    }
    .sp-topbar-ticker-label{
        padding:0 8px;
        font-size:11px;
    }
    .sp-topbar-ticker-text{
        font-size:11px;
        line-height:1.5;
    }
}

@media (max-width: 767.98px){
    .sp-top-nav-link{
        padding:5px 8px;
        font-size:12px;
        gap:4px;
    }
    .sp-top-nav-link i{
        display:none;
    }
    .sp-top-nav .dropdown-item{
        font-size:12px;
    }
}

/* ডেস্কটপ — ইউজার প্যানেল: navbar উপরে, টুল-বার তার নিচে fixed.
   নোটিস টেক্সট একাধিক লাইনে মোড়ালেও যেন বার বড় হয়ে যায় —
   তাই height auto + min-height; .page-content-এর প্যাডিং JS-মাপা
   --topnav-h ভেরিয়েবল দিয়ে হিসাব হয় (নিচের নিয়ম দেখুন) */
.wrapper .sp-top-nav{
    left:258.5px;
    height:auto;
    min-height:40px;
    padding:2px 0;
}

.wrapper .sp-top-nav-inner{
    align-items:center;
}

.wrapper .navbar{
    top:0;
}

body.sidebar-collapsed .wrapper .sp-top-nav{
    left:72px;
}

/* navbar ও টুল-বারের ড্রপডাউন মেনু যেন নিচের কনটেন্টের উপরে থাকে */
.wrapper .navbar .dropdown-menu,
.wrapper .sp-top-nav .dropdown-menu{
    z-index:2000;
}

/* =========================================================
   মোবাইল ভিউ override — ডেস্কটপ base rules-এর পরে থাকা দরকার
   (সমতা specificity-তে এই নিয়মই শেষে জেতে)
   ========================================================= */

@media (max-width: 991.98px){

    /* default --topnav-h before JS sets it — prevents layout shift */
    :root{ --topnav-h: 40px; }

    .wrapper .content-wrapper{
        display:flex;
        flex-direction:column;
    }

    .wrapper .navbar{
        position:relative;
        order:1;
        left:auto;
        top:auto;
        right:auto;
        z-index:1050;
        width:100%;
        height:auto;
        min-height:64px;
        overflow:visible;
    }

    .wrapper .sp-top-nav{
        position:relative;
        order:2;
        left:auto;
        top:auto;
        right:auto;
        z-index:1040;
        width:100%;
        height:auto;
        min-height:40px;
        overflow:visible;
    }

    .wrapper .sp-top-nav-inner{
        flex-direction:row;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding:6px 12px;
        gap:2px;
        scrollbar-width:none;
    }

    .wrapper .sp-top-nav-inner::-webkit-scrollbar{
        display:none;
    }

    /* মোবাইলে টপবার-এর টুল অপশন লুকিয়ে, ফুটার টেক্সটের উপরে static বারে দেখানো হয় */
    .wrapper .sp-top-nav .sp-tools-nav{
        display:none;
    }

    .wrapper .sp-top-nav.sp-nav-empty{
        display:none;
    }

    .sp-footer-tools{
        display:flex;
        justify-content:center;
        background:var(--bg-surface);
        border-top:1px solid var(--border-soft);
        padding:8px 12px;
        overflow-x:auto;
        scrollbar-width:none;
    }

    .sp-footer-tools::-webkit-scrollbar{
        display:none;
    }

    .sp-footer-tools .sp-tools-nav{
        flex-wrap:nowrap;
        gap:2px;
    }

    .sp-footer-tools .sp-tools-nav .dropdown-menu{
        position:fixed !important;
        top:auto !important;
        bottom:56px !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        transform:none !important;
        margin:0 !important;
        z-index:2100 !important;
        max-height:calc(100vh - 70px);
        overflow-y:auto;
        border-radius:12px;
    }

    .sp-topbar-ticker{
        flex:1;
        max-width:none;
        width:auto;
        height:auto;
        margin-left:0;
    }

    .sp-topbar-ticker-label{
        padding:0 10px;
        font-size:12px;
        gap:5px;
    }

    .sp-topbar-ticker-label i{
        display:inline-block;
        font-size:11px;
    }

    .sp-topbar-ticker-text{
        font-size:12px;
        line-height:1.5;
        padding:5px 10px;
    }

    .wrapper .sp-top-nav-inner .sp-topbar-ticker{
        order:1;
    }

    .wrapper .page-content{
        order:3;
        padding:25px 19px;
        padding-top:32px;
    }

}

/* xs স্ক্রিন (ছোট ফোন) — ইউজার নেভবারের ডান গ্রুপ (থিম, বেল, ব্যালেন্স,
   অ্যাকাউন্ট, মিউট) যেন উপচে/কেটে না যায় — গ্যাপ-প্যাডিং কমানো */
@media (max-width: 575.98px){

    .wrapper .navbar{
        padding:8px 12px;
    }

    .wrapper .navbar .ms-auto.d-flex.align-items-center{
        gap:6px;
    }

    .wrapper .navbar .ms-auto .btn{
        padding:.3rem .45rem;
        font-size:13px;
    }

    .wrapper .navbar .me-3{
        margin-right:.5rem !important;
    }

    .wrapper .navbar .badge.bg-primary{
        font-size:12px;
        padding:.35em .55em;
    }

    .wrapper .page-content{
        padding-left:14px;
        padding-right:14px;
    }

}

/* =========================================================
   ADMIN PANEL — মোবাইল রেসপনসিভ
   ========================================================= */

/* নেভবার সার্চ — ডেস্কটপে 320px, মোবাইলে ফুল-উইডথ সারি */
.admin-wrapper .navbar .sp-search-wrap{
    display:flex;
    width:320px;
}

/* নেভবার ডান পাশের বাটন (মিউট, সেবা টগল, নাম, বেল) — সবসময় এক লাইনে থাকবে */
.admin-wrapper .navbar .navbar-btns{
    margin-left:auto;
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:6px;
    min-width:0;
}

@media (max-width: 991.98px){

    .admin-wrapper .navbar{
        left:auto;
        height:auto;
        min-height:64px;
        padding:8px 16px;
    }

    /* ট্যাববার — মোবাইলে হরাইজন্টাল স্ক্রল */
    .admin-wrapper .nav-tabs,
    .admin-wrapper .card-header .nav-tabs{
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .admin-wrapper .nav-tabs::-webkit-scrollbar,
    .admin-wrapper .card-header .nav-tabs::-webkit-scrollbar{
        display:none;
    }

    .admin-wrapper .nav-tabs .nav-link{
        white-space:nowrap;
    }

}

@media (max-width: 767.98px){

    .admin-wrapper .navbar .container-fluid{
        flex-wrap:wrap;
        gap:8px;
    }

    .admin-wrapper .navbar .sp-search-wrap{
        order:3;
        flex:1 1 100%;
        width:100%;
        max-width:100%;
        margin-top:4px;
    }

    .admin-wrapper .navbar .navbar-btns{
        margin-left:auto;
        display:flex;
        align-items:center;
        flex-wrap:nowrap;
        gap:6px;
    }

    /* ড্যাশবোর্ড স্ট্যাট কার্ড — মোবাইলে ছোট ও কমপ্যাক্ট */
    .admin-wrapper .dashboard-card{
        padding:14px 8px;
        border-radius:10px;
    }

    .admin-wrapper .dashboard-card .card-content h6{
        margin:0;
        font-size:.8rem;
    }

    .admin-wrapper .dashboard-card .card-content h3{
        margin-top:4px;
        font-size:1.1rem;
    }

    /* টেবিল — যেসব ভিউতে .table-responsive wrapper নেই সেগুলো ছোট স্ক্রিনে
       নষ্ট না হয়ে স্ক্রলযোগ্য থাকে */
    .admin-wrapper .card .table:not(.table-responsive .table){
        display:block;
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

}

@media (max-width: 575.98px){

    .admin-wrapper .navbar{
        padding:8px 12px;
    }

    .admin-wrapper .navbar .btn-sm{
        padding:.3rem .45rem;
    }

    .admin-wrapper .navbar .btn-group .btn{
        padding:.3rem .5rem;
    }

    .admin-wrapper .navbar .sp-search-wrap{
        flex:1 1 100%;
        max-width:100%;
    }

    /* টেবিল অ্যাকশন বাটন — ছোট স্ক্রিনে আরো ছোট */
    .admin-wrapper .table-responsive .btn-sm{
        padding:.18rem .4rem;
        font-size:.78rem;
    }

    /* পেজ/কার্ড হেডার — র্যাপ */
    .admin-wrapper .page-header,
    .admin-wrapper .d-flex.justify-content-between{
        flex-wrap:wrap;
        gap:8px;
    }

    .admin-wrapper .card-header.d-flex{
        flex-wrap:wrap;
        gap:6px;
    }

    .admin-wrapper .card-header.d-flex > .ms-auto{
        margin-left:0 !important;
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }

}

/* ============================================================
   Pagination (pager) — থিম-সচেতন (light + dark)
   ============================================================ */

.pagination{
    --bs-pagination-color: var(--primary);
    --bs-pagination-bg: var(--bg-surface);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-focus-color: var(--primary-strong);
    --bs-pagination-focus-bg: var(--bg-soft);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-hover-color: var(--primary-strong);
    --bs-pagination-hover-bg: var(--bg-soft);
    --bs-pagination-hover-border-color: var(--border-color);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-disabled-color: var(--text-secondary);
    --bs-pagination-disabled-bg: var(--bg-soft);
    --bs-pagination-disabled-border-color: var(--border-soft);
}

.pagination .page-link{
    border-radius: .375rem;
    min-width: 32px;
    text-align: center;
    box-shadow: none;
}

.pagination .page-item:not(:first-child) .page-link{
    margin-left: 4px;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus{
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

.pagination .page-item.disabled .page-link{
    opacity: .55;
}

/* =========================================================
   গেস্ট মোড — সাইডবার লুকানো, content পুরো প্রস্থ নেয়
   ========================================================= */

body.guest-mode .sidebar{
    display:none;
}

body.guest-mode .content-wrapper{
    margin-left:0;
}

/* গেস্টে সাইডবার নেই — টুল-বার বাম প্রান্ত থেকে শুরু */
body.guest-mode .wrapper .sp-top-nav{
    left:0;
}

/* গেস্টে navbar নেই — তাই টুল-বার উপরের প্রান্তে (navbar-এর 64px অফসেট বাদ) */
body.guest-mode .sp-top-nav{
    top:0;
}

/* গেস্টে navbar নেই — page-content থেকে navbar-এর 64px রিজার্ভ বাদ,
   আর বাম-ডান প্যাডিংও কমানো — কনটেন্ট যথাসম্ভব প্রশস্ত */
body.guest-mode .wrapper .page-content{
    padding-top:calc(var(--topnav-h, 40px) + 16px);
    padding-left:0;
    padding-right:0;
}

/* গেস্ট টুল পেজের কনটেন্ট বক্স — সর্বোচ্চ 900px, মাঝখানে */
body.guest-mode .wrapper .page-content .container-fluid{
    max-width:900px;
    margin:0 auto;
}

/* গেস্টে টুল-বারের লিংকগুলোও 900px বক্সের সাথে অ্যালাইন
   (মোবাইলে আগের মতোই হরিজন্টাল-স্ক্রল — max-width ছোট স্ক্রিনে নিষ্ক্রিয়) */
body.guest-mode .wrapper .sp-top-nav-inner{
    max-width:900px;
    margin:0 auto;
}

/* মোবাইলেও গেস্টের টুলস টপবারেই থাকবে (হোম-এর পাশে) —
   ফুটার-বারে নামবে না (ফুটার নিয়ম শুধু লগইন ইউজারদের জন্য) */
@media (max-width: 991.98px){

    body.guest-mode .wrapper .sp-top-nav .sp-tools-nav{
        display:flex;
    }

    /* স্ক্রল কন্টেইনারের ভেতরে ড্রপডাউন কাটা যায় — তাই ফিক্সড ফুল-উইডথ প্যানেল */
    body.guest-mode .wrapper .sp-top-nav .sp-tools-nav .dropdown-menu{
        position:fixed !important;
        top:52px !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        transform:none !important;
        margin:0 !important;
        z-index:2100 !important;
        max-height:calc(100vh - 64px);
        overflow-y:auto;
        border-radius:12px;
    }

    body.guest-mode .sp-footer-tools{
        display:none;
    }

}

/* ===== Flexiload combo offers slider (dashboard) ===== */

.flx-slider{
    position:relative;
    overflow:hidden;
}

.flx-slide{
    display:none;
    animation:flxFadeIn .4s ease;
}

.flx-slide.active{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5px;
    padding:8px 8px 2px;
}

@keyframes flxFadeIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

.flx-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border-color, #e5e7eb);
    border-radius:10px;
    padding:10px;
    background:#fff;
    cursor:pointer;
    transition:box-shadow .15s, border-color .15s;
}

.flx-card:hover,
.flx-card:focus-visible{
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    border-color:var(--primary, #10b981);
    outline:none;
}

.flx-op{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
    min-width:0;
}

.flx-op-icon{
    width:28px;
    height:28px;
    border-radius:7px;
    background:var(--primary-soft, #eef2ff);
    color:var(--primary, #10b981);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.flx-op-icon img{
    width:28px;
    height:28px;
    object-fit:contain;
}

.flx-op-icon.bg-primary{
    background:var(--primary, #10b981);
    color:#fff;
}

.flx-op-name{
    font-weight:700;
    font-size:11px;
    color:var(--text-primary, #111827);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.flx-pkg-title{
    font-size:12px;
    font-weight:800;
    color:var(--text-primary, #111827);
    line-height:1.3;
    margin-bottom:4px;
}

.flx-cust-price{
    font-size:13px;
    font-weight:800;
    color:var(--primary, #10b981);
}

.flx-pkg-detail{
    color:var(--text-secondary, #6b7280);
    font-size:12px;
    margin-bottom:6px;
}

.flx-price{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}

.flx-price span{
    font-size:11px;
    color:var(--text-secondary, #6b7280);
    background:#f9fafb;
    border:1px solid var(--border-color, #e5e7eb);
    border-radius:8px;
    padding:4px 8px;
}

.flx-price span strong{
    color:var(--primary, #10b981);
    font-size:12px;
}

.flx-order-btn{
    display:block;
    text-align:center;
    background:var(--primary, #10b981);
    color:#fff;
    border-radius:18px;
    padding:7px 12px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    margin-top:auto;
}

.flx-order-btn:hover{
    opacity:.9;
    color:#fff;
}

.flx-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:10px 16px;
    border-top:1px solid var(--border-color, #e5e7eb);
    background:#fafafa;
}

.flx-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid #d1d5db;
    background:#fff;
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:12px;
    transition:background .15s, border-color .15s;
    flex-shrink:0;
}

.flx-btn:hover{
    background:#10b981;
    border-color:#10b981;
    color:#fff;
}

.flx-dots{
    display:flex;
    gap:6px;
    align-items:center;
}

.flx-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:none;
    background:#d1d5db;
    cursor:pointer;
    padding:0;
    transition:background .2s, transform .2s;
}

.flx-dot.active{
    background:#10b981;
    transform:scale(1.3);
}

.flx-dot:hover{
    background:#6b7280;
}

/* ===== Flexiload combo/mini slider — উপরের .flx-* নিয়মগুলোর + মোবাইল রেস্পন্সিভ ===== */

@media (min-width: 768px) {
    .flx-slide.active{
        grid-template-columns:repeat(4, 1fr);
    }
}

@media (max-width: 767.98px) {
    .flx-slide.active{
        grid-template-columns:repeat(3, 1fr);
        gap:6px;
        padding:10px 10px 4px;
    }
}

@media (max-width: 575.98px) {
    .flx-slide.active{
        grid-template-columns:repeat(2, 1fr);
        gap:8px;
        padding:10px 10px 4px;
    }

    .flx-cust-price{
        font-size:12px;
    }
}

/* operator tabs — মোবাইলে হরাইজন্টাল স্ক্রল */
.flexiload-operator-page .flop-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.flexiload-operator-page .flop-tabs .nav-item{
    white-space:nowrap;
}

@media (max-width: 575.98px) {
    .flexiload-operator-page .flop-tabs{
        gap:0;
        margin-bottom:16px;
    }

    .flexiload-operator-page .flop-tabs .nav-link{
        padding:8px 12px;
        font-size:13px;
    }
}

/* =========================================================
   NEWS FEED CARD — user news feed list
   ========================================================= */
.news-feed-card{
    transition:transform .2s ease, box-shadow .2s ease;
    border:1px solid var(--border-soft);
    border-radius:12px;
    overflow:hidden;
}
.news-feed-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.news-feed-card .card-body{
    padding:16px;
}
.news-feed-card .badge{
    font-size:11px;
    font-weight:600;
}
@media (max-width: 575.98px){
    .news-feed-card .card-body{
        padding:12px;
    }
}