/* Reserve Sparks configurator (site/pricing/reserved/) form styling.
 * Split out of site/assets/site.css on 2026-09-13: that file is served with
 * a one-year immutable cache, so a new selector added there without bumping
 * its ?v= query never reaches a returning visitor. This file is referenced
 * only from site/pricing/reserved/index.html, so bumping its own ?v= on an
 * edit is enough -- it never risks stranding a rule for any other page.
 *
 * 2026-09-13b: rebuilt as a console-style configurator (option cards +
 * quantity stepper + sticky summary) instead of a plain <select> form; the
 * email-fallback fields below reuse the same #reserve-form-ish field rules.
 */
#reserve-email-form .field { margin-bottom: 14px; }
#reserve-email-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
#reserve-email-form input, #reserve-email-form textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-size: 13.5px;
  background: var(--card); color: var(--text); border: 1px solid var(--border-hi);
  border-radius: 8px;
}
#reserve-email-form textarea { min-height: 90px; resize: vertical; }
#reserve-email-form input:focus, #reserve-email-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
#reserve-email-form .hp { position: absolute; left: -9999px; }
#reserve-status { font-size: 13px; margin: 4px 0 12px; min-height: 1em; }
#reserve-status.ok { color: var(--accent); }
#reserve-status.err { color: var(--amber); }

/* The four-step "how it works" list, page-local like the rest of this file. */
.reserve-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: reserve-step; }
.reserve-steps li {
  position: relative; padding: 4px 0 4px 40px; margin-bottom: 12px; font-size: 14.5px;
}
.reserve-steps li::before {
  counter-increment: reserve-step; content: counter(reserve-step);
  position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border-hi); color: var(--accent);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}

/* Configurator layout: options on the left, sticky quote summary on the
 * right. Collapses to one column (summary un-stuck, falls below) under
 * 900px so nothing needs horizontal scroll on mobile. */
.reserve-configurator { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
.reserve-options .option-group { border: 0; margin: 0 0 26px; padding: 0; }
.reserve-options .option-group legend {
  padding: 0; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; color: var(--text);
}
@media (max-width: 900px) {
  .reserve-configurator { grid-template-columns: 1fr; }
  .reserve-summary { position: static; }
}

/* Option cards: a visually-hidden radio driving a styled label, echoing the
 * console's own selectable-card pattern. Keyboard-accessible via the
 * radio's native focus ring (label[for] keeps click/tap working too). */
.option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.option-card-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.option-card {
  display: flex; flex-direction: column; gap: 3px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px;
}
.option-card-input:checked + .option-card {
  border-color: var(--accent); background: var(--accent-soft);
}
.option-card-input:focus-visible + .option-card {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.option-card .title { font-size: 14px; font-weight: 650; color: var(--text); }
.option-card .desc { font-size: 12.5px; color: var(--text-dim); }
.option-card .price { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 2px; }

/* Quantity stepper. */
.qty-stepper { display: flex; align-items: center; gap: 10px; }
.qty-stepper button {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border-hi);
  background: var(--card); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer;
}
.qty-stepper button:hover { background: var(--card-hover); }
.qty-stepper input {
  width: 64px; height: 38px; text-align: center; font: inherit; font-size: 14px;
  background: var(--card); color: var(--text); border: 1px solid var(--border-hi); border-radius: 8px;
}
.qty-stepper input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

/* Sticky summary panel. */
.reserve-summary {
  position: sticky; top: 88px; background: var(--card); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: 22px;
}
.reserve-summary .spec-row dd { text-align: right; color: var(--text); font-weight: 600; }
.reserve-summary-monthly { margin: 14px 0 4px; }
.reserve-summary-monthly .label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.reserve-summary-monthly .amount { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.reserve-savings { font-size: 13px; color: var(--accent); font-weight: 600; margin: 2px 0 12px; }

/* 2026-09-13c additions: the "3 to 8" segmented sub-control, term pills with
 * a headline monthly price and save badge, the collapsed/expanded start
 * picker, and the email-fallback <details> disclosure. */

/* Segmented 3 / 4 / 8 control revealed under the "3 to 8 Sparks" card. */
.segmented { display: flex; gap: 0; margin-top: 10px; border: 1px solid var(--border-hi); border-radius: 8px; overflow: hidden; width: fit-content; }
.segmented-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.segmented-option {
  display: block; padding: 8px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--text-dim); border-right: 1px solid var(--border-hi);
}
.segmented-option:last-of-type { border-right: 0; }
.segmented-input:checked + .segmented-option { background: var(--accent-soft); color: var(--accent); }
.segmented-input:focus-visible + .segmented-option { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Term pills: same option-card base, with a headline price, a smaller
 * effective-rate sub-line and a save badge instead of the plain desc/price
 * pairing used elsewhere. */
.term-pills .option-card .title { font-size: 17px; font-weight: 800; }
.term-pills .option-card .badge {
  display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 7px; width: fit-content;
}

/* Collapsed one-line start summary + its "Change" link. */
.start-collapsed { font-size: 13.5px; margin: 0; }
.link-btn {
  background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: inherit;
  text-decoration: underline; cursor: pointer;
}
#rf-start {
  width: 100%; height: 42px; padding: 9px 12px; font: inherit; font-size: 13.5px;
  background: var(--card); color: var(--text); border: 1px solid var(--border-hi); border-radius: 8px;
}
#rf-start:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Email-fallback disclosure. */
.reserve-email-disclosure { margin-top: 14px; }
.reserve-email-disclosure summary {
  cursor: pointer; font-size: 13px; color: var(--text-dim); text-align: center; list-style: none;
}
.reserve-email-disclosure summary::-webkit-details-marker { display: none; }
.reserve-email-disclosure summary:hover { color: var(--text); }
.reserve-email-disclosure form { margin-top: 14px; }