/*
 * Solace theme — overrides for Bootstrap/pro.css that clash with the dark
 * neon-pink design. Edit freely; this file is never overwritten by updates.
 */

/* Neutralise the SellAuth default hero background (we ship our own hero) */
.hero {
  background-image: none !important;
  background-color: transparent !important;
}
.hero .bg-overlay {
  display: none !important;
}

/* Bootstrap resets that would fight the Tailwind utilities. We keep the body
 * background driven by the Solace `--background` token (solace.css) — do NOT
 * force it transparent, that's what makes the whole page look grey. */
img {
  max-width: 100%;
  height: auto;
}

/* Modals — make them feel part of the Solace system */
.modal-content {
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border-radius: var(--radius);
  color: var(--foreground);
}
.modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ─── Choices.js currency dropdown (`.solace-currency`) ─────────────────────
 * Compact pill that matches the other navbar buttons (h-9, rounded-full,
 * same border tone). Styled both for the currency selector in the navbar
 * and any other Choices instance on the page.
 * ─────────────────────────────────────────────────────────────────────── */
.solace-currency .choices {
  margin: 0;
  min-width: 0;
}
.solace-currency .choices__inner,
.solace-currency .choices .choices__inner {
  min-height: 36px; /* = size-9 */
  height: 36px;
  padding: 0 26px 0 12px; /* 26px right = 12px chevron + 8px icon + 6px gap */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  /* !important because Choices.js + Bootstrap both paint a pink resting
   * border via --ring / --bs-primary — we want it white-at-10% always. */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--foreground);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  box-shadow: none !important;
  outline: 0 !important;
}
.solace-currency .choices:hover .choices__inner,
.solace-currency .choices.is-open .choices__inner,
.solace-currency .choices.is-focused .choices__inner,
.solace-currency .choices__inner:focus,
.solace-currency .choices__inner:focus-visible,
.solace-currency:focus-within .choices__inner {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important; /* kill Choices + Bootstrap focus rings (both pink via --ring) */
  outline: 0 !important;
}

/* Choices exposes a hidden search input (.choices__input) that inherits the
 * Bootstrap `.form-control:focus` treatment when focused — that's what paints
 * the pink halo around the whole trigger. Neutralise it. */
.solace-currency .choices__input,
.solace-currency .choices__input:focus,
.solace-currency .choices__input:focus-visible {
  box-shadow: none !important;
  outline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  --bs-focus-ring-color: transparent;
  --bs-focus-ring-blur: 0;
  --bs-focus-ring-width: 0;
}
.solace-currency .choices__list--single {
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.solace-currency .choices__item--selectable {
  padding-right: 0;
}
.solace-currency .choices__placeholder {
  opacity: 0.7;
}

/* Two-span option:
 *  - `.solace-ccy-sym`  → always visible
 *  - `.solace-ccy-code` → only inside the dropdown, hidden on the compact trigger
 */
.solace-currency .solace-ccy-sym {
  display: inline-block;
}
.solace-currency .solace-ccy-code {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted-foreground);
  font-weight: 500;
}
.solace-currency .choices__list--single .solace-ccy-code {
  display: none;
}
/* Chevron — SVG background so Choices.js's default `border-color` flip on
 * .is-open can't erase it. We just rotate the whole pseudo on open. */
.solace-currency .choices[data-type*="select-one"]::after,
.solace-currency .choices.is-open[data-type*="select-one"]::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: 0 !important;
  padding: 0 !important;
  /* Kill Choices' triangle (the `border: 5px solid ...` trick) and Bootstrap's
   * border stacks — we paint our own arrow via mask. */
  border: 0 !important;
  background: var(--muted-foreground) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>")
    center / contain no-repeat;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.18s ease;
}
.solace-currency .choices.is-open[data-type*="select-one"]::after {
  transform: translateY(-50%) rotate(180deg);
}
.solace-currency .choices:hover[data-type*="select-one"]::after,
.solace-currency .choices.is-open[data-type*="select-one"]::after,
.solace-currency .choices.is-focused[data-type*="select-one"]::after {
  background: var(--foreground) !important;
}

/* Dropdown panel — scrollable list without a visible scrollbar. */
.solace-currency .choices__list--dropdown,
.solace-currency .choices__list[aria-expanded] {
  margin-top: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  max-height: 320px;
  min-width: 180px;
}
.solace-currency .choices__list--dropdown .choices__list {
  max-height: 304px;
  overflow-y: auto;
  /* Hide the scrollbar on every engine while keeping the list scrollable. */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.solace-currency .choices__list--dropdown .choices__list::-webkit-scrollbar {
  display: none; /* WebKit/Blink */
  width: 0;
  height: 0;
}
.solace-currency .choices__item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
}
.solace-currency .choices__item--selectable.is-highlighted {
  background: rgba(255, 255, 255, 0.06);
  color: var(--foreground);
}
.solace-currency .choices__item--selectable.is-highlighted .solace-ccy-code {
  color: var(--foreground);
}
.solace-currency .choices__item.is-selected {
  color: var(--primary);
  font-weight: 600;
}
.solace-currency .choices__item.is-selected .solace-ccy-code {
  color: color-mix(in oklab, var(--primary) 75%, white 25%);
}

/* Fallback for any other Choices instance (e.g. product options) */
.choices__inner {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: var(--card);
  border-color: rgba(255, 255, 255, 0.1);
}

/* SellAuth .card neutralisation (our card styles win) */
.card {
  background: transparent;
  border: 0;
}

/* ─── Product card description ────────────────────────────────────────────
 * The product.description is raw HTML (may contain <p>, <ul>, <strong>, …).
 * Rather than strip tags (SellAuth's `striptags` filter isn't guaranteed),
 * we flatten block-level children inline and clamp to 2 lines via CSS so
 * the card always gets a clean tagline. */
.product-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.product-card-desc * {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  list-style: none !important;
}
.product-card-desc p + p::before,
.product-card-desc li + li::before {
  content: " · ";
  opacity: 0.5;
}

/* Tailwind Preflight resets <svg> to display:block, which breaks every
 * Bootstrap `.btn` that has an inline icon + label (checkout, top-up, etc.)
 * because they stack on two lines. Force every .btn to be flex-centered and
 * restore inline-block on its svg children. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.btn > svg,
.btn svg {
  display: inline-block;
  vertical-align: middle;
}

/* ─── Global button lift-on-hover ──────────────────────────────────────────
 * Matches the hero CTA feel (translate-y -2px, 200ms) across the whole
 * theme. Applies to every Bootstrap .btn and to Tailwind pill/anchor buttons
 * built with `.inline-flex`. Explicit exclusions:
 *  - `[data-nav-link]`       — navbar pill has its own sliding animation
 *  - `[data-sheet-trigger]`  — the hamburger is a tiny round icon button
 *  - `[data-video-play|mute]`— video controls stay anchored
 *  - `.input-group-btn`      — quantity +/- would wobble inside its pill
 *  - `.variant`              — variant picker keeps its own -1px lift
 *  - `:disabled` / `.disabled`
 * ──────────────────────────────────────────────────────────────────────── */
.btn,
button.inline-flex,
a.inline-flex {
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}
.btn:not(:disabled):not(.disabled):not(.input-group-btn):not(.variant):hover,
button.inline-flex:not([data-nav-link]):not([data-sheet-trigger]):not(
    [data-video-play]
  ):not([data-video-mute]):not(.input-group-btn):not(.variant):not(
    :disabled
  ):hover,
a.inline-flex:not([data-nav-link]):hover {
  transform: translateY(-2px);
}

/* Bootstrap btn baseline — Solace pages use plain .inline-flex so keep Bootstrap's btn for legacy sections */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: color-mix(in oklab, var(--primary) 92%, white 8%);
  border-color: color-mix(in oklab, var(--primary) 92%, white 8%);
  color: var(--primary-foreground);
}
.btn-outline-primary {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
}
.btn-outline-primary:hover {
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary);
  border-color: var(--primary);
}

/* ─── Product page variants ────────────────────────────────────────────────
 * The template hard-codes `class="variant btn-primary"` on every variant
 * button. Without these overrides the non-selected variants inherit the pink
 * `.btn-primary` bg + dark `.btn-primary:hover` which turns every variant
 * pink on hover (ugly). We neutralise Bootstrap and paint Solace dark-card
 * variants, reserving pink tones for the active one only.
 * ────────────────────────────────────────────────────────────────────── */
.variants .variant,
.variants .variant.btn-primary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
  box-shadow: none;
}
.variants .variant:hover,
.variants .variant.btn-primary:hover,
.variants .variant.btn-primary:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--foreground);
  transform: translateY(-1px);
}
.variants .variant .name {
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.9rem;
}
.variants .variant .description,
.variants .variant .stock {
  color: var(--muted-foreground) !important;
}
.variants .variant .price {
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
  font-variant-numeric: tabular-nums;
}
.variants .variant.active,
.variants .variant.btn-primary.active,
.variants button.variant.active,
.variants button.variant.btn-primary.active {
  background: color-mix(in oklab, var(--primary) 12%, transparent) !important;
  /* Keep 1px width (same as inactive) to avoid layout shift, but paint it
   * full pink + halo via box-shadow so it reads as a clear selection. */
  border-color: var(--primary) !important;
  color: var(--foreground) !important;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--primary) 55%, transparent),
    0 12px 32px -18px color-mix(in oklab, var(--primary) 70%, transparent) !important;
}
.variants .variant.active .price {
  background: color-mix(in oklab, var(--primary) 18%, transparent);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  color: var(--primary);
}
.variants .variant .active-indicator {
  background: var(--background);
}
.variants .variant[disabled],
.variants .variant.btn-primary[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ─── Quantity selector (+ / −) ────────────────────────────────────────────
 * The template uses Bootstrap's `.input-group` with `btn-outline-primary`
 * on the +/− buttons and a `form-control` in the middle. We turn it into a
 * compact Solace pill: rounded capsule, flush segments, white chevrons, and
 * a centred number input with tabular-nums so digits don't jump.
 * ────────────────────────────────────────────────────────────────────── */
.product-wrapper .input-group,
.product-wrapper form .input-group {
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  width: fit-content;
  padding: 4px;
  gap: 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.product-wrapper .input-group .input-group-btn,
.product-wrapper .input-group .btn.input-group-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  box-shadow: none !important;
}
.product-wrapper .input-group .input-group-btn:hover:not(:disabled),
.product-wrapper .input-group .btn.input-group-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
  border-color: rgba(255, 255, 255, 0.15);
}
.product-wrapper .input-group .input-group-btn:disabled,
.product-wrapper .input-group .btn.input-group-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.product-wrapper .input-group .input-group-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.product-wrapper .input-group .form-control {
  flex: 1;
  min-width: 72px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: 0.9rem;
  padding: 0;
  box-shadow: none !important;
  outline: 0 !important;
}
.product-wrapper .input-group .form-control:focus,
.product-wrapper .input-group .form-control:focus-visible {
  --bs-focus-ring-color: transparent;
  --bs-focus-ring-width: 0;
  box-shadow: none !important;
  outline: 0 !important;
}
/* Hide Chrome/Safari's native up/down spinner arrows on EVERY number input
 * across the theme (quantity on product detail, cart quantity, price filter,
 * …). Chrome/Edge/Safari paint them via ::-webkit-(inner|outer)-spin-button;
 * Firefox uses `-moz-appearance: textfield`. We always pair the custom +/−
 * pill buttons with the input, so the native spinners would just add
 * visual noise. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}