/**
 * HB-53 — CartDrawer / checkout portals → light theme (BN2/C7 safe overlay).
 * Radix Sheet portals outside .public-light-scope, so BN2 remaps miss them.
 * Do NOT edit index-BN2ZtJyR.css / index-C7BUmI7G.js.
 */

/* Panel shell */
html.storefront-root [role="dialog"],
html.storefront-root [data-radix-dialog-content],
html.storefront-root [data-state="open"][class*="bg-slate-950"],
html.storefront-root [data-state="open"][class*="bg-slate-900"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  color-scheme: light;
}

/* Nested dark utility remaps (same intent as .public-light-scope) */
html.storefront-root [role="dialog"] [class*="bg-slate-9"],
html.storefront-root [role="dialog"] [class*="bg-slate-8"],
html.storefront-root [role="dialog"] [class*="bg-slate-7"],
html.storefront-root [role="dialog"] [class*="bg-gray-9"],
html.storefront-root [role="dialog"] [class*="bg-gray-8"],
html.storefront-root [role="dialog"] [class*="bg-gray-7"],
html.storefront-root [data-radix-dialog-content] [class*="bg-slate-9"],
html.storefront-root [data-radix-dialog-content] [class*="bg-slate-8"],
html.storefront-root [data-radix-dialog-content] [class*="bg-slate-7"] {
  background-color: #ffffff !important;
}

html.storefront-root [role="dialog"] [class*="bg-slate-8"],
html.storefront-root [role="dialog"] [class*="bg-slate-7"],
html.storefront-root [role="dialog"] .quantity-control-box,
html.storefront-root [role="dialog"] .cart-item {
  border: 1px solid #e2e8f0 !important;
}

/* CartDrawer injected <style> hardcodes rgb(15 23 42) on qty controls */
html.storefront-root [role="dialog"] .quantity-control-box,
html.storefront-root [role="dialog"] .quantity-control-wrapper > div {
  background-color: #f1f5f9 !important;
}

html.storefront-root [role="dialog"] .cart-item {
  background-color: #f8fafc !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06) !important;
}

/* Text contrast on light panel */
html.storefront-root [role="dialog"] .text-white,
html.storefront-root [role="dialog"] [class*="text-slate-1"],
html.storefront-root [role="dialog"] [class*="text-slate-2"] {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html.storefront-root [role="dialog"] [class*="text-slate-3"],
html.storefront-root [role="dialog"] [class*="text-slate-4"],
html.storefront-root [role="dialog"] [class*="text-slate-5"],
html.storefront-root [role="dialog"] [class*="text-gray-3"],
html.storefront-root [role="dialog"] [class*="text-gray-4"],
html.storefront-root [role="dialog"] [class*="text-gray-5"] {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

html.storefront-root [role="dialog"] .text-cyan-400,
html.storefront-root [role="dialog"] .text-cyan-500 {
  color: #0e7490 !important;
  -webkit-text-fill-color: #0e7490 !important;
}

html.storefront-root [role="dialog"] [class*="border-slate-"],
html.storefront-root [role="dialog"] [class*="border-gray-"] {
  border-color: #cbd5e1 !important;
}

/* Progress track */
html.storefront-root [role="dialog"] .bg-slate-800,
html.storefront-root [role="dialog"] [class*="bg-slate-800"] {
  background-color: #e2e8f0 !important;
}

/* Inputs already forced white elsewhere; ensure readable text */
html.storefront-root [role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.storefront-root [role="dialog"] textarea,
html.storefront-root [role="dialog"] select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.storefront-root [role="dialog"] input::placeholder,
html.storefront-root [role="dialog"] textarea::placeholder {
  color: #64748b !important;
  opacity: 1;
}

/* Keep CTA / filled button labels white */
html.storefront-root [role="dialog"] .bg-cyan-600,
html.storefront-root [role="dialog"] .bg-cyan-700,
html.storefront-root [role="dialog"] .bg-sky-600,
html.storefront-root [role="dialog"] .bg-sky-700,
html.storefront-root [role="dialog"] [class*="from-red-6"],
html.storefront-root [role="dialog"] [class*="from-red-7"],
html.storefront-root [role="dialog"] [class*="bg-gradient-to-r"][class*="from-red"] {
  color: #ffffff !important;
}

html.storefront-root [role="dialog"] .bg-cyan-600 .text-white,
html.storefront-root [role="dialog"] .bg-cyan-700 .text-white,
html.storefront-root [role="dialog"] [class*="from-red"] .text-white,
html.storefront-root [role="dialog"] [class*="from-red"].text-white,
html.storefront-root [role="dialog"] button.bg-cyan-600,
html.storefront-root [role="dialog"] button.bg-cyan-700,
html.storefront-root [role="dialog"] button[class*="from-red"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Outline secondary buttons */
html.storefront-root [role="dialog"] button[class*="border-slate"],
html.storefront-root [role="dialog"] a[class*="border-slate"] {
  background-color: #ffffff !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* Overlay backdrop may stay dim — approved exception (matches light-theme-consistency) */
html.storefront-root [data-radix-dialog-overlay],
html.storefront-root [data-state="open"].fixed.inset-0.bg-black\/80 {
  /* leave dim */
}

/* /dat-hang checkout page shell (if routed) */
html.storefront-root .checkout-tiktok,
html.storefront-root main.checkout-tiktok-shell,
html.storefront-root [class*="checkout-tiktok"] {
  background-color: #f4f9fb !important;
  color: #122033 !important;
}