/* Scoringomat web form — design tokens aligned with the Smart Collectors web (SC WEB / dev.smartcollectors.cz). */
:root {
  --sc-primary: #2D649B;
  --sc-primary-700: #1F4F82;
  --sc-primary-600: #2A6FB0;
  --sc-primary-500: #2D649B;
  --sc-primary-400: #4F86BF;
  --sc-primary-200: #B6CCE6;
  --sc-primary-100: #DCE8F4;
  --sc-primary-50:  #F1F6FB;

  --sc-navy-900: #061A30;
  --sc-navy-800: #082341;

  --sc-sky-100: #DFE9FF;
  --sc-sky-200: #CCD7F8;

  --sc-ink-900: #0E1A2B;
  --sc-ink-700: #2A364A;
  --sc-ink-600: #44516A;
  --sc-ink-500: #6A7790;
  --sc-ink-300: #BAC1D1;
  --sc-ink-200: #D9DEE8;
  --sc-ink-150: #E6EAF1;
  --sc-ink-100: #EFF2F7;
  --sc-ink-50:  #F6F8FB;
  --sc-ink-0:   #FFFFFF;

  --sc-success: #1F8A5B;
  --sc-success-bg: #E4F4EC;
  --sc-danger: #C0362C;
  --sc-danger-bg: #FAE6E3;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(8,35,65,.06), 0 1px 1px rgba(8,35,65,.04);
  --shadow-md: 0 6px 14px rgba(8,35,65,.08), 0 2px 4px rgba(8,35,65,.05);
  --shadow-lg: 0 18px 40px rgba(8,35,65,.12), 0 6px 12px rgba(8,35,65,.06);

  --font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.6;
  color: var(--sc-ink-900); background: var(--sc-ink-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--sc-primary-600); text-decoration: none; }
a:hover { color: var(--sc-primary-700); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* ─── Nav ─── */
.nav-shell { position: sticky; top: 16px; z-index: 50; display: flex; justify-content: center; padding: 0 28px; pointer-events: none; }
.nav {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: 1100px; padding: 10px 16px 10px 22px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(8,35,65,.08), 0 1px 0 rgba(255,255,255,.6) inset;
}
.nav .brand img { height: 26px; }
.nav-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--sc-navy-800); pointer-events: none; }
.nav-meta { display: flex; align-items: center; gap: 18px; }
.nav-back { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--sc-primary-50); color: var(--sc-primary-700); font-weight: 600; font-size: 13.5px; border: 1px solid var(--sc-primary-100); }
.nav-back:hover { background: var(--sc-primary-100); color: var(--sc-primary-700); }
.nav-back svg { width: 14px; height: 10px; }
@media (max-width: 640px) { .nav-title { display: none; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ─── Hero ─── */
.hero {
  position: relative; margin-top: -58px; padding: 96px 0 52px; text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.85) 0%, rgba(223,233,255,0) 50%),
    linear-gradient(180deg, #DFE9FF 0%, #CCD7F8 60%, #BCC9EE 100%);
  overflow: hidden;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-sub { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.01em; color: var(--sc-navy-800); margin: 0; }
.hero-lead { max-width: 60ch; margin: 8px 0 0; color: var(--sc-ink-600); font-size: 16px; }
.hero-lead strong { color: var(--sc-ink-900); }

/* ─── Content ─── */
.content { margin-top: -32px; position: relative; z-index: 1; padding-bottom: 16px; }

/* ─── Help accordions ─── */
.help { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto 32px; }
.help-item { background: var(--sc-ink-0); border: 1px solid var(--sc-ink-150); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.help-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; color: var(--sc-ink-900); }
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary:hover { background: var(--sc-ink-50); }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--sc-primary-500); border-radius: 2px; transition: transform .2s ease; }
.plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.help-item[open] .plus::after { transform: scaleY(0); }
.help-body { padding: 0 22px 20px; color: var(--sc-ink-600); font-size: 15px; }
.help-body p { margin: 0 0 10px; }
.help-body ul { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.help-body code { font-family: var(--font-mono); font-size: 13px; background: var(--sc-primary-50); color: var(--sc-primary-700); padding: 1px 6px; border-radius: 5px; }

/* ─── Form cards ─── */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--sc-ink-0); border: 1px solid var(--sc-ink-150); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.card h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--sc-navy-800); }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; color: var(--sc-ink-700); }
.field label .muted { color: var(--sc-ink-500); font-weight: 500; }
.req { color: var(--sc-danger); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 14.5px; color: var(--sc-ink-900);
  background: var(--sc-ink-50); border: 1px solid var(--sc-ink-200); border-radius: var(--r-sm);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 132px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: var(--sc-ink-400, #9099AE); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--sc-primary-400); background: var(--sc-ink-0); box-shadow: 0 0 0 3px rgba(79,134,191,.18); }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--sc-danger); background: var(--sc-danger-bg); }
.hint { margin: 0; font-size: 12.5px; color: var(--sc-ink-500); }
.currency-note { display: flex; align-items: flex-start; gap: 6px; }
.currency-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--sc-primary-600); }
.field-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.counter { font-family: var(--font-mono); font-size: 12px; color: var(--sc-ink-500); white-space: nowrap; }
.counter.over { color: var(--sc-danger); font-weight: 600; }
.err { margin: 0; font-size: 13px; color: var(--sc-danger); font-weight: 500; }

/* ─── Segmented controls (currency / language) ─── */
.segmented-row { display: flex; flex-wrap: wrap; gap: 18px; }
.segmented { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.segmented legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--sc-ink-700); }
.segmented-track { display: inline-flex; gap: 4px; padding: 4px; background: var(--sc-ink-50); border: 1px solid var(--sc-ink-200); border-radius: var(--r-sm); }
.segmented-track label { position: relative; cursor: pointer; }
.segmented-track input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented-track span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--sc-ink-600); border-radius: 6px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.segmented-track label:hover span { color: var(--sc-primary-700); }
.segmented-track input:checked + span { background: var(--sc-ink-0); color: var(--sc-primary-700); box-shadow: var(--shadow-sm); }
.segmented-track input:focus-visible + span { outline: 2px solid var(--sc-primary-400); outline-offset: 2px; }

.email-recall { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.email-recall[hidden] { display: none; }
.email-recall-hint { font-size: 13px; color: var(--sc-ink-500); }
.email-recall-chip { display: inline-flex; align-items: center; background: var(--sc-primary-50); border: 1px solid var(--sc-primary-100); border-radius: var(--r-pill); overflow: hidden; }
.email-recall-fill { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0; background: transparent; color: var(--sc-primary-700); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 8px 6px 12px; }
.email-recall-fill:hover { background: var(--sc-primary-100); }
.email-recall-ic { width: 15px; height: 15px; flex: none; }
.email-recall-x { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 0; background: transparent; color: var(--sc-primary-600); padding: 6px 10px 6px 4px; }
.email-recall-x svg { width: 13px; height: 13px; }
.email-recall-x:hover { color: var(--sc-danger); }
.email-recall-fill:focus-visible, .email-recall-x:focus-visible { outline: 2px solid var(--sc-primary-400); outline-offset: 2px; }

.turnstile { min-height: 0; display: flex; justify-content: center; }
.turnstile:not(:empty) { min-height: 65px; }

/* ─── Buttons ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; width: 100%; }
.btn:focus-visible { outline: 2px solid var(--sc-primary-400); outline-offset: 2px; }
.btn-primary { background: var(--sc-primary-500); color: #fff; box-shadow: 0 4px 12px rgba(45,100,155,.25), inset 0 -1px 0 rgba(0,0,0,.15); }
.btn-primary:hover { background: var(--sc-primary-600); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(45,100,155,.3); }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ─── Form status (neutral confirmation / error) ─── */
.form-status { border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.form-status.is-success { background: var(--sc-success-bg); color: #11603d; border: 1px solid #BFE6D2; }
.form-status.is-error { background: var(--sc-danger-bg); color: #8a241c; border: 1px solid #F0C5BF; }

/* Injected by app.js only when the page is served on a host that may not submit (gateway.js).
   Never present on the real domains.
   `position`/`z-index` are load-bearing, not decoration: `.hero` below has `margin-top: -58px` and
   `position: relative`, so without its own stacking context this banner is painted OVER by the hero
   and the visitor sees nothing while it sits in the DOM looking correct. Verified by
   elementFromPoint, not by querySelector — that is how it was missed the first time. */
.host-warning { padding-top: 24px; padding-bottom: 12px; position: relative; z-index: 3; }

/* ─── Footer ─── */
.footer { background: var(--sc-navy-900); color: #fff; padding: 72px 0 28px; margin-top: 80px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer .brand { display: flex; flex-direction: column; gap: 16px; max-width: 40ch; }
.footer .brand img { height: 38px; width: auto; filter: brightness(0) invert(1); align-self: flex-start; }
.footer .brand p { color: rgba(255,255,255,.6); font-size: 14px; margin: 0; }
.footer h6 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 0 0 16px; font-weight: 500; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: rgba(255,255,255,.85); }
.footer ul a { color: rgba(255,255,255,.85); }
.footer ul a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 13px; }
@media (max-width: 620px) { .footer-bottom { flex-direction: column; gap: 10px; text-align: center; } }