/*
  mandja-base.css — Sistema de Design Mandja v2
  Inclui em todas as páginas: <link rel="stylesheet" href="/mandja-base.css">
  Este ficheiro define as variáveis base. Cada página tem o seu CSS próprio em cima disto.
*/

/* ── VARIÁVEIS GLOBAIS ── */
:root {
  --primary:     #7C3AED;
  --primary2:    #6D28D9;
  --primary3:    #5B21B6;
  --lilac:       #A78BFA;
  --lilac2:      #C4B5FD;
  --price:       #C4B5FD;
  --price-dim:   rgba(196,181,253,.12);

  --green:       #10B981;
  --green2:      #059669;
  --green-dim:   rgba(16,185,129,.1);

  --red:         #EF4444;
  --red-dim:     rgba(239,68,68,.1);
  --blue:        #3B82F6;
  --blue-dim:    rgba(59,130,246,.1);
  --amber:       #F59E0B;

  --bg:          #09090d;
  --bg2:         #111118;
  --bg3:         #18181f;
  --bg4:         #242432;
  --border:      #1e1e2e;
  --border2:     #2a2a3d;
  --border3:     #363650;

  --text:        #F0EEF8;
  --text2:       #9490A8;
  --text3:       #5A5570;
  --text4:       #3a3a50;

  --shadow-sm:   0 2px 8px rgba(0,0,0,.3);
  --shadow:      0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.5);
  --glow:        0 0 20px rgba(124,58,237,.2);
}

/* Light theme */
:root[data-theme="light"] {
  --bg:    #f2f2f8;
  --bg2:   #ffffff;
  --bg3:   #f0f0f8;
  --bg4:   #e8e8f4;
  --border:  #e0e0ee;
  --border2: #d0d0e4;
  --border3: #c0c0d8;
  --text:    #1a1a2e;
  --text2:   #555570;
  --text3:   #8888a8;
  --text4:   #bbbbcc;
  --shadow:  0 4px 20px rgba(0,0,0,.08);
  --glow:    0 0 20px rgba(124,58,237,.1);
}

/* ── RESET BÁSICO ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ── TOPBAR PADRÃO ── */
.topbar {
  padding:0 24px; height:58px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:rgba(9,9,13,.85);
  backdrop-filter:blur(20px);
  position:sticky; top:0; z-index:100;
}

/* Logo */
.logo-wrap { display:flex; align-items:center; text-decoration:none; position:relative; }
.logo-text {
  font-size:22px; font-weight:700; color:var(--text);
  letter-spacing:-.5px; position:relative;
}
.logo-text .accent { color:var(--lilac); }
.logo-ball {
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--lilac); box-shadow:0 0 8px var(--lilac);
  top:-3px; left:0; animation:logoBall 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes logoBall {
  0%   {left:0px;   top:-3px}
  15%  {left:10px;  top:-9px}
  30%  {left:20px;  top:-3px}
  45%  {left:30px;  top:-9px}
  60%  {left:40px;  top:-3px}
  75%  {left:50px;  top:-9px}
  88%  {left:55px;  top:-3px}
  100% {left:0px;   top:-3px}
}

/* Botões topbar */
.topbar-right { display:flex; align-items:center; gap:8px; }
.btn-icon {
  width:36px; height:36px; border-radius:8px;
  border:1px solid var(--border2); background:transparent;
  color:var(--text2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:all .15s;
}
.btn-icon:hover { border-color:var(--primary); color:var(--primary); }
.btn-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-ghost {
  background:transparent; border:1px solid var(--border2);
  color:var(--text2); padding:0 14px; height:36px;
  border-radius:8px; font-size:13px; cursor:pointer;
  transition:all .15s; font-family:inherit;
}
.btn-ghost:hover { border-color:var(--text); color:var(--text); }
.btn-primary {
  background:var(--primary); border:none; color:white;
  padding:0 18px; height:36px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; font-family:inherit;
  box-shadow:0 0 16px rgba(124,58,237,.25);
}
.btn-primary:hover { background:var(--primary2); }
.btn-back {
  background:transparent; border:1px solid var(--border2);
  color:var(--text2); padding:0 14px; height:36px;
  border-radius:8px; font-size:13px; cursor:pointer;
  transition:all .15s; font-family:inherit;
  display:flex; align-items:center; gap:6px;
}
.btn-back:hover { border-color:var(--text); color:var(--text); }
.btn-back svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* ── PREÇOS ── */
.price, .card-price, .listing-price, .order-price,
.product-price, .fav-card-price, .prod-card-price,
.price-value, .stat-val.price {
  color:var(--price) !important;
}

/* ── BOTÕES DE ACÇÃO ── */
.btn-action {
  width:100%; padding:13px 20px;
  background:var(--primary); border:none; color:white;
  border-radius:10px; font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 0 20px rgba(124,58,237,.2);
}
.btn-action:hover { background:var(--primary2); transform:translateY(-1px); }
.btn-action:disabled { background:var(--text4); cursor:not-allowed; transform:none; box-shadow:none; }
.btn-action svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

.btn-outline {
  width:100%; padding:11px 20px;
  background:transparent; border:1.5px solid var(--border2);
  color:var(--text2); border-radius:10px; font-size:14px;
  font-weight:500; cursor:pointer; font-family:inherit;
  transition:all .15s; display:flex; align-items:center;
  justify-content:center; gap:8px;
}
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-outline svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── CARDS GENÉRICOS ── */
.card-base {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; transition:all .15s;
}
.card-base:hover { border-color:var(--border2); }

/* ── INPUTS ── */
.input {
  width:100%; padding:10px 13px;
  background:var(--bg); border:1px solid var(--border2);
  border-radius:8px; color:var(--text); font-size:13px;
  outline:none; transition:border-color .15s; font-family:inherit;
}
.input:focus { border-color:var(--primary); }
.input::placeholder { color:var(--text4); }
.input:disabled { opacity:.5; cursor:not-allowed; }

/* ── TOAST ── */
.toast {
  position:fixed; bottom:24px; right:24px;
  padding:12px 18px; border-radius:10px;
  font-size:13px; font-weight:500; z-index:9999;
  opacity:0; transition:opacity .3s; pointer-events:none;
  max-width:320px;
}
.toast.show { opacity:1; }
.toast.success { background:#0d2a1a; border:1px solid rgba(16,185,129,.4); color:var(--green); }
.toast.error   { background:#2a0d0d; border:1px solid rgba(239,68,68,.4);  color:var(--red); }
.toast.info    { background:#0d1a2a; border:1px solid rgba(59,130,246,.4);  color:var(--blue); }

/* ── EMPTY STATE ── */
.empty-state {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:48px 24px; text-align:center;
}
.empty-state svg {
  width:36px; height:36px; stroke:var(--text4);
  fill:none; stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; margin-bottom:14px;
}
.empty-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.empty-sub   { font-size:13px; color:var(--text3); margin-bottom:20px; }

/* ── STATUS PILLS ── */
.pill-pending   { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.25);  color:var(--amber); }
.pill-shipped   { background:var(--blue-dim);       border:1px solid rgba(59,130,246,.25);   color:var(--blue); }
.pill-completed { background:var(--green-dim);      border:1px solid rgba(16,185,129,.25);   color:var(--green); }
.pill-disputed  { background:rgba(167,139,250,.1);  border:1px solid rgba(167,139,250,.25);  color:var(--lilac); }
.pill-rejected  { background:var(--red-dim);        border:1px solid rgba(239,68,68,.25);    color:var(--red); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ── SELECTION ── */
::selection { background:rgba(124,58,237,.25); color:var(--text); }

/* ── LINK TAWK TAWK ─ mantém posição ── */
#tawk-bubble { z-index:999 !important; }