/* FSG Le Locle Gala — components (fg- prefix). Built on tokens.css. */
.fg { font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface); }
.fg *, .fg *::before, .fg *::after { box-sizing: border-box; }
.fg-gradient { background: linear-gradient(90deg, var(--brand-red), var(--brand-gold) 60%, var(--brand-pale)); }
.fg-label { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.fg-num { font-variant-numeric: tabular-nums; }

/* Button */
.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; font: 600 16px/20px var(--font-body); cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.fg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fg-btn--primary { background: var(--action); color: var(--on-brand); }
.fg-btn--primary:hover { background: var(--action-hover); }
.fg-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.fg-btn--secondary:hover { background: var(--surface-alt); }
.fg-btn--ghost { background: transparent; color: var(--brand-red-ink); padding-inline: var(--space-3); }
.fg-btn--ghost:hover { text-decoration: underline; }
.fg-btn--block { width: 100%; }
.fg-btn:disabled, .fg-btn[aria-disabled="true"] { background: var(--surface-alt); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }

/* Field */
.fg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fg-field__label { font-weight: 600; font-size: 16px; line-height: 20px; }
.fg-field__input { min-height: 44px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/20px var(--font-body); }
.fg-field__input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.fg-field__hint { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.fg-field--error .fg-field__input { border-color: var(--danger); border-width: 2px; }
.fg-field--error .fg-field__hint { color: var(--danger); }

/* TableStepper */
.fg-stepper { display: flex; flex-direction: column; gap: var(--space-3); }
.fg-stepper__row { display: flex; align-items: center; gap: var(--space-4); }
.fg-stepper__btn { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 24px/1 var(--font-display); cursor: pointer; }
.fg-stepper__btn:hover { background: var(--surface-alt); }
.fg-stepper__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fg-stepper__btn:disabled { color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; background: var(--surface-alt); }
.fg-stepper__value { min-width: 2ch; text-align: center; font: 600 40px/44px var(--font-display); font-variant-numeric: tabular-nums; }
.fg-stepper__unit { font-size: 16px; color: var(--ink-muted); }
.fg-stepper__total { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fg-stepper__total strong { font-weight: 600; }

/* PaymentChoice */
.fg-pay { display: grid; gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.fg-pay__option { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.fg-pay__option:has(input:checked) { border: 2px solid var(--action); background: var(--brand-red-soft); padding: calc(var(--space-4) - 1px); }
.fg-pay__option input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--action); }
.fg-pay__option input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fg-pay__title { font: 500 19px/26px var(--font-display); }
.fg-pay__fee { font-size: 14px; line-height: 26px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fg-pay__desc { grid-column: 2 / 4; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* PriceSummary */
.fg-summary { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-alt); font-variant-numeric: tabular-nums; }
.fg-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 16px; line-height: 24px; }
.fg-summary__row span:first-child { color: var(--ink-muted); }
.fg-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.fg-summary__total span:first-child { font-weight: 600; }
.fg-summary__amount { font: 600 28px/32px var(--font-display); }

/* PlacesGauge */
.fg-gauge { display: grid; gap: var(--space-2); }
.fg-gauge__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.fg-gauge__count { font: 600 28px/32px var(--font-display); font-variant-numeric: tabular-nums; }
.fg-gauge__count small { font: 400 16px/24px var(--font-body); color: var(--ink-muted); }
.fg-gauge__track { height: 10px; border-radius: var(--radius-pill); background: var(--surface-alt); border: 1px solid var(--line); overflow: hidden; }
.fg-gauge__fill { height: 100%; border-radius: var(--radius-pill); }
.fg-gauge__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* StatusBadge */
.fg-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.fg-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fg-badge--paid { background: var(--success-soft); color: var(--success); }
.fg-badge--pending { background: var(--warning-soft); color: var(--warning); }
.fg-badge--overdue { background: var(--danger-soft); color: var(--danger); }
.fg-badge--released { background: var(--surface-alt); color: var(--ink-muted); }

/* Alert */
.fg-alert { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-alt); }
.fg-alert__title { margin: 0; font-weight: 600; font-size: 16px; line-height: 24px; }
.fg-alert__text { margin: 0; font-size: 14px; line-height: 20px; }
.fg-alert--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.fg-alert--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.fg-alert--success { background: var(--success-soft); border-color: transparent; color: var(--success); }