/* =============================================================
   SPORT MULTI-SELECT (assets/js/sport-select.js)
   ONE widget for every frontsite form: contact wizard, club shop
   request, footer newsletter, KitDesigner quotation dialog.

   The page renders a real <select multiple>; the script hides it
   (.os-sport-native) and shows the button + the checkbox list. The
   field is self-contained, and it COPIES the style of the fields
   around it (see "HOSTS" at the bottom: footer newsletter, club
   shop request, contact wizard, KitDesigner dialog) so it never
   looks pasted on.

   PHONE (<= 860px, the breakpoint of the quotation dialog too): the
   list is a full-screen SHEET anchored to the bottom, with its own
   title, Close and Done buttons.
   DESKTOP: a popup anchored under the field (position set inline by
   the script), title / Done hidden — a click outside closes it.
   ============================================================= */

.os-sport { position: relative; width: 100%; }
/* Wide: the field spans every column of a CSS grid host (the KitDesigner
   quotation dialog's 2-column grid). */
.os-sport--wide { grid-column: 1 / -1; }

/* The real select owns the value: it must stay in the DOM, never be
   displayed. `display:none` would drop it from the tab order AND break
   `selectedOptions` in some old browsers, so it is clipped instead. Every
   property is forced: the host stylesheets style their own selects
   (.footer-field select, .cs-field select, .cw-field select, .kd-field select)
   and would otherwise give the clipped box a border, a padding and a
   background image. */
.os-sport-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  background: none !important;
  overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ── The button (the visible field) ─────────────────────────────── */
.os-sport-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  background: #ffffff;
  border: 1px solid #d3d8e0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  color: #101828;
  text-align: left;
  cursor: pointer;
}
.os-sport-btn:hover { border-color: #b9c0cc; }
.os-sport-btn:focus-visible {
  outline: none;
  border-color: #00cbff;
  box-shadow: 0 0 0 3px rgba(0, 203, 255, .18);
}
.os-sport-btn-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-sport-btn.has-value .os-sport-btn-label { font-weight: 600; color: #101828; }
.os-sport-btn:not(.has-value) .os-sport-btn-label { color: #8a93a3; }
.os-sport-caret { flex: 0 0 auto; color: #5a6778; transition: transform .18s ease; }
.os-sport.is-open .os-sport-caret { transform: rotate(180deg); }
.os-sport-count {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #ceff00;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.os-sport.is-error .os-sport-btn { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }


/* ── The list (popup on desktop, sheet on a phone) ──────────────── */
.os-sport-pop {
  position: fixed;
  z-index: 2147483400;   /* above the KitDesigner dialog backdrop (2147483300) */
}
.os-sport-pop[hidden] { display: none; }
.os-sport-card {
  display: flex;
  flex-direction: column;
  /* `inherit` (not 100%): the POP carries the computed max-height inline
     (place()), and a percentage of an auto-height parent would limit nothing —
     the list would then run off the bottom of the screen. */
  max-height: inherit;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, .22);
  overflow: hidden;
}
.os-sport-head {
  display: none;              /* sheet only */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #eef1f5;
}
.os-sport-head-title { font-size: 15px; font-weight: 700; color: #101828; }
.os-sport-close {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: #f2f4f7; color: #475467;
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.os-sport-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }

/* The list is rendered INSIDE the field, and every host styles the labels and
   the inputs of its own form (.footer-field label/input, .cs-field label/input,
   .cw-field label/input, .kd-field input): a row of the popup would inherit
   `width: 100%`, a border, a padding, uppercase letters… The extra
   `.os-sport-pop` ancestor (class + class > class + element) plus the explicit
   resets keep the popup exactly as designed, in every host. */
.os-sport-pop .os-sport-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: #1a1a1a;
  cursor: pointer;
}
.os-sport-pop .os-sport-opt:hover { background: #f6f8fa; }
.os-sport-pop .os-sport-opt input.os-sport-input {
  width: 18px;
  height: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: #0a0a0a;
  flex: 0 0 auto;
  cursor: pointer;
}
.os-sport-pop .os-sport-opt input.os-sport-input:focus-visible {
  outline: 2px solid #00cbff;
  outline-offset: 2px;
}
.os-sport-opt-label { flex: 1 1 auto; }
.os-sport-tick { color: #0a0a0a; font-weight: 700; opacity: 0; }
/* Kept at the same specificity as the :hover above, and AFTER it: a ticked row
   stays highlighted while the pointer is on it. */
.os-sport-pop .os-sport-opt:has(input:checked) { background: rgba(206, 255, 0, .18); font-weight: 600; }
.os-sport-pop .os-sport-opt:has(input:checked) .os-sport-tick { opacity: 1; }
.os-sport-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid #eef1f5;
  background: #fbfcfd;
}
.os-sport-clear, .os-sport-done {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.os-sport-clear { border: 1px solid #d3d8e0; background: #ffffff; color: #475467; }
.os-sport-done { border: 1px solid #0a0a0a; background: #0a0a0a; color: #ceff00; }

/* ── PHONE: a full-screen sheet, anchored to the bottom ─────────── */
@media (max-width: 860px) {
  .os-sport-pop--sheet {
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: rgba(16, 24, 40, .45);
  }
  .os-sport-pop--sheet .os-sport-card {
    width: 100%;
    max-height: 86vh;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    animation: os-sport-sheet-in 220ms cubic-bezier(.2, .8, .25, 1);
  }
  .os-sport-pop--sheet .os-sport-head { display: flex; }
  .os-sport-pop--sheet .os-sport-list { padding: 8px 10px 4px; }
  .os-sport-pop--sheet .os-sport-opt { padding: 14px 12px; font-size: 15px; }
  .os-sport-pop .os-sport-opt input.os-sport-input { width: 22px; height: 22px; }
  .os-sport-pop--sheet .os-sport-actions { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .os-sport-pop--sheet .os-sport-done { flex: 1 1 auto; }
}
@keyframes os-sport-sheet-in {
  from { transform: translateY(14px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── DESKTOP: no title in the popup, and it closes on an outside click ── */
@media (min-width: 861px) {
  .os-sport-pop .os-sport-head { display: none; }
  .os-sport-pop .os-sport-actions { justify-content: flex-end; }
  .os-sport-pop .os-sport-done { display: none; }
  /* Compact rows: the whole list (18 sports) must fit on a laptop screen, and
     the popup must never run off the viewport — the list scrolls instead. */
  .os-sport-list { padding: 4px; }
  .os-sport-pop .os-sport-opt { padding: 7px 10px; font-size: 13px; }
  .os-sport-pop .os-sport-opt input.os-sport-input { width: 16px; height: 16px; }
  .os-sport-actions { padding: 8px 10px; }
  .os-sport-clear, .os-sport-done { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
}

/* Touch devices: 16px keeps the mobile browsers from zooming the page in
   (same rule as the other frontsite fields — see kitdesigner-client.css). */
@media (pointer: coarse) {
  .os-sport-btn { font-size: 16px; }
  .os-sport-opt { font-size: 16px; }
}

/* =============================================================
   HOSTS — the button copies the input NEXT TO it, so the widget
   never looks pasted on. The default look above (white, #d3d8e0,
   radius 10px, 13px) is the KitDesigner quotation dialog's: its
   .kd-field inputs have exactly those metrics.

   The footer newsletter, the club shop request and the contact
   wizard each have their OWN field style, hence the variants
   below (they must stay in sync with styles.css /
   templates/pages/clubshops.php).
   ============================================================= */

/* ── Footer newsletter (.footer-field input: transparent on the dark
      footer, --border-grey, radius 2px, white text; body.light-theme →
      white card with #1a1a1a text — same two states as the input) ──── */
.footer-field .os-sport-btn {
  min-height: 0;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--border-grey);
  border-radius: 2px;
  font-size: 13.5px;
  color: var(--white);
}
.footer-field .os-sport-btn:hover { border-color: var(--volt); }
.footer-field .os-sport-btn:focus-visible {
  border-color: var(--volt);
  box-shadow: none;
}
.footer-field .os-sport-btn:not(.has-value) .os-sport-btn-label { color: var(--light-grey); }
.footer-field .os-sport-btn.has-value .os-sport-btn-label { color: var(--white); }
.footer-field .os-sport-caret { color: var(--light-grey); }
.footer-field .os-sport-count { background: var(--volt); color: var(--near-black); }
.footer-field .os-sport.is-error .os-sport-btn { border-color: #e74c3c; box-shadow: none; }

body:is(.light, .light-theme) .footer-field .os-sport-btn {
  color: #1a1a1a;
  background: #ffffff;
  border-color: #d5d5d5;
}
body:is(.light, .light-theme) .footer-field .os-sport-btn:not(.has-value) .os-sport-btn-label { color: #999999; }
body:is(.light, .light-theme) .footer-field .os-sport-btn.has-value .os-sport-btn-label { color: #1a1a1a; }
body:is(.light, .light-theme) .footer-field .os-sport-caret { color: #8a8a8a; }
body:is(.light, .light-theme) .footer-field .os-sport-count { background: #0a0a0a; color: var(--volt); }

/* ── Club shop request (.cs-field input: translucent white on the dark
      card, radius 8px, 14px, white text) ───────────────────────────── */
.cs-field .os-sport-btn {
  min-height: 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  font-size: 14px;
  color: #ffffff;
}
.cs-field .os-sport-btn:hover { border-color: rgba(255, 255, 255, .25); }
.cs-field .os-sport-btn:focus-visible {
  border-color: var(--volt);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 3px rgba(0, 203, 255, .1);
}
.cs-field .os-sport-btn:not(.has-value) .os-sport-btn-label { color: rgba(255, 255, 255, .35); }
.cs-field .os-sport-btn.has-value .os-sport-btn-label { color: #ffffff; }
.cs-field .os-sport-caret { color: rgba(255, 255, 255, .45); }
.cs-field .os-sport-count { background: var(--volt); color: var(--near-black); }
.cs-field .os-sport.is-error .os-sport-btn { border-color: #e74c3c; box-shadow: none; }

/* ── Contact wizard (.cw-field input: #fafafa, 2px border, radius 6px,
      14px — the field the wizard's own inputs use) ─────────────────── */
.cw-field .os-sport-btn {
  min-height: 0;
  padding: 12px 14px;
  background: #fafafa;
  border: 2px solid #e8e8e8;
  border-radius: 6px;
  font-size: 14px;
  color: #1a1a1a;
}
.cw-field .os-sport-btn:hover { border-color: #dcdcdc; }
.cw-field .os-sport-btn:focus-visible {
  border-color: var(--volt);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 203, 255, .08);
}
.cw-field .os-sport-btn:not(.has-value) .os-sport-btn-label { color: #999999; }
.cw-field .os-sport-btn.has-value .os-sport-btn-label { color: #1a1a1a; }
.cw-field .os-sport-caret { color: #999999; }
.cw-field .os-sport.is-error .os-sport-btn { border-color: #e74c3c; background: #fff5f5; box-shadow: none; }

/* ── KitDesigner quotation dialog: the default look, only the focus ring
      follows the dialog's own accent (like .kd-field input:focus) ──── */
.kd-quote-form .os-sport-btn:focus-visible {
  border-color: var(--kd-accent);
  box-shadow: 0 0 0 3px rgba(232, 72, 42, .12);
}