/*
 * ED Variant Confirm validation presentation.
 *
 * Presentation only. The proven confirmation/combination engine remains in
 * front.js and PrestaShop remains authoritative for all product state.
 */
.edvc-message {
  color: var(--edvc-notice-color, #b42318);
  font-family: inherit;
  font-size: var(--edvc-notice-font-size, .8125rem);
  font-weight: var(--edvc-notice-font-weight, 500);
  line-height: var(--edvc-notice-line-height, 1.3);
}

/*
 * Keep the prompt on the same visual line as the native attribute label.
 * No badge, background, border or group outline is introduced.
 */
.edvc-group-message {
  display: inline;
  max-width: 100%;
  margin-inline-start: var(--edvc-notice-inline-gap, .48em);
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: baseline;
}

.edvc-message__icon {
  display: inline-block;
  width: var(--edvc-notice-icon-size, 1.05em);
  height: var(--edvc-notice-icon-size, 1.05em);
  margin-inline-end: var(--edvc-notice-gap, .28em);
  fill: currentColor;
  overflow: visible;
  vertical-align: -.14em;
}

.edvc-message__text {
  min-width: 0;
}

/* Fallback-only global message for an unknown theme structure. */
.edvc-message:not(.edvc-group-message) {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--edvc-notice-spacing, .5rem);
}

/* Optional attention: only the icon moves, never the text or attribute group. */
[data-edvc-attention-mode="pulse"] [data-edvc-validation="true"] .edvc-message__icon {
  animation: edvc-icon-pulse .42s ease-out 1;
  transform-origin: center;
}

@keyframes edvc-icon-pulse {
  0% { opacity: .62; transform: scale(.88); }
  55% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-edvc-attention-mode="pulse"] [data-edvc-validation="true"] .edvc-message__icon {
    animation: none;
  }
}

/*
 * Availability is informational, never a navigation dead-end.
 * Both states stay selectable:
 * - unavailable: matching combination(s) exist, but PrestaShop says none are purchasable.
 * - incompatible: no combination exists with the customer's current explicit intent.
 */
[data-edvc-choice-state="unavailable"],
[data-edvc-choice-state="incompatible"] {
  opacity: .5;
}

[data-edvc-choice-state="unavailable"] .radio-label,
[data-edvc-choice-state="incompatible"] .radio-label,
[data-edvc-choice-state="unavailable"] .form-check-label,
[data-edvc-choice-state="incompatible"] .form-check-label {
  text-decoration: line-through;
}

/* Radio-backed colour/texture controls: visual-only diagonal unavailable mark. */
[data-edvc-choice-state="unavailable"] .color,
[data-edvc-choice-state="incompatible"] .color,
[data-edvc-choice-state="unavailable"] .input-color__label,
[data-edvc-choice-state="incompatible"] .input-color__label {
  position: relative;
}

[data-edvc-choice-state="unavailable"] .color::after,
[data-edvc-choice-state="incompatible"] .color::after,
[data-edvc-choice-state="unavailable"] .input-color__label::after,
[data-edvc-choice-state="incompatible"] .input-color__label::after {
  content: "";
  position: absolute;
  inset: 50% -10% auto -10%;
  border-top: 1px solid currentColor;
  transform: rotate(-45deg);
  pointer-events: none;
}

/* Native option styling is browser-dependent; these are safe progressive hints. */
option.edvc-option-unavailable,
option.edvc-option-incompatible {
  color: #777;
  background-color: #eee;
}

/* Closed native select: make the currently chosen unavailable/incompatible state obvious. */
select[data-edvc-selected-state="unavailable"],
select[data-edvc-selected-state="incompatible"] {
  background-color: #eee;
  color: #777;
}


/* Hide stale native default-combination stock feedback until explicit selection is committed. */
[data-edvc-preselection-hidden="true"] {
  display: none !important;
}

/* Suppress only a literal failed-refresh placeholder; real native feedback is untouched. */
[data-edvc-invalid-feedback="true"] {
  display: none !important;
}

/*
 * Optional price-change microinteraction.
 * PrestaShop has already rendered the authoritative new price; the module only
 * adds brief visual feedback when the rendered value actually changed.
 */
[data-edvc-price-change="fade"],
[data-edvc-price-change="pulse"] {
  display: inline-block;
  transform-origin: center;
  will-change: opacity, transform;
}

[data-edvc-price-change="fade"] {
  animation: edvc-price-fade .28s ease-out 1;
}

[data-edvc-price-change="pulse"] {
  animation: edvc-price-pulse .36s cubic-bezier(.2, .75, .25, 1) 1;
}

@keyframes edvc-price-fade {
  0% { opacity: .55; }
  100% { opacity: 1; }
}

@keyframes edvc-price-pulse {
  0% { opacity: .88; transform: scale(1); }
  48% { opacity: 1; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  [data-edvc-price-change="fade"],
  [data-edvc-price-change="pulse"] {
    animation: none;
    will-change: auto;
  }
}