/* ==========================================================================
   gradcom-select.css
   Styles for the enhanced <select> widget (see gradcom-select.js).

   Scoping rule: every selector is namespaced under .gradcom-select, so this
   file cannot affect Select2, Gravity Forms, or any other plugin's markup.
   Load order does not matter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Defined on :root so they can be overridden per-context if needed, e.g.
   .single-product .gradcom-select { --gradcom-select-field-h: 48px; }

   Every brand value is remapped onto the `--gradcom-*` tokens
   GradCommerce\Settings\DesignTokens emits from the rep's Branding settings,
   so this widget repaints with the rest of the storefront and no rep colour
   is duplicated here. The supplied literals are kept only as fallbacks for a
   page where DesignTokens has not run.

   `--gradcom-select-radius` deliberately follows the rep's own **Button
   radius** setting rather than the widget's shipped 12px: a 12px popup beside
   4px buttons and 4px input fields reads as two different design systems.
   Change the setting, and buttons, fields and dropdowns all move together.
   -------------------------------------------------------------------------- */
:root {
  --gradcom-select-navy:        var(--gradcom-color-primary, #232a5c);
  --gradcom-select-navy-deep:   var(--gradcom-color-primary, #1b2149);
  --gradcom-select-navy-tint:   var(--gradcom-surface-alt, #eef0f8);
  --gradcom-select-gold:        var(--gradcom-color-accent, #c9a227);
  --gradcom-select-surface:     var(--gradcom-surface, #ffffff);
  --gradcom-select-border:      var(--gradcom-border, #e0dfd6);
  --gradcom-select-border-firm: var(--gradcom-border, #cfcec3);
  --gradcom-select-ink:         var(--gradcom-ink, #3a3a3a);
  --gradcom-select-ink-muted:   var(--gradcom-ink-muted, #6d6d66);

  --gradcom-select-radius:      var(--gradcom-radius, 12px);
  --gradcom-select-field-h:     52px;
  --gradcom-select-font-size:   1rem;

  --gradcom-select-shadow-pop:  0 4px 8px rgba(27, 33, 73, .06), 0 18px 44px rgba(27, 33, 73, .16);
  --gradcom-select-ease:        cubic-bezier(.32, .72, 0, 1);
  --gradcom-select-z:           60;
}

/* --------------------------------------------------------------------------
   2. WRAPPER
   Injected by JS around the original <select>.
   -------------------------------------------------------------------------- */
.gradcom-select {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* --------------------------------------------------------------------------
   3. NATIVE CONTROL
   Stays in the DOM as the source of truth for form submission and for
   WooCommerce's variation script. Visually hidden once enhanced, but NOT
   display:none and NOT disabled — Woo reads and writes it.
   Kept focusable-adjacent (not aria-hidden) so validation messages anchor.

   The rule hides **everything inside the wrapper that is not ours**, not just
   the `<select>`.

   As shipped this was `> select`, which assumes the select stays a direct child
   of the wrapper. It does not. Avada decorates selects itself, and its script
   runs AFTER this widget: it inserts `div.avada-select-parent` between the
   wrapper and the select and adds its own `.select-arrow`. The direct-child
   rule then matched nothing, the native control reappeared wearing the theme's
   styling, and every package page rendered two dropdowns per option —
   the theme's above ours. Measured on the live page: 2 of 4 enhanced controls
   had been re-wrapped (the WooCommerce variation selects; the plugin's own fit
   selects and the home-page picker were untouched, which is why only package
   pages showed it).

   Written as "hide anything that is not the trigger or the popup" rather than
   naming Avada, because the failure is structural: any theme or plugin that
   decorates a `<select>` after this one runs produces the same result, and a
   selector naming one vendor would have to be extended for each new one.
   -------------------------------------------------------------------------- */
.gradcom-select[data-enhanced="true"] select,
.gradcom-select[data-enhanced="true"] > *:not(.gradcom-select__button):not(.gradcom-select__list) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

/* Before JS runs (or if it fails), the native select is untouched and usable. */

/* --------------------------------------------------------------------------
   4. TRIGGER
   -------------------------------------------------------------------------- */
.gradcom-select__button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--gradcom-select-field-h);
  margin: 0;
  padding: 0 16px;
  background: var(--gradcom-select-surface);
  border: 1px solid var(--gradcom-select-border-firm);
  border-radius: var(--gradcom-select-radius);
  color: var(--gradcom-select-navy);
  font: inherit;
  font-size: var(--gradcom-select-font-size);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gradcom-select__button:hover { border-color: var(--gradcom-select-navy); }

.gradcom-select__button:focus-visible {
  outline: 3px solid var(--gradcom-select-gold);
  outline-offset: 2px;
  border-color: var(--gradcom-select-navy);
}

.gradcom-select__button[aria-expanded="true"] {
  border-color: var(--gradcom-select-navy);
  box-shadow: 0 0 0 3px rgba(35, 42, 92, .10);
}

/* Placeholder / "Choose an option" reads softer than a real selection */
.gradcom-select__button[data-placeholder="true"] .gradcom-select__value {
  color: var(--gradcom-select-ink-muted);
  font-weight: 600;
}

.gradcom-select__value {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gradcom-select__chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--gradcom-select-navy);
  transition: transform .22s var(--gradcom-select-ease);
}
.gradcom-select__button[aria-expanded="true"] .gradcom-select__chevron { transform: rotate(180deg); }

/* Disabled state — Woo disables variation selects while it fetches data */
.gradcom-select[data-disabled="true"] .gradcom-select__button {
  background: var(--gradcom-surface-alt, #f4f4f0);
  border-color: var(--gradcom-select-border);
  color: var(--gradcom-select-ink-muted);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   5. POPUP LIST
   -------------------------------------------------------------------------- */
.gradcom-select__list {
  position: absolute;
  z-index: var(--gradcom-select-z);
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--gradcom-select-surface);
  border: 1px solid var(--gradcom-select-border);
  border-radius: var(--gradcom-select-radius);
  box-shadow: var(--gradcom-select-shadow-pop);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.99);
  transform-origin: top center;
  transition: opacity .18s var(--gradcom-select-ease),
              transform .18s var(--gradcom-select-ease),
              visibility 0s linear .18s;
}

/* Flip upward when JS detects there isn't room below */
.gradcom-select[data-drop="up"] .gradcom-select__list {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(.99);
}

.gradcom-select[data-open="true"] .gradcom-select__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

/* Reset theme <li> styles that WordPress themes love to inject.

   Deliberately does NOT zero padding. It used to, and at (0,1,1) that blanket
   `padding: 0` silently beat `.gradcom-select__option`'s own (0,1,0) padding —
   so every option row in every dropdown on the site collapsed to bare text
   height. Measured on the live package page: 21px rows against a 44px target,
   less than half. The two <li> shapes this widget renders both set their own
   padding below, at a specificity that now clears both this rule and a theme's. */
.gradcom-select__list li { margin: 0; list-style: none; }
.gradcom-select__list li::before,
.gradcom-select__list li::marker { content: none; }

/* --------------------------------------------------------------------------
   6. OPTIONS
   -------------------------------------------------------------------------- */
/* `.gradcom-select__list` prefix is for specificity, not scoping: (0,2,0) so a
   theme rule of the shape `.entry-content li { padding: … }` cannot flatten a
   tap target. Vertical padding is sized so the row clears 44px — 12px + 12px on
   top of a 1.35 line-height at 1rem is 45.6px. Changing the padding without
   re-checking that sum is how this regresses. */
.gradcom-select__list .gradcom-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 8px;
  color: var(--gradcom-select-ink);
  font-size: var(--gradcom-select-font-size);
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, color .12s ease;
}

/* Mouse hover and keyboard highlight share one treatment on purpose */
.gradcom-select__option:hover,
.gradcom-select__option.is-active {
  background: var(--gradcom-select-navy-tint);
  color: var(--gradcom-select-navy-deep);
}

.gradcom-select__option[aria-selected="true"] {
  color: var(--gradcom-select-navy);
  font-weight: 700;
}

/* Out-of-stock / unavailable variations */
.gradcom-select__option[aria-disabled="true"] {
  color: var(--gradcom-select-ink-muted);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--gradcom-select-border);
}
.gradcom-select__option[aria-disabled="true"]:hover { background: transparent; color: var(--gradcom-select-ink-muted); }

/* The placeholder row ("Find your school…", "Choose an option") is `disabled` so
   it cannot be re-chosen, and it must stay that way — but it is not an
   unavailable choice, and striking it through reads as sold out. Only the
   line-through is dropped; it keeps the muted colour and stays non-interactive.
   The flag is set in gradcom-select.js, which can see the option's value. */
.gradcom-select__option[data-placeholder="true"] {
  text-decoration: none;
}

/* Check mark: selection is signalled by glyph + weight, not colour alone */
.gradcom-select__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--gradcom-select-gold);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .14s ease, transform .14s var(--gradcom-select-ease);
}
.gradcom-select__option[aria-selected="true"] .gradcom-select__check { opacity: 1; transform: scale(1); }

.gradcom-select__option-text { flex: 1 1 auto; }

/* Optional leading thumbnail (the school logo in the "Find your school" picker).
   Fixed square with `contain`, so a crest, a wordmark and a photo all sit on the
   same grid instead of each setting its own row height. `flex: 0 0 auto` keeps it
   from being squeezed by a long school name. */
.gradcom-select__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

/* On the closed trigger it sits between the padding and the label. */
.gradcom-select__button .gradcom-select__icon {
  width: 24px;
  height: 24px;
}

.gradcom-select__meta {
  display: block;
  color: var(--gradcom-select-ink-muted);
  font-size: .82rem;
  font-weight: 400;
}
.gradcom-select__option:hover .gradcom-select__meta,
.gradcom-select__option.is-active .gradcom-select__meta { color: var(--gradcom-select-ink-muted); }

/* Optional <optgroup> heading — same specificity reasoning as the option row. */
.gradcom-select__list .gradcom-select__group {
  padding: 12px 14px 6px;
  color: var(--gradcom-select-ink-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: default;
}

/* --------------------------------------------------------------------------
   7. WOOCOMMERCE / THEME CONTAINER FIXES
   Variation selects sit inside <table class="variations">, and product tabs
   and accordions often clip overflow. Without this the popup gets cut off.
   -------------------------------------------------------------------------- */
.woocommerce table.variations,
.woocommerce table.variations td,
.woocommerce table.variations tr,
.woocommerce div.product form.cart,
.woocommerce-variation-add-to-cart {
  overflow: visible;
}

/* Give the open field a stacking context above sibling rows and sticky bars */
.gradcom-select[data-open="true"] { z-index: calc(var(--gradcom-select-z) + 1); }
.woocommerce table.variations td.value:has(.gradcom-select[data-open="true"]) { position: relative; z-index: 5; }

/* --------------------------------------------------------------------------
   8. PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gradcom-select__list,
  .gradcom-select__chevron,
  .gradcom-select__option,
  .gradcom-select__check { transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .gradcom-select__button,
  .gradcom-select__list { border: 1px solid CanvasText; }
  .gradcom-select__option.is-active,
  .gradcom-select__option:hover {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

/* Small screens: fill the field, keep tap targets ≥44px */
@media (max-width: 480px) {
  .gradcom-select { --gradcom-select-field-h: 50px; }
  .gradcom-select__list .gradcom-select__option { padding-top: 14px; padding-bottom: 14px; }
}