/* css/options.css — product configurator: option bindings, values, deposits.
 *
 * OWNER: W3. Created by W0 (00-contracts.md §5 [A3]).
 *
 * style.css is FROZEN — put every new option/step rule here. This sheet is
 * linked AFTER style.css in index.html, so a rule here wins by cascade order
 * without needing !important.
 *
 * W0 only ships the guards below. SINGLE_CHOICE radio affordance, exclusive
 * values, per-binding cap hints, the running line total and the deposit row are
 * W3's.
 */

/* Reserved by W0 in #screen-step-extras / #screen-confirm — invisible while
 * empty so the pre-v6 layout is byte-identical. */
#extras-hint:empty,
#extras-line-total:empty,
#confirm-deposit:empty,
#confirm-line-total:empty {
  display: none;
}

/* ===== W3: STEP HINT + RUNNING TOTAL ===== */
/* F3: this was 14px mid-gray. At 1080x1920, at arm's length, that is not a
 * hint — it is invisible, and it was the only thing explaining why taps stop
 * working at the cap. Bigger, and it changes STATE when the cap is reached.
 * The two states have identical geometry (the transparent border is reserved
 * up front) so hitting the cap never shifts the list under the guest's finger,
 * and the change is carried by weight + background + border as well as colour
 * — never by colour alone.
 *
 * Finding #4 (venue, 2026-08-11): that state used to be RED, which reads as
 * "you did something wrong". Reaching a cap breaks no rule — the guest simply
 * chose everything the step allows — so it is now blue: still a state change,
 * still unmissable, but reassurance rather than an error. Everything F3 put
 * there is deliberately untouched (the weight bump, the tint, the reserved
 * border geometry); only the hue moved. `--blue` border with `--blue-dark`
 * text is the informational pairing already used by `.cart-note`
 * (css/cart.css:180) — `--blue` alone is too light to carry 20px text. */
.extras-hint {
  margin: 0 32px 10px;
  padding: 8px 14px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mid-gray);
  border: 2px solid transparent;
  border-radius: 10px;
  flex-shrink: 0;
}
.extras-hint.at-cap {
  color: var(--blue-dark);
  font-weight: 800;
  background: rgba(26, 159, 216, 0.10);
  border-color: var(--blue);
}
/* The cap statement above it was 17px uppercase mid-gray — same problem,
 * same screen, so it moves with the hint. */
.extras-header {
  font-size: 20px;
  color: var(--dark);
}
/* Finding #3: stepHeaderText() returns '' on a step whose cap is not worth
 * stating. The header carries `padding: 20px 32px 8px` (style.css:470), so
 * without this an emptied one leaves 28px of dead space above the lone row —
 * the gap would look like a rendering fault rather than a tidier screen. */
.extras-header:empty {
  display: none;
}
.extras-line-total {
  padding: 2px 32px 14px;
  font-size: 19px;
  font-weight: 800;
  color: var(--dark);
  flex-shrink: 0;
}

/* ===== W3: option value row — name / price / indicator layout =====
 * `.text-extra-row` itself (style.css) is already `display:flex;align-items:
 * center`; these classes just position the pieces inside it. */
.text-extra-row .extra-name {
  flex: 1;
}
.text-extra-row .extra-price {
  margin-right: 16px;
  color: var(--mid-gray);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.text-extra-row.selected .extra-price {
  color: rgba(255, 255, 255, 0.85);
}
.text-extra-row .qty-controls {
  margin-left: auto;
}

/* SINGLE_CHOICE radio affordance. */
.radio-mark {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  border: 2px solid var(--mid-gray);
  margin-right: 18px;
  position: relative;
  transition: border-color 0.15s;
}
.text-extra-row.selected .radio-mark {
  border-color: var(--white);
}
.radio-mark.checked::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--mid-gray);
}
.text-extra-row.selected .radio-mark.checked::after {
  background: var(--white);
}

/* (Removed 2026-08-11, finding #11.) `.text-extra-row.blocked` used to grey out
 * every row while an `exclusive` value was selected. The venue wants the tap to
 * land and clear the exclusive value instead, so no row is ever inert now — see
 * adjustMulti() rule 1 in lib/ui/configurator.mjs. */

/* ===== W3: confirm screen — deposit row + line total ===== */
.confirm-deposit {
  margin-top: 16px;
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--light-gray);
  color: var(--dark);
  font-size: 15px;
  font-weight: 700;
}
/* ===== #14: quantity stepper on the confirm screen (venue, 2026-08-11) =====
 * A light-background sibling of the dark `.qty-btn` used on the selected option
 * rows — that one is white-on-translucent and disappears on this screen.
 * 64px targets: this is the last control before the item is committed to the
 * cart, so a mis-tap here costs the guest money rather than a re-tap. */
.confirm-qty {
  margin: 24px 32px 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.confirm-qty-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--dark);
  margin-right: auto;
}
.confirm-qty-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--dark);
  background: var(--white);
  color: var(--dark);
  font-size: 34px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.confirm-qty-btn:active:not(:disabled) {
  background: var(--light-gray);
  transform: scale(0.92);
}
/* Disabled, not hidden: a control that vanishes under the finger loses the
 * guest's place. Kept legible — this is a limit, not an error. */
.confirm-qty-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.confirm-qty-count {
  font-size: 30px;
  font-weight: 800;
  color: var(--dark);
  min-width: 48px;
  text-align: center;
}

.confirm-line-total {
  margin: 20px 32px 0;
  text-align: right;
  font-size: 23px;
  font-weight: 800;
  color: var(--dark);
}