/* ============================================================
   MAGSAYSAY MARKETPLACE — Design Foundation
   Borrows the Unioil visual system (orange #FF6700, Saira
   Condensed display, warm-gray neutrals). Adds role accents:
   teal (seller) and purple (admin). Buyer = orange.
   ============================================================ */

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

:root {
  /* ---- Brand orange (buyer / platform) ---- */
  --unioil-orange:       #FF6700;
  --unioil-orange-press: #E25500;
  --unioil-orange-hover: #FF7B1F;
  --unioil-orange-dark:  #C24800;
  --unioil-orange-tint:  #FFE6D3;
  --unioil-orange-tint2: #FFF3E8;

  /* ---- Role accents ---- */
  --seller:        #0D9488;  /* teal */
  --seller-hover:  #0F766E;
  --seller-tint:   #E0F2F1;
  --seller-tint2:  #F0FAF9;
  --admin:         #7C3AED;  /* purple */
  --admin-hover:   #6D28D9;
  --admin-tint:    #EDE7FB;
  --admin-tint2:   #F6F2FE;

  /* generic --accent, retheme per role wrapper */
  --accent:        var(--unioil-orange);
  --accent-hover:  var(--unioil-orange-hover);
  --accent-press:  var(--unioil-orange-press);
  --accent-tint:   var(--unioil-orange-tint);
  --accent-tint2:  var(--unioil-orange-tint2);
  --accent-ring:   rgba(255,103,0,.32);

  /* ---- Neutrals ---- */
  --ink-900: #14171C; --ink-800: #1F242C; --ink-700: #353B45;
  --ink-600: #555C68; --ink-500: #7A828F; --ink-400: #A8AEB8;
  --ink-300: #CFD3DA; --ink-200: #E5E8EC; --ink-100: #F1F3F5;
  --ink-050: #F8F9FA; --ink-000: #FFFFFF;

  /* ---- Fuel-grade chips (kept for parity) ---- */
  --fuel-91: #2E7D32; --fuel-95: #B8362C; --fuel-97: #1565C0; --fuel-diesel: #F5B100;

  /* ---- Semantic ---- */
  --success: #1F8A4C; --success-tint: #E2F5EA;
  --warning: #E29900; --warning-tint: #FFF4D9;
  --danger:  #C8362A; --danger-tint:  #FBE5E2;
  --info:    #1565C0; --info-tint:    #E1ECFA;

  /* ---- Surfaces / text ---- */
  --bg-app: var(--ink-050); --bg-surface: #fff; --bg-inset: var(--ink-100);
  --fg-1: var(--ink-900); --fg-2: var(--ink-600); --fg-3: var(--ink-500); --fg-4: var(--ink-400);
  --border-1: var(--ink-200); --border-2: var(--ink-300);

  /* ---- Type ---- */
  --font-display: 'Saira Condensed', 'Oswald', Impact, sans-serif;
  --font-sans: 'Saira', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radii ---- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(20,23,28,.06), 0 1px 1px rgba(20,23,28,.04);
  --shadow-2: 0 4px 14px rgba(20,23,28,.08), 0 1px 2px rgba(20,23,28,.05);
  --shadow-3: 0 12px 30px rgba(20,23,28,.12), 0 2px 6px rgba(20,23,28,.06);
  --shadow-4: 0 24px 60px rgba(20,23,28,.18), 0 6px 14px rgba(20,23,28,.08);
  --shadow-accent: 0 8px 22px var(--accent-ring);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
}

/* role retheme */
[data-role="seller"] {
  --accent: var(--seller); --accent-hover: var(--seller-hover); --accent-press: var(--seller-hover);
  --accent-tint: var(--seller-tint); --accent-tint2: var(--seller-tint2); --accent-ring: rgba(13,148,136,.30);
}
[data-role="admin"] {
  --accent: var(--admin); --accent-hover: var(--admin-hover); --accent-press: var(--admin-hover);
  --accent-tint: var(--admin-tint); --accent-tint2: var(--admin-tint2); --accent-ring: rgba(124,58,237,.30);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--fg-1); background: var(--bg-app); }
button { font-family: inherit; }
::selection { background: var(--accent-tint); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }

/* ---------- TYPE ---------- */
.display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; text-transform: uppercase; margin: 0; }
.h-dpl { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; text-transform: uppercase; margin: 0; }
.eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.muted { color: var(--fg-2); }
.muted-3 { color: var(--fg-3); }

/* ---------- BUTTONS ---------- */
.btn { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 11px 20px; border-radius: var(--radius-pill); border: 1.5px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--ink-100); color: var(--ink-900); }
.btn-secondary:hover { background: var(--ink-200); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-tint2); }
.btn-outline { background: #fff; color: var(--ink-800); border-color: var(--border-2); }
.btn-outline:hover { background: var(--ink-050); border-color: var(--ink-400); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger-ghost { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-lg { padding: 14px 26px; font-size: 14px; }
.btn-sm { padding: 8px 14px; font-size: 11.5px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-icon { padding: 10px; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast); line-height: 0; }
.btn-icon:hover { background: var(--ink-100); }
/* btn-icon on dark backgrounds */
[style*="background:var(--ink-900)"] .btn-icon:hover,
[style*="background: var(--ink-900)"] .btn-icon:hover { background: rgba(255,255,255,.1); }
/* Close button used in drawers / modals */
.btn-close { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: var(--radius-md); background: none; border: none; color: var(--fg-3); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); line-height: 0; }
.btn-close:hover { background: var(--ink-100); color: var(--fg-1); }

/* ---------- CHIPS ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); border: 1.5px solid var(--border-1); background: #fff; color: var(--fg-2);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; }
.chip:hover { border-color: var(--ink-400); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.is-active.chip-soft { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.chip-dismiss { background: var(--accent-tint); border-color: transparent; color: var(--accent-press); }

/* ---------- BADGES ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; font-family: var(--font-sans); letter-spacing: .03em; text-transform: uppercase; }
.badge-orange { background: var(--unioil-orange-tint); color: var(--unioil-orange-dark); }
.badge-green  { background: var(--success-tint); color: var(--success); }
.badge-blue   { background: var(--info-tint); color: var(--info); }
.badge-amber  { background: var(--warning-tint); color: #9a6a00; }
.badge-red    { background: var(--danger-tint); color: var(--danger); }
.badge-teal   { background: var(--seller-tint); color: var(--seller-hover); }
.badge-purple { background: var(--admin-tint); color: var(--admin-hover); }
.badge-gray   { background: var(--ink-100); color: var(--fg-2); }
.badge-solid-orange { background: var(--unioil-orange); color: #fff; }
.badge-solid-red { background: var(--danger); color: #fff; }

/* ---------- CARDS ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.card-pad { padding: 22px; }
.card-hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.card-hover:hover { box-shadow: var(--shadow-3); border-color: var(--border-2); }

/* ---------- INPUTS ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-size: 13px; font-weight: 600; font-family: var(--font-sans); color: var(--ink-700); }
.input, .select, .textarea { width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-900);
  background: #fff; border: 1.5px solid var(--border-2); border-radius: var(--radius-md); padding: 12px 14px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--fg-4); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.input.has-icon { padding-left: 42px; }
.input-wrap { position: relative; }
.input-wrap > .input-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.input-wrap > .input-trail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-3); cursor: pointer; background: none; border: none; }
.input.is-error { border-color: var(--danger); }
.input.is-error:focus { box-shadow: 0 0 0 3px rgba(200,54,42,.18); }
.field-error { font-size: 12.5px; color: var(--danger); display: flex; align-items: center; gap: 5px; }
.textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237A828F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }

/* ---------- TOGGLE SWITCH ---------- */
.toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--ink-300); border: none; position: relative; cursor: pointer; transition: background var(--dur-base) var(--ease-out); flex: none; padding: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out); }
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { transform: translateX(18px); }
.toggle.is-locked { background: var(--ink-200); cursor: not-allowed; }
.toggle.is-locked.is-on { background: var(--ink-400); }

/* ---------- TABLE ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-3); padding: 12px 14px; border-bottom: 1px solid var(--border-1); white-space: nowrap; }
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--border-1); vertical-align: middle; }
.tbl tbody tr { transition: background var(--dur-fast); }
.tbl tbody tr:hover { background: var(--accent-tint2); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ---------- AVATAR ---------- */
.avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans);
  font-weight: 700; color: #fff; flex: none; overflow: hidden; }

/* ---------- ROOFLINE ---------- */
.roofline { height: 6px; background: var(--unioil-orange); width: 100%; }

/* ---------- TABS ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-1); }
.tab { background: none; border: none; padding: 12px 16px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px;
  color: var(--fg-3); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast); white-space: nowrap; }
.tab:hover { color: var(--fg-1); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- SKELETON ---------- */
.skel { background: linear-gradient(100deg, var(--ink-200) 30%, var(--ink-100) 50%, var(--ink-200) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- PRODUCT IMAGE PLACEHOLDER ---------- */
.imgph { background: var(--ink-100); display: flex; align-items: center; justify-content: center; color: var(--ink-400); position: relative; overflow: hidden; }
.imgph[data-tint="1"] { background: linear-gradient(135deg, #FFE6D3, #FFD2B0); color: #C24800; }
.imgph[data-tint="2"] { background: linear-gradient(135deg, #E0F2F1, #B8E0DC); color: #0F766E; }
.imgph[data-tint="3"] { background: linear-gradient(135deg, #E1ECFA, #C3DAF2); color: #1565C0; }
.imgph[data-tint="4"] { background: linear-gradient(135deg, #EDE7FB, #D8C9F5); color: #6D28D9; }
.imgph[data-tint="5"] { background: linear-gradient(135deg, #F1F3F5, #DFE3E8); color: #7A828F; }
.imgph[data-tint="6"] { background: linear-gradient(135deg, #FFF4D9, #FBE3A8); color: #9a6a00; }

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

/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 10px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
.fade-up { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
.fade-in { animation: fadeIn var(--dur-base) var(--ease-out) both; }
.shake { animation: shake .5s; }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-accent { border-color: var(--accent-tint); border-top-color: var(--accent); }

/* ---------- MODAL / SHEET ---------- */
.overlay { position: fixed; inset: 0; background: rgba(20,23,28,.52); display: flex; align-items: center; justify-content: center; z-index: 200; animation: fadeIn var(--dur-base) var(--ease-out); }
.modal { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-4); animation: scaleIn var(--dur-base) var(--ease-out); max-height: 92vh; overflow: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: #fff; box-shadow: var(--shadow-4); z-index: 200; overflow: auto; animation: drawerIn var(--dur-slow) var(--ease-out); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* ---------- STAR RATING ---------- */
.stars { display: inline-flex; gap: 1px; color: var(--unioil-orange); }

/* ---------- PROGRESS ---------- */
.prog { height: 8px; border-radius: 999px; background: var(--ink-200); overflow: hidden; }
.prog > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--dur-slow) var(--ease-out); }

/* ---------- helpers ---------- */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.click { cursor: pointer; }
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-none { display: none !important; }
.micro { font-size: 11px; color: var(--fg-3); }
.lead { font-size: 17px; line-height: 1.5; }