/* ═══════════════════════════════════════════════════════════════
   The Home Chef Bakes — Dark / Light / System Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar — theme & language below header ──────────────────── */
.hcb-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 34px;
  position: sticky;
  top: 72px;
  z-index: 99;
}
.hcb-topbar__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  white-space: nowrap;
}
.hcb-topbar__btn:hover { color: var(--accent); }
.hcb-topbar__icon { font-size: 13px; }
.hcb-topbar__sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

/* Dark topbar */
[data-theme="dark"] .hcb-topbar {
  background: #231408;
  border-bottom-color: #3a2210;
}
[data-theme="dark"] .hcb-topbar__btn { color: #c8a47e; }
[data-theme="dark"] .hcb-topbar__btn:hover { color: #e08844; }
[data-theme="dark"] .hcb-topbar__sep { background: #3a2210; }

/* ── Mobile: fix brand name wrapping ─────────────────────────── */
@media (max-width: 767px) {
  .brand__logo {
    width: 38px !important;
    height: 38px !important;
  }
  .brand__name {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    max-width: 130px;
  }
  .hcb-topbar {
    top: 60px; /* smaller header height on mobile */
    justify-content: space-between; /* theme left, lang right */
  }
}

/* ── Dark mode variables ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #1a0f06;
  --bg-alt:        #231508;
  --bg-deep:       #2d1c0c;
  --paper:         #1f1308;
  --ink:           #f0e4ce;
  --ink-soft:      #c8a47e;
  --accent:        #e08844;
  --accent-dark:   #b86c28;
  --accent-light:  #3a1f08;
  --accent-warm:   #e89848;
  --gold:          #c49c38;
  --muted:         #8a6848;
  --border:        #3a2210;
  --shadow-sm:     0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.55);
  --shadow-warm:   0 8px 30px rgba(224,136,68,0.28);
  --shadow-card:   0 4px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Dark: body background ───────────────────────────────────── */
[data-theme="dark"] body {
  background-color: #1a0f06 !important;
}

/* background-image div has hardcoded light gradient — must use !important */
[data-theme="dark"] .background-image {
  background:
    radial-gradient(ellipse 70% 45% at 95% 0%,  rgba(224,136,68,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 0%  100%, rgba(184,136,42,0.06) 0%, transparent 55%),
    linear-gradient(160deg, #1c1108 0%, #180d04 50%, #1e1409 100%) !important;
}

/* Hero has hardcoded warm light gradient — force dark */
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 140% 90% at 110% 50%, rgba(224,136,68,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at -10%  50%, rgba(184,136,42,0.07) 0%, transparent 55%),
    linear-gradient(165deg, #1e1208 0%, #190e05 35%, #1d1309 100%) !important;
}

/* Mobile category strip — hardcoded #fff background */
[data-theme="dark"] .mobile-cat-strip__item {
  background: #231508 !important;
  border-color: #3a2210 !important;
  color: #c8a47e !important;
}
[data-theme="dark"] .mobile-cat-strip__item.is-active,
[data-theme="dark"] .mobile-cat-strip__item:hover {
  background: #2e1a08 !important;
  border-color: #e08844 !important;
  color: #e08844 !important;
}

/* ── Dark: header ────────────────────────────────────────────── */
[data-theme="dark"] .header {
  background: rgba(26, 15, 6, 0.92);
  border-bottom-color: rgba(58, 34, 16, 0.7);
}
[data-theme="dark"] .header--scrolled {
  background: rgba(26, 15, 6, 0.98) !important;
}
[data-theme="dark"] .nav {
  background: rgba(26, 15, 6, 0.98);
  border-top-color: var(--border);
}

/* ── Dark: cards ─────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background: var(--paper);
  border-color: var(--border);
}

/* ── Dark: sections ──────────────────────────────────────────── */
[data-theme="dark"] .section--alt {
  background: var(--bg-alt);
}

/* ── Dark: hero ──────────────────────────────────────────────── */
[data-theme="dark"] .hero {
  background: transparent;
}

/* Trust badges ("100% Eggless", "FSSAI Certified", etc.) had a
   light, semi-transparent background paired with a light text color
   in dark mode — nearly invisible. Give them a warm, dark translucent
   chip background with bright cream text for proper contrast. */
[data-theme="dark"] .hero__badge {
  color: var(--ink);
  background: rgba(58, 34, 16, 0.55);
  border-color: rgba(200, 164, 126, 0.3);
}

/* ── Dark: auth button ───────────────────────────────────────── */
[data-theme="dark"] .hcb-auth-btn {
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-dropdown {
  background: rgba(26,15,6,0.97);
  border-color: var(--border);
}

/* ── Dark: modal ─────────────────────────────────────────────── */
[data-theme="dark"] .hcb-modal-card {
  background: #221408;
}
[data-theme="dark"] .hcb-modal-close {
  background: var(--bg-alt);
  color: var(--ink-soft);
}
[data-theme="dark"] .hcb-auth-google-btn {
  background: #2a1a0a;
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-google-btn:hover { background: #341f0c; }
[data-theme="dark"] .hcb-auth-phone-btn {
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-phone-btn:hover { background: var(--accent-light); }
[data-theme="dark"] .hcb-auth-input {
  background: #2a1a0a;
  border-color: var(--border);
  color: var(--ink);
}

/* ── Dark: menu sidebar ──────────────────────────────────────── */
[data-theme="dark"] .menu-sidebar {
  background: #1c1008;
  border-color: var(--border);
}
[data-theme="dark"] .menu-sidebar__link:hover,
[data-theme="dark"] .menu-sidebar__link.is-active {
  background: var(--accent-light);
}

/* ── Dark: mega menu ─────────────────────────────────────────── */
[data-theme="dark"] .hcb-mega__panel {
  background: rgba(26, 15, 6, 0.97);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .hcb-mega-item:hover {
  background: rgba(224,136,68,0.10);
  border-color: rgba(224,136,68,0.22);
}

/* ── Dark: checkout page ─────────────────────────────────────── */
[data-theme="dark"] .checkout-page,
[data-theme="dark"] .checkout-summary,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .cart-items {
  background: var(--paper);
  border-color: var(--border);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #2a1a0a;
  border-color: var(--border);
  color: var(--ink);
}

/* ── Dark: scroll progress ───────────────────────────────────── */
[data-theme="dark"] .scroll-progress {
  opacity: 0.85;
}

/* ── Dark: footer ────────────────────────────────────────────── */
[data-theme="dark"] .footer {
  background: #0f0803;
  border-top: 1px solid var(--border);
}

/* ── Dark: ensure all text is readable ───────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] li, [data-theme="dark"] span,
[data-theme="dark"] label, [data-theme="dark"] div {
  color: var(--ink);
}
[data-theme="dark"] .nav a,
[data-theme="dark"] .brand__name,
[data-theme="dark"] .brand__tag,
[data-theme="dark"] .section__eyebrow,
[data-theme="dark"] .muted,
[data-theme="dark"] .about__range-item,
[data-theme="dark"] .contact li,
[data-theme="dark"] .contact a { color: var(--ink); }
[data-theme="dark"] .muted,
[data-theme="dark"] .brand__tag,
[data-theme="dark"] .hero__subtitle,
[data-theme="dark"] .about__origin-lead { color: var(--ink-soft); }
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer a { color: var(--ink-soft); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* ── Dark: form inputs ───────────────────────────────────────── */
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
  background: #2a1a0a !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #231408 !important;
  color: #f0e4ce !important;
  border-color: #3a2210 !important;
}

/* ── Dark: nav dropdown ──────────────────────────────────────── */
[data-theme="dark"] .nav-menu-dropdown {
  background: #1c1008 !important;
}
[data-theme="dark"] .nav-menu-dropdown a,
[data-theme="dark"] .nav-menu-dropdown a:hover {
  color: #f0e4ce !important;
}

/* ── Dark: checkout & payment elements ───────────────────────── */
[data-theme="dark"] .checkout-summary,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .cart-items,
[data-theme="dark"] .payment-option {
  background: #1f1308 !important;
  border-color: #3a2210 !important;
  color: #f0e4ce !important;
}
[data-theme="dark"] .payment-option:hover,
[data-theme="dark"] .payment-option.is-selected {
  background: #2e1a08 !important;
}

/* ── Dark: section backgrounds ────────────────────────────────── */
[data-theme="dark"] .section {
  background: transparent !important;
}
[data-theme="dark"] .section--alt {
  background: #1f1308 !important;
}

/* ── Dark: hero::before overlay ──────────────────────────────── */
[data-theme="dark"] .hero::before,
[data-theme="dark"] .hero::after {
  opacity: 0.15 !important;
}

/* ── Dark: callout / blockquote boxes ───────────────────────── */
[data-theme="dark"] .about__origin,
[data-theme="dark"] .about__promise {
  background: rgba(200, 98, 30, 0.10) !important;
  border-left-color: rgba(200, 98, 30, 0.35) !important;
  border-color: rgba(200, 98, 30, 0.2) !important;
}
[data-theme="dark"] .about__origin *,
[data-theme="dark"] .about__promise * {
  color: var(--ink) !important;
}
[data-theme="dark"] .about__promise-tagline {
  color: var(--ink-soft) !important;
}

/* ── Dark: menu/product page cards & elements ────────────────── */
[data-theme="dark"] .product-card,
[data-theme="dark"] .menu-card,
[data-theme="dark"] .card__body,
[data-theme="dark"] .card__title,
[data-theme="dark"] .card__desc,
[data-theme="dark"] .card__price { color: var(--ink); }
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .page-eyebrow,
[data-theme="dark"] .page-title,
[data-theme="dark"] .page-desc { color: var(--ink); }

/* ── Smooth theme transition ─────────────────────────────────── */
body, .header, .card, .section--alt, .hcb-modal-card,
.hcb-mega__panel, .menu-sidebar, .footer, .hcb-auth-dropdown {
  transition-property: background-color, border-color, color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}