/*
  Miller Gadgets v1.215 — complete dark theme
  Source of truth for dark mode. Loaded after every other stylesheet.
  Light mode is intentionally untouched.
*/

html[data-theme="dark"] {
  color-scheme: dark;

  --dark-bg: #1A1A1A;
  --dark-ribbon: #303030;
  --dark-surface: #222222;
  --dark-surface-2: #282828;
  --dark-surface-3: #303030;
  --dark-surface-4: #383838;
  --dark-line: #444444;
  --dark-line-soft: #373737;
  --dark-text: #F7F4FF;
  --dark-text-soft: #DDD7EB;
  --dark-muted: #C5BED3;
  --dark-subtle: #A8A1B6;
  --dark-purple: #3B3457;
  --dark-purple-hover: #514875;
  --dark-purple-active: #665C8E;
  --dark-purple-light: #D8D0FF;
  --dark-purple-soft: rgba(59, 52, 87, .42);
  --dark-purple-faint: rgba(59, 52, 87, .22);
  --dark-purple-line: rgba(154, 142, 207, .46);
  --dark-danger: #FFB4B4;
  --dark-success: #A7E8BD;
  --dark-warning: #FFD7A1;
  --dark-shadow: 0 18px 52px rgba(0, 0, 0, .38);
  --dark-shadow-soft: 0 10px 30px rgba(0, 0, 0, .24);

  /* Remap every historic site token to the dark theme. */
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-soft: var(--dark-surface-2);
  --card: var(--dark-surface);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --line: var(--dark-line);
  --nav: var(--dark-ribbon);
  --navText: var(--dark-text);
  --soft: var(--dark-purple-faint);
  --orange: var(--dark-purple);
  --purple: var(--dark-purple);
  --peach: var(--dark-purple-hover);
  --shadow: var(--dark-shadow);
  --mg-orange: var(--dark-purple);
  --mg-ui-orange: var(--dark-purple);
  --mg-ui-orange-2: var(--dark-purple-hover);
  --mg-ui-bg: var(--dark-bg);
  --mg-ui-surface: var(--dark-surface);
  --mg-ui-card: var(--dark-surface);
  --mg-ui-text: var(--dark-text);
  --mg-ui-muted: var(--dark-muted);
  --mg-ui-line: var(--dark-line);
  --slick-orange: var(--dark-purple);
  --slick-orange-2: var(--dark-purple-hover);
  --btn-orange-solid: var(--dark-purple);
  --btn-orange-hover: var(--dark-purple-hover);
  --btn-border-orange: var(--dark-purple-line);
  --btn-text-on-orange: #FFFFFF;
  --btn-text-on-dark: var(--dark-text);
  --btn-text-muted-readable: var(--dark-muted);
  --btn-dark-glass: rgba(255, 255, 255, .075);
  --btn-dark-glass-hover: rgba(255, 255, 255, .12);
  --btn-border-soft: rgba(255, 255, 255, .17);
  --button-soft: var(--dark-purple-faint);
  --trade-orange-soft: var(--dark-purple-soft);
  --trade-orange-soft-2: rgba(81, 72, 117, .40);
  --read-text-strong: var(--dark-text);
  --read-text-soft: var(--dark-text-soft);
  --read-text-muted: var(--dark-muted);
  --read-placeholder: var(--dark-subtle);
  --read-link: var(--dark-purple-light);
  --read-link-hover: #F1EDFF;
  --read-link-visited: #C7BBF2;
  --read-nav-text: var(--dark-text);
  --read-nav-active-bg: var(--dark-purple-soft);
  --read-disabled-text: #AAA3B5;
  --read-disabled-bg: #262626;
  --read-disabled-border: #3A3A3A;
}

/* ---------- Foundation ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--dark-bg) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
  background: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] ::selection {
  background: var(--dark-purple-active) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] {
  scrollbar-color: var(--dark-purple-active) var(--dark-surface) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dark-surface) !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dark-purple-active) !important;
  border: 3px solid var(--dark-surface) !important;
  border-radius: 999px;
}

html[data-theme="dark"] :where(
  main, section, article, aside, header, footer, nav,
  .page-wrap, .page-shell, .page-main, .mg-ui-fit-main,
  .main-home, .main-store, .main-phones, .main-laptops,
  .main-consoles, .main-accessories, .main-trade-in,
  .main-repair, .main-support, .sell-device-main,
  .repair-main, .support-main, .apple-store-main,
  .product-detail-section, .catalogue-section, .form-page
) {
  color: var(--dark-text);
}

html[data-theme="dark"] :where(
  h1, h2, h3, h4, h5, h6,
  .page-title, .section-heading, .catalog-header,
  .warehouse-product-heading, .trade-result-heading,
  .mg-search-results-title
) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  p, li, dt, dd, label, legend, small, figcaption,
  .muted, .small-note, .field-hint, .policy-note,
  .product-media-note, .product-family-specs-intro,
  .product-family-specs-note, .seo-answer-intro,
  .seo-answer-grid p, .summary-line, .trust-list,
  .customer-copy-note, .trade-defect-hint,
  .trade-model-explainer, .sell-policy-note
) {
  color: var(--dark-muted) !important;
  -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(
  strong, b, .price, .summary-total, .summary-exact,
  .store-card-kicker, .product-family-specs-category,
  .trade-section-number, .eyebrow
) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] a:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.logo-mark):not(.product-card):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.mg-page-campaign-link) {
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] a:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.logo-mark):not(.product-card):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.mg-page-campaign-link):hover,
html[data-theme="dark"] a:not(.primary-btn):not(.secondary-btn):not(.cta-button):not(.price-cta):not(.logo-mark):not(.product-card):not(.store-feature-card):not(.store-icon-card):not(.ad-banner):not(.mg-page-campaign-link):focus-visible {
  color: #F2EEFF !important;
  -webkit-text-fill-color: #F2EEFF !important;
  opacity: 1 !important;
}

/* ---------- Navigation, ribbon and menus ---------- */
html[data-theme="dark"] :where(
  .top-nav, .top-ribbon, .site-header, .navbar,
  .main-nav, .nav-shell
) {
  background: var(--dark-ribbon) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] :where(
  .top-nav, .top-ribbon, .site-header, .navbar,
  .main-nav, .nav-shell
) :where(a, button, span, strong, svg) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .nav-links a, .nav-item, .mega-col > a,
  .mobile-drawer a, .mobile-menu a
) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  background: transparent !important;
}

html[data-theme="dark"] :where(
  .nav-links a:hover, .nav-links a:focus-visible,
  .nav-links a.active, .nav-links a[aria-current="page"],
  .mobile-drawer a:hover, .mobile-drawer a:focus-visible,
  .mobile-drawer a.active, .mobile-drawer a[aria-current="page"],
  .mobile-menu a:hover, .mobile-menu a:focus-visible
) {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: var(--dark-purple-soft) !important;
  border-color: var(--dark-purple-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .mega-menu, .mobile-drawer, .mobile-menu,
  .dropdown-menu, .nav-dropdown-menu, .submenu
) {
  background: var(--dark-surface-2) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: var(--dark-shadow) !important;
}

html[data-theme="dark"] :where(
  .mega-menu a, .mobile-drawer a, .mobile-menu a,
  .dropdown-menu a, .nav-dropdown-menu a, .submenu a
) {
  color: var(--dark-text-soft) !important;
  -webkit-text-fill-color: var(--dark-text-soft) !important;
}

html[data-theme="dark"] .mg-floating-section-name {
  background: rgba(26, 26, 26, .94) !important;
  border-bottom-color: var(--dark-line-soft) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .mg-floating-section-name span {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
  box-shadow: none !important;
}

/* Header controls */
html[data-theme="dark"] :where(
  .header-icon-button, .search-icon-button, .mode-icon-button,
  .menu-icon-button, .theme-toggle, .search-toggle,
  .mobile-menu-left, .global-search-trigger
) {
  background: rgba(255, 255, 255, .075) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .header-icon-button:hover, .header-icon-button:focus-visible,
  .search-icon-button:hover, .search-icon-button:focus-visible,
  .mode-icon-button:hover, .mode-icon-button:focus-visible,
  .menu-icon-button:hover, .menu-icon-button:focus-visible,
  .global-search-trigger:hover, .global-search-trigger:focus-visible
) {
  background: var(--dark-purple-soft) !important;
  border-color: var(--dark-purple-line) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  transform: none !important;
}

/* ---------- Complete surface system ---------- */
html[data-theme="dark"] :where(
  .card, .promo-card, .service-card, .support-card,
  .support-help-card, .support-policy-card, .support-contact-card,
  .repair-hero-card, .repair-type-card, .repair-form-card,
  .repair-guide-card, .repair-note-card,
  .form-card, .trust-box, .trade-card, .trade-info-card,
  .trade-form-card, .trade-result-panel, .trade-upgrade-section,
  .trade-workbook-card, .sell-device-card, .sell-device-form-card,
  .sell-device-guide-card, .sell-policy-note,
  .product-card, .product-card-v39, .accessory-card,
  .product-panel, .product-media-card, .product-config-card,
  .purchase-summary-card, .selection-step, .summary-box,
  .estimate-box, .warehouse-meta-card, .warehouse-product-header,
  .product-family-specs-card, .product-family-spec-item,
  .store-feature-card, .store-icon-card, .future-hot-deals-placeholder,
  .mg-product-tools, .mg-filter-sort-panel, .filter-box,
  .seo-answer-shell, .seo-answer-grid details,
  .mg-page-bottom-cta, .contact-layout > *, .faq-card
) {
  background: var(--dark-surface) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: var(--dark-shadow-soft) !important;
}

html[data-theme="dark"] :where(
  .product-card:hover, .product-card:focus-within,
  .product-card-v39:hover, .product-card-v39:focus-within,
  .accessory-card:hover, .accessory-card:focus-within,
  .store-feature-card:hover, .store-feature-card:focus-within,
  .store-icon-card:hover, .store-icon-card:focus-within,
  .service-card:hover, .service-card:focus-within,
  .support-help-card:hover, .support-help-card:focus-within,
  .repair-type-card:hover, .repair-type-card:focus-within,
  .interactive-card:hover, .interactive-card:focus-within
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-purple-line) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .30) !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .product-card-body, .warehouse-status-strip,
  .warehouse-quick-promises, .warehouse-summary-benefits,
  .deduction-panel, .trade-mobile-summary-strip,
  .trade-upgrade-price-box, .upgrade-price-box,
  .summary-line, .support-faq-strip,
  .repair-policy-zone, .support-policy-zone,
  .support-contact-zone, .repair-booking-zone
) {
  background: var(--dark-surface-2) !important;
  background-image: none !important;
  border-color: var(--dark-line-soft) !important;
  color: var(--dark-text-soft) !important;
}

html[data-theme="dark"] :where(
  .product-image-link, .store-feature-image,
  .product-media-card .hero-image, .warehouse-gallery,
  .warehouse-gallery-tile, .product-gallery,
  .future-hot-deals-placeholder
) {
  background: #1D1D1D !important;
  background-image: none !important;
  border-color: var(--dark-line-soft) !important;
}

/* Full-colour campaign artwork stays intact; only its frame is themed. */
html[data-theme="dark"] :where(
  .mg-campaign-carousel, .mg-campaign-viewport,
  .mg-page-campaign, .mg-page-campaign-link,
  .homepage-adverts, .hero-ad
) {
  border-color: var(--dark-line-soft) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .mg-campaign-prev, .mg-campaign-next, .mg-campaign-pause,
  .mg-campaign-dot
) {
  background: var(--dark-surface-3) !important;
  border-color: var(--dark-line) !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] .mg-campaign-dot[aria-current="true"],
html[data-theme="dark"] .mg-campaign-dot.is-active {
  background: var(--dark-purple-active) !important;
  border-color: var(--dark-purple-light) !important;
}

/* ---------- Product catalogue ---------- */
html[data-theme="dark"] :where(
  .product-card h3, .product-card-v39 h3,
  .accessory-card h3, .store-feature-card h3,
  .store-icon-card h3
) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .product-card p, .product-card-v39 p,
  .accessory-card p, .store-feature-card p,
  .store-icon-card p, .family-option-count
) {
  color: var(--dark-muted) !important;
  -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(
  .product-card .price, .product-card-v39 .price,
  .store-feature-card strong, .price
) {
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] :where(.tag, .store-card-kicker, .promo, .soft) {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] .product-family-specs-head,
html[data-theme="dark"] .product-family-specs-note {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
}

html[data-theme="dark"] .product-family-specs-category {
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] .warehouse-gallery-tile.active,
html[data-theme="dark"] .warehouse-gallery-tile[aria-pressed="true"] {
  background: var(--dark-purple-soft) !important;
  border-color: var(--dark-purple-line) !important;
  color: #FFFFFF !important;
}

/* ---------- Buttons, options and filter controls ---------- */
html[data-theme="dark"] :where(
  .primary-btn, button.primary-btn, a.primary-btn,
  .cta-button, .price-cta, #checkoutBtn, #sendTradeBtn,
  .repair-submit-btn
) {
  background: var(--dark-purple) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--dark-purple-line) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  .primary-btn:hover, .primary-btn:focus-visible,
  .cta-button:hover, .cta-button:focus-visible,
  .price-cta:hover, .price-cta:focus-visible,
  #checkoutBtn:hover, #checkoutBtn:focus-visible,
  #sendTradeBtn:hover, #sendTradeBtn:focus-visible,
  .repair-submit-btn:hover, .repair-submit-btn:focus-visible
) {
  background: var(--dark-purple-hover) !important;
  border-color: #8277B3 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .primary-btn:active, .cta-button:active, .price-cta:active,
  #checkoutBtn:active, #sendTradeBtn:active,
  .repair-submit-btn:active
) {
  background: var(--dark-purple-active) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .24) !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .secondary-btn, button.secondary-btn, a.secondary-btn,
  .option, .category-filter, .filter-pill,
  .mg-filter-sort-open, .mg-control-pill,
  .mg-help-choose-pill, .mg-small-filter-pill
) {
  background: var(--dark-surface-2) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  .secondary-btn:hover, .secondary-btn:focus-visible,
  .option:hover, .option:focus-visible,
  .category-filter:hover, .category-filter:focus-visible,
  .filter-pill:hover, .filter-pill:focus-visible,
  .mg-filter-sort-open:hover, .mg-filter-sort-open:focus-visible,
  .mg-control-pill:hover, .mg-control-pill:focus-visible,
  .mg-help-choose-pill:hover, .mg-help-choose-pill:focus-visible
) {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .option.active, .option.is-active,
  .option[aria-pressed="true"], .option[aria-selected="true"],
  .category-filter.active, .category-filter.is-active,
  .category-filter[aria-pressed="true"],
  .filter-pill.active, .filter-pill.is-active
) {
  background: var(--dark-purple-active) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #8E82C1 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
}

html[data-theme="dark"] :where(
  .option span, .option strong,
  .category-filter span, .category-filter strong,
  .filter-pill span, .filter-pill strong,
  .primary-btn *, .secondary-btn *, .cta-button *, .price-cta *
) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  opacity: 1 !important;
}

html[data-theme="dark"] :where(
  button:disabled, input:disabled, select:disabled, textarea:disabled,
  .primary-btn:disabled, .secondary-btn:disabled, .cta-button:disabled,
  .option:disabled, .category-filter:disabled, [aria-disabled="true"]
) {
  background: #262626 !important;
  color: #AAA3B5 !important;
  -webkit-text-fill-color: #AAA3B5 !important;
  border-color: #3A3A3A !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ---------- Forms and data entry ---------- */
html[data-theme="dark"] :where(
  input, select, textarea,
  .smart-form input, .smart-form select, .smart-form textarea,
  .mg-search-input, .trade-search-combobox
) {
  background: #202020 !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: none !important;
  caret-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] :where(input, select, textarea):hover {
  border-color: #5A5A5A !important;
}

html[data-theme="dark"] :where(input, select, textarea):focus {
  border-color: #8E82C1 !important;
  box-shadow: 0 0 0 3px rgba(102, 92, 142, .24) !important;
  outline: none !important;
}

html[data-theme="dark"] :where(input::placeholder, textarea::placeholder, .mg-search-input::placeholder) {
  color: var(--dark-subtle) !important;
  -webkit-text-fill-color: var(--dark-subtle) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup {
  background: #202020 !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .form-grid, .repair-form-grid, .sell-v198-grid,
  .trade-workbook-form, .selection-stack
) {
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .mg-field-toast, .form-error, .error-message,
  [role="alert"], .field-error
) {
  background: rgba(126, 46, 46, .28) !important;
  border-color: rgba(255, 180, 180, .34) !important;
  color: var(--dark-danger) !important;
  -webkit-text-fill-color: var(--dark-danger) !important;
}

/* ---------- Search overlay ---------- */
html[data-theme="dark"] :where(
  .search-overlay, .mg-search-overlay
) {
  background: rgba(8, 8, 8, .80) !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] :where(
  .search-panel, .mg-search-shell, .mg-search-inner,
  .mg-search-content, .mg-search-results,
  .mg-search-results-wrap, .search-results
) {
  background: var(--dark-surface) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: var(--dark-shadow) !important;
}

html[data-theme="dark"] :where(
  .mg-search-result, .search-result-item,
  .mg-search-quick a
) {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] :where(
  .mg-search-result:hover, .mg-search-result:focus-within,
  .search-result-item:hover, .search-result-item:focus-within,
  .mg-search-quick a:hover, .mg-search-quick a:focus-visible
) {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
}

html[data-theme="dark"] .mg-search-close {
  background: var(--dark-surface-3) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Trade-In and Sell to Us ---------- */
html[data-theme="dark"] :where(
  .trade-hero, .sell-device-hero,
  .trade-category-browse, .trade-category-guide,
  .trade-category-checklist, .trade-customer-tips,
  .trade-workbook-section, .sell-v198-result,
  .sell-v198-notes, .sell-device-actions
) {
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .trade-device-suggestions, .trade-device-reference,
  .trade-defect-rows, .deduction-list,
  .trade-result-metrics, .sell-guide-steps
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line-soft) !important;
  color: var(--dark-text-soft) !important;
}

html[data-theme="dark"] .trade-section-number,
html[data-theme="dark"] .trade-decision-badge {
  background: var(--dark-purple) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--dark-purple-line) !important;
}

html[data-theme="dark"] :where(
  .trade-result-panel .price, .trade-result-panel strong,
  .sell-v198-result .price, .sell-v198-result strong
) {
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

/* ---------- Repair, support, contact and FAQ ---------- */
html[data-theme="dark"] :where(
  .repair-hero, .support-hero, .contact-hero,
  .page-title, .catalog-header
) {
  background: transparent !important;
  background-image: none !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  .repair-checklist li::marker, .support-checklist li::marker,
  .trust-list li::marker
) {
  color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] .seo-answer-grid summary {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] .seo-answer-grid summary::after {
  color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] .seo-answer-grid details[open] {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-purple-line) !important;
}

/* ---------- Footer and social media ---------- */
html[data-theme="dark"] .footer {
  background: #171717 !important;
  background-image: none !important;
  color: var(--dark-text-soft) !important;
  border-top-color: var(--dark-line-soft) !important;
}

html[data-theme="dark"] .footer :where(p, span, small) {
  color: var(--dark-muted) !important;
  -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(
  .footer-social-icons, .footer-socials, .social-logo-grid,
  .support-social-row, .contact-social-row, .social-icon-row,
  .social-links
) a {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .footer-social-icons, .footer-socials, .social-logo-grid,
  .support-social-row, .contact-social-row, .social-icon-row,
  .social-links
) a:hover,
html[data-theme="dark"] :where(
  .footer-social-icons, .footer-socials, .social-logo-grid,
  .support-social-row, .contact-social-row, .social-icon-row,
  .social-links
) a:focus-visible {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .footer-social-icons img, .footer-socials img, .social-logo-grid img,
  .support-social-row img, .contact-social-row img,
  .social-icon-row img, .social-links img
) {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* ---------- Notices, status and focus ---------- */
html[data-theme="dark"] :where(.mg-noscript-notice, .mg-offline-notice) {
  background: var(--dark-surface-3) !important;
  border-color: var(--dark-line) !important;
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(
  a, button, input, select, textarea, summary, [tabindex]
):focus-visible {
  outline: 3px solid #8E82C1 !important;
  outline-offset: 3px !important;
}

html[data-theme="dark"] .mg-skip-link {
  background: var(--dark-purple-active) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Floating Talk to Miller control */
html[data-theme="dark"] .mg-floating-help {
  background: var(--dark-surface-3) !important;
  background-image: none !important;
  color: var(--dark-purple-light) !important;
  border-color: var(--dark-purple-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34) !important;
}
html[data-theme="dark"] .mg-floating-help:hover,
html[data-theme="dark"] .mg-floating-help:focus-visible {
  background: var(--dark-purple-hover) !important;
  color: #FFFFFF !important;
  transform: none !important;
}
html[data-theme="dark"] .mg-floating-help-tooltip {
  background: var(--dark-surface-3) !important;
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
}

/* ---------- Theme switch: compact two-state pill ---------- */
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle {
  display: inline-flex !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #464646 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
  transform: none !important;
}

html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle :where(.theme-icon, .theme-icon-sun, .theme-icon-moon) {
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 999px !important;
}

html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-sun {
  color: #9A9A9F !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle .theme-icon-moon {
  color: var(--dark-purple) !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .34) !important;
}

/* ---------- Mobile dark theme ---------- */
@media (max-width: 900px) {
  html[data-theme="dark"] :where(.mobile-drawer, .mobile-menu) {
    background: var(--dark-surface-2) !important;
    border-color: var(--dark-line) !important;
  }

  html[data-theme="dark"] :where(
    .product-card, .product-card-v39, .accessory-card,
    .store-feature-card, .store-icon-card,
    .form-card, .trade-form-card, .repair-form-card,
    .product-media-card, .product-config-card, .purchase-summary-card
  ) {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24) !important;
  }

  html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 3px !important;
  }

  html[data-theme="dark"] body.mg-v201-dark-rebuild #themeToggle :where(.theme-icon, .theme-icon-sun, .theme-icon-moon) {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Nothing in dark mode should reveal the old orange interaction palette. */
html[data-theme="dark"] :where(
  .orange, .orange-text, .accent-orange,
  .mg-filter-pill-icon, .price-cta,
  .trade-section-number, .eyebrow,
  .store-card-kicker, .product-family-specs-category
) {
  color: var(--dark-purple-light) !important;
  -webkit-text-fill-color: var(--dark-purple-light) !important;
}

html[data-theme="dark"] :where(
  .orange, .accent-orange, .trade-section-number
) {
  background-color: var(--dark-purple) !important;
  border-color: var(--dark-purple-line) !important;
}

/* ---------- v1.215 final component coverage ---------- */
html[data-theme="dark"] :where(
  .ad-banner, .ad-banner-primary,
  .catalog-header, .pc-catalog-header, .filter-page-header,
  .category-filter-bar, .mg-final-filter-tools,
  .apple-store-section, .apple-category-rail,
  .warehouse-product-meta-grid, .warehouse-media-checks,
  .product-listing-section, .accessories-product-section
) {
  background-color: transparent !important;
  border-color: var(--dark-line-soft) !important;
  color: var(--dark-text) !important;
}

html[data-theme="dark"] :where(.ad-banner, .ad-banner-primary) {
  background: var(--dark-surface) !important;
  background-image: none !important;
  border-color: var(--dark-line) !important;
  box-shadow: var(--dark-shadow-soft) !important;
}

html[data-theme="dark"] :where(.ad-banner, .ad-banner-primary) :where(h2, h3, strong) {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
}
html[data-theme="dark"] :where(.ad-banner, .ad-banner-primary) :where(p, span) {
  color: var(--dark-muted) !important;
  -webkit-text-fill-color: var(--dark-muted) !important;
}

html[data-theme="dark"] :where(
  .mg-page-btn, .mg-filter-option, .mg-sort-option,
  .trade-add-defect, .trade-device-suggestion,
  .mg-pagination button, .mg-pagination a
) {
  background: var(--dark-surface-2) !important;
  background-image: none !important;
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where(
  .mg-page-btn:hover, .mg-page-btn:focus-visible,
  .mg-filter-option:hover, .mg-filter-option:focus-visible,
  .mg-sort-option:hover, .mg-sort-option:focus-visible,
  .trade-add-defect:hover, .trade-add-defect:focus-visible,
  .trade-device-suggestion:hover, .trade-device-suggestion:focus-visible,
  .mg-pagination button:hover, .mg-pagination button:focus-visible,
  .mg-pagination a:hover, .mg-pagination a:focus-visible
) {
  background: var(--dark-purple-faint) !important;
  border-color: var(--dark-purple-line) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  transform: none !important;
}

html[data-theme="dark"] :where(
  .mg-page-btn.active, .mg-page-btn[aria-current="page"],
  .mg-filter-option.active, .mg-filter-option[aria-selected="true"],
  .mg-sort-option.active, .mg-sort-option[aria-selected="true"]
) {
  background: var(--dark-purple-active) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #8E82C1 !important;
}

html[data-theme="dark"] :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) {
  accent-color: var(--dark-purple-active) !important;
}

html[data-theme="dark"] .form-card details {
  background: var(--dark-surface-2) !important;
  border: 1px solid var(--dark-line-soft) !important;
  border-radius: 16px !important;
  padding: 0 16px !important;
}
html[data-theme="dark"] .form-card details + br {
  display: block;
  content: "";
  margin-top: 12px;
}
html[data-theme="dark"] .form-card summary {
  color: var(--dark-text) !important;
  -webkit-text-fill-color: var(--dark-text) !important;
  padding-block: 15px !important;
}
html[data-theme="dark"] .form-card details[open] {
  border-color: var(--dark-purple-line) !important;
  background: var(--dark-purple-faint) !important;
}

html[data-theme="dark"] :where(
  .empty-state, .no-results, .mg-empty-state,
  .search-empty, .catalog-empty, .product-empty
) {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  color: var(--dark-muted) !important;
  -webkit-text-fill-color: var(--dark-muted) !important;
}

/* Keep brand artwork and product photography unfiltered. */
html[data-theme="dark"] :where(
  .mg-campaign-slide img, .mg-page-campaign img,
  .ad-banner img, .promo-card img, .product-card img,
  .product-media-card img, .store-feature-card img,
  .store-icon-card img, .hero-image img
) {
  filter: none !important;
  opacity: 1 !important;
}