/* ============================================================
   MOBILE RESPONSIVE — Global improvements for all pages
   ============================================================ */

/* ── GENERAL ── */
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ── Prevent horizontal overflow globally on mobile ── */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Don't use overflow-x:hidden on .marginforfixed — breaks table scroll */
  .marginforfixed,
  .userbody,
  .marginforfixed.userbody {
    width: 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }
}

/* ── AUTHENTICATED NAVBAR (top) ── */
@media (max-width: 991px) {
  .usernav.navbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .navbar-header {
    padding: 6px 12px !important;
    border-radius: 10px !important;
  }
  .navbar-brand img { max-height: 30px !important; }
}

/* ── SIDEBAR — mobile full drawer with smooth animation ── */
@media (max-width: 765px) {
  .navbarbottom {
    width: 85vw !important;
    max-width: 300px !important;
    padding: 16px 12px !important;
    border-right: 1px solid rgba(142,182,155,0.15) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;

    /* Slide from left — GPU accelerated */
    transform: translateX(-110%) !important;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s ease !important;
    box-shadow: none !important;
  }
  .navbarbottom.expanded {
    transform: translateX(0) !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.6) !important;
  }

  /* Sidebar overlay backdrop */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  /* Staggered item entrance */
  .navbarbottom.expanded ul.sidemenu > li,
  .navbarbottom.expanded ul.sidemenu > p.menusubs {
    opacity: 0;
    transform: translateX(-14px);
    animation: sidebarItemIn 0.22s ease forwards;
  }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(1)  { animation-delay: 0.06s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(2)  { animation-delay: 0.09s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(3)  { animation-delay: 0.12s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(4)  { animation-delay: 0.14s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(5)  { animation-delay: 0.16s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(6)  { animation-delay: 0.18s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(7)  { animation-delay: 0.20s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(8)  { animation-delay: 0.22s; }
  .navbarbottom.expanded ul.sidemenu > li:nth-child(n+9) { animation-delay: 0.24s; }
  @keyframes sidebarItemIn {
    to { opacity: 1; transform: translateX(0); }
  }

  /* Profile card slide down */
  .navbarbottom.expanded .userprofilecardnew {
    animation: profileCardIn 0.28s cubic-bezier(0.4,0,0.2,1) both;
  }
  @keyframes profileCardIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
  /* Balance/funds amount — always visible on mobile */
  .upcfund,
  .userprofilecardnew .upcfund {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #8eb69b !important;
  }
  /* Profile card name */
  .upcname {
    display: block !important;
    font-size: 14px !important;
    color: #fff !important;
  }
  /* Profile card expand arrow */
  .userprofilecardnew i.fa-chevron-right {
    display: flex !important;
  }
  /* Remove sidebar offset on mobile — full width content */
  body { padding-left: 0 !important; }
}

/* ── MAIN CONTENT — general mobile ── */
@media (max-width: 768px) {
  .marginforfixed.userbody,
  .marginforfixed {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* Containers */
  .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }

  /* Typography */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
}

/* ── WELCOME CARD (dashboard) ── */
@media (max-width: 991px) {
  .welcmcard {
    padding: 20px 16px !important;
    margin-bottom: 16px !important;
  }
  .welcmcard h2 { font-size: 20px !important; }
  .imfwelcmdiv { display: none !important; }
}

/* ── STATS CARDS ── */
@media (max-width: 768px) {
  .analystat { margin-bottom: 14px !important; padding: 16px !important; }
  .analystat h2 { font-size: 22px !important; }
}

/* ── COMMUNITY / ACTION CARDS ── */
@media (max-width: 768px) {
  .communityno {
    margin-bottom: 12px !important;
    padding: 16px !important;
  }
  .communityno h2 { font-size: 16px !important; }
  .cardlvl { margin-bottom: 12px !important; padding: 16px !important; }
}

/* ── CATEGORY GRID ── */
@media (max-width: 600px) {
  .cat-grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .cat-icon-circle { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  .cat-label { font-size: 9px !important; }
  .category-action-item { min-height: 65px !important; padding: 8px 4px !important; }
}
@media (max-width: 380px) {
  .cat-grid-container { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── ORDER FORM ── */
@media (max-width: 768px) {
  .well { padding: 14px !important; border-radius: 12px !important; }
  .form-control { height: 44px !important; font-size: 14px !important; }
  .btn-primary { height: 46px !important; font-size: 15px !important; }
  select.form-control { height: 44px !important; }
  .min-max { font-size: 12px !important; color: #94a3b8 !important; }
}

/* ── TABLES — horizontal scroll ── */
@media (max-width: 768px) {
  .table-responsive { border: none !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table th, .table td { white-space: nowrap; padding: 10px 12px !important; font-size: 13px !important; }
  .table thead th { font-size: 11px !important; }
}

/* ── PANELS / CARDS ── */
@media (max-width: 768px) {
  .panel, .well, .modern-card { border-radius: 12px !important; }
  .panel-body { padding: 14px !important; }
  .panel-heading { padding: 12px 14px !important; font-size: 14px !important; }
}

/* ── ADD FUNDS PAGE ── */
@media (max-width: 768px) {
  .cp-container { padding: 0 12px 40px !important; }
  .modern-card { padding: 18px 14px !important; }
  .trust-banner { padding: 10px 12px !important; gap: 8px !important; }
  .trust-item { font-size: 12px !important; padding: 5px 10px !important; }
  .payment-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .payment-card { min-height: 130px !important; padding: 16px 10px 12px !important; }
  .pay-name { font-size: 12px !important; }
}

/* ── TICKETS / SUPPORT ── */
@media (max-width: 768px) {
  .ticket-form .form-control { font-size: 14px !important; }
  .btn-primary.btn-block { height: 46px !important; font-size: 14px !important; }
}

/* ── ORDERS PAGE ── */
@media (max-width: 768px) {
  .orders-table-wrap { overflow-x: auto !important; }
  .badge { font-size: 11px !important; padding: 3px 8px !important; }
}

/* ── MODALS ── */
@media (max-width: 576px) {
  .modal-dialog { margin: 10px !important; }
  .modal-content { border-radius: 14px !important; }
  .modal-header { padding: 14px 16px !important; }
  .modal-body { padding: 16px !important; }
  .modal-footer { padding: 12px 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .modal-footer .btn { width: 100% !important; }
}

/* ── REFUNDS PAGE ── */
@media (max-width: 768px) {
  .rf-wrap { margin-top: 90px !important; padding: 0 12px !important; }
  .rf-head { flex-direction: column !important; align-items: flex-start !important; }
  .rf-table-wrap { overflow-x: auto !important; }
  .rf-table th, .rf-table td { padding: 10px 12px !important; font-size: 12px !important; white-space: nowrap !important; }
}

/* ── SERVICE UPDATES PAGE ── */
@media (max-width: 768px) {
  .su-page { margin-top: 90px !important; padding: 0 12px !important; }
  .su-row { flex-wrap: wrap !important; gap: 8px !important; }
  .su-right { width: 100% !important; justify-content: space-between !important; }
  .su-sname { font-size: 13px !important; }
}

/* ── TUTORIALS PAGE ── */
@media (max-width: 768px) {
  .tut-container { margin-top: 90px !important; padding: 0 12px !important; }
}

/* ── SIDEBAR BOTTOM BUTTONS — visible when sidebar expanded ── */
@media (max-width: 765px) {
  /* Default: hidden in icon-only mode */
  .sidebarbtmacbtns { display: none !important; }

  /* Show when sidebar is expanded */
  .navbarbottom.expanded .sidebarbtmacbtns {
    display: flex !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    width: 100% !important;
    border-radius: 12px !important;
  }
  .navbarbottom.expanded .sidebarbtmacbtns ul {
    display: flex !important;
    width: 100% !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px !important;
    margin: 0 !important;
  }
  .navbarbottom.expanded .sidebarbtmacbtns ul li {
    display: flex !important;
  }
  .navbarbottom.expanded .sidebarbtmacbtns ul li button {
    display: flex !important;
  }

  /* Balance number visible on mobile */
  .navbarbottom.expanded .userprofcont { display: block !important; }
  .navbarbottom.expanded .upcfund {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #8eb69b !important;
  }
  .navbarbottom.expanded .upcname {
    display: block !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  /* Show chevron arrow on profile */
  .navbarbottom.expanded .userprofilecardnew > i {
    display: flex !important;
  }

  /* Sidebar menu takes available space then buttons at bottom */
  .navbarbottom.expanded ul.sidemenu {
    flex: 1 !important;
    overflow-y: auto !important;
    margin-bottom: 8px !important;
  }
}

/* ── PROFILE BAR ── */
@media (max-width: 768px) {
  .prflbar { padding: 12px !important; border-radius: 12px !important; }
  .prflbar h2 { font-size: 16px !important; }
}

/* ── TOP GO-TO BUTTON ── */
@media (max-width: 768px) {
  #topgoTo { width: 40px !important; height: 40px !important; font-size: 14px !important; }
}

/* ── AI CHAT WIDGET ── */
@media (max-width: 520px) {
  #kzp-ai-widget #chatbot-toggler {
    width: 46px !important;
    height: 46px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
  #kzp-ai-widget .chatbot-popup {
    width: 100% !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
}

/* ── FOOTER ── */
@media (max-width: 768px) {
  footer, .footer-top { margin-left: 0 !important; padding: 20px 14px !important; }
  .footer-btm { margin-left: 0 !important; padding: 14px !important; }
}

/* ── MARQUEE (landing) ── */
@media (max-width: 480px) {
  .social-item { margin: 0 14px !important; }
  .social-item i { font-size: 24px !important; }
  .marquee-content { animation-duration: 25s !important; }
}

/* ── NAV PILLS / TABS (new order page) ── */
@media (max-width: 768px) {
  .nav.nav-pills.no-pills { flex-wrap: wrap !important; gap: 6px !important; }
  .nav.nav-pills.no-pills li { flex-shrink: 0; }
  .nav.nav-pills.no-pills li a {
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
  }
}

/* ── GLOBAL INPUT IMPROVEMENTS ── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* ── SERVICE ID BADGE — background always matches number width ── */
.badge.badge-secondary.style-text-primary.badge-rounded {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    width: auto !important;
    white-space: nowrap !important;
    background: rgba(142,182,155,0.15) !important;
    color: #8eb69b !important;
    border: 1px solid rgba(142,182,155,0.3) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

/* ── BOTTOM NAV SPACING — push content above bottom nav ── */
@media (max-width: 991px) {
    body { padding-bottom: 65px !important; }
    /* Chatbot above bottom nav */
    #kzp-ai-widget #chatbot-toggler {
        bottom: 72px !important;
        right: 16px !important;
    }
    /* Support button in navbar — hide on mobile (bottom nav has it) */
    .nav-support-btn { display: none !important; }
}

/* ══ SERVICES PAGE — Mobile Nav Fix ═══════════════════════════ */

/* Top navbar on mobile: ensure it stays contained & doesn't overflow */
@media (max-width: 991px) {
    .usernav.navbar.navbar-fixed-top {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #main-navbar-header {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    /* Logo on mobile — ensure fits */
    .navbar-brand img {
        max-height: 28px !important;
        width: auto !important;
    }
    /* Nav right group buttons — don't overflow */
    .nav-right-group {
        flex-shrink: 0 !important;
        gap: 6px !important;
    }
    /* Sidebar toggle button */
    .sidebarbtn {
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
    }
}

/* ── Services page specific mobile fixes ── */
@media (max-width: 768px) {
    /* Category tabs container — ensure no overflow */
    .sv-cats-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .sv-cats {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Toolbar — full width, stacked */
    .sv-toolbar {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Search fills full width */
    .sv-search {
        width: 100% !important;
        min-width: unset !important;
    }
    .sv-search input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Table card — scroll without breaking layout */
    .sv-table-card {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .sv-table-scroll {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Card grid — full width */
    .sv-card-grid {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Modal — full width on mobile */
    .modal-dialog {
        width: 94% !important;
        margin: 10px auto !important;
        max-width: unset !important;
    }
}

/* ── Tablet portrait (≤900px) ── */
@media (max-width: 900px) {
    .sv-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ── Dashboard page same fixes ── */
@media (max-width: 768px) {
    .db-wrap {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-bottom: 80px !important;
    }
    /* All db cards — prevent overflow */
    .db-card, .db-hero, .db-stats,
    .db-qa-grid, .db-main, .db-left-col,
    .db-right-col, .db-announce {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ══ GLOBAL CUSTOM SCROLLBAR ══════════════════════════════ */

/* ── All scrollable areas ── */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(142,182,155,0.25);
    border-radius: 10px;
    transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(142,182,155,0.55);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Description box — service details ── */
#service_description,
.svc-desc-box,
.panel-body.border-solid,
#neworder_fields .panel-body,
.well .panel-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(142,182,155,0.3) rgba(255,255,255,0.03);
}
#service_description::-webkit-scrollbar,
.svc-desc-box::-webkit-scrollbar,
.panel-body.border-solid::-webkit-scrollbar,
#neworder_fields .panel-body::-webkit-scrollbar {
    width: 4px;
}
#service_description::-webkit-scrollbar-track,
.svc-desc-box::-webkit-scrollbar-track,
.panel-body.border-solid::-webkit-scrollbar-track,
#neworder_fields .panel-body::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
}
#service_description::-webkit-scrollbar-thumb,
.svc-desc-box::-webkit-scrollbar-thumb,
.panel-body.border-solid::-webkit-scrollbar-thumb,
#neworder_fields .panel-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(142,182,155,0.5), rgba(82,183,136,0.3));
    border-radius: 10px;
}
#service_description::-webkit-scrollbar-thumb:hover,
.svc-desc-box::-webkit-scrollbar-thumb:hover,
.panel-body.border-solid::-webkit-scrollbar-thumb:hover,
#neworder_fields .panel-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(142,182,155,0.8), rgba(82,183,136,0.6));
}

/* ── Sidebar scrollbar ── */
.navbarbottom {
    scrollbar-width: thin;
    scrollbar-color: rgba(142,182,155,0.2) transparent;
}
.navbarbottom::-webkit-scrollbar { width: 3px; }
.navbarbottom::-webkit-scrollbar-track { background: transparent; }
.navbarbottom::-webkit-scrollbar-thumb {
    background: rgba(142,182,155,0.2);
    border-radius: 10px;
}
.navbarbottom::-webkit-scrollbar-thumb:hover {
    background: rgba(142,182,155,0.45);
}

/* ── Modal body scrollbar ── */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(142,182,155,0.3) rgba(255,255,255,0.03);
}
.modal-body::-webkit-scrollbar { width: 4px; }
.modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 10px; }
.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(142,182,155,0.4), rgba(82,183,136,0.25));
    border-radius: 10px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(142,182,155,0.7);
}

/* ── Table responsive scroll ── */
.table-responsive::-webkit-scrollbar { height: 5px; }
.table-responsive::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 10px; }
.table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(142,182,155,0.4), rgba(82,183,136,0.3));
    border-radius: 10px;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(142,182,155,0.65); }

/* ── Sub-grid (subscription panel) ── */
.sub-grid::-webkit-scrollbar { width: 4px; }
.sub-grid::-webkit-scrollbar-thumb {
    background: rgba(142,182,155,0.3);
    border-radius: 10px;
}

/* Firefox global */
html { scrollbar-width: thin; scrollbar-color: rgba(142,182,155,0.25) rgba(255,255,255,0.03); }