/* ===== Dark Theme Baseline (WCAG-friendly contrasts) ===== */
:root {
  --bg: #0b0f14;
  --card: #10151d;
  --text: #e6edf3;
  --muted: #b3bfcd;          /* secondary text, 4.5:1+ on dark */
  --muted-2: #95a1b3;        /* placeholders, captions */
  --border: rgba(255,255,255,.09);
  --border-strong: #2c3644;
  --accent: #7aa2ff;         /* focus ring */
  --primary: #ef4444;        /* your brand red? swap if needed */
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
}

html, body {
  background: var(--bg);
  color: var(--text);
  color-scheme: dark; /* helps form controls in modern browsers */
}

/* ===== Cards, tables, hr ===== */
.card-dark, .card.bg-dark, .card.card-dark {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
}
hr, .table-dark > :not(caption) > * > * {
  border-color: var(--border) !important;
}
.table-dark td, .table-dark th {
  color: var(--text) !important;
}

/* ===== Typography: make "secondary" readable on dark ===== */
.text-secondary, .muted, .text-muted, .small.muted {
  color: var(--muted) !important;
}
a.link-light, a.text-light {
  color: #ffffffde !important;
  text-decoration: none;
}
a.link-light:hover, a.text-light:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ===== Forms: inputs, placeholders, focus, autofill ===== */
.form-control, .form-select, textarea, input[type="text"], input[type="number"], input[type="email"] {
  background: #0f141b !important;
  color: var(--text) !important;
  border: 1px solid #2b3442 !important;
}
.form-control::placeholder { color: var(--muted-2) !important; opacity: 1; }
.form-control:focus, .form-select:focus, textarea:focus, input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 .2rem rgba(122,162,255,.25) !important;
  outline: 0 !important;
}
/* Chrome autofill yellow fix on dark */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px #0f141b inset !important;
  -webkit-box-shadow: 0 0 0 1000px #0f141b inset !important;
}

/* ===== Buttons (keep outlines readable) ===== */
.btn-outline-light {
  color: #e9eef5 !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.55) !important;
}
.btn-danger, .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn:disabled, .btn.disabled {
  opacity: .65 !important;
  color: #cbd5e1 !important;
}

/* ===== Badges/Chips used on cart & checkout ===== */
.badge.addon-chip, .chip.addon-chip {
  color: #d8e2ef !important;
  background: rgba(148,163,184,.18) !important; /* slate tint */
  border: 1px solid rgba(148,163,184,.35) !important;
}
.badge.missing-chip, .chip.missing-chip {
  color: #ffe08a !important;
  background: rgba(251,191,36,.16) !important;  /* amber tint */
  border: 1px solid rgba(251,191,36,.38) !important;
}

/* ===== Lists & mini-cart items ===== */
.list-group-item {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Images ===== */
.item-thumb { border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* ===== Google Places dropdown on dark ===== */
.pac-container {
  background: #0f141b !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.pac-item { color: var(--text) !important; }
.pac-item-query { color: #ffffff !important; }
.pac-matched, .pac-item .pac-icon { filter: brightness(1.2); }
.pac-item:hover { background: rgba(255,255,255,.06) !important; }

/* ===== Radios/checkboxes contrast ===== */
.form-check-input {
  background-color: #0f141b;
  border-color: #3b4556;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(239,68,68,.25);
}

/* ===== Small details ===== */
.alert { border: 1px solid var(--border) !important; }
.alert-info { background: rgba(59,130,246,.12); color: #dbeafe; }
.alert-danger { background: rgba(239,68,68,.12); color: #fecaca; }
.alert-success { background: rgba(34,197,94,.12); color: #bbf7d0; }