/* =====================================================================
   css/rekening.css: open rekening (rekening-*.php, afrekenen.php, scannen.php)
   Tegels, namen-sheet en actieknop zijn letterlijk overgenomen uit de
   inline stijl van rondje.php, zodat beide schermen er hetzelfde uitzien.
   De pagina's gebruiken ook body.rondje-page voor de gedeelde regels in style.css.
   ===================================================================== */

/* ---- Kopjes en labels ---- */
.rk-sub { font-size:.85em; color:#a09890; margin:-.5em 0 1.1em; }
.veld-label { font-size:.82em; font-weight:600; color:var(--text); margin:1.1em 0 .35em; }

/* ---- Tegelraster (uit rondje.php) ---- */
.actie-band { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.actie-knop {
  box-sizing:border-box; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:51px; padding:.5em .6em; background:var(--card-bg); border:none;
  border-radius:14px; box-shadow:0 2px 6px rgba(0,0,0,.07); color:var(--text);
  font-weight:600; font-size:.95em; line-height:1.2; cursor:pointer; text-decoration:none;
}
.actie-knop:active { background:#fff8f3; }
.actie-icoon { font-size:1.1em; line-height:1; }
.tegel-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px; }
.tegel {
  background:var(--card-bg); border-radius:14px; padding:14px 8px 12px; text-align:center; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.07); position:relative; min-height:88px; display:flex;
  flex-direction:column; justify-content:center; align-items:center; border:2px solid transparent;
  transition:border-color .15s, background .15s; -webkit-tap-highlight-color:transparent; user-select:none;
}
.tegel:active { background:#f5ede3; }
.tegel.heeft-selectie { border-color:var(--primary); }
.tegel-naam { font-weight:700; font-size:1em; line-height:1.3; word-break:break-word; }
.tegel-prijs { font-size:.88em; color:#999; margin-top:5px; }
.tegel-badge {
  position:absolute; top:-7px; right:-7px; background:var(--primary); color:#fff; border-radius:50%;
  width:22px; height:22px; font-size:.72em; font-weight:700; display:flex; align-items:center;
  justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.tegel-nieuw { background:#fff8f3; border:2px dashed var(--primary); }
.tegel-nieuw .tegel-naam { color:var(--primary); }
.tegel-nieuw .tegel-prijs { color:var(--primary); opacity:.7; }
.tegel-x { position:absolute; top:4px; right:6px; color:var(--primary); font-size:1em; cursor:pointer; line-height:1; z-index:1; }
.tegel-sub { font-size:.72em; color:#aaa; margin-top:3px; }

/* ---- Categorie-uitklappers ---- */
.rk-cat { margin-bottom:10px; }
.rk-cat-kop {
  box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-height:48px; padding:.55em .9em; background:var(--card-bg); border:none; border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.07); color:var(--text); font-family:inherit; font-weight:600;
  font-size:.95em; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.rk-cat-kop .rk-cat-rechts { display:flex; align-items:center; gap:8px; color:var(--primary); }
.rk-cat-teller { background:var(--primary); color:#fff; border-radius:11px; min-width:22px; height:22px; padding:0 6px; box-sizing:border-box; font-size:.75em; display:flex; align-items:center; justify-content:center; }
.rk-cat .tegel-grid { margin-top:10px; margin-bottom:0; }
.rk-cat-aantal { font-weight:400; color:#a09890; }
.rk-cat-lijst { margin-top:8px; }

/* ---- Namen-sheet (uit rondje.php) ---- */
.naam-picker {
  position:fixed; top:0; bottom:0; left:0; right:0; width:100%; background:var(--bg, #fdf6f0); z-index:1100;
  transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;
  overflow:hidden; box-shadow:-4px 0 16px rgba(0,0,0,.1); pointer-events:none; visibility:hidden;
}
@media (min-width:480px) {
  .naam-picker { left:auto; width:480px; right:calc(50% - 240px); transform:translateX(calc(100% + (50vw - 240px))); }
}
.naam-picker.open { transform:translateX(0); pointer-events:all; visibility:visible; }
.np-header { display:flex; flex-direction:column; padding:calc(16px + env(safe-area-inset-top, 0px)) 16px 14px; border-bottom:1px solid #e8ddd4; background:var(--bg, #fdf6f0); flex-shrink:0; }
.np-header-naam { font-weight:700; font-size:1.6em; color:var(--primary); line-height:1.2; }
.np-header-prijs { font-size:1.05em; color:#888; margin-top:4px; }
.np-body { flex:1; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; }
.np-lid-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; }
.np-lid-label { display:flex; align-items:center; gap:12px; font-size:1.1em; cursor:pointer; flex:1; -webkit-tap-highlight-color:transparent; }
.np-lid-label input[type="checkbox"] {
  box-sizing:border-box; -webkit-appearance:none; appearance:none; width:24px; height:24px; flex-shrink:0;
  margin:0; cursor:pointer; border:2px solid var(--primary); border-radius:6px; background:#fff; position:relative;
}
.np-lid-label input[type="checkbox"]:checked { background:var(--primary); }
.np-lid-label input[type="checkbox"]:checked::after {
  content:""; position:absolute; left:8px; top:3px; width:5px; height:11px; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.np-footer {
  padding:14px 16px; padding-bottom:max(14px, env(safe-area-inset-bottom, 14px)); background:var(--bg, #fdf6f0);
  border-top:1px solid #e8ddd4; flex-shrink:0; display:flex; align-items:center; gap:8px;
}
.np-footer .btn { flex:1; margin:0; }
.np-back-btn-round {
  background:var(--primary); color:#fff; width:48px; height:48px; border-radius:50%; display:flex;
  justify-content:center; align-items:center; flex-shrink:0; border:none; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-tap-highlight-color:transparent;
}
.np-scheiding { border-top:1px solid #f0e8e0; margin:8px 0 2px; padding-top:10px; font-size:.72em; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:#a09890; }
.np-iedereen { font-weight:600; }
.np-uitleg { font-size:.9em; color:#b85c00; margin-top:10px; }
.np-stap-label { font-size:.9em; color:#999; margin-bottom:12px; }
.np-veld { margin-bottom:14px; }
.np-veld label { display:block; font-size:.82em; font-weight:600; margin-bottom:.35em; }
.np-veld input, .rk-veld input, .rk-veld select {
  box-sizing:border-box; width:100%; padding:.7em .8em; font-family:inherit; font-size:1em;
  border:2px solid #ecdfd6; border-radius:12px; background:#fff; color:var(--text);
}
.np-veld input:focus, .rk-veld input:focus, .rk-veld select:focus { outline:none; border-color:var(--primary); }
.np-aantal { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.05); margin-bottom:12px; font-weight:600; }
.np-item { display:flex; justify-content:space-between; align-items:center; padding:13px 12px; border-radius:10px; margin-bottom:6px; background:var(--card-bg); box-shadow:0 1px 4px rgba(0,0,0,.06); cursor:pointer; }
.np-item span:first-child { font-weight:600; }
.np-item span:last-child { color:var(--primary); font-weight:700; white-space:nowrap; }
.np-cat-kop { font-size:.72em; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:#a09890; margin:12px 0 6px; }

/* ---- Kaarten en lijsten ---- */
.rk-kaart { background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.05); overflow:hidden; margin-bottom:.8em; }
.rk-rij { display:flex; justify-content:space-between; align-items:center; gap:.6em; padding:12px 14px; }
.rk-rij + .rk-rij { border-top:1px solid #f0e8e0; }
.rk-rij .rk-naam { font-weight:600; min-width:0; }
.rk-rij .rk-meta { display:block; font-weight:400; font-size:.82em; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-rij .rk-bedrag { font-weight:700; color:var(--primary); white-space:nowrap; flex-shrink:0; }
.rk-rij.rk-totaal .rk-naam, .rk-rij.rk-totaal .rk-bedrag { font-weight:700; }
a.rk-rij { text-decoration:none; color:var(--text); }
.rk-pijl { color:var(--primary); font-size:1.2em; flex-shrink:0; line-height:1; }
.aantal-badge {
  display:inline-flex; align-items:center; justify-content:center; background:var(--primary); color:#fff;
  font-weight:700; font-size:.85em; border-radius:8px; padding:.15em .5em; min-width:26px; text-align:center;
}
.rk-ober .rk-rij { padding:14px; }
.rk-ober .rk-ober-naam { font-weight:700; font-size:1.25em; }
.rk-ober .aantal-badge { font-size:1.05em; min-width:36px; }
.rk-ober-kop { font-size:.72em; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:#a09890; padding:12px 14px 2px; }

/* ---- Keuzes (route, kaartbron) ---- */
.rk-keuze {
  display:flex; align-items:center; justify-content:space-between; gap:.6em; background:#fff; border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); padding:.85em 1em; margin-bottom:.55em; text-decoration:none;
  color:var(--text); font-weight:600; border:2px solid transparent; cursor:pointer;
}
.rk-keuze small { display:block; font-weight:400; font-size:.8em; color:#999; margin-top:2px; }
.rk-keuze.is-gekozen { border-color:var(--primary); }
.rk-vink { width:22px; height:22px; border:2px solid #ddd; border-radius:50%; flex-shrink:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.rk-keuze.is-gekozen .rk-vink { background:var(--primary); border-color:var(--primary); }
.rk-keuze.is-gekozen .rk-vink::after { content:""; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:translateY(-1px) rotate(45deg); }
.rk-keuze input[type="radio"] { display:none; }

/* ---- Meldingen ---- */
.rk-melding { background:#fff3e8; border:1.5px solid var(--primary); border-radius:12px; padding:.7em .9em; color:#b85c00; font-size:.88em; line-height:1.45; margin-bottom:1em; }
.rk-melding strong { display:block; font-weight:600; }
.sc-balk { height:8px; background:#fff; border:1px solid var(--accent); border-radius:4px; overflow:hidden; margin:.5em 0 .45em; }
.sc-balk-vulling { height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--primary)); border-radius:4px; transition:width .25s linear; }
.rk-uitleg { font-size:.8em; color:#999; line-height:1.5; margin:.3em 0 1em; }
.rk-fout { background:#ffe3dc; color:#b23c17; border:1px solid #f5b6a9; padding:10px 12px; border-radius:10px; margin-bottom:1em; font-size:.9em; }

/* ---- Knoppenbalk onderaan: gelijke hoogte, rand telt niet mee ---- */
.rk-knop {
  box-sizing:border-box; flex:1; margin:0; min-height:55px; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--primary); border-radius:var(--border-radius); font-family:inherit; font-size:1em;
  font-weight:600; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--primary); color:#fff; padding:.6em;
}
.rk-knop-licht { background:#fff; color:var(--primary); }
.rk-knop-rood { background:#fff; color:#d32f2f; border-color:#d32f2f; }
.rk-terug {
  background:var(--primary); color:#fff; width:48px; height:48px; border-radius:50%; display:flex;
  justify-content:center; align-items:center; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.2); text-decoration:none;
}
.rk-rij-knoppen { display:flex; gap:8px; }

/* ---- Scannen: controlelijst ---- */
.sc-rij { align-items:flex-start; }
.sc-rij .np-lid-label { padding-top:6px; }
.sc-velden { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.sc-naam, .sc-prijs {
  box-sizing:border-box; font-family:inherit; font-size:.95em; color:var(--text); background:transparent;
  border:1.5px solid transparent; border-radius:8px; padding:5px 6px;
}
.sc-naam { width:100%; font-weight:600; }
.sc-prijs { width:76px; flex-shrink:0; text-align:right; font-weight:700; color:var(--primary); }
.sc-naam:focus, .sc-prijs:focus { outline:none; border-color:var(--primary); background:#fff; }
.sc-cat {
  box-sizing:border-box; display:block; width:100%; margin:1.1em 0 .35em; padding:3px 6px; font-family:inherit;
  font-size:.82em; font-weight:600; color:var(--text); background:transparent; border:1.5px dashed transparent; border-radius:8px;
}
.sc-cat:hover { border-color:#ecdfd6; }
.sc-cat:focus { outline:none; border-color:var(--primary); background:#fff; }
.sc-catkeuze {
  align-self:flex-start; margin-left:6px; padding:2px 4px; font-family:inherit; font-size:.75em; color:#888;
  background:transparent; border:1px solid #ecdfd6; border-radius:6px; max-width:100%;
}
.sc-twijfel { background:#fff8e1; }
.sc-reden { font-size:.78em; color:#7a5800; padding-left:6px; }
.sc-vast { opacity:.6; }
.sc-tag { align-self:flex-start; font-size:.7em; font-weight:600; border-radius:20px; padding:1px 8px; margin-left:6px; }
.sc-nieuw { background:#e8f7eb; color:#237a3b; }
.sc-gelijk { background:#f1efe8; color:#888; }
.sc-anders { background:#fff3e8; color:#b85c00; }

/* ---- Bewaarde kaarten in een plaats (rekening openen) ---- */
.rk-sug { margin:-.4em 0 .8em; border:1.5px solid var(--primary); }
.rk-sugrij { cursor:pointer; padding:11px 14px; }
.rk-sugrij:hover, .rk-sugrij:active { background:#fff3e8; }
.rk-kaartrij { cursor:pointer; }
.rk-kaartrij .rk-meta { white-space:normal; }
.rk-kaartrij.is-gekozen { background:#fff3e8; }
.rk-kaartrij.is-gekozen .rk-pijl { font-weight:700; }

/* ---- Bibliotheek-zoekresultaten ---- */
.rk-zoek-leeg { font-size:.82em; color:#a09890; padding:.2em .2em .6em; }