/* ============================================================
   DESA55 — "Dark + Aurora Gradient (Modern Gaming)" theme override
   Loaded AFTER all other stylesheets to recolor the base Apple
   theme. Re-defines the Shopify color CSS variables + a few
   element defaults. Remove the <link> to revert.
   ============================================================ */

/* ---------- 1. THEME COLOR VARIABLES ---------- */
/* main canvas: dark navy */
:root,
.color-background-1 {
  --accent-pink: #ff4fd8;
  --accent-purple: #8b5cf6;
  --accent-blue: #2dd4ff;
  --accent-gradient: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-purple) 50%, var(--accent-blue) 100%);
  --gradient-base-accent-1: #8b5cf6;
  --color-primary-bt-bg: #8b5cf6;
  --color-primary-bt-label: #ffffff;
  --color-primary-bt-outline: #8b5cf6;
  --color-primary-bt-hover: #2dd4ff;
  --color-secondary-bt-label: #ff4fd8;
  --color-secondary-bt-outline: #8b5cf6;
  --color-secondary-bt-hover: #2dd4ff;
  --color-link-dynamic-label: #ff4fd8;
  --color-link-dynamic-hover: #2dd4ff;
  --color-tertiary-dynamic-label: #ff4fd8;
  --color-tertiary-dynamic-hover: #2dd4ff;
  --quick-links-color: #2dd4ff;
  --color-background: 10, 14, 26;            /* #0a0e1a */
  --gradient-background: #0a0e1a;
  --color-foreground: 245, 245, 247;         /* #f5f5f7 */
  --color-shadow: 0, 0, 0;
  --color-button: 139, 92, 246;              /* #8b5cf6 purple */
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 17, 24, 39;      /* #111827 */
  --color-secondary-button-text: 245, 245, 247;
  --color-link: 255, 79, 216;
  --color-badge-foreground: 255, 255, 255;
  --color-badge-background: 139, 92, 246;
  --color-badge-border: 45, 212, 255;
  --payment-terms-background-color: rgb(10 14 26);
}

/* alt section: slightly lifted panel */
.color-background-2 {
  --color-background: 17, 24, 39;            /* #111827 */
  --gradient-background: linear-gradient(180deg, #0d1320 0%, #111827 100%);
  --color-foreground: 245, 245, 247;
  --color-shadow: 0, 0, 0;
  --color-button: 139, 92, 246;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 22, 32, 52;
  --color-secondary-button-text: 245, 245, 247;
  --color-link: 45, 212, 255;
  --color-badge-foreground: 255, 255, 255;
  --color-badge-background: 139, 92, 246;
  --color-badge-border: 45, 212, 255;
  --payment-terms-background-color: rgb(17 24 39);
}

/* inverse / accent-1: deepest navy for contrast blocks */
.color-inverse,
.color-accent-1 {
  --color-background: 5, 8, 16;              /* #050810 */
  --gradient-background: #050810;
  --color-foreground: 245, 245, 247;
  --color-shadow: 0, 0, 0;
  --color-button: 139, 92, 246;
  --color-button-text: 255, 255, 255;
  --color-secondary-button: 17, 24, 39;
  --color-secondary-button-text: 245, 245, 247;
  --color-link: 45, 212, 255;
  --color-badge-foreground: 245, 245, 247;
  --color-badge-background: 17, 24, 39;
  --color-badge-border: 245, 245, 247;
  --payment-terms-background-color: rgb(5 8 16);
}

/* accent-2: vibrant pink-purple-blue band */
.color-accent-2 {
  --color-background: 139, 92, 246;
  --gradient-background: linear-gradient(135deg, #ff4fd8 0%, #8b5cf6 50%, #2dd4ff 100%);
  --color-foreground: 255, 255, 255;
  --color-shadow: 0, 0, 0;
  --color-button: 10, 14, 26;
  --color-button-text: 255, 79, 216;
  --color-secondary-button: 10, 14, 26;
  --color-secondary-button-text: 45, 212, 255;
  --color-link: 10, 14, 26;
  --color-badge-foreground: 10, 14, 26;
  --color-badge-background: 245, 245, 247;
  --color-badge-border: 10, 14, 26;
  --payment-terms-background-color: rgb(139 92 246);
}

/* ---------- 2. CANVAS & TEXT DEFAULTS ---------- */
body {
  background-color: #0a0e1a !important;
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255, 79, 216, 0.10), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(45, 212, 255, 0.09), transparent 30rem),
    radial-gradient(circle at 50% 75%, rgba(139, 92, 246, 0.08), transparent 34rem) !important;
  background-attachment: fixed;
  color: #f5f5f7;
}
h1, h2, h3, h4, h5, h6 { color: #f5f5f7; }
a { color: #ff4fd8; }
a:hover { color: #2dd4ff; }
.page-width { color: inherit; }

/* keep white text where the theme explicitly sets it */
.rte, .rte * { color: inherit; }

/* ---------- 3. FORM FIELDS ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.field__input, .search__input, .select__select {
  background-color: #111827 !important;
  color: #f5f5f7 !important;
  border-color: #2a3344 !important;
}
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
.field__input:focus, .search__input:focus, .select__select:focus,
input:focus, textarea:focus, select:focus {
  border-color: #8b5cf6 !important;
  outline: none;
  box-shadow: 0 0 0 1px #8b5cf6, 0 0 18px rgba(45, 212, 255, 0.22) !important;
}

/* ---------- 4. BUTTONS (primary → aurora gradient) ---------- */
.button:not(.button--secondary),
.shopify-payment-button__button,
button[type="submit"]:not(.button--secondary) {
  background-color: #8b5cf6 !important;
  background-image: linear-gradient(135deg, #ff4fd8 0%, #8b5cf6 50%, #2dd4ff 100%) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.28) !important;
}
.button:not(.button--secondary):hover,
.shopify-payment-button__button:hover,
button[type="submit"]:not(.button--secondary):hover {
  background-color: #6d5dfc !important;
  background-image: linear-gradient(135deg, #2dd4ff 0%, #8b5cf6 50%, #ff4fd8 100%) !important;
  border-color: #2dd4ff !important;
}
.button--secondary,
.button.button--secondary {
  background-color: #111827 !important;
  color: #f5f5f7 !important;
  border-color: #2a3344 !important;
}
.button--secondary:hover {
  background-color: #1b2640 !important;
  border-color: #8b5cf6 !important;
}

/* ---------- 5. HEADER / ANNOUNCEMENT BAR ---------- */
.header-wrapper, .header {
  background-color: #0d1320 !important;
  background-image: linear-gradient(105deg, rgba(255, 79, 216, 0.04), rgba(139, 92, 246, 0.07), rgba(45, 212, 255, 0.04)) !important;
  color: #f5f5f7 !important;
}
.header *:not(svg *):not(.button) { color: #f5f5f7; }
.header__menu-item, .header__active-link { color: #f5f5f7 !important; }
.header__menu-item:hover { color: #2dd4ff !important; }
.announcement-bar {
  background-color: #8b5cf6 !important;
  background-image: linear-gradient(90deg, #ff4fd8 0%, #8b5cf6 50%, #2dd4ff 100%) !important;
  color: #ffffff !important;
}
.announcement-bar * { color: #ffffff !important; }

/* ---------- 6. CARDS / PANELS / DIVIDERS ---------- */
.card, .card--card, .multicolumn-card, .product-card-wrapper,
.content-container, .cart-notification, .search-modal,
.facets__display, .menu-drawer, .disclosure__list {
  background-color: #131a2b !important;
  color: #f5f5f7 !important;
  border-color: #2a3344 !important;
}
hr, .divider { border-color: #2a3344 !important; }

/* ---------- 7. SELECTION / SCROLLBAR ---------- */
::selection { background: #ff4fd8; color: #ffffff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0e1a; }
::-webkit-scrollbar-thumb { background: #1b2640; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff4fd8, #8b5cf6, #2dd4ff); }

/* ---------- 8. PRICE COLORS (keep semantic) ---------- */
.price--on-sale .price-item--sale { color: #ff4fd8 !important; }
.price-item--regular, .price__regular { color: #94a3b8 !important; }

/* ---------- 9. PANDECTES COOKIE BANNER (inline-style override) ---------- */
/* The consent JS injects inline background:#FFFFFF from its JSON palette.
   Force dark + neon here so the banner matches the theme. */
.pd-cookie-banner-window,
.pd-cookie-banner-window.cc-window,
#pandectes-banner,
.cc-window-wrapper,
.cc-window {
  background-color: #0d1320 !important;
  background-image: none !important;
  color: #f5f5f7 !important;
  border-top: 1px solid #8b5cf6 !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6) !important;
}
.pd-cookie-banner-window .cc-header,
.pd-cookie-banner-window .cc-message,
.cc-message,
.cc-header,
.cc-logo {
  color: #f5f5f7 !important;
}
.pd-cookie-banner-window .cc-link,
.cc-link {
  color: #2dd4ff !important;
}
.cc-btn {
  background-color: #8b5cf6 !important;
  background-image: linear-gradient(135deg, #ff4fd8, #8b5cf6, #2dd4ff) !important;
  color: #ffffff !important;
  border-color: #8b5cf6 !important;
}
.cc-btn:hover {
  background-color: #6d5dfc !important;
  background-image: linear-gradient(135deg, #2dd4ff, #8b5cf6, #ff4fd8) !important;
  border-color: #2dd4ff !important;
}
.cc-btn.cc-deny,
.cc-btn.cc-dismiss,
.cc-btn.cc-settings {
  background-color: #111827 !important;
  color: #f5f5f7 !important;
  border-color: #2a3344 !important;
}
.cc-btn.cc-deny:hover,
.cc-btn.cc-dismiss:hover,
.cc-btn.cc-settings:hover {
  background-color: #1b2640 !important;
  border-color: #8b5cf6 !important;
}
/* Preferences popup */
.pd-cp-ui {
  background-color: #0d1320 !important;
  color: #f5f5f7 !important;
}

/* ---------- 10. STORE-LOCATOR DRAWER (explicit) ---------- */
.my-store-locator-drawer,
.my-store-locator-drawer.gradient {
  background-color: #0a0e1a !important;
  background-image: none !important;
  color: #f5f5f7 !important;
}
.my-store-locator-drawer__footer {
  background: #0d1320 !important;
  box-shadow: 0 -.5px #2a3344 inset !important;
}
.my-store-locator-drawer__bg {
  background: rgba(5, 8, 16, 0.9) !important;
}

/* ---------- 11. CARD SHINE (tone down white streak) ---------- */
/* Original base.css: linear-gradient(135deg,#fff0 45%,#fff,#fff0 55%) with
   overlay blend — harsh white sweep on dark cards. Recolor to aurora. */
.card__media::after,
.media > *::after,
[class*="card"]::after {
  background-image: linear-gradient(135deg, transparent 42%, rgba(255, 79, 216, 0.18) 47%, rgba(139, 92, 246, 0.22) 50%, rgba(45, 212, 255, 0.18) 53%, transparent 58%) !important;
}

/* ---------- 12. FANCYBOX (lightbox) ---------- */
.fancybox-bg { background: rgba(5, 8, 16, 0.92) !important; }
.fancybox-thumbs { background: #0d1320 !important; }
.fancybox-thumbs__list a { border-color: #2a3344 !important; }
.fancybox-thumbs__list a:focus,
.fancybox-thumbs__list a:hover { border-color: #8b5cf6 !important; }
.fancybox-button {
  background: rgba(17, 24, 39, 0.8) !important;
  color: #f5f5f7 !important;
}
.fancybox-button:hover { background: linear-gradient(135deg, #ff4fd8, #8b5cf6, #2dd4ff) !important; color: #ffffff !important; }
.fancybox-button svg path { fill: currentColor !important; }

/* ---------- 13. AC-MODAL (NMP pricing) ---------- */
.ac-modal,
.ac-modal__overlay {
  background-color: #0d1320 !important;
  color: #f5f5f7 !important;
  border-color: #2a3344 !important;
}
.ac-modal__close {
  background-color: #111827 !important;
  color: #f5f5f7 !important;
}
.ac-modal__close:hover { background: linear-gradient(135deg, #ff4fd8, #8b5cf6, #2dd4ff) !important; color: #ffffff !important; }

/* ---------- 14. LOADING OVERLAY ---------- */
.loading-overlay,
.component-loading-overlay,
.cart-notification__overlay {
  background-color: rgba(10, 14, 26, 0.85) !important;
}

/* ---------- 15. LEGACY GREEN ACCENTS ---------- */
/* Cover high-specificity and inline colors from the inherited storefront. */
.marquee-container {
  background-color: #8b5cf6 !important;
  background-image: linear-gradient(90deg, #ff4fd8 0%, #8b5cf6 50%, #2dd4ff 100%) !important;
}

.rgb-btn::before,
.btn-login::before,
.btn-register::before {
  background: conic-gradient(from 0deg, transparent 0deg, #ff4fd8 90deg, #8b5cf6 180deg, #2dd4ff 270deg, transparent 360deg) !important;
}
.btn-login .rgb-main-text,
.btn-register .rgb-main-text,
.btn-login .rgb-icon,
.btn-register .rgb-icon {
  color: #ffffff !important;
  fill: currentColor !important;
}
.rgb-sub-text { color: #d8c9ff !important; }
.rgb-btn:hover { box-shadow: 0 0 28px rgba(139, 92, 246, 0.38) !important; }

:where(
  .end_lob_title,
  .end_title_anchor,
  .product_tag_display,
  .net-monthly-pricing__modal-trigger,
  .pickup-availability__time,
  .pickup-availability-button,
  .checkout-button__link,
  .my-store-locator-drawer__use-location-btn,
  .my-location-result__services-btn,
  .my-location-result__availability-time,
  .apple-care-modal__cta,
  .apple-care-modal__cta-text
) {
  color: #ff4fd8 !important;
}

:where(
  .end_lob_title,
  .net-monthly-pricing__modal-trigger,
  .pickup-availability-button,
  .checkout-button__link,
  .my-store-locator-drawer__use-location-btn,
  .my-location-result__services-btn,
  .apple-care-modal__cta
):hover {
  color: #2dd4ff !important;
}

.product-form__input input[type="radio"]:checked + label,
.product-form__input input[type="radio"] + label:hover,
.my-location-result[data-active="true"],
.my-location-result.my-location-result--drawer[data-active="true"] .my-location-result-details {
  border-color: #8b5cf6 !important;
}

.my-location-result__my-store {
  background: linear-gradient(135deg, #ff4fd8, #8b5cf6, #2dd4ff) !important;
  color: #ffffff !important;
}

body .apple-care-modal__cta,
body .apple-care-modal__cta-text,
body .billboard_icon,
body .underlined-text,
body .icon-checkmark {
  color: #ff4fd8 !important;
}

.rocket-fire::before {
  background: linear-gradient(180deg, #2dd4ff 0%, #b8f3ff 22%, #ff4fd8 60%, transparent 100%) !important;
}

.cyber-status {
  color: #f5d8ff !important;
  background: rgba(139, 92, 246, 0.16) !important;
  border-color: rgba(45, 212, 255, 0.32) !important;
}
.status-dot {
  background: #2dd4ff !important;
  color: #f5d8ff !important;
  box-shadow: 0 0 12px rgba(45, 212, 255, 0.75) !important;
}

.addtocartPDP {
  color: #ff4fd8 !important;
  border-color: #8b5cf6 !important;
  outline-color: #2dd4ff !important;
}

.gt-whatsapp a { color: #2dd4ff !important; }
.gt-whatsapp a img {
  box-shadow: 0 2px 16px rgba(45, 212, 255, 0.45) !important;
}

body .tax-modal-link a {
  color: #ff4fd8 !important;
}
body .tax-modal-link a:hover {
  color: #2dd4ff !important;
}