/* ═══════════════════════════════════════════════════════════════
   BFC HOTEL – GLOBAL THEME SYSTEM (Light / Dark)
   Applies via  html.dark  class toggled by theme.js
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT THEME tokens ── */
:root {
  --bg:           #ffffff;
  --bg-secondary: #f9fafb;
  --text:         #111827;
  --text-muted:   #6b7280;
  --card-bg:      #ffffff;
  --border:       #e5e7eb;
  --primary:      #f59e0b;
  --primary-dark: #d97706;
  --primary-glow: rgba(245,158,11,.28);
  --theme-t: 0.3s ease;
}

/* ── 2. DARK THEME — Premium True Black ── */
html.dark {
  --bg:           #0a0a0a;
  --bg-secondary: #050505;
  --text:         #f5f5f5;
  --text-muted:   #a3a3a3;
  --card-bg:      #111111;
  --border:       rgba(255,255,255,0.07);
  --primary:      #fbbf24;
  --primary-dark: #f59e0b;
  --primary-glow: rgba(251,191,36,.20);
}

/* ── 3. BASE ELEMENT TRANSITIONS ── */
*,
*::before,
*::after {
  transition:
    background-color var(--theme-t),
    border-color     var(--theme-t),
    color            var(--theme-t),
    box-shadow       var(--theme-t);
}
/* Don't transition things that shouldn't animate with theme */
video,
img,
svg,
.hero-video,
.strip-item,
.food-card-img,
canvas {
  transition: none !important;
}

/* ── 4. BODY & SCROLL ── */
html.dark body {
  background: var(--bg);
  color:       var(--text);
}
html.dark ::-webkit-scrollbar-track { background: #0a0a0a; }
html.dark ::-webkit-scrollbar-thumb { background: #2a2a2a; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* ── 5. NAVBAR (user-facing) ── */
html.dark .bfc-nav {
  background:    rgba(10,10,10,0.94) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:    0 4px 24px rgba(0,0,0,.8) !important;
}
html.dark .bfc-nav.scrolled {
  background: rgba(10,10,10,0.99) !important;
}
html.dark .nav-logo-text          { color: var(--text) !important; }
html.dark .nav-links li a         { color: #a3a3a3 !important; }
html.dark .nav-links li a:hover,
html.dark .nav-links li a.active  { color: var(--primary) !important; background: rgba(251,191,36,.08) !important; }
html.dark .nav-login-btn          { background: rgba(255,255,255,.04) !important; color: #a3a3a3 !important; border-color: rgba(255,255,255,.1) !important; }
html.dark .nav-login-btn:hover    { border-color: var(--primary) !important; color: var(--primary) !important; }
html.dark .nav-user-btn           { background: none !important; color: #a3a3a3 !important; border-color: rgba(255,255,255,.1) !important; }
html.dark .nav-user-btn:hover     { border-color: var(--primary) !important; color: var(--primary) !important; }
html.dark .nav-dropdown           { background: #161616 !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 20px 50px rgba(0,0,0,.9) !important; }
html.dark .nav-dropdown a         { color: #a3a3a3 !important; }
html.dark .nav-dropdown a:hover   { background: rgba(255,255,255,.05) !important; color: #f5f5f5 !important; }
html.dark .nav-dropdown hr        { background: rgba(255,255,255,.07) !important; }
html.dark .hamburger span         { background: #a3a3a3 !important; }

/* Mobile drawer */
html.dark .mobile-drawer          { background: #0a0a0a !important; }
html.dark .drawer-close           { background: #1a1a1a !important; color: #a3a3a3 !important; }
html.dark .drawer-close:hover     { background: #2a2a2a !important; }
html.dark .drawer-nav a           { color: #a3a3a3 !important; }
html.dark .drawer-nav a:hover     { background: rgba(251,191,36,.08) !important; color: var(--primary) !important; }

/* ── 6. FOOD CARDS ── */
html.dark .food-card              { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .food-card:hover        { box-shadow: 0 16px 48px rgba(0,0,0,.7) !important; border-color: rgba(251,191,36,.25) !important; }
html.dark .food-card-name         { color: #f5f5f5 !important; }
html.dark .food-card-cat          { color: #525252 !important; }
html.dark .food-price             { color: var(--primary) !important; }
html.dark .food-card-badge        { background: #0a0a0a !important; color: #f5f5f5 !important; }

/* ── 7. ADD / QTY BUTTONS ── */
html.dark .add-btn                { background: rgba(251,191,36,.08) !important; color: var(--primary) !important; border-color: rgba(251,191,36,.3) !important; }
html.dark .add-btn:hover          { background: var(--primary) !important; color: #0a0a0a !important; }

/* ── 8. SECTIONS ── */
html.dark .section                { background: var(--bg) !important; }
html.dark .section-grey           { background: #050505 !important; }
html.dark .section-head h2        { color: #f5f5f5 !important; }
html.dark .section-head p         { color: #525252 !important; }

/* ── 9. FEATURE CARDS ── */
html.dark .feature-card           { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .feature-card:hover     { border-color: rgba(251,191,36,.35) !important; box-shadow: 0 16px 40px rgba(0,0,0,.6) !important; }
html.dark .feature-icon           { background: rgba(251,191,36,.08) !important; }
html.dark .feature-card:hover .feature-icon { background: rgba(251,191,36,.15) !important; }
html.dark .feature-card h4        { color: #f5f5f5 !important; }
html.dark .feature-card p         { color: #525252 !important; }

/* ── 10. REVIEW CARDS ── */
html.dark .review-card            { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .review-card:hover      { box-shadow: 0 12px 36px rgba(0,0,0,.6) !important; }
html.dark .review-text            { color: #a3a3a3 !important; }
html.dark .review-name            { color: #f5f5f5 !important; }
html.dark .review-date            { color: #404040 !important; }

/* ── 11. CATEGORY PILLS (light section) ── */
html.dark .cat-pill               { background: #161616 !important; border-color: rgba(255,255,255,.08) !important; }
html.dark .cat-pill:hover,
html.dark .cat-pill.active        { background: rgba(251,191,36,.1) !important; border-color: rgba(251,191,36,.4) !important; }
html.dark .cat-pill-wrap .cat-name{ color: #a3a3a3 !important; }

/* Food strip */
html.dark .food-strip             { background: #050505 !important; border-color: rgba(255,255,255,.04) !important; }

/* Offer dots */
html.dark .offer-dot              { background: #2a2a2a !important; }
html.dark .offer-dot.active       { background: var(--primary) !important; }

/* ── 12. FORMS ── */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark select,
html.dark input,
html.dark textarea                { background: #0a0a0a !important; border-color: rgba(255,255,255,.1) !important; color: #f5f5f5 !important; }
html.dark .form-input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder   { color: #404040 !important; }
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus    { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow) !important; }
html.dark .form-label,
html.dark label                   { color: #a3a3a3 !important; }

/* Hero search */
html.dark .hero-search-wrap       { background: rgba(10,10,10,.94) !important; border-color: rgba(255,255,255,.1) !important; }
html.dark .hero-search-wrap:focus-within { border-color: var(--primary) !important; }
html.dark .hero-search-input      { color: #f5f5f5 !important; }
html.dark .hero-search-input::placeholder { color: #404040 !important; }

/* ── 13. BUTTONS ── */
html.dark .btn-white              { background: #1a1a1a !important; color: #f5f5f5 !important; }
html.dark .btn-white:hover        { background: #222222 !important; }
html.dark .btn-outline            { border-color: rgba(255,255,255,.35) !important; color: #f5f5f5 !important; background: rgba(255,255,255,.04) !important; }
html.dark .btn-outline:hover      { background: rgba(255,255,255,.1) !important; }
html.dark .nav-cart-link          { background: var(--primary) !important; color: #0a0a0a !important; }

/* ── 14. ALERTS ── */
html.dark .alert-error            { background: rgba(220,38,38,.1) !important; }
html.dark .alert-success          { background: rgba(22,163,74,.1) !important; }

/* ── 15. PROCESSING OVERLAY ── */
html.dark .processing-overlay     { background: rgba(10,10,10,.95) !important; }

/* ── 16. FOOTER ── */
html.dark .bfc-footer             { background: #050505 !important; }
html.dark .footer-col ul li a     { color: rgba(255,255,255,.3) !important; }
html.dark .footer-col ul li a:hover { color: var(--primary) !important; }

/* ── 17. STRIP POPUP CARD ── */
html.dark .strip-popup-card       { background: rgba(17,17,17,0.98) !important; border-color: rgba(255,255,255,.1) !important; }
html.dark .strip-popup-card::after{ border-top-color: rgba(17,17,17,0.98) !important; }
html.dark .spc-name               { color: #f5f5f5 !important; }
html.dark .spc-desc               { color: #a3a3a3 !important; }

/* ── 18. IMAGE BRIGHTNESS IN DARK MODE ── */
html.dark .food-card-img,
html.dark .strip-item img,
html.dark .hero-img-card img,
html.dark .food-thumb             { filter: brightness(0.82) !important; }

/* ── 19. PROMO TICKER ── */
/* Already dark by design – no change needed */

/* ── 19b. CATEGORY SECTION WAVE DIVIDERS ── */
html.dark .cat-wave-path-top       { fill: #0a0a0a !important; }
html.dark .cat-wave-path-bottom    { fill: #0a0a0a !important; }
/* Also target by parent wrapper in case class doesn't match */
html.dark .cat-wave-top  svg path  { fill: #0a0a0a !important; }
html.dark .cat-wave-bottom svg path{ fill: #0a0a0a !important; }
/* Override any other inline SVG wave fills on the page */
html.dark .wave-divider svg path   { fill: #0a0a0a !important; }
html.dark .section-wave svg path   { fill: #0a0a0a !important; }

/* ═══════════════════════════════════════════
   ADMIN PANEL DARK MODE — Premium Black
   ═══════════════════════════════════════════ */

/* Top bar */
html.dark .top-bar                { background: #0a0a0a !important; border-color: rgba(255,255,255,.05) !important; box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 4px 20px rgba(0,0,0,.6) !important; }
html.dark .page-title             { color: #f5f5f5 !important; }
html.dark .mobile-toggle          { color: #a3a3a3 !important; }
html.dark .mobile-toggle:hover    { background: rgba(255,255,255,.05) !important; }
html.dark .admin-badge            { border-color: rgba(255,255,255,.07) !important; color: #a3a3a3 !important; }
html.dark .refresh-btn            { background: rgba(255,255,255,.05) !important; color: #a3a3a3 !important; }
html.dark .refresh-btn:hover      { background: rgba(251,191,36,.1) !important; color: var(--primary) !important; }

/* Content area */
html.dark .content-area           { background: #060606 !important; }
html.dark .content-area::-webkit-scrollbar-track { background: transparent; }

/* Glass card */
html.dark .glass-card             { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; box-shadow: 0 2px 20px rgba(0,0,0,.5) !important; }
html.dark .card-title             { color: #f5f5f5 !important; }

/* Stat cards */
html.dark .stat-card              { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .stat-value             { color: #f5f5f5 !important; }
html.dark .stat-label             { color: #525252 !important; }

/* Tables */
html.dark table                   { background: transparent !important; }
html.dark th                      { background: rgba(255,255,255,.02) !important; color: #525252 !important; border-color: rgba(255,255,255,.05) !important; }
html.dark td                      { color: #a3a3a3 !important; border-color: rgba(255,255,255,.04) !important; }
html.dark tr:hover td             { background: rgba(255,255,255,.03) !important; }
html.dark .table-wrap             { border-color: rgba(255,255,255,.06) !important; }

/* Filter pills */
html.dark .filter-pill            { background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important; color: #a3a3a3 !important; }
html.dark .filter-pill:hover      { border-color: var(--primary) !important; color: var(--primary) !important; }
html.dark .filter-pill.active     { background: var(--primary) !important; border-color: var(--primary) !important; color: #0a0a0a !important; }

/* Status select */
html.dark .status-select          { background: #0a0a0a !important; border-color: rgba(255,255,255,.1) !important; color: #f5f5f5 !important; }

/* Buttons – edit / del / toggle */
html.dark .btn-edit               { background: rgba(255,255,255,.06) !important; color: #a3a3a3 !important; }
html.dark .btn-edit:hover         { background: rgba(251,191,36,.1) !important; color: var(--primary) !important; }
html.dark .btn-del                { background: rgba(220,38,38,.1) !important; color: #ef4444 !important; }
html.dark .btn-del:hover          { background: #dc2626 !important; color: #fff !important; }
html.dark .btn-toggle             { background: rgba(255,255,255,.06) !important; color: #a3a3a3 !important; }
html.dark .btn-toggle.on          { background: rgba(22,163,74,.12) !important; color: #4ade80 !important; }

/* Filter bar selects */
html.dark .filter-select-sm       { background: #0a0a0a !important; border-color: rgba(255,255,255,.1) !important; color: #a3a3a3 !important; }

/* Admin offer cards */
html.dark .offer-card,
html.dark .offer-card-admin       { background: #111111 !important; border-color: rgba(255,255,255,.06) !important; }
html.dark .offer-card:hover       { box-shadow: 0 12px 36px rgba(0,0,0,.6) !important; }
html.dark .offer-card-stats       { background: rgba(255,255,255,.02) !important; }
html.dark .offer-card-title,
html.dark .offer-title-txt        { color: #f5f5f5 !important; }
html.dark .offer-card-desc,
html.dark .offer-desc-txt         { color: #525252 !important; }
html.dark .offer-card-footer,
html.dark .offer-footer           { border-color: rgba(255,255,255,.06) !important; }
html.dark .offer-stat-val         { color: #f5f5f5 !important; }
html.dark .offer-stat-lbl         { color: #525252 !important; }

/* Modal */
html.dark .modal-overlay          { background: rgba(0,0,0,.85) !important; backdrop-filter: blur(8px); }
html.dark .modal-content          { background: #111111 !important; box-shadow: 0 32px 80px rgba(0,0,0,.9) !important; }
html.dark .modal-title            { color: #f5f5f5 !important; }
html.dark .modal-close            { color: #525252 !important; }
html.dark .modal-close:hover      { color: #f5f5f5 !important; }

/* Admin login overlay stays dark always */
html.dark #loginOverlay           { background: linear-gradient(145deg,#050505,#0a0a0a) !important; }

/* Sidebar — true black */
html.dark .sidebar                { background: #080808 !important; border-color: rgba(255,255,255,.04) !important; }
html.dark .sidebar-brand          { border-color: rgba(255,255,255,.04) !important; }
html.dark .sidebar-bottom         { border-color: rgba(255,255,255,.04) !important; }
html.dark .sidebar-section        { color: rgba(255,255,255,.18) !important; }

/* Save button */
html.dark .save-btn               { background: var(--primary) !important; color: #0a0a0a !important; }
html.dark .save-btn:hover         { background: var(--primary-dark) !important; color: #fff !important; }

/* Offer scope checkbox container */
html.dark #offerScopeCheckboxes   { background: #0a0a0a !important; border-color: rgba(255,255,255,.1) !important; }

/* Simulator panels */
html.dark #mockCartSummary,
html.dark #mockResults            { background: rgba(255,255,255,.02) !important; border-color: rgba(255,255,255,.06) !important; color: #a3a3a3 !important; }

/* Toggle switch (slider stays colored) */
html.dark .slider                 { background-color: #2a2a2a !important; }
html.dark input:checked + .slider { background-color: #16a34a !important; }

/* ── 20. DARK MODE TOGGLE BUTTON ── */
.theme-toggle-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   50%;
  border:          1.5px solid var(--grey-200, #e5e7eb);
  background:      transparent;
  cursor:          pointer;
  font-size:       1.05rem;
  color:           var(--grey-700, #374151);
  transition:      background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
  flex-shrink:     0;
  position:        relative;
  overflow:        hidden;
}
.theme-toggle-btn:hover {
  background:   var(--yellow-light, #fff8e1);
  border-color: var(--yellow, #ffc107);
  transform:    translateY(-1px);
  box-shadow:   0 4px 14px rgba(251,191,36,.28);
}
.theme-toggle-btn:active {
  transform:    scale(0.92);
}

/* In dark mode, the button inverts subtly */
html.dark .theme-toggle-btn {
  border-color: rgba(255,255,255,.15);
  color:        #f1f5f9;
}
html.dark .theme-toggle-btn:hover {
  background:   rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.4);
}

/* Icon spin animation on toggle */
.theme-toggle-btn .toggle-icon {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
  transform-origin: center;
}
.theme-toggle-btn.toggling .toggle-icon {
  transform: rotate(180deg) scale(0.6);
  opacity: 0;
}

/* ── 21. RESPONSIVE: keep toggle visible at all sizes ── */
@media (max-width: 768px) {
  /* Ensure toggle sits between hamburger and other items */
  .theme-toggle-btn {
    width:  34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* ── 22. ADMIN PANEL background wrap ── */
html.dark #adminPanel {
  background: #060606 !important;
}

/* ── 23. DARK MODE: remove any hardcoded white/light backgrounds on inline styles ── */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"] {
  background: #111111 !important;
  color: #f5f5f5 !important;
}

/* ── 24. BFC Dialog dark mode ── */
html.dark .bfc-dialog-overlay { background: rgba(0,0,0,.88) !important; }
html.dark .bfc-dialog          { background: #111111 !important; border-color: rgba(255,255,255,.07) !important; color: #f5f5f5 !important; }
html.dark .bfc-dialog-title    { color: #f5f5f5 !important; }
html.dark .bfc-dialog-msg      { color: #a3a3a3 !important; }
html.dark .bfc-dialog-btn      { background: rgba(255,255,255,.05) !important; color: #a3a3a3 !important; border-color: rgba(255,255,255,.08) !important; }
html.dark .bfc-dialog-btn:hover{ background: rgba(255,255,255,.1) !important; }
html.dark .bfc-dialog-btn.primary { background: var(--primary) !important; color: #0a0a0a !important; border-color: var(--primary) !important; }
html.dark .bfc-dialog-btn.danger  { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; }