/* checkouts/checkout3-sscom.css — the sportstars.com one-box checkout skin.
 *
 * Loaded ONLY when the host page sets `$checkout3Skin = 'sscom';` before
 * including checkout3.php, which stamps `.ss3-skin-sscom` on #Checkout. That
 * scoping is the whole point: 80 pages in this repo include checkout3.php, and
 * only the North York SPA shells asked for this look. Every rule here is
 * therefore `.ss-checkout3.ss3-skin-sscom …` and overrides checkout3.css
 * rather than replacing it — the other 78 pages keep the orange/Montserrat
 * skin they ship today, byte-identical.
 *
 * Every value below was read off the live sportstars.com checkout panel
 * (computed styles, 2026-08-17) rather than eyeballed, so the two brands render
 * the same box:
 *
 *   panel    1120px max, 1px #dad9d7, radius 16, white, pad 20 → 32, gap 24 → 28
 *   grid     1 col → 2 equal cols at 1024, gap 24 → 44, items start
 *   heading  sinter 700 clamp(22,2vw,30) uppercase #002317, leading none
 *   field    h52, 1px #dad9d7, radius 8, 16px
 *   cta      h52, radius 8, 16/600 uppercase; #15ac46 → #dad9d7/#7a7a7e off
 *   summary  radius 16, #f5f5f5, pad 20 → 24, col gap 14
 *   pill     white, 1px #dad9d7, radius 13, h26, px10, 12/600 #002317
 *
 * The SPA shell already loads `sinter` and `Inter`, and already uses #15ac46 at
 * radius 8 for its own CTAs — this is the same design system, not an import.
 */

.ss-checkout3.ss3-skin-sscom {
  --ss3-ink: #002317;
  --ss3-line: #dad9d7;
  --ss3-accent: #15ac46;
  --ss3-muted: #7a7a7e;
  --ss3-inset: #f5f5f5;
}

/* ── The box ──────────────────────────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .checkout-container {
  max-width: 1120px;
  margin: 40px auto;
  padding: 20px;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ss3-ink);
}

@media (min-width: 1024px) {
  .ss-checkout3.ss3-skin-sscom .checkout-container {
    padding: 32px;
  }
}

.ss-checkout3.ss3-skin-sscom .ss3-panel {
  border: 1px solid var(--ss3-line);
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ss-checkout3.ss3-skin-sscom .ss3-panel {
    padding: 32px;
    gap: 28px;
  }
}

/* Title left, trust marks right — one row, aligned to the top so a wrapping
   badge can't drag the heading off its baseline. */
.ss-checkout3.ss3-skin-sscom .ss3-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.ss-checkout3.ss3-skin-sscom .ss3-main-heading {
  font-family: sinter, Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ss3-ink);
  margin: 0;
}

.ss-checkout3.ss3-skin-sscom .ss3-stripe-badge {
  height: 24px;
  width: auto;
  flex: 0 0 auto;
}

/* ── Two columns: form left, summary right ────────────────────────────────
   checkout3.php keeps its .ss3-col-left / .ss3-col-right wrappers so
   checkout3.js's getElementById lookups and its stage show/hide are untouched.
   `display: contents` promotes their children to grid items, which is what
   lets the summary card sit in column 2 while the program picker it ships
   beside moves into column 1 with the form. */
.ss-checkout3.ss3-skin-sscom .ss3-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 1024px) {
  .ss-checkout3.ss3-skin-sscom .ss3-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
  }
  /* Only the RIGHT wrapper dissolves. It holds two mutually-exclusive children
     (#checkout-form-section and #payment-section) that both belong in column 1,
     and checkout3.js toggles them wholesale — so promoting them to grid items is
     the way to stack them in one cell without reordering markup.

     The LEFT wrapper stays a real box in column 2. It only ever holds the
     summary card and the Stripe note (the picker is moved into the active stage
     by ss3PlacePicker), and keeping it intact is what lets those two stack
     against each other. Dissolving it too made the note a separate grid item in
     row 2, which starts below the whole form — leaving it floating 139px under
     the card it belongs to. */
  .ss-checkout3.ss3-skin-sscom .ss3-col-right {
    display: contents;
  }
  .ss-checkout3.ss3-skin-sscom .ss3-col-right > #checkout-form-section,
  .ss-checkout3.ss3-skin-sscom .ss3-col-right > #payment-section {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .ss-checkout3.ss3-skin-sscom .ss3-col-left {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    gap: 12px;
  }
}

/* Mobile keeps checkout3.css's ordering intent — the active step first, the
   program summary after it. */
@media (max-width: 1023px) {
  .ss-checkout3.ss3-skin-sscom .ss3-col-left { order: 2; }
  .ss-checkout3.ss3-skin-sscom .ss3-col-right { order: 1; }
}

/* The stages are cards in the default skin (white, bordered, shadowed). In one
   box they'd be a card inside a card, so they sit flat on the panel instead —
   the panel border is the only border. */
.ss-checkout3.ss3-skin-sscom .checkout-section {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.ss-checkout3.ss3-skin-sscom .checkout-section h2 {
  margin-bottom: 20px;
  text-align: left;
}

/* An empty status div still occupies its margins, which opened a dead band
   between the email field and the picker. */
.ss-checkout3.ss3-skin-sscom .status-message:empty { display: none; }

.ss-checkout3.ss3-skin-sscom .form-group { margin-bottom: 20px; }
.ss-checkout3.ss3-skin-sscom .form-group:last-child { margin-bottom: 0; }

/* ── Fields ───────────────────────────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .form-group label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss3-ink);
  margin-bottom: 8px;
}

/* sportstars.com marks nothing with an asterisk — the fields it shows are the
   fields it needs, and a red star on every one of them is noise. */
.ss-checkout3.ss3-skin-sscom .required-asterisk {
  display: none;
}

.ss-checkout3.ss3-skin-sscom .form-control {
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--ss3-line);
  border-radius: 8px;
  background: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  color: var(--ss3-ink);
  box-shadow: none;
}

.ss-checkout3.ss3-skin-sscom textarea.form-control {
  height: auto;
  padding: 14px;
}

.ss-checkout3.ss3-skin-sscom .form-control:hover {
  border-color: #b9b8b5;
}

.ss-checkout3.ss3-skin-sscom .form-control:focus {
  border-color: var(--ss3-accent);
  outline: none;
  box-shadow: none;
}

.ss-checkout3.ss3-skin-sscom select.form-control {
  /* Native arrow removed so the caret matches the SPA's own selects. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23002317' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ── Primary CTA ──────────────────────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .btn-primary {
  height: 52px;
  padding: 0 32px;
  border: none;
  border-radius: 8px;
  background: var(--ss3-accent);
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
  width: 100%;
  margin-top: 0;
  transition: background-color 150ms ease;
}

.ss-checkout3.ss3-skin-sscom .btn-primary:hover { background: #119a3d; }
.ss-checkout3.ss3-skin-sscom .btn-primary:active { transform: none; }

.ss-checkout3.ss3-skin-sscom .btn-primary:disabled {
  background: var(--ss3-line);
  color: var(--ss3-muted);
  cursor: not-allowed;
}

/* Picker + button read as one control: what you're buying, then the button
   that buys it. Mirrors the cta() grouping on sportstars.com and hoopstars. */
.ss-checkout3.ss3-skin-sscom .ss3-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.ss-checkout3.ss3-skin-sscom .ss3-cta-group .form-group { margin-bottom: 0; }

/* ── Summary card ─────────────────────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .ss3-summary-card {
  background: var(--ss3-inset);
  border: none;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media (min-width: 1024px) {
  .ss-checkout3.ss3-skin-sscom .ss3-summary-card { padding: 24px; }
}

/* Nothing picked yet: sportstars.com shows no card at all, just the hint under
   the email field. Collapse rather than paint an empty grey rectangle. */
.ss-checkout3.ss3-skin-sscom .ss3-summary-card:has(.ss3-summary-empty) {
  background: none;
  padding: 0;
}

.ss-checkout3.ss3-skin-sscom .ss3-summary-empty {
  font-size: 15px;
  line-height: 18px;
  color: var(--ss3-muted);
  margin: 0;
}

.ss-checkout3.ss3-skin-sscom .ss3-summary-name {
  font-family: sinter, Inter, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--ss3-ink);
  margin: 0;
}

.ss-checkout3.ss3-skin-sscom .ss3-summary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.ss-checkout3.ss3-skin-sscom .ss3-summary-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--ss3-line);
  border-radius: 13px;
  color: var(--ss3-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 10px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.ss-checkout3.ss3-skin-sscom .ss3-summary-meta {
  font-size: 13px;
  line-height: 17px;
  color: var(--ss3-muted);
  margin: 0;
}

/* The charge. One hairline above it so the number doesn't read as another spec
   line in the list. */
.ss-checkout3.ss3-skin-sscom .ss3-price-note {
  position: relative;
  margin: 0;
  padding-top: 15px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ss3-ink);
}

.ss-checkout3.ss3-skin-sscom .ss3-price-note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ss3-line);
}

.ss-checkout3.ss3-skin-sscom .ss3-price-note strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Confirmed-email row + kebab ──────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .ss3-identity-header {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  /* flex-start, not the default skin's space-between: the kebab belongs beside
     the address it acts on, not flung to the far edge of the column. */
  justify-content: flex-start;
  gap: 4px 8px;
  font-size: 15px;
  min-height: 30px;
  margin-bottom: 20px;
}

.ss-checkout3.ss3-skin-sscom .ss3-identity-email {
  font-weight: 600;
  color: var(--ss3-ink);
}

.ss-checkout3.ss3-skin-sscom .ss3-link-btn {
  color: var(--ss3-accent);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
}

/* Kebab + its one-item menu. */
.ss-checkout3.ss3-skin-sscom .ss3-email-menu {
  position: relative;
  flex: 0 0 auto;
}

.ss-checkout3.ss3-skin-sscom .ss3-kebab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ss3-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ss-checkout3.ss3-skin-sscom .ss3-kebab-btn:hover {
  background: var(--ss3-inset);
  color: var(--ss3-ink);
}

.ss-checkout3.ss3-skin-sscom .ss3-email-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 160px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--ss3-line);
  border-radius: 8px;
  box-shadow: 0 10px 24px -12px rgba(0, 35, 23, .3);
}

.ss-checkout3.ss3-skin-sscom .ss3-email-menu-pop[hidden] { display: none; }

.ss-checkout3.ss3-skin-sscom .ss3-email-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ss3-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.ss-checkout3.ss3-skin-sscom .ss3-email-menu-item:hover { background: var(--ss3-inset); }

/* ── Payment stage ────────────────────────────────────────────────────────── */

.ss-checkout3.ss3-skin-sscom .checkout-section h2 {
  font-family: sinter, Inter, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--ss3-ink);
}

/* Payment title left, Stripe badge right, one line. Same shape as the panel
   header above it, so the two rows read as a set. */
.ss-checkout3.ss3-skin-sscom .ss3-pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ss-checkout3.ss3-skin-sscom .ss3-pay-head h2 { margin-bottom: 0; }

.ss-checkout3.ss3-skin-sscom .ss3-payment-subtitle,
.ss-checkout3.ss3-skin-sscom .ss3-secure-note {
  font-size: 13px;
  line-height: 17px;
  color: var(--ss3-muted);
  text-align: left;
}

/* The Stripe reassurance line, now under the summary card in the right column
   rather than at the foot of the payment form. */
.ss-checkout3.ss3-skin-sscom .ss3-col-left > .ss3-secure-note {
  margin: 0 2px;
  font-size: 13px;
  line-height: 17px;
  color: var(--ss3-muted);
}

/* The shield-bulleted terms list is dropped from the box on this skin (both the
   copy under the child step and the copy under the payment form). It ran to six
   paragraphs of refund, registration-fee, cancellation and uniform policy
   directly beside the card fields, which is where sportstars.com carries none.
   The copy itself is untouched in the DB and still renders on every other page
   that includes this block.
   NOTE: this is material purchase information (the reg fee is non-refundable,
   cancellation needs 4 weeks' notice). It needs to stay reachable somewhere the
   parent sees before paying — a link here, the confirmation email, or
   /terms-and-conditions. */
.ss-checkout3.ss3-skin-sscom .ss3-terms,
.ss-checkout3.ss3-skin-sscom .ss3-payment-terms {
  display: none;
}

.ss-checkout3.ss3-skin-sscom .child-select-btn {
  border-radius: 8px;
  border-color: var(--ss3-line);
  font-family: Inter, system-ui, sans-serif;
  color: var(--ss3-ink);
}

.ss-checkout3.ss3-skin-sscom .child-select-btn.selected {
  border-color: var(--ss3-accent);
  background: #eefaf1;
  color: var(--ss3-ink);
}

.ss-checkout3.ss3-skin-sscom .btn-add-child {
  border-radius: 8px;
  background: var(--ss3-ink);
  color: #fff;
}

.ss-checkout3.ss3-skin-sscom .btn-add-child:hover { background: #013d28; }