/* Smokefree Sidelines Portal — dark brand palette, adapted from the First Kit Initiative look. */
.ss-portal {
  --ss-green:      #111111;
  --ss-green-dark: #000000;
  --ss-blue:       #222222;
  --ss-blue-light: #f5f5f5;
  --ss-accent:     #555555;
  --ss-bg:         #fafafa;
  --ss-border:     #dddddd;
  --ss-text:       #111111;
  --ss-muted:      #666666;
  --ss-error:      #c0392b;
  --ss-radius:     10px;

  font-family: "Helvetica Neue", Arial, sans-serif;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
  color: var(--ss-text);
  background: var(--ss-bg);
  border-radius: var(--ss-radius);
}
.ss-portal *, .ss-portal *::before, .ss-portal *::after { box-sizing: border-box; }

/* Optional admin-set header/footer banners — full-bleed within the card. */
.ss-form-banner { margin: -16px -16px 0; line-height: 0; overflow: hidden; }
.ss-form-banner img { display: block; width: 100%; height: auto; }
.ss-form-header { border-radius: var(--ss-radius) var(--ss-radius) 0 0; margin-bottom: 20px; }
.ss-form-footer { border-radius: 0 0 var(--ss-radius) var(--ss-radius); margin: 24px -16px -16px; }
.ss-portal fieldset { border: none; margin: 0; padding: 0; min-width: 0; }

/* Progress */
.ss-progress { margin-bottom: 28px; }
.ss-progress-label { font-size: 13px; color: var(--ss-muted); margin-bottom: 6px; }
.ss-progress-track { background: var(--ss-border); border-radius: 99px; height: 8px; overflow: hidden; }
.ss-progress-fill { height: 8px; background: linear-gradient(90deg, var(--ss-green), var(--ss-accent)); border-radius: 99px; transition: width .4s ease; }
.ss-step-dots { display: flex; gap: 8px; margin-top: 8px; }
.ss-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--ss-border); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .3s; }
.ss-dot.active { background: var(--ss-green); }
.ss-dot.done   { background: var(--ss-accent); }

/* Steps */
.ss-step { display: none; animation: ssFadeIn .3s ease; }
.ss-step.active { display: block; }
@keyframes ssFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ss-step h3 { font-size: 20px; color: var(--ss-green-dark); margin: 0 0 4px; border-bottom: 3px solid var(--ss-accent); padding-bottom: 8px; }
.ss-step .ss-subtitle { font-size: 13px; color: var(--ss-muted); margin: 0 0 20px; }

/* Fields */
.ss-field { margin-bottom: 18px; }
.ss-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--ss-text); }
.ss-req { color: var(--ss-error); margin-left: 2px; }
.ss-field input[type="text"], .ss-field input[type="email"], .ss-field select {
  width: 100%; padding: 12px 14px; border: 2px solid var(--ss-border); border-radius: var(--ss-radius);
  font-size: 15px; background: #fff; color: var(--ss-text); transition: border-color .2s; -webkit-appearance: none;
}
.ss-field input:focus, .ss-field select:focus { border-color: var(--ss-green); outline: none; box-shadow: 0 0 0 3px rgba(17,17,17,.15); }
.ss-field.ss-invalid input { border-color: var(--ss-error); }

/* Inline errors */
.ss-field-error { display: none; font-size: 13px; color: var(--ss-error); margin: 6px 0 10px; }
.ss-field-error.show { display: block; }
.ss-field-hint { font-size: 12px; color: #667085; margin: 5px 0 0; }
.ss-club-other { margin-top: 8px; }
.ss-portal [hidden] { display: none !important; }

/* Landing / intro content (wizard step 1) */
.ss-intro { font-size: 15px; line-height: 1.6; color: var(--ss-text); }
.ss-intro > .ss-subtitle { margin-top: 0; }
.ss-intro h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; color: var(--ss-text); }
.ss-intro p { margin: 0 0 12px; }
.ss-intro ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.ss-intro li { margin-bottom: 6px; }
.ss-intro a { color: var(--ss-green); text-decoration: underline; }
.ss-field-msg { font-size: 12px; color: var(--ss-error); margin-top: 4px; }

/* Visible keyboard focus everywhere (accessibility) */
.ss-portal a:focus-visible,
.ss-portal button:focus-visible,
.ss-portal input:focus-visible,
.ss-portal select:focus-visible,
.ss-portal textarea:focus-visible { outline: 3px solid var(--ss-accent); outline-offset: 2px; }
.ss-portal h3:focus { outline: none; }
.ss-pack-card:has(input:focus-visible) { outline: 3px solid var(--ss-accent); outline-offset: 2px; }

/* Pack cards */
.ss-pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-pack-card { position: relative; display: block; background: #fff; border: 2px solid var(--ss-border); border-radius: var(--ss-radius); padding: 16px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ss-pack-card:hover { border-color: var(--ss-accent); }
.ss-pack-card input { position: absolute; opacity: 0; }
.ss-pack-card.ss-selected { border-color: var(--ss-green); box-shadow: 0 0 0 3px rgba(17,17,17,.12); }
.ss-pack-name { display: block; font-size: 17px; font-weight: 800; color: var(--ss-green-dark); }
.ss-pack-tagline { display: block; font-size: 12px; color: var(--ss-muted); margin-bottom: 8px; }
.ss-pack-contents { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ss-text); }
.ss-pack-contents li { margin-bottom: 2px; }

/* Size grid */
.ss-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ss-size-card { background: #fff; border: 2px solid var(--ss-border); border-radius: 8px; padding: 12px; }
.ss-size-card label { font-weight: 700; font-size: 14px; margin-bottom: 6px; display: block; }
.ss-size-card .ss-size-note { font-size: 12px; color: var(--ss-muted); margin-bottom: 8px; }
.ss-size-card select { width: 100%; padding: 10px; border: 2px solid var(--ss-border); border-radius: 8px; font-size: 14px; background: #fff; }

/* Checkboxes / terms */
.ss-check-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 2px solid var(--ss-border); border-radius: 8px; padding: 12px 14px; cursor: pointer; font-size: 14px; }
.ss-check-item:has(input:checked) { border-color: var(--ss-green); background: var(--ss-blue-light); }
.ss-check-item input { accent-color: var(--ss-green); width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.ss-terms-row a { color: var(--ss-green-dark); font-weight: 700; text-decoration: underline; }

/* Review */
.ss-review-panel { background: #fff; border: 2px solid var(--ss-border); border-radius: var(--ss-radius); padding: 18px; margin-bottom: 18px; }
.ss-review-panel h4 { margin: 14px 0 8px; color: var(--ss-green-dark); font-size: 14px; text-transform: uppercase; letter-spacing: .5px; }
.ss-review-panel h4:first-child { margin-top: 0; }
.ss-review-row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.ss-review-key { font-weight: 600; min-width: 150px; color: var(--ss-muted); }

/* Buttons */
.ss-btn-row { display: flex; gap: 10px; margin-top: 24px; }
.ss-btn { padding: 13px 26px; border: none; border-radius: var(--ss-radius); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ss-btn:active { transform: scale(.97); }
.ss-btn-primary { background: linear-gradient(135deg, var(--ss-green), var(--ss-accent)); color: #fff; flex: 1; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.ss-btn-primary:hover { box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ss-btn-secondary { background: #fff; color: var(--ss-green-dark); border: 2px solid var(--ss-border); }
.ss-btn-secondary:hover { border-color: var(--ss-green); }
.ss-btn:disabled { opacity: .6 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; }

/* Banners */
.ss-success { background: #fff; border: 2px solid var(--ss-green); border-radius: var(--ss-radius); padding: 30px 24px; text-align: center; max-width: 680px; margin: 0 auto; }
.ss-success h3 { color: var(--ss-green-dark); margin-top: 0; }
.ss-info-box { background: var(--ss-blue-light); border-left: 4px solid var(--ss-green); border-radius: 0 var(--ss-radius) var(--ss-radius) 0; padding: 12px 16px; font-size: 14px; margin-bottom: 20px; color: var(--ss-text); }
.ss-info-error { border-left-color: var(--ss-error); background: #fdecea; }

@media (max-width: 480px) {
  .ss-pack-grid { grid-template-columns: 1fr; }
  .ss-size-grid { grid-template-columns: 1fr; }
  .ss-btn-row { flex-direction: column; }
  .ss-review-row { flex-direction: column; gap: 2px; }
  .ss-review-key { min-width: unset; }
}