/* IN2Fitness — in2-select. Skin for the searchable combobox in
   assets/js/in2-select.js.

   Nothing here is a new colour. Every value comes from the tokens in
   assets/css/site.css (--bg-2/-3, --line, --line-2, --ink*, --accent,
   --font-mono, --space-*), so .is-ladies re-pointing --accent to teal takes
   the dropdown with it for free, exactly as it does for gx-schedule.

   The TRIGGER deliberately carries almost no skin of its own: in2-select.js
   copies the native select's own classes onto it (.gx-sched__select,
   .plans-select …), so the closed control is pixel-identical to the field it
   replaced. The fallbacks below are wrapped in :where() — zero specificity —
   so a block's own rule always wins no matter which stylesheet loads last.

   Mobile-first, like blocks/gx-schedule/style.css: the base rules ARE the
   bottom-sheet presentation, and the floating-panel desktop treatment is the
   min-width override. 90% of traffic never parses that override's effect. */

/* [hidden] is how the search filters options, and several rules below set
   display on the same elements — restate the UA rule, scoped. The panel is
   matched on its own class as well as through the wrapper: while it is open,
   in2-select.js portals it to <body> and it is no longer a descendant of
   .in2-select (see the note at .in2-select__panel). */
.in2-select [hidden],
.in2-select__panel[hidden],
.in2-select__panel [hidden] { display: none !important; }

.in2-select {
  display: block;
  position: relative;
  min-inline-size: 0;
}

/* The native <select> stays in the DOM, keeps its name and value, and still
   submits. Clipped, not display:none — display:none would drop it out of some
   older form serialisers and out of the accessibility tree in a way we cannot
   undo. This class is added by JS, so a no-JS visit keeps the plain select. */
.in2-select__native,
.in2-select__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------------------ trigger */
.in2-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3xs);
  inline-size: 100%;
  min-inline-size: 0;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
:where(.in2-select__trigger) {
  min-block-size: 48px;
  padding-inline: var(--space-2xs);
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* below 16px, iOS Safari zooms the page on focus */
}
:where(.in2-select__trigger:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.in2-select__trigger[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The plans club list holds strings like "الفيصلية رجال – الطائف". The TRIGGER
   truncates (the full text is on title=); list items never do. */
.in2-select__value {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.in2-select.is-placeholder .in2-select__value { color: var(--ink-mute); }

/* Down chevron, drawn the same way as .pcard__more summary::after. A vertical
   chevron is direction-neutral, so the border pair stays PHYSICAL — only its
   position in the flex row flips, which dir="rtl" already does. */
.in2-select__chev {
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 8px;
  margin-block-start: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s;
}
.in2-select.is-open .in2-select__chev {
  transform: rotate(225deg);
  margin-block-start: 2px;
  opacity: 1;
}

/* -------------------------------------------------------- panel: BOTTOM SHEET
   A 100-option floating panel inside a 390px viewport is a scroll trap, and
   the OS picker it would replace has no search — which is the whole feature.
   So on phones this is a sheet: full width, own scroll container, scrim
   behind, thumb-height rows. in2-select.js locks the page behind it and
   deliberately does NOT autofocus the search, so the keyboard does not cover
   the list before the visitor has seen it.

   While open the panel is moved to <body> by in2-select.js: .plans-filters is
   position:sticky with z-index:5, so anything born inside it is stuck in that
   stacking context and could never paint above .nav (z-index:100). Hence the
   flat class selectors below — none of them may depend on a .in2-select
   ancestor. */
.in2-select__panel {
  position: fixed;
  inset: 0;
  z-index: 900;          /* over .nav (100) and .cookie (200) */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.in2-select__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);   /* same veil as .terms-modal::backdrop */
}
.in2-select__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  max-block-size: 86vh;
  max-block-size: 86svh;
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  outline: none;
}

.in2-select__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-bottom: 1px solid var(--line);
}
.in2-select__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Plain × cross, two rotated rules — no icon font, nothing to download. */
.in2-select__close {
  position: relative;
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  margin-inline-end: -10px;
  border: 0;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
}
.in2-select__close::before,
.in2-select__close::after {
  content: "";
  position: absolute;
  inset-block-start: 21px;
  inset-inline-start: 13px;
  inline-size: 18px;
  block-size: 1.5px;
  background: currentColor;
}
.in2-select__close::before { transform: rotate(45deg); }
.in2-select__close::after  { transform: rotate(-45deg); }
.in2-select__close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ------------------------------------------------------------------- search */
.in2-select__searchwrap {
  display: block;
  padding: var(--space-3xs) var(--space-xs);
  border-bottom: 1px solid var(--line);
}
.in2-select__search {
  display: block;
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: var(--space-3xs);
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;   /* not cosmetic: <16px makes iOS Safari zoom on focus */
  text-align: start;
  -webkit-appearance: none;
          appearance: none;
}
.in2-select__search::placeholder { color: var(--ink-mute); opacity: 1; }
.in2-select__search:focus-visible,
.in2-select__search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* --------------------------------------------------------------------- list */
.in2-select__list {
  display: block;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-4xs);
}

.in2-select__group { display: block; }
.in2-select__grouplabel {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-4xs) var(--space-xs);
  background: var(--bg-2);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Never truncated — a club name that wraps to two lines is fine here, a club
   name cut to "الفيصلية رجال …" is not choosable. */
.in2-select__option {
  display: flex;
  align-items: center;
  position: relative;
  min-block-size: 48px;
  padding-block: var(--space-4xs);
  padding-inline: var(--space-xs) 40px;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.in2-select__option.is-active {
  background: var(--bg-3);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
body.rtl .in2-select__option.is-active { box-shadow: inset -2px 0 0 var(--accent); }
.in2-select__option[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.in2-select__option[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* Check mark on the chosen row. The tick GLYPH is direction-neutral, so its
   border pair is physical; only where it sits is logical, and inset-inline-end
   moves it to the left edge under dir="rtl" on its own. */
.in2-select__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-xs);
  inline-size: 6px;
  block-size: 11px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
}

.in2-select__empty {
  display: block;
  padding: var(--space-md) var(--space-xs);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Page behind the sheet must not scroll under the thumb. Removed on close. */
html.in2-select-lock,
html.in2-select-lock body { overflow: hidden; }

/* ---------------------------------------------------------------------- RTL */
/* Logical properties carry the flip; these are the leftovers. No Latin
   tracking on Arabic script — the convention set in site.css. */
body.rtl .in2-select__title,
body.rtl .in2-select__grouplabel,
body.rtl .in2-select__empty { letter-spacing: normal; }

/* -------------------------------------------------- >= tablet: floating panel
   Enough room for an anchored dropdown, and a mouse makes a scrim feel heavy.
   in2-select.js positions .in2-select__sheet with inline left/top/width taken
   from getBoundingClientRect(), flips it above the trigger when the viewport
   is short, and closes it if the trigger scrolls out of view. */
@media (min-width: 760px) {
  .in2-select__panel {
    position: static;
    display: block;
  }
  .in2-select__scrim,
  .in2-select__bar { display: none; }

  .in2-select__sheet {
    position: fixed;       /* re-stated by JS with the computed coordinates */
    z-index: 900;
    max-block-size: 400px;
    border: 1px solid var(--line-2);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
  .in2-select__searchwrap { padding: var(--space-4xs); }
  .in2-select__search { min-block-size: 38px; font-size: 14px; }
  .in2-select__option {
    min-block-size: 34px;
    padding-inline: var(--space-2xs) 34px;
    font-size: 14px;
  }
  .in2-select__option[aria-selected="true"]::after { inset-inline-end: var(--space-2xs); }
  .in2-select__grouplabel { padding-inline: var(--space-2xs); }
}

@media (hover: hover) {
  .in2-select__option:not([aria-disabled="true"]):hover { color: var(--ink); }
  .in2-select__close:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .in2-select__chev { transition: none; }
}