/* ═══════════════════════════════════════════════
   TheNetSMM — Main Stylesheet
   Strategy: mobile-first, desktop via 900px breakpoint
   Sidebar: position:fixed on desktop (most reliable)
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pink:          #E91E8C;
  --purple:        #7C3AED;
  --purple-dark:   #6B21A8;
  --btn-grad:      linear-gradient(90deg, #7B3FBF 0%, #E91E8C 100%);
  --avatar-grad:   linear-gradient(135deg, #C026D3 0%, #7C3AED 100%);
  --balance-grad:  linear-gradient(135deg, #6B21A8 0%, #9333EA 50%, #C026D3 100%);
  --auth-bg:       linear-gradient(135deg, #5B1AB0 0%, #8B2FC9 40%, #E91E8C 100%);
  --card-shadow:   0 2px 12px rgba(0,0,0,0.07);
  --btn-shadow:    0 6px 20px rgba(124,58,237,0.38);
  --font:          'Nunito', system-ui, sans-serif;
  --sidebar-w:     220px;   /* sidebar width */
  --header-h:      64px;    /* header height on desktop */
}

body { font-family: var(--font); -webkit-font-smoothing: antialiased; }

/* ════════════════════════════════════════════════
   AUTH PAGES
════════════════════════════════════════════════ */
.auth-page { min-height:100vh; background:var(--auth-bg); display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card { background:#fff; border-radius:28px; box-shadow:0 20px 60px rgba(0,0,0,0.22); padding:40px 32px; width:100%; max-width:380px; }
.avatar-wrap { display:flex; justify-content:center; margin-bottom:20px; }
.avatar-circle { width:80px; height:80px; background:var(--avatar-grad); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(124,58,237,0.38); }
.avatar-circle svg { width:40px; height:40px; fill:white; }
.auth-title { font-size:2rem; font-weight:900; color:#111827; text-align:center; margin-bottom:28px; }
.auth-subtitle { font-size:0.875rem; color:#9CA3AF; text-align:center; line-height:1.6; margin-top:-16px; margin-bottom:28px; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:0.875rem; font-weight:700; color:#374151; margin-bottom:8px; }
.input-wrap { display:flex; align-items:center; gap:12px; background:#F9FAFB; border:1.5px solid #E5E7EB; border-radius:16px; padding:14px 16px; transition:border-color .2s,background .2s; }
.input-wrap:focus-within { border-color:#9333EA; background:#fff; }
.input-wrap svg { flex-shrink:0; width:20px; height:20px; fill:#A78BFA; }
.input-wrap input { flex:1; border:none; background:transparent; outline:none; font-size:0.9rem; font-weight:600; font-family:var(--font); color:#374151; }
.input-wrap input::placeholder { color:#9CA3AF; font-weight:500; }
.eye-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; color:#9CA3AF; }
.eye-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; }
.forgot-link-wrap { text-align:right; margin-top:8px; }
.forgot-link { font-size:0.875rem; font-weight:700; color:#7C3AED; text-decoration:none; }
.forgot-link:hover { color:#E91E8C; }
.btn-primary { width:100%; padding:16px; border:none; border-radius:16px; background:var(--btn-grad); color:#fff; font-size:1rem; font-weight:800; font-family:var(--font); cursor:pointer; box-shadow:var(--btn-shadow); transition:opacity .2s,transform .1s; margin-top:8px; }
.btn-primary:hover { opacity:.91; }
.btn-primary:active { transform:scale(0.97); }
.btn-primary:disabled { opacity:.55; cursor:not-allowed; }
.auth-footer { text-align:center; font-size:0.875rem; color:#6B7280; font-weight:500; margin-top:24px; }
.auth-footer a { color:#7C3AED; font-weight:800; text-decoration:none; }
.auth-footer a:hover { color:#E91E8C; }
.alert { padding:12px 16px; border-radius:12px; font-size:0.875rem; font-weight:700; text-align:center; margin-bottom:16px; display:none; }
.alert.show { display:block; }
.alert-error   { background:#FEF2F2; border:1.5px solid #FECACA; color:#DC2626; }
.alert-success { background:#F0FDF4; border:1.5px solid #BBF7D0; color:#16A34A; }
.spinner { display:inline-block; width:18px; height:18px; border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:_spin .7s linear infinite; vertical-align:middle; margin-right:8px; }
@keyframes _spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════════════
   DASHBOARD — MOBILE BASE
   (max-width constraint removed; applied only <1024)
════════════════════════════════════════════════ */

/* Page root */
.dash-page { background:#F3F4F6; min-height:100vh; font-family:var(--font); }

/* ── Header ────────────────────────────────────── */
.dash-header { background:#fff; box-shadow:0 1px 0 #E5E7EB; position:sticky; top:0; z-index:100; padding:14px 16px 12px; }

.balance-card { background:var(--balance-grad); border-radius:18px; padding:10px 14px; display:flex; align-items:center; gap:8px; box-shadow:0 4px 16px rgba(107,33,168,0.42); cursor:pointer; }
.balance-card svg.wallet-icon { width:20px; height:20px; fill:rgba(255,255,255,0.82); flex-shrink:0; }
.balance-card .bal-text { flex:1; }
.balance-card .bal-amount { font-size:1rem; font-weight:900; color:#fff; line-height:1; }
.balance-card .bal-label { font-size:0.7rem; color:rgba(255,255,255,0.7); margin-top:2px; }
.balance-card .chevron svg { width:14px; height:14px; fill:none; stroke:rgba(255,255,255,0.7); stroke-width:2.5; }

.user-avatar-sm { width:44px; height:44px; background:var(--avatar-grad); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 12px rgba(124,58,237,0.32); }
.user-avatar-sm svg { width:24px; height:24px; fill:white; }
.user-info { flex:1; }
.user-info .greeting { font-size:0.75rem; color:#9CA3AF; line-height:1; margin-bottom:3px; }
.user-info .username { display:flex; align-items:center; gap:5px; font-size:0.9rem; font-weight:800; color:#111827; }
.verified-badge { width:16px; height:16px; background:#EF4444; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.verified-badge svg { width:10px; height:10px; fill:white; }

.hamburger-btn { background:none; border:none; cursor:pointer; padding:6px; border-radius:10px; flex-shrink:0; }
.hamburger-btn svg { width:26px; height:26px; fill:none; stroke:#374151; stroke-width:2.5; stroke-linecap:round; }

/* ── Stat Cards ─────────────────────────────────── */
.stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 14px 0; }
.stat-card { background:#fff; border-radius:20px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:var(--card-shadow); }
.stat-icon { width:44px; height:44px; background:#F5F3FF; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.stat-icon svg { width:22px; height:22px; fill:#7C3AED; }
.stat-icon svg.stroke-icon { fill:none; stroke:#7C3AED; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stat-label { font-size:0.7rem; font-weight:800; color:#7C3AED; text-align:center; line-height:1.2; }
.stat-value { font-size:0.75rem; font-weight:800; color:#111827; text-align:center; }
.stat-sub   { font-size:0.65rem; color:#9CA3AF; text-align:center; }
.stat-btn { width:32px; height:32px; background:var(--btn-grad); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(124,58,237,0.38); cursor:pointer; border:none; }
.stat-btn svg { width:15px; height:15px; fill:none; stroke:white; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.stat-btn svg.fill-icon { fill:white; stroke:none; }

/* ── Services Card ───────────────────────────────── */
.services-wrap { padding:14px 14px 0; }
.services-card { background:#fff; border-radius:24px; padding:20px 16px; box-shadow:var(--card-shadow); }
.services-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.services-header h2 { font-size:1.4rem; font-weight:900; color:#111827; }
.view-all-btn { display:flex; align-items:center; gap:3px; font-size:0.85rem; font-weight:700; color:#7C3AED; background:none; border:none; cursor:pointer; }
.view-all-btn:hover { color:#E91E8C; }
.view-all-btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.5; }
.search-bar { display:flex; align-items:center; gap:12px; background:#F9FAFB; border:1.5px solid #E5E7EB; border-radius:16px; padding:12px 14px; margin-bottom:18px; }
.search-bar svg { width:18px; height:18px; fill:none; stroke:#9CA3AF; stroke-width:2; flex-shrink:0; }
.search-bar input { flex:1; border:none; background:transparent; outline:none; font-size:0.85rem; font-weight:600; font-family:var(--font); color:#374151; }
.search-bar input::placeholder { color:#9CA3AF; font-weight:500; }
.filter-btn { background:none; border:none; cursor:pointer; display:flex; }
.filter-btn svg { width:18px; height:18px; fill:none; stroke:#9CA3AF; stroke-width:2; }
.popular-label { display:flex; align-items:center; gap:6px; margin-bottom:16px; font-size:0.85rem; font-weight:800; color:#374151; }
.social-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.social-item { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; transition:transform .15s; }
.social-item:hover { transform:scale(1.08); }
.social-icon-wrap { width:100%; aspect-ratio:1; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#f4f4f8; box-shadow:0 1px 6px rgba(0,0,0,0.07); overflow:hidden; }
.social-icon-wrap svg { width:58%; height:58%; }
.social-name { font-size:0.75rem; font-weight:700; color:#4B5563; text-align:center; line-height:1.2; }

/* ── Home split: block on mobile, flex on desktop (via @media) ── */
.home-split { display: block; }
.order-row  { display: block; }

/* ── Bottom Nav ──────────────────────────────────── */
/* ── Bottom Navigation (Mobile) ─────────────────────────── */
/* ════════════════════════════════════════════════
   BOTTOM NAVIGATION — Mobile App Style
════════════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  border-top: 1.5px solid #F0F0F5;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.09), 0 -1px 4px rgba(0,0,0,0.04);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: flex-end;
  justify-items: center;       /* equal centered cells */
  padding: 8px 0 max(16px, env(safe-area-inset-bottom));
  min-height: 70px;
}
/* Each nav cell takes full column width and centers content */
.bottom-nav > * { width: 100%; }
.bottom-nav > div { display: flex; align-items: flex-end; justify-content: center; }

/* Regular nav items */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 4px 0;
  min-height: 54px;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.nav-item:active { opacity: 0.7; }

/* Icons */
.nav-item svg {
  width: 26px;
  height: 26px;
  fill: #B0B0C0;
  transition: fill 0.18s;
  flex-shrink: 0;
}

/* Labels */
.nav-item span {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font);
  color: #B0B0C0;
  transition: color 0.18s;
  white-space: nowrap;
  line-height: 1;
}

/* Active state — purple */
.nav-item.active svg  { fill: #7C3AED; }
.nav-item.active span { color: #7C3AED; font-weight: 800; }

/* ── Center "New Order" — elevated circle ── */
.nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  cursor: pointer;
  background: none;
  border: none;
  margin-top: -26px;
  padding-bottom: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.nav-center-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #8B2FD0 0%, #C026D3 55%, #E91E8C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* White ring + glow */
  box-shadow:
    0 0 0 3px #ffffff,
    0 4px 20px rgba(124,58,237,0.50),
    0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-center:active .nav-center-circle {
  transform: scale(0.91);
  box-shadow: 0 0 0 3px #ffffff, 0 2px 10px rgba(124,58,237,0.40);
}

.nav-center-circle svg { width: 27px; height: 27px; fill: white; }

.nav-center span {
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--font);
  color: #B0B0C0;
  line-height: 1;
  white-space: nowrap;
}

/* ── Sidebar Overlay ──────────────────────────────── */
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:199; opacity:0; pointer-events:none; transition:opacity .3s; }
.sidebar-overlay.open { opacity:1; pointer-events:auto; }

/* ── Sidebar (Mobile: slide-in drawer) ───────────────── */
.sidebar {
  position: fixed;
  /* relative for absolute children like collapse btn */
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100%;
  background: #fff;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  padding: 48px 16px 24px;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.sidebar-user { padding: 6px 0 16px; border-bottom: 1px solid #F3F4F6; margin-bottom: 6px; }
.sidebar-user-inner { display:flex; align-items:center; gap:12px; }
.sidebar-avatar { width:54px; height:54px; background:var(--avatar-grad); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sidebar-avatar svg { width:28px; height:28px; fill:white; }
.sidebar-name { font-size:0.95rem; font-weight:900; color:#111827; }
.sidebar-email { font-size:0.73rem; color:#9CA3AF; margin-top:2px; }

.sidebar-nav a, .sidebar-nav button {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:12px 10px; margin-bottom:2px;
  border-radius:12px; border:none; background:none;
  font-size:0.88rem; font-weight:700; font-family:var(--font);
  color:#374151; text-decoration:none; cursor:pointer;
  transition:background .15s,color .15s; text-align:left;
}
.sidebar-nav a:hover, .sidebar-nav button:hover { background:#F5F3FF; color:#7C3AED; }
.sidebar-nav .nav-icon { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sidebar-nav .nav-icon svg { width:22px; height:22px; fill:#6B7280; }
.sidebar-nav a:hover .nav-icon svg, .sidebar-nav button:hover .nav-icon svg { fill:#7C3AED; }
.sidebar-nav .nav-active-item { background:#EDE9FE; color:#7C3AED; }
.sidebar-nav .nav-active-item .nav-icon svg { fill:#7C3AED; }
.sidebar-nav .logout-btn { color:#374151; }
.sidebar-nav .logout-btn:hover { background:#FEF2F2; color:#EF4444; }
.sidebar-nav .logout-btn:hover .nav-icon svg { fill:#EF4444; }

/* ════════════════════════════════════════════════
   MOBILE ONLY (<900px)
════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .dash-page { max-width:430px; margin:0 auto; }
  /* bottom-nav: full width on mobile, no cap */
  /* Space for bottom nav */
  .services-wrap { padding-bottom:90px; }
  .order-section  { padding-bottom:90px; }
}

/* ════════════════════════════════════════════════
   DESKTOP (≥900px)
   Strategy: sidebar = position:fixed + dash-main = margin-left
════════════════════════════════════════════════ */
@media (min-width: 900px) {

  /* ── Full-width page, no mobile cap ── */
  .dash-page { max-width:none; margin:0; }

  /* ── Header: single row, full width ── */
  .dash-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
  }
  .header-row1 { display:flex; align-items:center; gap:12px; margin-bottom:0; flex:1; }
  .header-logo { font-size:1.4rem; }
  .header-row2 { display:flex; align-items:center; flex-shrink:0; }
  .hd-user { display:none; }         /* sidebar shows user info on desktop */
  .balance-card { padding:10px 14px; border-radius:18px; }  /* restore normal size */
  .balance-card .bal-amount { font-size:1rem; }
  .balance-card .bal-label  { font-size:0.7rem; }
  .hamburger-btn { display:none; }   /* sidebar always open; shown again when sidebar is collapsed */

  /* ── Sidebar: FIXED left panel, always visible ── */
  .sidebar {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    transform: none !important;   /* override mobile slide-out */
    height: calc(100vh - var(--header-h)) !important;
    border-right: 1px solid #E5E7EB;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 50;
    overflow-y: auto;
    background: #fff !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  }
  .sidebar-overlay { display:none !important; }

  /* ── dash-body / dash-main: main content shifts right by 60px ── */
  .dash-body { display:block; }    /* no flex needed; sidebar is fixed */
  .tab-section { margin-left:0 !important; }

  /* Hide mobile-only elements */
  .bottom-nav { display:none !important; }

  /* ── Stat Cards: 3 equal columns, clean spacing ── */
  .stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 18px 20px 0;
  }
  .stat-card { padding:18px 14px; gap:10px; border-radius:22px; }
  .stat-icon { width:50px; height:50px; }
  .stat-icon svg { width:24px; height:24px; }
  .stat-label { font-size:0.8rem; }
  .stat-value { font-size:0.9rem; }
  .stat-sub   { font-size:0.75rem; }

  /* ── Home tab: 2-column split ── */
  .home-split {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px 40px;
  }

  /* Services column: 1.5× width */
  .services-wrap {
    flex: 1.5;
    min-width: 0;
    padding: 0 !important;   /* remove mobile padding */
  }
  .services-card { padding: 24px 22px; }
  /* Bigger icons on desktop — fills space proportionally */
  .social-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
    margin-top: 8px;
  }
  .social-icon-wrap {
    width: 100% !important;
    aspect-ratio: 1 !important;
    height: auto !important;
    max-width: 95px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #F3F4F6;
    transition: all .18s;
  }
  .social-icon-wrap svg {
    width: 50% !important;
    height: 50% !important;
  }
  .social-item:hover .social-icon-wrap {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(124,58,237,0.12);
  }
  .social-name { font-size: 0.85rem; font-weight: 700; color: #374151; }
  .social-item { gap: 10px !important; }
  .popular-label { font-size: 0.95rem !important; margin-bottom: 18px !important; }

  /* Order form column: 1× width */
  #orderSection {
    flex: 1;
    min-width: 0;
    padding: 0 !important;
  }
  #orderSection .order-section-title { padding-top:0; }

  /* Order form inner: avg+qty and link+charge side by side */
  .order-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .order-row .order-group { margin-bottom: 0; }

  /* Placeholder tabs full height */
  .placeholder-tab { min-height:calc(100vh - var(--header-h)); }
  #tab-funds .funds-page { min-height:calc(100vh - var(--header-h)); }
  #tab-profile .profile-page { min-height:calc(100vh - var(--header-h)); }
  #tab-change-pw .chpw-page { min-height:calc(100vh - var(--header-h)); }


  /* tab-terms is outside dash-main → add same margin manually */
  #tab-terms { margin-left: 66px !important; transition: margin-left .25s ease; }
  body.sidebar-desktop-hidden #tab-terms { margin-left: 0 !important; }
} /* end @media 900px */

/* ── Wide screens 1440px+ ── */
@media (min-width: 1440px) {
  :root { --sidebar-w: 240px; }
  .stat-cards { padding:20px 28px 0; gap:18px; }
  .home-split { padding:18px 28px 50px; gap:22px; }
}

/* ════════════════════════════════════════════════
   MOBILE ONLY — max 600px
   Tight spacing to match reference design
════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Header ── */
  .dash-header { padding: 12px 14px 10px; }
  .header-row1 { margin-bottom: 10px; }
  .header-logo { font-size: 1.4rem; }
  .hd-avatar   { width: 54px; height: 54px; }
  .hd-avatar svg { width: 30px; height: 30px; }
  .hd-user-info .greeting  { font-size: 0.72rem; }
  .hd-user-info .username  { font-size: 0.9rem; }
  .balance-card { padding: 10px 13px; border-radius: 18px; }
  .balance-card .bal-amount { font-size: 1rem; }
  .balance-card .bal-label  { font-size: 0.67rem; }
  .balance-card svg.wallet-icon { width: 18px; height: 18px; }

  /* ── Stat cards: 3 compact cards in a row ── */
  .stat-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 12px 0;
  }
  .stat-card   { padding: 12px 6px; gap: 5px; border-radius: 16px; }
  .stat-icon   { width: 36px; height: 36px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-label  { font-size: 0.62rem; }
  .stat-value  { font-size: 0.68rem; }
  .stat-sub    { font-size: 0.58rem; }
  .stat-btn    { width: 26px; height: 26px; }
  .stat-btn svg { width: 12px; height: 12px; }

  /* ── Services wrap ── */
  .services-wrap { padding: 10px 12px 0; }
  .services-card { padding: 14px 12px; border-radius: 20px; }
  .services-header { margin-bottom: 10px; }
  .services-header h2 { font-size: 1.25rem; }
  .view-all-btn { font-size: 0.8rem; }

  /* Search bar */
  .search-bar { padding: 10px 12px; border-radius: 14px; margin-bottom: 12px; }
  .search-bar svg { width: 16px; height: 16px; }
  .search-bar input { font-size: 0.8rem; }

  /* Popular label */
  .popular-label { margin-bottom: 12px; font-size: 0.8rem; }

  /* Social icons grid: 5 columns, auto-fit ── */
  .social-grid { gap: 8px; }
  .social-icon-wrap { border-radius: 14px; }
  .social-name { font-size: 0.62rem; margin-top: 1px; }
  .social-item { gap: 4px; }

  /* ── All Categories / Order section ── */
  .order-section { padding: 10px 12px 80px; }
  .order-section-title { padding: 10px 0 8px; font-size: 0.95rem; }
  .ost-icon { width: 32px; height: 32px; }
  .ost-icon svg { width: 16px; height: 16px; }
  .order-card { padding: 14px 12px; border-radius: 16px; }
  .order-group { margin-bottom: 10px; }
  .order-label { font-size: 0.82rem; margin-bottom: 5px; }

  .order-search,
  .order-input,
  .qty-wrap,
  .order-select   { padding: 10px 11px; border-radius: 10px; }
  .order-search svg,
  .order-input svg,
  .qty-wrap svg.qty-icon { width: 16px; height: 16px; }
  .order-search input,
  .order-input input,
  .qty-wrap input { font-size: 0.82rem; }
  .select-dropdown-item { padding: 10px 12px; font-size: 0.82rem; }
  .select-dropdown { max-height: 50vh; overflow-y: auto; overflow-x: hidden; z-index: 10000; }

  .order-info-box { padding: 10px 12px; border-radius: 10px; }
  .order-info-box svg { width: 18px; height: 18px; }
  .order-info-box span { font-size: 0.82rem; }
  .charge-box  { padding: 10px 12px; border-radius: 10px; }
  .charge-amount { font-size: 1.15rem; }
  .charge-icon   { width: 32px; height: 32px; }
  .qty-hint { font-size: 0.68rem; }

  .order-submit { padding: 13px; border-radius: 12px; font-size: 0.95rem; }
  .order-row { gap: 8px; }

  /* ── Bottom nav ≤600px ── */
  .bottom-nav { min-height: 66px; }
  .nav-item { min-height: 50px; }
  .nav-item svg  { width: 24px; height: 24px; }
  .nav-item span { font-size: 0.65rem; }
  .nav-center { margin-top: -24px; }
  .nav-center-circle { width: 54px; height: 54px; }
  .nav-center-circle svg { width: 25px; height: 25px; }
  .nav-center span { font-size: 0.65rem; }

} /* end max-width 600px */

/* ════════════════════════════════════════════════
   DESKTOP SIDEBAR COLLAPSE
════════════════════════════════════════════════ */
/* Sidebar close (mobile only) */
.sidebar-close-mobile {
  display: block;
  position: absolute; top: 14px; right: 14px;
  border: none; background: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  color: #6B7280; font-size: 1.3rem; line-height: 1; z-index: 1;
}

/* Sidebar collapse toggle (desktop only) - placed at TOP-LEFT corner */
.sidebar-collapse-btn {
  display: none;  /* hidden on mobile */
  position: absolute; top: 10px; left: 10px;
  width: 28px; height: 28px;
  border: 1.5px solid #E5E7EB; border-radius: 7px;
  background: #F9FAFB; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 2;
}
.sidebar-collapse-btn:hover { background: #EDE9FE; }
.sidebar-collapse-btn svg { width: 16px; height: 16px; stroke: #6B7280; }

@media (min-width: 900px) {
  .sidebar-close-mobile { display: none !important; } /* hide X on desktop */
  .sidebar-collapse-btn { display: flex; }

  /* ── Sidebar is ALWAYS icons-only (60px), no text labels ── */
  .sidebar {
    width: 60px !important;
    padding: 48px 8px 14px !important;  /* top space for the toggle button */
    overflow: hidden !important;
  }
  .sidebar-user { display: none !important; }
  .sidebar-nav a,
  .sidebar-nav button {
    justify-content: center !important;
    padding: 12px 8px !important;
    gap: 0 !important;
    font-size: 0 !important;          /* hide text labels (Home, Add Funds, etc.) */
  }
  .sidebar-nav .nav-icon { width: 26px; height: 26px; }
  .sidebar-nav .nav-icon svg { width: 26px; height: 26px; }

  /* ── Main content shifts right by 60px (the icon rail width) ── */
  .dash-main { margin-left: 60px !important; }

  /* ── Collapsed state: hide sidebar entirely, main content goes full-width ── */
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%) !important;
  }
  body.sidebar-collapsed .dash-main { margin-left: 0 !important; }
  /* Show hamburger in header so user can reopen the sidebar */
  body.sidebar-collapsed .hamburger-btn {
    display: inline-flex !important;
  }
  body.sidebar-collapsed .dash-header { padding-left: 24px; }
}

/* Orders filter tabs — responsive */
.order-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.order-tab-btn {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:10px;
  border:1.5px solid #E5E7EB; background:#fff;
  font-size:.82rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:.15s;
}
.order-tab-btn.active { background:#7C3AED; color:#fff; border-color:#7C3AED; }
.order-tab-btn:not(.active):hover { background:#F5F3FF; border-color:#7C3AED; color:#7C3AED; }

@media (min-width: 900px) {
  /* Orders filter — ensure visible and scrollable on desktop */
  .of-row {
    padding: 12px 20px 14px;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .of-card {
    flex: 0 0 auto;
    min-width: 80px;
  }
  /* Orders page top bar */
  .orders-page { padding: 0; }
}

/* ════════════════════════════════════════════════
   TABLET 601-899px (iPad portrait)
════════════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 899px) {
  .home-split {
    display: block !important;
    padding: 14px 18px 40px;
  }
  .services-wrap { padding: 0 !important; margin-bottom: 14px; }
  #orderSection { padding: 0 !important; }
  /* No extra height filler */
  .services-card { min-height: auto !important; }
}