/* ============================================================
   Template: tool/triage | Demo-merk: Glasdraad (fictief)
   Niche: glasvezel-beschikbaarheid op postcode/adres
   Basislaag: --lp-* tokens + reset + motion-contract inline gekopieerd
   uit gravity-template-toolkit/base.css (+ gedrag uit base.js).
============================================================ */
:root{
  --lp-color-bg:#FBFCFE; --lp-color-surface:#FFFFFF; --lp-color-bg-section:#EFF3F8;
  --lp-color-text:#10161F; --lp-color-text-muted:#56616F; --lp-color-border:#DBE2EC;
  --lp-color-on-dark:#EAF0F7;

  --lp-color-text-accent:#0B5FB0;            /* AA als tekst op licht */
  --lp-color-fill:#0B5FB0; --lp-color-fill-dark:#084B8C; --lp-color-on-fill:#FFFFFF;
  --lp-color-signal:#19C37D; --lp-color-on-signal:#06321F;  /* glasvezel-groen */
  --lp-color-accent-soft:#E3EEF9;

  --lp-color-warn:#B25A00; --lp-color-on-warn:#FFFFFF;      /* status: nog geen glasvezel */

  --lp-font-display:"Sora",system-ui,sans-serif;
  --lp-font-body:"Inter",system-ui,sans-serif;
  --lp-font-mono:"JetBrains Mono",ui-monospace,monospace;

  --lp-text-sm:1.4rem; --lp-text-base:1.6rem; --lp-text-lg:1.8rem; --lp-text-xl:2rem;
  --lp-radius-sm:6px; --lp-radius-md:14px; --lp-radius-lg:18px;
  --lp-container:980px;
  --lp-pad:clamp(1.6rem,5vw,2.4rem);
  --lp-ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;scroll-behavior:smooth}
body{font-family:var(--lp-font-body);font-size:1.7rem;line-height:1.6;color:var(--lp-color-text);background:var(--lp-color-bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--lp-font-display);font-weight:700;line-height:1.06;letter-spacing:-0.02em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:where(a,button,input):focus-visible{outline:3px solid var(--lp-color-text-accent);outline-offset:3px;border-radius:6px}
.lp-wrap{max-width:var(--lp-container);margin:0 auto;padding:0 var(--lp-pad)}
.lp-eyebrow{font-family:var(--lp-font-mono);font-weight:500;font-size:1.4rem;letter-spacing:.06em;color:var(--lp-color-text-accent);text-transform:uppercase}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;font-family:var(--lp-font-display);font-weight:700;font-size:var(--lp-text-base);padding:1.2rem 2.2rem;border-radius:100px;border:1.5px solid transparent;transition:transform .18s var(--lp-ease),background .18s,box-shadow .18s}
.lp-btn--primary{background:var(--lp-color-fill);color:var(--lp-color-on-fill);box-shadow:0 6px 20px -8px var(--lp-color-fill)}
.lp-btn--primary:hover{background:var(--lp-color-fill-dark);transform:translateY(-2px)}
.lp-btn--signal{background:var(--lp-color-signal);color:var(--lp-color-on-signal)}
.lp-btn--signal:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* topbalk — geen navigatiemenu: de tool stuurt */
.lp-bar{display:flex;align-items:center;justify-content:space-between;padding:1.6rem var(--lp-pad);position:sticky;top:0;background:var(--lp-color-bg);z-index:30;border-bottom:1px solid transparent;transition:border-color .25s}
.lp-bar.is-scrolled{border-color:var(--lp-color-border)}
.lp-logo{font-family:var(--lp-font-display);font-weight:800;font-size:1.9rem;display:flex;align-items:center;gap:.7rem}
.lp-logo__m{width:3.2rem;height:3.2rem;background:var(--lp-color-fill);color:#fff;border-radius:8px;display:grid;place-items:center}
.lp-logo__m svg{width:1.9rem;height:1.9rem}
.lp-bar__tel{font-weight:600;font-size:1.55rem}

/* ===== INTRO-STATE ===== */
.lp-stage{min-height:calc(100svh - 6.4rem);display:flex;flex-direction:column;justify-content:center;padding:4rem 0 6rem}
.lp-ask{font-size:clamp(3.2rem,6.5vw,5.8rem);font-weight:800;margin:1.2rem 0 2.6rem;max-width:17ch}
.lp-ask em{font-style:normal;color:var(--lp-color-text-muted)}

/* signature: adres/postcode-balk */
.lp-input{display:inline-flex;align-items:stretch;background:var(--lp-color-surface);border:3px solid var(--lp-color-text);border-radius:12px;overflow:hidden;box-shadow:6px 6px 0 var(--lp-color-text);max-width:100%}
.lp-input__badge{background:var(--lp-color-fill);color:var(--lp-color-on-fill);display:grid;place-items:center;padding:0 1.4rem}
.lp-input__badge svg{width:2.4rem;height:2.4rem}
.lp-input .pc{display:flex;align-items:center}
.lp-input input{border:0;background:transparent;font-family:var(--lp-font-display);font-weight:800;font-size:clamp(2.4rem,5.5vw,3.8rem);letter-spacing:.04em;color:var(--lp-color-text);text-transform:uppercase;padding:1rem 1.4rem;min-width:0}
.lp-input input::placeholder{color:#9AA6B4}
.lp-input input:focus{outline:none}
.lp-input #pc{width:min(28vw,11rem)}
.lp-input #nr{width:min(18vw,7rem);border-left:2px dashed var(--lp-color-border)}
.lp-askrow{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.lp-check{font-size:1.8rem;padding:1.8rem 3rem}
.lp-check svg{width:2rem;height:2rem}
.lp-hint{margin-top:1.8rem;color:var(--lp-color-text-muted);font-size:1.55rem}
.lp-hint b{color:var(--lp-color-text)}
.lp-hint a{text-decoration:underline;text-underline-offset:3px}

/* ===== STATE-SWITCH ===== */
body[data-state="result"] .lp-stage{display:none}
.lp-result{display:none}
body[data-state="result"] .lp-result{display:block}
@media(prefers-reduced-motion:no-preference){
  body[data-state="result"] .lp-result{animation:lp-fade .5s var(--lp-ease) both}
}
@keyframes lp-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ===== RESULT-STATE ===== */
.lp-found{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;padding:2.6rem 0 2rem}
.lp-found__id{display:inline-flex;align-items:center;gap:.6rem;background:var(--lp-color-accent-soft);color:var(--lp-color-text-accent);border-radius:8px;padding:.6rem 1.1rem;font-family:var(--lp-font-mono);font-weight:500;font-size:1.5rem}
.lp-found h2{font-size:clamp(2.2rem,4vw,3rem)}
.lp-found__change{margin-left:auto;font-size:1.45rem;color:var(--lp-color-text-muted);text-decoration:underline;text-underline-offset:3px;background:none;border:0}

.lp-status{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.8rem 2rem;border:2px solid var(--lp-color-text);border-radius:14px;background:var(--lp-color-bg-section)}
.lp-status__ico{width:4.4rem;height:4.4rem;border-radius:10px;display:grid;place-items:center}
.lp-status__ico svg{width:2.4rem;height:2.4rem}
.lp-status--ok .lp-status__ico,.lp-status--ok .lp-status__tag{background:var(--lp-color-signal);color:var(--lp-color-on-signal)}
.lp-status--soon .lp-status__ico,.lp-status--soon .lp-status__tag{background:var(--lp-color-warn);color:var(--lp-color-on-warn)}
.lp-status__t{font-family:var(--lp-font-display);font-weight:700;font-size:1.9rem}
.lp-status__s{color:var(--lp-color-text-muted);font-size:1.5rem}
.lp-status__tag{font-family:var(--lp-font-display);font-weight:700;font-size:1.35rem;padding:.6rem 1rem;border-radius:8px;white-space:nowrap}

.lp-sec{margin-top:3rem}
.lp-sec__h{font-family:var(--lp-font-display);font-weight:600;font-size:1.4rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lp-color-text-muted);margin-bottom:1.4rem}

/* abonnement-opties als selecteerbare radio-achtige kaarten */
.lp-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lp-opt{display:flex;flex-direction:column;gap:.6rem;text-align:left;width:100%;background:var(--lp-color-surface);border:2px solid var(--lp-color-border);border-radius:14px;padding:1.8rem;transition:border-color .2s,transform .15s var(--lp-ease),box-shadow .2s}
.lp-opt:hover{transform:translateY(-2px)}
.lp-opt[aria-pressed="true"]{border-color:var(--lp-color-text);box-shadow:5px 5px 0 var(--lp-color-signal)}
.lp-opt__top{display:flex;align-items:center;justify-content:space-between}
.lp-opt__speed{font-family:var(--lp-font-display);font-weight:800;font-size:2.4rem}
.lp-opt__speed span{font-size:1.4rem;font-weight:600;color:var(--lp-color-text-muted)}
.lp-opt__check{width:2.4rem;height:2.4rem;border:2px solid var(--lp-color-border);border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--lp-color-on-signal)}
.lp-opt[aria-pressed="true"] .lp-opt__check{background:var(--lp-color-signal);border-color:var(--lp-color-signal)}
.lp-opt__check svg{width:1.5rem;height:1.5rem;opacity:0}
.lp-opt[aria-pressed="true"] .lp-opt__check svg{opacity:1}
.lp-opt__name{font-family:var(--lp-font-display);font-weight:600;font-size:1.7rem}
.lp-opt__meta{color:var(--lp-color-text-muted);font-size:1.45rem}
.lp-opt__price{font-family:var(--lp-font-display);font-weight:700;font-size:1.8rem;margin-top:.4rem}
.lp-opt__price span{font-size:1.4rem;font-weight:500;color:var(--lp-color-text-muted)}
.lp-opt__rec{display:inline-block;font-family:var(--lp-font-mono);font-weight:500;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;background:var(--lp-color-signal);color:var(--lp-color-on-signal);padding:.3rem .6rem;border-radius:5px}
@media(max-width:760px){.lp-opts{grid-template-columns:1fr}}

/* aanvraagstrip */
.lp-book{margin-top:3rem;border:2px solid var(--lp-color-text);border-radius:18px;overflow:hidden}
.lp-book__hd{background:var(--lp-color-text);color:var(--lp-color-on-dark);padding:1.6rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.lp-book__hd .sum{font-family:var(--lp-font-display);font-weight:600;font-size:1.6rem}
.lp-book__tot{font-family:var(--lp-font-display);font-weight:800;font-size:2rem;color:#fff}
.lp-book__bd{padding:2rem;background:var(--lp-color-surface)}
.lp-days{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.lp-day{border:2px solid var(--lp-color-border);border-radius:10px;padding:1rem 1.4rem;font-family:var(--lp-font-display);font-weight:600;background:var(--lp-color-surface);min-width:8rem;text-align:center}
.lp-day b{display:block;font-size:1.6rem}.lp-day span{font-size:1.3rem;color:var(--lp-color-text-muted)}
.lp-day[aria-pressed="true"]{border-color:var(--lp-color-text);background:var(--lp-color-bg-section)}
.lp-slots{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.lp-slot{border:2px solid var(--lp-color-border);border-radius:10px;padding:.9rem 1.4rem;font-family:var(--lp-font-display);font-weight:600;font-variant-numeric:tabular-nums;background:var(--lp-color-surface)}
.lp-slot[aria-pressed="true"]{border-color:var(--lp-color-text);background:var(--lp-color-text);color:#fff}
.lp-confirm{width:100%;font-size:1.8rem;padding:1.5rem 2rem}
.lp-confirm[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.lp-booked{display:none;margin-top:1.4rem;padding:1.4rem 1.6rem;border-radius:10px;background:var(--lp-color-accent-soft);color:var(--lp-color-text-accent);font-weight:600;text-align:center}

/* context, compact */
.lp-context{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:3rem}
.lp-ctx{border:2px solid var(--lp-color-border);border-radius:14px;padding:1.8rem}
.lp-ctx__h{font-family:var(--lp-font-display);font-weight:600;font-size:1.4rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-color-text-muted);margin-bottom:1rem}
.lp-ctx .score{font-family:var(--lp-font-display);font-weight:800;font-size:2.4rem}
.lp-ctx .stars{color:#E0A800}
.lp-ctx p{font-size:1.5rem;color:var(--lp-color-text-muted);margin-top:.4rem}
.lp-ctx ul{list-style:none;font-size:1.5rem}
.lp-ctx li{display:flex;gap:.7rem;padding:.3rem 0}
.lp-ctx li svg{width:1.8rem;height:1.8rem;color:var(--lp-color-text-accent);flex-shrink:0;margin-top:.3rem}
.lp-ctx a{text-decoration:underline;text-underline-offset:3px;font-weight:600;color:var(--lp-color-text-accent)}
@media(max-width:640px){.lp-context{grid-template-columns:1fr}}

.lp-foot{border-top:1px solid var(--lp-color-border);margin-top:5rem;padding:3rem 0;color:var(--lp-color-text-muted);font-size:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* --- ALASTIC WordPress integratie-fixes --- */
body { background-color: var(--night, #ffffff) !important; }
h1, h2, h3, h4, h5, h6 { text-transform: none !important; }
.wp-site-blocks, .is-root-container, .entry-content,
.wp-block-post-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }