/* 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; 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-meta { display: flex; align-items: center; gap: 18px; }
.nav-hours { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sc-ink-600); font-weight: 500; }
.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: 720px) { .nav-hours { display: none; } }

.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary-500); box-shadow: 0 0 0 0 rgba(45,100,155,.55); animation: sc-dot-pulse 2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes sc-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(45,100,155,.55); } 70% { box-shadow: 0 0 0 9px rgba(45,100,155,0); } 100% { box-shadow: 0 0 0 0 rgba(45,100,155,0); } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } html { scroll-behavior: auto; } }

/* ─── Hero ─── */
.hero {
  position: relative; margin-top: -58px; padding: 130px 0 64px; 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: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.6); backdrop-filter: blur(8px); color: var(--sc-primary-700); font-size: 13px; font-weight: 600; border: 1px solid var(--sc-primary-100); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin: 4px 0 0; color: var(--sc-navy-800); }
.hero-sub { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--sc-primary-700); 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); }
.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; }

.turnstile { min-height: 0; }
.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; }

/* ─── 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; } }