/* DO NOT EDIT — copied from packages/shared/src/shops/ui/submit-form.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Shared "Submit your shop" form + done screen (W4 Phase 4c, P4c-D2). Class prefix .sf-.
 * Source: packages/shared/src/shops/ui/submit-form.css; npm run tokens copies it to
 * apps/server/public/shared/pages/submit-form.css. Tokens only (var(--...)) and SOLID colours: no
 * alpha mixes, so it holds up on /m. Layers come from gradients between solid tokens, borders and
 * box-shadow glows. The chip rows WRAP and never clip or scroll: no nowrap, no hidden overflow. */

.sf { display: grid; gap: 16px; min-width: 0; color: var(--text); font-family: var(--body); }
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf h1, .sf h2, .sf p, .sf ul, .sf ol { margin: 0; }
.sf a { color: var(--cyan); }
.sf-back { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--text-dim); font: 700 11px/1.2 var(--head); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; }
.sf-title { font: 900 clamp(22px, 5vw, 30px)/1.15 var(--display); overflow-wrap: anywhere; }
.sf-sub { color: var(--text-dim); font-size: 14px; line-height: 1.5; max-width: 60ch; }

.sf-pro { padding: 14px 16px; border: 1px solid var(--cyan-dim); border-radius: 12px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: 0 0 18px var(--surface-2); }
.sf-pro__title { margin-bottom: 6px; color: var(--gold); font: 800 14px/1.3 var(--head); }
.sf-pro__list { padding-left: 18px; color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.sf-pro__link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; }

.sf-error { padding: 12px 14px; border: 1px solid var(--magenta); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 13px; overflow-wrap: anywhere; }

/* ── fields: ordered by SHOP_SUBMIT_FIELDS, wrapped into rows by flex basis ── */
.sf-fields { display: flex; flex-wrap: wrap; gap: 14px 12px; padding: 16px; border: 1px solid var(--border-hi); border-radius: 14px; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.sf-field { display: grid; align-content: start; gap: 6px; flex: 1 1 100%; min-width: 0; }
.sf-field--name, .sf-field--email { flex: 1 1 220px; }
.sf-field--city { flex: 2 1 140px; }
.sf-field--state, .sf-field--zipCode, .sf-field--country { flex: 1 1 90px; }
.sf-field--phone, .sf-field--website { flex: 1 1 220px; }
.sf-label { color: var(--chrome); font: 800 11px/1.3 var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-hi); border-radius: 10px; background: var(--input); color: var(--text); font: 500 14px/1.4 var(--body); }
textarea.sf-input { min-height: 84px; resize: vertical; }
.sf-input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.sf-input[aria-invalid="true"] { border-color: var(--magenta); }
.sf-hint { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.sf-err { color: var(--magenta); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }

/* ── chips: the row wraps; a chip wraps its own text rather than clipping it ── */
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sf-chip { max-width: 100%; padding: 7px 14px; border: 1px solid var(--cyan-dim); border-radius: 999px; background: var(--input); color: var(--chrome); font: 600 12px/1.3 var(--body); text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.sf-chip.on { border-color: var(--magenta); background: var(--magenta); color: var(--text); box-shadow: 0 0 12px var(--surface-2); }
.sf-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── hours grid: one row per day ── */
.sf-days { display: grid; gap: 6px; }
.sf-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--input); }
.sf-day__name { flex: 0 0 96px; color: var(--text); font-size: 13px; font-weight: 700; }
.sf-day__closed { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; }
.sf-day__times { display: inline-flex; align-items: center; gap: 8px; }
.sf-day__times[hidden] { display: none; }
.sf-day__to { color: var(--text-dim); font-size: 12px; }
.sf-input--time { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }

/* ── buttons ── */
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 8px 18px; border-radius: 10px; border: 1px solid var(--cyan-dim); background: var(--surface-2); color: var(--text); font: 700 13px/1.2 var(--head); letter-spacing: 0.03em; text-decoration: none; cursor: pointer; }
.sf a.sf-btn { color: var(--text); }
.sf-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sf-btn--gold { background: var(--gold); border-color: var(--gold); color: var(--bg); box-shadow: 0 0 14px var(--orange); }
.sf a.sf-btn--gold { color: var(--bg); }
.sf-btn[disabled] { opacity: 0.6; cursor: default; }
.sf-submit { width: 100%; min-height: 46px; }

/* ── done screen ── */
.sf-done { justify-items: center; text-align: center; padding: 24px 16px; border: 1px solid var(--border-hi); border-radius: 14px; background: linear-gradient(180deg, var(--surface), var(--bg)); }
.sf-done__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; border: 1px solid var(--green-dim); background: var(--surface-2); color: var(--green); box-shadow: 0 0 22px var(--green-dim); }
.sf-checklist { display: grid; gap: 8px; width: 100%; max-width: 420px; padding: 0; list-style: none; counter-reset: sf-step; text-align: left; }
.sf-check { counter-increment: sf-step; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--input); color: var(--text); font-size: 14px; }
.sf-check::before { content: counter(sf-step); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface-2); color: var(--cyan); font: 800 12px/1 var(--head); }
.sf-check a { color: var(--text); text-decoration: none; }
.sf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── Claim this shop block (rendered by shop-page.js; kept here so it ships beside the submit flow) ── */
.sp-claim { border-color: var(--gold); background: linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: 0 0 18px var(--surface-2); }
.sp-claim__text, .sp-claim__sent { margin-bottom: 10px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.sp-claim__sent b { color: var(--text); overflow-wrap: anywhere; }
.sp-claim__label { display: grid; gap: 6px; margin-bottom: 10px; color: var(--chrome); font: 800 11px/1.3 var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.sp-claim__code { width: 100%; max-width: 260px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-hi); border-radius: 10px; background: var(--input); color: var(--text); font: 600 16px/1.3 var(--body); letter-spacing: 0.12em; }
.sp-claim__code:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.sp-claim__msg { margin-top: 10px; color: var(--magenta); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.sp-claim__msg[hidden] { display: none; }
.sp-claim__msg--ok { color: var(--green); }
.sp-flash { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--green-dim); border-radius: 10px; background: var(--surface-2); color: var(--green); font-size: 13px; font-weight: 700; }