/* ==========================================================================
   Plaza Field – text fields, textarea, select
   Floating label "1a" (3px notch strip) + inline errors "2a".
   Label logic is pure CSS (:has + :placeholder-shown + :autofill).
   Without :has() support the label simply stays visible – nothing breaks.
   Token fallbacks keep the file usable outside the Plaza token sheet.
   ========================================================================== */

.plaza-field {
  --plaza-field-border: var(--input-border, #c4c4c4);
  --plaza-field-notch: var(--white, #fff);
  --plaza-field-ring: 0 0 #0000;
  --plaza-field-fill: 0 0 #0000;
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans, Gilroy, sans-serif);
}

/* Optional: border that passes WCAG 1.4.11 (3.5:1 instead of 1.74:1) */
.plaza-fields--aa .plaza-field,
.plaza-field--aa { --plaza-field-border: var(--muted, #898989); }

/* ---------------------------------------------------------------- control */
.plaza-field__control {
  display: block;
  width: 100%;
  height: var(--input-height, 52px);
  margin: 0;
  padding: 0 12px 0 16px;
  border: 1px solid var(--plaza-field-border);
  border-radius: 0;
  background: var(--white, #fff);
  box-shadow: var(--plaza-field-ring), var(--plaza-field-fill);
  color: var(--black, #000);
  font: 500 18px/normal var(--font-sans, Gilroy, sans-serif);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.plaza-field__control {
  height: auto;
  min-height: 120px;
  padding: 18px 12px 12px 16px;
  color: var(--text-primary, #3a3a3a);
  line-height: 24px;
  resize: vertical;
}
/* placeholder = label while empty, so it must pass 4.5:1 (#767676) */
.plaza-field__control::placeholder { color: var(--upsell-muted, #767676); opacity: 1; }

/* Focus: 2px pink edge (border + 1px outer shadow), flush with the frame,
   so it never runs through the label like a 2px-offset ring would. */
.plaza-field__control:focus,
.plaza-field__control:focus-visible,
.plaza-field.is-focus .plaza-field__control {
  outline: none;
  border-color: var(--primary-color, #ff0083);
  --plaza-field-ring: 0 0 0 1px var(--primary-color, #ff0083);
}

/* Autofill: keep the field white (Chrome/Safari paint it blue, Firefox yellow).
   The empty animation is the signal plaza-field.js / plaza-dropdown.js listen for:
   Chrome and Safari often skip input/change when they fill a field. */
@keyframes plaza-field-autofill { from {} to {} }
.plaza-field__control:-webkit-autofill,
.plaza-field.is-autofill .plaza-field__control {
  --plaza-field-fill: inset 0 0 0 100px var(--white, #fff);
  -webkit-text-fill-color: var(--black, #000);
}
.plaza-field__control:-webkit-autofill {
  animation-name: plaza-field-autofill;
  animation-duration: 0.01s;
}
.plaza-field__control:autofill {
  --plaza-field-fill: inset 0 0 0 100px var(--white, #fff);
  filter: none;
}

.plaza-field__control[readonly] {
  --plaza-field-border: var(--stroke, #ededed);
  color: var(--text-primary, #3a3a3a);
  cursor: default;
}

/* ---------------------------------------------------------------- label */
.plaza-field__label {
  position: absolute;
  z-index: 1;
  top: -7px;
  left: 12px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  color: var(--text-primary, #3a3a3a);
  font: 500 12px/14px var(--font-sans, Gilroy, sans-serif);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;               /* hidden visually only – screen readers still read it */
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, color .15s ease;
  /* Gap in the border, painted with the label so it sits above the control's
     border and its 1px focus ring (outer shadow, or the inset ring while a
     dropdown is open). A 3px strip left that ring through the text. */
  background-color: transparent;
  background-image: linear-gradient(var(--plaza-field-notch), var(--plaza-field-notch));
  background-repeat: no-repeat;
  background-position: left 4px;
  background-size: 100% 6px;
}
/* Same gap for engines that paint the control's box-shadow above a label background.
   z-index -1 keeps the strip behind the text, inside this label's stacking context. */
.plaza-field__label::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--plaza-field-notch);
}
/* WooCommerce appends these inside <label>; the input already carries required */
.plaza-field__label .required,
.plaza-field__label abbr { display: none; }

/* float: field has a value */
.plaza-field:has(.plaza-field__control:not(:placeholder-shown)) .plaza-field__label {
  opacity: 1;
  transform: none;
}
.plaza-field:has(.plaza-field__control:-webkit-autofill) .plaza-field__label { opacity: 1; transform: none; }
.plaza-field:has(.plaza-field__control:autofill) .plaza-field__label { opacity: 1; transform: none; }
.plaza-field.is-autofill .plaza-field__label,
.plaza-field.is-filled .plaza-field__label,
.plaza-field.is-error .plaza-field__label,
.plaza-field.woocommerce-invalid .plaza-field__label { opacity: 1; transform: none; }

/* a select still on its empty option counts as empty
   (a disabled field with a value keeps its label) */
.plaza-field:not(.is-error):has(option[value=""]:checked) .plaza-field__label {
  opacity: 0;
  transform: translateY(6px);
}

.plaza-field:where(:has(.plaza-field__control:focus), .is-focus) .plaza-field__label {
  color: var(--pink-dark, #b3005c);
}

/* no :has() → label always floats, placeholder steps aside */
@supports not selector(:has(*)) {
  .plaza-field__label { opacity: 1; transform: none; }
  .plaza-field__control::placeholder { color: transparent; }
}

/* ---------------------------------------------------------------- select */
select.plaza-field__control {
  height: var(--select-height, 59px);
  padding: 0 48px 0 16px;
  background: var(--white, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M15.833 7.5 10 13.333 4.167 7.5' stroke='%233A3A3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 20px 20px;
  color: var(--text-primary, #3a3a3a);
  font-size: 16px;
  text-overflow: ellipsis;
  cursor: pointer;
}
select.plaza-field__control:has(option[value=""]:checked) { color: var(--upsell-muted, #767676); }
select.plaza-field__control option { color: var(--text-primary, #3a3a3a); }
input.plaza-field__control:disabled,
textarea.plaza-field__control:disabled,
select.plaza-field__control:disabled {
  background-color: var(--rule-light, #eee);
  color: var(--upsell-muted, #767676);
  opacity: 1;
  cursor: not-allowed;
}

/* leading pink icon (PDP attribute selects) */
.plaza-field--icon .plaza-field__control { padding-left: 48px; }
.plaza-field__icon {
  position: absolute;
  z-index: 1;
  top: calc(var(--select-height, 59px) / 2);
  left: 27px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* PDP: borderless white select on the grey page; label sits on a full white plate */
.plaza-field--pdp .plaza-field__control { border-color: transparent; }
.plaza-field--pdp .plaza-field__control:focus,
.plaza-field--pdp.is-focus .plaza-field__control {
  border-color: var(--primary-color, #ff0083);
}
.plaza-field--pdp .plaza-field__label { left: 21px; padding: 0 6px; }
.plaza-field--pdp .plaza-field__label::before { top: 0; height: 100%; }

/* ---------------------------------------------------------------- error (2a) */
.plaza-field.is-error .plaza-field__control,
.plaza-field.woocommerce-invalid .plaza-field__control {
  border-color: var(--wc-red, #a00);
}
.plaza-field--pdp.is-error .plaza-field__control { border-color: var(--error-outline, #f00); }
.plaza-field.is-error .plaza-field__control:focus,
.plaza-field.is-error.is-focus .plaza-field__control {
  border-color: var(--wc-red, #a00);
  --plaza-field-ring: 0 0 0 1px var(--wc-red, #a00);
}
.plaza-field.is-error .plaza-field__label,
.plaza-field.woocommerce-invalid .plaza-field__label { color: var(--error, #b81c22); }
/* label already floats in red – don't repeat it inside the empty field */
.plaza-field.is-error .plaza-field__control::placeholder { color: transparent; }

.plaza-field__error {
  display: block;
  margin: 6px 0 0;
  color: var(--error, #b81c22);
  font: 500 14px/18px var(--font-sans, Gilroy, sans-serif);
  text-wrap: pretty;
}
.plaza-field--pdp .plaza-field__error { margin-top: 8px; }
.plaza-field__error:empty { display: none; }

/* ---------------------------------------------------------------- WooCommerce .form-row compat */
.woocommerce form .form-row.plaza-field { padding: 0; }
.woocommerce form .form-row.plaza-field .woocommerce-input-wrapper { display: block; }
.woocommerce form .form-row.plaza-field label.plaza-field__label {
  display: block;
  margin: 0;
  line-height: 14px;
}
/* PLR-1563: WooCommerce styles `.woocommerce form .form-row .input-text` with `box-shadow: none` and, on
   :focus, `border-color: currentcolor` (0,4,1) – both beat the plain .plaza-field__control rules (0,2,0),
   so inside a form-row (checkout, account forms) the focus edge stayed black with no 1px ring.
   Same rules, one class more than WooCommerce. The error focus follows, one class above the focus rule. */
.woocommerce form .form-row.plaza-field .plaza-field__control {
  box-shadow: var(--plaza-field-ring), var(--plaza-field-fill);
}
.woocommerce form .form-row.plaza-field .plaza-field__control:focus,
.woocommerce form .form-row.plaza-field .plaza-field__control:focus-visible,
.woocommerce form .form-row.plaza-field.is-focus .plaza-field__control {
  border-color: var(--primary-color, #ff0083);
}
.woocommerce form .form-row.plaza-field.is-error .plaza-field__control:focus,
.woocommerce form .form-row.plaza-field.is-error.is-focus .plaza-field__control,
.woocommerce form .form-row.plaza-field.woocommerce-invalid .plaza-field__control:focus {
  border-color: var(--wc-red, #a00);
  --plaza-field-ring: 0 0 0 1px var(--wc-red, #a00);
}

/* ---------------------------------------------------------------- helpers */
.plaza-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- media */
@media (max-width: 767px) {
  .plaza-field__control,
  textarea.plaza-field__control { font-size: 16px; } /* ≥16px: iOS won't zoom on focus */
}
@media (prefers-reduced-motion: reduce) {
  .plaza-field__control,
  .plaza-field__label { transition: none; }
}
@media (forced-colors: active) {
  .plaza-field__control:focus { outline: 2px solid Highlight; outline-offset: 0; }
  .plaza-field__label::before { background: Canvas; }
  .plaza-field__label { background-image: linear-gradient(Canvas, Canvas); }
  .plaza-field.is-error .plaza-field__control { border-width: 2px; }
}