/* ── SWATIN POS — iOS Premium UI v3 ── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600&display=swap');

:root {
  /* ── Core palette ── */
  --sp-black:   #111110;
  --sp-white:   #ffffff;
  --sp-off:     #f7f6f4;
  --sp-canvas:  #fafaf9;

  /* ── Neutrals (warm stone scale) ── */
  --sp-g30:     #f4f3f1;
  --sp-g50:     #eeecea;
  --sp-g100:    #e5e3df;
  --sp-g200:    #cbc8c2;
  --sp-g300:    #b0ada6;
  --sp-g400:    #918e87;
  --sp-g500:    #706d67;
  --sp-g600:    #504e49;

  /* ── Sidebar ── */
  --sp-sidebar-bg:    #141413;
  --sp-sidebar-hover: rgba(255,255,255,0.07);
  --sp-sidebar-active:rgba(255,255,255,0.12);
  --sp-sidebar-icon:  rgba(255,255,255,0.58);
  --sp-sidebar-icon-active: #ffffff;
  --sp-accent:  #c9a84c;   /* warm gold — luxury retail */
  --sp-accent2: #b8974a;

  /* ── Semantic ── */
  --sp-green:   #15803d;
  --sp-green-bg:#f0fdf4;
  --sp-red:     #b91c1c;
  --sp-red-bg:  #fef2f2;
  --sp-amber:   #92400e;
  --sp-blue:    #1d4ed8;

  /* ── Layout ── */
  --sp-sidebar: 80px;
  --sp-bill:    384px;
  --sp-top:     58px;
  --sp-radius:  8px;
  --sp-radius-lg:12px;
  --sp-radius-xl:16px;

  /* ── Motion ── */
  --sp-trans:       all 0.18s cubic-bezier(0.4,0,0.2,1);
  --sp-spring:      all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  --sp-spring-fast: all 0.14s cubic-bezier(0.34,1.56,0.64,1);
  --sp-ease:        all 0.2s cubic-bezier(0.4,0,0.2,1);

  /* ── Shadows ── */
  --sp-shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --sp-shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --sp-shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --sp-shadow-lg: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  --sp-shadow-xl: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.10);
}

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

html, body {
  margin:0 !important; padding:0 !important;
  height:100% !important; overflow:hidden !important;
}

#wpadminbar { display:none !important; }
html { margin-top:0 !important; }
/* Hide WP accessibility & skip links on POS */
.skip-link, .screen-reader-shortcut, #wp-toolbar,
a[href="#wp-toolbar"], a[href="#content"], a[href="#primary"],
.screen-reader-text:focus, .skip-link:focus,
input.skip-link { display:none !important; opacity:0 !important; }
.site-header,.site-footer,.entry-header,header.site-header,
footer.site-footer,.header-global,nav.main-nav,
.wp-site-blocks>header,.wp-site-blocks>footer { display:none !important; }

#swatin-pos-app {
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex;
  font-family:'Oswald',sans-serif;
  font-weight:300;
  font-size:14px;
  background:var(--sp-canvas);
  color:var(--sp-black);
  overflow:hidden;
}

/* ══════════════════════════════════════════
   SIDEBAR — iOS Premium v3
══════════════════════════════════════════ */
.sp-sidebar {
  width: var(--sp-sidebar);
  background: var(--sp-sidebar-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  z-index: 100;
  overflow: visible;
  position: relative;
  box-shadow: 1px 0 0 rgba(255,255,255,0.04), 2px 0 16px rgba(0,0,0,0.3);
}

.sp-sidebar-logo {
  width: 100%; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.sp-sidebar-logo img {
  width: 44px; height: 44px; border-radius: 12px;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.12);
  transition: var(--sp-spring);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.sp-sidebar-logo img:hover {
  border-color: var(--sp-accent);
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 3px rgba(201,168,76,0.2);
}
.sp-logo-fallback {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; letter-spacing: 1px; font-weight: 500;
}

.sp-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 1px;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  width: 100%;
}
.sp-nav::-webkit-scrollbar { display: none; }

.sp-sidebar-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 12px;
  gap: 1px;
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sp-nav-item {
  width: 64px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.15s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.16s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}
.sp-nav-item:hover {
  background: var(--sp-sidebar-hover);
  color: rgba(255,255,255,0.90);
  transform: scale(1.07);
}
.sp-nav-item:active {
  transform: scale(0.91) !important;
  background: rgba(255,255,255,0.16);
  transition: transform 0.08s ease, background 0.08s ease;
}
.sp-nav-item.active {
  background: var(--sp-sidebar-active);
  color: #fff;
  transform: scale(1.0);
}
.sp-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  background: var(--sp-accent);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px rgba(201,168,76,0.7), 0 0 24px rgba(201,168,76,0.25);
  animation: sp-pill-in 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes sp-pill-in {
  from { height: 0; opacity: 0; }
  to   { height: 20px; opacity: 1; }
}
.sp-nav-item.active svg {
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.4));
}
.sp-nav-item svg {
  width: 20px; height: 20px;
  transition:
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
    filter 0.18s ease;
  flex-shrink: 0;
}
.sp-nav-item:hover svg { transform: scale(1.15) translateY(-1px); }
.sp-nav-item span {
  font-size: 7.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  opacity: 0.8;
}
.sp-nav-item.active span { opacity: 1; color: #fff; }
.sp-nav-item:hover span { opacity: 1; }

/* ── NAV FLYOUT SUBMENU (Billing / Customers) ──
   FIX v3.54: originally had zero CSS at all — the markup rendered with no
   styling, dumping every flyout row inline into the sidebar's normal flow.
   FIX v3.55: a pure CSS :hover version still got clipped, because .sp-nav
   has overflow-y:auto — per spec, that silently forces its overflow-x to
   "auto" too (browsers convert a "visible" axis to "auto" the moment the
   other axis isn't visible), clipping anything that pokes out sideways.
   JS now re-parents the flyout to <body> and positions it with fixed
   coordinates on hover, so it fully escapes that clipping. */
.sp-nav-flyout {
  position: fixed;
  min-width: 190px;
  background: #1c1c1a;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 999990;
}
.sp-nav-flyout.sp-flyout-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sp-flyout-head {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sp-accent);
  padding: 8px 12px 6px;
}
.sp-flyout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.sp-flyout-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sp-flyout-ct {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}
.sp-flyout-item:hover .sp-flyout-ct { color: rgba(255,255,255,0.65); }


/* ══════════════════════════════════════════
   MAIN
══════════════════════════════════════════ */
.sp-main { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* ── TOPBAR ── */
.sp-topbar {
  height:var(--sp-top);
  background:var(--sp-canvas);
  border-bottom:1px solid var(--sp-g100);
  display:flex; align-items:center;
  padding:0 22px; gap:16px;
  flex-shrink:0;
  box-shadow: 0 1px 0 var(--sp-g100), 0 2px 8px rgba(0,0,0,0.04);
}
.sp-topbar-left { flex:1; min-width:0; }
.sp-topbar-title {
  font-size:15px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--sp-black); line-height:1;
}
.sp-topbar-sub {
  font-size:10px; color:var(--sp-g400);
  margin-top:3px; letter-spacing:0.5px;
}

.sp-topbar-actions { display:flex; gap:8px; align-items:center; }

.sp-action-btn {
  height:36px; padding:0 14px;
  border:1px solid var(--sp-g100);
  border-radius:20px;
  background:var(--sp-white);
  cursor:pointer;
  font-family:'Oswald',sans-serif;
  font-size:10.5px; font-weight:400;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--sp-g600);
  display:flex; align-items:center; gap:7px;
  transition:var(--sp-trans);
  white-space:nowrap;
  box-shadow:var(--sp-shadow-xs);
}
.sp-action-btn svg { width:15px; height:15px; flex-shrink:0; }
.sp-action-btn:hover,
.sp-action-btn.active {
  background:var(--sp-black);
  color:#fff; border-color:var(--sp-black);
}

.sp-held-badge {
  background:var(--sp-red); color:#fff;
  border-radius:50%; width:17px; height:17px;
  font-size:9px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:500;
}

.sp-topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.sp-icon-btn {
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--sp-g100); background:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--sp-g600);
  transition:var(--sp-trans);
}
.sp-icon-btn:hover { background:var(--sp-g50); color:var(--sp-black); }

.sp-user-chip {
  display:flex; align-items:center; gap:9px;
  padding:5px 12px 5px 5px;
  border:1px solid var(--sp-g100); border-radius:24px;
  background:var(--sp-white); cursor:pointer;
  transition:var(--sp-trans);
}
.sp-user-chip:hover { border-color:var(--sp-g200); }
.sp-user-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--sp-black); color:#fff;
  font-size:11px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:0.5px;
}
.sp-user-name { font-size:12px; font-weight:500; line-height:1.2; }
.sp-user-role { font-size:9px; color:var(--sp-g400); letter-spacing:0.3px; }

/* ══════════════════════════════════════════
   CONTENT
══════════════════════════════════════════ */
.sp-content { flex:1; overflow:hidden; display:flex; }
.sp-tab-content { display:none; flex:1; }
.sp-tab-content.active { display:flex; }
#sp-tab-pos.active { flex-direction:row; }

/* ══════════════════════════════════════════
   PRODUCTS PANEL
══════════════════════════════════════════ */
.sp-products-panel {
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  padding:18px 18px 14px;
  gap:14px; overflow:hidden;
  background:var(--sp-canvas);
}

/* Bill mode tabs */
.sp-bill-tabs {
  display:flex; gap:0;
  border-bottom:1px solid var(--sp-g100);
  align-self:flex-start;
  margin-bottom:2px;
}
.sp-bill-tab {
  padding:7px 20px;
  font-family:'Oswald',sans-serif;
  font-size:11px; font-weight:400;
  letter-spacing:1.2px; text-transform:uppercase;
  border:none; background:none; cursor:pointer;
  color:var(--sp-g400);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:var(--sp-trans);
}
.sp-bill-tab:hover { color:var(--sp-black); }
.sp-bill-tab.active { color:var(--sp-black); border-bottom-color:var(--sp-black); font-weight:500; }

/* Search */
.sp-search-row { display:flex; gap:8px; }
.sp-search-wrap { flex:1; position:relative; }
.sp-search-icon {
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  width:16px; height:16px; color:var(--sp-g400);
  pointer-events:none;
}
.sp-search-input {
  width:100%; height:42px; padding:0 14px 0 40px;
  border:1.5px solid var(--sp-g100); border-radius:10px;
  background:var(--sp-white);
  font-family:'Oswald',sans-serif; font-size:14px; font-weight:300;
  color:var(--sp-black); outline:none;
  transition:var(--sp-trans);
  box-shadow:var(--sp-shadow-xs);
}
.sp-search-input:focus { border-color:var(--sp-g400); box-shadow:0 0 0 3px rgba(17,17,16,0.07); }
.sp-search-input::placeholder { color:var(--sp-g400); }

/* Categories */
.sp-cats {
  display:flex; gap:6px; flex-wrap:wrap;
  align-items:center;
}
.sp-cat {
  padding:6px 16px; border-radius:20px;
  border:1.5px solid var(--sp-g100); background:var(--sp-white);
  font-family:'Oswald',sans-serif; font-size:10.5px;
  font-weight:400; letter-spacing:0.8px; text-transform:uppercase;
  cursor:pointer; color:var(--sp-g500);
  transition:var(--sp-spring-fast);
  box-shadow:var(--sp-shadow-xs);
}
.sp-cat:hover { border-color:var(--sp-g400); color:var(--sp-black); transform:scale(1.03); }
.sp-cat.active { background:var(--sp-black); color:#fff; border-color:var(--sp-black); box-shadow:0 2px 8px rgba(17,17,16,0.2); transform:scale(1.03); }
.sp-cat-count { font-size:11px; color:var(--sp-g400); margin-left:auto; }

/* ── PRODUCT GRID ── */
.sp-product-grid {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  /* FIX v3.53: bare "auto" row tracks, combined with flex:1 (definite cross
     size) + overflow-y:auto, made Chrome compress every row to fit the
     container instead of sizing to content — this is what squashed every
     product card down to ~69px (image + text all clipped/invisible).
     min-content forces rows back to their natural, content-based height. */
  grid-auto-rows:min-content;
  gap:10px; overflow-y:auto; flex:1;
  align-content:start;
  scrollbar-width:thin; scrollbar-color:var(--sp-g200) transparent;
  padding-right:4px;
}
/* v3.54: optional denser 6-per-row layout, toggled from the topbar */
.sp-product-grid.sp-grid-6 { grid-template-columns:repeat(6, 1fr); }

/* ── PRODUCT CARD ── */
.sp-product-card {
  background:var(--sp-white);
  border:1px solid var(--sp-g100);
  border-radius:var(--sp-radius-lg);
  cursor:pointer; overflow:hidden;
  position:relative;
  display:flex; flex-direction:column;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s ease,
              border-color 0.18s ease;
  box-shadow:var(--sp-shadow-xs);
}
.sp-product-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.10);
  border-color:rgba(0,0,0,0.14);
}
.sp-product-card.in-cart { border:2px solid #111; box-shadow:0 0 0 2px rgba(0,0,0,0.08); }
.sp-product-card:active { transform:scale(0.97) !important; transition:transform 0.08s ease !important; }

/* Eye button — always visible on hover */
.sp-prod-eye-btn {
  position:absolute; top:8px; right:8px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(0,0,0,0.1);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:10;
  opacity:0;
  transition:var(--sp-trans);
  backdrop-filter:blur(6px);
  color:#111110;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.sp-prod-eye-btn svg { width:15px; height:15px; stroke:currentColor; }
.sp-product-card:hover .sp-prod-eye-btn { opacity:1; }
#swatin-pos-app .sp-prod-eye-btn { color:#111110 !important; }
#swatin-pos-app .sp-prod-eye-btn:hover {
  background:var(--sp-black) !important;
  color:#fff !important;
  border-color:var(--sp-black) !important;
  transform:scale(1.08);
}

.sp-prod-cart-badge {
  position:absolute; top:8px; left:8px;
  width:22px; height:22px; border-radius:50%;
  background:var(--sp-black); color:#fff;
  font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}

.sp-prod-img {
  width:100%; aspect-ratio:1;
  background:var(--sp-g50);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  border-bottom:1px solid var(--sp-g100);
}
.sp-prod-img img { width:100%; height:100%; object-fit:contain; padding:6px; transition:transform 0.3s ease; }
.sp-product-card:hover .sp-prod-img img { transform:scale(1.03); }
.sp-prod-img-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  background:linear-gradient(160deg, var(--sp-g30) 0%, var(--sp-g50) 100%);
  color:var(--sp-g300);
}
.sp-prod-img-placeholder svg { opacity:0.85; }
.sp-prod-img-placeholder span {
  font-size:8.5px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  color:var(--sp-g300);
}

.sp-prod-info {
  padding:8px 10px 10px;
  display:flex; flex-direction:column; flex:1; min-height:0;
}
.sp-prod-name {
  font-size:13px; font-weight:500;
  line-height:1.38; margin-bottom:3px; color:var(--sp-black);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; min-height:30px; flex-shrink:0;
}
.sp-prod-sku {
  font-size:10px; color:var(--sp-g400);
  letter-spacing:0.5px; margin-bottom:4px; flex-shrink:0;
}
.sp-prod-price {
  font-size:14px; font-weight:700;
  color:var(--sp-black); letter-spacing:0.3px;
  margin-top:auto; flex-shrink:0;
}

/* Loading */
.sp-loading {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; padding:3rem; color:var(--sp-g400);
  grid-column:1/-1;
}
.sp-spinner {
  width:26px; height:26px;
  border:2px solid var(--sp-g200);
  border-top-color:var(--sp-black);
  border-radius:50%;
  animation:sp-spin 0.7s linear infinite;
}
@keyframes sp-spin { to { transform:rotate(360deg); } }

/* Pagination */
.sp-pagination {
  display:flex; gap:5px; justify-content:center;
  padding:6px 0; flex-shrink:0;
}
.sp-page-btn {
  width:32px; height:32px; border-radius:6px;
  border:1px solid var(--sp-g200); background:var(--sp-white);
  font-family:'Oswald',sans-serif; font-size:12px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:var(--sp-trans); color:var(--sp-black);
}
.sp-page-btn:hover { border-color:var(--sp-black); }
.sp-page-btn.active { background:var(--sp-black); color:#fff; border-color:var(--sp-black); }

/* ══════════════════════════════════════════
   BILL PANEL
══════════════════════════════════════════ */
.sp-bill-panel {
  width:var(--sp-bill);
  background:var(--sp-canvas);
  border-left:1px solid var(--sp-g100);
  display:flex; flex-direction:column;
  flex-shrink:0; overflow:hidden;
  position:relative;
}

/* ── POS 2-STEP CHECKOUT ── */
.sp-step-view{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
/* Step 2 */
#pos-step2{ display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
/* Step 2 scrollable body */
.sp-checkout-sticky {
  flex:1;
  overflow-y:auto;
  min-height:0;
  padding:0 0 12px;
  background:var(--sp-canvas);
  scrollbar-width:thin;
  scrollbar-color:var(--sp-g100) transparent;
}
.sp-step2-header{
  padding:13px 18px 12px; border-bottom:1px solid var(--sp-g100);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  background:var(--sp-canvas);
  gap:10px;
}
.sp-step-indicator{
  font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:2.5px;
  color:var(--sp-g400); text-transform:uppercase; font-weight:500;
}
.sp-back-btn{
  display:flex; align-items:center; gap:6px;
  height:36px; padding:0 16px; border:1.5px solid var(--sp-g150,#e5e5ea);
  background:var(--sp-white); border-radius:20px;
  font-family:'Oswald',sans-serif; font-size:10.5px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  color:var(--sp-black); transition:all .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.sp-back-btn:hover{ background:var(--sp-g50); border-color:var(--sp-g200); }
.sp-proceed-btn{
  margin:10px 16px 16px;
  width:calc(100% - 32px);
  height:52px;
  background:var(--sp-black); color:#fff; border:none;
  border-radius:var(--sp-radius-lg);
  font-family:'Oswald',sans-serif; font-size:13px;
  font-weight:500; letter-spacing:3.5px; text-transform:uppercase;
  cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform 0.16s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.16s ease, background 0.16s ease;
  box-shadow:0 4px 16px rgba(17,17,16,0.28), 0 1px 4px rgba(17,17,16,0.12);
  box-sizing:border-box;
}
.sp-proceed-btn:hover:not(:disabled){
  transform:translateY(-1px) scale(1.01);
  box-shadow:0 8px 24px rgba(17,17,16,0.32), 0 2px 8px rgba(17,17,16,0.16);
}
.sp-proceed-btn:active:not(:disabled){
  transform:scale(0.97);
  box-shadow:0 2px 8px rgba(17,17,16,0.2);
  transition:transform 0.08s ease;
}
.sp-proceed-btn:disabled{ opacity:0.5; cursor:not-allowed; }

@media (min-width:768px) and (max-width:1024px){
  .sp-back-btn, .sp-proceed-btn, .sp-charge-btn { min-height:44px; }
  .sp-pay-btn, .sp-pay-sec-btn { min-height:44px; }
}

.sp-bill-header {
  padding:14px 18px;
  border-bottom:1px solid var(--sp-g100);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.sp-bill-title {
  font-size:13px; font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase;
}
.sp-bill-count {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--sp-black); color:#fff;
  font-size:10px; font-weight:600; margin-left:7px;
}
.sp-clear-btn {
  font-size:10px; color:var(--sp-red);
  background:none; border:none; cursor:pointer;
  font-family:'Oswald',sans-serif;
  letter-spacing:0.8px; text-transform:uppercase;
  transition:var(--sp-trans); padding:4px 6px; border-radius:4px;
}
.sp-clear-btn:hover { background:#fef2f2; }

/* Customer */
.sp-cust-row {
  padding:10px 18px;
  border-bottom:1px solid var(--sp-g100);
  display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:var(--sp-trans); flex-shrink:0;
}
.sp-cust-row:hover { background:var(--sp-g50); }
.sp-cust-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--sp-g100); color:var(--sp-g600);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex-shrink:0;
  transition:var(--sp-trans);
}
.sp-cust-row:hover .sp-cust-avatar { background:var(--sp-g200); }
.sp-cust-info { flex:1; min-width:0; }
.sp-cust-name { font-size:14px; font-weight:500; }
.sp-cust-phone { font-size:11px; color:var(--sp-g400); margin-top:1px; }
.sp-cust-change {
  font-size:10px; color:var(--sp-black);
  letter-spacing:0.5px; text-transform:uppercase;
  flex-shrink:0; opacity:0.4;
}
.sp-cust-row:hover .sp-cust-change { opacity:1; }

/* Step 1 scrollable zone */
.sp-step1-scroll { flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:var(--sp-g100) transparent; }

/* Step 2 pinned footer (payment + checkout btn) */
.sp-step2-footer {
  flex-shrink:0;
  border-top:1.5px solid var(--sp-g100);
  background:var(--sp-canvas);
  padding:0 0 8px;
}

/* Cart items */
.sp-cart-items { flex:1; overflow-y:visible; min-height:80px; }

.sp-empty-cart {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  height:100%; color:var(--sp-g400); gap:10px; padding:2rem;
}
.sp-empty-cart svg { width:36px; height:36px; opacity:0.2; }
.sp-empty-cart p { font-size:12px; letter-spacing:0.3px; }

.sp-cart-item {
  display:flex; align-items:center; gap:10px;
  padding:11px 18px;
  border-bottom:1px solid #efefef;
  border-left:3px solid transparent;
  transition:all 0.12s;
}
.sp-cart-item:hover { background:#f8f9fa; border-left-color:#0d0d0d; }
.sp-ci-thumb {
  width:36px; height:36px; border-radius:6px;
  background:var(--sp-g50); flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sp-g100);
}
.sp-ci-thumb img { width:100%; height:100%; object-fit:cover; border-radius:5px; }
.sp-ci-info { flex:1; min-width:0; }
.sp-ci-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-ci-sku { font-size:9px; color:var(--sp-g400); margin-top:1px; }
.sp-ci-price { font-size:12px; font-weight:500; white-space:nowrap; flex-shrink:0; }

.sp-qty-ctrl { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.sp-qty-btn {
  width:22px; height:22px; border-radius:5px;
  border:1px solid var(--sp-g200); background:none;
  cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--sp-black); transition:var(--sp-trans); font-weight:300;
}
.sp-qty-btn:hover { background:var(--sp-black); color:#fff; border-color:var(--sp-black); }
.sp-qty-val { font-size:13px; font-weight:500; min-width:18px; text-align:center; }
.sp-del-btn {
  width:22px; height:22px; border:none; background:none;
  cursor:pointer; color:var(--sp-g400); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  transition:var(--sp-trans);
}
.sp-del-btn:hover { color:var(--sp-red); background:#fef2f2; }

/* Discount */
.sp-discount-section {
  border-top:1px solid var(--sp-g100);
  padding:18px 22px 16px; flex-shrink:0;
}
.sp-section-label {
  font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--sp-g400); margin-bottom:14px; font-weight:600;
}
.sp-disc-tabs {
  display:flex; border:1.5px solid var(--sp-g200);
  border-radius:10px; overflow:hidden; margin-bottom:12px;
}
.sp-disc-tab {
  flex:1; height:38px; border:none; background:none;
  font-family:'Oswald',sans-serif; font-size:10.5px;
  font-weight:400; letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; color:var(--sp-g600); transition:all .2s ease;
}
.sp-disc-tab.active { background:var(--sp-black); color:#fff; font-weight:500; }
.sp-disc-tab:not(:last-child) { border-right:1.5px solid var(--sp-g200); }

.sp-disc-row { display:flex; gap:7px; align-items:center; }
.sp-disc-type {
  display:flex; border:1px solid var(--sp-g200);
  border-radius:6px; overflow:hidden; flex-shrink:0;
}
.sp-dtype-btn {
  width:40px; height:40px; border:none; background:none;
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:500;
  cursor:pointer; color:var(--sp-g600); transition:var(--sp-trans);
}
.sp-dtype-btn.active { background:var(--sp-black); color:#fff; }
.sp-dtype-btn:not(:last-child) { border-right:1px solid var(--sp-g200); }

.sp-disc-input-wrap { flex:1; position:relative; }
.sp-disc-input, .sp-coupon-input {
  width:100%; height:40px; padding:0 24px 0 13px;
  border:1.5px solid var(--sp-g200); border-radius:10px;
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:300;
  color:var(--sp-black); outline:none; background:var(--sp-white);
  transition:var(--sp-trans);
}
.sp-coupon-input { flex:1; padding:0 11px; text-transform:uppercase; letter-spacing:1px; }
.sp-disc-input:focus,.sp-coupon-input:focus { border-color:var(--sp-black); box-shadow:0 0 0 3px rgba(13,13,13,0.06); }
.sp-disc-input::placeholder,.sp-coupon-input::placeholder { color:var(--sp-g400); font-size:12px; }
.sp-disc-sym { position:absolute; right:9px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--sp-g400); }

.sp-apply-btn {
  height:40px; padding:0 16px;
  background:var(--sp-black); color:#fff; border:1.5px solid var(--sp-black);
  border-radius:10px; font-family:'Oswald',sans-serif;
  font-size:10px; font-weight:500; letter-spacing:1.2px;
  text-transform:uppercase; cursor:pointer;
  transition:var(--sp-trans); flex-shrink:0;
}
.sp-apply-btn:hover {
  background:transparent; color:var(--sp-black);
}

.sp-disc-applied {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 11px; margin-top:9px;
  background:#f0fdf4; border:1px solid #bbf7d0; border-radius:6px;
  font-size:11px;
}
.sp-disc-applied-val { font-size:12px; font-weight:500; color:var(--sp-green); }
.sp-loyalty-applied {
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 11px; margin-top:9px;
  background:#fffbeb; border:1px solid #fde68a; border-radius:6px;
  font-size:11px;
}
.sp-loyalty-applied-val { font-size:12px; font-weight:500; color:#b45309; }
.sp-disc-remove {
  font-size:9px; color:var(--sp-g400); background:none; border:none;
  cursor:pointer; font-family:'Oswald',sans-serif;
  letter-spacing:0.5px; text-transform:uppercase;
  transition:var(--sp-trans);
}
.sp-disc-remove:hover { color:var(--sp-red); }

.sp-points-maxbtn {
  height:34px; padding:0 12px; flex-shrink:0;
  background:#fffbeb; color:#92400e; border:1px solid #fde68a;
  border-radius:6px; font-family:'Oswald',sans-serif;
  font-size:9.5px; font-weight:600; letter-spacing:1.2px;
  text-transform:uppercase; cursor:pointer;
  transition:var(--sp-trans);
}
.sp-points-maxbtn:hover { background:#fde68a; }
.sp-points-maxbtn:active { transform:scale(0.96); }

.sp-points-usage-row {
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:10.5px; color:var(--sp-g400); margin-bottom:6px;
}
.sp-points-usage-used { color:#92400e; }
.sp-points-usage-used strong, .sp-points-usage-remain strong { color:#0d0d0d; font-weight:700; }
.sp-points-progress-track {
  width:100%; height:6px; border-radius:99px;
  background:#f3e8d0; overflow:hidden;
}
.sp-points-progress-fill {
  height:100%; border-radius:99px; width:0%;
  background:linear-gradient(90deg,#dcb96e,#92400e);
  transition:width .35s cubic-bezier(.32,1,.45,1);
}

/* Totals */
.sp-totals { padding:18px 22px 14px; border-top:1.5px solid var(--sp-g100); flex-shrink:0; }
.sp-total-row {
  display:flex; justify-content:space-between;
  font-size:12.5px; color:var(--sp-g600); padding:5px 0;
  font-family:'Oswald',sans-serif; letter-spacing:0.2px;
}
.sp-discount-row { color:var(--sp-green); }
.sp-green { color:var(--sp-green); }
.sp-grand {
  font-size:18px; font-weight:600; color:var(--sp-black);
  padding:14px 0 6px; border-top:2px solid var(--sp-black); margin-top:10px;
  letter-spacing:0.3px;
}

/* Payment */
.sp-payment-section { padding:16px 22px 12px; flex-shrink:0; }
.sp-pay-methods { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:12px; }
.sp-pay-btn {
  height:46px; border:1.5px solid var(--sp-g100); background:var(--sp-white);
  font-family:'Oswald',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; color:var(--sp-g500); border-radius:14px;
  transition:all .2s ease;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.sp-pay-btn:hover { border-color:var(--sp-g400); color:var(--sp-black); transform:scale(1.02); }
.sp-pay-btn.active { background:var(--sp-black); color:#fff; border-color:var(--sp-black); box-shadow:0 3px 12px rgba(17,17,16,0.25); transform:scale(1.02); }

.sp-pay-secondary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sp-pay-sec-btn {
  height:40px; border:1.5px solid var(--sp-g150,#e5e5ea); background:var(--sp-white);
  font-family:'Oswald',sans-serif; font-size:10px; font-weight:400;
  letter-spacing:0.8px; text-transform:uppercase;
  cursor:pointer; color:var(--sp-g600); border-radius:12px;
  transition:all .2s ease;
}
.sp-pay-sec-btn:hover { border-color:var(--sp-black); color:var(--sp-black); background:var(--sp-g50); }

/* Due date */
.sp-due-date-row { padding:10px 18px; border-top:1px solid var(--sp-g100); flex-shrink:0; }
.sp-due-date-row label {
  font-size:9px; color:var(--sp-g400); letter-spacing:1px;
  text-transform:uppercase; display:block; margin-bottom:6px;
}
.sp-date-input {
  width:100%; height:34px; padding:0 11px;
  border:1px solid var(--sp-g200); border-radius:6px;
  font-family:'Oswald',sans-serif; font-size:13px;
  color:var(--sp-black); outline:none; background:var(--sp-white);
  transition:var(--sp-trans);
}
.sp-date-input:focus { border-color:var(--sp-black); }

/* Charge button */
.sp-charge-btn {
  margin: 0 14px 6px;
  width: calc(100% - 28px);
  height: 54px;
  background: var(--sp-black); color: #fff; border: none;
  border-radius: 16px;
  font-family: 'Oswald', sans-serif; font-size: 14px;
  font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.16s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.16s ease, background 0.16s ease;
  box-shadow: 0 4px 20px rgba(17,17,16,0.28), 0 1px 4px rgba(17,17,16,0.12);
}
.sp-charge-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 8px 24px rgba(17,17,16,0.32), 0 2px 8px rgba(17,17,16,0.16);
}
.sp-charge-btn:active:not(:disabled) {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(17,17,16,0.2);
  transition: transform 0.08s ease;
}
.sp-charge-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.sp-charge-btn svg { transition: var(--sp-trans); flex-shrink: 0; }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.sp-modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.42);
  display:flex; align-items:center; justify-content:center;
  z-index:10000; opacity:0; pointer-events:none;
  transition:opacity 0.22s ease; padding:20px;
  backdrop-filter:blur(8px);
}
.sp-modal-overlay.open { opacity:1; pointer-events:all; }

.sp-modal {
  background:var(--sp-white); border-radius:12px;
  width:100%; max-width:420px;
  transform:translateY(16px) scale(0.98);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}
.sp-modal-overlay.open .sp-modal { transform:translateY(0) scale(1); }

.sp-modal-head {
  display:flex; align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--sp-g100);
  background:var(--sp-black);
}
.sp-modal-title {
  font-size:13px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#fff; flex:1;
}
.sp-modal-close {
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.1); cursor:pointer;
  font-size:16px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:var(--sp-trans);
}
.sp-modal-close:hover { background:rgba(255,255,255,0.2); }
.sp-modal-body { padding:20px; }

/* ── PRODUCT VIEW MODAL ── */
.sp-view-modal .sp-modal { max-width:500px; }
.sp-view-modal .sp-modal-head { background:var(--sp-black); }

.sp-view-img {
  width:100%; aspect-ratio:1;
  background:var(--sp-g50); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-bottom:16px;
  border:1px solid var(--sp-g100);
}
.sp-view-img img { width:100%; height:100%; object-fit:cover; }

.sp-view-name {
  font-size:18px; font-weight:500; letter-spacing:0.5px;
  margin-bottom:5px;
}
.sp-view-sku { font-size:11px; color:var(--sp-g400); letter-spacing:1px; margin-bottom:12px; }
.sp-view-price {
  font-size:24px; font-weight:500;
  margin-bottom:12px; color:var(--sp-black);
}

.sp-view-meta {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:16px;
}
.sp-view-meta-item {
  background:var(--sp-g50); border-radius:6px;
  padding:10px 12px; border:1px solid var(--sp-g100);
}
.sp-view-meta-label { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sp-g400); margin-bottom:3px; }
.sp-view-meta-val { font-size:14px; font-weight:500; }

.sp-view-add-btn {
  width:100%; height:44px;
  background:var(--sp-black); color:#fff;
  border:1.5px solid var(--sp-black); border-radius:8px;
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; transition:var(--sp-trans);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.sp-view-add-btn:hover { background:transparent; color:var(--sp-black); }

/* ── CUSTOMER MODAL LIST ── */
.sp-cust-list-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border:1px solid var(--sp-g100);
  border-radius:8px; cursor:pointer; transition:var(--sp-trans);
  margin-bottom:6px;
}
.sp-cust-list-item:hover { background:var(--sp-g50); border-color:var(--sp-g200); }
.sp-cust-list-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--sp-black); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex-shrink:0;
}

/* ══════════════════════════════════════════
   SUCCESS MODAL — premium iOS style
   (paid / credit / quotation variants, all sharing this markup)
══════════════════════════════════════════ */
.sp-success-modal-box { border-radius:22px !important; box-shadow:var(--sp-shadow-xl); }

/* Floating close X — frosted glass circle, sits just outside the card */
.sp-success-x {
  position:absolute; top:-14px; right:-14px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  background:var(--sp-black); color:#fff; border:3px solid #fff;
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.28);
  transition:var(--sp-spring-fast);
}
.sp-success-x:hover { transform:scale(1.1) rotate(90deg); background:#262626; }
.sp-success-x:active { transform:scale(0.94) rotate(90deg); }

/* On mobile the modal fills full width — X can't float outside, move it inside the header */
@media (max-width:767px) {
  .sp-success-x {
    position:absolute; top:12px; right:12px;
    background:rgba(255,255,255,0.18); border:none;
    box-shadow:none; width:30px; height:30px; font-size:16px;
    backdrop-filter:blur(4px);
    color:#fff;
  }
  .sp-success-x:hover { background:rgba(255,255,255,0.3); transform:scale(1.08) rotate(90deg); }
  .sp-success-modal-box { overflow:hidden !important; }
}

/* Header — icon badge + title, rounded to match card */
.sp-success-head-wrap {
  border-radius:22px 22px 0 0; padding:30px 24px 26px; border-bottom:none;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  position:relative; overflow:hidden;
  transition:background 0.25s ease;
}
.sp-success-head-wrap::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% -20%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
/* Shimmer sweep on header */
.sp-success-head-wrap::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation:spShimmer 2.4s ease-in-out 0.6s infinite;
  pointer-events:none; z-index:1;
}
@keyframes spShimmer {
  0%   { left:-100%; }
  100% { left:200%; }
}

/* Badge container — holds SVG or emoji */
.sp-success-head-badge {
  width:72px; height:72px;
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  animation:spBadgeEntry 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes spBadgeEntry {
  0%   { transform:scale(0); opacity:0; }
  50%  { transform:scale(1.15); opacity:1; }
  100% { transform:scale(1); }
}

/* Outer pulse ring */
.sp-anim-ring {
  position:absolute; inset:-8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  animation:spRingPulse 2s ease-out 0.7s infinite;
  opacity:0;
}
@keyframes spRingPulse {
  0%   { transform:scale(0.85); opacity:0.6; }
  50%  { transform:scale(1.15); opacity:0; }
  100% { transform:scale(1.15); opacity:0; }
}

/* Second subtle glow ring */
.sp-success-head-badge::after {
  content:''; position:absolute; inset:-4px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  animation:spGlowBreath 2.5s ease-in-out 0.5s infinite alternate;
}
@keyframes spGlowBreath {
  0%   { transform:scale(1); opacity:0.4; }
  100% { transform:scale(1.2); opacity:0; }
}

/* SVG checkmark */
.sp-anim-check {
  width:72px; height:72px;
  filter:drop-shadow(0 0 12px rgba(255,255,255,0.3));
}
.sp-anim-circle {
  fill:none;
  stroke-dasharray:188.5;
  stroke-dashoffset:188.5;
  animation:spCircleDraw 0.65s cubic-bezier(0.65,0,0.35,1) 0.15s forwards;
}
@keyframes spCircleDraw {
  to { stroke-dashoffset:0; }
}
.sp-anim-tick {
  fill:none;
  stroke-dasharray:50;
  stroke-dashoffset:50;
  animation:spTickDraw 0.4s cubic-bezier(0.65,0,0.35,1) 0.6s forwards;
}
@keyframes spTickDraw {
  to { stroke-dashoffset:0; }
}

/* Emoji fallback for credit/quotation modes */
.sp-anim-emoji {
  font-size:36px;
  animation:spBadgeEntry 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.sp-success-head-title {
  color:#fff; flex:none; text-align:center;
  font-size:13px; font-weight:600; letter-spacing:2px;
  position:relative; z-index:2;
  animation:spTitleSlide 0.5s cubic-bezier(0.22,1,0.36,1) 0.35s both;
}
@keyframes spTitleSlide {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Body */
.sp-success-body { text-align:center; padding:28px 28px 24px; }
.sp-success-inv {
  font-size:28px; font-weight:600; letter-spacing:0.5px; color:var(--sp-black);
  font-family:'Oswald',sans-serif; margin-bottom:8px;
  animation:spBodyFade 0.45s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}
.sp-success-amount {
  font-size:17px; font-weight:500; color:var(--sp-g500); margin-bottom:16px;
  animation:spBodyFade 0.45s cubic-bezier(0.22,1,0.36,1) 0.6s both;
}
.sp-success-meta-row {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--sp-g30); border:1px solid var(--sp-g100);
  color:var(--sp-g500); font-size:13px; font-weight:500;
  padding:7px 16px; border-radius:20px; margin-bottom:24px;
  animation:spBodyFade 0.45s cubic-bezier(0.22,1,0.36,1) 0.7s both;
}
@keyframes spBodyFade {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Paid buttons — 3-up icon-card grid, full width, staggered pop-in */
.sp-succ-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sp-succ-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:18px 6px 15px; border-radius:17px; border:1.5px solid transparent;
  background:var(--sp-g30); cursor:pointer; transition:var(--sp-spring-fast);
  font-family:'Oswald',sans-serif; width:100%;
  animation:spSuccBtnIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.sp-succ-grid .sp-succ-btn:nth-child(1) { animation-delay:.75s; }
.sp-succ-grid .sp-succ-btn:nth-child(2) { animation-delay:.82s; }
.sp-succ-grid .sp-succ-btn:nth-child(3) { animation-delay:.89s; }
@keyframes spSuccBtnIn { from { opacity:0; transform:translateY(10px) scale(0.9); } to { opacity:1; transform:translateY(0) scale(1); } }
.sp-succ-btn:hover { transform:translateY(-3px); box-shadow:var(--sp-shadow-md); }
.sp-succ-btn:hover .sp-succ-ico { transform:scale(1.08); }
.sp-succ-btn:active { transform:translateY(-1px) scale(0.96); transition:transform .08s ease; }
.sp-succ-ico {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:var(--sp-spring-fast);
}
.sp-succ-lbl { font-size:11px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:var(--sp-g600); transition:color .15s ease; }

.sp-succ-wa .sp-succ-ico { background:#dcfce7; color:#15803d; box-shadow:0 0 0 0 rgba(21,128,61,0); }
.sp-succ-wa:hover { border-color:#bbf7d0; background:#f0fdf4; box-shadow:0 10px 22px -10px rgba(21,128,61,0.35); }
.sp-succ-wa:hover .sp-succ-lbl { color:#15803d; }

.sp-succ-dl .sp-succ-ico { background:var(--sp-g100); color:var(--sp-g600); }
.sp-succ-dl:hover { border-color:var(--sp-g200); background:var(--sp-off); box-shadow:0 10px 22px -10px rgba(0,0,0,0.18); }
.sp-succ-dl:hover .sp-succ-lbl { color:var(--sp-black); }

.sp-succ-new {
  background:var(--sp-black); border-color:var(--sp-black);
}
.sp-succ-new .sp-succ-ico { background:rgba(255,255,255,0.14); color:#fff; }
.sp-succ-new .sp-succ-lbl { color:#fff; }
.sp-succ-new:hover { background:#262626; border-color:#262626; box-shadow:0 10px 24px -10px rgba(0,0,0,0.5); }
.sp-succ-new.sp-succ-full { width:100%; flex-direction:row; padding:16px; border-radius:14px; margin-top:12px; }
.sp-succ-new.sp-succ-full .sp-succ-ico { width:22px; height:22px; background:transparent; }
.sp-succ-new.sp-succ-full .sp-succ-lbl { font-size:13px; letter-spacing:1.5px; }

/* Credit variant */
.sp-succ-credit-wrap { display:flex; flex-direction:column; gap:0; }
.sp-succ-credit-box {
  background:var(--sp-red-bg); border:1px solid #fecaca; border-radius:14px;
  padding:16px 18px; text-align:left; margin-bottom:14px;
  animation:spSuccBtnIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.sp-succ-credit-tag {
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:1.4px;
  color:var(--sp-red); font-weight:700; margin-bottom:10px;
}
.sp-succ-credit-line {
  display:flex; justify-content:space-between; align-items:center;
  font-size:14px; color:var(--sp-g600); padding:5px 0;
}
.sp-succ-credit-val { font-weight:600; color:var(--sp-black); }
.sp-succ-credit-val-red { font-weight:700; color:var(--sp-red); }
#sp-collect-payment-btn { margin-bottom:14px !important; height:52px !important; font-size:13px !important; border-radius:14px !important; }
.sp-succ-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sp-succ-row2 .sp-succ-btn:nth-child(1) { animation-delay:.75s; }
.sp-succ-row2 .sp-succ-btn:nth-child(2) { animation-delay:.82s; }
.sp-succ-new.sp-succ-full { animation:spSuccBtnIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay:.89s; }

/* ── TOAST ── */
.sp-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--sp-black); color:#fff;
  padding:10px 22px; border-radius:8px;
  font-size:12px; letter-spacing:0.5px;
  z-index:10001; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
}
.sp-toast.show { transform:translateX(-50%) translateY(0); }
.sp-toast.success { background:var(--sp-green); }
.sp-toast.error   { background:var(--sp-red); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:1199px) {
  :root { --sp-bill:300px; }
  .sp-product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width:1024px) {
  :root { --sp-bill:280px; }
  .sp-product-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── VIEW MODE ── */
.sp-view-overlay {
  position:absolute; inset:0;
  background:rgba(13,13,13,0.55);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; color:#fff;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase;
  border-radius:10px 10px 0 0;
  opacity:0; transition:opacity 0.2s;
}
.view-mode-card .sp-prod-img { position:relative; }
.view-mode-card:hover .sp-view-overlay { opacity:1; }
.view-mode-card { cursor:pointer; border:1px dashed #0d0d0d !important; }
.view-mode-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.12); }

/* View mode active topbar banner */
.sp-viewmode-banner {
  display:none; background:#0d0d0d; color:#fff;
  padding:6px 18px; font-size:10px;
  letter-spacing:1.5px; text-transform:uppercase;
  text-align:center; flex-shrink:0;
}
.view-mode-active .sp-viewmode-banner { display:block; }

/* Modal always on top */
#sp-view-modal {
  z-index:999999 !important;
}

/* ── PRODUCT POPUP ANIMATION ── */
@keyframes swPopIn {
  from { transform:translateY(16px) scale(0.97); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

/* ── EYE BUTTON GUARANTEED CLICKABLE ── */
.sp-prod-eye-btn {
  pointer-events: all !important;
  cursor: pointer !important;
  z-index: 100 !important;
}
.sp-product-card:hover .sp-prod-eye-btn {
  opacity: 1 !important;
}
/* Make sure SVG inside button doesn't capture pointer */
.sp-prod-eye-btn svg,
.sp-prod-eye-btn svg * {
  pointer-events: none !important;
}


/* ── VIEW MODE TOGGLE PILL ── */
.sp-action-btn#sp-viewmode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-toggle-pill {
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 18px;
  background: #d0cdc8;
  border-radius: 9px;
  padding: 2px;
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.sp-toggle-dot {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  display: block;
}
/* Active state */
.sp-action-btn#sp-viewmode-btn.active .sp-toggle-pill {
  background: #16a34a;
}
.sp-action-btn#sp-viewmode-btn.active .sp-toggle-dot {
  transform: translateX(14px);
}
.sp-action-btn#sp-viewmode-btn.active {
  background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #86efac !important;
}

/* ── PRODUCT POPUP ANIMATION ── */
@keyframes swPopIn {
  from { transform:translateY(16px) scale(0.97); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}
/* ── EYE BUTTON GUARANTEED CLICKABLE ── */
.sp-prod-eye-btn {
  pointer-events: all !important;
  cursor: pointer !important;
  z-index: 100 !important;
}
.sp-product-card:hover .sp-prod-eye-btn {
  opacity: 1 !important;
}
.sp-prod-eye-btn svg,
.sp-prod-eye-btn svg * {
  pointer-events: none !important;
}

/* ── SCAN MODE ── */
.sp-scan-btn.active {
  background: var(--sp-black) !important;
  color: #fff !important;
  border-color: var(--sp-black) !important;
  animation: sp-scan-pulse 1.8s ease-in-out infinite;
}
@keyframes sp-scan-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13,13,13,0.35); }
  50%       { box-shadow: 0 0 0 5px rgba(13,13,13,0); }
}
.sp-search-input.sp-scan-active {
  border-color: var(--sp-black) !important;
  box-shadow: 0 0 0 3px rgba(13,13,13,0.08) !important;
  outline: none;
}
.sp-search-input.sp-scan-active::placeholder {
  color: var(--sp-black);
  opacity: 0.5;
}

/* ── HELD CARTS ── */
.sp-held-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sp-black);
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  margin-left: 2px;
  pointer-events: none;
}
/* Held carts button — highlight when has items */
.sp-has-held {
  background: var(--sp-black) !important;
  color: #fff !important;
  border-color: var(--sp-black) !important;
}
.sp-has-held .sp-held-badge {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* Held cart rows in modal */
.sp-held-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background 0.15s;
  gap: 12px;
}
.sp-held-row:last-of-type { border-bottom: none; }
.sp-held-row:hover { background: #fafafa; }
.sp-held-row-left { flex: 1; min-width: 0; }
.sp-held-cust {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-black);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-held-items {
  font-size: 11px;
  color: #888;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-held-meta {
  font-size: 10px;
  color: #bbb;
  letter-spacing: 0.3px;
}
.sp-held-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.sp-held-total {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--sp-black);
  letter-spacing: 0.5px;
}
.sp-held-del {
  width: 24px;
  height: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  padding: 0;
  transition: all 0.15s;
}
.sp-held-del:hover {
  border-color: var(--sp-black);
  color: var(--sp-black);
  background: #f5f5f5;
}

/* ── HELD CARTS BUTTON WRAP ── */
.sp-held-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sp-held-wrap .sp-held-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  pointer-events: none;
  z-index: 2;
}

/* ── CUSTOMERS TAB ── */
#sp-customers-content { display: flex; flex-direction: column; height: 100%; background: var(--sp-canvas); }

/* Header bar */
.sp-ct-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-bottom: 1px solid #ebebeb;
  background: #fff; flex-shrink: 0;
}
.sp-ct-header-title {
  font-family: 'Oswald', sans-serif; font-size: 12px;
  letter-spacing: 1.5px; color: #374151; font-weight: 500;
}
.sp-ct-add-btn {
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1px;
  padding: 5px 14px; background: #0d0d0d; color: #fff;
  border: none; border-radius: 4px; cursor: pointer; text-decoration: none;
  display: inline-block;
}

/* Search bar */
.sp-ct-search-wrap {
  padding: 8px 16px; border-bottom: 1px solid #ebebeb;
  background: #fff; flex-shrink: 0; position: sticky; top: 0; z-index: 5;
}
.sp-ct-search {
  width: 100%; padding: 8px 12px 8px 32px;
  border: 1px solid #e5e7eb; border-radius: 6px;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 0.3px;
  color: #0d0d0d; outline: none; box-sizing: border-box;
  background: #f9fafb;
}
.sp-ct-search:focus { border-color: #0d0d0d; background: #fff; }
.sp-ct-search-wrap svg { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sp-ct-search-wrap { position: relative; }

/* Filter pills */
.sp-cust-filter-bar {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 16px 8px; border-bottom: 1px solid #ebebeb;
  flex-wrap: nowrap; overflow-x: auto; background: #fff; flex-shrink: 0;
  scrollbar-width: none;
}
.sp-cust-filter-bar::-webkit-scrollbar { display: none; }
.sp-cust-filter-pill {
  font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 0.8px;
  text-transform: uppercase; white-space: nowrap;
  padding: 4px 12px; border-radius: 4px;
  border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.sp-cust-filter-pill.active {
  background: #0d0d0d; color: #fff; border-color: #0d0d0d;
}
.sp-cust-filter-pill:hover:not(.active) { border-color: #9ca3af; color: #374151; }

/* Column header row */
.sp-ct-col-header {
  display: grid;
  grid-template-columns: 40px 1fr 80px 90px 100px;
  gap: 0; padding: 7px 18px;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.sp-ct-col-header span {
  font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: #9ca3af; font-weight: 600;
}
.sp-ct-col-header span:last-child { text-align: right; }

/* List scroll area */
#sp-cust-tab-list { flex: 1; overflow-y: auto; }

/* Each row */
.sp-cust-tab-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px 90px 100px;
  align-items: center;
  gap: 0; padding: 10px 18px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.1s;
}
.sp-cust-tab-row:hover { background: #f9fafb; }

/* Avatar */
.sp-cust-tab-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: #0d0d0d; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; cursor: pointer; flex-shrink: 0;
}

/* Name+sub col */
.sp-cust-tab-info { min-width: 0; overflow: hidden; padding-left: 12px; cursor: pointer; }
.sp-cust-tab-name {
  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.3px; color: #0d0d0d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-cust-tab-sub {
  font-size: 11px; color: #9ca3af; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* GST col */
.sp-ct-gst-col { display: flex; align-items: center; justify-content: center; }

/* Type col */
.sp-ct-type-col { display: flex; align-items: center; justify-content: center; }

/* Actions col */
.sp-ct-actions-col {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.sp-ct-btn {
  font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 3px;
  cursor: pointer; border: 1px solid; transition: all 0.1s;
  white-space: nowrap;
}
.sp-ct-btn-select {
  background: #0d0d0d; color: #fff; border-color: #0d0d0d;
}
.sp-ct-btn-select:hover { background: #374151; border-color: #374151; }
.sp-ct-btn-view {
  background: #fff; color: #374151; border-color: #e5e7eb;
}
.sp-ct-btn-view:hover { border-color: #9ca3af; color: #0d0d0d; }

/* Outstanding badge */
.sp-ct-due-badge {
  font-family: 'Oswald', sans-serif; font-size: 9px; font-weight: 600;
  letter-spacing: 0.3px; color: #dc2626;
}


/* ══════════════════════════════════
   BILLING TAB — MATCHES ADMIN UI
   ══════════════════════════════════ */
#sp-tab-billing { overflow:hidden; }
#sp-billing-content { height:100%; overflow-y:auto; }

.spb-loading { display:flex; align-items:center; justify-content:center; height:120px; gap:8px; color:#9ca3af; font-size:12px; }
.spb-error { padding:20px; color:#dc2626; font-size:13px; }

.spb-page { display:flex; flex-direction:column; min-height:100%; }

/* METRICS */
.spb-metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:2px solid #f0f0f0; background:#fff; }
.spb-metric { padding:18px 22px; border-right:1px solid #efefef; position:relative; }
.spb-metric::after { content:''; position:absolute; bottom:0; left:22px; right:22px; height:3px; background:transparent; border-radius:3px 3px 0 0; transition:background 0.2s; }
.spb-metric.red::after { background:#dc2626; }
.spb-metric.green::after { background:#16a34a; }
.spb-metric:last-child { border-right:none; }
.spb-metric.red .spb-metric-val { color:#dc2626; }
.spb-metric.green .spb-metric-val { color:#16a34a; }
.spb-metric-val { font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; color:#0d0d0d; line-height:1; margin-bottom:4px; }
.spb-metric-lbl { font-size:9px; color:#9ca3af; letter-spacing:1px; text-transform:uppercase; }

/* TOPBAR */
.spb-topbar { display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid #f0f0f0; gap:12px; flex-wrap:wrap; }
.spb-tabs { display:flex; gap:0; }
.spb-tab { padding:12px 14px; border:none; background:none; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.8px; color:#9ca3af; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.15s; white-space:nowrap; }
.spb-tab:hover { color:#374151; }
.spb-tab.active { color:#0d0d0d; border-bottom-color:#0d0d0d; }
.spb-tab-ct { font-size:10px; background:#f3f4f6; color:#6b7280; padding:1px 5px; border-radius:3px; margin-left:3px; font-family:inherit; }
.spb-tab.active .spb-tab-ct { background:#0d0d0d; color:#fff; }

.spb-top-right { display:flex; gap:6px; align-items:center; padding:8px 0; flex-shrink:0; }
.spb-sinp { height:32px; padding:0 10px; border:1px solid #e5e7eb; border-radius:5px; font-size:11px; width:200px; outline:none; color:#111; }
.spb-sinp:focus { border-color:#0d0d0d; }
.spb-ssel { height:32px; padding:0 8px; border:1px solid #e5e7eb; border-radius:5px; font-size:11px; color:#374151; background:#fff; outline:none; }
.spb-sbtn { height:32px; padding:0 14px; background:#0d0d0d; border:none; border-radius:5px; font-size:10px; font-family:'Oswald',sans-serif; letter-spacing:1px; cursor:pointer; color:#fff; transition:all 0.12s; }
.spb-sbtn:hover { background:#374151; }
.spb-sbtn-clear { background:#fff; color:#374151; border:1px solid #e5e7eb; }
.spb-sbtn-clear:hover { background:#f3f4f6; color:#0d0d0d; }

/* TABS ROW */
.spb-tabs-row { display:flex; gap:0; border-bottom:2px solid #e5e7eb; margin:0 16px; }

/* ADVANCED FILTER PANEL */
.spb-adv-filter { background:#f9fafb; border-bottom:1px solid #e5e7eb; padding:10px 16px; display:flex; flex-direction:column; gap:8px; }
.spb-af-row { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.spb-af-field { display:flex; flex-direction:column; gap:3px; flex:1; min-width:120px; }
.spb-af-field.spb-af-short { flex:0 0 130px; }
.spb-af-lbl { font-size:9px; letter-spacing:1px; color:#9ca3af; font-weight:600; text-transform:uppercase; }
.spb-af-inp { height:32px; padding:0 10px; border:1px solid #e5e7eb; border-radius:5px; font-size:11px; font-family:'Oswald',sans-serif; color:#111; background:#fff; outline:none; width:100%; box-sizing:border-box; }
.spb-af-inp:focus { border-color:#0d0d0d; }
select.spb-af-inp { padding:0 8px; }
.spb-af-btns { display:flex; gap:6px; align-items:flex-end; flex-shrink:0; }


/* TABLE */
#spb-table-wrap { flex:1; display:flex; flex-direction:column; }
.spb-tbl-wrap { flex:1; overflow-x:auto; background:#fff; }
.spb-tbl { width:100%; border-collapse:collapse; font-size:12px; }
.spb-tbl thead { background:#f9fafb; position:sticky; top:0; z-index:2; }
.spb-tbl th { padding:11px 16px; text-align:left; font-size:9px; font-weight:700; color:#9ca3af; letter-spacing:1px; text-transform:uppercase; border-bottom:2px solid #e5e7eb; white-space:nowrap; }
.spb-tbl td { padding:13px 16px; border-bottom:1px solid #efefef; vertical-align:middle; }
.spb-tbl tbody tr { border-left:3px solid transparent; transition:all 0.1s; }
.spb-tbl tbody tr:hover { background:#f8f9fa; border-left-color:#0d0d0d; }
.spb-tbl tbody tr:last-child td { border-bottom:none; }

/* TYPE TAGS */
.spb-type-tag { font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; letter-spacing:0.5px; text-transform:uppercase; display:inline-block; }
.spb-type-tag.inv { background:#f0f0f0; color:#0d0d0d; border:1px solid #d1d5db; }
.spb-type-tag.qt  { background:#fff; color:#9ca3af; border:1px solid #e5e7eb; }

/* ACTION BUTTONS */
.spb-act-btn { padding:5px 12px; border:1px solid #e5e7eb; border-radius:5px; background:#fff; font-size:10px; font-family:'Oswald',sans-serif; letter-spacing:0.8px; cursor:pointer; color:#374151; transition:all 0.12s; white-space:nowrap; text-decoration:none; display:inline-block; }
.spb-act-btn:hover { background:#f3f4f6; border-color:#d1d5db; color:#0d0d0d; }
.spb-act-btn.primary { background:#0d0d0d; color:#fff; border-color:#0d0d0d; }
.spb-act-btn.primary:hover { background:#333; }
.spb-act-btn.convert { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.spb-act-btn.convert:hover { background:#dbeafe; }
.spb-act-btn.convert::before { content:''; display:inline-block; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid #2563eb; margin-right:5px; vertical-align:middle; }

/* EMPTY + FOOTER */
.spb-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px 20px; color:#9ca3af; font-size:12px; letter-spacing:0.3px; }
.spb-footer-row { padding:12px 16px; border-top:1px solid #f0f0f0; font-size:11px; color:#9ca3af; display:flex; align-items:center; gap:8px; background:#fafafa; }

/* ══════════════════════════════════
   POS GLOBAL UI IMPROVEMENTS
   ══════════════════════════════════ */

/* Topbar separation */

/* Left nav shadow handled in main .sp-sidebar rule */

/* Search bar - clean bordered */
.sp-search-wrap {
  border: 1.5px solid var(--sp-g100);
  border-radius: 10px;
  box-shadow: var(--sp-shadow-xs);
  background: #fff;
  overflow: hidden;
}
.sp-search-input {
  border: none !important;
  box-shadow: none !important;
}
.sp-search-input:focus {
  box-shadow: none !important;
}

/* Category pills - cleaner */
.sp-cat-btn {
  border: 1px solid #e8e8e8 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.sp-cat-btn.active {
  border-color: #0d0d0d !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* Bill panel - stronger left border */
.sp-bill-panel {
  border-left: 1.5px solid #e8e8e8 !important;
  box-shadow: -4px 0 16px rgba(0,0,0,0.04) !important;
}

/* Customer row - bordered card */
.sp-cust-row {
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  margin: 12px 14px 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.sp-cust-row:hover {
  border-color: #0d0d0d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Totals section - top border separator */
.sp-totals-section {
  border-top: 1.5px solid #e8e8e8 !important;
  background: #fafafa !important;
}

/* GST rows - subtle bg */
.sp-gst-row { background: transparent !important; }

/* Payment buttons row - top border */
.sp-payment-section {
  border-top: 1.5px solid #e8e8e8 !important;
  padding: 16px 22px 12px !important;
}

/* Charge button - premium */
#sp-charge-btn {
  box-shadow: 0 4px 14px rgba(13,13,13,0.25) !important;
  letter-spacing: 1.5px !important;
}
#sp-charge-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(13,13,13,0.35) !important;
  transform: translateY(-1px) !important;
}

/* Tab content - bg */
.sp-tab-content {
  background: #f8f8f8 !important;
}
#sp-tab-pos.sp-tab-content.active {
  background: #f5f4f2 !important;
}



/* v4.18 — F5: Excl. GST label on pre-tax prices */
.price-excl-gst {
  font-size: 10px;
  color: #9ca3af;
  margin-left: 4px;
  font-weight: 400;
  font-family: Inter, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   7-INCH TABLET LANDSCAPE  (600–900px wide, landscape)
   iPad Mini landscape, Samsung Tab A7, Lenovo Tab M7 etc.
══════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:1024px) and (orientation:landscape) {
  :root {
    --sp-bill: 280px;
    --sp-nav: 50px;
  }

  /* Sidebar — slim icon-only vertical nav */
  .sp-sidebar { width:var(--sp-nav) !important; }
  .sp-nav-item span { display:none; }
  .sp-sidebar-logo { width:var(--sp-nav); }
  .sp-sidebar-logo img { width:28px; height:28px; }

  /* Topbar — compact */
  .sp-topbar { padding:0 10px; gap:8px; }
  .sp-topbar-title { font-size:12px; }
  .sp-topbar-sub { display:none; }
  .sp-action-btn { padding:0 10px; font-size:9px; gap:5px; height:32px; }
  .sp-action-btn svg { width:13px; height:13px; }
  .sp-topbar-actions { gap:4px; }

  /* Product grid — 3 per row */
  .sp-product-grid { grid-template-columns:repeat(3,1fr) !important; }
  .sp-prod-name { font-size:10px; }
  .sp-prod-price { font-size:12px; }

  /* Bill panel */
  .sp-bill-panel { width:var(--sp-bill) !important; }
  .sp-bill-header { padding:10px 14px; }
  .sp-bill-title { font-size:11px; }

  /* Step1 customer row */
  .sp-cust-row { padding:10px 14px; }
  .sp-cust-name { font-size:12px; }
  .sp-cust-phone { font-size:10px; }

  /* Cart items */
  .sp-cart-item { padding:8px 12px; }
  .sp-ci-name { font-size:10.5px; }
  .sp-ci-price { font-size:11px; }

  /* Proceed button */
  .sp-proceed-btn { height:44px; margin:8px 12px 12px; font-size:11px; letter-spacing:2px; }

  /* Step2 */
  .sp-step2-header { padding:10px 14px; }
  .sp-back-btn { height:32px; font-size:9.5px; padding:0 12px; }
  .sp-discount-section { padding:10px 14px; }
  .sp-totals { padding:10px 14px 6px; }
  .sp-total-row { font-size:11px; }
  .sp-grand .sp-total-row span { font-size:13px; }
  .sp-pay-methods { gap:6px; }
  .sp-pay-btn { height:36px; font-size:10px; }
  .sp-pay-sec-btn { height:32px; font-size:9px; }
  .sp-charge-btn { height:44px; font-size:11px; }

  /* Search bar */
  .sp-search-bar { padding:6px 10px; height:38px; }
  .sp-search-input { font-size:12px; }

  /* Category pills */
  .sp-cats { padding:8px 10px; gap:6px; }
  .sp-cat-pill { padding:5px 12px; font-size:9px; }
}

/* ══════════════════════════════════════════════════════════
   7-INCH TABLET PORTRAIT  (600–800px, portrait)
══════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:800px) and (orientation:portrait) {
  :root {
    --sp-bill: 260px;
    --sp-nav: 50px;
  }
  .sp-nav-item span { display:none; }
  .sp-sidebar { width:var(--sp-nav) !important; }
  .sp-sidebar-logo { width:var(--sp-nav); }
  .sp-product-grid { grid-template-columns:repeat(2,1fr) !important; }
  .sp-bill-panel { width:var(--sp-bill) !important; }
  .sp-action-btn { padding:0 8px; font-size:8.5px; }
  .sp-topbar-actions > *:not(.sp-session-btn) { display:none; }
  .sp-proceed-btn { height:44px; }
  .sp-charge-btn { height:44px; }
}


/* ═══ MOBILE  ≤767px ═══ */
@media (max-width: 767px) {

  /* ── App shell ── */
  #swatin-pos-app { flex-direction:column !important; overflow:hidden !important; height:100vh !important; }
  .sp-sidebar { display:none !important; }
  .sp-main { width:100% !important; flex:1 !important; display:flex !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; }

  /* ── Topbar ── */
  .sp-topbar {
    height:54px !important; padding:0 14px !important;
    flex-shrink:0 !important; border-bottom:1px solid #f0f0f0 !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    background:#fff !important; z-index:10 !important;
  }
  #sp-pos-actions { display:none !important; }
  .sp-topbar-title { font-size:0 !important; }
  .sp-topbar-title::before { content:"POS"; font-size:16px !important; font-weight:700 !important; font-family:'Oswald',sans-serif !important; letter-spacing:1px !important; color:#1c1c1e !important; }
  .sp-topbar-sub { font-size:9px !important; color:#9ca3af !important; margin-top:1px !important; }
  .sp-user-chip > div:last-child { display:none !important; }
  .sp-user-avatar { width:34px !important; height:34px !important; min-width:34px !important; border-radius:50% !important; font-size:12px !important; overflow:hidden !important; }

  /* ── Content area ── */
  .sp-content { flex:1 !important; overflow:hidden !important; display:flex !important; min-height:0 !important; }
  #sp-tab-pos.active { flex-direction:column !important; }

  /* ── Products panel — scrollable container, pagination flows naturally after grid ── */
  .sp-products-panel {
    flex:1 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    padding:0 !important;
    gap:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    /* Bottom padding = bill peek height + safe area — so pagination never hides behind drawer */
    padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* ── Sticky search bar ── */
  .sp-products-panel > .sp-search-row {
    position:sticky !important;
    top:0 !important;
    z-index:12 !important;
    background:#f5f4f2 !important;
    padding:8px 12px 6px !important;
    margin:0 !important;
    flex-shrink:0 !important;
    box-shadow:0 1px 0 rgba(0,0,0,0.06) !important;
  }
  .sp-products-panel > .sp-search-row .sp-search-wrap {
    border-radius:12px !important;
    border:1.5px solid #e5e5e5 !important;
    background:#fff !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.06) !important;
  }
  .sp-products-panel > .sp-search-row .sp-search-input {
    height:40px !important;
    font-size:13px !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .sp-products-panel > .sp-search-row .sp-filter-btn {
    width:40px !important;
    height:40px !important;
    flex-shrink:0 !important;
    border-radius:12px !important;
    background:#fff !important;
    border:1.5px solid #e5e5e5 !important;
    box-shadow:0 1px 4px rgba(0,0,0,0.06) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* ── Sticky category pills ── */
  /* search row = 8+6 padding + 40 input = 54px */
  .sp-products-panel > .sp-cats {
    position:sticky !important;
    top:54px !important;
    z-index:11 !important;
    background:#f5f4f2 !important;
    padding:6px 12px 8px !important;
    margin:0 !important;
    flex-shrink:0 !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:7px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.05) !important;
  }
  .sp-products-panel > .sp-cats::-webkit-scrollbar { display:none !important; }
  .sp-products-panel > .sp-cats .sp-cat {
    flex-shrink:0 !important;
    white-space:nowrap !important;
    padding:7px 16px !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:0.8px !important;
    border-radius:20px !important;
    border:1.5px solid #e0e0e0 !important;
    background:#fff !important;
    color:#555 !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.06) !important;
    transition:all 0.15s ease !important;
  }
  .sp-products-panel > .sp-cats .sp-cat.active {
    background:#0d0d0d !important;
    color:#fff !important;
    border-color:#0d0d0d !important;
    box-shadow:0 3px 10px rgba(0,0,0,0.2) !important;
  }
  /* Product grid: small top margin after sticky headers */
  .sp-product-grid {
    margin-top:10px !important;
  }
  /* Grid: does NOT scroll independently — panel does */
  .sp-product-grid {
    flex:none !important;
    overflow:visible !important;
    overflow-y:visible !important;
    overflow-x:hidden !important;
  }
  /* Pagination: sits right after grid, no extra padding needed */
  .sp-pagination {
    flex-shrink:0 !important;
    padding:10px 12px 6px !important;
    margin-bottom:0 !important;
  }

  /* ── Bill-mode tabs — hide on mobile (accessed inside drawer) ── */
  .sp-bill-tabs { display:none !important; }

  /* ── Search bar ── */
  .sp-search-row { gap:6px !important; padding:0 12px !important; }
  .sp-search-input { height:38px !important; font-size:13px !important; }
  .sp-search-wrap { border-radius:10px !important; }

  /* ── Category pills ── */
  .sp-cats {
    flex-wrap:nowrap !important; overflow-x:auto !important;
    scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
    padding:0 12px 2px !important;
  }
  .sp-cats::-webkit-scrollbar { display:none !important; }
  .sp-cat { flex-shrink:0 !important; white-space:nowrap !important; padding:6px 14px !important; font-size:10px !important; }
  .sp-cat-count { display:none !important; }

  /* ── Product grid — 2 col ── */
  .sp-product-grid {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
    padding:0 12px !important;
    overflow:visible !important;
    overflow-x:hidden !important;
    flex:none !important;
  }

  /* ── Product cards ── */
  .sp-product-card { border-radius:12px !important; }
  .sp-prod-name { font-size:11.5px !important; min-height:auto !important; -webkit-line-clamp:2 !important; }
  .sp-prod-sku  { font-size:9px !important; }
  .sp-prod-price { font-size:13px !important; font-weight:700 !important; }
  .sp-prod-info  { padding:8px 10px 10px !important; }
  .sp-prod-img { width:100% !important; aspect-ratio:1/1 !important; overflow:hidden !important; }
  .sp-prod-img img { width:100% !important; height:100% !important; object-fit:cover !important; padding:4px !important; }

  /* ── Pagination ── */
  .sp-page-btn { width:30px !important; height:30px !important; font-size:11px !important; }

  /* ── BILL PANEL — slide-up drawer ── */
  .sp-bill-panel {
    position:fixed !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important;
    height:78vh !important;
    border-left:none !important;
    border-radius:20px 20px 0 0 !important;
    z-index:2000 !important;
    background:#fff !important;
    box-shadow:0 -6px 30px rgba(0,0,0,0.13) !important;
    /* collapsed: only 68px peek = pill(14) + header(54) */
    transform:translateY(calc(100% - 68px)) !important;
    transition:transform .32s cubic-bezier(.32,1,.5,1) !important;
    overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
  }
  .sp-bill-panel.mob-open { transform:translateY(0) !important; }

  /* Step 2 header must have solid white background */
  .sp-step2-header {
    background:#fff !important;
    flex-shrink:0 !important;
    border-bottom:1px solid #f0f0f0 !important;
  }

  /* Sticky search + cats must stay BELOW fixed bill panel (z-index:1000).
     They still work as sticky within their scroll container at z-index 2/1. */
  .sp-products-panel > .sp-search-row {
    z-index:2 !important;
  }
  .sp-products-panel > .sp-cats {
    z-index:1 !important;
  }

  /* Drag handle pill */
  .sp-bill-panel::before {
    content:"" !important; display:block !important;
    width:40px !important; height:4px !important;
    background:#d1d1d6 !important; border-radius:2px !important;
    margin:10px auto 0 !important; flex-shrink:0 !important;
  }

  /* Bill header — tap zone */
  .sp-bill-header {
    height:54px !important; min-height:54px !important;
    padding:0 16px !important; flex-shrink:0 !important;
    border-bottom:1px solid #f2f2f7 !important;
    cursor:pointer !important;
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  .sp-bill-title { font-size:13px !important; letter-spacing:1px !important; }
  .sp-bill-count { width:20px !important; height:20px !important; font-size:10px !important; }

  /* Bill body scroll */
  .sp-step1-scroll {
    flex:1 !important; overflow-y:auto !important;
    min-height:0 !important; -webkit-overflow-scrolling:touch !important;
  }

  /* Customer row */
  .sp-cust-row { margin:10px 12px 0 !important; padding:10px 14px !important; }

  /* Footer buttons */
  .sp-step1-footer {
    flex-shrink:0 !important;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background:#fff !important; border-top:1px solid #f0f0f0 !important;
  }
  .sp-step2-footer {
    flex-shrink:0 !important;
    padding:10px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background:#fff !important; border-top:1px solid #f0f0f0 !important;
  }
  .sp-proceed-btn {
    width:100% !important; height:52px !important; margin:0 !important;
    font-size:13px !important; font-weight:600 !important; letter-spacing:2px !important;
    border-radius:14px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    box-sizing:border-box !important;
  }
  .sp-charge-btn {
    height:52px !important; margin:0 !important;
    border-radius:14px !important; font-size:13px !important; letter-spacing:2px !important;
  }

  /* Payment buttons */
  .sp-pay-methods { grid-template-columns:repeat(3,1fr) !important; gap:7px !important; }
  .sp-pay-btn { height:42px !important; font-size:10.5px !important; border-radius:10px !important; }
  .sp-pay-secondary { gap:7px !important; }
  .sp-pay-sec-btn { height:36px !important; font-size:9.5px !important; border-radius:8px !important; }

  /* Step 2 */
  .sp-checkout-sticky { flex:1 !important; overflow-y:auto !important; min-height:0 !important; -webkit-overflow-scrolling:touch !important; }
  .sp-step2-header { padding:10px 14px !important; }
  .sp-discount-section { padding:12px 16px !important; }
  .sp-totals { padding:12px 16px 8px !important; }
  .sp-total-row { font-size:12px !important; }

  /* Modals */
  .sp-modal-overlay { padding:0 !important; align-items:flex-end !important; }
  .sp-modal { border-radius:20px 20px 0 0 !important; max-height:88vh !important; width:100% !important; max-width:100% !important; }

  /* Scanner button */
  .sp-mob-scan-btn-right {
    display:inline-flex !important;
    width:36px !important; height:36px !important; border-radius:10px !important;
    align-items:center !important; justify-content:center !important;
    background:#f2f2f7 !important; border:none !important;
    color:#1c1c1e !important; cursor:pointer !important; flex-shrink:0 !important;
  }

  /* Backdrop */
  #sp-mob-backdrop {
    display:block !important; position:fixed !important; inset:0 !important;
    background:rgba(0,0,0,.45) !important; z-index:1999 !important;
    opacity:0 !important; pointer-events:none !important;
    transition:opacity .3s ease !important;
    backdrop-filter:blur(2px) !important;
  }
  #sp-mob-backdrop.mob-backdrop-show { opacity:1 !important; pointer-events:all !important; }

  #sp-tab-pos { padding-bottom:0 !important; }

}

@media (min-width:768px) {
  .sp-mob-scan-btn-right { display:none !important; }
  #sp-mob-backdrop { display:none !important; }
  .sp-bill-panel { transform:none !important; position:relative !important; height:auto !important; }
  .sp-bill-panel::before { display:none !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE BILL-MODE TABS (POS / QUOTATION / MEMO)
   Only visible inside bill drawer on mobile
══════════════════════════════════════════════════════ */
.sp-mob-bill-mode-tabs {
  display: none; /* hidden on desktop */
}

@media (max-width: 767px) {

  /* Bill-mode tabs — shown inside drawer, below header */
  .sp-mob-bill-mode-tabs {
    display: flex !important;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    padding: 0 16px;
    gap: 0;
  }
  .sp-mob-bm-tab {
    flex: 1;
    height: 40px;
    border: none;
    background: none;
    font-family: 'Oswald', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9ca3af;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-mob-bm-tab.active {
    color: #0d0d0d;
    border-bottom-color: #0d0d0d;
    font-weight: 600;
  }
  .sp-mob-bm-tab:hover { color: #374151; }

  /* Desktop bill-mode tabs — keep hidden on mobile (they're in product panel) */
  .sp-bill-tabs { display: none !important; }

  /* ── Step1 footer — premium spacing matching Proceed btn ── */
  .sp-step1-footer {
    flex-shrink: 0 !important;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1.5px solid #f0f0f0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06) !important;
  }
  .sp-proceed-btn {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  /* ── Product grid — definitive clip fix ── */
  .sp-products-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .sp-products-panel > .sp-search-row,
  .sp-products-panel > .sp-cats,
  .sp-products-panel > .sp-pagination,
  .sp-products-panel > .sp-bill-tabs {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  .sp-product-grid {
    width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 0 !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    flex: none !important;
  }
  .sp-product-card {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── Charge btn footer same style as Step1 ── */
  .sp-step2-footer {
    flex-shrink: 0 !important;
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1.5px solid #f0f0f0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06) !important;
  }
  .sp-charge-btn {
    height: 52px !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

}

/* ══════════════════════════════════════════════════════
   PROFILE MODAL — mobile responsive fixes
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Profile modal: full screen sheet on mobile */
  #sp-profile-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #sp-profile-modal > div {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
  }
  /* Header top-left rounded only on mobile sheet */
  #sp-profile-modal > div > div:first-child {
    border-radius: 20px 20px 0 0 !important;
  }
  /* Stats 2-col on mobile instead of 3 */
  #sp-prof-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Table: hide date column + make amount/status not overflow */
  #sp-prof-recent table {
    font-size: 11px !important;
  }
  #sp-prof-recent thead th:last-child,
  #sp-prof-recent tbody td:last-child {
    display: none !important; /* hide DATE col on mobile */
  }
  #sp-prof-recent thead th,
  #sp-prof-recent tbody td {
    padding: 8px 8px !important;
    font-size: 10px !important;
  }
  /* Footer buttons: wrap on small screens */
  #sp-profile-modal .sp-prof-footer {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #sp-profile-modal .sp-prof-footer a,
  #sp-profile-modal .sp-prof-footer button {
    flex: 1 !important;
    min-width: 120px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE NAV DRAWER
══════════════════════════════════════════════════════ */
.sp-mob-nav-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  color:rgba(255,255,255,0.65);
  font-family:'Oswald',sans-serif; font-size:12px;
  font-weight:500; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:background 0.14s ease, color 0.14s ease;
  -webkit-tap-highlight-color:transparent;
}
.sp-mob-nav-item:hover,
.sp-mob-nav-item:active { background:rgba(255,255,255,0.08); color:#fff; }
.sp-mob-nav-item.sp-mob-nav-active {
  background:rgba(255,255,255,0.12); color:#fff;
}
.sp-mob-nav-item svg { flex-shrink:0; opacity:0.8; }
.sp-mob-nav-item.sp-mob-nav-active svg { opacity:1; }

/* Show hamburger + topbar left as flex row on mobile */
@media (max-width:767px) {
  #sp-mob-menu-btn { display:flex !important; }
  .sp-topbar-left { display:flex !important; align-items:center !important; gap:0 !important; }
}

/* ══════════════════════════════════════════════════════
   v6.08 — BILLING + CUSTOMER MOBILE RESPONSIVE
══════════════════════════════════════════════════════ */

/* ── Billing: mobile card layout ── */
.spb-mob-card {
  background:#fff;
  border-radius:12px;
  border:1px solid #f0f0f0;
  margin:0 12px 10px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.spb-mob-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.spb-mob-card-num {
  font-family:'Courier New',monospace;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid;
}
.spb-mob-card-num.inv { color:#2563eb; border-color:#bfdbfe; }
.spb-mob-card-num.qt  { color:#7c3aed; border-color:#ddd6fe; }
.spb-mob-card-num.sr  { color:#d97706; border-color:#fde68a; }
.spb-mob-card-status {
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:20px;
  letter-spacing:0.5px;
  white-space:nowrap;
  flex-shrink:0;
}
.spb-mob-card-mid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.spb-mob-card-cust {
  font-size:13px;
  font-weight:600;
  color:#0d0d0d;
  font-family:'Oswald',sans-serif;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}
.spb-mob-card-amount {
  font-size:16px;
  font-weight:700;
  color:#0d0d0d;
  font-family:'Oswald',sans-serif;
  flex-shrink:0;
}
.spb-mob-card-meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.spb-mob-card-date {
  font-size:10px;
  color:#9ca3af;
}
.spb-mob-card-balance {
  font-size:11px;
  font-weight:700;
  color:#dc2626;
}
.spb-mob-card-actions {
  display:flex;
  gap:7px;
  margin-top:2px;
}
.spb-mob-card-actions .spb-act-btn {
  flex:1;
  text-align:center;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  font-size:10px;
}
.spb-mob-wrap {
  padding:10px 0 80px;
}
.spb-mob-stats {
  display:flex;
  gap:10px;
  padding:10px 12px 6px;
  overflow-x:auto;
}
.spb-mob-stat-card {
  flex:1;
  min-width:120px;
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:10px;
  padding:10px 12px;
}
.spb-mob-stat-label {
  font-size:8px;
  letter-spacing:1.2px;
  color:#9ca3af;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:3px;
}
.spb-mob-stat-val {
  font-size:15px;
  font-weight:700;
  color:#0d0d0d;
  font-family:'Oswald',sans-serif;
}

/* ── Billing tabs: horizontal scroll on mobile ── */
@media (max-width:767px) {
  .spb-tabs-row {
    margin:0 !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    flex-shrink:0 !important;
  }
  .spb-tabs-row::-webkit-scrollbar { display:none; }
  .spb-tab { padding:10px 12px !important; font-size:10px !important; }

  /* Hide desktop table on mobile */
  .spb-tbl-wrap { display:none !important; }

  /* Show mobile cards */
  .spb-mob-wrap { display:block !important; }

  /* Customer tab: hide GST/TYPE columns on mobile */
  .sp-ct-col-header span:nth-child(3),
  .sp-ct-col-header span:nth-child(4) { display:none !important; }
  .sp-cust-tab-row > .sp-ct-gst-col,
  .sp-cust-tab-row > .sp-ct-type-col { display:none !important; }
  .sp-ct-actions-col { gap:4px !important; }
  .sp-ct-btn { padding:5px 10px !important; font-size:9px !important; }

  /* Billing stats strip on mobile */
  #spb-stats-strip { display:flex !important; }
}

/* Hide mobile cards on desktop */
@media (min-width:768px) {
  .spb-mob-wrap { display:none !important; }
  #spb-stats-strip { display:none !important; }
}