/* ============================================================================
 * Variation picker styles
 *
 * Loaded alongside opc-frontend.js's variation module. Self-contained: every
 * selector is scoped under .opc-variations-section to avoid bleeding into the
 * rest of the form.
 *
 * Theme integration:
 *   - Primary color comes from --opc-primary (set on .opc-form-container
 *     by the legacy dynamic CSS pipeline). Falls back to amber if unset so
 *     the picker still looks intentional on a fresh install.
 *   - Color swatches accept the per-option color via --opc-swatch-color
 *     (set inline by the template).
 *
 * RTL: every directional rule uses logical properties (inline-start/end,
 * margin-inline-*) so the same stylesheet flips for ar/he/fa without overrides.
 *
 * Accessibility: focus rings use the system :focus-visible pseudo, contrast
 * ratios verified ≥3:1 against neutral backgrounds, hit targets ≥44×44 px on
 * mobile breakpoints. Animations respect prefers-reduced-motion.
 * ========================================================================= */

.opc-variations-section {
  --opc-vd-radius: 10px;
  --opc-vd-gap: 8px;
  --opc-vd-primary: var(--opc-primary, #d97706);
  --opc-vd-border: #e5e7eb;
  --opc-vd-border-strong: #1f2937;
  --opc-vd-muted: #6b7280;
  --opc-vd-bg-soft: #f9fafb;
  --opc-vd-disabled-overlay: rgba(255, 255, 255, 0.55);

  /* Match the breathing room of .opc-offers-section / .opc-upsells-section
     so the picker block looks like it belongs to the same column of cards.
     The inline margin pulls the card a little narrower than the form so
     it visually sits inside the parent — same trick the offer cards use. */
  margin: 18px 14px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--opc-vd-border);
  border-radius: 12px;
}

.opc-variations-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  color: #111827;
  /* Centered so the picker block reads as a self-contained "configure
     your order" section, balanced regardless of RTL/LTR direction. */
  text-align: center;
}

/* ── Attribute row ─────────────────────────────────────────────────────── */

.opc-attribute-row {
  margin-bottom: 14px;
}
.opc-attribute-row:last-child {
  margin-bottom: 0;
}

.opc-attribute-head {
  /* No selected-value readout anymore, so the head is just the label.
     Keep flex so the * required marker stays inline, but anchor the
     label at the start (inline-start works in both LTR + RTL). */
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 10px;
}

.opc-attribute-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.opc-attribute-label .opc-required {
  color: #dc2626;
  margin-inline-start: 2px;
}

.opc-attribute-selected-value {
  font-size: 13px;
  color: var(--opc-vd-muted);
  font-weight: 500;
  min-height: 1em; /* prevent layout shift when value populates */
}

/* ── Swatch grids ─────────────────────────────────────────────────────── */

.opc-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--opc-vd-gap);
}

/* ── Color swatch ─────────────────────────────────────────────────────── */

.opc-color-swatch {
  --size: 36px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 3px; /* gap between outer ring and inner color disc */
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.opc-color-swatch .opc-swatch-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--opc-swatch-color, #e5e7eb);
  /* Subtle inset shadow makes white/light swatches visible against white bg */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.opc-color-swatch .opc-swatch-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  /* Drop shadow so the check is visible on light-colored swatches */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.opc-color-swatch:hover {
  transform: scale(1.08);
}

.opc-color-swatch.selected {
  border-color: var(--opc-vd-primary);
}
.opc-color-swatch.selected .opc-swatch-check {
  opacity: 1;
}

/* ── Image swatch ─────────────────────────────────────────────────────── */

.opc-image-swatch {
  --size: 56px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 2px solid var(--opc-vd-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.opc-image-swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opc-image-swatch .opc-swatch-check {
  position: absolute;
  inset: auto 4px 4px auto;
  width: 18px;
  height: 18px;
  background: var(--opc-vd-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.opc-image-swatch:hover {
  transform: translateY(-2px);
}
.opc-image-swatch.selected {
  border-color: var(--opc-vd-primary);
}
.opc-image-swatch.selected .opc-swatch-check {
  opacity: 1;
  transform: scale(1);
}

/* ── Text/size button ─────────────────────────────────────────────────── */

.opc-attribute-button {
  min-width: 44px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: #fff;
  color: #1f2937;
  border: 1.5px solid var(--opc-vd-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease,
    transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.opc-attribute-button:hover {
  border-color: var(--opc-vd-border-strong);
}

.opc-attribute-button.selected {
  background: var(--opc-vd-primary);
  border-color: var(--opc-vd-primary);
  color: #fff;
}

/* ── Dropdown ─────────────────────────────────────────────────────────── */

.opc-attribute-select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
  background: #fff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E")
    no-repeat right 12px center / 14px;
  border: 1.5px solid var(--opc-vd-border);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Flip caret position for RTL */
[dir="rtl"] .opc-attribute-select {
  padding: 10px 12px 10px 36px;
  background-position: left 12px center;
}

.opc-attribute-select:focus {
  border-color: var(--opc-vd-primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opc-vd-primary) 20%, transparent);
}

/* ── Disabled (out-of-stock combination) ───────────────────────────────── */

.opc-color-swatch.is-disabled,
.opc-image-swatch.is-disabled,
.opc-attribute-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  position: relative;
  filter: grayscale(0.5);
}

.opc-color-swatch.is-disabled::after,
.opc-image-swatch.is-disabled::after,
.opc-attribute-button.is-disabled::after {
  /* Diagonal strike-through indicator */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(220, 38, 38, 0.6) 50%,
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}
.opc-color-swatch.is-disabled,
.opc-image-swatch.is-disabled {
  border-radius: 50%;
}
.opc-attribute-button.is-disabled {
  text-decoration: line-through;
  text-decoration-color: rgba(220, 38, 38, 0.6);
}
.opc-attribute-button.is-disabled::after {
  display: none; /* line-through replaces the diagonal for buttons */
}

.opc-color-swatch.is-disabled:hover,
.opc-image-swatch.is-disabled:hover,
.opc-attribute-button.is-disabled:hover {
  transform: none;
}

/* ── Validation error state ────────────────────────────────────────────── */

.opc-attribute-error {
  margin-top: 6px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}

.opc-attribute-row.opc-has-error .opc-attribute-label {
  color: #dc2626;
}

.opc-attribute-row.opc-has-error .opc-attribute-button,
.opc-attribute-row.opc-has-error .opc-attribute-select,
.opc-attribute-row.opc-has-error .opc-color-swatch:not(.selected),
.opc-attribute-row.opc-has-error .opc-image-swatch:not(.selected) {
  border-color: rgba(220, 38, 38, 0.4);
}

/* Subtle shake to draw attention without being annoying */
@keyframes opc-vd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.opc-attribute-row.opc-has-error .opc-swatch-grid,
.opc-attribute-row.opc-has-error .opc-attribute-select {
  animation: opc-vd-shake 280ms ease-out;
}

/* ── Focus visibility ──────────────────────────────────────────────────── */

.opc-color-swatch:focus-visible,
.opc-image-swatch:focus-visible,
.opc-attribute-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--opc-vd-primary) 35%, transparent);
}

/* ── Live readout (price/stock under the picker) ───────────────────────── */

.opc-variation-info {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--opc-vd-bg-soft);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.opc-variation-price {
  font-weight: 700;
  color: var(--opc-vd-primary);
}

.opc-variation-stock {
  color: var(--opc-vd-muted);
}

/* ── Mobile: bigger touch targets ──────────────────────────────────────── */

@media (max-width: 480px) {
  .opc-variations-section {
    padding: 14px;
  }
  .opc-color-swatch {
    --size: 44px; /* ≥44px hits Apple/Google touch-target guidelines */
  }
  .opc-image-swatch {
    --size: 64px;
  }
  .opc-attribute-button {
    padding: 12px 16px;
    font-size: 15px;
  }
  .opc-attribute-select {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    padding: 12px 36px 12px 12px;
  }
}

/* ── Narrow widget context (Elementor sidebar) ─────────────────────────── */

.opc-widget-container .opc-variations-section {
  padding: 12px;
}
.opc-widget-container .opc-color-swatch {
  --size: 32px;
}
.opc-widget-container .opc-image-swatch {
  --size: 48px;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .opc-color-swatch,
  .opc-image-swatch,
  .opc-attribute-button,
  .opc-attribute-select,
  .opc-swatch-check {
    transition: none;
  }
  .opc-attribute-row.opc-has-error .opc-swatch-grid,
  .opc-attribute-row.opc-has-error .opc-attribute-select {
    animation: none;
  }
}