/* ── Tokens ── */
:root {
  --bg:     #0D0600;
  --surf1:  #1F0D00;
  --surf2:  #2D1200;
  --surf3:  #3D1A00;
  --o600:   #E64A19;
  --o500:   #E65100;
  --o400:   #FF6D00;
  --o300:   #FF9100;
  --o200:   #FFAB40;
  --o100:   #FFD180;
  --textsub:#c97a3a;
}

/* ── Base ── */
body {
  background: var(--bg);
  color: var(--o100);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── Topbar ── */
.g-topbar {
  background: var(--surf1);
  border-bottom: 1px solid var(--surf3);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.g-brand {
  font-size: 1rem;
  font-weight: 900;
  color: var(--o200);
  letter-spacing: 0.4px;
  text-decoration: none;
}
.g-brand:hover { color: var(--o200); }
.g-cart-badge {
  background: var(--surf3);
  color: var(--o200);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s;
}
.g-cart-badge:hover { background: var(--o500); color: #fff; }

/* ── Bottom Tab Bar ── */
.g-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surf1);
  border-top: 1px solid var(--surf3);
  display: flex;
  justify-content: space-around;
  padding: 8px 0 12px;
  z-index: 100;
}
.g-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  gap: 2px;
  flex: 1;
}
.g-tab-dot {
  width: 20px; height: 3px;
  border-radius: 2px;
  background: transparent;
  margin-bottom: 1px;
}
.g-tab-ico { font-size: 1.2rem; line-height: 1; }
.g-tab-lbl { font-size: 0.6rem; font-weight: 800; color: var(--surf3); }
.g-tab.active .g-tab-dot { background: var(--o300); }
.g-tab.active .g-tab-lbl { color: var(--o300); }

/* Page content must clear the tab bar */
.g-page { padding-bottom: 80px; }

/* ── Buttons ── */
.btn-primary-g {
  background: var(--o500);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 900;
  transition: background 0.2s;
  cursor: pointer;
}
.btn-primary-g:hover { background: var(--o600); color: #fff; }

/* ── Cards / Surfaces ── */
.g-card {
  background: var(--surf2);
  border: 1px solid var(--surf3);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Form inputs ── */
.g-input {
  background: var(--surf2) !important;
  border: 1px solid var(--surf3) !important;
  color: var(--o100) !important;
  border-radius: 10px !important;
}
.g-input::placeholder { color: var(--textsub) !important; opacity: 1; }
.g-input:focus {
  border-color: var(--o500) !important;
  box-shadow: 0 0 0 3px rgba(230,81,0,0.2) !important;
  outline: none;
  background: var(--surf2) !important;
  color: var(--o100) !important;
}
.g-label { color: var(--textsub); font-weight: 700; font-size: 0.85rem; }

/* ── Section headings ── */
.g-section-title {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--o200);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 16px 6px;
}

/* ── Bootstrap overrides for dark theme ── */
.modal-content  { background: var(--surf1); color: var(--o100); border: 1px solid var(--surf3); }
.modal-header   { background: var(--o500); color: #fff; border-bottom: none; }
.modal-footer   { border-top: 1px solid var(--surf3); }
.modal-header .btn-close { filter: invert(1); }
.table         { color: var(--o100); }
.table thead th { background: var(--o500); color: #fff; border: none; }
.table tbody td { border-color: var(--surf3); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--surf2); }
.alert-danger   { background: #2d0a00; color: #ff8a65; border-color: var(--o600); }
.alert-success  { background: #0a2d00; color: #a5d6a7; border-color: #2e7d32; }
.badge.bg-success   { background: #1B5E20 !important; }
.badge.bg-danger    { background: #7B2D00 !important; }
.badge.bg-warning   { background: #7B5E00 !important; color: var(--o100) !important; }
.badge.bg-info      { background: #0d2b4a !important; color: #90caf9 !important; }
.badge.bg-primary   { background: #1a237e !important; color: #9fa8da !important; }
.badge.bg-secondary { background: var(--surf3) !important; color: var(--textsub) !important; }