/* ============================================================
   EVOE Frontend – Glassy customization block
   ============================================================ */

/* Force parent flex containers to wrap so EVOE gets its own row */
.woocommerce-variation-add-to-cart:has(.evoe),
.wc-block-add-to-cart-form:has(.evoe),
form.cart:has(.evoe) {
  flex-wrap: wrap !important;
}

/* Outer wrapper - force full width even inside flex containers */
.evoe {
  isolation: isolate;
  /*
    Prefer THEME / storefront tokens so the card matches the active theme's
    primary CTA / sale-price color rather than always falling back to
    WooCommerce's purple. Resolution order:
      1. Explicit theme override        --evoe-theme-accent
      2. WP block-editor preset         --wp--preset--color--{primary,accent}
      3. Elementor global accent        --e-global-color-{primary,accent,secondary}
      4. WooCommerce token              --woocommerce / --wc-primary
      5. Hard-coded brand magenta       fallback
  */
  --evoe-accent: var(
    --evoe-theme-accent,
    var(
      --wp--preset--color--primary,
      var(
        --wp--preset--color--accent,
        var(
          --wp--preset--color--contrast,
          var(
            --e-global-color-primary,
            var(
              --e-global-color-accent,
              var(
                --e-global-color-secondary,
                var(--woocommerce, var(--wc-primary, #96588a))
              )
            )
          )
        )
      )
    )
  );
  --evoe-accent-text: var(
    --evoe-theme-accent-text,
    var(--wc-primary-text, #fff)
  );
  --evoe-text-strong: rgba(28, 31, 38, 0.95);
  --evoe-text-muted: rgba(44, 48, 58, 0.76);
  --evoe-surface: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.64));
  --evoe-surface-soft: rgba(255, 255, 255, 0.45);
  --evoe-surface-strong: rgba(255, 255, 255, 0.58);
  --evoe-border: rgba(124, 135, 156, 0.22);
  --evoe-separator: rgba(124, 135, 156, 0.22);
  --evoe-focus: color-mix(in srgb, var(--evoe-accent) 52%, transparent);
  --evoe-accent-soft: color-mix(in srgb, var(--evoe-accent) 14%, transparent);
  --evoe-accent-softer: color-mix(in srgb, var(--evoe-accent) 9%, transparent);
  margin: 20px 0 12px;
  border: 1px solid var(--evoe-border);
  border-radius: 18px;
  /* Hidden overflow clipped the dropdown / spinners at the rounded edge */
  overflow: visible;
  background: var(--evoe-surface);
  box-shadow: 0 14px 32px -22px rgba(18, 24, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  font-size: inherit;
  color: inherit;
  font-family: inherit;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  box-sizing: border-box;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .evoe {
    background: rgba(255, 255, 255, 0.94);
  }
}

.evoe,
.evoe * {
  color-scheme: light dark;
}

/* Section heading */
.evoe__title {
  background: linear-gradient(
    to right,
    var(--evoe-accent-softer) 0,
    rgba(255, 255, 255, 0.35) min(420px, 100%),
    transparent 100%
  );
  border-bottom: 1px solid var(--evoe-separator);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
  padding: 15px 20px;
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--evoe-accent);
  border-radius: 18px 18px 0 0;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--evoe-text-strong) 88%, var(--evoe-accent));
}

/* Options list */
.evoe__options {
  display: flex;
  flex-direction: column;
}

/* Single option row — grid keeps controls near the labels (no mega gap) */
.evoe__opt {
  display: grid;
  align-items: center;
  gap: 10px 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--evoe-separator);
  transition: background-color 0.2s ease;
}

/* Only row-level badges use column 2; nested hints (radio choices) stay inside `.evoe__control`. */
.evoe__opt:has(> .evoe__price-hint) {
  grid-template-columns: minmax(0, min(58vw, 22rem)) auto minmax(120px, 11rem);
}

.evoe__opt:not(:has(> .evoe__price-hint)) {
  grid-template-columns: minmax(0, min(72vw, 28rem)) minmax(120px, 11rem);
}

.evoe__opt .evoe__label-wrap {
  grid-column: 1;
}

.evoe__opt > .evoe__price-hint {
  grid-column: 2;
  justify-self: end;
}

.evoe__opt > .evoe__control {
  grid-column: 3;
}

.evoe__opt:not(:has(> .evoe__price-hint)) > .evoe__control {
  grid-column: 2;
}

@media (max-width: 740px) {
  .evoe__opt,
  .evoe__opt:has(> .evoe__price-hint),
  .evoe__opt:not(:has(> .evoe__price-hint)) {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .evoe__opt > .evoe__price-hint {
    grid-column: 1;
    justify-self: flex-start;
  }

  .evoe__opt > .evoe__control {
    grid-column: 1;
    justify-self: stretch;
    max-width: 100%;
  }
}

.evoe__opt:last-child {
  border-bottom: none;
}

.evoe__opt:hover {
  background: rgba(255, 255, 255, 0.33);
}

.evoe__opt:focus-within {
  background: rgba(255, 255, 255, 0.4);
}

/* Label column */
.evoe__label-wrap {
  min-width: 0;
}

.evoe__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 640;
  font-size: 14px;
  color: var(--evoe-text-strong);
  margin-bottom: 3px;
}

.evoe__req {
  color: #d63638;
  font-size: 12px;
}

.evoe__help {
  font-size: 12px;
  color: var(--evoe-text-muted);
  margin-top: 2px;
  line-height: 1.45;
  white-space: normal;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Availability message when whitelist variations do not include current selection */
.evoe__notice--custom-note {
  padding: 14px 18px;
  border-top: 1px solid var(--evoe-separator);
  background: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  line-height: 1.55;
  color: var(--evoe-text-strong);
}

.evoe__note-line {
  margin: 0 0 0.5em;
}

.evoe__note-line:last-child,
.evoe__note-list:last-child {
  margin-bottom: 0;
}

.evoe__note-line--muted {
  color: var(--evoe-text-muted);
  font-size: 12px;
  margin-top: 0.85em;
  font-weight: 600;
}

.evoe__note-list {
  margin: 0.35em 0 0;
  padding-left: 1.35rem;
}

.evoe__note-list li {
  margin-bottom: 0.3em;
}

/* Price hint badge */
.evoe__price-hint {
  align-self: center;
  font-size: 11px;
  font-weight: 750;
  color: color-mix(in srgb, var(--evoe-accent-text) 8%, var(--evoe-accent));
  background: var(--evoe-accent-soft);
  border: 1px solid color-mix(in srgb, var(--evoe-accent) 42%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Control column — full width inside its grid slot so selects aren’t cropped */
.evoe__control {
  min-width: 0;
  width: 100%;
  justify-self: end;
  box-sizing: border-box;
}

.evoe__input {
  display: block;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  text-align: center;
  padding: 8px 12px;
  border: var(--wc-form-border-width, 1px) solid
    color-mix(in srgb, var(--evoe-accent) 22%, rgba(132, 145, 172, 0.45));
  border-radius: var(--wc-form-border-radius, 10px);
  font-size: 14px;
  color: var(--evoe-text-strong);
  background: var(--wc-content-bg, rgba(255, 255, 255, 0.85));
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.evoe__input:hover {
  background: var(--evoe-surface-strong);
}

.evoe__input:focus-visible {
  outline: none;
  border-color: var(--evoe-accent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--evoe-accent) 42%, transparent),
    0 0 0 4px color-mix(in srgb, var(--evoe-accent) 25%, transparent);
  background: var(--wc-content-bg, rgba(255, 255, 255, 0.95));
}

/* Number input: show spinner controls */
.evoe__input[type="number"] {
  -moz-appearance: number-input;
}

/* Checkbox toggle */
.evoe__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--evoe-text-strong);
}

.evoe__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--evoe-accent);
}

/* Radio group */
.evoe__radio {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.evoe__radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--evoe-text-strong);
}

.evoe__radio input[type="radio"] {
  accent-color: var(--evoe-accent);
}

/* Select / text fills the grid column */
.evoe__input[type="text"],
select.evoe__input {
  text-align: left;
}

/* Perks / badges row – shared base */
.evoe__perks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-top: 1px solid var(--evoe-separator);
  background: rgba(255, 255, 255, 0.26);
}

/* Static badges (always visible, no variation needed) */
.evoe__perks--static {
  border-top: none;
  padding-top: 2px;
  padding-bottom: 12px;
  background: transparent;
}

/* Dynamic badges (shown only when variation condition matches) */
.evoe__perks--dynamic {
  padding: 8px 18px;
  border-top: none;
  background: transparent;
}

/* Variation-level perks (set per-variation by admin) */
.evoe__perks--variation {
  border-top: 1px solid var(--evoe-separator);
  background: rgba(255, 255, 255, 0.3);
}

/* Badge pill */
.evoe__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 640;
  background: rgba(255, 255, 255, 0.58);
  color: var(--evoe-text-strong);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.evoe__badge::before {
  content: "✓";
  font-size: 11px;
  color: currentColor;
  font-weight: 800;
}

/* Perk preview — hint lines shown before a variation is selected */
.evoe__perk-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 18px;
  border-top: 1px solid var(--evoe-separator);
  background: rgba(255, 255, 255, 0.22);
}

.evoe__perk-hint {
  font-size: 12px;
  color: var(--evoe-text-muted);
  line-height: 1.45;
}

.evoe__perk-hint::before {
  content: "✦ ";
  color: currentColor;
  font-size: 10px;
}

/* Variation offerings preview — shows what each variation offers */
.evoe__variation-offerings {
  padding: 11px 18px;
  border-top: 1px solid var(--evoe-separator);
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evoe__offering-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.85;
  margin-bottom: 2px;
  color: var(--evoe-text-muted);
}

.evoe__offering-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--evoe-text-strong);
}

.evoe__offering-label {
  font-weight: 620;
  white-space: nowrap;
}

.evoe__offering-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.64);
  white-space: nowrap;
}

/* Summary block for selected customizations */
.evoe__summary {
  padding: 16px 20px;
  border-top: 2px solid var(--evoe-separator);
  margin-top: 2px;
  background: linear-gradient(
    to bottom right,
    var(--evoe-accent-softer),
    rgba(255, 255, 255, 0.5) 40%,
    rgba(255, 255, 255, 0.28)
  );
  border-radius: 0 0 17px 17px;
  color: var(--evoe-text-strong);
  font-size: 13px;
  line-height: 1.55;
}

.evoe__summary-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evoe__summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evoe__summary-item--total {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed color-mix(in srgb, var(--evoe-accent) 38%, transparent);
}

.evoe__summary-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--evoe-text-muted) 25%, var(--evoe-accent));
}

.evoe__summary-body {
  font-size: 13px;
  font-weight: 600;
}

.evoe__summary-total-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
}

.evoe__summary-total-caption {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--evoe-accent) 72%, var(--evoe-text-muted));
}

.evoe__summary-math {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.evoe__summary-eq {
  opacity: 0.45;
  font-weight: 700;
}

.evoe__summary-money {
  font-weight: 800;
  color: color-mix(in srgb, var(--evoe-accent) 55%, var(--evoe-text-strong));
}

.evoe__summary-money--delta {
  color: color-mix(in srgb, var(--evoe-accent) 78%, var(--evoe-text-strong));
}

.evoe__summary-money--grand {
  font-size: 1.18em;
  font-weight: 800;
  /* Match the on-sale price emphasis from the active theme */
  color: var(--evoe-accent);
}

/* Hidden (by condition / override) */
.evoe__hidden {
  display: none !important;
}

@supports not (color: color-mix(in srgb, black 50%, white)) {
  .evoe {
    --evoe-accent-soft: rgba(150, 88, 138, 0.14);
    --evoe-accent-softer: rgba(150, 88, 138, 0.09);
  }
}

@media (prefers-color-scheme: dark) {
  .evoe {
    --evoe-text-strong: rgba(244, 247, 255, 0.96);
    --evoe-text-muted: rgba(217, 223, 238, 0.82);
    --evoe-surface: linear-gradient(145deg, rgba(30, 35, 49, 0.7), rgba(18, 23, 34, 0.6));
    --evoe-surface-soft: rgba(33, 40, 56, 0.56);
    --evoe-surface-strong: rgba(43, 52, 72, 0.72);
    --evoe-border: rgba(255, 255, 255, 0.14);
    --evoe-separator: rgba(182, 196, 225, 0.2);
    --evoe-focus: color-mix(in srgb, var(--evoe-accent) 55%, rgba(129, 181, 255, 1));
    --evoe-accent-soft: rgba(244, 196, 255, 0.12);
    --evoe-accent-softer: rgba(244, 196, 255, 0.08);
    box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* Responsive: stack label + control on narrow */
@media (max-width: 600px) {
  .evoe {
    margin-top: 16px;
    border-radius: 15px;
  }

  .evoe__title,
  .evoe__opt,
  .evoe__perks,
  .evoe__perks--dynamic,
  .evoe__perk-preview,
  .evoe__variation-offerings,
  .evoe__summary,
  .evoe__notice--custom-note {
    padding-left: 14px;
    padding-right: 14px;
  }

  .evoe__control {
    justify-self: stretch;
  }
}