/* Card shell */
        .checkout-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            padding: 36px;
            margin: 12px 0 48px;
        }

/* Form */
        .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }

.form-section h2 { font: 600 15px/1.3 var(--font-sans); margin-bottom: 2px; }

.form-section .section-sub { font-size: 13px; color: var(--fg-2); margin-bottom: 16px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }

.field + .field, .grid-2 + .field, .field + .grid-2 { margin-top: 14px; }

.grid-2 > .field + .field { margin-top: 0; }

.field label { font: 600 13px/1.3 var(--font-sans); color: var(--fg-1); }

.field .hint { font-size: 12px; color: var(--fg-2); }
/* The product news question is the fieldset's legend, so a screen reader names what the box
   refuses; it looks like the other fields, not like a framed group. */
.field.choice { min-width: 0; margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; }
.field.choice legend { padding: 0; margin-bottom: 6px; }
.field.choice p.hint { margin: 6px 0 0; }

.input {
            width: 100%; height: 44px; padding: 0 14px;
            font: 500 14px/1.3 var(--font-sans); color: var(--fg-1);
            background: var(--surface);
            border: 1px solid var(--slate-300);
            border-radius: var(--radius-md);
            transition: border-color 150ms ease;
        }

.input::placeholder { color: var(--fg-3); font-weight: 400; }

.input:hover { border-color: var(--slate-500); }

.input[aria-invalid="true"] { border-color: var(--warn); }

.field-error { font-size: 12px; color: var(--warn); font-weight: 600; display: none; }

.coupon-row { display: flex; gap: 10px; align-items: center; }

.coupon-row .input { flex: 1; text-transform: uppercase; }

.coupon-row .btn { flex: 0 0 auto; }

.coupon-feedback { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; }

.coupon-feedback[data-kind="ok"] { color: var(--success); }

.coupon-feedback[data-kind="err"] { color: var(--warn); }

.field-error.show { display: block; }

/* Club combobox */
        .combo { position: relative; }

.combo .input { padding-left: 40px; padding-right: 38px; }

.combo-icon {
            position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
            color: var(--fg-3); pointer-events: none; display: flex;
        }

.combo-chevron {
            position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
            color: var(--fg-3); pointer-events: none; display: flex;
            transition: transform 150ms ease;
        }

.combo[aria-expanded="true"] .combo-chevron { transform: translateY(-50%) rotate(180deg); }

.combo-list {
            position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            max-height: 260px; overflow-y: auto; padding: 4px;
            display: none;
        }

.combo-list.open { display: block; }

.combo-option {
            display: block; width: 100%; text-align: left; border: 0; background: transparent;
            cursor: pointer; padding: 9px 12px; border-radius: var(--radius-sm);
            font: 500 14px/1.3 var(--font-sans); color: var(--fg-1);
        }

.combo-option .city { color: var(--fg-2); font-weight: 400; font-size: 12px; }

.combo-option:hover, .combo-option[aria-selected="true"] { background: var(--slate-50); }

.combo-option.active { background: var(--paper-warm); }

.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--fg-2); }

/* Selected club confirmation */
        .club-confirm {
            display: none;
            margin-top: 12px; padding: 14px 16px;
            background: var(--slate-50);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            gap: 12px; align-items: flex-start;
        }

.club-confirm.show { display: flex; }

.club-confirm svg { color: var(--success); flex: none; margin-top: 1px; }

.club-confirm .name { font-weight: 600; font-size: 14px; }

.club-confirm .sub { font-size: 12.5px; color: var(--fg-2); }

/* Checkbox rows */
        .cb-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }

.cb-row input[type="checkbox"] {
            width: 18px; height: 18px; margin-top: 1px; flex: none;
            accent-color: var(--brand-orange); cursor: pointer;
        }

.cb-row span { font-size: 13.5px; line-height: 1.5; color: var(--fg-1); }

/* Progress checklist shown after the accept response (202) while the backend finishes
           the signup asynchronously. Token fallbacks matter here: this page has no Angular
           build step to guarantee the design tokens resolve. */
        .signup-progress { margin-top: 20px; }

.signup-progress ol { list-style: none; margin: 0; padding: 0; }

.signup-progress li {
            padding: .5rem 0 .5rem 1.75rem;
            position: relative;
            color: var(--fg-2, #667);
        }

.signup-progress li::before {
            content: '○';
            position: absolute;
            left: 0;
        }

.signup-progress li.is-active { color: var(--fg-1, #223); font-weight: 600; }

.signup-progress li.is-active::before { content: '◍'; }

.signup-progress li.is-done { color: var(--fg-1, #223); }

.signup-progress li.is-done::before { content: '●'; color: var(--success, #1a7f45); }

.signup-progress li.is-error::before { content: '✕'; color: var(--warn, #b3261e); }

#signup-progress-note { margin-top: .75rem; color: var(--fg-2, #667); }

/* Honeypot: visually gone, still in the DOM for bots */
        .hp-field {
            position: absolute; left: -9999px; top: auto;
            width: 1px; height: 1px; overflow: hidden;
        }

/* Success step */
        .task-list { display: grid; gap: 4px; margin: 26px 0; }

.task {
            display: flex; align-items: center; gap: 14px;
            padding: 13px 4px;
            opacity: 0;
            animation: task-in 420ms cubic-bezier(0.2, 0, 0, 1) forwards;
        }

.task:nth-child(1) { animation-delay: 150ms; }

.task:nth-child(2) { animation-delay: 900ms; }

.task:nth-child(3) { animation-delay: 1650ms; }

@keyframes task-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.task-ic {
            width: 36px; height: 36px; flex: none;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            background: var(--success-bg); color: var(--success);
        }

.task .label { font-weight: 600; font-size: 14.5px; }

.task .sub { font-size: 12.5px; color: var(--fg-2); }

.success-note {
            display: flex; gap: 10px; align-items: flex-start;
            padding: 14px 16px; margin-bottom: 24px;
            background: var(--slate-50); border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            font-size: 13.5px; line-height: 1.55; color: var(--fg-2);
            opacity: 0;
            animation: task-in 420ms cubic-bezier(0.2, 0, 0, 1) 2300ms forwards;
        }

.success-note svg { flex: none; color: var(--fg-3); margin-top: 2px; }

.success-cta {
            opacity: 0;
            animation: task-in 420ms cubic-bezier(0.2, 0, 0, 1) 2550ms forwards;
        }

@media (prefers-reduced-motion: reduce) {
            .task, .success-note, .success-cta { animation: none; opacity: 1; }
        }

@media (max-width: 560px) {
            .checkout-card { padding: 24px 20px; }
        }

/* A club that already has an environment, opened without the app's upgrade link */
.club-confirm--login svg { color: var(--brand-orange); }

.club-confirm--login a { font-weight: 600; }

/* Order details hide while the club has to log in first. Some carry an author display rule
   (.field is flex), which would outrank the browser's own [hidden] rule. */
[data-order-detail][hidden] { display: none; }