/**
 * Sticky ATC Bar — Gerbs WooCommerce PDP
 *
 * Appears when the original in-page ATC button scrolls out of view.
 * Proxies the original form submit — never POSTs to wc-ajax directly.
 *
 * Color tokens sourced from live PDP on 2026-05-02:
 *   --gerbs-atc-blue : rgb(60, 112, 246) — matches .single_add_to_cart_button
 *   Page background  : rgb(255, 255, 255) — site uses white, no FAF7F1 cream
 *   Body text        : rgb(0, 0, 0)
 *   ATC border-radius: 30px
 *
 * Z-index: 9000 — below Divi overlay (9999) and YITH popups (99999).
 *
 * Enqueued by Divi-child/functions.php on is_product() pages only.
 * sticky-atc.js is excluded from WP Rocket Delay JS via
 * wp-content/mu-plugins/fix-rocket-js-dependencies.php — keep in sync.
 */

/* ─── Custom properties ──────────────────────────────────────────────────── */
:root {
  --gerbs-atc-blue:          #3C70F6;
  --gerbs-cream:             #FFFFFF;
  --gerbs-text:              #000000;
  --sticky-atc-height-mobile:  64px;
  --sticky-atc-height-desktop: 72px;
  --sticky-atc-z:            9000;
  --sticky-atc-shadow:       0 -1px 0 rgba(0, 0, 0, 0.08), 0 -6px 20px rgba(0, 0, 0, 0.08);
  --sticky-atc-transition:   200ms ease-out;
}

/* ─── Bar container ──────────────────────────────────────────────────────── */
#sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--sticky-atc-z);
  background: var(--gerbs-cream);
  box-shadow: var(--sticky-atc-shadow);
  /* Prevent bar from hiding under iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Hidden by default — JS adds .sticky-atc--visible on IntersectionObserver trigger */
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--sticky-atc-transition),
    opacity   var(--sticky-atc-transition);
  /* Prevent tap-highlight flash on iOS */
  -webkit-tap-highlight-color: transparent;
}

#sticky-atc.sticky-atc--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ─── Reduced motion — opacity-only, no transform slide ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  #sticky-atc {
    transform: none;
    transition: opacity 100ms ease-out;
  }

  #sticky-atc.sticky-atc--visible {
    transform: none;
  }
}

/* ─── Inner layout ───────────────────────────────────────────────────────── */
.sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--sticky-atc-height-mobile);
  padding: 8px 12px;
  box-sizing: border-box;
  width: 100%;
}

/* ─── Title + price block ─────────────────────────────────────────────────── */
.sticky-atc__title-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0; /* allow truncation */
}

.sticky-atc__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gerbs-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sticky-atc__price {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gerbs-text);
}

/* WooCommerce injects .woocommerce-Price-amount inside the price HTML */
.sticky-atc__price .woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
}

/* ─── Variant select ─────────────────────────────────────────────────────── */
.sticky-atc__variant-wrap {
  flex: 0 0 auto;
}

.sticky-atc__variant {
  height: 44px; /* WCAG 2.5.5 touch target */
  min-width: 140px;
  max-width: 200px; /* allow long labels to stretch before truncating */
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

/* ─── Subscription select (v1.1 — wcsatt integration) ───────────────────── */
/* Dynamically injected by sticky-atc.js when wcsatt is present on the product */
.sticky-atc__sub-wrap {
  flex: 0 0 auto;
}

.sticky-atc__sub-select {
  height: 44px; /* WCAG 2.5.5 touch target */
  min-width: 140px;
  max-width: 200px; /* "Deliver every 4 weeks", "Subscribe & Save 10%" need ~155px */
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

/* Visually group the variant + sub selects when they appear together —
   tighter 8px gap between just those two controls reads them as a
   coherent control set, distinct from the looser 16px rhythm against
   the title-price block on the left and the ATC button on the right.
   NOTE: Sibling-coupling via negative margin is fragile. If a third
   control is ever inserted between .sticky-atc__variant-wrap and
   .sticky-atc__sub-wrap, replace this with a shared
   .sticky-atc__select-group wrapper that owns its own gap. */
.sticky-atc__variant-wrap + .sticky-atc__sub-wrap {
  margin-left: -8px;
}

/* ─── Subscribe link ─────────────────────────────────────────────────────── */
.sticky-atc__subscribe-link {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gerbs-atc-blue);
  text-decoration: none;
  white-space: nowrap;
}

.sticky-atc__subscribe-link:hover,
.sticky-atc__subscribe-link:focus {
  text-decoration: underline;
}

/* ─── ATC button ─────────────────────────────────────────────────────────── */
.sticky-atc__atc-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px; /* WCAG 2.5.5 touch target */
  padding: 10px 20px;
  background: var(--gerbs-atc-blue);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border: none;
  border-radius: 30px; /* matches original ATC button */
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease-out, opacity 150ms ease-out;
}

.sticky-atc__atc-btn:hover:not([aria-disabled="true"]):not(:disabled) {
  background: #2d5fe0;
}

.sticky-atc__atc-btn:focus-visible {
  outline: 3px solid var(--gerbs-atc-blue);
  outline-offset: 2px;
}

/* Loading state */
.sticky-atc__atc-btn[data-state="loading"] {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

/* Success state */
.sticky-atc__atc-btn[data-state="success"] {
  background: #28a745;
}

/* Error state */
.sticky-atc__atc-btn[data-state="error"] {
  background: #FBEAEA;
  color: #A82929;
  cursor: default;
}

/* Disabled state (unselected variant) */
.sticky-atc__atc-btn[aria-disabled="true"],
.sticky-atc__atc-btn[data-state="disabled"] {
  background: #e0e0e0;
  color: #666;
  cursor: default;
  pointer-events: none;
}

/* ─── Desktop overrides (≥ 768px) ────────────────────────────────────────── */
@media (min-width: 768px) {
  .sticky-atc__inner {
    height: var(--sticky-atc-height-desktop);
    padding: 12px 16px;
    max-width: 1280px;
    margin: 0 auto;
    gap: 16px;
  }

  #sticky-atc {
    /* On desktop the inner is max-width centered but bar bg spans full width */
  }
}

/* ─── Mobile overflow protection ──────────────────────────────────────────── */
/* When a subscription product mounts the sub-select alongside the variant
   select, the four controls (title-price, variant, sub, ATC) plus gaps add
   up to ~425px and overflow viewports under ~440px. Most modern phones sit
   in 360–414px, so they're affected. Below 480px we let the title-price
   block compress further and shrink the selects' min-width so the row fits.
   Below 360px we hide title-price entirely; the sub-select stays but
   shrinks to a 96px minimum so the row still fits. */
@media (max-width: 479px) {
  .sticky-atc__variant,
  .sticky-atc__sub-select {
    min-width: 104px;
  }

  .sticky-atc__inner {
    gap: 8px;
  }
}

@media (max-width: 359px) {
  .sticky-atc__title-price {
    display: none; /* extreme narrow: hide title/price, keep controls accessible */
  }

  .sticky-atc__variant,
  .sticky-atc__sub-select {
    min-width: 96px;
  }

  .sticky-atc__atc-btn {
    padding: 10px 12px;
    font-size: 14px;
  }
}

/* ─── SR-only status region (already inline-styled in PHP, kept here too) ── */
.sticky-atc__sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Suppress plugin-injected price content inside the sticky bar.
   WC Points & Rewards and wcsatt subscription options belong on the
   in-page form, not in the sticky bar price cell. */
#sticky-atc .wc-points-rewards-product-message,
#sticky-atc .wcsatt-options-wrapper,
#sticky-atc .wcsatt-options-prompt {
  display: none !important;
}

/* <br> stripping for the price cell is handled at the source:
   gerbs_sticky_atc_strip_br() in functions.php for initial render,
   and stripBr() in sticky-atc.js for variation/reset re-injection.
   A CSS-level `#sticky-atc .sticky-atc__price br { display: none }`
   was rejected — it would silently swallow legitimate <br>s emitted
   by future plugins (subscription "from $X / per period" formatting,
   multi-currency, etc.). */