/* /aanschaffen - een nieuwe klant neemt Flowskraft zelf af.
   Losse pagina zonder styles.css: de tokens hieronder zijn de waarden uit het
   :root-blok van public/styles.css en de designregels (vault
   40_DESIGN_SYSTEM/RULES.md). Veld en knop 38px, radius 8; kaart radius 12;
   tekstmaten uit de schaal; spacing op het 8pt-raster; saffraan alleen voor de
   actie, nooit als rand of vlak. De pagina staat bewust in het midden: dat is
   het besluit uit het werkoverleg van 01-10 ("een lege pagina met in het
   midden alleen de velden"). Binnen de kaart staat alles links. */

:root {
  --surface: #F4EFE7;
  --surface-raised: #FFFFFF;
  --surface-inverse: #0A0805;
  --border: #E8E1D3;
  --border-default: #D2C8B5;
  --fg-1: #14110B;
  --fg-2: #3F392E;
  --fg-3: #5A5142;
  --fg-inverse: #F4EFE7;
  --accent: #E26F2C;
  --accent-hover: #CF5E13;
  --accent-press: #BC4C00;
  --accent-text: #BA4A00;
  --danger-500: #D63031;
  --danger-700: #97181A;
  --shadow-sm: 0 1px 2px rgba(20, 17, 11, 0.06);

  --body-font: "TT Norms Pro", "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  --text-12: 0.75rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-16: 1rem;
  --text-24: 1.5rem;
  --lh-12: 1.3;
  --lh-13: 1.35;
  --lh-14: 1.4;
  --lh-16: 1.4;
  --lh-24: 1.25;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro: 120ms;
  --dur-fast: 180ms;

  /* Focus: 2px saffraan ring met 2px afstand (RULES). */
  --focus-ring: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--accent);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background: var(--surface);
  color: var(--fg-1);
  font-family: var(--body-font);
  font-size: var(--text-14);
  line-height: var(--lh-14);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Pagina ─────────────────────────────────────────────── */
.as-pagina {
  display: flex;
  justify-content: center;
  padding: var(--space-10) var(--space-4) var(--space-10);
}

.as-kolom {
  width: 100%;
  max-width: 528px; /* formulierkolom 480 + 2 x 24 binnenruimte van de kaart */
}

.as-kop { margin-bottom: var(--space-6); }

.as-logo {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: var(--space-8);
}

.as-kop h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-24);
  line-height: var(--lh-24);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.as-inleiding {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--text-14);
  line-height: var(--lh-14);
}

.as-kaart {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* ── Groepen en velden ──────────────────────────────────── */
.as-formulier { margin: 0; }

.as-groep {
  border: 0;
  margin: 0 0 var(--space-8);
  padding: 0;
  min-width: 0;
}

.as-groep legend {
  padding: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-16);
  line-height: var(--lh-16);
  font-weight: 600;
}

.as-veld { margin-bottom: var(--space-4); min-width: 0; }
.as-groep > .as-veld:last-child,
.as-groep > .as-rij:last-child > .as-veld { margin-bottom: 0; }

.as-veld label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
}

.as-optioneel { color: var(--fg-3); font-weight: 400; }

.as-veld input,
.as-veld select {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--fg-1);
  font-size: var(--text-14);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.as-veld input::placeholder { color: var(--fg-3); opacity: 0.7; }
.as-veld input:hover,
.as-veld select:hover { border-color: var(--fg-3); }
.as-veld input:focus,
.as-veld select:focus { outline: none; border-color: var(--fg-1); box-shadow: var(--focus-ring); }
.as-veld input[aria-invalid="true"],
.as-veld select[aria-invalid="true"] { border-color: var(--danger-500); }

.as-hulp {
  margin: var(--space-1) 0 0;
  color: var(--fg-3);
  font-size: var(--text-12);
  line-height: var(--lh-12);
}

.as-fout {
  margin: var(--space-1) 0 0;
  color: var(--danger-700);
  font-size: var(--text-13);
  line-height: var(--lh-13);
}

.as-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-4);
}
.as-rij-postcode { grid-template-columns: 136px 1fr; }

/* ── Abonnement ─────────────────────────────────────────── */
.as-plannen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.as-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 64px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}

.as-plan input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.as-plan:hover { border-color: var(--fg-3); }
/* Gekozen: een donkere rand, geen saffraan (saffraan is nooit een kaderrand). */
.as-plan:has(input:checked) { border-color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-1); }
.as-plan:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.as-plan:has(input:checked:focus-visible) { box-shadow: inset 0 0 0 1px var(--fg-1), var(--focus-ring); }
.as-plannen[aria-invalid="true"] .as-plan { border-color: var(--danger-500); }

.as-plan-naam {
  font-size: var(--text-14);
  line-height: var(--lh-14);
  font-weight: 600;
}

.as-plan-prijs {
  font-size: var(--text-13);
  line-height: var(--lh-13);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.as-plan-prijs:empty { display: none; }

/* ── Akkoord, beveiligingscheck, actie ──────────────────── */
.as-akkoord { margin-bottom: var(--space-6); }

.as-vink {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-14);
  line-height: var(--lh-14);
  cursor: pointer;
}

.as-vink input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--fg-1);
}
.as-vink input:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

.as-akkoord a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-micro) var(--ease-out);
}
.as-akkoord a:hover { color: var(--fg-1); }
.as-akkoord a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

.as-captcha:not(:empty) { margin-bottom: var(--space-6); }

.as-acties {
  display: flex;
  justify-content: flex-end;
}

.as-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  /* Ink op saffraan: 5,87:1. Bone op saffraan haalt maar 2,80:1 (bewuste
     afwijking van de handoff, zie CLAUDE.md sectie 4). */
  color: var(--fg-1);
  font-size: var(--text-13);
  line-height: var(--lh-13);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.as-knop:hover { background: var(--accent-hover); }
.as-knop:active { background: var(--accent-press); transform: scale(0.98); }
.as-knop:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.as-knop:disabled { opacity: 0.4; cursor: default; transform: none; }
.as-knop:disabled:hover { background: var(--accent); }

.as-spinner { display: none; }
.as-knop.is-bezig { opacity: 1; }
.as-knop.is-bezig .as-spinner {
  display: block;
  animation: as-draai 800ms linear infinite;
}
@keyframes as-draai { to { transform: rotate(360deg); } }

/* ── Bevestiging ────────────────────────────────────────── */
.as-bevestiging { outline: none; }

.as-bevestiging-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--fg-2);
}

.as-bevestiging-tekst {
  margin: 0;
  font-size: var(--text-16);
  line-height: var(--lh-16);
  font-weight: 600;
}

/* ── Toast: rechtsboven, ink-950 ────────────────────────── */
.as-toasts {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1250;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  pointer-events: none;
}

.as-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--fg-inverse);
  font-size: var(--text-13);
  line-height: var(--lh-13);
  pointer-events: auto;
  animation: as-toast-in var(--dur-fast) var(--ease-out);
}
.as-toast svg { flex: none; margin-top: 1px; color: var(--danger-500); }

@keyframes as-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .as-toast { animation: none; }
  .as-knop:active { transform: none; }
}

/* ── Smal ───────────────────────────────────────────────── */
@media (max-width: 520px) {
  .as-pagina { padding: var(--space-6) var(--space-4); }
  .as-logo { margin-bottom: var(--space-6); }
  .as-kaart { padding: var(--space-4); }
  .as-plannen { grid-template-columns: 1fr; }
  .as-plan {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
  }
  /* Onder elkaar; alleen het laatste veld van de laatste rij in een groep
     houdt geen ruimte onder zich. */
  .as-rij,
  .as-rij-postcode { grid-template-columns: 1fr; }
  .as-groep > .as-rij:last-child > .as-veld { margin-bottom: var(--space-4); }
  .as-groep > .as-rij:last-child > .as-veld:last-child { margin-bottom: 0; }
  .as-knop { width: 100%; }
}