/* ============================================================
   SocialShop Africa — Design System v3.0
   Inter · Premium Glass · SVG Icons · Spring Animations
   ============================================================ */

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

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --primary:        #F97316;
  --primary-dk:     #EA580C;
  --primary-lt:     #FFF7ED;
  --primary-glow:   rgba(249,115,22,.20);
  --success:        #10B981;
  --success-lt:     #ECFDF5;
  --warning:        #F59E0B;
  --warning-lt:     #FFFBEB;
  --danger:         #EF4444;
  --danger-lt:      #FEF2F2;
  --indigo:         #6366F1;
  --indigo-lt:      #EEF2FF;
  --text:           #111827;
  --text-2:         #374151;
  --text-3:         #6B7280;
  --text-4:         #9CA3AF;
  --border:         #F3F4F6;
  --border-md:      #E5E7EB;
  --surface:        #FFFFFF;
  --bg:             #F9FAFB;
  --glass:          rgba(255,255,255,.82);
  --glass-border:   rgba(255,255,255,.7);
  --blur:           blur(24px);
  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:      0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.05);
  --shadow-primary: 0 6px 24px rgba(249,115,22,.30);
  --shadow-success: 0 6px 20px rgba(16,185,129,.25);
  --r:              18px;
  --r-sm:           12px;
  --r-xs:           8px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

/* ─── BODY / SCENE ───────────────────────────────────────── */
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:#fafafa;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 20px 90px;
  position:relative; overflow-x:hidden;
}

/* subtle mesh background */
body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 10%, rgba(249,115,22,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(16,185,129,.05) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(99,102,241,.04) 0%, transparent 60%);
}

/* ─── PHONE FRAME ────────────────────────────────────────── */
.phone-container {
  position:relative; z-index:1;
  width:393px;
  background:#1C1C1E;
  border-radius:54px;
  padding:14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 50px 100px rgba(0,0,0,.28),
    0 20px 40px rgba(0,0,0,.14);
  animation:phoneIn .7s cubic-bezier(.34,1.4,.64,1) both;
}
/* side buttons */
.phone-container::before { content:''; position:absolute; top:80px; right:-3px; width:3px; height:32px; background:#2C2C2E; border-radius:0 2px 2px 0; }
.phone-container::after  { content:''; position:absolute; top:130px; right:-3px; width:3px; height:56px; background:#2C2C2E; border-radius:0 2px 2px 0; }
@keyframes phoneIn { from{opacity:0;transform:translateY(28px) scale(.96)} to{opacity:1;transform:none} }

/* Dynamic Island */
.phone-screen::before {
  content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:34px; background:#1C1C1E; border-radius:0 0 22px 22px;
  z-index:20;
}

.phone-screen {
  background:var(--bg);
  border-radius:42px;
  overflow:hidden;
  height:762px;
  position:relative;
  display:flex; flex-direction:column;
}

/* ─── STATUS BAR ─────────────────────────────────────────── */
.status-bar {
  height:46px; flex-shrink:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 28px 9px;
  font-size:12px; font-weight:600; letter-spacing:-.1px; z-index:10;
}
.status-bar.dark  { background:#0F172A; color:#fff; }
.status-bar.light { background:#fff;    color:var(--text); }
.status-bar.clear { background:transparent; color:#fff; position:absolute; top:0; left:0; right:0; }
.status-bar.glass { background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--text); border-bottom:1px solid var(--glass-border); }
.status-icons { display:flex; align-items:center; gap:5px; }

/* ─── APP BAR ────────────────────────────────────────────── */
.app-bar {
  display:flex; align-items:center; gap:12px;
  padding:10px 20px 12px; flex-shrink:0;
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--border);
}
.app-bar.flat { background:transparent; border-bottom:none; backdrop-filter:none; }
.app-bar-title { font-size:17px; font-weight:700; flex:1; color:var(--text); letter-spacing:-.3px; }

.icon-btn {
  width:36px; height:36px; border-radius:50%;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s;
  color:var(--text); background:rgba(0,0,0,.05); flex-shrink:0;
  text-decoration:none;
}
.icon-btn:hover { background:rgba(0,0,0,.09); }
.icon-btn:active { transform:scale(.92); }
.icon-btn.primary { background:var(--primary); color:#fff; box-shadow:var(--shadow-primary); }
.icon-btn.primary:hover { background:var(--primary-dk); }

/* ─── SCROLL AREA ────────────────────────────────────────── */
.scroll-area {
  flex:1; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
}
.scroll-area::-webkit-scrollbar { display:none; }

/* ─── BOTTOM NAV ─────────────────────────────────────────── */
.bottom-nav {
  height:82px; flex-shrink:0;
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--border);
  display:flex; align-items:flex-start; padding-top:8px;
  box-shadow:0 -2px 16px rgba(0,0,0,.05);
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:4px 0; cursor:pointer; text-decoration:none;
  color:var(--text-4); transition:color .2s;
  position:relative;
}
.nav-item.active { color:var(--primary); }
.nav-item.active::after {
  content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:28px; height:3px; background:var(--primary); border-radius:0 0 4px 4px;
}
.nav-item svg { transition:transform .25s cubic-bezier(.34,1.6,.64,1); }
.nav-item.active svg { transform:scale(1.12); }
.nav-label { font-size:10px; font-weight:600; letter-spacing:.2px; }
.nav-badge {
  position:absolute; top:2px; right:10px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--danger); border-radius:8px; border:2px solid var(--surface);
  font-size:9px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 20px; border-radius:14px;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:-.2px;
  border:none; cursor:pointer; text-decoration:none; width:100%;
  transition:all .2s cubic-bezier(.34,1.2,.64,1);
}
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-dk)); color:#fff; box-shadow:var(--shadow-primary); }
.btn-primary:hover { box-shadow:0 10px 32px rgba(249,115,22,.40); transform:translateY(-1px); }
.btn-success { background:linear-gradient(135deg,#10B981,#059669); color:#fff; box-shadow:var(--shadow-success); }
.btn-secondary { background:var(--text); color:#fff; box-shadow:var(--shadow-sm); }
.btn-outline { background:transparent; color:var(--primary); border:1.5px solid rgba(249,115,22,.3); }
.btn-outline:hover { background:var(--primary-lt); }
.btn-ghost { background:rgba(0,0,0,.05); color:var(--text-3); }
.btn-glass { background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--text); border:1px solid var(--glass-border); box-shadow:var(--shadow-sm); }
.btn-sm { padding:9px 16px; font-size:13px; border-radius:10px; width:auto; }
.btn-xs { padding:6px 14px; font-size:12px; border-radius:8px; width:auto; }

/* ─── INPUTS ─────────────────────────────────────────────── */
.field-group  { margin-bottom:16px; }
.field-label  { font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:7px; display:block; }
.field {
  width:100%; padding:14px 16px;
  border:1.5px solid var(--border-md); border-radius:var(--r-sm);
  font-family:'Inter',sans-serif; font-size:15px; font-weight:500; color:var(--text);
  background:var(--surface); outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.field:focus { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-glow); background:#fff; }
.field::placeholder { color:var(--text-4); font-weight:400; }
.field-icon-wrap { position:relative; }
.field-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-4); pointer-events:none; }
.field-icon-wrap .field { padding-left:44px; }
textarea.field { resize:none; line-height:1.6; }

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background:var(--surface); border-radius:var(--r);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  padding:18px; transition:box-shadow .2s, transform .2s;
}
.card:hover { box-shadow:var(--shadow-md); }

.glass-card {
  background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border-radius:var(--r); border:1px solid var(--glass-border);
  box-shadow:var(--shadow-sm); padding:18px;
}

/* ─── CHIPS ──────────────────────────────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
}
.chip-orange { background:rgba(249,115,22,.1); color:var(--primary); border:1px solid rgba(249,115,22,.18); }
.chip-green  { background:rgba(16,185,129,.1);  color:var(--success); border:1px solid rgba(16,185,129,.18); }
.chip-yellow { background:rgba(245,158,11,.1);  color:var(--warning); border:1px solid rgba(245,158,11,.18); }
.chip-red    { background:rgba(239,68,68,.1);   color:var(--danger);  border:1px solid rgba(239,68,68,.18); }
.chip-indigo { background:rgba(99,102,241,.1);  color:var(--indigo);  border:1px solid rgba(99,102,241,.18); }
.chip-gray   { background:rgba(107,114,128,.08); color:var(--text-3); border:1px solid rgba(107,114,128,.15); }

/* ─── AVATAR ─────────────────────────────────────────────── */
.avatar { border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; overflow:hidden; }
.av-sm  { width:36px; height:36px; font-size:14px; }
.av-md  { width:48px; height:48px; font-size:18px; }
.av-lg  { width:64px; height:64px; font-size:24px; }
.av-xl  { width:80px; height:80px; font-size:30px; }
.av-or  { background:linear-gradient(135deg,#FED7AA,#FB923C); color:#7C2D12; }
.av-gr  { background:linear-gradient(135deg,#A7F3D0,#34D399); color:#064E3B; }
.av-pu  { background:linear-gradient(135deg,#DDD6FE,#A78BFA); color:#3B0764; }
.av-bl  { background:linear-gradient(135deg,#BAE6FD,#38BDF8); color:#0C4A6E; }

/* ─── TOGGLE SWITCH ──────────────────────────────────────── */
.toggle {
  width:46px; height:26px; border-radius:13px; background:var(--success);
  position:relative; cursor:pointer;
  transition:background .25s; flex-shrink:0;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.12);
}
.toggle::after {
  content:''; position:absolute; top:3px; right:3px;
  width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:right .25s cubic-bezier(.34,1.4,.64,1);
}
.toggle.off { background:#D1D5DB; }
.toggle.off::after { right:auto; left:3px; }

/* ─── DIVIDER ────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:4px 0; }

/* ─── SECTION LABEL ──────────────────────────────────────── */
.section-label {
  font-size:11px; font-weight:800; color:var(--text-4);
  text-transform:uppercase; letter-spacing:1.8px; margin-bottom:12px;
}

/* ─── PREVIEW NAV ────────────────────────────────────────── */
.preview-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border-md);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; gap:12px;
  box-shadow:0 -4px 24px rgba(0,0,0,.06);
}
.preview-nav a {
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--text-3);
  text-decoration:none; padding:8px 16px; border-radius:10px;
  background:var(--bg); border:1px solid var(--border-md);
  display:flex; align-items:center; gap:6px;
  transition:all .15s;
}
.preview-nav a:hover { background:var(--surface); color:var(--text); border-color:var(--border-md); box-shadow:var(--shadow-sm); }
.preview-nav .screen-id {
  font-size:13px; font-weight:700; color:var(--primary);
  background:rgba(249,115,22,.07); padding:7px 16px; border-radius:20px;
  border:1px solid rgba(249,115,22,.18); white-space:nowrap;
}

/* ─── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes scaleIn  { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideR   { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:none} }
@keyframes popBounce{ from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer  { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.4)} 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} }
@keyframes breathe  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

.a-up   { animation:fadeUp   .5s cubic-bezier(.34,1.1,.64,1) both; }
.a-in   { animation:fadeIn   .4s ease both; }
.a-scale{ animation:scaleIn  .45s cubic-bezier(.34,1.2,.64,1) both; }
.a-pop  { animation:popBounce .55s cubic-bezier(.34,1.56,.64,1) both; }

/* stagger helpers */
.d1{animation-delay:.05s} .d2{animation-delay:.10s} .d3{animation-delay:.15s}
.d4{animation-delay:.20s} .d5{animation-delay:.25s} .d6{animation-delay:.30s}
.d7{animation-delay:.35s} .d8{animation-delay:.40s}

/* skeleton */
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 37%,#f0f0f0 63%);
  background-size:600px 100%; animation:shimmer 1.3s linear infinite;
  border-radius:8px;
}

/* ─── PRODUCT IMAGE CARD ─────────────────────────────────── */
.prod-img {
  width:100%; aspect-ratio:1; display:flex; align-items:center;
  justify-content:center; position:relative; overflow:hidden;
}
.prod-img svg { filter:drop-shadow(0 4px 12px rgba(0,0,0,.15)); }

/* ─── UTILITIES ──────────────────────────────────────────── */
.fw-400{font-weight:400} .fw-500{font-weight:500} .fw-600{font-weight:600}
.fw-700{font-weight:700} .fw-800{font-weight:800} .fw-900{font-weight:900}
.text-primary{color:var(--primary)} .text-success{color:var(--success)}
.text-danger{color:var(--danger)}   .text-muted{color:var(--text-3)}
.text-sm{font-size:13px} .text-xs{font-size:11px} .text-lg{font-size:18px}