@charset "UTF-8";

/* ==========================================================================
   DIGIDAWG STORE — LUXURY CYBER DESIGN SYSTEM (BIRU • PUTIH • HITAM)
   Optimized for Mobile (HP), Admin Cloud Mode & Reseller Mode
   ========================================================================== */

:root {
  /* ========================================================================
     DESIGN TOKENS — SYSTEM PALETTE (WCAG AA / AAA ACCESSIBILITY)
     Dark Mode (Default)
     ======================================================================== */
  --background: #0F172A;
  --surface: #1E293B;
  --surface-card: #0C1322;
  --surface-elevated: #162032;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --primary-blue: #60A5FA;
  --primary-blue-deep: #1D4ED8;
  --text-link: #93C5FD;
  --border: #334155;
  --border-light: rgba(59, 130, 246, 0.25);

  /* Button Tokens */
  --button-primary-bg: #1D4ED8;
  --button-primary-hover: #2563EB;
  --button-primary-text: #FFFFFF;

  --button-white-bg: #FFFFFF;
  --button-white-hover: #F8FAFC;
  --button-white-text: #0F172A;
  --button-white-border: #CBD5E1;

  --button-secondary-bg: #1E293B;
  --button-secondary-hover: #334155;
  --button-secondary-text: #F8FAFC;
  --button-secondary-border: #334155;

  --button-disabled-bg: #1E293B;
  --button-disabled-text: #64748B;
  --button-disabled-border: #334155;

  /* Form Tokens */
  --input-bg: #0C1322;
  --input-text: #F8FAFC;
  --input-placeholder: #94A3B8;
  --input-border: #334155;
  --input-focus-border: #3B82F6;

  /* Backward Compatibility Aliases */
  --bg-black: #0F172A;
  --bg-dark: #070B14;
  --bg-card: #0C1322;
  --bg-card-subtle: #1E293B;
  --bg-border: #334155;
  --dawg-blue: #2563EB;
  --dawg-blue-light: #60A5FA;
  --dawg-sky: #38BDF8;
  --dawg-white: #F8FAFC;
  --dawg-glow: rgba(37, 99, 235, 0.45);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body, button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg-black);
  color: var(--dawg-white);
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

/* ==========================================================================
   UNIVERSAL FONT LEGIBILITY & ANTI-MICRO-TEXT BASELINE
   Ensures text is never tiny or unreadable on high-DPI smartphone screens
   ========================================================================== */
.text-\[8\.5px\],
.text-\[9px\],
.text-\[9\.5px\],
.text-\[10px\],
.text-\[10\.5px\] {
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

@media (min-width: 640px) {
  .text-\[8\.5px\],
  .text-\[9px\],
  .text-\[9\.5px\],
  .text-\[10px\],
  .text-\[10\.5px\] {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   CYBER AMBIENT GRID & LIGHTING
   ========================================================================== */
.bg-dawg-grid {
  background-color: #03050a;
  background-image: 
    radial-gradient(circle at 50% -10%, rgba(37, 99, 235, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 45%),
    linear-gradient(to right, rgba(59, 130, 246, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  background-attachment: fixed;
}

/* Glassmorphism & Glowing Utilities */
.glass-panel {
  background: rgba(11, 17, 32, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.glass-panel-subtle {
  background: rgba(7, 11, 20, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.glow-blue {
  box-shadow: 0 0 30px -4px rgba(37, 99, 235, 0.55);
}

.glow-sky {
  box-shadow: 0 0 28px -5px rgba(56, 189, 248, 0.45);
}

.glow-white {
  box-shadow: 0 0 24px -5px rgba(255, 255, 255, 0.35);
}

.glow-pill {
  box-shadow: 0 0 15px -2px rgba(59, 130, 246, 0.5);
}

/* ==========================================================================
   PRODUCT CARDS (.dawg-card)
   ========================================================================== */
.dawg-card {
  position: relative;
  background: linear-gradient(180deg, #101a2e 0%, #09101d 100%);
  border: 1.5px solid rgba(59, 130, 246, 0.32);
  border-radius: 1.125rem;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(59, 130, 246, 0.12);
}

.dawg-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
  .dawg-card:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.75);
    box-shadow: 0 18px 36px -8px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(56, 189, 248, 0.2);
  }
  .dawg-card:hover::before {
    opacity: 1;
  }
}

/* ==========================================================================
   BUTTONS & MICRO-INTERACTIONS
   ========================================================================== */
button, a.btn-cta {
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   BUTTON & FORM TOKEN MAPPINGS (DARK MODE DEFAULT)
   ========================================================================== */
.btn-primary,
button.bg-blue-600,
a.bg-blue-600,
#btn-admin-access,
#btn-submit-login,
#btn-open-create-product,
#btn-sync-cloud-header,
#btn-submit-order-checkout,
#btn-submit-cart-wa,
#btn-claim-popup-promo,
#btn-banner-reseller-dash {
  background-color: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-bg) !important;
}
.btn-primary:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover,
#btn-admin-access:hover,
#btn-submit-login:hover,
#btn-open-create-product:hover,
#btn-sync-cloud-header:hover,
#btn-submit-order-checkout:hover,
#btn-submit-cart-wa:hover,
#btn-claim-popup-promo:hover,
#btn-banner-reseller-dash:hover {
  background-color: var(--button-primary-hover) !important;
  color: var(--button-primary-text) !important;
}
.btn-primary *,
button.bg-blue-600 *,
a.bg-blue-600 *,
#btn-admin-access *,
#btn-submit-login *,
#btn-open-create-product *,
#btn-sync-cloud-header *,
#btn-submit-order-checkout *,
#btn-submit-cart-wa *,
#btn-claim-popup-promo *,
#btn-banner-reseller-dash * {
  color: var(--button-primary-text) !important;
}

.btn-white,
#btn-open-invoice-search,
#hero-tiktok-btn,
#card-tiktok-btn,
#btn-banner-reseller-broadcast,
#btn-apply-cart-voucher,
#btn-download-json-backup,
#btn-update-admin-pass {
  background-color: var(--button-white-bg) !important;
  color: var(--button-white-text) !important;
  border: 1.5px solid var(--button-white-border) !important;
}
.btn-white:hover,
#btn-open-invoice-search:hover,
#hero-tiktok-btn:hover,
#card-tiktok-btn:hover,
#btn-banner-reseller-broadcast:hover,
#btn-apply-cart-voucher:hover,
#btn-download-json-backup:hover,
#btn-update-admin-pass:hover {
  background-color: var(--button-white-hover) !important;
  border-color: #94A3B8 !important;
  color: var(--button-white-text) !important;
}
.btn-white span,
.btn-white strong,
#btn-open-invoice-search span,
#hero-tiktok-btn span,
#card-tiktok-btn span,
#btn-banner-reseller-broadcast span,
#btn-apply-cart-voucher span {
  color: var(--button-white-text) !important;
}
.btn-white i,
#btn-open-invoice-search i,
#hero-tiktok-btn i,
#card-tiktok-btn i,
#btn-banner-reseller-broadcast i,
#btn-apply-cart-voucher i {
  color: #1D4ED8 !important;
}

/* Secondary Button in Dark Mode */
:root:not(.theme-light) #btn-theme-toggle,
:root:not(.theme-light) #btn-open-cart,
:root:not(.theme-light) .btn-theme-toggle-admin,
:root:not(.theme-light) #btn-view-cards,
:root:not(.theme-light) #btn-view-table,
:root:not(.theme-light) #btn-cancel-product-modal,
:root:not(.theme-light) #btn-cancel-voucher-modal,
:root:not(.theme-light) #btn-cancel-reseller-modal,
:root:not(.theme-light) #btn-export-orders-csv {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: 1.5px solid var(--button-secondary-border);
}
:root:not(.theme-light) #btn-open-cart i {
  color: var(--primary-blue);
}
:root:not(.theme-light) #btn-open-cart span:not(#cart-badge-count) {
  color: var(--button-secondary-text);
}

:root:not(.theme-light) #btn-show-login-reseller {
  background-color: var(--button-secondary-bg);
  border: 1.5px solid var(--button-secondary-border);
  color: var(--text-link);
}
:root:not(.theme-light) #btn-show-login-reseller i {
  color: var(--primary-blue);
}
:root:not(.theme-light) #btn-show-login-reseller:hover {
  background-color: #334155;
  color: #FFFFFF;
}

/* Disabled Button Tokens (Dark Mode) */
:root:not(.theme-light) button:disabled,
:root:not(.theme-light) button.disabled,
:root:not(.theme-light) .btn-disabled,
:root:not(.theme-light) [disabled],
:root:not(.theme-light) .flash-out-of-stock-btn {
  background-color: var(--button-disabled-bg) !important;
  color: var(--button-disabled-text) !important;
  border: 1.5px solid var(--button-disabled-border) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
:root:not(.theme-light) button:disabled *,
:root:not(.theme-light) button.disabled *,
:root:not(.theme-light) .btn-disabled *,
:root:not(.theme-light) [disabled] *,
:root:not(.theme-light) .flash-out-of-stock-btn * {
  color: var(--button-disabled-text) !important;
}

/* Input Placeholders in Dark Mode */
:root:not(.theme-light) input::placeholder,
:root:not(.theme-light) textarea::placeholder {
  color: var(--input-placeholder) !important;
  font-weight: 500;
}

button:active, a:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* Cart Badge Bounce Animation */
@keyframes cartBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  65% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.cart-pop {
  animation: cartBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pulse Glow Animation */
@keyframes pulseGlowBlue {
  0%, 100% {
    box-shadow: 0 0 22px -2px rgba(37, 99, 235, 0.65), 0 0 8px 1px rgba(56, 189, 248, 0.35) inset;
  }
  50% {
    box-shadow: 0 0 36px 4px rgba(59, 130, 246, 0.9), 0 0 14px 2px rgba(255, 255, 255, 0.45) inset;
  }
}

.dawg-logo-crest {
  position: relative;
  background: radial-gradient(circle at center, #0f172a 0%, #000000 100%);
  animation: pulseGlowBlue 3.5s infinite ease-in-out;
}

/* Search Highlight Mark (Biru-Putih) */
mark {
  border-radius: 4px;
  padding: 0 3px;
  background-color: #2563eb;
  color: #ffffff;
  font-weight: 700;
}

/* Category Pills & Tab Active States */
.cat-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-btn.active {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 4px 18px -2px rgba(37, 99, 235, 0.65);
}

/* FAQ Accordion Transitions */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}

.faq-content.open {
  max-height: 600px;
  transition: max-height 0.45s ease-in-out;
}

/* Scrollbar Customization (Biru Hitam) */
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #03050a;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Mobile Bottom Navigation Dock Spacing */
body {
  padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

/* Floating Bottom Navigation Bar for Mobile */
.mobile-bottom-dock {
  background: rgba(3, 5, 10, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 -10px 30px -5px rgba(0, 0, 0, 0.7);
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Mobile Bottom-Sheet Modal & Responsive Conditioning (HP <= 640px) */
.mobile-sheet-handle {
  width: 42px;
  height: 5px;
  background-color: #334155;
  border-radius: 9999px;
  margin: 0 auto 12px auto;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
  }

  /* Make modals sit nicely as mobile sheets with rounded top */
  .mobile-sheet-modal {
    align-items: flex-end !important;
    padding: 0 !important;
    padding-top: max(1.25rem, env(safe-area-inset-top, 20px)) !important;
    overflow-y: hidden !important;
  }

  .mobile-sheet-content {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    max-height: min(84dvh, 84vh) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.1rem 1rem max(1.75rem, calc(1.5rem + env(safe-area-inset-bottom))) 1rem;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: 0 -15px 40px -5px rgba(0, 0, 0, 0.8) !important;
    -webkit-overflow-scrolling: touch;
  }

  #checkout-modal .mobile-sheet-content {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Prevent iOS Safari auto-zoom on input focus */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   UNIVERSAL FORM CONTROLS (DARK THEME DEFAULT - CRYSTAL CLEAR LEGIBILITY)
   ========================================================================== */
:root:not(.theme-light) input:not([type="checkbox"]):not([type="radio"]),
:root:not(.theme-light) select,
:root:not(.theme-light) textarea {
  background-color: #091122 !important;
  border: 1.5px solid rgba(59, 130, 246, 0.32) !important;
  color: #F8FAFC !important;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:root:not(.theme-light) input:focus,
:root:not(.theme-light) select:focus,
:root:not(.theme-light) textarea:focus {
  background-color: #0d172e !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28) !important;
  outline: none !important;
}

:root:not(.theme-light) input::placeholder,
:root:not(.theme-light) textarea::placeholder {
  color: #94A3B8 !important;
  font-weight: 400;
}

:root:not(.theme-light) option {
  background-color: #0C1322 !important;
  color: #F8FAFC !important;
}

/* Line Clamp helpers */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spreadsheet Table Input Styling */
.sheet-input {
  background: #050811;
  border: 1px solid #1e293b;
  color: #ffffff;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  width: 100%;
  transition: border-color 0.2s, background-color 0.2s;
}
.sheet-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #0b1325;
}

/* Admin Tab Active State */
.admin-tab-btn.active {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 0 18px -4px rgba(37, 99, 235, 0.7);
}

/* Receipt Paper Styles */
.dawg-receipt-paper {
  position: relative;
  background: linear-gradient(180deg, #070c18 0%, #03060c 100%);
  border: 2px solid rgba(59, 130, 246, 0.65);
  box-shadow: 0 20px 50px -10px rgba(37, 99, 235, 0.5);
}

.dawg-receipt-divider {
  border-top: 1.5px dashed rgba(59, 130, 246, 0.45);
  margin: 0.65rem 0;
}

.wa-struk-preview {
  background: linear-gradient(145deg, #040811 0%, #091326 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}

/* ==========================================================================
   AMBIENT MUSIC EQUALIZER ANIMATION
   ========================================================================== */
@keyframes barBounce {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}
.equalizer-bar {
  display: inline-block;
  width: 2.5px;
  background-color: #38bdf8;
  border-radius: 9999px;
  animation: barBounce 1s infinite ease-in-out;
}
.equalizer-bar:nth-child(2) { animation-delay: 0.2s; }
.equalizer-bar:nth-child(3) { animation-delay: 0.4s; }

/* ==========================================================================
   MODAL UI/UX SYSTEM: INFO PRODUK & FORM PEMESANAN (DARK THEME DEFAULT)
   ========================================================================== */
.modal-card-box {
  background-color: rgba(12, 19, 34, 0.78);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 0.875rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.dtl-var-item {
  background-color: rgba(12, 19, 34, 0.85);
  border: 1.5px solid rgba(59, 130, 246, 0.22);
  color: #f8fafc;
  border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dtl-var-item:hover {
  border-color: #3b82f6;
  background-color: rgba(37, 99, 235, 0.16);
  transform: translateY(-1px);
}

.dtl-var-item.active {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.28) 0%, rgba(30, 58, 138, 0.45) 100%);
  border-color: #3b82f6 !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.35);
}

.dtl-var-item .dtl-var-name {
  font-weight: 700;
  color: #f1f5f9;
}

.dtl-var-item.active .dtl-var-name {
  color: #ffffff;
  font-weight: 800;
}

.dtl-var-item .dtl-var-price {
  color: #93c5fd;
  font-weight: 800;
  font-family: 'Space Grotesk', sans-serif;
}

.dtl-var-item.active .dtl-var-price {
  color: #38bdf8;
  font-weight: 900;
  font-size: 0.95rem;
}

.var-radio-circle {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.dtl-var-item.active .var-radio-circle {
  border-color: #38bdf8;
  background: rgba(37, 99, 235, 0.3);
}

.var-radio-dot {
  background-color: #38bdf8;
}

.dtl-var-item.disabled {
  opacity: 0.45;
  cursor: not-allowed !important;
  background-color: rgba(15, 23, 42, 0.4) !important;
  border-color: rgba(100, 116, 139, 0.25) !important;
  pointer-events: none;
}

.dtl-var-item.disabled .dtl-var-name {
  text-decoration: line-through;
  color: #94a3b8;
}

/* Variant Chips in Checkout Modal */
.variant-chip {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  background: rgba(12, 19, 34, 0.7);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 700;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  user-select: none;
}

.variant-chip:hover {
  border-color: #3b82f6;
  background: rgba(37, 99, 235, 0.15);
}

.variant-chip.active {
  background: #2563eb;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
}

.variant-chip.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  border-color: rgba(100, 116, 139, 0.25);
  text-decoration: line-through;
}

#checkout-modal input,
#checkout-modal select,
#checkout-voucher-input,
#cart-modal input,
#cart-modal select {
  font-weight: 600;
  transition: all 0.2s ease;
}

#checkout-modal input:focus,
#checkout-modal select:focus,
#checkout-voucher-input:focus,
#cart-modal input:focus,
#cart-modal select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
  outline: none;
}

.btn-quick-copy {
  transition: all 0.15s ease;
}

/* ==========================================================================
   QUICK CATEGORY BUBBLE BOXES (DARK THEME DEFAULT)
   ========================================================================== */
#quick-category-section .quick-cat-bubble {
  background-color: #0c1322;
  border: 1px solid rgba(59, 130, 246, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#quick-category-section .quick-cat-bubble .bubble-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#quick-category-section .quick-cat-bubble .bubble-desc {
  color: #94a3b8 !important;
}

/* FLASH SALE OUT-OF-STOCK BADGE & CONTROLS */
.flash-out-of-stock-btn {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(0.8) !important;
}

/* ==========================================================================
   LIGHT THEME MODE — LUXURY CLEAN SLATE & WCAG AAA ULTRA CONTRAST
   Ensures 100% font legibility, zero invisible text, and cohesive elegance
   ========================================================================== */
html.theme-light {
  /* ========================================================================
     DESIGN TOKENS — LIGHT MODE
     ======================================================================== */
  --background: #FFFFFF;
  --surface: #F8FAFC;
  --surface-card: #FFFFFF;
  --surface-elevated: #F1F5F9;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --primary-blue: #1D4ED8;
  --primary-blue-deep: #1D4ED8;
  --text-link: #1D4ED8;
  --border: #CBD5E1;
  --border-light: #E2E8F0;

  /* Button Tokens */
  --button-primary-bg: #1D4ED8;
  --button-primary-hover: #1E40AF;
  --button-primary-text: #FFFFFF;

  --button-white-bg: #FFFFFF;
  --button-white-hover: #F8FAFC;
  --button-white-text: #0F172A;
  --button-white-border: #CBD5E1;

  --button-secondary-bg: #E2E8F0;
  --button-secondary-hover: #CBD5E1;
  --button-secondary-text: #0F172A;
  --button-secondary-border: #CBD5E1;

  --button-disabled-bg: #E2E8F0;
  --button-disabled-text: #64748B;
  --button-disabled-border: #CBD5E1;

  /* Form Tokens */
  --input-bg: #FFFFFF;
  --input-text: #0F172A;
  --input-placeholder: #64748B;
  --input-border: #CBD5E1;
  --input-focus-border: #1D4ED8;

  /* Backward Compatibility Aliases */
  --bg-black: #FFFFFF;
  --bg-dark: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F1F5F9;
  --bg-border: #CBD5E1;
  --dawg-blue: #1D4ED8;
  --dawg-blue-light: #2563EB;
  --dawg-sky: #0284C7;
  --dawg-white: #0F172A;
  --dawg-glow: rgba(29, 78, 216, 0.15);
}

html.theme-light,
html.theme-light body {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* 1. Ambient Background Grid in Light Mode */
html.theme-light .bg-dawg-grid {
  background-color: #FFFFFF !important;
  background-image: 
    radial-gradient(circle at 50% -10%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(56, 189, 248, 0.05) 0%, transparent 45%),
    linear-gradient(to right, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(203, 213, 225, 0.4) 1px, transparent 1px) !important;
}

/* 2. Base Typography & Headings in Light Mode */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6,
html.theme-light .font-heading,
html.theme-light .hero-title {
  color: #0F172A !important;
}

html.theme-light p {
  color: #475569 !important;
  font-weight: 500;
}

/* 3. UNIVERSAL CONTAINER NEUTRALIZATION: Neutralize all dark backgrounds & Tailwind dark gradients */
html.theme-light :is(div, section, nav, footer, aside, form, header):is(.bg-black, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80, .bg-black\/85, .bg-black\/90, .bg-slate-950, .bg-brand-dark, .bg-brand-dark\/90, .bg-brand-card, [class*="bg-black"], [class*="bg-brand-dark"], [class*="bg-brand-card"]):not(button):not(.btn-cta):not([class*="bg-blue"]):not([class*="bg-rose"]):not([class*="bg-emerald"]):not(#ambient-music-widget):not(.mobile-sheet-modal):not(#promo-popup-modal):not(#promo-carousel-container > div) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

html.theme-light :is(div, section, nav, footer, aside, form, header):is([class*="from-black"], [class*="via-brand-dark"], [class*="to-black"], [class*="from-blue-950"]):not(#promo-carousel-container > div):not(#ambient-music-widget):not(.mobile-sheet-modal):not(#promo-popup-modal):not(button):not([class*="bg-blue"]):not([class*="bg-rose"]):not([class*="bg-emerald"]) {
  background-image: none !important;
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
}

/* 4. UNIVERSAL TEXT CONTRAST ENFORCEMENT: Never allow white text on white/light backgrounds */
html.theme-light .text-white {
  color: #0F172A !important;
}

html.theme-light :is(.text-slate-100, .text-slate-200, .text-slate-300) {
  color: #334155 !important;
  font-weight: 500;
}

html.theme-light :is(.text-slate-400, .text-slate-500) {
  color: #475569 !important;
  font-weight: 500;
}

/* Pastels that wash out on white mapped to rich, high-contrast equivalents across all tags */
html.theme-light :is(.text-blue-100, .text-blue-200, .text-blue-300, .text-blue-400) {
  color: #1D4ED8 !important;
}

html.theme-light :is(.text-sky-100, .text-sky-200, .text-sky-300, .text-sky-400) {
  color: #0369A1 !important;
}

html.theme-light :is(.text-emerald-100, .text-emerald-200, .text-emerald-300, .text-emerald-400) {
  color: #047857 !important;
}

html.theme-light :is(.text-amber-100, .text-amber-200, .text-amber-300, .text-amber-400) {
  color: #B45309 !important;
}

html.theme-light :is(.text-rose-100, .text-rose-200, .text-rose-300, .text-rose-400) {
  color: #BE123C !important;
}

html.theme-light :is(.text-purple-100, .text-purple-200, .text-purple-300, .text-purple-400) {
  color: #7E22CE !important;
}

html.theme-light :is(.text-pink-100, .text-pink-200, .text-pink-300, .text-pink-400) {
  color: #BE185D !important;
}

html.theme-light :is(.text-gray-100, .text-gray-200, .text-gray-300, .text-gray-400) {
  color: #374151 !important;
}

/* Secondary, Ghost & Cancel Buttons in Light Mode */
html.theme-light :is([id^="btn-cancel-"], .btn-secondary, button:is(.bg-white\/10, .bg-white\/15, .bg-white\/20)) {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}
html.theme-light :is([id^="btn-cancel-"], .btn-secondary, button:is(.bg-white\/10, .bg-white\/15, .bg-white\/20)):hover {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* 5. PROTECT COLORED & SOLID BUTTONS SO THEIR TEXT REMAINS CRISP WHITE */
html.theme-light :is(
  .btn-primary,
  button.bg-blue-600,
  a.bg-blue-600,
  button.bg-blue-500,
  a.bg-blue-500,
  .bg-blue-600,
  .bg-blue-700,
  button.bg-rose-600,
  a.bg-rose-600,
  .bg-rose-600,
  button.bg-emerald-600,
  a.bg-emerald-600,
  .bg-emerald-600,
  .cat-btn.active,
  .tab-nav-btn.active,
  #cart-badge-count,
  #mobile-cart-badge,
  #toast,
  #toast *,
  #flash-timer-hours,
  #flash-timer-mins,
  #flash-timer-secs,
  #btn-submit-order-checkout,
  #btn-submit-cart-wa,
  #btn-claim-popup-promo,
  #btn-admin-access,
  #btn-buy-flash-sale,
  #btn-cart-flash-sale,
  #btn-sync-cloud-header,
  #btn-submit-login,
  #btn-open-create-product,
  #calc-join-reseller-wa,
  #dtl-btn-order-trigger
),
html.theme-light :is(
  .btn-primary,
  button.bg-blue-600,
  a.bg-blue-600,
  button.bg-blue-500,
  a.bg-blue-500,
  .bg-blue-600,
  .bg-blue-700,
  button.bg-rose-600,
  a.bg-rose-600,
  .bg-rose-600,
  button.bg-emerald-600,
  a.bg-emerald-600,
  .bg-emerald-600,
  .cat-btn.active,
  .tab-nav-btn.active,
  #btn-submit-order-checkout,
  #btn-submit-cart-wa,
  #btn-claim-popup-promo,
  #btn-admin-access,
  #btn-buy-flash-sale,
  #btn-cart-flash-sale,
  #btn-sync-cloud-header,
  #btn-submit-login,
  #btn-open-create-product,
  #calc-join-reseller-wa,
  #dtl-btn-order-trigger
) * {
  color: #FFFFFF !important;
}

/* 6. UNIVERSAL FORM CONTROLS: INPUTS, SELECTS, TEXTAREAS & OPTIONS IN LIGHT MODE */
html.theme-light input:not([type="checkbox"]):not([type="radio"]),
html.theme-light select,
html.theme-light textarea {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
  background-color: #FFFFFF !important;
  border-color: #1D4ED8 !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
  color: #0F172A !important;
  outline: none !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
  color: #64748B !important;
  font-weight: 500 !important;
}

html.theme-light option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

html.theme-light label {
  color: #0F172A !important;
  font-weight: 700 !important;
}

/* 7. TOP PROMO BAR (LIGHT MODE) */
html.theme-light div:has(> .max-w-7xl > div > #promo-announcement-text),
html.theme-light div.bg-gradient-to-r:has(#promo-announcement-text) {
  background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 50%, #eff6ff 100%) !important;
  border-bottom: 1px solid #bfdbfe !important;
  color: #1e3a8a !important;
}

html.theme-light #promo-announcement-text {
  color: #1e40af !important;
}

html.theme-light #promo-announcement-text strong {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

/* 8. NAVBAR (LIGHT MODE) */
html.theme-light nav.sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .brand-store-name {
  color: #0f172a !important;
}

html.theme-light .brand-store-subtitle {
  color: #2563eb !important;
  font-weight: 700 !important;
}

html.theme-light nav.sticky .text-slate-200 a {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.theme-light nav.sticky .text-slate-200 a:hover {
  color: #2563eb !important;
}

html.theme-light #btn-theme-toggle {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.theme-light #btn-theme-toggle:hover {
  background-color: #e2e8f0 !important;
}

html.theme-light #btn-open-cart {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #btn-open-cart:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

html.theme-light #btn-open-cart i {
  color: #1D4ED8 !important;
}

html.theme-light #btn-open-cart span:not(#cart-badge-count) {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.theme-light #btn-open-invoice-search {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #btn-open-invoice-search:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

html.theme-light #btn-open-invoice-search i {
  color: #1D4ED8 !important;
}

html.theme-light #btn-open-invoice-search span {
  color: #0F172A !important;
  font-weight: 800 !important;
}

html.theme-light #btn-show-login-reseller {
  background-color: #EFF6FF !important;
  border: 1.5px solid #BFDBFE !important;
  color: #1D4ED8 !important;
  font-weight: 800 !important;
}

html.theme-light #btn-show-login-reseller:hover {
  background-color: #DBEAFE !important;
  color: #1E40AF !important;
}

html.theme-light #btn-show-login-reseller i {
  color: #1D4ED8 !important;
}

html.theme-light #btn-admin-access {
  background-color: #1D4ED8 !important;
  border: 1.5px solid #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.3) !important;
}

html.theme-light #btn-admin-access:hover {
  background-color: #1E40AF !important;
  border-color: #1E40AF !important;
}

html.theme-light #btn-admin-access * {
  color: #FFFFFF !important;
}

html.theme-light #reseller-auth-badge {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.theme-light #reseller-auth-badge button {
  color: #1e293b !important;
}

/* 9. RESELLER ACTIVE COMMAND BANNER (LIGHT MODE) */
html.theme-light #reseller-active-banner {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #eff6ff 100%) !important;
  border-bottom: 1.5px solid #bfdbfe !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

html.theme-light #banner-reseller-name {
  color: #0f172a !important;
}

html.theme-light #reseller-active-banner p {
  color: #1e40af !important;
}

html.theme-light #reseller-active-banner .bg-black\/80 {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

html.theme-light #reseller-active-banner .text-slate-400 {
  color: #475569 !important;
}

html.theme-light #reseller-quick-markup-select {
  color: #1d4ed8 !important;
  background-color: #ffffff !important;
}

html.theme-light #reseller-quick-markup-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.theme-light #btn-banner-reseller-broadcast {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
}

html.theme-light #btn-banner-reseller-broadcast:hover {
  background-color: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

html.theme-light #btn-banner-reseller-broadcast i {
  color: #1D4ED8 !important;
}

html.theme-light #btn-banner-reseller-broadcast span {
  color: #0F172A !important;
  font-weight: 800 !important;
}

/* 10. HERO HEADER (LIGHT MODE) */
html.theme-light header.relative {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

html.theme-light header.relative h1,
html.theme-light header.relative h1.hero-title {
  color: #0f172a !important;
}

html.theme-light header.relative p {
  color: #475569 !important;
}

html.theme-light header .w-16.h-16.sm\:w-28.sm\:h-28 {
  background-color: #ffffff !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.15) !important;
}

html.theme-light header .bg-blue-950\/80 {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.theme-light header .bg-blue-950\/80 .brand-store-name {
  color: #1d4ed8 !important;
}

html.theme-light .bg-clip-text.text-transparent,
html.theme-light [class*="bg-clip-text"] {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.theme-light #hero-tiktok-btn {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #hero-tiktok-btn:hover {
  background-color: #f1f5f9 !important;
}

html.theme-light #hero-wa-help-btn {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #hero-wa-help-btn strong {
  color: #1d4ed8 !important;
}

html.theme-light #hero-reseller-btn {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.theme-light #hero-reseller-btn:hover {
  background-color: #dbeafe !important;
}

/* 11. PROMO CAROUSEL SLIDES (LIGHT MODE) */
html.theme-light #promo-carousel-container > div:nth-child(1) {
  background: linear-gradient(135deg, #e0f2fe 0%, #eff6ff 50%, #dbeafe 100%) !important;
  border: 1.5px solid #bfdbfe !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) .bg-blue-600\/30 {
  background-color: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  color: #1d4ed8 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) h2 {
  color: #0f172a !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) p {
  color: #334155 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12) !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) .bg-black\/60 .text-3xl {
  color: #1d4ed8 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) .bg-black\/60 .text-slate-300 {
  color: #475569 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 50%, #fce7f3 100%) !important;
  border: 1.5px solid #fecdd3 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) .bg-sky-600\/30 {
  background-color: #ffe4e6 !important;
  border: 1px solid #fda4af !important;
  color: #be123c !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) h2 {
  color: #0f172a !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) p {
  color: #334155 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid #fecdd3 !important;
  box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.12) !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) .bg-black\/60 .text-3xl {
  color: #be123c !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) .bg-black\/60 .text-slate-300 {
  color: #475569 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #ccfbf1 100%) !important;
  border: 1.5px solid #a7f3d0 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) .bg-emerald-600\/30 {
  background-color: #d1fae5 !important;
  border: 1px solid #6ee7b7 !important;
  color: #065f46 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) h2 {
  color: #0f172a !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) p {
  color: #334155 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) .bg-black\/60 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid #a7f3d0 !important;
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.12) !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) .bg-black\/60 .text-3xl {
  color: #047857 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) .bg-black\/60 .text-slate-300 {
  color: #475569 !important;
}

/* High contrast heading text in Light Mode (replaces transparent white-washed gradient) */
html.theme-light #promo-carousel-container span.bg-clip-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
  font-weight: 900 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(1) span.bg-clip-text {
  color: #1d4ed8 !important;
}

html.theme-light #promo-carousel-container > div:nth-child(2) span.bg-clip-text {
  color: #be123c !important;
}

html.theme-light #promo-carousel-container > div:nth-child(3) span.bg-clip-text {
  color: #047857 !important;
}

html.theme-light .promo-dot:not(.bg-blue-500) {
  background-color: #cbd5e1 !important;
}

/* 12. QUICK CATEGORIES (ALWAYS VISIBLE & HIGH CONTRAST IN LIGHT MODE) */
html.theme-light #quick-category-section .quick-cat-bubble {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  border-radius: 1.25rem !important;
}

html.theme-light #quick-category-section .quick-cat-bubble:hover,
html.theme-light #quick-category-section .quick-cat-bubble:active,
html.theme-light #quick-category-section .quick-cat-bubble:focus {
  background-color: #eff6ff !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.16) !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bubble-title {
  color: #0f172a !important; /* Persistent deep slate, 100% visible before and after touching */
  font-weight: 800 !important;
  text-shadow: none !important;
}

html.theme-light #quick-category-section .quick-cat-bubble:hover .bubble-title,
html.theme-light #quick-category-section .quick-cat-bubble:active .bubble-title,
html.theme-light #quick-category-section .quick-cat-bubble:focus .bubble-title {
  color: #1d4ed8 !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bubble-desc {
  color: #475569 !important;
  font-weight: 500 !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-blue-600\/20 {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #2563eb !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-sky-600\/20 {
  background-color: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-emerald-600\/20 {
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #059669 !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-purple-600\/20 {
  background-color: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  color: #9333ea !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-amber-600\/20 {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #d97706 !important;
}

html.theme-light #quick-category-section .quick-cat-bubble .bg-pink-600\/20 {
  background-color: #fdf2f8 !important;
  border: 1px solid #fbcfe8 !important;
  color: #db2777 !important;
}

/* 13. FLASH SALE SECTION (LIGHT MODE) */
html.theme-light #flash-sale-section > div {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 45%, #eff6ff 100%) !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 16px 36px -6px rgba(245, 158, 11, 0.18) !important;
}

html.theme-light #flash-sale-section h3 {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html.theme-light #flash-sale-section p {
  color: #475569 !important;
}

html.theme-light #flash-sale-status-badge {
  background-color: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #dc2626 !important;
}

html.theme-light #flash-sale-section .border-blue-500\/30 {
  border-color: #fed7aa !important;
}

html.theme-light #flash-sale-section .bg-black\/80 {
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  color: #475569 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}

html.theme-light #flash-timer-hours,
html.theme-light #flash-timer-mins,
html.theme-light #flash-timer-secs {
  background-color: #d97706 !important;
  color: #ffffff !important;
  border-radius: 0.5rem !important;
  font-weight: 900 !important;
}

html.theme-light #flash-sale-section .bg-black\/60 {
  background-color: #ffffff !important;
  border: 1.5px solid #fed7aa !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08) !important;
}

html.theme-light #flash-sale-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #flash-sale-duration {
  color: #0369a1 !important;
  font-weight: 600 !important;
}

html.theme-light #flash-sale-quota {
  font-weight: 700 !important;
}

html.theme-light #flash-sale-quota .text-rose-400,
html.theme-light #flash-sale-quota .text-rose-500,
html.theme-light #flash-sale-quota .text-rose-600 {
  color: #b91c1c !important;
  font-weight: 800 !important;
}

html.theme-light #flash-sale-quota .text-emerald-400,
html.theme-light #flash-sale-quota .text-emerald-500,
html.theme-light #flash-sale-quota .text-emerald-600 {
  color: #047857 !important;
  font-weight: 700 !important;
}

html.theme-light #flash-sale-percent {
  color: #b45309 !important;
  font-weight: 800 !important;
}

html.theme-light #flash-sale-strike {
  color: #94a3b8 !important;
}

html.theme-light #flash-sale-price {
  color: #b45309 !important;
  font-weight: 900 !important;
}

html.theme-light #flash-sale-section .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

html.theme-light #btn-buy-flash-sale:not(:disabled) {
  background-color: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
}

html.theme-light #btn-buy-flash-sale:not(:disabled):hover {
  background-color: #d97706 !important;
}

html.theme-light #btn-cart-flash-sale:not(:disabled) {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light #btn-cart-flash-sale:not(:disabled):hover {
  background-color: #1d4ed8 !important;
}

/* Flash Sale Out-of-Stock / Disabled Buttons in Light Mode */
html.theme-light #btn-buy-flash-sale:disabled,
html.theme-light #btn-buy-flash-sale[disabled],
html.theme-light #btn-cart-flash-sale:disabled,
html.theme-light #btn-cart-flash-sale[disabled] {
  background-color: #f1f5f9 !important;
  background-image: none !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

html.theme-light #btn-buy-flash-sale:disabled *,
html.theme-light #btn-cart-flash-sale:disabled * {
  color: #64748b !important;
}

/* 14. PRODUCT CATALOG, QUICK KEYWORDS & CATEGORY PILLS */
html.theme-light #catalog-search,
html.theme-light #catalog-sort-select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #catalog-search:focus,
html.theme-light #catalog-sort-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

html.theme-light button[data-quick-keyword] {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  font-weight: 700 !important;
}

html.theme-light button[data-quick-keyword]:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light .cat-btn:not(.active) {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
}

html.theme-light .cat-btn:not(.active):hover {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: #1d4ed8 !important;
}

html.theme-light .cat-btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* 15. PRODUCT CARDS (.dawg-card) IN LIGHT MODE */
html.theme-light .dawg-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
}

html.theme-light .dawg-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.14) !important;
}

html.theme-light .dawg-card h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light .dawg-card h3:hover {
  color: #2563eb !important;
}

html.theme-light .dawg-card p {
  color: #475569 !important;
}

/* Category & Duration in Catalog */
html.theme-light .dawg-card .text-blue-400 {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

/* Rating tag in Catalog */
html.theme-light .dawg-card .bg-amber-400\/10 {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}

/* Stock Badges in Light Mode (Habis, Ready, Tanya) */
html.theme-light .dawg-card .bg-rose-500\/20 {
  background-color: #fee2e2 !important;
  border: 1.5px solid #f87171 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
}
html.theme-light .dawg-card .bg-rose-500\/20 * {
  color: #b91c1c !important;
}

html.theme-light .dawg-card .bg-emerald-500\/20 {
  background-color: #ecfdf5 !important;
  border: 1.5px solid #34d399 !important;
  color: #047857 !important;
  font-weight: 800 !important;
}

html.theme-light .dawg-card .bg-amber-500\/20 {
  background-color: #fef3c7 !important;
  border: 1.5px solid #fbbf24 !important;
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* Warranty Pill in Light Mode */
html.theme-light .dawg-card .bg-black\/40 {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
}

html.theme-light .dawg-card .bg-black\/40 * {
  color: #1e293b !important;
}

html.theme-light .dawg-card .bg-black\/40 i {
  color: #2563eb !important;
}

/* Product Thumbnail Box in Light Mode */
html.theme-light .dawg-card div[data-detail-id] {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Prices in Light Mode (fixes invisible white text on white card) */
html.theme-light .card-price-primary,
html.theme-light .card-price-primary.text-white,
html.theme-light .dawg-card .card-price-primary {
  color: #0f172a !important;
  font-weight: 900 !important;
}

html.theme-light .card-price-reseller,
html.theme-light .card-price-reseller.text-sky-400,
html.theme-light .dawg-card .card-price-reseller {
  color: #0284c7 !important;
  font-weight: 900 !important;
}

html.theme-light .dawg-card .line-through {
  color: #94a3b8 !important;
}

html.theme-light .dawg-card .text-slate-400 {
  color: #64748b !important;
}

html.theme-light .dawg-card .bg-black\/60 {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.theme-light .dawg-card .bg-blue-950\/70 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
}

html.theme-light .dawg-card .bg-blue-950\/70 span {
  color: #334155 !important;
}

html.theme-light .dawg-card .bg-blue-950\/70 strong {
  color: #1e293b !important;
}

html.theme-light .dawg-card button[data-detail-id] {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}

html.theme-light .dawg-card button[data-detail-id]:hover {
  background-color: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.theme-light .dawg-card button[data-add-cart-id]:not(:disabled) {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.theme-light .dawg-card button[data-add-cart-id]:not(:disabled):hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light .dawg-card button[data-order-id]:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
}

/* Disabled out-of-stock buttons in Light Mode */
html.theme-light .dawg-card button[data-order-id]:disabled,
html.theme-light .dawg-card button[data-order-id][disabled],
html.theme-light .dawg-card button[data-add-cart-id]:disabled,
html.theme-light .dawg-card button[data-add-cart-id][disabled] {
  background: #f1f5f9 !important;
  background-image: none !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #64748b !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html.theme-light .dawg-card button[data-order-id]:disabled *,
html.theme-light .dawg-card button[data-add-cart-id]:disabled * {
  color: #64748b !important;
}

html.theme-light #current-role-badge {
  color: #0f172a !important;
}

/* 16. TRUST BADGES & TESTIMONIALS SECTION */
html.theme-light section:has(> div > div > .flex-wrap > span) > div.bg-brand-card,
html.theme-light .p-4.sm\:p-6.rounded-2xl.bg-brand-card {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light section .flex-wrap > span.bg-black {
  background-color: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

html.theme-light .dawg-card .rounded-full.bg-blue-600\/30 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

html.theme-light .dawg-card .rounded-full.bg-sky-600\/30 {
  background-color: #f0f9ff !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

html.theme-light .dawg-card .rounded-full.bg-purple-600\/30 {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #9333ea !important;
}

/* 17. SIMULATOR / CALCULATOR (#kalkulator) IN LIGHT MODE */
html.theme-light #kalkulator {
  background-color: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

html.theme-light #kalkulator h2 {
  color: #0f172a !important;
}

html.theme-light #kalkulator p {
  color: #475569 !important;
}

html.theme-light #kalkulator .bg-brand-card {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light #kalkulator label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light #calc-app-select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html.theme-light #calc-modal {
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

html.theme-light #calc-selling {
  background-color: #ffffff !important;
  border: 1.5px solid #2563eb !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #calc-daily-slider {
  background-color: #e2e8f0 !important;
}

html.theme-light #kalkulator .lg\:col-span-5 {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 60%, #e0f2fe 100%) !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 12px 30px -4px rgba(37, 99, 235, 0.16) !important;
}

html.theme-light #kalkulator .lg\:col-span-5 span.uppercase {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light #res-margin-item {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #kalkulator .lg\:col-span-5 .border-t {
  border-color: #bfdbfe !important;
}

html.theme-light #kalkulator .lg\:col-span-5 .text-blue-300 {
  color: #1e40af !important;
}

html.theme-light #res-monthly-profit {
  color: #1d4ed8 !important;
  font-weight: 900 !important;
}

html.theme-light #calc-join-reseller-wa {
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

html.theme-light #calc-join-reseller-wa:hover {
  background-color: #1d4ed8 !important;
}

/* 18. CARA ORDER (#cara-kerja) IN LIGHT MODE */
html.theme-light #cara-kerja {
  background-color: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

html.theme-light #cara-kerja h2 {
  color: #0f172a !important;
}

html.theme-light #cara-kerja p {
  color: #475569 !important;
}

html.theme-light #cara-kerja .dawg-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

html.theme-light #cara-kerja .dawg-card h3 {
  color: #0f172a !important;
}

html.theme-light #cara-kerja .dawg-card p {
  color: #475569 !important;
}

html.theme-light #cara-kerja .dawg-card code {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  padding: 1px 4px;
  border-radius: 4px;
}

/* 19. BANTUAN WA, TIKTOK & FAQ (#bantuan-kontak) IN LIGHT MODE */
html.theme-light #bantuan-kontak {
  background-color: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

html.theme-light #bantuan-kontak h2,
html.theme-light #bantuan-kontak h3 {
  color: #0f172a !important;
}

html.theme-light #bantuan-kontak p {
  color: #475569 !important;
}

html.theme-light #bantuan-kontak > div > div:first-child > div:first-child {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%) !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08) !important;
}

html.theme-light #bantuan-kontak > div > div:first-child > div:last-child {
  background: linear-gradient(135deg, #fdf4ff 0%, #ffffff 100%) !important;
  border: 1.5px solid #f5d0fe !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.08) !important;
}

html.theme-light #bantuan-kontak .bg-black\/80 {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

html.theme-light #bantuan-kontak .brand-help-phone {
  color: #1d4ed8 !important;
}

html.theme-light #bantuan-kontak .brand-tiktok-label {
  color: #0f172a !important;
}

html.theme-light #card-help-wa-btn {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

html.theme-light #card-tiktok-btn {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

html.theme-light #card-tiktok-btn:hover {
  background-color: #1e293b !important;
}

html.theme-light #card-tiktok-btn i {
  color: #ffffff !important;
}

html.theme-light #faq h2 {
  color: #0f172a !important;
}

html.theme-light #faq .bg-brand-card {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

html.theme-light .faq-toggle {
  color: #0f172a !important;
}

html.theme-light .faq-content {
  color: #334155 !important;
  border-top: 1px solid #f1f5f9;
}

/* 20. FOOTER IN LIGHT MODE */
html.theme-light footer {
  background-color: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
}

html.theme-light footer .border-blue-500\/20,
html.theme-light footer .border-blue-500\/30 {
  border-color: #e2e8f0 !important;
}

html.theme-light footer h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light footer .text-blue-400 {
  color: #2563eb !important;
}

html.theme-light footer a,
html.theme-light footer button {
  color: #475569 !important;
}

html.theme-light footer a:hover,
html.theme-light footer button:hover {
  color: #2563eb !important;
}

html.theme-light footer .bg-black\/60 {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light footer .border-t {
  border-top-color: #f1f5f9 !important;
}

html.theme-light .border-brand-border {
  border-color: #e2e8f0 !important;
}

/* 21. MODALS SUITE IN LIGHT MODE (WCAG AAA CRYSTAL CLEAR CONTRAST) */
html.theme-light .mobile-sheet-modal,
html.theme-light #promo-popup-modal,
html.theme-light div[id$="-modal"].fixed.inset-0,
html.theme-light div[id^="modal-"].fixed.inset-0 {
  background-color: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.theme-light .mobile-sheet-content,
html.theme-light #promo-popup-modal > div,
html.theme-light div[id$="-modal"] > div.bg-brand-card,
html.theme-light div[id^="modal-"] > div.bg-brand-card,
html.theme-light div[id^="modal-"] > div[class*="from-black"] {
  background-color: #ffffff !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 25px 60px -12px rgba(37, 99, 235, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.1) !important;
  color: #0f172a !important;
}

html.theme-light .mobile-sheet-handle {
  background-color: #cbd5e1 !important;
}

/* Modal Close Buttons */
html.theme-light [id^="btn-close-"],
html.theme-light [id*="btn-close"],
html.theme-light button[onclick*="classList.add('hidden')"] {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.theme-light [id^="btn-close-"]:hover,
html.theme-light [id*="btn-close"]:hover,
html.theme-light button[onclick*="classList.add('hidden')"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Modal Titles & Headings */
html.theme-light #product-detail-modal #dtl-title,
html.theme-light #checkout-modal h3,
html.theme-light #cart-modal h3,
html.theme-light #search-invoice-modal h3,
html.theme-light #res-dash-title,
html.theme-light #reseller-login-modal h3,
html.theme-light #broadcast-modal h3,
html.theme-light #mdl-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #checkout-role-subtitle {
  color: #2563eb !important;
  font-weight: 700 !important;
}

html.theme-light #dtl-category {
  background-color: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
  font-weight: 800 !important;
}

/* Modal Inner Card Boxes (.modal-card-box) */
html.theme-light .modal-card-box {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .modal-card-box .bg-black\/40 {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #dtl-duration,
html.theme-light #dtl-warranty-badge {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #dtl-desc {
  color: #1e293b !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

html.theme-light #dtl-benefits-wrapper {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e3a8a !important;
}

html.theme-light #dtl-benefits-wrapper span {
  color: #1d4ed8 !important;
}

html.theme-light #dtl-benefits-list {
  color: #1e293b !important;
  font-weight: 600 !important;
}

html.theme-light #dtl-rules-row,
html.theme-light #dtl-refund-row {
  border-top-color: #e2e8f0 !important;
}

html.theme-light #dtl-rules {
  color: #9a3412 !important;
  font-weight: 600 !important;
}

html.theme-light #dtl-refund {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* Interactive Variant Selector in Light Theme */
html.theme-light .dtl-var-item {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .dtl-var-item:hover {
  background-color: #f0f7ff !important;
  border-color: #60a5fa !important;
}

html.theme-light .dtl-var-item.active {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.16) !important;
}

html.theme-light .dtl-var-item .dtl-var-name {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light .dtl-var-item.active .dtl-var-name {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

html.theme-light .dtl-var-item .dtl-var-price {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.theme-light .dtl-var-item.active .dtl-var-price {
  color: #2563eb !important;
  font-weight: 900 !important;
}

html.theme-light .var-radio-circle {
  border-color: #94a3b8 !important;
  background-color: #ffffff !important;
}

html.theme-light .dtl-var-item.active .var-radio-circle {
  border-color: #2563eb !important;
  background-color: #eff6ff !important;
}

html.theme-light .dtl-var-item.active .var-radio-dot {
  background-color: #2563eb !important;
}

/* Reviews List in Product Detail */
html.theme-light #dtl-reviews-container .modal-card-box {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

html.theme-light #dtl-reviews-container strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.theme-light #dtl-reviews-container p {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.theme-light #dtl-btn-add-cart {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}

html.theme-light #dtl-btn-add-cart:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

/* Price Display in Checkout Modal */
html.theme-light #mdl-price {
  color: #2563eb !important;
  font-weight: 900 !important;
}

html.theme-light #mdl-strike-price {
  color: #94a3b8 !important;
}

html.theme-light #mdl-price-label {
  color: #475569 !important;
}

html.theme-light #mdl-duration {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.theme-light #mdl-warranty {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

/* Payment Tutorial Box & Copy Buttons */
html.theme-light #mdl-tutorial .text-white {
  color: #0f172a !important;
}

html.theme-light #mdl-tutorial .text-slate-300,
html.theme-light #mdl-tutorial .text-slate-400 {
  color: #475569 !important;
}

html.theme-light #mdl-tutorial .bg-brand-card\/90 {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

html.theme-light #mdl-tutorial .bg-black\/40 {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

html.theme-light #mdl-tutorial .bg-blue-950\/40 {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e40af !important;
}

html.theme-light .btn-quick-copy:not(.bg-blue-600) {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}

html.theme-light .btn-quick-copy:not(.bg-blue-600):hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

/* Cart Modal Items */
html.theme-light #cart-items-container > div {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #cart-items-container .text-white {
  color: #0f172a !important;
}

html.theme-light #cart-items-container .text-slate-400 {
  color: #475569 !important;
}

html.theme-light #cart-items-container [data-cart-dec] {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

html.theme-light #cart-items-container [data-cart-dec]:hover {
  background-color: #e2e8f0 !important;
}

html.theme-light #cart-total-price {
  color: #2563eb !important;
}

/* Search Invoice Modal */
html.theme-light #search-invoice-modal .bg-blue-950\/40 {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e40af !important;
}

/* Reseller Dashboard & Sales List */
html.theme-light #reseller-dashboard-modal .bg-black {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html.theme-light #res-stat-omset {
  color: #1d4ed8 !important;
  font-weight: 900 !important;
}

html.theme-light #res-stat-count {
  color: #334155 !important;
}

html.theme-light #reseller-sales-mobile-list > div {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #reseller-sales-mobile-list .font-bold.text-white {
  color: #0f172a !important;
}

/* Promo Popup Modal */
html.theme-light #popup-promo-title {
  color: #0f172a !important;
}

html.theme-light #popup-promo-desc {
  color: #334155 !important;
}

html.theme-light #promo-popup-modal .bg-black\/80 {
  background-color: #eff6ff !important;
  border: 1.5px dashed #93c5fd !important;
}

html.theme-light #popup-voucher-code {
  color: #1d4ed8 !important;
}

/* Digital Receipt Modal in Light Theme */
html.theme-light #receipt-modal .dawg-receipt-paper {
  background: #ffffff !important;
  border: 2px solid #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 25px 60px -15px rgba(37, 99, 235, 0.25) !important;
}

html.theme-light #receipt-modal .dawg-receipt-divider {
  border-top-color: #bfdbfe !important;
}

html.theme-light #rcp-credentials-box {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  color: #1e3a8a !important;
}

/* 22. ADMIN PORTAL SUITE IN LIGHT MODE */

/* Admin Login Screen */
html.theme-light #admin-auth-view {
  background-color: #f8fafc !important;
}

html.theme-light #admin-auth-view > div {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 20px 45px -10px rgba(37, 99, 235, 0.20), 0 0 0 1px rgba(37, 99, 235, 0.1) !important;
  color: #0f172a !important;
}

html.theme-light #admin-auth-view h2 {
  color: #0f172a !important;
}

html.theme-light #admin-auth-view p {
  color: #475569 !important;
}

html.theme-light #admin-auth-view label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light #admin-auth-view input#input-admin-password {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #admin-auth-view input#input-admin-password:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

html.theme-light #admin-auth-view #btn-toggle-password {
  color: #475569 !important;
}

html.theme-light #admin-auth-view #btn-toggle-password:hover {
  color: #1d4ed8 !important;
}

html.theme-light #admin-auth-view #auth-cloud-badge {
  background-color: #2563eb !important;
}

html.theme-light #admin-auth-view div.inline-flex.items-center.gap-1\.5 {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

html.theme-light #admin-auth-view a[href="index.html"] {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.theme-light #admin-auth-view a[href="index.html"]:hover {
  color: #2563eb !important;
}

/* Admin Main View & Header */
html.theme-light #admin-main-view header {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #admin-main-view header h1 {
  color: #0f172a !important;
}

html.theme-light #admin-main-view header p {
  color: #64748b !important;
}

html.theme-light #badge-cloud-status {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

html.theme-light .btn-theme-toggle-admin,
html.theme-light #admin-main-view header a[href="index.html"],
html.theme-light #btn-reset-inline-reseller,
html.theme-light #btn-view-table,
html.theme-light #btn-cancel-product-modal,
html.theme-light #btn-export-orders-csv {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}

html.theme-light .btn-theme-toggle-admin:hover,
html.theme-light #admin-main-view header a[href="index.html"]:hover,
html.theme-light #btn-reset-inline-reseller:hover,
html.theme-light #btn-view-table:hover,
html.theme-light #btn-cancel-product-modal:hover,
html.theme-light #btn-export-orders-csv:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.theme-light #btn-admin-logout {
  background-color: #fee2e2 !important;
  border: 1px solid #fca5a5 !important;
  color: #b91c1c !important;
}

html.theme-light #btn-admin-logout:hover {
  background-color: #fecdd3 !important;
}

/* Admin Realtime Stats (4 Cards) */
html.theme-light section.grid.grid-cols-2.lg\:grid-cols-4 > div {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light section.grid.grid-cols-2.lg\:grid-cols-4 span.uppercase {
  color: #64748b !important;
}

html.theme-light #stat-total-orders,
html.theme-light #stat-products-count {
  color: #0f172a !important;
}

html.theme-light #stat-total-revenue {
  color: #2563eb !important;
}

html.theme-light #stat-completed-orders {
  color: #059669 !important;
}

/* Navigation Tabs */
html.theme-light #admin-main-view nav > div {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light .tab-nav-btn {
  color: #475569 !important;
  font-weight: 700 !important;
}

html.theme-light .tab-nav-btn:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

html.theme-light .tab-nav-btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
}

html.theme-light .tab-nav-btn.active i {
  color: #ffffff !important;
}

/* Action Header Bars inside Tabs */
html.theme-light #admin-main-view .tab-panel > div.bg-gradient-to-r,
html.theme-light #admin-main-view .tab-panel > div.bg-gradient-to-br {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06) !important;
}

html.theme-light #admin-main-view .tab-panel h2 {
  color: #0f172a !important;
}

html.theme-light #admin-main-view .tab-panel p {
  color: #475569 !important;
}

/* Mobile Product Cards in Admin */
html.theme-light #product-cards-container > div {
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html.theme-light #product-cards-container h4 {
  color: #0f172a !important;
}

html.theme-light #product-cards-container .bg-black\/60 {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html.theme-light #product-cards-container select.quick-stock-select {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* Desktop Product Table & Orders Table */
html.theme-light #product-table-wrapper,
html.theme-light #tab-panel-orders .overflow-x-auto {
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #product-table-wrapper thead,
html.theme-light #tab-panel-orders thead {
  background-color: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

html.theme-light #product-table-wrapper thead th,
html.theme-light #tab-panel-orders thead th {
  color: #475569 !important;
  font-weight: 700 !important;
}

html.theme-light #product-table-tbody tr,
html.theme-light #orders-table-tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #0f172a !important;
}

html.theme-light #product-table-tbody tr:hover,
html.theme-light #orders-table-tbody tr:hover {
  background-color: #f8fafc !important;
}

html.theme-light #product-table-tbody td,
html.theme-light #orders-table-tbody td {
  color: #0f172a !important;
}

html.theme-light #orders-table-tbody td .text-slate-400,
html.theme-light #orders-table-tbody td .text-slate-500,
html.theme-light #product-table-tbody td .text-slate-400 {
  color: #64748b !important;
}

/* UNIVERSAL STATUS BADGE SYSTEM IN LIGHT MODE */
html.theme-light :is(.bg-amber-500\/20, .bg-amber-600\/20, .bg-amber-500\/10, [class*="bg-amber-500/"], [class*="bg-amber-600/"]):not(button) {
  background-color: #FEF3C7 !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
}
html.theme-light :is(.bg-amber-500\/20, .bg-amber-600\/20, .bg-amber-500\/10, [class*="bg-amber-500/"], [class*="bg-amber-600/"]):not(button) * {
  color: #B45309 !important;
}

html.theme-light :is(.bg-blue-500\/20, .bg-blue-600\/20, .bg-blue-500\/10, [class*="bg-blue-500/"], [class*="bg-blue-600/"]):not(button):not(#btn-open-cart):not(#hero-wa-help-btn) {
  background-color: #EFF6FF !important;
  border: 1px solid #BFDBFE !important;
  color: #1D4ED8 !important;
}
html.theme-light :is(.bg-blue-500\/20, .bg-blue-600\/20, .bg-blue-500\/10, [class*="bg-blue-500/"], [class*="bg-blue-600/"]):not(button):not(#btn-open-cart):not(#hero-wa-help-btn) * {
  color: #1D4ED8 !important;
}

html.theme-light :is(.bg-emerald-500\/20, .bg-emerald-600\/20, .bg-emerald-500\/10, [class*="bg-emerald-500/"], [class*="bg-emerald-600/"]):not(button) {
  background-color: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #047857 !important;
}
html.theme-light :is(.bg-emerald-500\/20, .bg-emerald-600\/20, .bg-emerald-500\/10, [class*="bg-emerald-500/"], [class*="bg-emerald-600/"]):not(button) * {
  color: #047857 !important;
}

html.theme-light :is(.bg-rose-500\/20, .bg-rose-600\/20, .bg-rose-500\/10, [class*="bg-rose-500/"], [class*="bg-rose-600/"]):not(button) {
  background-color: #FFF1F2 !important;
  border: 1px solid #FECDD3 !important;
  color: #BE123C !important;
}
html.theme-light :is(.bg-rose-500\/20, .bg-rose-600\/20, .bg-rose-500\/10, [class*="bg-rose-500/"], [class*="bg-rose-600/"]):not(button) * {
  color: #BE123C !important;
}

html.theme-light .bg-slate-800:not(button) {
  background-color: #E2E8F0 !important;
  border: 1px solid #CBD5E1 !important;
  color: #475569 !important;
}
html.theme-light .bg-slate-800:not(button) * {
  color: #475569 !important;
}

/* Delete / Cancel Action Buttons in Light Mode */
html.theme-light button[class*="bg-rose-500\/20"],
html.theme-light button[data-del-trx],
html.theme-light button[data-del-res],
html.theme-light button[data-del-vouc],
html.theme-light button[data-adm-del] {
  background-color: #FEE2E2 !important;
  color: #DC2626 !important;
  border: 1px solid #FCA5A5 !important;
}
html.theme-light button[class*="bg-rose-500\/20"]:hover,
html.theme-light button[data-del-trx]:hover,
html.theme-light button[data-del-res]:hover,
html.theme-light button[data-del-vouc]:hover,
html.theme-light button[data-adm-del]:hover {
  background-color: #DC2626 !important;
  color: #FFFFFF !important;
}

/* Reseller & Voucher Forms and Lists in Admin */
html.theme-light #card-form-reseller,
html.theme-light #card-form-voucher {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

html.theme-light #card-form-reseller label,
html.theme-light #card-form-voucher label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light #resellers-list-container > div,
html.theme-light #vouchers-list-container > div {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

html.theme-light #resellers-list-container h4,
html.theme-light #vouchers-list-container h4,
html.theme-light #resellers-list-container strong,
html.theme-light #vouchers-list-container strong {
  color: #0f172a !important;
}

/* Reseller Password Code Box: Fixed Contrast (No Dark-on-Dark) */
html.theme-light #resellers-list-container code {
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

/* Settings Tab Panels in Light Mode */
html.theme-light #tab-panel-settings .bg-brand-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.theme-light #tab-panel-settings .bg-amber-950\/20 {
  background-color: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
}

html.theme-light #tab-panel-settings .bg-pink-950\/20 {
  background-color: #fdf2f8 !important;
  border: 1.5px solid #fbcfe8 !important;
}

html.theme-light #tab-panel-settings .bg-blue-950\/20 {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
}

/* Tools Tab & Apps Script Preview */
html.theme-light #tab-panel-tools > div {
  background: #ffffff !important;
  border: 1.5px solid #bfdbfe !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06) !important;
}

html.theme-light #tab-panel-tools .bg-black\/80 {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html.theme-light #gas-code-textarea {
  background-color: #0a0f1d !important;
  color: #34d399 !important;
  border: 1px solid #1e293b !important;
}

/* Admin Modals */
html.theme-light #modal-product-form > div,
html.theme-light #modal-order-credentials > div,
html.theme-light #modal-gas-helper > div,
html.theme-light #modal-voucher-form > div,
html.theme-light #modal-reseller-form > div {
  background: #ffffff !important;
  background-image: none !important;
  border: 2px solid #2563eb !important;
  color: #0f172a !important;
  box-shadow: 0 25px 60px -12px rgba(37, 99, 235, 0.28) !important;
}

html.theme-light #modal-product-form h3,
html.theme-light #modal-order-credentials h3,
html.theme-light #modal-gas-helper h3,
html.theme-light #modal-voucher-form h3,
html.theme-light #modal-reseller-form h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #modal-product-form label,
html.theme-light #modal-order-credentials label,
html.theme-light #modal-voucher-form label,
html.theme-light #modal-reseller-form label {
  color: #1e293b !important;
  font-weight: 700 !important;
}

html.theme-light #modal-product-form .bg-blue-950\/20,
html.theme-light #modal-voucher-form .bg-blue-950\/20,
html.theme-light #modal-reseller-form .bg-blue-950\/20 {
  background-color: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
}

html.theme-light #modal-product-form .bg-black\/70 {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

html.theme-light #modal-product-form #btn-close-product-modal,
html.theme-light #modal-order-credentials #btn-close-cred-modal,
html.theme-light #modal-gas-helper #btn-close-gas-modal,
html.theme-light #modal-voucher-form #btn-close-voucher-modal,
html.theme-light #modal-reseller-form #btn-close-reseller-modal {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

html.theme-light #modal-product-form #btn-close-product-modal:hover,
html.theme-light #modal-order-credentials #btn-close-cred-modal:hover,
html.theme-light #modal-gas-helper #btn-close-gas-modal:hover,
html.theme-light #modal-voucher-form #btn-close-voucher-modal:hover,
html.theme-light #modal-reseller-form #btn-close-reseller-modal:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* 23. THEME TOGGLE ICON SYNCHRONIZATION */
html.theme-light .theme-icon-sun {
  display: inline-block !important;
}

html.theme-light .theme-icon-moon {
  display: none !important;
}

html:not(.theme-light) .theme-icon-sun {
  display: none !important;
}

html:not(.theme-light) .theme-icon-moon {
  display: inline-block !important;
}

/* 24. STOREFRONT AMBIENT MUSIC WIDGET (LIGHT MODE) */
html.theme-light #ambient-music-widget {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

html.theme-light #ambient-music-widget #ambient-text,
html.theme-light #ambient-music-widget span#ambient-music-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.theme-light #ambient-music-widget span.text-slate-400 {
  color: #64748b !important;
}

html.theme-light #ambient-music-widget .music-wave-bar {
  background-color: #2563eb !important;
}

/* 25. STOREFRONT MOBILE BOTTOM DOCK (LIGHT MODE & RESPONSIVE PADDING) */
html.theme-light .mobile-bottom-dock,
html.theme-light nav.fixed.bottom-0 {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 25px rgba(15, 23, 42, 0.08) !important;
}

html.theme-light .mobile-bottom-dock a,
html.theme-light .mobile-bottom-dock button,
html.theme-light nav.fixed.bottom-0 button {
  color: #64748b !important;
}

html.theme-light .mobile-bottom-dock a span,
html.theme-light .mobile-bottom-dock button span {
  color: #64748b !important;
}

html.theme-light .mobile-bottom-dock a:hover,
html.theme-light .mobile-bottom-dock button:hover,
html.theme-light .mobile-bottom-dock a.text-blue-400,
html.theme-light .mobile-bottom-dock button.text-blue-400,
html.theme-light nav.fixed.bottom-0 button:hover,
html.theme-light nav.fixed.bottom-0 button.text-blue-400 {
  color: #2563eb !important;
}

html.theme-light .mobile-bottom-dock a.text-blue-400 span,
html.theme-light .mobile-bottom-dock button.text-blue-400 span {
  color: #2563eb !important;
}

/* Ensure mobile screens have comfortable clearance so fixed bottom dock never covers content */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS (320px, 360px, 375px, 390px, 414px, 430px)
   Zero Horizontal Overflow & Ergonomic Touch Targets (>= 44x44px)
   ========================================================================== */

/* Universal Touch Target Helper (Min 44x44 CSS px) */
.touch-target-44 {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure dock navigation buttons have minimum touch target height */
.mobile-bottom-dock a,
.mobile-bottom-dock button {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

/* Ultra-Narrow Screens (320px - 359px, e.g. iPhone SE 1st Gen / Fold closed) */
@media (max-width: 359px) {
  #product-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .dawg-card {
    padding: 0.875rem !important;
  }

  /* Adjust top promo bar so it never overflows */
  #promo-announcement-text {
    max-width: 140px;
  }

  /* Modal padding optimization for ultra narrow viewports */
  .mobile-sheet-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Adjust header brand logo & title */
  .brand-store-name {
    font-size: 0.75rem !important;
  }
}

/* Standard Mobile Screens (360px - 430px, e.g. Android & Modern iPhones) */
@media (min-width: 360px) and (max-width: 480px) {
  .dawg-card {
    padding: 0.625rem !important;
  }
}

/* ==========================================================================
   PROMO CAROUSEL STRICT CONTAINER & ZERO HORIZONTAL OVERFLOW
   ========================================================================== */
#promo-carousel-container {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#promo-carousel-container > div {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Modal and Drawer safe area and scrolling fixes */
.mobile-sheet-content {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#checkout-modal .mobile-sheet-content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#checkout-modal-scroll-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* Flash Sale highlight responsive adjustments */
#flash-sale-section {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

/* Prevent horizontal overflow on code blocks and tables across mobile */
pre, code, table {
  max-width: 100%;
  word-break: break-word;
}

.padding-bottom-safe {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}