/* ============================================================
 * CSD Storefront — variation selector + express checkout.
 * Loaded ONLY where [csd_variation_selector] renders (public pages).
 * ACSS 3.3.6 tokens only (DEV-PROTOCOL §3); the checkout popups reuse
 * the .csd-savepop overlay conventions from the dashboard stylesheet,
 * but this file is self-contained (the dashboard CSS doesn't load for
 * customers) — so the overlay primitives are re-declared here.
 * ============================================================ */

/* ── Selector ───────────────────────────────────────────── */
.csd-vsel { display: flex; flex-direction: column; gap: var(--space-m); }

.csd-vsel__axis { display: flex; flex-direction: column; gap: var(--space-xs); }
.csd-vsel__label { font-size: var(--text-s); color: var(--text-dark-muted); }
.csd-vsel__label strong { color: var(--text-dark); }
.csd-vsel__values { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Text pills (Shopify "128GB" style): outline → filled when selected. */
.csd-vsel__pill {
  padding: calc(var(--space-xs) / 2) var(--space-m);
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-dark);
  background-color: var(--white);
  border: 2px solid var(--border-color-dark);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: 0.2s ease-out;
}
.csd-vsel__pill:hover { border-color: var(--text-dark); }
.csd-vsel__pill.is-selected {
  color: var(--white);
  background-color: var(--neutral-ultra-dark);
  border-color: var(--neutral-ultra-dark);
}

/* Color swatches: circles painted with csd_color_hex; selected = ring. */
.csd-vsel__swatch {
  width: 34px;
  height: 34px;
  padding: 0;
  background-color: var(--base-light);
  border: 2px solid var(--border-color-dark);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: 0.2s ease-out;
}
.csd-vsel__swatch.is-selected {
  border-color: var(--neutral-ultra-dark);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--neutral-ultra-dark);
}
/* Value without a real hex (untouched #cccccc) reads as a neutral chip. */
.csd-vsel__swatch--nohex { background-color: var(--base-ultra-light); }

/* §2.1 Image swatch: the value's image fills the circle. */
.csd-vsel__swatch { overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.csd-vsel__swatch--image { background-color: var(--white); }
.csd-vsel__swatch--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* §2.1 Letter/number swatch (no color, no image) — first 1–2 chars centered. */
.csd-vsel__swatch--initials { background-color: var(--white); }
.csd-swatch__initials {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--text-dark);
  text-transform: uppercase;
}

.csd-vsel__dropdown {
  max-width: 22rem;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-m);
  border: 2px solid var(--border-color-dark);
  border-radius: var(--radius-m);
  background-color: var(--white);
}

.csd-vsel__price { margin: 0; font-size: var(--h3); font-weight: 700; color: var(--text-dark); }
.csd-vsel__hint { margin: 0; font-size: var(--text-s); color: var(--text-dark-muted); }

/* Qty + buttons row. */
.csd-vsel__buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-s); }
.csd-vsel__qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--border-color-dark);
  border-radius: var(--radius-circle);
  overflow: hidden;
}
.csd-vsel__qtybtn {
  width: 44px; height: 44px;
  font-size: var(--text-l);
  color: var(--text-dark);
  background: transparent;
  border: none;
  cursor: pointer;
}
.csd-vsel__qtyinput {
  width: 3.5em;
  text-align: center;
  font-size: var(--text-m);
  border: none;
  background: transparent;
  -moz-appearance: textfield;
}
.csd-vsel__qtyinput::-webkit-outer-spin-button,
.csd-vsel__qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Buttons — self-contained (dashboard .csd-btn doesn't load here). */
.csd-vsel .csd-btn,
.csd-checkout .csd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--text-m);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-circle);
  border: 2px solid var(--primary);
  cursor: pointer;
  transition: 0.2s ease-out;
}
.csd-vsel .csd-btn-primary,
.csd-checkout .csd-btn-primary { color: var(--white); background-color: var(--primary); }
.csd-vsel .csd-btn-primary:hover,
.csd-checkout .csd-btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }
.csd-vsel .csd-btn-outline { color: var(--primary-dark); background: transparent; }
.csd-vsel .csd-btn:disabled { opacity: .45; cursor: not-allowed; }
.csd-checkout .csd-btn-whatsapp {
  color: var(--white);
  background-color: var(--success-dark);
  border-color: var(--success-dark);
}

/* ── Checkout popups (savepop overlay, self-contained) ───── */
/* CRITICAL: the popups render `hidden` until opened, but an author
   `display: flex` beats the UA's `[hidden] { display: none }` — without
   this guard the invisible fixed overlays cover the page and swallow
   every click (the "page becomes unclickable" bug). */
[hidden] { display: none !important; }

.csd-checkout.csd-savepop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-l);
  background-color: var(--black-trans-40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}
.csd-checkout.csd-savepop--visible { opacity: 1; }
.csd-checkout .csd-savepop__box {
  width: 100%;
  max-width: 28rem;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  text-align: left;
  background-color: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--box-shadow-m);
  transform: scale(.9);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
.csd-checkout.csd-savepop--visible .csd-savepop__box { transform: scale(1); }
.csd-checkout .csd-savepop__icon {
  margin-inline: auto;
  width: 48px; height: 48px; font-size: 48px;
  color: var(--success);
}
.csd-checkout .csd-savepop__msg { margin: 0; font-size: var(--text-l); font-weight: 700; color: var(--text-dark); text-align: center; }
.csd-checkout .csd-savepop__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); }
.csd-checkout__stack { flex-direction: column; align-items: stretch; }

.csd-checkout__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 34px; height: 34px;
  font-size: var(--text-l);
  color: var(--text-dark-muted);
  background: transparent;
  border: none;
  cursor: pointer;
}
.csd-checkout__title { margin: 0; font-size: var(--text-l); font-weight: 700; color: var(--text-dark); }
.csd-checkout__sub { margin: 0; font-size: var(--text-s); color: var(--text-dark-muted); }
.csd-checkout__eta { font-size: var(--text-xs); color: var(--success-dark); }
.csd-checkout__total { margin: 0; font-size: var(--text-m); color: var(--text-dark); }
.csd-checkout__note { margin: 0; font-size: var(--text-xs); color: var(--text-dark-muted); text-align: center; }
.csd-checkout__submit { width: 100%; }
/* §2.7: replaceable icon sits inline with the label (label lives in its own
   span so AJAX text updates never wipe the icon). */
.csd-checkout__submit-icon,
.csd-checkout__upsell-yes .csd-checkout__submit-icon { display: inline-flex; align-items: center; }
.csd-checkout__submit-icon svg,
.csd-checkout__submit-icon img { width: 1em; height: 1em; }

/* §2.6: mini-cart action buttons equal height on one row. */
.woocommerce-mini-cart__buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: stretch; }
.woocommerce-mini-cart__buttons > a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; }
.csd-checkout__skip {
  background: transparent; border: none; cursor: pointer;
  font-size: var(--text-s); color: var(--text-dark-muted); text-decoration: underline;
}
.csd-checkout__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Fields inside the popup (self-contained mini versions). */
.csd-checkout .csd-field { display: flex; flex-direction: column; gap: calc(var(--space-xs) / 2); }
.csd-checkout .csd-field__label { font-size: var(--text-s); font-weight: 600; color: var(--text-dark); }
.csd-checkout .csd-field__label em { font-weight: 400; color: var(--text-dark-muted); font-style: normal; }
.csd-checkout .csd-input {
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-m);
  border: 2px solid var(--border-color-dark);
  border-radius: var(--radius-m);
  background-color: var(--white);
}
.csd-checkout .csd-input:focus { outline: none; border-color: var(--primary); }
.csd-checkout .csd-radio {
  display: flex; align-items: baseline; gap: var(--space-xs);
  padding: var(--space-xs) 0;
  font-size: var(--text-s); color: var(--text-dark);
  cursor: pointer;
}
.csd-checkout .csd-radio em { display: block; font-style: normal; color: var(--text-dark-muted); }
.csd-termpop__error { margin: 0; font-size: var(--text-s); color: var(--danger-dark); }

/* Line-item / upsell cards. */
.csd-checkout__item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
  font-size: var(--text-s);
  background-color: var(--base-ultra-light);
  border: 1px solid var(--border-color-dark);
  border-radius: var(--radius-m);
}
.csd-checkout__item:empty { display: none; }
.csd-checkout__item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-s); }
.csd-checkout__item p { margin: 0; color: var(--text-dark-muted); }
.csd-upsell__prices s { color: var(--text-dark-muted); }
.csd-upsell__prices b { color: var(--success-dark); }

/* ── Variation → image cross-fade (§2.2) ─────────────────── */
/* Any image carrying the documented data-csd-product-image attribute
   fades out, swaps src, and fades back in (JS drives the class). */
img[data-csd-product-image] { transition: opacity 0.25s ease-out; }
img[data-csd-product-image].csd-img-swapping { opacity: 0; }

/* ── Card swatch (csd-card-swatch element, §2.6) ─────────── */
.csd-cardswatch { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* Values are <span role="link" data-csd-href> (parser-safe inside linked
   cards — see card-swatch.php); make them feel like links. */
.csd-cardswatch [data-csd-href] { cursor: pointer; }
.csd-cardswatch [data-csd-href]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.csd-cardswatch a { text-decoration: none; }
.csd-cardswatch .csd-vsel__swatch,
.csd-cardswatch .csd-vsel__pill { display: inline-flex; align-items: center; justify-content: center; }
.csd-cardswatch .csd-vsel__swatch { width: 24px; height: 24px; }
.csd-cardswatch .csd-vsel__pill { color: var(--text-dark); }

/* ── Product attributes element (csd-product-attributes, §2.5) ── */
.csd-attrs { margin: 0; display: flex; flex-direction: column; }
.csd-attrs__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--border-color-dark);
}
.csd-attrs__row:last-child { border-bottom: none; }
.csd-attrs--stack .csd-attrs__row { grid-template-columns: 1fr; gap: calc(var(--space-xs) / 2); }
.csd-attrs dt { margin: 0; font-size: var(--text-s); font-weight: 600; color: var(--text-dark); }
.csd-attrs dd { margin: 0; font-size: var(--text-s); color: var(--text-dark-muted); }

/* ── Checkout popup: builder-canvas preview (§2.4) ───────── */
/* Inside the Bricks canvas the popups render OPEN and IN FLOW so every
   part is clickable/styleable — never a fixed overlay over the canvas. */
.csd-checkout.csd-savepop.csd-checkout--preview {
  position: static;
  inset: auto;
  z-index: auto;
  opacity: 1;
  padding: var(--space-m);
  border-radius: var(--radius-m);
}
.csd-checkout--preview .csd-savepop__box { transform: none; max-height: none; }

/* ── Mini-cart / cart item name (§2.6) ──────────────────────
   Bold product name, muted one-line variation beneath it. */
.csd-cartitem__name { font-weight: 700; }
.csd-cartitem__variant {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-dark-muted);
}

/* ── Card add-to-cart button (csd-add-to-cart element, §2.4) ── */
.csd-atc { display: inline-flex; }
.csd-atc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  font-size: var(--text-m);
  font-weight: 700;
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: 0.2s ease-out;
}
.csd-atc__btn:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); }
.csd-atc__btn:disabled { opacity: .45; cursor: not-allowed; }

/* Builder-canvas placeholder for the checkout-popup element. */
.csd-checkout-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  font-size: var(--text-s);
  color: var(--text-dark-muted);
  background-color: var(--base-ultra-light);
  border: 2px dashed var(--border-color-dark);
  border-radius: var(--radius-m);
}

/* Confirmation summary. */
.csd-checkout__summary ul { list-style: none; margin: 0; padding: 0; }
.csd-checkout__summary li {
  display: flex; justify-content: space-between; gap: var(--space-s);
  padding: calc(var(--space-xs) / 2) 0;
  font-size: var(--text-s); color: var(--text-dark);
  border-bottom: 1px solid var(--border-color-dark);
}
.csd-conf__number { margin: 0; font-size: var(--text-s); font-weight: 700; color: var(--text-dark-muted); text-align: center; }
.csd-conf__total { margin: var(--space-xs) 0 0; font-size: var(--text-m); color: var(--text-dark); text-align: right; }
.csd-conf__city { margin: 0; font-size: var(--text-xs); color: var(--text-dark-muted); text-align: right; }
.csd-conf__paynote { margin: 0; font-size: var(--text-s); color: var(--text-dark); text-align: center; }
.csd-conf__qrimg { max-width: 220px; margin-inline: auto; display: block; }
.csd-conf__bank { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--space-xs) / 2) var(--space-s); font-size: var(--text-s); }
.csd-conf__bank dt { font-weight: 700; color: var(--text-dark-muted); }
.csd-conf__bank dd { margin: 0; color: var(--text-dark); }