/* ============================================
   QR MAKER — Theme System
   ============================================ */

/* ===== Global Transitions ===== */
body {
  background: var(--bg-main);
  color: var(--text-main);
  transition: background 0.35s ease, color 0.35s ease;
}

/* ============================================
   LIGHT MODE
   ============================================ */
body.theme-light {
  --bg-main: #f2f4f8;
  --bg-card: #ffffff;
  --bg-soft: #f8fafc;

  --text-main: #1f2937;
  --text-muted: #6b7280;
  --text-invert: #ffffff;

  --border-color: #e5e7eb;

  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.15);
  --success: #16a34a;
  --danger: #dc2626;

  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.12);
}

/* ============================================
   DARK MODE
   ============================================ */
body.theme-dark {
  --bg-main: #0f172a;
  --bg-card: #1e293b;
  --bg-soft: #334155;

  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-invert: #0f172a;

  --border-color: #334155;

  --primary: #f59e0b;
  --primary-glow: rgba(245, 158, 11, 0.2);
  --success: #22c55e;
  --danger: #ef4444;

  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.5);
}

/* ============================================
   THEMED ELEMENTS
   ============================================ */

/* --- Containers / Cards --- */
.menu-container {
  background: transparent;
}

.place-info,
.category-box {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.card,
.item-row {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

/* --- Text --- */
p,
.item-desc {
  color: var(--text-muted);
}

.item-name {
  color: var(--text-main);
  font-weight: 700;
}

.item-price {
  color: var(--success);
  font-weight: 700;
}

/* --- Category Header --- */
.category-title {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

/* --- Items in dark mode --- */
body.theme-dark .item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

body.theme-dark .item:hover {
  background: var(--bg-soft);
}

body.theme-dark .item-name {
  color: var(--text-main);
}

body.theme-dark .item-desc {
  color: var(--text-muted);
}

/* --- Place card in dark mode --- */
body.theme-dark .place-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

body.theme-dark .place-card h3 {
  color: var(--text-main);
}

body.theme-dark .place-card p {
  color: var(--text-muted);
}

/* --- Category in dark mode --- */
body.theme-dark .category {
  background: var(--bg-card);
  border-color: var(--border-color);
}

body.theme-dark .category-header {
  background: linear-gradient(135deg, var(--primary), #d97706);
}

/* --- Place info header in dark mode --- */
body.theme-dark .place-info {
  background: var(--bg-card);
  border-color: var(--border-color);
  border-top-color: var(--primary);
}

/* --- Floating Buttons --- */
.cart-btn-float {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
}

.qr-btn-float {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.admin-login-btn {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* --- Admin Popup --- */
.admin-overlay {
  background: rgba(0,0,0,.6);
}

.admin-login-box {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
}

.admin-login-box input {
  background: var(--bg-soft);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.admin-login-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

#adminSubmitBtn {
  background: var(--primary);
  color: #fff;
}

#adminCancelBtn {
  background: var(--bg-soft);
  color: var(--text-main);
}

/* --- Cart / Invoice --- */
#favBox {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}

body.theme-dark #favBox h3 {
  color: var(--text-main);
}

body.theme-dark .fav-item {
  border-color: var(--border-color);
}

body.theme-dark .fav-item div {
  color: var(--text-muted);
}

#favTotal {
  color: var(--success);
  font-weight: 700;
}

#favBox hr {
  border-color: var(--border-color);
}

/* --- Order Form --- */
.order-overlay {
  background: rgba(0,0,0,.65);
}

.order-box {
  background: var(--bg-card);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  border-radius: 14px;
}

.order-box input,
.order-box textarea {
  background: var(--bg-soft);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.order-box input:focus,
.order-box textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.order-btn {
  background: var(--success);
  color: #fff;
}

.cancel-btn {
  background: var(--danger);
  color: #fff;
}

/* --- WhatsApp (brand color fixed) --- */
.whatsapp-float {
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* --- WhatsApp Branches in dark mode --- */
body.theme-dark #whatsappBranches {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}

/* --- QR box in dark mode --- */
body.theme-dark .qr-box {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* --- Price selector in dark mode --- */
body.theme-dark .price-selector-box {
  background: var(--bg-card);
  color: var(--text-main);
}

body.theme-dark .price-option-btn {
  background: var(--bg-soft);
  border-color: var(--border-color);
  color: var(--text-main);
}

body.theme-dark .price-option-btn:hover {
  background: #475569;
}

/* --- Fav checkbox in dark mode --- */
body.theme-dark .fav-check {
  background: var(--bg-soft);
  border-color: var(--text-muted);
}

/* --- Qty buttons in dark mode --- */
body.theme-dark .qty-btn {
  background: var(--bg-soft);
  color: var(--text-main);
}

body.theme-dark .qty-btn:hover {
  background: #475569;
}

/* ============================================
   INTERACTIONS
   ============================================ */
button:hover {
  opacity: .95;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}