/* ==========================================================================
   Plaza Dropdown – styled list on top of a native <select>
   Load after plaza-field.css. The <select> stays in the form (value, name,
   autocomplete, validation); this file styles the trigger + list that
   plaza-dropdown.js puts next to it. Without the JS the native select from
   plaza-field.css is shown – nothing breaks.
   ========================================================================== */

.plaza-dropdown {
  --pdd-h: var(--input-height, 52px);   /* trigger height */
  --pdd-row: 44px;                      /* option row, ≥ 24px target (2.5.8) */
  --pdd-rows: 6.5;                      /* visible rows: the half row says "scroll for more" */
}
.plaza-field--pdp.plaza-dropdown { --pdd-h: var(--select-height, 59px); }

/* native select: stays in place for autofill + validation, invisible */
.plaza-dropdown > select,
.plaza-dropdown > .woocommerce-input-wrapper > select { /* WooCommerce wraps the control */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--pdd-h);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- trigger */
.plaza-dropdown__trigger.plaza-field__control {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--pdd-h);
  padding: 0 48px 0 16px;
  color: var(--text-primary, #3a3a3a);
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.plaza-field--icon .plaza-dropdown__trigger { padding-left: 48px; }
.plaza-dropdown__trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: 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 center / 20px;
  transition: transform .2s linear;
}
.plaza-dropdown.is-open .plaza-dropdown__trigger::after { transform: rotate(180deg); }
.plaza-dropdown__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plaza-dropdown__trigger.is-placeholder { color: var(--upsell-muted, #767676); }
.plaza-dropdown__trigger:disabled {
  background-color: var(--rule-light, #eee);
  color: var(--upsell-muted, #767676);
  cursor: not-allowed;
}

/* the field keeps its pink edge while focus is inside the open list;
   the 2px edge is drawn inside the box, so it lines up with the list */
.plaza-dropdown.is-open .plaza-dropdown__trigger {
  border-color: var(--primary-color, #ff0083);
  --plaza-field-ring: inset 0 0 0 1px var(--primary-color, #ff0083);
}
.plaza-dropdown.is-open .plaza-field__label { color: var(--pink-dark, #b3005c); }
.plaza-dropdown.is-open.is-error .plaza-dropdown__trigger {
  border-color: var(--wc-red, #a00);
  --plaza-field-ring: inset 0 0 0 1px var(--wc-red, #a00);
}

/* ---------------------------------------------------------------- panel */
.plaza-dropdown__panel {
  position: absolute;
  z-index: var(--z-dropdown, 1000);
  top: var(--pdd-h);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--white, #fff);
  border: 1px solid var(--card-border-strong, #cfcfcf);
  border-top: 0;
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .18);
  transition: opacity .15s ease, transform .15s ease;
}
.plaza-dropdown__panel[hidden] { display: none; }
.plaza-dropdown.is-up .plaza-dropdown__panel {
  top: auto;
  bottom: 100%;
  border-top: 1px solid var(--card-border-strong, #cfcfcf);
  border-bottom: 0;
  box-shadow: 0 -12px 24px -8px rgba(0, 0, 0, .18);
}
@starting-style {
  .plaza-dropdown.is-open .plaza-dropdown__panel { opacity: 0; transform: translateY(-4px); }
  .plaza-dropdown.is-open.is-up .plaza-dropdown__panel { transform: translateY(4px); }
}

/* sheet header: only on phones */
.plaza-dropdown__head { display: none; }
.plaza-dropdown__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary, #3a3a3a);
  font: 700 18px/21.6px var(--font-sans, Gilroy, sans-serif);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plaza-dropdown__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary, #3a3a3a);
  cursor: pointer;
}
.plaza-dropdown__close:hover { color: var(--primary-color, #ff0083); }

/* ---------------------------------------------------------------- search */
.plaza-dropdown__search {
  position: relative;
  flex: none;
  padding: 8px;
  border-bottom: 1px solid var(--stroke, #ededed);
}
.plaza-dropdown__search[hidden] { display: none; }
.plaza-dropdown__search > svg {
  position: absolute;
  top: 50%;
  left: 21px;
  margin-top: -9px;
  color: var(--upsell-muted, #767676);
  pointer-events: none;
}
.plaza-dropdown__input {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 12px 0 42px;
  border: 0;
  border-radius: 0;
  background: var(--line, #f5f5f5);
  color: var(--text-primary, #3a3a3a);
  font: 500 16px/normal var(--font-sans, Gilroy, sans-serif);   /* 16px: no iOS zoom */
  -webkit-appearance: none;
  appearance: none;
}
.plaza-dropdown__input::placeholder { color: var(--upsell-muted, #767676); opacity: 1; }
.plaza-dropdown__input:focus,
.plaza-dropdown__input:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--primary-color, #ff0083); }

/* ---------------------------------------------------------------- list */
.plaza-dropdown__list {
  position: relative;          /* offsetTop of options is measured against the list */
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(var(--pdd-row) * var(--pdd-rows));
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--muted, #898989) transparent;
  /* scroll shadows, CSS only: the white covers ride along with the content,
     the grey shades stay put – a shade shows only where more content hides */
  background:
    linear-gradient(var(--white, #fff) 40%, #fff0) top / 100% 28px no-repeat local,
    linear-gradient(#fff0, var(--white, #fff) 60%) bottom / 100% 28px no-repeat local,
    linear-gradient(rgba(0, 0, 0, .09), #0000) top / 100% 10px no-repeat scroll,
    linear-gradient(#0000, rgba(0, 0, 0, .09)) bottom / 100% 10px no-repeat scroll,
    var(--white, #fff);
}
.plaza-dropdown__list[hidden] { display: none; }
.plaza-dropdown__list ul { margin: 0; padding: 0; list-style: none; }

.plaza-dropdown__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  column-gap: 12px;
  min-height: var(--pdd-row);
  padding: 10px 14px 10px 16px;
  color: var(--text-primary, #3a3a3a);
  font: 500 16px/20px var(--font-sans, Gilroy, sans-serif);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.plaza-dropdown__option[hidden],
.plaza-dropdown__group[hidden],
.plaza-dropdown__sep[hidden] { display: none; }
.plaza-dropdown__text { overflow-wrap: anywhere; }
.plaza-dropdown__option.is-active {
  background: var(--pink-tint, #ffe6f2);
  color: var(--pink-dark, #b3005c);
}
.plaza-dropdown__option[aria-selected="true"] { font-weight: 600; }
.plaza-dropdown__option[aria-selected="true"]::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' fill='none'%3E%3Cpath d='M5.342 9.78a.62.62 0 0 1-.934 0L.183 5.424a.66.66 0 0 1 0-.921l.934-.963a.62.62 0 0 1 .894 0l2.884 2.932L10.99.188a.62.62 0 0 1 .894 0l.934.964a.66.66 0 0 1 0 .921z' fill='%23FF0083'/%3E%3C/svg%3E") no-repeat center / 13px 10px;
}
.plaza-dropdown__option[aria-disabled="true"] {
  color: var(--upsell-muted, #767676);
  text-decoration: line-through;
  cursor: not-allowed;
}
.plaza-dropdown__option[aria-disabled="true"].is-active { background: none; }
/* search match */
.plaza-dropdown__option mark {
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline 2px var(--primary-color, #ff0083);
  text-underline-offset: 3px;
}

/* sections: sticky headers – each header sticks only inside its own group,
   so the next one pushes it out */
.plaza-dropdown__group { margin: 0; padding: 0; }
.plaza-dropdown__group-label {
  position: sticky;
  z-index: 1;
  top: 0;
  container-type: scroll-state;
  background: var(--white, #fff);
}
.plaza-dropdown__group-label > span {
  display: block;
  padding: 14px 16px 6px;
  border-bottom: 1px solid transparent;
  color: var(--upsell-muted, #767676);
  font: 600 13px/16px var(--font-sans, Gilroy, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Chrome 133+: hairline + soft shade only while the header is stuck */
@container scroll-state(stuck: top) {
  .plaza-dropdown__group-label > span {
    border-bottom-color: var(--stroke, #ededed);
    box-shadow: 0 6px 8px -8px rgba(0, 0, 0, .3);
  }
}
.plaza-dropdown__sep {
  height: 1px;
  margin: 6px 0;
  background: var(--stroke, #ededed);
}
.plaza-dropdown__empty {
  margin: 0;
  padding: 16px;
  color: var(--upsell-muted, #767676);
  font: 500 14px/20px var(--font-sans, Gilroy, sans-serif);
  text-wrap: pretty;
}
.plaza-dropdown__empty[hidden] { display: none; }

/* ---------------------------------------------------------------- sheet (phones) */
.plaza-dropdown.is-sheet { --pdd-row: 52px; }
.plaza-dropdown.is-sheet .plaza-dropdown__panel {
  position: fixed;
  z-index: var(--z-modal, 10000);
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: calc(100% - 56px);     /* 100% = viewport (or a transformed preview frame) */
  min-width: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  border: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .12);
  transition: transform .22s ease;
}
@starting-style {
  .plaza-dropdown.is-sheet.is-open .plaza-dropdown__panel { opacity: 1; transform: translateY(100%); }
}
.plaza-dropdown.is-sheet .plaza-dropdown__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 60px;
  padding: 8px 6px 8px 16px;
}
.plaza-dropdown.is-sheet .plaza-dropdown__search { padding: 0 16px 12px; }
.plaza-dropdown.is-sheet .plaza-dropdown__search > svg { left: 29px; margin-top: -15px; }
.plaza-dropdown.is-sheet .plaza-dropdown__list { flex: 1 1 auto; max-height: none; }
.plaza-dropdown.is-sheet .plaza-dropdown__option { padding-left: 16px; padding-right: 16px; }
.plaza-dropdown__backdrop {
  position: fixed;
  z-index: calc(var(--z-modal, 10000) - 1);
  inset: 0;
  background: var(--popup-backdrop, #91919199);
}
.plaza-dropdown__backdrop[hidden] { display: none; }

@media (max-width: 767px) {
  html:has(.plaza-dropdown.is-sheet.is-open) { overflow: hidden; }
  /* data-mobile="native": the system picker on phones */
  .plaza-dropdown--native > select,
  .plaza-dropdown--native > .woocommerce-input-wrapper > select { position: static; opacity: 1; pointer-events: auto; }
  .plaza-dropdown--native > .plaza-dropdown__trigger,
  .plaza-dropdown--native > .plaza-dropdown__panel,
  .plaza-dropdown--native > .woocommerce-input-wrapper > .plaza-dropdown__trigger,
  .plaza-dropdown--native > .woocommerce-input-wrapper > .plaza-dropdown__panel { display: none; }
}

/* ---------------------------------------------------------------- a11y modes */
@media (prefers-reduced-motion: reduce) {
  .plaza-dropdown__panel,
  .plaza-dropdown__trigger::after,
  .plaza-dropdown__group-label > span { transition: none; }
}
@media (forced-colors: active) {
  .plaza-dropdown__panel { border: 1px solid CanvasText; }
  .plaza-dropdown__option.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .plaza-dropdown__group-label > span { border-bottom-color: CanvasText; }
}