/*
 * buyer-dark.css — Additive night-mode override layer for the buyer side.
 *
 * Purely additive: no existing CSS is modified or removed. Every rule here is
 * scoped under `body.dark-mode` (and `html[data-theme="dark"]`), so it only
 * applies in night mode and cannot affect light mode.
 *
 * Loaded LAST on every buyer page so it wins equal-specificity cascade ties.
 *
 * Layer A: unify the two competing CSS variable systems (buyer-shell.css and
 *          foundation.css use different names) by giving the full union of
 *          background/surface/text/border custom properties dark values.
 * Layer B: override components that hardcode literal light colors instead of
 *          using variables.
 *
 * Palette (matches existing dark values in buyer-shell.css):
 *   page       #050507
 *   surface    #0a0a0c
 *   elevated   #131318
 *   card       rgba(22, 22, 26, 0.85)
 *   ink        #f8fafc
 *   ink-muted  #94a3b8
 *   border     rgba(255, 255, 255, 0.08)
 */

/* ============================================================
 * LAYER A — variable unification
 * ============================================================ */
body.dark-mode,
html[data-theme="dark"] body {
  /* foundation.css set */
  --bg: #050507;
  --bg-base: #050507;
  --bg-light: #0a0a0c;
  --bg-main: #050507;
  --bg-dark: #050507;
  --bg-panel: #131318;
  --bg-surface: #0a0a0c;
  --bg-gradient-start: #0a0a0c;
  --bg-gradient-end: #050507;
  --surface: #131318;
  --surface-bg: #0a0a0c;
  --surface-ink: #f8fafc;
  --surface-ink-deep: #ffffff;
  --elev: #16161b;
  --panel-bg: #131318;

  /* card / shell set */
  --background-color: #050507;
  --card-background: rgba(22, 22, 26, 0.85);
  --card-bg: rgba(22, 22, 26, 0.85);
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);

  /* text set */
  --text: #f8fafc;
  --text-color: #f8fafc;
  --text-main: #f8fafc;
  --text-dark: #f8fafc;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-gray: #94a3b8;
  --subtle-text: #94a3b8;
  --muted: #94a3b8;
  --review-text: #e2e8f0;
  --review-sub: #94a3b8;
  --surface-glass: rgba(22, 22, 26, 0.85);
  --ink: #f8fafc;
  --ink-light: #cbd5e1;
  --ink-weak: #94a3b8;

  /* border set */
  --border: rgba(255, 255, 255, 0.10);
  --border-color: rgba(255, 255, 255, 0.10);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);

  /* glass / v6 set */
  --glass-bg: rgba(22, 22, 26, 0.72);
  --glass-border: rgba(255, 255, 255, 0.10);
  --surface-glass-heavy: rgba(15, 15, 20, 0.9);
  --v6-bg: #050507;
  --v6-card: rgba(22, 22, 26, 0.85);
  --v6-ink: #f8fafc;
  --v6-ink-light: #cbd5e1;
  --v6-ink-muted: #94a3b8;
  --v6-border: rgba(255, 255, 255, 0.10);
  --v6-border-soft: rgba(255, 255, 255, 0.06);
}

/* Base page + text safety net so no variable-less body stays white. */
body.dark-mode {
  background-color: #050507;
  color: #f8fafc;
}

/* ============================================================
 * LAYER B — hardcoded-light selector overrides
 * (populated from the selector catalog)
 * ============================================================ */

/* ---------- account.css ---------- */
body.dark-mode.account-page,
body.dark-mode .account-page {
  background: linear-gradient(to top, #050507, #0a0a0c);
}
body.dark-mode .order-status.processing {
  background-color: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}
body.dark-mode .order-status.completed {
  background-color: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
}

/* ---------- modal.css / foundation.css ---------- */
body.dark-mode .modal-content {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .modal-message {
  color: #94a3b8;
}

/* ---------- modern-order.css ---------- */
body.dark-mode .poc-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- products-page.css ---------- */
body.dark-mode .filter-placeholder-line {
  background: linear-gradient(90deg, rgba(30, 30, 38, 0.9), rgba(48, 48, 60, 0.9), rgba(30, 30, 38, 0.9));
}
body.dark-mode .review-status-pill {
  background: linear-gradient(180deg, rgba(30, 30, 38, 0.9), rgba(22, 22, 28, 0.9));
  color: #cbd5e1;
}
body.dark-mode .card-buttons {
  background: linear-gradient(to top, #131318 70%, rgba(19, 19, 24, 0));
}

/* ---------- cart.css ---------- */
body.dark-mode .quantity-wrapper {
  background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .qty-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}
body.dark-mode .quantity-input-clean {
  color: #f8fafc;
}

/* ---------- cart-premium.css ---------- */
body.dark-mode .qty-btn-shake {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
body.dark-mode .cart-load-wait {
  color: #94a3b8;
}

/* ---------- checkout-premium.css ---------- */
body.dark-mode.checkout-page,
body.dark-mode .checkout-page {
  color: #f8fafc;
  --surface-glass: rgba(22, 22, 26, 0.85);
}
body.dark-mode .payment-option:hover {
  background: rgba(255, 255, 255, 0.06);
}
/* Order Summary text — base checkout-premium.css hardcodes near-black colors
 * (#0f172a / #2d3748) via `body.checkout-page .summary-*`. Both classes live on
 * <body>, so the override must be COMPOUND (body.dark-mode.checkout-page), not a
 * descendant, and needs equal-or-higher specificity to win. */
body.dark-mode .card-header .title,
body.dark-mode.checkout-page .summary-title,
body.dark-mode.checkout-page .summary-total,
body.dark-mode.checkout-page .summary-total-main,
body.dark-mode.checkout-page .summary-total-final {
  color: #f8fafc !important;
}
body.dark-mode.checkout-page .summary-item-name {
  color: #e2e8f0 !important;
}
body.dark-mode.checkout-page .summary-item {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode.checkout-page .summary-total {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode.checkout-page .summary-total .total-amount,
body.dark-mode.checkout-page .summary-total-final {
  color: #ff8a3c !important;
}
body.dark-mode.checkout-page .summary-total-original {
  color: #94a3b8 !important;
}
body.dark-mode.checkout-page .summary-discount-row,
body.dark-mode.checkout-page .summary-discount-value {
  color: #6ee7b7 !important;
}
body.dark-mode .checkout-card .form-floating input:not(:focus):not(:placeholder-shown) ~ label,
body.dark-mode .checkout-back-to-cart {
  color: #94a3b8;
}

/* ---------- coupons.css ---------- */
body.dark-mode .coupon-card-premium.used:hover,
body.dark-mode .coupon-card-premium.expired:hover {
  background: rgba(22, 22, 26, 0.9);
}
body.dark-mode .coupon-status-pill.locked {
  background: rgba(239, 68, 68, 0.14);
}

/* ---------- new-coupon.css (no native dark support) ---------- */
body.dark-mode .coupon-content-new {
  background-color: #131318;
}
body.dark-mode .coupon-title-new {
  color: #f8fafc;
}
body.dark-mode .coupon-subtitle-new {
  color: #cbd5e1;
}
body.dark-mode .coupon-close-new,
body.dark-mode .coupon-terms-new,
body.dark-mode .coupon-decline-link-new {
  color: #94a3b8;
}

/* ---------- redeem.css ---------- */
body.dark-mode .v6-card-body {
  background: #131318;
}
body.dark-mode .v6-success-icon-wrap {
  background: rgba(16, 185, 129, 0.16);
}

/* ---------- reviews-theme.css (no native dark support) ---------- */
body.dark-mode .review-summary-card,
body.dark-mode .review-card-premium {
  background: rgba(22, 22, 26, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .bar-label {
  background: rgba(255, 255, 255, 0.06);
}
body.dark-mode .progress-track {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .no-reviews-placeholder {
  background: rgba(255, 255, 255, 0.04);
}
body.dark-mode .review-tag-chip {
  background: rgba(230, 81, 0, 0.18);
}
body.dark-mode .overall-rating-big,
body.dark-mode .reviewer-details h4,
body.dark-mode .review-body,
body.dark-mode .review-original-heading {
  color: #f8fafc;
}
body.dark-mode .total-count,
body.dark-mode .rating-bar-row,
body.dark-mode .review-date,
body.dark-mode .review-body.empty {
  color: #94a3b8;
}

/* ---------- home-critical.css / home.css / home-secondary.css ---------- */
body.dark-mode .home-trust-bar.key-features-section {
  background: rgba(19, 19, 24, 0.9);
}
body.dark-mode .category-card {
  background: linear-gradient(135deg, rgba(22, 22, 26, 0.9), rgba(19, 19, 24, 0.85));
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .category-icon {
  background: linear-gradient(135deg, rgba(255, 122, 60, 0.18), rgba(255, 90, 40, 0.12));
}
body.dark-mode .card-image-container {
  background-color: #0a0a0c;
}
body.dark-mode .tag-delivery {
  background-color: rgba(255, 122, 60, 0.16);
}
body.dark-mode .home-page-btn {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .product-card-skeleton,
body.dark-mode .skeleton-flash-card {
  background: #131318;
}
body.dark-mode .swiper-button-next,
body.dark-mode .swiper-button-prev {
  background-color: rgba(22, 22, 26, 0.9);
}

/* Skeleton shimmer surfaces (home + products + generic) */
body.dark-mode .skeleton-card {
  background-color: #131318;
}
body.dark-mode .skeleton-image,
body.dark-mode .skeleton-line,
body.dark-mode .skeleton-button,
body.dark-mode .skeleton-image-container,
body.dark-mode .skeleton-flash-card .skeleton-image,
body.dark-mode .skeleton-flash-card .skeleton-line,
body.dark-mode .skeleton-flash-card .skeleton-progress,
body.dark-mode .skeleton-flash-card .skeleton-button {
  background-color: rgba(255, 255, 255, 0.06);
}

/* ---------- styles.css literal-light gaps ---------- */
body.dark-mode #hero-slider {
  background-color: #0a0a0c;
}
body.dark-mode .search-bar-modern {
  background: #131318;
}
body.dark-mode .search-bar-modern input[type="text"] {
  color: #f8fafc;
}
body.dark-mode .category-dropdown,
body.dark-mode .search-suggestions,
body.dark-mode .account-menu,
body.dark-mode .auth-dropdown-menu,
body.dark-mode .ali-modal-content,
body.dark-mode .comparison-popup-container {
  background: #131318;
  color: #f8fafc;
}
body.dark-mode .ali-modal-close {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .auth-modal-content {
  background: rgba(19, 19, 24, 0.96);
}
body.dark-mode .auth-dropdown-menu a,
body.dark-mode .suggestion-item,
body.dark-mode .search-suggestions,
body.dark-mode .social-btn.google {
  color: #f8fafc;
}
body.dark-mode #review-form {
  background: #131318;
}
body.dark-mode .wishlist-btn {
  background-color: rgba(22, 22, 26, 0.9);
}
body.dark-mode .comparison-table .current-product-col {
  background-color: rgba(255, 122, 60, 0.12);
}
body.dark-mode .digital-notice {
  background: linear-gradient(90deg, rgba(255, 200, 60, 0.14), rgba(255, 150, 40, 0.14)) !important;
  color: #fcd9a0 !important;
}
body.dark-mode .item-image {
  background-color: #0a0a0c;
}
body.dark-mode .social-btn.google {
  background-color: #131318;
}
body.dark-mode .social-btn.google:hover {
  background-color: #16161b;
}
body.dark-mode .flash-sale-progress-track,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev {
  background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .coupon-badge,
body.dark-mode .coupon-signup {
  background: #131318;
}
body.dark-mode .review-text,
body.dark-mode .flash-progress-info,
body.dark-mode .post-snippet,
body.dark-mode .feature-label {
  color: #cbd5e1;
}
body.dark-mode .mini-cart-item-title,
body.dark-mode .mini-cart-total {
  color: #f8fafc;
}

/* ---------- profile.css uncovered selectors ---------- */
body.dark-mode .form-field input,
body.dark-mode .form-field select,
body.dark-mode .form-group input,
body.dark-mode .form-group select {
  background: #131318;
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .form-field input:focus,
body.dark-mode .form-field select:focus,
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus {
  background: #16161b;
}
body.dark-mode .stat-card,
body.dark-mode .referral-link-box,
body.dark-mode .qr-placeholder,
body.dark-mode .guest-panel-gate,
body.dark-mode .vault-product-image {
  background: rgba(22, 22, 26, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}
body.dark-mode .btn-copy,
body.dark-mode .guest-mobile-hub-btn--secondary,
body.dark-mode .guest-panel-gate-actions .btn-secondary,
body.dark-mode .settings-logout-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.10);
}
body.dark-mode .wishlist-grid .btn-remove-wishlist {
  background: rgba(22, 22, 26, 0.9);
  color: #f8fafc;
}

/* Review pagination buttons (product-details) inline light styles — needs
 * !important because the JS sets border/background/color as element styles. */
body.dark-mode .review-page-btn,
html[data-theme="dark"] .review-page-btn {
  background: #131318 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}
body.dark-mode .review-page-btn.active,
html[data-theme="dark"] .review-page-btn.active {
  background: #ff6b35 !important;
  border-color: #ff6b35 !important;
  color: #fff !important;
}
body.dark-mode .review-page-btn[disabled],
html[data-theme="dark"] .review-page-btn[disabled] {
  opacity: 0.55;
}

/* ---------- home page: flash-sale + nav buttons (night-mode fixes) ----------
 * home.css ships `.dark-mode .flash-sale-btn{background:#fff;color:#000}` which
 * paints the flash "Grab / Add to Cart" button as a solid white block in dark
 * mode. Restore the branded gradient so the button reads as a button, not a
 * white slab. These use !important to beat the same-specificity home.css rule. */
body.dark-mode .flash-sale-btn,
body.dark-mode .card-btn.flash-sale-btn,
body.dark-mode .flash-buy-btn,
body.dark-mode .flash-compact-buy-btn {
  background: linear-gradient(135deg, #ff6b00, #ff9100) !important;
  color: #fff !important;
  border: none !important;
}
body.dark-mode .flash-sale-btn:hover,
body.dark-mode .card-btn.flash-sale-btn:hover,
body.dark-mode .flash-buy-btn:hover,
body.dark-mode .flash-compact-buy-btn:hover {
  background: linear-gradient(135deg, #ff8a00, #ff6b00) !important;
  color: #fff !important;
}
body.dark-mode .flash-sale-btn.added,
body.dark-mode .flash-buy-btn.added,
body.dark-mode .flash-compact-buy-btn.added {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
}

/* "Shop More" pill in the flash-sale header — already a gradient, but ensure
 * the label/icon stay visible and the pill never collapses to a light chip. */
body.dark-mode .flash-sale-shop-more {
  background: linear-gradient(135deg, #ff9500, #ff2d55) !important;
  color: #fff !important;
}
body.dark-mode .flash-sale-shop-more .flash-shop-more-label,
body.dark-mode .flash-sale-shop-more .flash-shop-more-icon {
  color: #fff !important;
}

/* Pagination / "check more" nav buttons under Browse All Products.
 * home.css already sets a dark surface, but pin the border + text so the
 * resting (non-active) buttons are clearly visible and the active page keeps
 * the brand gradient. */
body.dark-mode .home-page-btn {
  background: #16161b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}
body.dark-mode .home-page-btn:hover:not(:disabled) {
  border-color: rgba(255, 107, 0, 0.5) !important;
  color: #fff !important;
}
body.dark-mode .home-page-btn.active {
  background: linear-gradient(135deg, #ff6b00, #ff8a00) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.dark-mode .home-page-btn:disabled {
  opacity: 0.45;
}

/* Flash carousel prev/next arrows ship a white glass background in the base
 * stylesheet; make sure night mode gets a dark surface with a visible arrow. */
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev {
  background: rgba(22, 22, 26, 0.92) !important;
  color: #ff8a3c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-next:hover,
body.dark-mode .flash-sale-carousel-wrapper .swiper-button-prev:hover {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Flash-sale card body still white in dark mode on some breakpoints — home.css
 * sets `.dark-mode .flash-sale-card{background:#222}` but the light default
 * (#fff) wins where the dark rule isn't scoped; force the dark card surface. */
body.dark-mode .flash-sale-card,
body.dark-mode .flash-compact-card {
  background: #16161b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Empty-state card (empty cart / wishlist "Blank Canvas") — polished.css paints
 * `.empty-state{background:#ffffff80;border:1px solid rgba(255,255,255,.8)}`
 * with no dark override, so in night mode it renders as a washed-out light-gray
 * slab. Give it a proper dark surface with a subtle branded glow. */
body.dark-mode .empty-state,
body.dark-mode .error-state {
  background: linear-gradient(145deg, rgba(22, 22, 26, 0.92), rgba(12, 12, 15, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.7) !important;
  color: #e8edf7 !important;
}
body.dark-mode .empty-state h2,
body.dark-mode .empty-state p,
body.dark-mode .error-state h3,
body.dark-mode .error-state p {
  color: #e8edf7 !important;
  -webkit-text-fill-color: #e8edf7 !important;
}
body.dark-mode .empty-state p,
body.dark-mode .error-state p {
  color: #aab4c5 !important;
  -webkit-text-fill-color: #aab4c5 !important;
}