/**
 * GELATIN LABS — Order Form Required-Fields Validation (Visual Layer)
 * ====================================================================
 * Marks empty <select> and Select2-wrapped THWEPO dropdowns with a
 * full-ring red outline + amber background when the JS layer flags them
 * as invalid. Provides immediate visual feedback so customers can see
 * which option they missed.
 *
 * Brand palette used:
 *   #de655e (Grapefruit)   — invalid-state outline + error pill bg
 *   #fdce31 (Golden Hour)  — amber tint on the invalid field background
 *
 * Per CLAUDE.md design rule: no edge/side accent borders. Full-ring
 * outlines only.
 *
 * Companion files:
 *   - order-form-required-fields-2026-05-18.js
 *   - gl-order-form-required-fields-2026-05-18.php (enqueue + server gate)
 *
 * Created: 2026-05-18
 */

/* Invalid <select> — full ring red outline, amber tint */
.thwepo-extra-option select.gl-required-empty,
.extra-options select.gl-required-empty {
  outline: 2px solid #de655e !important;
  outline-offset: -2px;
  background-color: rgba(253, 206, 49, 0.10) !important;
}

/* Select2-wrapped invalid state — same treatment on the visible wrapper */
.thwepo-extra-option .select2-container.gl-required-empty .select2-selection,
.extra-options .select2-container.gl-required-empty .select2-selection,
.thwepo-extra-option .select2-container.gl-required-empty .select2-selection--single,
.extra-options .select2-container.gl-required-empty .select2-selection--single {
  outline: 2px solid #de655e !important;
  outline-offset: -2px;
  background-color: rgba(253, 206, 49, 0.10) !important;
}

/* Imagegroup (icon picker) invalid state — outline the whole row */
.thwepo-extra-option tr.thwepo_imagegroup.gl-required-empty,
.extra-options tr.thwepo_imagegroup.gl-required-empty {
  outline: 2px solid #de655e !important;
  outline-offset: -2px;
  background-color: rgba(253, 206, 49, 0.08) !important;
}

/* Inline error pill — sits below the value cell of the offending row */
.gl-required-error-msg {
  display: block;
  margin-top: 6px;
  padding: 5px 12px;
  background: #de655e;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  border-radius: 3px;
  max-width: max-content;
}

/* Shake-flash animation — fires on the first invalid row at submit time */
@keyframes gl-required-flash {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.thwepo-extra-option tr.gl-required-flash,
.extra-options tr.gl-required-flash {
  animation: gl-required-flash 0.4s ease-in-out;
}

/* ------------------------------------------------------------------
   Select2 width stability
   ------------------------------------------------------------------
   Existing YP-migration CSS targets deep Select2 inner spans, which
   collapses the wrapper's computed width to the placeholder text size
   (~56px) regardless of Select2's own width: 100% inline style. That's
   the "dropdown shrinks in width" symptom — the open options panel
   inherits the trigger's narrow width and clips option text. Pinning
   the wrapper + selection to 100% of the parent value-cell width keeps
   the trigger and the open panel at full cell width whether empty or
   filled. */
.thwepo-extra-option .thwepo_select .select2-container,
.extra-options .thwepo_select .select2-container,
.thwepo-extra-option tr td.value .select2-container,
.extra-options tr td.value .select2-container {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.thwepo-extra-option .thwepo_select .select2-container .select2-selection,
.extra-options .thwepo_select .select2-container .select2-selection,
.thwepo-extra-option .thwepo_select .select2-container .select2-selection--single,
.extra-options .thwepo_select .select2-container .select2-selection--single {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Options panel — give the open dropdown a minimum width floor so it
   stays readable even on narrow cells or when Select2's auto-sizing
   misfires. */
.select2-container--open .select2-dropdown {
  min-width: 220px !important;
}