/* ============================================================
   style.css — DetailHub Desktop
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Backgrounds */
  --bg:           #060810;
  --bg2:          #0b0e18;
  --bg3:          #10141f;
  --surface:      #141826;
  --surface2:     #1a1f2e;
  --surface3:     #222840;

  /* Borders */
  --border:       #1e2538;
  --border2:      #2a3352;
  --border3:      #3a4a72;

  /* Text */
  --text:         #e8edf8;
  --text2:        #99a8cc;
  --text3:        #4a5a80;
  --text4:        #242e48;

  /* Blue accent spectrum */
  --blue-vivid:   #1a7fff;   /* primary CTA */
  --blue-bright:  #3d9eff;   /* hover / highlight */
  --blue-mid:     #1460cc;   /* secondary */
  --blue-deep:    #0d3a8a;   /* deep */
  --blue-sky:     #60b8ff;   /* light accent text */
  --blue-pale:    #a0c8ff;   /* very light */

  /* Dim / glow versions */
  --blue-dim:     rgba(26,127,255,0.12);
  --blue-glow:    rgba(26,127,255,0.06);
  --blue-border:  rgba(26,127,255,0.35);
  --blue-glow2:   rgba(26,127,255,0.22);

  /* Semantic */
  --red:          #e04040;
  --red-dim:      rgba(224,64,64,0.12);
  --green:        #22c55e;
  --green-dim:    rgba(34,197,94,0.12);
  --amber:        #f59e0b;
  --amber-dim:    rgba(245,158,11,0.12);

  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Radii & shadows */
  --radius:       6px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --shadow:       0 4px 24px rgba(0,0,0,0.6);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.8);
  --shadow-blue:  0 4px 24px rgba(26,127,255,0.2);
}

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:17px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: var(--blue-sky); text-decoration: none; }
a:hover { color: var(--blue-pale); }
img { max-width:100%; display:block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border3); }

/* ---- PAGE SYSTEM ---- */
.page { display:none; min-height:100vh; flex-direction:column; }
.page.active { display:flex; animation: pageFade 0.22s ease; }
@keyframes pageFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ---- LAYOUT ---- */
.site-wrap { display:flex; flex-direction:column; min-height:100vh; }
.main-layout { display:flex; flex:1; }
.sidebar {
  width:260px; flex-shrink:0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.main-content { flex:1; overflow-x:hidden; padding:40px 48px; }
.container    { max-width:1200px; margin:0 auto; padding:0 40px; }
.container-sm { max-width:860px;  margin:0 auto; padding:0 40px; }

/* ---- TYPOGRAPHY ---- */
.display-xl { font-family:var(--font-display); font-size:72px; letter-spacing:0.04em; line-height:0.95; }
.display-lg { font-family:var(--font-display); font-size:52px; letter-spacing:0.04em; line-height:1; }
.display-md { font-family:var(--font-display); font-size:36px; letter-spacing:0.04em; line-height:1.05; }
.display-sm { font-family:var(--font-display); font-size:26px; letter-spacing:0.04em; line-height:1.1; }
.heading-lg { font-size:22px; font-weight:600; color:var(--text); }
.heading-md { font-size:18px; font-weight:600; color:var(--text); }
.heading-sm { font-size:16px; font-weight:600; color:var(--text); }
.body-lg  { font-size:18px; color:var(--text2); line-height:1.7; }
.body-md  { font-size:16px; color:var(--text2); line-height:1.65; }
.body-sm  { font-size:14px; color:var(--text2); }
.label {
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--text3);
}
.mono { font-family:var(--font-mono); }

/* ---- SIDEBAR ---- */
.sidebar-header {
  padding:24px 20px 16px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(135deg, var(--bg2) 0%, var(--surface) 100%);
}
.sidebar-logo {
  font-family:var(--font-display);
  font-size:24px; letter-spacing:0.1em; color:var(--text);
}
.sidebar-logo span { color:var(--blue-vivid); }
.sidebar-section-label {
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text4); padding:20px 20px 8px;
}
.sidebar-nav { list-style:none; padding:8px 12px; flex:1; }
.sidebar-nav li+li { margin-top:2px; }
.sidebar-nav a, .sidebar-nav button {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:11px 14px;
  border:none; background:none; cursor:pointer;
  color:var(--text2); font-size:15px; font-weight:400;
  border-radius:var(--radius); text-align:left;
  transition:background 0.12s, color 0.12s;
  text-decoration:none;
}
.sidebar-nav a:hover, .sidebar-nav button:hover {
  background:var(--surface2); color:var(--text);
}
.sidebar-nav a.active, .sidebar-nav button.active {
  background:var(--blue-dim); color:var(--blue-sky);
  font-weight:500; border-left:2px solid var(--blue-vivid);
}
.sidebar-nav svg { width:18px; height:18px; flex-shrink:0; color:var(--text3); transition:color 0.12s; }
.sidebar-nav a.active svg, .sidebar-nav button.active svg { color:var(--blue-sky); }
.nav-badge {
  margin-left:auto; background:var(--blue-vivid);
  color:#fff; font-family:var(--font-mono); font-size:10px;
  font-weight:600; padding:1px 7px; border-radius:10px;
}
.sidebar-footer { padding:16px 12px; border-top:1px solid var(--border); }

/* ---- TOPNAV / USER ---- */
.topnav-user {
  display:flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:6px 16px 6px 8px;
  cursor:pointer; transition:border-color 0.15s;
}
.topnav-user:hover { border-color:var(--border3); }
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-mid), var(--blue-vivid));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:16px; color:#fff;
}
.user-name { font-size:15px; font-weight:500; color:var(--text); }
.user-role { font-family:var(--font-mono); font-size:10px; color:var(--blue-sky); letter-spacing:0.1em; text-transform:uppercase; }

/* ---- TICKER ---- */
.ticker-bar {
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:7px 0; overflow:hidden;
}
.ticker-track { display:flex; gap:48px; animation:ticker 22s linear infinite; white-space:nowrap; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { font-family:var(--font-mono); font-size:12px; color:var(--text3); }
.ticker-item span { color:var(--blue-sky); margin-left:8px; }

/* ---- CARDS ---- */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.card-pad { padding:28px; }
.card-hover { transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.card-hover:hover { border-color:var(--border3); box-shadow:var(--shadow); transform:translateY(-2px); }

/* ---- STAT CARDS ---- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 28px;
  transition:border-color 0.15s;
}
.stat-card:hover { border-color:var(--border2); }
.stat-card.highlight {
  background:var(--blue-dim);
  border-color:var(--blue-border);
}
.stat-num {
  font-family:var(--font-display); font-size:48px;
  letter-spacing:0.02em; color:var(--text); line-height:1;
  margin:8px 0 4px;
}
.stat-card.highlight .stat-num { color:var(--blue-sky); }
.stat-label { font-family:var(--font-mono); font-size:11px; color:var(--text3); letter-spacing:0.12em; text-transform:uppercase; }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border:none; border-radius:var(--radius);
  font-family:var(--font-body); font-size:15px; font-weight:600;
  letter-spacing:0.02em; cursor:pointer; transition:all 0.15s;
  white-space:nowrap;
}
.btn-primary {
  background:linear-gradient(135deg, var(--blue-mid), var(--blue-vivid));
  color:#fff;
}
.btn-primary:hover {
  background:linear-gradient(135deg, var(--blue-vivid), var(--blue-bright));
  box-shadow: var(--shadow-blue);
}
.btn-secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border2); }
.btn-secondary:hover { background:var(--surface3); border-color:var(--border3); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface); color:var(--text); border-color:var(--border2); }
.btn-danger { background:var(--red-dim); color:var(--red); border:1px solid rgba(224,64,64,0.3); }
.btn-danger:hover { background:rgba(224,64,64,0.2); }
.btn-sm  { padding:8px 16px; font-size:13px; }
.btn-lg  { padding:16px 36px; font-size:17px; }
.btn-full { width:100%; }
.btn svg { width:17px; height:17px; }

/* ---- BADGES ---- */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:4px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; font-weight:500;
}
.badge-blue   { background:var(--blue-dim);   color:var(--blue-sky);  border:1px solid var(--blue-border); }
.badge-bright { background:rgba(61,158,255,0.15); color:var(--blue-bright); border:1px solid rgba(61,158,255,0.35); }
.badge-deep   { background:rgba(13,58,138,0.3); color:var(--blue-pale); border:1px solid rgba(13,58,138,0.5); }
.badge-red    { background:var(--red-dim);    color:var(--red);       border:1px solid rgba(224,64,64,0.25); }
.badge-green  { background:var(--green-dim);  color:var(--green);     border:1px solid rgba(34,197,94,0.25); }
.badge-amber  { background:var(--amber-dim);  color:var(--amber);     border:1px solid rgba(245,158,11,0.25); }
.badge-gray   { background:var(--surface2);   color:var(--text3);     border:1px solid var(--border); }
.badge-dark   { background:var(--text);       color:#000; }

/* ---- INPUTS ---- */
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text3); margin-bottom:8px;
}
.form-control {
  width:100%; background:var(--surface);
  border:1.5px solid var(--border); border-radius:var(--radius);
  padding:13px 16px; color:var(--text);
  font-size:16px; outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus { border-color:var(--blue-vivid); box-shadow:0 0 0 3px var(--blue-glow); }
.form-control::placeholder { color:var(--text3); }
select.form-control { -webkit-appearance:none; appearance:none; cursor:pointer; }
textarea.form-control { resize:vertical; min-height:110px; line-height:1.6; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.input-prefix-wrap { position:relative; }
.input-prefix {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); color:var(--text3); font-size:15px; pointer-events:none;
}
.input-prefix-wrap .form-control { padding-left:32px; }

/* ---- TABLES ---- */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:15px; }
thead { background:var(--surface2); }
thead th {
  padding:14px 18px; text-align:left;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text3); white-space:nowrap;
  border-bottom:1px solid var(--border);
}
tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:var(--surface2); }
td { padding:14px 18px; color:var(--text2); vertical-align:middle; }
td strong { color:var(--text); font-weight:600; }

/* ---- PRODUCT CARDS ---- */
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.product-card:hover {
  border-color:var(--blue-border);
  box-shadow:var(--shadow-blue);
  transform:translateY(-3px);
}
.product-img {
  height:180px; background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  position:relative; border-bottom:1px solid var(--border); overflow:hidden;
}
.product-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(26,127,255,0.06));
}
.product-img svg { width:56px; height:56px; color:var(--text4); }
.product-img img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:1; }
.product-img .badge { z-index:2; }
.product-body { padding:20px 22px; }
.product-name { font-family:var(--font-display); font-size:22px; letter-spacing:0.04em; color:var(--text); margin-bottom:4px; }
.product-meta { font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-bottom:14px; }
.product-price { font-family:var(--font-display); font-size:32px; letter-spacing:0.03em; color:var(--blue-sky); }
.product-footer { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }

/* ---- CART ---- */
.cart-container { display:flex; flex-direction:column; gap:16px; max-width:960px; }
.cart-item {
  display:grid; grid-template-columns:100px 1fr auto auto auto;
  gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 22px;
}
.cart-item-thumb { display:block; height:80px; border-radius:var(--radius); overflow:hidden; }
.cart-item-info h3 { font-size:18px; margin-bottom:4px; }
.cart-item-info h3 a { color:var(--text); text-decoration:none; }
.cart-item-info h3 a:hover { color:var(--blue-sky); }
.cart-item-qty { display:flex; align-items:center; gap:8px; }
.cart-item-subtotal {
  font-family:var(--font-display); font-size:24px; color:var(--blue-sky);
  white-space:nowrap;
}
.cart-item-actions { display:flex; flex-direction:column; gap:8px; }
.cart-summary {
  margin-top:8px; padding:24px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.cart-total {
  display:flex; justify-content:space-between; align-items:center;
  font-size:18px;
}
.cart-total strong {
  font-family:var(--font-display); font-size:32px; color:var(--blue-sky);
}
@media (max-width:900px) {
  .cart-item { grid-template-columns:80px 1fr; }
  .cart-item-qty, .cart-item-subtotal, .cart-item-actions { grid-column:2; }
}

/* ---- MESSAGES ---- */
.message-layout { display:grid; grid-template-columns:320px 1fr; gap:0; height:calc(100vh - 32px); overflow:hidden; }
.msg-list { border-right:1px solid var(--border); overflow-y:auto; }
.msg-item { display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s; }
.msg-item:hover { background:var(--surface2); }
.msg-item.active { background:var(--blue-dim); border-left:3px solid var(--blue-vivid); }
.msg-avatar {
  width:44px; height:44px; border-radius:50%; background:var(--surface3);
  border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:18px; color:var(--text2); flex-shrink:0;
}
.msg-preview-text { font-size:14px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-area { display:flex; flex-direction:column; height:100%; }
.chat-header { padding:20px 28px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chat-messages { flex:1; overflow-y:auto; padding:24px 28px; display:flex; flex-direction:column; gap:4px; }
.chat-bubble { max-width:60%; padding:12px 16px; border-radius:14px; font-size:15px; line-height:1.55; margin-bottom:2px; }
.bubble-in  { background:var(--surface2); border:1px solid var(--border); color:var(--text); align-self:flex-start; border-bottom-left-radius:4px; }
.bubble-out { background:var(--blue-dim); border:1px solid var(--blue-border); color:var(--text); align-self:flex-end; border-bottom-right-radius:4px; }
.bubble-time { font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-bottom:10px; }
.bubble-time.right { text-align:right; }
.chat-input-area { padding:20px 28px; border-top:1px solid var(--border); display:flex; gap:12px; flex-shrink:0; }

/* ---- MODAL ---- */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; animation:modalIn 0.2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:scale(1)} }
.modal {
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius-xl); padding:40px;
  max-width:620px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
}
.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px; }
.modal-close { background:none; border:none; color:var(--text3); cursor:pointer; padding:4px; font-size:22px; line-height:1; transition:color 0.15s; }
.modal-close:hover { color:var(--text); }

/* ---- ALERTS ---- */
.alert {
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 18px; border-radius:var(--radius);
  font-size:15px; margin-bottom:20px;
}
.alert-success { background:var(--green-dim); border:1px solid rgba(34,197,94,0.3);  color:var(--green); }
.alert-error   { background:var(--red-dim);   border:1px solid rgba(224,64,64,0.3);  color:var(--red); }
.alert-info    { background:var(--blue-dim);  border:1px solid var(--blue-border);    color:var(--blue-sky); }

/* ---- LOGIN PAGE ---- */
.login-page { min-height:100vh; display:flex; background:var(--bg); }
.login-left {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:60px 80px;
  background:linear-gradient(160deg, var(--bg2) 0%, var(--bg3) 100%);
  border-right:1px solid var(--border);
  position:relative; overflow:hidden;
}
.login-left::before {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(26,127,255,0.10) 0%, transparent 70%);
  pointer-events:none;
}
.login-left::after {
  content:''; position:absolute; top:-60px; right:-60px;
  width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(20,96,204,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.login-left-logo { font-family:var(--font-display); font-size:44px; letter-spacing:0.08em; color:var(--text); margin-bottom:12px; }
.login-left-logo span { color:var(--blue-vivid); }
.login-left-tagline { font-size:18px; color:var(--text2); line-height:1.6; max-width:420px; margin-bottom:48px; }
.login-feature { display:flex; gap:14px; margin-bottom:20px; }
.login-feature-icon {
  width:42px; height:42px;
  background:var(--blue-dim); border:1px solid var(--blue-border);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.login-feature-icon svg { width:20px; height:20px; color:var(--blue-sky); }
.login-feature-text strong { display:block; font-size:16px; color:var(--text); margin-bottom:2px; }
.login-feature-text span  { font-size:14px; color:var(--text2); }
.login-right { width:480px; flex-shrink:0; display:flex; flex-direction:column; justify-content:center; padding:60px 56px; }
.login-tabs { display:flex; gap:0; margin-bottom:32px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.login-tab {
  flex:1; padding:12px; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:15px; font-weight:500; color:var(--text3);
  transition:all 0.15s;
}
.login-tab.active {
  background:linear-gradient(135deg, var(--blue-mid), var(--blue-vivid));
  color:#fff; font-weight:600;
}
.login-tab:not(.active):hover { background:var(--surface); color:var(--text); }

/* ---- SECTION HEADER ---- */
.section-header { margin-bottom:32px; }
.section-header .display-sm { margin-bottom:6px; }
.section-sub { font-size:15px; color:var(--text2); }

/* ---- ESCROW BOX ---- */
.escrow-box {
  background:var(--blue-dim); border:1px solid var(--blue-border);
  border-radius:var(--radius-lg); padding:24px;
}
.escrow-step { display:flex; gap:16px; margin-bottom:16px; }
.escrow-step:last-child { margin-bottom:0; }
.escrow-num {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-mid), var(--blue-vivid));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  flex-shrink:0; margin-top:2px;
}
.escrow-text { font-size:15px; color:var(--text2); line-height:1.6; }
.escrow-text strong { color:var(--text); }

/* ---- ORDER SUMMARY ---- */
.order-line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:15px; }
.order-line:last-child { border-bottom:none; }
.order-line-key { color:var(--text2); }
.order-line-val { color:var(--text); font-family:var(--font-mono); }
.order-total .order-line-key { font-family:var(--font-display); font-size:20px; letter-spacing:0.04em; color:var(--text); }
.order-total .order-line-val { font-family:var(--font-display); font-size:32px; letter-spacing:0.03em; color:var(--blue-sky); }

/* ---- PAYMENT METHODS ---- */
.payment-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.payment-option {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); cursor:pointer; transition:all 0.15s;
  font-family:var(--font-mono); font-size:12px; color:var(--text2);
  letter-spacing:0.1em; text-transform:uppercase;
}
.payment-option:hover { border-color:var(--blue-vivid); color:var(--blue-sky); background:var(--blue-glow); }
.payment-option.selected { border-color:var(--blue-vivid); background:var(--blue-dim); color:var(--blue-sky); }
.payment-option svg { width:26px; height:26px; }

/* ---- PAYFAST BUTTON ---- */
.payfast-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 24px; border:none; border-radius:var(--radius);
  background:linear-gradient(135deg, #0070d4, #00a4e4);
  color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; transition:all 0.15s; letter-spacing:0.04em;
}
.payfast-btn:hover { background:linear-gradient(135deg, #0080f0, #00b8ff); box-shadow:0 4px 20px rgba(0,160,228,0.35); }
.payfast-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; color:var(--text3);
  border:1px solid var(--border2); border-radius:4px; padding:4px 10px;
}

/* ---- INFRA ITEMS ---- */
.infra-item { padding:14px 18px; border-bottom:1px solid var(--border); }
.infra-item:last-child { border-bottom:none; }
.infra-title { font-family:var(--font-display); font-size:16px; letter-spacing:0.04em; color:var(--text2); margin-bottom:3px; }
.infra-sub   { font-size:14px; color:var(--text3); }

/* ---- QUICK ACTION CARDS ---- */
.quick-icon {
  width:52px; height:52px;
  background:var(--blue-dim); border:1px solid var(--blue-border);
  border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.quick-icon svg { width:24px; height:24px; color:var(--blue-sky); }

/* ---- UTILITY ---- */
.text-blue   { color:var(--blue-sky); }
.text-muted  { color:var(--text3); }
.text-red    { color:var(--red); }
.text-green  { color:var(--green); }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.w-full      { width:100%; }
.hidden      { display:none !important; }
.flex        { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-end    { display:flex; align-items:center; justify-content:flex-end; }
.items-center{ align-items:center; }
.gap-8  { gap:8px; }  .gap-12 { gap:12px; } .gap-16 { gap:16px; }
.gap-20 { gap:20px; } .gap-24 { gap:24px; }
.mb-0  { margin-bottom:0; }   .mb-8  { margin-bottom:8px; }
.mb-16 { margin-bottom:16px; } .mb-24 { margin-bottom:24px; }
.mb-32 { margin-bottom:32px; }
.mt-8  { margin-top:8px; }    .mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }   .mt-32 { margin-top:32px; }
.p-24  { padding:24px; }      .p-28  { padding:28px; }
.p-32  { padding:32px; }

/* ---- RESPONSIVE ---- */
@media (max-width:1100px) {
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .stat-grid    { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:800px) {
  .sidebar { display:none; }
  .main-content { padding:24px 20px; }
  .product-grid { grid-template-columns:1fr; }
  .login-left   { display:none; }
  .login-right  { width:100%; padding:40px 24px; }
}