/* Pro Carwash-app. Overgezet uit het goedgekeurde ontwerp v0.3 (ontwerp-bron/Pro Carwash App.dc.html).
   Maten, kleuren en animaties zijn gelijk gehouden; alleen de nep-telefoonrand en de demopanelen zijn weg. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/montserrat-latin-ext-v31.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/montserrat-latin-v31.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --pcw-red:#d5163e;--pcw-red-dark:#a8102f;--pcw-red-hover:#e01a44;--pcw-pink:#e0607a;
  --pcw-ink:#373b48;--pcw-ink-deep:#2a2d38;--pcw-ink-light:#5a5f6e;
  --pcw-paper:#f5f6f8;--pcw-line:#e4e6ea;--pcw-grey-400:#9aa0ac;--pcw-grey-300:#b9bdc7;--pcw-grey-200:#cfd2d9;
  --pcw-vip-dark:#a07840;--pcw-green:#1a8a3c;--pcw-green-dark:#15803d;--pcw-success:#3ec46a;
  --grad-brand:linear-gradient(90deg,var(--pcw-red),var(--pcw-pink));
  --grad-dark-hero:linear-gradient(160deg,#3f4350 0%,#2a2d38 100%);
  --grad-dark-hero-deep:linear-gradient(160deg,#3f4350 0%,#1e2028 100%);
  --grad-hero-glow:radial-gradient(circle at 18% 20%,rgba(213,22,62,.3),transparent 45%),radial-gradient(circle at 88% 75%,rgba(224,96,122,.2),transparent 42%);
  --shadow-sm:0 4px 16px rgba(55,59,72,.1);--shadow:0 16px 40px -16px rgba(55,59,72,.35);
  --shadow-panel-hover:0 8px 28px rgba(55,59,72,.13);--shadow-header:0 2px 14px rgba(55,59,72,.08);
  --shadow-red:0 10px 24px -8px rgba(213,22,62,.6);--shadow-red-hover:0 16px 30px -8px rgba(213,22,62,.75);
  --shadow-modal:0 32px 80px -20px rgba(0,0,0,.45);
  --font-sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Veilige randen van de telefoon (notch, home-balk) */
  --top:max(env(safe-area-inset-top,0px),10px);
  --bodem:max(env(safe-area-inset-bottom,0px),10px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font-family:var(--font-sans);background:var(--pcw-paper);color:var(--pcw-ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;padding:0;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
input{font:inherit;color:inherit}
a{color:var(--pcw-red)}
h1,h2,h3,p{margin:0}
img{display:block}
.ic{width:100%;height:100%;display:block}
.ic-16{width:16px;height:16px;display:block;flex-shrink:0}
.ic-18{width:18px;height:18px;display:block;flex-shrink:0}
.ic-14{width:14px;height:14px;display:block;flex-shrink:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Appvlak: op de telefoon het hele scherm, op een groter scherm een smalle kolom */
.app{position:relative;height:100vh;height:100dvh;overflow:hidden;isolation:isolate;background:var(--pcw-paper);margin:0 auto;max-width:480px}
@media (min-width:561px){
  body{background:#e4e6ea}
  .app{box-shadow:0 0 0 1px var(--pcw-line),0 30px 80px rgba(42,45,56,.18)}
}
.laag{position:absolute;inset:0}

/* ---------- Knoppen (designsysteem Button) ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-sans);font-weight:800;border:none;border-radius:50px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;font-size:1rem;padding:16px 32px;min-height:52px}
.knop.vol{width:100%}
.knop.sm{font-size:.85rem;padding:10px 18px;min-height:40px;white-space:nowrap}
.knop.primair{background:var(--pcw-red);color:#fff;box-shadow:var(--shadow-red)}
.knop.donker{background:var(--pcw-ink);color:#fff}
.knop.wit{background:#fff;color:var(--pcw-ink);box-shadow:var(--shadow-sm)}
.knop.omlijnd{background:transparent;color:var(--pcw-red);border:2px solid var(--pcw-red)}
@media (hover:hover){
  .knop.primair:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow-red-hover);background:var(--pcw-red-hover)}
  .knop.donker:hover:not(:disabled),.knop.wit:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow)}
  .knop.omlijnd:hover:not(:disabled){transform:translateY(-3px);background:var(--pcw-red);color:#fff}
}
.knop:disabled,.knop.uit{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.knop:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(213,22,62,.45);outline-offset:2px}

/* ---------- Gedeelde onderdelen ---------- */
.kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pcw-ink-light)}
.kicker.rood{color:var(--pcw-red)}
.kicker.licht{color:var(--pcw-grey-200)}
.kicker.roze{color:var(--pcw-pink)}
.sectie{margin:26px 0 10px}
.label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:7px}
.veld{display:block;width:100%;height:52px;border:2px solid var(--pcw-line);border-radius:12px;padding:0 16px;background:#fff;font-size:16px;outline:none;margin-bottom:14px}
.veld:focus{border-color:var(--pcw-red);box-shadow:0 0 0 3px rgba(213,22,62,.1)}
.veld.code{height:58px;letter-spacing:.5em;text-align:center;font-size:24px;font-weight:900}
.veld.kenteken{text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.klein{font-size:12px;color:var(--pcw-ink-light)}
.midden{text-align:center}
.lijst{background:var(--pcw-line);border:1px solid var(--pcw-line);border-radius:16px;overflow:hidden;display:grid;gap:1px}
.rij{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;width:100%;transition:background .2s ease}
button.rij:hover{background:#fafbfc}
.rij .tekst{flex:1;min-width:0}
.rij strong{display:block;font-size:14px;font-weight:700;color:var(--pcw-ink-deep)}
.rij .sub{font-size:12.5px;color:var(--pcw-ink-light)}
.rij .pijl{color:var(--pcw-grey-400);width:18px;height:18px;flex-shrink:0}
.rij .waarde{font-weight:900;font-size:14px;white-space:nowrap;color:var(--pcw-ink-deep)}
.rij .waarde.plus{color:var(--pcw-green-dark)}
.kaart{background:#fff;border:1px solid var(--pcw-line);border-radius:16px}
.leeg{font-size:13px;color:var(--pcw-ink-light);padding:10px 14px;border:1px dashed var(--pcw-grey-200);border-radius:12px}
.status-bol{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.status-bol.groen{background:rgba(26,138,60,.1);color:var(--pcw-green-dark)}
.status-bol.goud{background:rgba(201,169,106,.2);color:var(--pcw-vip-dark)}
.status-bol.grijs{background:var(--pcw-paper);color:var(--pcw-ink-light)}
.meldingregel{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--pcw-line);border-radius:14px;padding:11px 14px}
.meldingregel strong{display:block;font-size:14px;font-weight:700;color:var(--pcw-ink-deep)}
.meldingregel span.sub{font-size:12.5px;color:var(--pcw-ink-light)}
button.meldingregel{width:100%}
.meldingregel .pijl{color:var(--pcw-grey-400);width:18px;height:18px;flex-shrink:0}
.voucher-code{display:flex;flex-direction:column;align-items:center;margin:4px 0 16px}
.voucher-code .qr-vak{max-width:220px;box-shadow:none;border:1px solid var(--pcw-line)}
.voucher-code b{font-size:22px;font-weight:900;letter-spacing:.14em;margin-top:12px;color:var(--pcw-ink-deep)}
.pil{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:50px;white-space:nowrap}
.pil.groen{background:rgba(26,138,60,.1);color:var(--pcw-green-dark)}
.pil.rood{background:rgba(213,22,62,.08);color:var(--pcw-red-dark)}
.pil.grijs{background:var(--pcw-paper);color:var(--pcw-ink-light)}
.schakel{min-width:56px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 12px;border-radius:50px;transition:background .2s ease,color .2s ease;border:2px solid var(--pcw-line);background:#fff;color:var(--pcw-ink-light)}
.schakel.aan{background:var(--pcw-green);color:#fff;border-color:var(--pcw-green)}
.schakel:disabled{opacity:.5}
.waarschuwing{background:rgba(213,22,62,.07);color:var(--pcw-red-dark);border-radius:14px;padding:12px 14px;font-size:14px;font-weight:600;line-height:1.5;margin-bottom:16px}
.notitie{font-size:12.5px;color:var(--pcw-ink-light);line-height:1.5;margin:0 0 16px;display:flex;gap:10px}
.notitie .ic-18{margin-top:1px}
.linkpijl{display:inline-flex;align-items:center;gap:6px}
.linkpijl .ic-14{flex-shrink:0}

/* Kenteken-plaatje */
.plaat{display:inline-flex;height:28px;border-radius:6px;overflow:hidden;background:#f5c400;color:#111;font-weight:800;font-size:14px;letter-spacing:.04em;border:1.5px solid #111;flex-shrink:0}
.plaat i{background:#1d3fa6;color:#fff;font-size:8px;font-style:normal;display:flex;align-items:flex-end;padding:0 3px 3px}
.plaat b{padding:0 8px;display:flex;align-items:center;font-weight:800}
.plaat.klein{height:26px;font-size:13px;border-radius:5px}.plaat.klein i{font-size:7px}.plaat.klein b{padding:0 7px}
.plaat.groot{height:30px;font-size:15px}.plaat.groot b{padding:0 9px}

/* Dato-kenmerk */
.dato{text-align:center;font-size:10px;font-weight:700;letter-spacing:.32em;padding-left:.32em;line-height:1;white-space:nowrap;color:#b9bdc7}
.dato.licht{color:rgba(255,255,255,.35)}

/* Testbanner: alleen lokaal met nepgegevens */
.app.met-banner{--top:34px}
.testbanner{position:absolute;top:0;left:0;right:0;z-index:70;background:#f5c400;color:#111;font-size:11px;font-weight:800;text-align:center;padding:6px 8px 5px;letter-spacing:.04em;text-transform:uppercase;pointer-events:none}

/* ---------- Inloggen ---------- */
.inlog{display:flex;flex-direction:column;background:var(--grad-hero-glow),var(--grad-dark-hero);color:#fff;z-index:20}
.inlog .boven{flex:1;min-height:0;overflow:hidden}
.inlog .intro{padding:calc(var(--top) + 16px) 28px 26px}
.inlog .logo{display:flex;justify-content:center;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.inlog .logo img{width:250px;height:auto}
.inlog h1{font-size:30px;line-height:1.04;letter-spacing:-.032em;font-weight:900;text-transform:uppercase;margin:20px 0 0}
.inlog h1 span{color:var(--pcw-pink)}
.inlog .intro p{color:var(--pcw-grey-200);margin:10px 0 0;max-width:300px;font-size:14px;line-height:1.55}
.inlog.toetsenbord .intro{padding:calc(var(--top) + 8px) 28px 16px}
.inlog.toetsenbord .logo img{width:180px}
.inlog.toetsenbord h1{font-size:26px;margin-top:16px}
.inlog.toetsenbord .intro p,.inlog.toetsenbord .inlog-dato{display:none}
.inlogkaart{flex-shrink:0;max-height:calc(100% - 130px);overflow-y:auto;background:#fff;color:var(--pcw-ink);border-radius:24px;padding:24px 22px 22px;margin:0 16px 24px;box-shadow:0 20px 40px -16px rgba(0,0,0,.45)}
.inlog.toetsenbord .inlogkaart{margin-bottom:12px}
.inlogkaart h2{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04;margin:0 0 6px;color:var(--pcw-ink-deep)}
.inlogkaart p.uitleg{color:var(--pcw-ink-light);margin:0 0 18px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.inlogkaart p.uitleg strong{color:var(--pcw-ink-deep);font-weight:700}
.terug-link{display:flex;align-items:center;gap:6px;color:var(--pcw-red);font-weight:700;font-size:13.5px;padding:4px 0;margin:-6px 0 10px}
.inlog-fout{color:var(--pcw-red-dark);font-size:13px;font-weight:600;margin:-4px 0 12px}
.inlog-dato{flex-shrink:0;padding:14px 0 calc(var(--bodem) + 8px)}

/* ---------- Hoofdscherm ---------- */
.hoofd{display:flex;flex-direction:column}
.view{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(96px + var(--bodem));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.view::-webkit-scrollbar{display:none}
.kop{padding:calc(var(--top) + 16px) 20px 0}
.kop h1{font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04;color:var(--pcw-ink-deep)}
.inhoud{padding:14px 20px 0}
.inhoud.dicht{padding-top:6px}

.held{background:var(--grad-hero-glow),var(--grad-dark-hero);color:#fff;padding:calc(var(--top) + 12px) 20px 44px;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%)}
.held-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.groet{font-size:21px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04}
.paspil{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:8px 13px;border-radius:50px;font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;flex-shrink:0;transition:transform .2s ease,background .2s ease}
.paspil:hover{transform:translateY(-2px);background:rgba(255,255,255,.16)}
.glas{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.glas-kop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.held-pil{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:50px}
.held-pil.actief{background:rgba(62,196,106,.16);color:var(--pcw-success)}
.held-pil.opgezegd{background:rgba(224,96,122,.2);color:#f4a3b3}
.held-pil.verlopen,.held-pil.onbekend{background:rgba(255,255,255,.12);color:var(--pcw-grey-200)}
.held-titel{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04;margin:8px 0 12px}
.held-regel{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.held-regel .grijs{color:var(--pcw-grey-200);font-size:13px}
.held-voet{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.held-voet .grijs{color:var(--pcw-grey-200);font-size:13px;display:flex;align-items:center;gap:7px}
.glaspil{font-size:12px;font-weight:800;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:50px;white-space:nowrap;transition:background .2s ease;text-decoration:none}
.glaspil:hover{background:rgba(255,255,255,.18);color:#fff}
.tegoed-bedrag{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:6px 0 16px;flex-wrap:wrap}
.tegoed-bedrag .bedrag{font-size:40px;font-weight:900;letter-spacing:-.032em;line-height:1}
.tegoed-bedrag .platen{display:flex;align-items:center;gap:6px}
.tegoed-bedrag .platen>span:not(.plaat){font-size:12px;color:var(--pcw-grey-200)}
.held-link{display:flex;justify-content:center;margin-top:12px}
.held-link button,.held-link a{font-size:13.5px;font-weight:700;color:#fff;opacity:.85;transition:opacity .2s ease;text-decoration:none}
.held-link button:hover,.held-link a:hover{opacity:1}
.held-geen-titel{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.1;margin:8px 0 16px}

.snelrij{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#fff;transition:background .2s ease;width:100%}
.snelrij:hover{background:#fafbfc}
.snelrij .tekst{flex:1;min-width:0}
.snelrij .k{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pcw-ink-light)}
.snelrij .sub{font-size:12.5px;color:var(--pcw-ink-light)}
.snelrij .v{font-size:17px;font-weight:900;color:var(--pcw-ink-deep);white-space:nowrap}

.actiekaart{display:block;width:100%;background:#fff;border:1px solid var(--pcw-line);border-radius:16px;padding:16px;transition:transform .2s ease,box-shadow .2s ease;margin-bottom:10px}
.actiekaart:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel-hover)}
.actiekaart .prijs{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px}
.actiekaart .prijs b{font-size:30px;font-weight:900;letter-spacing:-.032em;line-height:1;color:var(--pcw-red)}
.actiekaart .prijs span{font-size:14px;font-weight:700;color:var(--pcw-ink-deep)}
.actiekaart .daarna{display:block;font-size:13.5px;font-weight:600;color:var(--pcw-ink-deep);margin-top:4px}
.actiekaart .code{display:block;color:var(--pcw-ink-light);font-size:12.5px;margin-top:6px}
.actiekaart .cta{display:flex;align-items:center;gap:6px;color:var(--pcw-red);font-weight:700;font-size:13.5px;margin-top:10px}

/* ---------- Wassen ---------- */
.segmenten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#fff;border:1px solid var(--pcw-line);border-radius:50px;padding:4px;margin:14px 20px 0}
.segmenten button{text-align:center;padding:9px 2px;border-radius:50px;font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s ease,color .2s ease;color:var(--pcw-ink-light)}
.segmenten button.aan{background:var(--pcw-ink);color:#fff}
.intro-tekst{font-size:13.5px;color:var(--pcw-ink-light);margin:14px 0}
.prog{background:#fff;border:1px solid var(--pcw-line);border-top:4px solid var(--accent,var(--pcw-red));border-radius:16px;margin-bottom:10px;overflow:hidden}
.prog-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 14px 0}
.prog-kop strong{display:block;font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.15;color:var(--pcw-ink-deep)}
.rang{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:50px;background:var(--pcw-paper);color:var(--pcw-ink-light)}
.rang.pop{background:rgba(213,22,62,.08);color:var(--pcw-red)}
.prog-prijs{text-align:right;flex-shrink:0}
.prog-prijs b{display:block;font-size:19px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;color:var(--pcw-ink-deep);line-height:1.1}
.prog-prijs span{display:block;font-size:11px;font-weight:700;color:var(--pcw-ink-light);white-space:nowrap}
.prog-tekst{padding:6px 14px 0}
.prog-tekst.ruim{padding-top:10px}
.prog-tekst .kort{display:block;font-size:13px;color:var(--pcw-ink);line-height:1.4}
.prog-tekst .pasprijs{display:block;font-size:12.5px;font-weight:700;color:var(--pcw-green-dark);margin-top:3px}
.prog-tekst .mijn{margin-top:10px;font-size:12px;font-weight:800;color:var(--pcw-green-dark);display:flex;align-items:center;gap:6px}
.prog-actie{margin-top:10px;background:rgba(213,22,62,.07);color:var(--pcw-red-dark);padding:8px 12px;border-radius:10px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.prog-actie strong{font-size:16px;font-weight:900}
.prog-actie span{font-size:12.5px;font-weight:700}
.prog-open{margin:10px 14px 0;padding-top:10px;border-top:1px solid var(--pcw-line);display:grid;gap:3px}
.prog-open div{display:flex;gap:8px;font-size:13px;color:var(--pcw-ink);align-items:center}
.prog-open div .ic-14{color:var(--pcw-ink-light)}
.prog-open p{font-size:12px;color:var(--pcw-ink-light);margin:6px 0 0}
.prog-voet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;padding:8px 14px 12px}
.uitklap{font-size:12.5px;font-weight:700;color:var(--pcw-ink-light);display:flex;gap:5px;align-items:center;padding:6px 0;white-space:nowrap}
.uitklap .ic-14{transition:transform .2s ease}
.uitklap.open .ic-14{transform:rotate(180deg)}
.prog-voet .knop.breed{flex-basis:100%}
.abo-intro{display:flex;align-items:center;gap:14px;margin:14px 0;padding:12px 14px}
.abo-intro img{width:76px;height:auto;flex-shrink:0}
.abo-intro strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;color:var(--pcw-ink-deep)}
.abo-intro strong span{color:var(--pcw-red)}
.abo-intro .sub{display:block;font-size:12.5px;color:var(--pcw-ink-light);margin-top:4px;line-height:1.4}
.advies{padding:14px 16px;margin:0 0 14px}
.advies p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--pcw-ink)}
.advies p b{color:var(--pcw-ink-deep)}
.advies .pil{display:inline-block;margin-top:10px}
.tegoedkaart{padding:16px;margin-top:14px}
.tegoedkaart .bedrag{font-size:34px;font-weight:900;letter-spacing:-.032em;line-height:1.04;margin:6px 0;color:var(--pcw-ink-deep)}
.bedragen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.bedragen button{height:60px;border-radius:14px;font-size:18px;font-weight:900;text-align:center;transition:border-color .2s ease,background .2s ease;background:#fff;border:2px solid var(--pcw-line);color:var(--pcw-ink-deep)}
.bedragen button.aan{background:rgba(213,22,62,.06);border-color:var(--pcw-red);color:var(--pcw-red)}
.bedragen{padding-top:6px}
.bedragen button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.bedragen small{font-size:11.5px;font-weight:800;color:var(--pcw-green-dark)}
.bedragen .tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--pcw-red);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;padding:2px 7px;border-radius:6px;white-space:nowrap}

/* ---------- Voordelen ---------- */
.puntenkaart{background:var(--grad-hero-glow),var(--grad-dark-hero);color:#fff;border-radius:18px;padding:18px}
.puntenkaart .boven{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.puntenkaart .getal{font-size:36px;font-weight:900;letter-spacing:-.032em;line-height:1}
.balk{height:8px;background:rgba(255,255,255,.12);border-radius:50px;overflow:hidden;margin:14px 0 10px}
.balk div{height:100%;background:var(--grad-brand);border-radius:50px;transition:width .5s ease}
.puntenkaart p{font-size:13.5px;color:#fff}
.beloning{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;background:#fff}
.beloning .tekst{flex:1;min-width:0}
.beloning strong{display:block;font-size:14px;font-weight:700;color:var(--pcw-ink-deep)}
.beloning .pts{font-size:12.5px;font-weight:700;color:var(--pcw-green-dark)}
.beloning .nodig{font-size:12px;font-weight:700;color:var(--pcw-ink-light);white-space:nowrap}
.kleinknop{font-size:12.5px;font-weight:800;padding:9px 14px;border-radius:50px;background:var(--pcw-ink);color:#fff;white-space:nowrap;transition:transform .2s ease}
.kleinknop:hover{transform:translateY(-2px)}

/* ---------- Account ---------- */
.profiel{padding:14px 16px;display:flex;gap:14px;align-items:center}
.avatar{width:48px;height:48px;border-radius:14px;background:var(--pcw-ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:17px;flex-shrink:0}
.profiel strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--pcw-ink-deep)}
.profiel span{font-size:13px;color:var(--pcw-ink-light);overflow-wrap:anywhere}
.toevoeg{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#fff;color:var(--pcw-red);font-weight:700;font-size:14px;width:100%}
.adres{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 6px}
.adres img{height:40px;width:auto}
.adres span{font-size:12px;color:var(--pcw-ink-light);line-height:1.5}
.voet-dato{padding:40px 20px 12px}

/* ---------- Navigatie ---------- */
.nav{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);border-top:1px solid var(--pcw-line);box-shadow:var(--shadow-header);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 6px var(--bodem);z-index:10}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 4px;min-height:52px;position:relative;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--pcw-ink-light)}
.nav button .ic-24{width:24px;height:24px;display:block}
.nav button::before{content:"";position:absolute;top:-1px;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:transparent}
.nav button.aan{color:var(--pcw-red)}
.nav button.aan::before{background:var(--pcw-red)}

/* ---------- Waspas (schuift omhoog) ---------- */
.pas{z-index:35;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:var(--grad-hero-glow),var(--grad-dark-hero-deep);color:#fff;transition:transform .35s ease;transform:translateY(100%);pointer-events:none;visibility:hidden}
.pas.open{transform:none;pointer-events:auto;visibility:visible}
.pas:not(.open){transition:transform .35s ease,visibility 0s .35s}
.pas-in{padding:calc(var(--top) + 10px) 20px calc(var(--bodem) + 30px)}
.pas-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.pas-kop h1{font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04}
.rondknop{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;color:#fff;flex-shrink:0;transition:background .2s ease}
.rondknop:hover{background:rgba(255,255,255,.18)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border-radius:10px;padding:3px;transition:border-color .2s ease,opacity .2s ease;border:2px solid transparent}
.chip.aan{border-color:#fff}
.pas .chip:not(.aan){opacity:.55}
.passcene{perspective:1400px;position:relative;width:86%;margin:0 auto}
.paskaart{display:block;width:100%;aspect-ratio:1.586;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .6s ease}
.paskaart.om{transform:rotateY(180deg)}
.pas-kant{position:absolute;inset:0;border-radius:18px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.25) inset;text-align:left}
.pas-kant.achter{transform:rotateY(180deg);color:var(--pcw-ink)}
.pas-kant .l{position:absolute}
.pas-grond{inset:0;background:linear-gradient(180deg,#fff 0%,#fff 42%,#fdf3f5 54%,#f7d9df 64%,#eda3b1 75%,#e0607a 85%,#d5163e 94%,#b3122f 100%)}
.pas-golf1{left:-30%;width:120%;height:62%;bottom:-24%;border-radius:50%;background:linear-gradient(180deg,rgba(224,96,122,.35) 0%,rgba(213,22,62,.55) 45%,rgba(168,16,47,.7) 100%);filter:blur(6px)}
.pas-golf2{right:-35%;width:110%;height:55%;bottom:-26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(213,22,62,.4) 35%,rgba(168,16,47,.75) 100%);filter:blur(4px)}
.achter .pas-golf1{left:auto;right:-30%}.achter .pas-golf2{right:auto;left:-35%}
.pas-onder{left:0;right:0;bottom:0;height:28%;background:linear-gradient(180deg,rgba(213,22,62,0) 0%,rgba(190,18,52,.55) 100%)}
.pas-boog{left:-10%;right:-10%;bottom:-38%;height:70%;border-radius:50%;border-top:1px solid rgba(255,255,255,.35)}
.pas-glans{inset:0;background:linear-gradient(115deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 30%)}
.pas-logo{top:16px;left:50%;transform:translateX(-50%);width:68%;height:auto;filter:drop-shadow(0 6px 10px rgba(120,10,30,.3))}
.pas-woord{left:0;right:0;bottom:16px;color:#fff;text-align:center;font-size:30px;font-weight:900;letter-spacing:.01em;line-height:1;text-transform:uppercase;text-shadow:0 2px 8px rgba(120,10,30,.35)}
.pas-gegevens{inset:0;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
.pas-gegevens .t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pcw-red);margin-top:8px}
.pas-gegevens .t:first-child{margin-top:0}
.pas-gegevens .w{font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--pcw-ink-deep);overflow-wrap:anywhere}
.pas-gegevens .n{font-size:12.5px;font-weight:900;text-transform:uppercase;color:var(--pcw-ink-deep)}
.pas-saldo{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}
.pas-saldo .bedrag{font-size:32px;font-weight:900;letter-spacing:-.032em;line-height:1.05}
.pas-saldo .punten{font-size:13px;color:var(--pcw-grey-200);padding-bottom:4px}
.pas-abo{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pcw-grey-200);margin-top:6px}
.pas-abo i{width:8px;height:8px;border-radius:50%;background:var(--pcw-success);flex-shrink:0}
.pas-voor{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px}
.pas-voor>span:first-child{font-size:12.5px;font-weight:700;color:var(--pcw-grey-200)}
.omdraai{font-size:12.5px;font-weight:700;color:var(--pcw-grey-200);display:flex;gap:6px;align-items:center;padding:6px 8px;transition:color .2s ease;margin:10px auto 0}
.omdraai:hover{color:#fff}
.gebruik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gebruik>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px}
.gebruik>div.rood{background:rgba(213,22,62,.14);border-color:rgba(224,96,122,.35)}
.gebruik .bol{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.gebruik strong{display:block;font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-top:8px}
.gebruik span.t{display:block;font-size:12.5px;color:var(--pcw-grey-200);line-height:1.4;margin-top:2px}
.gebruik .onder{display:block;margin-top:8px;font-size:12px;font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:3px}
.donkerlijst{border-top:1px solid rgba(255,255,255,.1);margin-top:22px;display:grid}
.donkerlijst a,.donkerlijst button{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:14px;text-decoration:none;width:100%}
.donkerlijst a:last-child,.donkerlijst button:last-child{border-bottom:0}
.donkerlijst span.f{flex:1}
.donkerlijst .ic-18{opacity:.6}
.donkerregel{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:11px 14px}
.donkerregel .bol{width:32px;height:32px;border-radius:10px;background:rgba(62,196,106,.16);color:var(--pcw-success);display:grid;place-items:center;flex-shrink:0}
.donkerregel strong{display:block;font-size:14px;font-weight:700}
.donkerregel span{font-size:12px;color:var(--pcw-grey-200)}

/* ---------- Scancode en tijdelijke code (schuiven van rechts) ---------- */
.scan,.tq{display:flex;flex-direction:column;overflow-y:auto;transition:transform .3s ease;transform:translateX(100%);pointer-events:none;visibility:hidden}
.scan.open,.tq.open{transform:none;pointer-events:auto;visibility:visible}
.scan:not(.open),.tq:not(.open){transition:transform .3s ease,visibility 0s .3s}
.scan{z-index:38;background:#fff;color:var(--pcw-ink-deep)}
.tq{z-index:39;background:var(--grad-hero-glow),var(--grad-dark-hero-deep);color:#fff}
.scherm-kop{padding:calc(var(--top) + 8px) 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.terugknop{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:50px;background:var(--pcw-paper);border:1px solid var(--pcw-line);font-weight:800;font-size:14px;transition:background .2s ease}
.terugknop:hover{background:var(--pcw-line)}
.tq .terugknop{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.scan-midden{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center}
.scan-nummer{font-size:22px;font-weight:900;letter-spacing:.14em;margin-top:10px;overflow-wrap:anywhere}
.scan-qr{max-width:210px;box-shadow:none;border:1px solid var(--pcw-line)}
.scan-uitleg{font-size:16px;font-weight:700;line-height:1.4;margin:10px 0 0;max-width:290px}
.scan-saldo{margin-top:14px;background:var(--pcw-paper);border-radius:50px;padding:8px 16px;font-size:14px;font-weight:700}
.scan-saldo b{font-weight:900}
.scan-niet{max-width:300px;background:var(--pcw-paper);border-radius:16px;padding:16px;font-size:13.5px;color:var(--pcw-ink-light);line-height:1.5;margin-top:16px;text-align:left}
.scan-voet{padding:4px 20px calc(var(--bodem) + 18px)}
.tq-in{flex:1;display:flex;flex-direction:column;padding:18px 20px calc(var(--bodem) + 16px)}
.tq h1{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.05}
.tq h1 span{color:var(--pcw-pink)}
.tq-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pcw-grey-200);display:flex;align-items:center;gap:6px}
.stappen{display:grid;gap:10px;margin-top:22px}
.stappen div{display:flex;gap:12px;align-items:flex-start}
.stappen b{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-weight:900;font-size:13px;flex-shrink:0}
.stappen span{font-size:14px;line-height:1.45}
.tq .grijs{font-size:12.5px;color:var(--pcw-grey-200)}
.onderaan{margin-top:auto;padding-top:24px}
.qr-vak{position:relative;width:100%;max-width:280px;aspect-ratio:1;padding:16px;background:#fff;border-radius:20px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5)}
.qr-vak canvas,.qr-vak svg{width:100%;height:100%;display:block;image-rendering:pixelated}
.teller{display:flex;align-items:baseline;gap:6px;margin-top:18px}
.teller b{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1}
.teller span{font-size:14px;font-weight:700;color:var(--pcw-grey-200)}
.tellerbalk{width:100%;max-width:280px;height:6px;border-radius:50px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:10px}
.tellerbalk div{height:100%;border-radius:50px;background:var(--grad-brand);transition:width .25s linear}
.tq-klaar{width:100%;max-width:280px;aspect-ratio:1;border-radius:20px;border:2px dashed rgba(255,255,255,.25);display:grid;place-items:center;color:var(--pcw-grey-200)}
.tq-klaar .ic{width:48px;height:48px}
.tq h2{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;margin:18px 0 6px}
.donkervak{margin-top:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px}
.donkervak strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase}
.donkervak p{font-size:13.5px;color:var(--pcw-grey-200);margin:6px 0 0}

/* ---------- Onderblad (sheet) ---------- */
.scrim{background:rgba(30,32,40,.55);z-index:40;transition:opacity .3s ease;opacity:0;pointer-events:none}
.scrim.open{opacity:1;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.blad{position:absolute;left:0;right:0;bottom:0;background:var(--pcw-paper);border-radius:24px 24px 0 0;max-height:90%;overflow-y:auto;overflow-x:hidden;padding:10px 20px calc(var(--bodem) + 26px);box-shadow:var(--shadow-modal);transition:transform .3s ease;transform:translateY(100%)}
.scrim.open .blad{transform:none}
.greep{width:40px;height:5px;border-radius:9px;background:var(--pcw-grey-200);margin:0 auto 14px}
.blad-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.blad-kop h3{font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.1;color:var(--pcw-ink-deep)}
.sluit{width:36px;height:36px;border-radius:50%;background:var(--pcw-line);display:grid;place-items:center;flex-shrink:0;transition:background .2s ease}
.sluit:hover{background:var(--pcw-grey-200)}
.blad .label{margin:0 0 8px}
.blad .chips{margin-bottom:16px}
.blad .chip.aan{border-color:var(--pcw-red)}
.regels{background:#fff;border:1px solid var(--pcw-line);border-radius:16px;padding:2px 16px;margin-bottom:16px}
.regels div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14px;border-bottom:1px solid var(--pcw-line)}
.regels div:last-child{border-bottom:0}
.regels div span:last-child{text-align:right}
.regels .dik{font-weight:900;color:var(--pcw-ink-deep)}
.regels .half{font-weight:700}
.regels .groen{color:var(--pcw-green-dark)}.regels .rood{color:var(--pcw-red-dark)}
.optie{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border-radius:14px;padding:12px 14px;margin-bottom:16px;font-size:14px;font-weight:700;transition:border-color .2s ease;border:2px solid var(--pcw-line)}
.optie.aan{border-color:var(--pcw-red)}
.vink{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#fff;flex-shrink:0;background:#fff;border:2px solid var(--pcw-grey-300)}
.optie.aan .vink{background:var(--pcw-red);border-color:var(--pcw-red)}
.optie .f{flex:1}
.dagen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dagen button{padding:9px 13px;border-radius:50px;font-size:13px;font-weight:700;background:#fff;transition:border-color .2s ease;border:2px solid var(--pcw-line);color:var(--pcw-ink-deep)}
.dagen button.aan{border-color:var(--pcw-red);color:var(--pcw-red)}
.dagdelen{display:grid;gap:8px;margin-bottom:16px}
.dagdelen button{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;font-size:14px;font-weight:700;transition:border-color .2s ease;border:2px solid var(--pcw-line)}
.dagdelen button.aan{border-color:var(--pcw-red)}
.dagdelen button span:last-child{font-size:13px;font-weight:600;color:var(--pcw-ink-light)}
.stapel{display:grid;gap:10px}
.tekstknop{text-align:center;padding:12px;color:var(--pcw-red);font-weight:700;font-size:14px;width:100%}
.succes{text-align:center;padding:12px 4px 4px}
.succes .bol{width:72px;height:72px;border-radius:50%;background:rgba(26,138,60,.1);color:var(--pcw-green-dark);display:grid;place-items:center;margin:0 auto 16px}
.succes .bol.grijs{background:var(--pcw-line);color:var(--pcw-ink-light)}
.succes .bol .ic{width:34px;height:34px}
.succes h3{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.032em;line-height:1.04;margin:0 0 8px;color:var(--pcw-ink-deep)}
.succes p{color:var(--pcw-ink-light);font-size:14px;line-height:1.6;margin:0 0 18px}
.blad p.uitleg{color:var(--pcw-ink-light);font-size:14.5px;line-height:1.6;margin:0 0 16px}

/* ---------- Toast ---------- */
.toast{position:absolute;left:20px;right:20px;bottom:calc(88px + var(--bodem));background:var(--pcw-ink-deep);color:#fff;border-radius:14px;padding:13px 16px;font-weight:700;font-size:14px;display:flex;gap:10px;align-items:center;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:60;box-shadow:var(--shadow);opacity:0;transform:translateY(20px)}
.toast.aan{opacity:1;transform:none}
.toast .ic-18{color:var(--pcw-success)}
.toast.fout .ic-18{color:#f4a3b3}

/* ---------- Laden ---------- */
.skelet{background:linear-gradient(90deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 100%);background-size:200% 100%;animation:skelet 1.2s ease infinite;border-radius:10px;color:transparent!important}
.inhoud .skelet{background:linear-gradient(90deg,#eceef1 0%,#f7f8fa 50%,#eceef1 100%);background-size:200% 100%}
@keyframes skelet{from{background-position:200% 0}to{background-position:-200% 0}}
.draait{animation:draai 1s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* =====================================================================
   Stijl november 2026: app-gevoel (keuze Dani 02-11-2026, varianten A en C gecombineerd).
   Ook voor oudere klanten: grote tekst, knoppen met woorden, alles onder elkaar.
   Gewone tekst in het lettertype van de telefoon, Montserrat voor koppen en bedragen.
   ===================================================================== */
:root{--font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-merk:'Montserrat',system-ui,sans-serif;--app-grond:#f2f2f7}
body{font-size:16px}
.app{background:var(--app-grond)}
.inlog h1,.inlogkaart h2,.kop h1,.held-titel,.actiekaart .prijs b,.prog-prijs b,.tegoedkaart .bedrag,.bedragen button,.puntenkaart .getal,.pas-kop h1,.pas-woord,.pas-saldo .bedrag,.scan-nummer,.tq h1,.teller b,.tq h2,.blad-kop h3,.succes h3,.voucher-code b,.veld.code,.plaat,
.hkop h1,.mascot h2,.waspas-naam,.waspas-saldo,.waspas-titel,.tegel b{font-family:var(--font-merk)}
.knop{font-weight:700}
.kop h1{text-transform:none;font-size:32px;font-weight:800;letter-spacing:-.025em}

/* Menubalk: doorschijnend, grotere symbolen, woorden goed leesbaar */
.nav{background:rgba(249,249,251,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-top:.5px solid rgba(0,0,0,.14);box-shadow:none}
.nav button{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#5f6472;gap:4px}
.nav button .ic-24{width:27px;height:27px}
.nav button::before{display:none}

/* Lijsten zoals op een iPhone: wit, ronde hoeken, dunne scheidingslijnen */
.lijst{background:#fff;border:0;border-radius:16px;gap:0}
.lijst>*{border-bottom:.5px solid var(--pcw-line)}
.lijst>*:last-child{border-bottom:0}
.rij{padding:14px 16px;min-height:60px}
.rij strong{font-size:16.5px;font-weight:600}
.rij .sub{font-size:14px}
.rij .waarde{font-size:16px;font-weight:700}
.meldingregel{border:0;border-radius:16px;padding:14px 16px}
.meldingregel strong{font-size:16px;font-weight:600}
.meldingregel span.sub{font-size:14px}
.actiekaart{border:0;border-radius:18px}

/* ---------- Home ---------- */
.inhoud.home{padding-top:0}
.hkop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(var(--top) + 10px) 0 14px}
.hkop h1{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--pcw-ink-deep)}
.hkop img{height:52px;width:auto}
.mascot{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 45%,#fdeef1);border-radius:22px;padding:20px 18px;min-height:172px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mascot h2{font-size:22px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--pcw-ink-deep);max-width:62%}
.mascot p{font-size:16px;color:var(--pcw-ink-light);margin:6px 0 14px;max-width:58%;line-height:1.4}
.mascot .knop{min-height:48px;padding:12px 20px;font-size:16px;position:relative;z-index:1}
.mascot img{position:absolute;right:-6px;bottom:-10px;height:160px;width:auto;pointer-events:none}
.waspas{margin-top:14px;border-radius:22px;padding:18px 20px;color:#fff;
  background:radial-gradient(circle at 85% 0%,rgba(224,96,122,.55),transparent 55%),radial-gradient(circle at 0% 100%,rgba(213,22,62,.65),transparent 60%),linear-gradient(150deg,#3c3f4b,#1d1f27);
  box-shadow:0 18px 34px -16px rgba(30,32,40,.75)}
.waspas-boven,.waspas-onder{display:flex;justify-content:space-between;align-items:center;gap:10px}
.waspas-naam{font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.waspas-knop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:22px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.waspas-knop:disabled{opacity:.5}
.waspas-lbl{display:block;font-size:14.5px;opacity:.85;margin-top:16px}
.waspas-saldo{font-size:42px;font-weight:800;letter-spacing:-.03em;line-height:1.08}
.waspas-saldo.skelet-licht{width:55%;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.2),rgba(255,255,255,.08));background-size:200% 100%;animation:skelet 1.2s ease infinite}
.waspas-titel{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:14px}
.waspas-melding{font-size:15px;opacity:.88;margin:6px 0 0;line-height:1.4}
.waspas-onder{margin-top:18px;font-size:15px;letter-spacing:.1em}
.koppelkaart{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;background:#fff;border-radius:18px;padding:16px;color:var(--pcw-ink-deep)}
.koppelkaart>span{flex:1;min-width:0}
.koppelkaart .ic-24{width:28px;height:28px;color:var(--pcw-red)}
.koppelkaart b{display:block;font-size:17px}
.koppelkaart span span{font-size:15px;color:var(--pcw-ink-light)}
.koppelkaart .pijl{color:var(--pcw-grey-400)}
.snel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:18px}
.snel button{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--pcw-ink-deep);text-align:center}
.snel button span{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--pcw-red);box-shadow:0 2px 6px rgba(0,0,0,.07)}
.snel button:first-child span{background:var(--pcw-red);color:#fff;box-shadow:0 8px 16px -6px rgba(213,22,62,.7)}
.snel button:disabled{opacity:.45}
.snel .ic-24{width:26px;height:26px}
.skop{display:flex;justify-content:space-between;align-items:baseline;margin:28px 2px 10px}
.skop h2{font-size:21px;font-weight:700;color:var(--pcw-ink-deep);letter-spacing:-.01em}
.bonnen{display:grid;gap:10px}
.bon{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border-radius:18px;padding:16px;color:#fff;text-align:left}
.bon.groen{background:linear-gradient(140deg,#1a8a3c,#0f6a2c)}
.bon.rood{background:linear-gradient(140deg,#d5163e,#e0607a)}
.bon.donker{background:linear-gradient(140deg,#3c3f4b,#1d1f27)}
.bon-tekst{min-width:0}
.bon small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.bon b{display:block;font-size:18px;font-weight:700;margin:3px 0 2px;line-height:1.25}
.bon-tekst>span{font-size:14.5px;opacity:.92}
.bon-knop{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:22px;background:rgba(255,255,255,.22);font-size:15px;font-weight:600}
.tegels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tegel{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:#fff;border-radius:18px;padding:16px;min-height:124px;text-align:left;color:var(--pcw-ink-deep)}
.tegel .ic-24{width:26px;height:26px;color:var(--pcw-red)}
.tegel b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.tegel small{display:block;font-size:14px;color:var(--pcw-ink-light);line-height:1.35;margin-top:4px}
.tegel .balk{display:block;height:7px;border-radius:4px;background:#f0e1e5;margin:8px 0 0;overflow:hidden}
.tegel .balk span{display:block;height:100%;background:var(--pcw-red);border-radius:4px}

/* ---------- Overal: rustig en goed leesbaar (geen hoofdletters, grotere tekst) ---------- */
.kicker{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.label{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pcw-ink-deep)}
.pil{font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;padding:5px 10px}
.inlog h1,.inlogkaart h2,.held-pil,.held-titel,.prog-kop strong,.rang,.abo-intro strong,.bedragen .tag,.profiel strong,.pas-kop h1,.gebruik strong,.tq h1,.tq-label,.tq h2,.donkervak strong,.blad-kop h3,.succes h3{text-transform:none;letter-spacing:-.01em}
.held-pil{font-size:12.5px;letter-spacing:0}
.klein{font-size:14px}
.leeg{font-size:15px;padding:14px 16px;border:0;background:#fff;border-radius:16px}
.notitie{font-size:14.5px;line-height:1.5}
.tekstknop{font-size:16px;min-height:48px}
.veld{font-size:17px;height:54px}
.inlog h1{font-size:30px;font-weight:800;line-height:1.1}
.inlogkaart h2{font-size:24px;font-weight:800}
.lkop{font-size:15px;font-weight:600;color:var(--pcw-ink-light);margin:26px 4px 8px}

/* ---------- Wassen ---------- */
.segmenten{background:#e4e5ea;border:0;border-radius:12px;padding:3px;margin:14px 20px 0;gap:2px}
.segmenten button{border-radius:10px;font-size:15px;font-weight:600;padding:10px 2px;min-height:44px;color:var(--pcw-ink-deep)}
.segmenten button.aan{background:#fff;color:var(--pcw-ink-deep);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.intro-tekst{font-size:16px;margin:16px 0}
.prog{border:0;border-radius:18px;position:relative;margin-bottom:12px}
.prog::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent,var(--pcw-red))}
.prog-kop{padding:16px 16px 0 20px}
.prog-kop strong{font-size:18px;font-weight:700;font-family:var(--font-sans)}
.rang{font-size:12.5px;font-weight:700;letter-spacing:0;padding:3px 9px;margin-top:6px}
.prog-prijs b{font-size:22px;font-weight:800}
.prog-prijs span{font-size:13.5px;font-weight:500}
.prog-tekst{padding:8px 16px 0 20px}
.prog-tekst .kort{font-size:15.5px;line-height:1.45}
.prog-tekst .pasprijs{font-size:15px;font-weight:600;margin-top:5px}
.prog-tekst .mijn{font-size:14.5px;font-weight:700}
.prog-actie span{font-size:14px}
.prog-open{margin:12px 16px 0 20px;gap:6px}
.prog-open div{font-size:15px}
.prog-open p{font-size:14px}
.prog-voet{padding:10px 16px 14px 20px}
.uitklap{font-size:15px;font-weight:600;min-height:44px}
.prog-voet .knop.sm{font-size:15.5px;min-height:46px;padding:10px 22px}
.abo-intro{border:0;border-radius:18px;padding:14px 16px}
.abo-intro strong{font-size:18px;font-weight:800;font-family:var(--font-merk);line-height:1.2}
.abo-intro .sub{font-size:15px}
.advies{border:0;border-radius:18px}
.advies p{font-size:15.5px}
.tegoedkaart{border:0;border-radius:18px;padding:18px}
.bedragen button{border-radius:16px;min-height:64px}
.bedragen small{font-size:13px}

/* ---------- Voordelen ---------- */
.puntenkaart{background:radial-gradient(circle at 90% 10%,rgba(224,96,122,.5),transparent 50%),linear-gradient(150deg,#d5163e,#a8102f);border-radius:22px;padding:18px 20px;box-shadow:0 18px 34px -16px rgba(213,22,62,.7)}
.pk-lbl{font-size:15px;opacity:.9}
.pk-rij{display:flex;justify-content:space-between;align-items:center}
.pk-rij .ic-24{width:34px;height:34px;opacity:.9}
.puntenkaart .getal{font-size:48px;font-weight:800;font-family:var(--font-merk)}
.puntenkaart .balk{background:rgba(255,255,255,.25);height:9px;margin:14px 0 10px}
.puntenkaart .balk div{background:#fff}
.puntenkaart p{font-size:15.5px}
.beloning{padding:14px 16px;gap:12px}
.beloning .status-bol{width:38px;height:38px;border-radius:11px}
.status-bol.rood{background:rgba(213,22,62,.1);color:var(--pcw-red)}
.beloning strong{font-size:16.5px;font-weight:600}
.nodig{font-size:13.5px;font-weight:700;color:var(--pcw-ink-light);background:#f2f2f7;padding:6px 11px;border-radius:12px;white-space:nowrap}
.nodig.ok{background:rgba(26,138,60,.12);color:var(--pcw-green-dark)}
.kleinknop{font-size:15px;padding:11px 16px;min-height:44px}

/* ---------- Account ---------- */
.profiel{border:0;border-radius:18px;padding:16px}
.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(140deg,#d5163e,#e0607a);font-family:var(--font-merk);font-size:20px;font-weight:800}
.profiel strong{font-size:18px;font-weight:700;font-family:var(--font-sans)}
.profiel span{font-size:15px}
.toevoeg{font-size:16px;font-weight:600;padding:16px;min-height:56px}
.adres span{font-size:14px}
/* Schakelaar zoals op een iPhone */
.schakel{position:relative;width:51px;min-width:51px;height:31px;padding:0;border:0;border-radius:16px;background:#e3e4e8;flex-shrink:0;transition:background .2s ease}
.schakel::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.22);transition:left .2s ease}
.schakel.aan{background:#34c759}
.schakel.aan::after{left:22px}
.schakel:disabled{opacity:.45}

/* ---------- Bladen, scanscherm, tijdelijke code, Mijn waspas ---------- */
.blad{background:var(--app-grond)}
.blad-kop h3{font-size:22px;font-weight:800;line-height:1.2}
.regels{border:0;border-radius:16px}
.regels div{font-size:16px;padding:13px 0}
.blad p.uitleg{font-size:16px}
.blad .knop{min-height:54px;font-size:17px}
.scan-uitleg{font-size:17px}
.scan-niet{font-size:15px}
.tq h1{font-size:28px;font-weight:800}
.tq h2{font-size:24px;font-weight:800}
.pas-kop h1{font-size:28px;font-weight:800}
.gebruik strong{font-size:15px;font-weight:700;text-transform:none;font-family:var(--font-sans)}
.gebruik span.t{font-size:14px}
.gebruik .onder{font-size:14px}

/* ---------- Inloggen met wachtwoord (03-11-2026) ---------- */
.ww-veld{position:relative}
.ww-veld .veld{padding-right:92px}
.ww-toon{position:absolute;right:7px;top:7px;height:40px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:600;color:var(--pcw-red);background:rgba(213,22,62,.07)}
.ww-eis{font-size:14px;color:var(--pcw-ink-light);margin:-6px 0 14px}
.of{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--pcw-ink-light);font-size:14px}
.of::before,.of::after{content:'';flex:1;height:1px;background:var(--pcw-line)}
.inlog-hulp{font-size:14.5px;color:var(--pcw-ink-light);text-align:center;margin-top:10px;line-height:1.4}
.inlog.compact .intro{padding:calc(var(--top) + 10px) 28px 14px}
.inlog.compact .logo img{width:170px}
.inlog.compact h1{font-size:24px;margin-top:12px}
.inlog.compact .intro p{display:none}
.inlog.compact .of{margin:12px 0}
@media (max-height:700px){
  .inlog .intro{padding:calc(var(--top) + 8px) 28px 12px}
  .inlog .logo img{width:150px}
  .inlog h1{font-size:22px;margin-top:10px}
  .inlog .intro p,.inlog .inlog-dato{display:none}
}
@media (max-height:700px){.inlog.compact h1{display:none}}

/* ===== Beginscherm: donkere bovenkant en rustige lijsten (keuze Dani 03-11-2026) ===== */
/* De bovenkant en lijsten van eerst, met de grote tekst van de stijl van november. */
.held.thuis{padding-bottom:46px}
.held.thuis .held-top{margin-bottom:16px}
.held.thuis .groet{font-family:var(--font-merk);font-size:30px;font-weight:800;text-transform:none;letter-spacing:-.02em;line-height:1.1;color:#fff;margin:0}
.held-logo{height:48px;width:auto;flex-shrink:0}
.held.thuis .glas{padding:18px 18px 16px}
.held.thuis .kicker.licht{font-size:15px;font-weight:600;color:rgba(255,255,255,.78)}
.held.thuis .tegoed-bedrag .bedrag{font-size:42px;font-weight:800}
.held.thuis .tegoed-bedrag .platen>span:not(.plaat){font-size:15px;color:rgba(255,255,255,.78)}
.held.thuis .waspas-melding{font-size:16px;margin:-6px 0 14px}
.held.thuis .knop.vol{min-height:54px;font-size:17px}
.held.thuis .held-link{margin-top:10px}
.held.thuis .held-link button{font-size:16px;min-height:44px;opacity:.9}
.held.thuis .held-titel{font-size:24px;font-weight:800}
.held.thuis .held-regel .grijs,.held.thuis .held-voet .grijs{font-size:16px;color:rgba(255,255,255,.78)}
.held.thuis .held-geen-titel{font-size:22px;font-weight:800;text-transform:none;letter-spacing:-.02em}
.held.thuis .glaspil{font-size:15px;font-weight:600;min-height:44px;padding:10px 16px}
/* Gekleurde pictogrammen in de lijsten */
.licoon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.licoon .ic-18{width:20px;height:20px}
.licoon.rood{background:linear-gradient(160deg,#e01a44,#b80f30)}
.licoon.groen{background:linear-gradient(160deg,#22a04a,#13702f)}
.licoon.goud{background:linear-gradient(160deg,#d9b87a,#a07840)}
.licoon.blauw{background:linear-gradient(160deg,#2bb5e8,#1584b3)}
.snelrij .balk{display:block;height:6px;border-radius:3px;background:#f0e1e5;margin-top:8px;overflow:hidden;max-width:200px}
.snelrij .balk span{display:block;height:100%;background:var(--pcw-red);border-radius:3px}
.home .meldingregel{padding:14px 16px;gap:14px}
.home .meldingregel strong,.voordelen .meldingregel strong{font-size:17px}
.bonnen .meldingregel span.sub{font-size:16px}
.bonnen .status-bol{width:38px;height:38px;border-radius:11px}
.snelrij{padding:15px 16px;gap:12px}
.snelrij .k{font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--pcw-ink-deep)}
.snelrij .sub{display:block;font-size:16px;margin-top:2px}
.snelrij .v{font-size:20px;font-weight:800}
.snelrij .pijl{color:var(--pcw-grey-400);width:18px;height:18px;flex-shrink:0}
/* Waspas als echte kaart in de donkere bovenkant (zoals de Wallet-pas), effen zonder vlag of glans (keuze Dani).
   Abonnement krijgt de kleur van het programma. */
.wkaart{--kaart:#d5163e;position:relative;overflow:hidden;border-radius:20px;padding:18px 18px 16px;color:#fff;min-height:214px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  background:#a50e2b;background:linear-gradient(155deg,color-mix(in srgb,var(--kaart) 88%,#000),color-mix(in srgb,var(--kaart) 52%,#000));
  box-shadow:0 22px 38px -18px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.14)}
/* Mascotte als vaag wit watermerk, groot en deels van de kaart af */
.wk-masc{position:absolute;right:-34px;bottom:-26px;height:112%;width:auto;pointer-events:none;filter:brightness(0) invert(1);opacity:.1}
.wk-boven,.wk-midden,.wk-onder{position:relative;z-index:1}
.wk-boven{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wk-merk small{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.wk-merk b{display:block;font-family:var(--font-merk);font-size:30px;font-weight:900;line-height:1.05;letter-spacing:.01em;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.wk-midden{max-width:68%}
.wk-lbl{display:block;font-size:15px;opacity:.88;line-height:1.35}
.wk-saldo{display:block;font-family:var(--font-merk);font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.wk-naam{display:block;font-family:var(--font-merk);font-size:22px;font-weight:800;line-height:1.15;margin-bottom:4px}
.wk-onder{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px;letter-spacing:.1em}
.wkaart .held-pil{background:rgba(255,255,255,.22);color:#fff}
.held-knoppen{margin-top:16px}
.held-knoppen.midden{display:flex;justify-content:center}
.held.thuis .knop.wit{color:var(--pcw-ink-deep);font-weight:700}
.mascot-plek{margin-top:24px}
/* ===== Tabbladen in de stijl van Home (03-11-2026): donkere kop met schuine rand, kaarten en gekleurde pictogrammen ===== */
.held.tab{padding-bottom:42px}
.held.tab .held-top{margin-bottom:14px}
.tabinhoud{padding-top:6px}
.held .segmenten{margin:0;background:rgba(255,255,255,.1);border-radius:12px}
.held .segmenten button{color:#fff}
.held .segmenten button.aan{background:#fff;color:var(--pcw-ink-deep);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.kop-profiel{display:flex;align-items:center;gap:14px}
.kop-profiel strong{display:block;font-family:var(--font-merk);font-size:20px;font-weight:800;color:#fff;line-height:1.2}
.kop-profiel span{display:block;font-size:16px;color:rgba(255,255,255,.78);overflow-wrap:anywhere}
.kop-profiel .avatar{box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
.wk-balk{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.28);margin-top:10px;overflow:hidden;max-width:220px}
.wk-balk span{display:block;height:100%;background:#fff;border-radius:4px}
.wk-onder .wk-zin{font-size:16px;letter-spacing:0}
.licoon.grijs{background:linear-gradient(160deg,#9a9aa2,#6b6b73)}
.tabinhoud>.wkaart{margin-top:14px}
.wkaart.roze{background:#c94a65;background:linear-gradient(155deg,#e46f88,#b5324f)}
.rij .sub{font-size:16px}
.licoon.roze{background:linear-gradient(160deg,#e46f88,#b5324f)}
/* Rand onder de donkere kop zoals op procarwash.nl (keuze Dani 03-11-2026): flauwe schuine rand met een lichtgrijze strook eronder */
.held.thuis{clip-path:none;padding-bottom:62px;background:
  linear-gradient(to top left,#e4e5eb 50%,transparent 50.5%) left bottom 10px/100% 18px no-repeat,
  linear-gradient(#e4e5eb,#e4e5eb) left bottom/100% 10px no-repeat,
  var(--grad-hero-glow),var(--grad-dark-hero)}
.held.thuis.tab{padding-bottom:58px}
/* ===== De waspas zoals de echte pas (keuze Dani 03-11-2026) =====
   Links roze met een donkere band en "WASPAS", rechts geborsteld zilver met QR-code en logo, schuine scheiding. */
.echtpas{--pas:#c9495f;position:relative;display:block;width:100%;aspect-ratio:1.586;min-height:180px;border:0;padding:0;border-radius:18px;overflow:hidden;text-align:left;color:#fff;font:inherit;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(120deg,#d3d6db,#a3a7af 55%,#c8cbd1);
  box-shadow:0 22px 38px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.ep-links{position:absolute;left:0;top:0;bottom:0;width:66%;display:flex;flex-direction:column;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  background:linear-gradient(165deg,var(--pas),color-mix(in srgb,var(--pas) 82%,#000))}
.ep-band{display:block;background:#2b1519;padding:14px 18px 12px;font-family:var(--font-merk);font-size:26px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.ep-inhoud{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:10px 26px 14px 18px;min-width:0}
.ep-lbl{display:block;font-size:15px;opacity:.92;line-height:1.3}
.ep-saldo{display:block;font-family:var(--font-merk);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.ep-nummer{display:block;font-family:var(--font-merk);font-size:22px;font-weight:800;letter-spacing:.03em;line-height:1.2;margin-bottom:4px}
.ep-naam{display:block;font-family:var(--font-merk);font-size:19px;font-weight:800;line-height:1.2;margin:6px 0 8px}
.ep-nr{display:block;font-size:16px;letter-spacing:.08em;margin:4px 0 8px}
.ep-rechts{position:absolute;right:0;top:0;bottom:0;width:38%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 10px 12px 16px}
.ep-qr{display:block;width:84px;height:84px;padding:7px;background:#fff;border-radius:10px;box-shadow:0 0 0 4px rgba(255,255,255,.5)}
.ep-qr svg{display:block;width:100%;height:100%}
.ep-logo{display:block;width:100%;max-width:112px;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.echtpas .held-pil{background:rgba(255,255,255,.22);color:#fff}
.tabinhoud>.echtpas{margin-top:14px}
.pas-in .echtpas{margin:4px 0 6px}
.ep-band.lang{font-size:20px;padding:17px 18px 14px}
.gebruik span.t,.gebruik .onder{font-size:16px}
/* Pas mooier gemaakt (keuze Dani): glad zilver met een lichtglans (geen geborstelde lijntjes), schaduw langs de schuine scheiding,
   lichtvlak op het roze, QR-code groter in een lijstje, geen logo */
.echtpas{background:linear-gradient(112deg,transparent 50%,rgba(255,255,255,.45) 66%,transparent 82%),linear-gradient(180deg,#e2e4e8,#b0b4bb 58%,#cdd0d5);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7)}
.echtpas::before{content:'';position:absolute;left:0;top:0;bottom:0;width:66%;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);transform:translateX(5px);background:rgba(40,20,25,.22);z-index:0}
.ep-links{z-index:1;background:radial-gradient(130% 90% at 0% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(165deg,#d4566e,#b53a53)}
.ep-band{background:linear-gradient(180deg,#371b21,#22101a);font-size:27px;letter-spacing:.04em;text-shadow:0 1px 0 rgba(0,0,0,.45);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.ep-rechts{z-index:1;padding-left:22px}
.ep-qr{width:88px;height:88px;padding:7px;border-radius:11px;box-shadow:0 0 0 5px rgba(255,255,255,.6),0 0 0 6px rgba(0,0,0,.14),0 6px 12px rgba(0,0,0,.22)}
.ep-saldo{text-shadow:0 1px 2px rgba(0,0,0,.18)}
/* Kop van een blad met een gekleurd pictogram, zoals in de lijsten (03-11-2026) */
.blad-kop.met-icoon{gap:12px}
.blad-kop.met-icoon h3{flex:1;min-width:0}
.blad-kop>.licoon{flex-shrink:0}
.notitie{font-size:16px}
/* ===== Inloggen: licht en rustig (keuze Dani 03-11-2026) =====
   Een witte pagina met alleen het logo bovenaan en daaronder het inlogvak, zonder donkere achtergrond of kaart. */
.inlog{background:#fff;color:var(--pcw-ink)}
.inlog .boven{flex:0 0 auto}
.inlog .intro{padding:calc(var(--top) + 40px) 24px 6px}
.inlog .logo{filter:none}
.inlog .logo img{width:220px}
.inlogkaart{flex:1;max-height:none;margin:0;padding:18px 24px 16px;border-radius:0;box-shadow:none;background:transparent}
.inlogkaart h2{font-size:28px}
.inlogkaart .veld{background:#f2f2f7;border-color:#f2f2f7;height:56px}
.inlogkaart .veld:focus{background:#fff;border-color:var(--pcw-red)}
.inlog .inlog-hulp,.inlogkaart p.uitleg,.inlog .of{font-size:16px}
.inlog.compact .intro{padding:calc(var(--top) + 24px) 24px 2px}
.inlog.compact .logo img{width:190px}
.inlog.toetsenbord .intro{padding:calc(var(--top) + 8px) 24px 0}
.inlog.toetsenbord .logo img{width:140px}
.inlog .ww-eis{font-size:16px}
.ep-qr{width:min(88px,100%);height:auto;aspect-ratio:1}
/* Op de computer zo breed als een grote telefoon, zodat de pas niet uitgerekt of te groot wordt en alles uitlijnt */
.app{max-width:430px}
/* ===== Ronde 2 (keuze Dani 04-11-2026): waspas feller, wasbeurten als tegels, echte foto en een Wallet ===== */
/* De waspas zoals de gedrukte pas: framboosroze, effen zilver zonder glans, rustige band, QR-code met een dun kader */
.echtpas{background:linear-gradient(180deg,#d5d8dc,#b7bbc1);box-shadow:0 18px 34px -16px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.22)}
.echtpas::before{width:63%;clip-path:polygon(0 0,100% 0,92% 100%,0 100%);transform:translateX(4px);background:rgba(0,0,0,.13)}
.ep-links{width:63%;clip-path:polygon(0 0,100% 0,92% 100%,0 100%);background:linear-gradient(180deg,#df426b,#cf355d)}
.ep-band{background:#2a1219;font-size:23px;letter-spacing:.06em;padding:15px 18px 13px;text-shadow:none;box-shadow:none}
.ep-band.lang{font-size:19px;padding:17px 18px 15px}
.ep-inhoud{padding:8px 24px 16px 18px}
.ep-saldo{text-shadow:none;font-size:36px}
.ep-rechts{width:37%;padding:12px 14px 12px 18px}
.ep-qr{width:min(82px,100%);height:auto;aspect-ratio:1;padding:6px;border-radius:9px;box-shadow:none;outline:1.5px solid rgba(255,255,255,.9);outline-offset:6px}
/* Wasbeurt kopen als gekleurde tegels, zoals de wasprogramma's op procarwash.nl */
.ptegels{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ptegel{position:relative;overflow:hidden;border:0;border-radius:18px;padding:12px 14px;min-height:100px;color:#fff;text-align:left;font:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  background:var(--k);background:linear-gradient(160deg,color-mix(in srgb,var(--k) 92%,#fff),color-mix(in srgb,var(--k) 78%,#000));box-shadow:0 10px 20px -12px color-mix(in srgb,var(--k) 80%,#000);transition:transform .15s ease}
.ptegel:active{transform:scale(.98)}
.ptegel .rg{font-size:13px;font-weight:700;background:rgba(255,255,255,.22);padding:2px 9px;border-radius:50px}
.ptegel b{display:block;font-family:var(--font-merk);font-size:16px;font-weight:800;line-height:1.15;margin-top:6px}
.ptegel .pr{display:block;font-family:var(--font-merk);font-size:19px;font-weight:800;margin-top:2px}
/* Echte foto uit de wasstraat: bovenkant vrij, de tekst onderin op een donkere overloop zodat hij goed leesbaar is */
.fotoblok{position:relative;overflow:hidden;border-radius:22px;min-height:320px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:18px;background:#2a2d38;box-shadow:0 14px 28px -16px rgba(0,0,0,.6)}
.fotoblok img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fotoblok::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,10,14,.96) 0%,rgba(18,10,14,.82) 34%,rgba(18,10,14,0) 62%)}
.fotoblok h2,.fotoblok p,.fotoblok .knop{position:relative;z-index:1}
.fotoblok h2{font-family:var(--font-merk);font-size:23px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0;color:#fff}
.fotoblok p{font-size:16px;margin:6px 0 14px;opacity:.92}
.fotoblok .knop{min-height:48px;padding:12px 22px;font-size:16px}
/* Wallet: pasjes onder elkaar zoals in de Wallet op een iPhone. Elke pas is een hele kaart met ronde hoeken (150 px hoog),
   waarvan alleen de bovenste 56 px te zien is. Zo ziet een pas die omhoog schuift er ook netjes uit (verbeterd 04-11-2026). */
.wstapel{position:relative}
.wstrook{--kaart:#d5163e;position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;height:150px;margin-bottom:-94px;padding:17px 18px 0;border:0;border-radius:18px;color:#fff;text-align:left;font:inherit;
  background:linear-gradient(180deg,color-mix(in srgb,var(--kaart) 88%,#fff),var(--kaart) 56px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -4px 12px -6px rgba(0,0,0,.4)}
.wstrook.roze{background:linear-gradient(180deg,#ec8399,#d9627c 56px)}
.wstrook b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-merk);font-size:17px;font-weight:800;line-height:1.3}
.wstrook span{flex-shrink:0;font-size:16px;font-weight:600;opacity:.95;line-height:1.4}
.wvoor{position:relative}
.wvoor[role=button]{cursor:pointer}
/* De pasjes bewegen (keuze Dani 04-11-2026): met de muis erover schuift een pas omhoog, op de telefoon bij het aantikken */
.wstrook,.wvoor{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.wstrook:hover{transform:translateY(-12px)}.wvoor:hover{transform:translateY(-6px)}}
.wstrook:active,.wstrook:focus-visible{transform:translateY(-12px)}
.wvoor:active,.wvoor:focus-visible,.wvoor:has(:focus-visible){transform:translateY(-6px)}
.wallet-tip{text-align:center;font-size:16px;color:rgba(255,255,255,.78);margin:16px 0 0}
/* Menubalk met vijf knoppen (Wallet erbij) */
.nav{grid-template-columns:repeat(5,minmax(0,1fr))}
/* ===== Wassen: witte kaart met een kop in de kleur van het programma (keuze Dani 04-11-2026, voorbeeld C) ===== */
.prog::before{display:none}
.prog-kop{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 92%,#fff),color-mix(in srgb,var(--accent) 76%,#000));padding:16px}
.prog-kop strong{color:#fff;font-family:var(--font-merk);font-weight:800}
.prog-prijs b{color:#fff}
.prog-prijs span{color:rgba(255,255,255,.85)}
/* Labels (Basis, Normaal, Meest gekozen!, Het beste!) in het witte deel, in de kleur van het programma (keuze Dani 04-11-2026) */
.prog .rang,.prog .rang.pop{display:block;margin:0 0 4px;padding:0;background:none;border-radius:0;font-size:15px;font-weight:800;color:color-mix(in srgb,var(--accent) 80%,#000)}
.prog-tekst{padding:14px 16px 0}
.prog-open{margin:12px 16px 0}
.prog-voet{padding:10px 16px 14px}
.prog .knop.sm:not(.wit){background:var(--accent);color:#fff;box-shadow:none}
/* De kassaprijs is geen voordeel, dus grijs in plaats van groen */
.prog-tekst .pasprijs.kassa{color:var(--pcw-ink-light);font-weight:500}
/* "Huidig" bij je eigen abonnement: lichtgrijs, zodat hij op de witte kaart te zien is */
.prog .knop.sm.wit{background:#eceef2;color:var(--pcw-ink-light);box-shadow:none}
.prog .knop.sm.wit:disabled{opacity:1}
/* Tegels op Home: het label (Basis, Normaal, ...) gewoon klein onder de naam, zonder pilletje (keuze Dani 04-11-2026) */
.ptegel{justify-content:flex-start}
.ptegel b{margin-top:0}
.ptegel .rg{background:none;padding:0;border-radius:0;font-size:15px;font-weight:600;opacity:.88;margin-top:2px}
.ptegel .pr{margin-top:auto;padding-top:8px}
/* Tegels op Home: het label in een witte strook onderaan de tegel (keuze Dani 04-11-2026) */
.ptegel.met-label{padding-bottom:0}
.ptegel .rg{order:9;align-self:stretch;margin:10px -14px 0;padding:6px 14px;background:rgba(255,255,255,.94);color:color-mix(in srgb,var(--k) 78%,#000);font-size:14px;font-weight:800;opacity:1}
.ptegel .pr{order:8}
/* ===== Abonnement kiezen (keuze Dani 04-11-2026, voorbeeld C): logo, voordelen, keuzerondjes en één grote knop ===== */
/* Logo en kop los op de achtergrond, zonder wit vlak (keuze Dani 04-11-2026) */
.abokop{margin-top:12px;padding:0 18px 4px;text-align:center}
.abokop img{display:block;width:160px;height:120px;object-fit:cover;margin:0 auto 4px}
.abokop h2{font-family:var(--font-merk);font-size:26px;font-weight:800;color:var(--pcw-ink-deep);margin:0;line-height:1.15}
.abokop p{font-size:17px;color:var(--pcw-ink-light);margin:4px 0 0}
.abovoordelen{margin-top:14px}
.abovoordelen .rij{gap:12px}
.abovoordelen strong{font-size:17px;font-weight:600}
.av-vink{width:34px;height:34px;border-radius:50%;background:#e8f6ec;color:#1f9a48;display:grid;place-items:center;flex-shrink:0}
.aboplannen{display:grid;gap:10px}
.aboplan{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;width:100%;background:#fff;border:2px solid #fff;border-radius:16px;padding:14px;font:inherit;text-align:left;color:var(--pcw-ink-deep)}
.aboplan.aan{border-color:var(--k);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--k) 70%,#000)}
.ap-rond{width:24px;height:24px;border-radius:50%;border:2px solid #c3c6ce;flex-shrink:0;margin-top:1px}
.aboplan.aan .ap-rond{border-color:var(--k);background:var(--k);box-shadow:inset 0 0 0 4px #fff}
.ap-tekst{flex:1;min-width:0}
.ap-tekst b{display:block;font-family:var(--font-merk);font-size:17px;font-weight:800;color:color-mix(in srgb,var(--k) 85%,#000)}
.ap-tekst small{display:block;font-size:15px;color:var(--pcw-ink-light);line-height:1.35;margin-top:2px}
.ap-actie{display:block;font-size:15px;font-weight:700;color:var(--pcw-red-dark);margin-top:6px}
.ap-mijn{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--pcw-green-dark);margin-top:6px}
.ap-prijs{text-align:right;flex-shrink:0}
.ap-prijs b{display:block;font-family:var(--font-merk);font-size:18px;font-weight:800}
.ap-prijs small{display:block;font-size:13px;color:var(--pcw-ink-light)}
/* Wat erin zit, alleen bij het gekozen abonnement, over de hele breedte in twee kolommen */
.ap-erin{flex-basis:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding-top:12px;border-top:1px solid var(--pcw-line)}
.ap-erin span{display:flex;align-items:flex-start;gap:6px;font-size:15px;line-height:1.3;color:var(--pcw-ink)}
.ap-erin .ic-14{color:var(--k);flex-shrink:0;margin-top:3px}
.aboknop{margin-top:16px;min-height:56px;font-size:17px;background:var(--k);color:#fff}
/* ===== Bovenkant Home zonder pas: de mascotte met een vriendelijke zin (keuze Dani 04-11-2026, voorbeeld D) ===== */
/* De zin staat midden naast de mascotte, niet direct onder "Hoi Dani" */
.hm{position:relative;display:flex;align-items:center;min-height:132px;margin:2px 0 4px}
.hm p{font-family:var(--font-merk);font-size:24px;font-weight:800;line-height:1.2;color:#fff;margin:0}
.hm.met-masc p{max-width:60%}
.hm img{position:absolute;right:-6px;bottom:-30px;height:178px;width:auto;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.hm-scan{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;position:relative}
/* Tekst of actie naast de mascotte (keuze Dani 04-11-2026) */
.hm-zin{position:relative;z-index:1}
.hm.met-masc .hm-zin{max-width:62%}
.hm.met-masc .hm-zin p{max-width:none}
.hm-kicker{display:inline-block;background:var(--pcw-red);color:#fff;font-size:14px;font-weight:800;padding:3px 10px;border-radius:50px;margin-bottom:8px}
.hm-sub{display:block;font-size:15px;color:rgba(255,255,255,.8);margin-top:4px}
.hm-actie{display:inline-flex;align-items:center;gap:6px;margin-top:10px;min-height:44px;padding:8px 16px;border:0;border-radius:50px;background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:16px;font-weight:700}
.hm.met-actie{min-height:150px}
/* ===== Home afmaken (keuze Dani 04-11-2026) ===== */
/* Rode woorden in de zin naast de mascotte, zoals "SCHONE AUTO" op procarwash.nl */
.hm-zin p em{font-style:normal;color:#ff3b62}
/* Bovenkant compacter: minder lege ruimte onder de knoppen */
.held.thuis:not(.tab){padding-bottom:40px}
.held.thuis:not(.tab) .held-knoppen{margin-top:12px}
.held.thuis:not(.tab) .held-link{margin-top:4px}
/* Overzicht als vakjes naast elkaar */
.ovtegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ovtegels.n2{grid-template-columns:1fr 1fr}
.ovtegel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#fff;border:0;border-radius:16px;padding:12px 10px;min-height:116px;font:inherit;text-align:left;color:var(--pcw-ink-deep)}
.ovtegel .licoon{width:34px;height:34px;border-radius:10px;margin-bottom:4px}
.ovtegel .k{font-size:15px;color:var(--pcw-ink-light)}
.ovtegel b{font-family:var(--font-merk);font-size:17px;font-weight:800;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ovtegel .balk{display:block;width:100%;height:5px;border-radius:3px;background:#f0e1e5;margin-top:auto;overflow:hidden}
.ovtegel .balk span{display:block;height:100%;background:var(--pcw-red)}
/* Fotoblok kleiner */
.fotoblok{min-height:170px;padding:16px}
.fotoblok h2{font-size:20px}
.fotoblok p{margin:2px 0 10px;font-size:15px}
.fotoblok .knop{min-height:44px;padding:9px 18px;font-size:15px}
.fotoblok::after{background:linear-gradient(0deg,rgba(18,10,14,.92) 0%,rgba(18,10,14,.7) 40%,rgba(18,10,14,.1) 80%)}
/* Actie bovenaan, rustig: een kleine regel en de zin, het geheel is de knop */
.hm-tik{display:block;background:none;border:0;padding:0;margin:0;color:#fff;font:inherit;text-align:left;cursor:pointer}
.hm-klein{display:inline-flex;align-items:center;gap:4px;font-size:16px;font-weight:600;color:rgba(255,255,255,.8);margin-bottom:4px;min-height:24px}
.hm.met-actie{min-height:132px}
/* Knopregel onder de zin naast de mascotte */
.hm-knop{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:16px;font-weight:700;color:#fff;opacity:.9;min-height:28px}
/* Bovenkant zonder knoppen (keuze Dani 04-11-2026): de mascotte staat op de schuine rand */
.hm.zonder-knop{min-height:150px;margin-bottom:0}
.hm.zonder-knop img{bottom:-44px;height:186px;right:-4px}
.held.thuis:not(.tab):has(.hm.zonder-knop:last-child){padding-bottom:48px}
.hm.zonder-knop ~ .held-knoppen{position:relative;z-index:2;margin-top:4px}
.hm.zonder-knop ~ .held-knoppen .held-link{justify-content:flex-start}
/* ===== Bonnen (keuze Dani 04-11-2026): op Home één regel, in de Wallet als echte bonnen met scheurrand ===== */
.klaarbalk{display:flex;align-items:center;gap:14px;width:100%;background:#fff;border:0;border-radius:16px;padding:14px 16px;font:inherit;text-align:left;color:var(--pcw-ink-deep);min-height:72px}
.kb-stapel{display:flex;flex-shrink:0}
.kb-stapel span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;border:2px solid #fff;margin-left:-10px}
.kb-stapel span:first-child{margin-left:0}
.kb-tekst{flex:1;min-width:0}
.kb-tekst strong{display:block;font-size:17px;font-weight:700}
.kb-tekst span{display:block;font-size:15px;color:var(--pcw-ink-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klaarbalk .pijl{color:var(--pcw-grey-400);flex-shrink:0}
.bonlijst{display:grid;gap:12px}
.bon{display:flex;align-items:stretch;width:100%;background:#fff;border:0;border-radius:16px;padding:0;font:inherit;text-align:left;color:var(--pcw-ink-deep);overflow:hidden;min-height:88px;
  -webkit-mask:radial-gradient(circle 9px at 76px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 76px 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 9px at 76px 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 9px at 76px 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.bon-l{width:76px;flex-shrink:0;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--k) 92%,#fff),color-mix(in srgb,var(--k) 76%,#000))}
.bon-r{flex:1;min-width:0;padding:12px 8px 12px 16px;border-left:2px dashed #e1e3e8;display:flex;flex-direction:column;justify-content:center}
.bon-r small{font-size:14px;font-weight:800;color:color-mix(in srgb,var(--k) 80%,#000)}
.bon-r b{font-size:17px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;hyphens:auto;overflow-wrap:normal;word-break:normal}
.bon-r b{text-overflow:ellipsis}
.bon-r span{font-size:15px;color:var(--pcw-ink-light)}
.bon>.pijl{align-self:center;margin-right:14px;color:var(--pcw-grey-400);flex-shrink:0}
/* Lichtere schaduw onder de mascotte, anders een donkere vlek op de grijze rand */
.hm.zonder-knop img{filter:drop-shadow(0 6px 6px rgba(0,0,0,.22))}
/* ===== Pincode en Face ID (keuze Dani 05-11-2026) =====
   Zoals bij een bank-app: grote toetsen onderaan waar je duim zit, en bij elk pictogram een woord. */
.inlogkaart.pin{display:flex;flex-direction:column}
.inlogkaart .onder{margin-top:auto}
.inlogkaart .onder .knop+.knop{margin-top:12px}
.pin-kop{text-align:center}
.inlogkaart .pin-kop h2{margin-bottom:6px}
.inlogkaart .pin-kop p.uitleg{margin:0 auto 4px;max-width:300px}
.pin-bolletjes{display:flex;justify-content:center;gap:16px;margin:22px 0 10px}
.pin-bolletjes span{width:20px;height:20px;border-radius:50%;border:2px solid var(--pcw-ink-deep)}
.pin-bolletjes span.vol{background:var(--pcw-red);border-color:var(--pcw-red)}
.pin-bolletjes.schud{animation:pin-schud .4s}
@keyframes pin-schud{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-melding{text-align:center;font-size:16px;min-height:24px;margin:0 0 10px;color:var(--pcw-ink-light)}
.pin-melding.fout{color:var(--pcw-red-dark);font-weight:700}
.pin-blok{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pin-blok button{height:66px;border:0;border-radius:18px;background:#f2f2f7;font-family:var(--font-sans);font-size:28px;font-weight:700;color:var(--pcw-ink-deep);display:flex;align-items:center;justify-content:center;gap:2px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pin-blok button:active{background:#e1e3e8}
.pin-blok button.woord{font-size:16px;background:transparent;flex-direction:column}
.pin-blok button.woord:active{background:#f2f2f7}
.ic-wis{width:26px;height:26px}
.ic-face{width:28px;height:28px}
.inlogkaart.pin .tekstknop{margin-top:6px}
.pin-groot{width:96px;height:96px;border-radius:28px;margin:8px auto 18px;display:grid;place-items:center;background:#fdeef1;color:var(--pcw-red)}
.pin-groot svg{width:52px;height:52px}
.pin-lijst{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:12px;font-size:16px}
.pin-lijst li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.pin-lijst li::before{content:'';flex-shrink:0;width:22px;height:22px;border-radius:50%;margin-top:1px;background:#1f9a48 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
/* Kleine telefoons (iPhone SE): iets lagere toetsen en een kleiner logo, zodat alles zonder schuiven past */
@media (max-height:700px){
  .inlog.compact .logo img{width:150px}
  .inlog.compact .intro{padding-top:calc(var(--top) + 12px)}
  .pin-bolletjes{margin:14px 0 8px}
  .pin-blok{gap:10px}
  .pin-blok button{height:56px}
  .pin-groot{width:80px;height:80px;margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){.pin-bolletjes.schud{animation:none}}
/* ===== Afwerking (06-11-2026) =====
   QR-codes altijd vierkant: vaste, gelijke breedte en hoogte in plaats van aspect-ratio. Safari op de iPhone rekte het
   vak uit door de SVG erin (Dani: "de qr code op de pas is niet vierkant"). */
.ep-qr{flex:none;width:clamp(64px,22vw,82px);height:clamp(64px,22vw,82px);aspect-ratio:auto}
.ep-qr svg{width:100%;height:100%}
.qr-vak,.tq-klaar{flex:none;width:min(280px,calc(100vw - 64px));height:min(280px,calc(100vw - 64px));max-width:none;aspect-ratio:auto}
.voucher-code .qr-vak{width:min(220px,calc(100vw - 96px));height:min(220px,calc(100vw - 96px))}