/* =====================================================
   AquaPas — klantportaal
   Overgenomen uit het ontwerp aquapas.html, met de
   aanvullingen die echte gegevens nodig hebben:
   pas-keuze, cadeaubon op beurten, lege staten en
   foutmeldingen.

   Los van waspas.css: dat is de personeelskant, met een
   eigen achtergrond en navigatie.
   ===================================================== */

:root{
    --navy:#162746;
    --navy-light:#24365c;
    --aqua:#a6bada;
    --aqua-soft:#dbe4f2;
    --gold:#c9a227;
    --bg:#eef0f3;
    --white:#ffffff;
    --green:#3a8c5f;
    --red:#c1443f;
    --text-muted:#6b7280;
}

*{box-sizing:border-box;}

body{
    margin:0;
    font-family:'Poppins', sans-serif;
    background:var(--bg);
    color:#171a20;
    min-height:100vh;
}

a{text-decoration:none; color:inherit;}
button{font-family:'Poppins', sans-serif;}

/* =====================================================
   INLOGGEN EN ACTIVEREN
   ===================================================== */
.aqua-entree{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:
      radial-gradient(circle at 15% 10%, #eef0f3 0%, transparent 55%),
      linear-gradient(135deg, #d9dce2 0%, #c7cbd4 100%);
}

.stage{
    width:100%;
    max-width:1100px;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:60px;
    align-items:center;
}

.welcome{display:flex; flex-direction:column; gap:8px;}

.welcome h1{
    font-size:56px;
    font-weight:800;
    line-height:1.05;
    margin:0;
    color:#111318;
}
.welcome h1 .name{color:var(--navy); display:block;}

.welcome p{margin:14px 0 40px 0; font-size:15px; color:#3a3d44;}
.welcome p b{color:var(--navy);}

/* ── De kaart ───────────────────────────────────────── */
.card-wrap{perspective:1200px;}

.aquapas-card{
    width:340px;
    height:210px;
    border-radius:16px;
    background:linear-gradient(135deg, #ffffff 0%, #f4f6f9 100%);
    box-shadow:0 25px 50px -12px rgba(22,39,70,0.35), 0 0 0 1px rgba(22,39,70,0.05);
    transform:rotate(-9deg);
    position:relative;
    padding:26px 24px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:transform .4s ease;
}
.aquapas-card:hover{transform:rotate(-4deg) translateY(-4px);}

.card-top{display:flex; flex-direction:column;}
.card-logo{font-size:26px; font-weight:800; color:var(--navy); letter-spacing:-0.5px;}
.card-logo span{color:var(--aqua);}
.card-tagline{font-size:9.5px; color:#5b6270; margin-top:2px; font-weight:500;}
.card-tagline b{color:var(--navy);}

.nfc-icon{position:absolute; top:26px; right:24px; width:26px; height:26px; color:var(--gold);}

.card-bottom{display:flex; align-items:flex-end; justify-content:space-between;}
.card-address{font-size:9px; color:#3a3d44;}
.card-address .slogan{font-size:8px; color:#8a8f99; margin-top:3px;}

.card-brand{
    display:flex; align-items:center; gap:5px;
    font-size:10px; font-weight:700; color:var(--navy);
    text-align:right; line-height:1.1;
}
.card-brand .dot{width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block;}

/* ── Het paneel ─────────────────────────────────────── */
.login-panel{
    background:var(--white);
    border-radius:14px;
    padding:44px 40px;
    box-shadow:0 20px 45px -15px rgba(22,39,70,0.25);
    width:100%;
    max-width:400px;
    justify-self:end;
}

.login-panel h2{
    margin:0 0 6px;
    font-size:22px;
    font-weight:800;
    color:var(--navy);
}
.login-panel .panel-sub{
    margin:0 0 26px;
    font-size:13.5px;
    color:var(--text-muted);
}

.field{margin-bottom:22px;}

.field label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#20242c;
    margin-bottom:8px;
}

.field input{
    width:100%;
    border:none;
    border-radius:8px;
    padding:13px 16px;
    font-size:14px;
    font-family:'Poppins', sans-serif;
    background:var(--aqua);
    color:#1b2536;
    font-weight:500;
    outline:none;
    transition:background .2s ease, box-shadow .2s ease;
}
.field input::placeholder{color:#3f4a63;}
.field input:focus{background:var(--aqua-soft); box-shadow:0 0 0 3px rgba(22,39,70,0.15);}

.remember{display:flex; align-items:center; gap:10px; margin-bottom:32px; font-size:14px;}

.login-btn{
    width:100%;
    border:none;
    border-radius:8px;
    padding:14px;
    font-size:15px;
    font-weight:700;
    color:var(--white);
    background:var(--navy);
    cursor:pointer;
    transition:background .2s ease, transform .1s ease;
}
.login-btn:hover{background:var(--navy-light);}
.login-btn:active{transform:translateY(1px);}
.login-btn:disabled{opacity:.6; cursor:progress;}

.entree-fout,
.entree-goed{
    margin-top:18px;
    font-size:14px;
    font-weight:600;
    text-align:center;
    min-height:20px;
}
.entree-fout{color:var(--red);}
.entree-goed{color:var(--green);}

.entree-voet{
    margin-top:26px;
    font-size:12.5px;
    color:var(--text-muted);
    text-align:center;
    line-height:1.5;
}

/* =====================================================
   DASHBOARD
   ===================================================== */
.topbar{
    background:var(--navy);
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.topbar .logo{font-size:20px; font-weight:800; color:var(--white); letter-spacing:-0.4px;}
.topbar .logo span{color:var(--aqua);}

.topbar .user{display:flex; align-items:center; gap:14px;}

.avatar{
    width:36px; height:36px; border-radius:50%;
    background:var(--aqua); color:var(--navy);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:14px;
    flex-shrink:0;
}

.topbar .user-name{color:var(--white); font-size:14px; font-weight:500;}

.logout{
    font-size:12.5px;
    color:var(--aqua-soft);
    border:1px solid rgba(255,255,255,0.2);
    padding:7px 14px;
    border-radius:7px;
    background:none;
    cursor:pointer;
    transition:background .2s ease;
}
.logout:hover{background:rgba(255,255,255,0.08);}

.wrap{max-width:1100px; margin:0 auto; padding:36px 24px 60px;}

.hero{margin-bottom:28px;}
.hero h1{font-size:30px; font-weight:800; margin:0 0 4px 0;}
.hero h1 .name{color:var(--navy);}
.hero p{margin:0; color:var(--text-muted); font-size:14px;}

/* Meerdere passen op één account: keuzebalk boven het dashboard. */
.pas-keuze{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:22px;
    font-size:13.5px;
    color:var(--text-muted);
}
.pas-keuze a{
    padding:7px 14px;
    border-radius:20px;
    background:var(--white);
    border:1px solid #dfe3ea;
    color:#333;
    font-weight:600;
    transition:border-color .15s ease;
}
.pas-keuze a:hover{border-color:var(--navy);}
.pas-keuze a.actief{background:var(--navy); border-color:var(--navy); color:var(--white);}

.grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px;}

.card{
    background:var(--white);
    border-radius:14px;
    padding:26px;
    box-shadow:0 10px 30px -14px rgba(22,39,70,0.18);
}

.balance-card{
    background:linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}
.balance-card::after{
    content:"";
    position:absolute;
    right:-40px; top:-40px;
    width:180px; height:180px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(166,186,218,0.18) 0%, transparent 70%);
}

.balance-label{
    font-size:12.5px;
    letter-spacing:0.4px;
    text-transform:uppercase;
    color:var(--aqua-soft);
    opacity:0.85;
    margin-bottom:6px;
}

.balance-amount{font-size:44px; font-weight:800; line-height:1; margin-bottom:22px;}
.balance-amount span{font-size:20px; font-weight:600; opacity:0.7;}

/* Cadeaubon op beurten: geen bedrag maar een lijstje programma's. */
.beurten-lijst{
    list-style:none;
    margin:0 0 22px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:7px;
    position:relative;
    z-index:1;
}
.beurten-lijst li{
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,0.14);
    padding-bottom:6px;
}
.beurten-lijst li:last-child{border-bottom:none;}
.beurten-lijst .aantal{font-weight:700;}

.balance-actions{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1;}

.btn{
    border:none;
    border-radius:8px;
    padding:11px 18px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);}
/* Uitgeschakeld moet er ook uitgeschakeld uitzien; anders klikt iedereen
   zich suf op een knop die niets doet. */
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn:disabled:hover{transform:none;}
.btn-primary{background:var(--gold); color:var(--navy);}
.btn-ghost{background:rgba(255,255,255,0.12); color:var(--white); border:1px solid rgba(255,255,255,0.25);}

.plate-card{display:flex; flex-direction:column; justify-content:space-between;}

.card-title{
    font-size:12.5px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    color:var(--text-muted);
    font-weight:600;
    margin-bottom:14px;
}

.plate{
    background:#f6d43c;
    border:3px solid #171a20;
    border-radius:6px;
    padding:10px 14px;
    text-align:center;
    font-size:28px;
    font-weight:800;
    letter-spacing:3px;
    color:#171a20;
    font-family:Arial, sans-serif;
    margin-bottom:14px;
    overflow-wrap:anywhere;
}
.plate.leeg{
    background:#f1f2f5;
    border-color:#c9ccd4;
    color:var(--text-muted);
    font-size:15px;
    letter-spacing:0;
    font-family:'Poppins', sans-serif;
    font-weight:600;
}

/* Twee losse regels: naast elkaar viel de tweede uiteen zodra de
   kaartnaam wat langer werd. */
.plate-meta{font-size:13px; color:var(--text-muted); display:flex; flex-direction:column; gap:3px;}
.plate-meta .hint{font-size:12px; opacity:.85;}

.stats-row{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}

.stat-card{display:flex; flex-direction:column; gap:6px;}
.stat-icon{
    width:38px; height:38px;
    border-radius:9px;
    background:var(--aqua-soft);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy);
    margin-bottom:8px;
}
.stat-value{font-size:26px; font-weight:800; color:var(--navy);}
.stat-label{font-size:12.5px; color:var(--text-muted);}

.receipt-card{grid-column:1 / -1;}

.receipt-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px;}
.receipt-head .badge{
    background:#e6f4ec;
    color:var(--green);
    font-size:11.5px;
    font-weight:700;
    padding:5px 10px;
    border-radius:20px;
    white-space:nowrap;
}

.receipt-lines{border-top:1px dashed #d8dae0; padding-top:16px;}
.receipt-line{display:flex; justify-content:space-between; gap:16px; font-size:14px; padding:8px 0; color:#333;}
.receipt-line.total{
    border-top:1px dashed #d8dae0;
    margin-top:6px;
    padding-top:14px;
    font-weight:700;
    font-size:15px;
    color:var(--navy);
}
.receipt-line span:first-child{color:var(--text-muted); font-weight:500;}

.history-card{grid-column:1 / -1;}

.history-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid #eef0f3;
    font-size:14px;
}
.history-row:last-child{border-bottom:none;}

.history-left{display:flex; align-items:center; gap:12px; min-width:0;}
.history-icon{
    width:34px; height:34px;
    border-radius:9px;
    background:var(--aqua-soft);
    color:var(--navy);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.history-title{font-weight:600; color:#171a20; overflow-wrap:anywhere;}
.history-sub{font-size:12px; color:var(--text-muted); margin-top:1px;}

.history-amount{font-weight:700; white-space:nowrap;}
.history-amount.neg{color:var(--red);}
.history-amount.pos{color:var(--green);}

/* Nog geen gegevens om te tonen. */
.leeg-tekst{
    color:var(--text-muted);
    font-size:14px;
    margin:0;
    padding:6px 0;
}

.aqua-voet{
    max-width:1100px;
    margin:0 auto;
    padding:0 24px 40px;
    font-size:12px;
    color:var(--text-muted);
    text-align:center;
}

@media (max-width:900px){
    .stage{grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center;}
    .welcome h1{font-size:40px;}
    .login-panel{justify-self:center;}
    .card-wrap{display:none;}
}
@media (max-width:820px){
    .grid{grid-template-columns:1fr;}
    .stats-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
    .stats-row{grid-template-columns:1fr;}
    .balance-amount{font-size:36px;}
    .topbar{padding:14px 18px;}
    .topbar .user-name{display:none;}
    .login-panel{padding:32px 24px;}
}

/* =====================================================
   OPWAARDEREN
   ===================================================== */
.bedrag-keuze{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:14px;
    margin-top:6px;
}

.bedrag{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:18px 20px;
    border:2px solid #e2e6ee;
    border-radius:12px;
    background:var(--white);
    cursor:pointer;
    text-align:left;
    transition:border-color .15s ease, transform .1s ease;
}
.bedrag:hover{border-color:var(--navy);}
.bedrag:active{transform:translateY(1px);}
.bedrag:disabled{opacity:.5; cursor:progress;}
.bedrag:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

.bedrag .betaald{font-size:24px; font-weight:800; color:var(--navy);}
.bedrag .tegoed{font-size:12.5px; color:var(--green); font-weight:600;}

.uitslag{max-width:520px; margin:0 auto; text-align:center;}
.uitslag h2{margin:0 0 8px; font-size:24px; font-weight:800; color:var(--navy);}
.uitslag .leeg-tekst{max-width:400px; margin:0 auto;}

.uitslag-icoon{
    width:64px; height:64px;
    border-radius:50%;
    margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center;
    font-size:30px;
    font-weight:700;
}
.uitslag-icoon.gelukt{background:#e6f4ec; color:var(--green);}
.uitslag-icoon.mislukt{background:#fbeaea; color:var(--red);}

.uitslag-knoppen{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px;
}
/* De ghost-knop staat hier op wit in plaats van op de donkere saldokaart. */
.uitslag-knoppen .btn-ghost.donker{
    background:transparent;
    color:var(--navy);
    border:1px solid #cfd5e0;
}

/* =====================================================
   KENTEKEN WIJZIGEN
   ===================================================== */
.plate-meta a{color:var(--navy); font-weight:600; text-decoration:underline;}

.kenteken-form{display:flex; flex-direction:column; gap:10px;}

.kenteken-form input{
    width:100%;
    border:3px solid #171a20;
    border-radius:6px;
    padding:10px 14px;
    background:#f6d43c;
    text-align:center;
    font-family:Arial, sans-serif;
    font-size:24px;
    font-weight:800;
    letter-spacing:2px;
    color:#171a20;
    text-transform:uppercase;
    outline:none;
}
.kenteken-form input:focus{box-shadow:0 0 0 3px rgba(22,39,70,0.2);}

.kenteken-knoppen{display:flex; gap:8px;}

.btn-klein{
    padding:8px 14px;
    font-size:12.5px;
    background:var(--navy);
    color:var(--white);
}
.btn-grijs{background:#6c757d;}

.kenteken-melding{font-size:12.5px; min-height:16px;}
.kenteken-melding.fout{color:var(--red); font-weight:600;}

/* Alleen voor schermlezers. */
.visueel-verborgen{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
}