/* =========================================================
   Oxinex — dark theme
   Activated by data-theme="dark" on <html>. Light stays the default.

   The template is almost entirely custom-property driven, so most of
   the work is remapping the palette. Two variables cannot simply be
   flipped, because each is used for BOTH text and fills:
     --tg-color-white-default  103x as text on coloured buttons, 39x as
                               a surface  ->  kept white, surfaces are
                               overridden individually below
     --tg-heading-color        75x as text, 11x as a dark button fill
                               ->  remapped to light, the 11 fills are
                               re-pointed at --ox-ink / primary below

   1. palette
   2. page + surfaces
   3. header, nav, offcanvas, mini cart
   4. buttons
   5. hero, section shapes, themed backgrounds
   6. product + product details
   7. forms, checkout
   8. search popup + custom components
   9. theme toggle icon
   ========================================================= */

/* ---------- 1. palette ---------- */
[data-theme="dark"] {
  --tg-body-color: #a8a29e;
  --tg-heading-color: #f4f0ed;
  --tg-color-gray-1: #1c1715;
  --tg-color-gray-2: #191413;
  --tg-border-1: #3a2f2a;
  /* hover / rating / price accent, lifted off pure #FF3D00 so it does
     not vibrate against the dark ground */
  --tg-color-orange-light: #ff7a4d;
  --tg-color-yellow-light: #f5b74a;

  --ox-page: #100d0c;
  --ox-surface: #1b1614;
  --ox-surface-2: #241d19;
  --ox-border: #362b26;
  --ox-ink: #100d0c;          /* dark fill for use behind light text */
  --ox-shadow: rgba(0, 0, 0, 0.5);
  --ox-header-solid: #1b1614;

  color-scheme: dark;
}

/* ---------- 2. page + surfaces ---------- */
[data-theme="dark"] body {
  background-color: var(--ox-page);
  color: var(--tg-body-color);
}
[data-theme="dark"] #preloader,
[data-theme="dark"] .white-bg,
[data-theme="dark"] .grey-bg-two {
  background-color: var(--ox-page);
}
[data-theme="dark"] .section-bg,
[data-theme="dark"] .section-bg-three {
  background-color: var(--tg-color-gray-1);
}
[data-theme="dark"] .section-bg-two {
  background-color: var(--tg-color-gray-2);
}

/* ---------- 3. header, nav, offcanvas, mini cart ---------- */
[data-theme="dark"] .sticky-menu {
  background-color: var(--ox-surface);
  box-shadow: 0 10px 24px var(--ox-shadow);
}
/* the sticky bar swaps in the dark logo for its white background —
   on a dark bar we want the light logo back */
[data-theme="dark"] .sticky-menu .tgmenu__nav .logo { display: block; }
[data-theme="dark"] .sticky-menu .tgmenu__nav .logo.d-none { display: none !important; }

[data-theme="dark"] .tgmenu__navbar-wrap ul li .sub-menu {
  background-color: var(--ox-surface);
  border-color: var(--ox-border);
}
[data-theme="dark"] .offCanvas-wrap,
[data-theme="dark"] .tgmobile__menu-box,
[data-theme="dark"] .mini__cart-wrap {
  background-color: var(--ox-surface);
}
[data-theme="dark"] .offCanvas-body,
[data-theme="dark"] .mini__cart-item,
[data-theme="dark"] .mini__cart-checkout {
  border-color: var(--ox-border);
}
[data-theme="dark"] .tgmobile__search input {
  background-color: var(--ox-surface-2);
  color: var(--tg-heading-color);
}
[data-theme="dark"] .tgmobile__menu .navigation li a { border-color: var(--ox-border); }

/* ---------- 4. buttons ---------- */
/* .tg-btn is a light pill with a dark icon bubble; on a dark page the
   light pill still reads well, so the dark fills are re-pointed here and
   the label colour is corrected below. */
[data-theme="dark"] .tg-btn span {
  background-color: var(--ox-ink);
  color: var(--tg-color-white-default);
}
[data-theme="dark"] .tg-btn:hover,
[data-theme="dark"] .tg-btn:focus-visible {
  background-color: var(--tg-theme-primary);
  color: var(--tg-color-white-default);
}
[data-theme="dark"] .tg-btn:hover span,
[data-theme="dark"] .tg-btn:focus-visible span {
  background-color: var(--tg-color-white-default);
  color: var(--tg-theme-primary);
}
[data-theme="dark"] .tg-btn.red-btn:hover { background-color: var(--ox-ink); }
/* The plain light pill's LABEL. The rules above re-point .tg-btn's dark icon
   bubble but leave the label on main.css's `color: var(--tg-heading-color)`,
   which this theme remaps to near-white -- so the label sat at 1.13:1 against
   the pill's own white fill and was effectively invisible. It affected the
   hero "Buy now" and the policy modal's "Got it". Same trap the header
   docblock flags for --tg-heading-color, reached through inheritance rather
   than through a fill.

   The :not() chain excludes the variants that set their own label against
   their own fill and are already correct on dark: red-btn (7.8:1),
   border-btn (17.1:1), tg-btn-two (15.7:1), tg-btn-three (15.9:1). Without
   it this rule would tie .tg-btn.red-btn on specificity and, loading later,
   would win -- turning the orange button's white label dark. */
[data-theme="dark"] .tg-btn:not(.red-btn):not(.border-btn):not(.tg-btn-two):not(.tg-btn-three) {
  color: var(--ox-ink);
}
/* Hover repaints the pill with the primary, where the label wants to be white
   again. Restated because the rule above out-specifies this section's generic
   :hover rule. */
[data-theme="dark"] .tg-btn:not(.red-btn):not(.border-btn):not(.tg-btn-two):not(.tg-btn-three):hover,
[data-theme="dark"] .tg-btn:not(.red-btn):not(.border-btn):not(.tg-btn-two):not(.tg-btn-three):focus-visible {
  color: var(--tg-color-white-default);
}
[data-theme="dark"] .tg-btn-two {
  border-color: var(--ox-border);
  color: var(--tg-heading-color);
}
[data-theme="dark"] .tg-btn-three.black-btn {
  background-color: var(--tg-theme-primary);
  color: var(--tg-color-white-default);
}
/* Buy now / add to cart uses --tg-heading-color as its fill */
[data-theme="dark"] .product__details-info .cart-btn,
[data-theme="dark"] .product__cart,
[data-theme="dark"] .shop__price-btn {
  background-color: var(--tg-theme-primary);
  color: var(--tg-color-white-default);
}
[data-theme="dark"] .product__details-rating .sold::before {
  background-color: var(--ox-border);
}

/* ---------- 5. hero, shapes, themed backgrounds ---------- */
/* main.js writes data-background straight onto the style attribute, so
   these need !important to win */
[data-theme="dark"] .slider__bg {
  background-image: radial-gradient(circle at 72% 30%, rgba(147, 49, 21, 0.55), transparent 58%),
                    radial-gradient(circle at 18% 78%, rgba(250, 164, 50, 0.18), transparent 55%),
                    linear-gradient(140deg, #17110f 0%, #241713 55%, #0e0b0a 100%) !important;
}
[data-theme="dark"] .features__bg,
[data-theme="dark"] .video__bg {
  background-image: linear-gradient(150deg, #191312 0%, #241a16 60%, #120e0d 100%) !important;
}
[data-theme="dark"] .cta__bg {
  background-image: radial-gradient(circle at 80% 70%, rgba(250, 164, 50, 0.22), transparent 55%),
                    linear-gradient(120deg, #6d2410 0%, #48180a 60%, #24100a 100%) !important;
}
[data-theme="dark"] .footer__bg {
  background-image: linear-gradient(160deg, #16110f 0%, #1e1310 60%, #0d0a09 100%) !important;
}
[data-theme="dark"] .breadcrumb__bg::before { opacity: 0.9; }
/* decorative light shapes are too loud on a dark page */
[data-theme="dark"] .top-shape,
[data-theme="dark"] .bottom-shape,
[data-theme="dark"] .section__shape,
[data-theme="dark"] .about__shape,
[data-theme="dark"] .faq__shape { opacity: 0.35; }

/* ---------- 6. product + product details ---------- */
[data-theme="dark"] .product__item .product__thumb,
[data-theme="dark"] .product__item:hover .product__thumb {
  background-color: var(--ox-surface-2);
}
[data-theme="dark"] .product__details-img {
  background-color: var(--ox-surface);
}
[data-theme="dark"] .product__details-nav .nav-link {
  background-color: var(--ox-surface);
  border-color: var(--ox-border);
}
[data-theme="dark"] .product__details-nav .nav-link.active {
  border-color: var(--tg-theme-primary);
}
[data-theme="dark"] .product__details-list .list-wrap li,
[data-theme="dark"] .product__details-info {
  border-color: var(--ox-border);
}
[data-theme="dark"] .quickview-cart-plus-minus,
[data-theme="dark"] .quickview-cart-plus-minus input {
  background-color: var(--ox-surface);
  border-color: var(--ox-border);
  color: var(--tg-heading-color);
}
[data-theme="dark"] .qtybutton { color: var(--tg-heading-color); }

/* ---------- 7. forms, checkout ---------- */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--ox-surface-2);
  border-color: var(--ox-border);
  color: var(--tg-heading-color);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #7d7370; }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus { border-color: var(--tg-theme-primary); }

[data-theme="dark"] .coupon__code-info { background-color: var(--ox-surface); }
[data-theme="dark"] .coupon__code-form input { background-color: var(--ox-surface-2); }
[data-theme="dark"] .customer__form-wrap,
[data-theme="dark"] .customer__form-wrap .title,
[data-theme="dark"] .customer__form-wrap .form-grp select,
[data-theme="dark"] .order__info-wrap,
[data-theme="dark"] .order__info-wrap > .title,
[data-theme="dark"] .order__info-wrap .list-wrap li,
[data-theme="dark"] .cart__table tbody td,
[data-theme="dark"] .cart__table thead th {
  border-color: var(--ox-border);
}
[data-theme="dark"] .customer__form-wrap,
[data-theme="dark"] .order__info-wrap {
  background-color: var(--ox-surface);
}
/* The checkout billing fields, specifically.

   main.css styles these as `.customer__form-wrap .form-grp input`
   (0,2,1) with a hardcoded `background: #f5f5f5` and
   `color: var(--tg-heading-color)`. That out-specifies the generic
   `[data-theme="dark"] input` rule in section 7 (0,1,1), so on dark the
   input kept its light fill while --tg-heading-color had already been
   remapped to near-white -- #f4f0ed text on #f5f5f5, i.e. typing that
   worked but was invisible. The exact hazard the header docblock warns
   about for --tg-heading-color, hit through a specificity gap.

   Matching main.css's specificity here lets the theme's own intent
   (dark field, light text) actually apply. `select` was already
   corrected this way; `input` and `textarea` were missed. */
[data-theme="dark"] .customer__form-wrap .form-grp input,
[data-theme="dark"] .customer__form-wrap .form-grp textarea,
[data-theme="dark"] .customer__form-wrap .form-grp select {
  background-color: var(--ox-surface-2);
  color: var(--tg-heading-color);
}

/* ---------- 8. search popup + custom components ---------- */
[data-theme="dark"] .search__popup {
  background-color: var(--ox-surface);
}
[data-theme="dark"] .search__input input { background-color: transparent; }
[data-theme="dark"] .search__suggest .list-wrap a {
  border-color: var(--ox-border);
  color: var(--tg-heading-color);
}
[data-theme="dark"] .search__suggest .list-wrap a:hover {
  background-color: var(--tg-theme-primary);
  border-color: var(--tg-theme-primary);
  color: var(--tg-color-white-default);
}
[data-theme="dark"] .search__results {
  background-color: var(--ox-surface);
  border-color: var(--ox-border);
}
[data-theme="dark"] .search__results li + li { border-color: var(--ox-border); }
[data-theme="dark"] .search__results a:hover { background-color: var(--ox-surface-2); }
[data-theme="dark"] .search__result-thumb { background-color: var(--ox-surface-2); }

[data-theme="dark"] .product__notfound-list a {
  background-color: var(--ox-surface);
  border-color: var(--ox-border);
}
[data-theme="dark"] .product__notfound-list a:hover { border-color: var(--tg-theme-primary); }

/* ---------- 9. theme toggle icon ---------- */
/* The button itself is a theme-agnostic component and lives in
   custom.css; only the dark icon swap belongs here. */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }