/* =========================================================
   Le Bistrot – Dark theme overrides
   IMPORTANT: include AFTER all other CSS files
   ========================================================= */

/* --- Core palette overrides --- */
:root {
  --bg: #05070b;
  --surface: #0f1722;
  --surface-soft: #101826;
  --surface-elevated: #111827;

  --border-subtle: #1f2933;
  --border-strong: #374151;

  --accent: #34d399;                 /* emerald-ish */
  --accent-light: rgba(52, 211, 153, 0.18);

  --text: #f9fafb;
  --muted: #9ca3af;
  --danger: #fb7185;
}

/* --- Global background / text --- */
html,
body {
  background: radial-gradient(circle at top, #111827 0, #020617 55%);
  color: var(--text);
}

/* Kill any leftover pure-white backgrounds */
body,
main,
section {
  background-color: transparent;
}

/* ================== HEADER ================== */

header {
  background: linear-gradient(to right, #020617, #020617);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
}

header h1 {
  color: var(--text);
}

/* ================== LANGUAGE CHIP ================== */

.lang-selector .selected {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text);
}

.lang-selector .options {
  background: var(--surface-elevated);
  border-color: var(--border-subtle);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
}

.lang-selector .options div {
  color: var(--text);
}

.lang-selector .options div:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ================== CATEGORIES BAR ================== */

.categories {
  background: rgba(2, 6, 23, 0.96);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

.categories button {
  background: rgba(15, 23, 42, 0.95);
  color: var(--muted);
  border: 1px solid transparent;
}

.categories button:hover {
  background: rgba(31, 41, 55, 0.95);
}

.categories button.active {
  background: var(--accent);
  color: #022c22;
  border-color: var(--accent);
}

.categories button[data-cat="snowmonster"] {
  background: #fb7185;
  color: #2b0612;
  border-color: #fb7185;
}

/* Subcategories under categories */
.subcats {
  background: transparent;
}

.subcats button {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-subtle);
  color: var(--muted);
}

.subcats button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #022c22;
}



/* Buttons */
.qty {
  align-self: flex-end;
}

.qty button {
  background: rgba(15, 23, 42, 0.95);
  color: var(--text);
  border: 1px solid var(--border-subtle);
}

.qty button:hover {
  background: rgba(31, 41, 55, 0.95);
}

.qty .count {
  color: var(--text);
}


/* ================== CART DOCK ================== */

#cartDock {
  background: radial-gradient(circle at top, #020617 0, #020617 55%);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.9);
}

.cart-header h3 {
  color: var(--text);
}

#cartItems .row {
  border-bottom: 1px dashed rgba(148, 163, 184, 0.25);
}

#cartItems .name {
  color: var(--text);
}

#cartItems .price {
  color: var(--muted);
}

#cartItems .qty-mini button {
  background: rgba(15, 23, 42, 0.95);
  color: var(--text);
  border: 1px solid var(--border-subtle);
}

#cartItems .qty-mini button:hover {
  background: rgba(31, 41, 55, 0.95);
}

/* Cart textarea */
.cart-footer textarea {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-subtle);
  color: var(--text);
}

.cart-footer textarea::placeholder {
  color: var(--muted);
}

/* Cart buttons */
.cart-footer .actions button {
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Clear */
#clearCart {
  background: transparent;
  color: var(--muted);
  border-color: rgba(148, 163, 184, 0.35);
}

#clearCart:hover {
  background: rgba(148, 163, 184, 0.08);
}

/* Send order */
#sendOrder {
  background: var(--accent);
  color: #022c22;
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(52, 211, 153, 0.5);
}

#sendOrder:disabled {
  opacity: 0.45;
  box-shadow: none;
}

/* Minimize button (chevron) */
#minCart {
  background: rgba(15, 23, 42, 0.95);
  color: var(--muted);
  border: 1px solid var(--border-subtle);
}

/* Icon-only bin etc. */
.icon-btn {
  background: rgba(15, 23, 42, 0.95);
  color: var(--muted);
  border: 1px solid var(--border-subtle);
}

.icon-btn:hover {
  background: rgba(31, 41, 55, 0.95);
}

/* ================== FAB (HISTORY / REVIEW) ================== */

.fab {
  background: linear-gradient(135deg, var(--accent), #6ee7b7);
  color: #022c22;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9);
}

/* ================== TOASTS ================== */

.toast {
  background: var(--surface-elevated);
  color: var(--text);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.9);
}

.toast.success {
  background: radial-gradient(circle at top left, #16a34a, #052e16);
}

.toast.error {
  background: radial-gradient(circle at top left, #b91c1c, #3f0713);
}

/* Prompt toast (table number) */
.toast.prompt {
  background: var(--surface-elevated);
}

.toast.prompt input {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border-subtle);
  color: var(--text);
}

.toast.prompt input::placeholder {
  color: var(--muted);
}

.toast.prompt button.ok {
  background: var(--accent);
  color: #022c22;
}

.toast.prompt button.cancel {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: var(--muted);
}

/* ================== LUNCH MENU (MENÚ DEL DÍA) ================== */

.lunch-wrap {
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  padding: 16px 16px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.85);
}

.lunch-title-row {
  border-bottom: 1px solid var(--border-subtle);
}

.lunch-title {
  color: var(--text);
}

.lunch-date {
  color: var(--muted);
}

.lunch-note {
  color: var(--muted);
}

.lunch-stale {
  color: var(--danger);
}

.lunch-section {
  border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
}

.lunch-sec-title {
  color: var(--accent);
}

.lunch-list li {
  color: var(--text);
}

/* ================== FOOTER (if any) ================== */

footer {
  background: transparent;
  color: var(--muted);
}


/* Optional: darker inner rows for “lunch” style cards if you use them */
.lunch-wrap,
.lunch-section {
  background: var(--surface) !important;
}