/* Minimal state CSS backing assets/js/ui.js's data-attribute components.
   Tailwind utilities handle layout/visuals per-page; this file only
   expresses the open/closed and active/inactive states that a plain class
   toggle can't (Tailwind's `hidden` class covers modal/carousel/nav-collapse
   visibility directly in JS, so those need nothing here). */

/* Bootstrap-removal shim. A lot of existing page JS shows/hides elements by
   toggling Bootstrap's .d-none at runtime (cart-demo.js, checkout.js,
   shop-filter.js, account-2fa.js, admin-tables.js, admin-products.js...).
   Those toggles are invisible to a markup-only Tailwind conversion, so
   rather than rewrite every script, keep .d-none meaningful on its own.
   Bootstrap is gone, so this IS the definition of .d-none now - without it
   cart totals, coupon rows, payment panels and filtered table rows would be
   permanently visible. Safe to delete only once no JS references d-none.

   The `html` prefix is load-bearing: elements toggled by that JS often also
   carry a Tailwind display utility (e.g. `class="d-none flex"`). Both sides
   are !important, and Tailwind's runtime <style> is injected AFTER this
   file, so a bare `.d-none` would lose the tie on source order and never
   hide anything. `html .d-none` outranks a single class on specificity, so
   it wins regardless of order. */
html .d-none {
  display: none !important;
}

/* Button reset. Tailwind's preflight now handles most of this, but it keeps
   the UA's `appearance: button`, which on some platforms still paints native
   chrome behind a styled <button>. Flattening it here means a bare
   <button class="rounded-full ..."> renders exactly as its utilities say.
   Element selector (0,0,1), so every class-based rule still wins - the admin
   component layer's .btn and Tailwind's utilities both override it. */
button {
  background-color: transparent;
  background-image: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* WebKit paints its own blue clear "x" inside <input type="search">, which
   sits next to our themed close button and clashes with the brand palette.
   Hide it - the overlay already has an explicit close control. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- Checkboxes & radios ----------
   Fully custom controls rather than native ones. The markup asks for a brand
   colour via Tailwind's `text-brand`, but that only styles a checkbox when
   the @tailwindcss/forms plugin is installed - without it the browser paints
   its own blue control and the class does nothing. Rather than pull in that
   plugin (it restyles every input on the site), the control is drawn here:
   appearance:none plus an SVG glyph, so checkbox/radio/switch all match the
   theme in light and dark.

   Element selectors (0,0,1 + attribute) stay below any Tailwind sizing
   utility, so `h-4 w-4` / `h-5 w-5` in the markup still set the box size. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 1.5px solid var(--vd-border);
  background-color: var(--vd-surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  print-color-adjust: exact;
}
input[type="checkbox"] {
  border-radius: 0.3rem;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--brand-blue);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(var(--brand-blue-rgb), 0.25);
}
/* !important on the border: the markup carries Tailwind's `border-line`,
   which is !important, so a plain declaration here leaves a checked control
   with a brand fill inside a pale grey outline. This selector (0,1,1) beats
   that class (0,1,0) once both are !important. */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue) !important;
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 10.5 8.5 14 15 6.5'/%3e%3c/svg%3e");
}
input[type="checkbox"]:indeterminate {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3e%3cpath d='M5.5 10h9'/%3e%3c/svg%3e");
}
input[type="radio"]:checked {
  /* Inset dot: a small white circle scaled inside the filled control. */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4.5' fill='%23fff'/%3e%3c/svg%3e");
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Switch variant (admin `.form-switch .form-check-input`): same control
   drawn as a pill with a knob that slides on check. */
.form-switch input[type="checkbox"],
.form-switch .form-check-input {
  width: 2.4rem;
  height: 1.35rem;
  border-radius: 999px;
  background-color: var(--vd-surface-3);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='8' fill='%23fff'/%3e%3c/svg%3e");
  background-position: left center;
  background-size: 1.05rem 1.05rem;
  transition:
    background-color 0.15s ease,
    background-position 0.15s ease,
    border-color 0.15s ease;
}
.form-switch input[type="checkbox"]:checked,
.form-switch .form-check-input:checked {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  background-position: right center;
}

/* Dropdown: menu is hidden until its [data-dropdown] wrapper is .is-open */
[data-dropdown] {
  position: relative;
}
[data-dropdown-menu] {
  display: none;
}
[data-dropdown].is-open [data-dropdown-menu] {
  display: block;
}

/* Drawer (search overlay, filter panel): off-canvas by default, slides/fades
   in when its own [data-drawer] element gets .is-open. */
[data-drawer] {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
[data-drawer].is-open {
  visibility: visible;
  opacity: 1;
}

/* Responsive drawer: behaves as an off-canvas panel on small screens but
   collapses back to ordinary in-flow content at lg+. Lets a sidebar
   (e.g. shop filters) be written ONCE and reused for both layouts rather
   than rendered twice, which would duplicate every input id/for pair. */
[data-drawer-mobile] {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}
[data-drawer-mobile].is-open {
  visibility: visible;
  opacity: 1;
}
@media (min-width: 1024px) {
  /* The `html` prefix matters: an attribute selector scores the same as a
     class (0,1,0), so a bare [data-drawer-mobile] would TIE with Tailwind's
     .bg-black/50 + .backdrop-blur-sm on the same element and lose on source
     order - leaving the mobile scrim painted behind the desktop sidebar. */
  html [data-drawer-mobile],
  html [data-drawer-mobile].is-open {
    position: static;
    z-index: auto;
    display: block;
    visibility: visible;
    opacity: 1;
    background: none !important;
    backdrop-filter: none !important;
  }
  [data-drawer-mobile] > [data-drawer-panel] {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  [data-drawer-mobile] [data-drawer-mobile-header] {
    display: none !important;
  }
}

/* ---------- Modals ----------
   The admin pages keep Bootstrap's .modal/.modal-dialog/.modal-content
   structure (its inner markup wraps <form> elements, so restructuring it
   risks breaking submits) but are driven by ui.js / window.vdModal, which
   just toggle Tailwind's `hidden`. These rules re-skin that structure with
   theme tokens and take over visibility from Bootstrap.

   No !important needed: nothing else defines .modal any more, and
   Tailwind's `.hidden { display:none !important }` still beats it when the
   modal is closed. Every modal ships with `hidden` so it starts shut. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal .modal-dialog {
  width: 100%;
  max-width: 32rem;
  margin: auto;
}
.modal .modal-dialog.modal-lg {
  max-width: 48rem;
}
.modal .modal-content {
  background: var(--vd-surface);
  border: 1px solid var(--vd-border);
  border-radius: 1rem;
  box-shadow: var(--vd-shadow-lg);
  overflow: hidden;
}
.modal .modal-header,
.modal .modal-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
}
.modal .modal-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--vd-border);
}
.modal .modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--vd-border);
}
.modal .modal-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--vd-text);
}
.modal .modal-body {
  padding: 1.25rem 1.5rem;
  color: var(--vd-text);
}
/* Bootstrap's .btn-close is an SVG background image that is invisible on a
   dark surface; render a plain themed × instead. */
.modal .btn-close {
  all: unset;
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--vd-text-muted);
  font-size: 1.1rem;
  line-height: 1;
}
.modal .btn-close::before {
  content: "\00d7";
}
.modal .btn-close:hover {
  background: var(--vd-surface-2);
  color: var(--vd-text);
}

/* Tabs: buttons opt into active styling via .is-active; panels default
   hidden except whichever one is server-rendered without the class. */
[data-tab-target] {
  color: var(--vd-text-muted);
  border-color: transparent;
}
[data-tab-target].is-active {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* Carousel thumbnail/dot active state */
[data-carousel-goto].is-active {
  border-color: var(--brand-blue);
  opacity: 1;
}