/* Mr. Butler — Huisstijl (conform HTML prototype v4) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --gold:#c9a66b; --gold-dim:rgba(201,166,107,0.18);
  --white:#fff;   --blk:#1a1a1a;
  --g50:rgba(255,255,255,0.5); --g30:rgba(255,255,255,0.3);
  --g15:rgba(255,255,255,0.15); --g08:rgba(255,255,255,0.08);
  --red:#f87171;
}

html,body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background-color:#170d05;
  max-width:430px; margin:0 auto; min-height:100vh; color:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ─── SCREEN (elke pagina is een screen) ─── */
.screen{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background-color:#170d05;
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}

.bg-1{ background-image:
  radial-gradient(ellipse 120% 52% at 28%  4%, rgba(145,68,8,0.46) 0%, transparent 52%),
  radial-gradient(ellipse  80% 42% at 78% 93%, rgba(90,40,5,0.34)  0%, transparent 50%),
  linear-gradient(rgba(20,9,1,0.68), rgba(14,5,0,0.76)),
  url('/img/1eBoeking.jpg');
}

.bg-2{ background-image:
  radial-gradient(ellipse 120% 52% at 28%  4%, rgba(145,68,8,0.46) 0%, transparent 52%),
  radial-gradient(ellipse  80% 42% at 78% 93%, rgba(90,40,5,0.34)  0%, transparent 50%),
  linear-gradient(rgba(20,9,1,0.68), rgba(14,5,0,0.76)),
  url('/img/2e.jpg');
}

.bg-3{ background-image:
  radial-gradient(ellipse 120% 52% at 28%  4%, rgba(145,68,8,0.46) 0%, transparent 52%),
  radial-gradient(ellipse  80% 42% at 78% 93%, rgba(90,40,5,0.34)  0%, transparent 50%),
  linear-gradient(rgba(20,9,1,0.68), rgba(14,5,0,0.76)),
  url('/img/3e.jpg');
}

/* ─── APP HEADER ─── */
.app-hdr{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 20px 14px;flex-shrink:0;
}
.hdr-logo{display:flex;align-items:center;gap:10px}
.hdr-ring{
  width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hdr-ring svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hdr-nm{font-size:12px;font-weight:800;letter-spacing:1.8px;color:#fff}
.hdr-sub{font-size:8px;letter-spacing:1.5px;color:rgba(255,255,255,0.38);text-transform:uppercase;margin-top:1px}
.hdr-menu{color:rgba(255,255,255,0.65);font-size:19px;cursor:pointer;background:none;border:none;padding:4px}

/* ─── STEP INDICATOR ─── */
.step-ind{
  display:flex;align-items:center;justify-content:center;
  padding:2px 30px 14px;gap:0;flex-shrink:0;
}
.si-dot{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .2s;
}
.si-dot i{font-size:11px;color:rgba(255,255,255,0.3)}
.si-dot.active{border-color:var(--gold);background:var(--gold)}
.si-dot.active i{color:#1a1a1a}
.si-dot.done{border-color:rgba(255,255,255,0.35);background:var(--g08)}
.si-dot.done i{color:rgba(255,255,255,0.55)}
.si-line{flex:1;height:1px;background:rgba(255,255,255,0.18);max-width:44px}
.si-line.done{background:rgba(255,255,255,0.38)}

/* ─── STAP LABELS + TITELS ─── */
.step-lbl{
  padding:0 20px 5px;font-size:10px;font-weight:700;
  letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;flex-shrink:0;
}
.screen-title{padding:0 20px 5px;font-size:24px;font-weight:800;color:#fff;line-height:1.25;flex-shrink:0}
.screen-sub{padding:0 20px 16px;font-size:13px;color:rgba(255,255,255,0.45);line-height:1.5;flex-shrink:0}

/* ─── CONTENT ─── */
.content{flex:1;padding:0 14px;overflow-y:auto}

/* ─── SCHOENTYPE KAARTEN ─── */
.shoe-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.shoe-card{
  background:#fff;border:2px solid transparent;border-radius:14px;
  padding:18px 14px 14px;cursor:pointer;transition:all .15s;position:relative;
}
.shoe-card:active{transform:scale(.97)}
.shoe-card.sel{border-color:var(--gold)}
.chk{
  position:absolute;top:9px;right:9px;width:20px;height:20px;
  background:var(--gold);border-radius:50%;
  display:none;align-items:center;justify-content:center;
}
.chk::after{content:'✓';color:#fff;font-size:11px;font-weight:900}
.shoe-card.sel .chk{display:flex}
.svc-card.sel .chk{display:flex}
.shoe-svg-wrap{width:56px;height:38px;margin-bottom:10px;color:#1a1a1a}
.shoe-svg-wrap svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shoe-nm{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:2px}
.shoe-sub{font-size:11px;color:#888}
.shoe-pr{font-size:11px;color:var(--gold);font-weight:700;margin-top:5px}

/* ─── AANTAL ─── */
.qty-wrap{
  background:var(--g08);border:1px solid var(--g15);border-radius:12px;
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.qty-lbl{font-size:14px;font-weight:600;color:#fff}
.qty-ctrl{display:flex;align-items:center;gap:16px}
.qty-btn{
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid var(--g30);background:none;color:#fff;
  font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.qty-n{font-size:16px;font-weight:800;color:#fff;min-width:20px;text-align:center}

/* ─── FEATURE STRIP ─── */
.feature-strip{
  display:flex;justify-content:space-around;
  padding:12px 10px;border-top:1px solid var(--g08);flex-shrink:0;
}
.feat{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:rgba(255,255,255,0.4);text-align:center;max-width:88px;line-height:1.35}
.feat i{font-size:14px;color:var(--gold)}

/* ─── DIENST KAARTEN ─── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.svc-card{
  background:#fff;border:2px solid transparent;border-radius:14px;
  padding:14px 12px;cursor:pointer;transition:all .15s;position:relative;
}
.svc-card:active{transform:scale(.97)}
.svc-card.sel{border-color:var(--gold)}
.svc-card.dim{opacity:.3;pointer-events:none}
.svc-ico{font-size:18px;color:#1a1a1a;margin-bottom:7px}
.svc-nm{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:2px}
.svc-pr{font-size:12px;font-weight:700;color:var(--gold);margin-bottom:2px}
.svc-desc{font-size:10px;color:#999}
.filter-note{font-size:11px;color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:6px}

/* ─── PRIJS BAR ─── */
.price-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;border-top:1px solid var(--g08);flex-shrink:0;
}
.pb-lbl{font-size:12px;color:rgba(255,255,255,0.45)}
.pb-svc{font-size:11px;color:rgba(255,255,255,0.35);margin-top:2px}
.pb-amt{font-size:20px;font-weight:900;color:#fff}

/* ─── DELIVERY BANNER ─── */
.delivery-banner{
  margin:0 14px 14px;
  background:rgba(201,166,107,0.1);border:1px solid rgba(201,166,107,0.28);
  border-radius:10px;padding:11px 14px;
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gold);
  flex-shrink:0;
}
.delivery-banner i{font-size:14px;flex-shrink:0}
.delivery-banner span b{font-weight:700;display:block;margin-bottom:1px}

/* ─── KNOPPEN ─── */
.bbar{padding:10px 14px 12px;display:flex;gap:10px;flex-shrink:0}
.btn{
  flex:1;padding:14px;border-radius:12px;font-size:14px;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:8px;transition:opacity .12s,transform .1s;font-family:inherit;border:none;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-back{background:transparent;border:1.5px solid var(--g30);color:#fff}
.btn-next{background:var(--gold);color:#1a1a1a}
.btn-next:disabled{background:rgba(201,166,107,0.28);color:rgba(255,255,255,0.4)}
.btn-full{width:100%;flex:none}

/* ─── BOTTOM TAB NAV ─── */
.tab-nav{
  display:flex;
  background:rgba(12,7,2,0.96);border-top:1px solid var(--g08);
  padding:8px 0 22px;flex-shrink:0;
}
.tab-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:5px 0;cursor:pointer;font-size:10px;font-weight:600;
  color:rgba(255,255,255,0.35);
}
.tab-item.active{color:var(--gold)}
.tab-item i{font-size:19px}

/* ─── KALENDER ─── */
.cal-card{
  background:var(--g08);border:1px solid var(--g15);border-radius:14px;
  padding:16px;margin-bottom:16px;
}
.cal-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-nav{background:none;border:none;font-size:22px;cursor:pointer;color:rgba(255,255,255,0.55);padding:2px 8px}
.cal-month{font-size:14px;font-weight:800;color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dn{text-align:center;font-size:10px;font-weight:700;color:rgba(255,255,255,0.3);padding:4px 0}
.cd{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:12px;cursor:pointer;transition:all .15s;
  font-weight:500;color:#fff;border:none;background:transparent;
}
.cd.past,.cd.sun{color:rgba(255,255,255,0.18);cursor:not-allowed}
.cd.avail:hover{background:rgba(201,166,107,0.2)}
.cd.today{font-weight:900;color:var(--gold)}
.cd.chosen{background:var(--gold);color:#1a1a1a;font-weight:800}

/* ─── DATUM KAARTEN ─── */
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.date-card{background:var(--g08);border:1px solid var(--g15);border-radius:12px;padding:12px 14px}
.dc-lbl{font-size:9px;font-weight:700;letter-spacing:1.2px;color:rgba(255,255,255,0.38);text-transform:uppercase;margin-bottom:5px}
.dc-val{font-size:14px;font-weight:800;color:#fff;margin-bottom:3px}
.dc-sub{font-size:10px;color:rgba(255,255,255,0.3)}

/* ─── TIJDSLOTEN ─── */
.ts-head{font-size:13px;font-weight:700;color:#fff;margin-bottom:10px;margin-top:4px}
.ts-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ts-chip{
  padding:9px 13px;border-radius:30px;border:1.5px solid var(--g15);
  font-size:12px;font-weight:700;cursor:pointer;background:var(--g08);
  color:#fff;transition:all .15s;white-space:nowrap;
}
.ts-chip.sel{background:var(--gold);color:#1a1a1a;border-color:var(--gold)}
.ts-chip.off{color:rgba(255,255,255,0.2);cursor:not-allowed;text-decoration:line-through}

/* ─── LOCATIE ─── */
.loc-card{
  background:var(--g08);border:1px solid var(--g15);border-radius:12px;
  padding:12px 14px;display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;
}
.loc-dot{color:var(--gold);font-size:13px;flex-shrink:0;margin-top:1px}
.loc-addr{font-size:13px;font-weight:700;color:#fff}
.loc-sub{font-size:11px;color:rgba(255,255,255,0.38);margin-top:2px}

/* ─── NOTIFICATIE TOGGLE ─── */
.nt-group{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1.5px solid var(--g15);border-radius:10px;overflow:hidden;
  background:var(--g08);margin-bottom:16px;
}
.nt-opt{
  padding:12px 6px;text-align:center;cursor:pointer;font-size:11px;
  font-weight:700;color:rgba(255,255,255,0.38);
  display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .15s;
}
.nt-opt+.nt-opt{border-left:1.5px solid var(--g15)}
.nt-opt.sel{background:var(--gold);color:#1a1a1a}
.nt-opt i{font-size:14px}

/* ─── SEC LABEL ─── */
.sec-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,0.38);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}

/* ─── OVERZICHT ─── */
.ov-block{background:var(--g08);border:1px solid var(--g15);border-radius:14px;overflow:hidden;margin-bottom:12px}
.ov-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-bottom:1px solid var(--g08)}
.ov-row:last-child{border-bottom:none}
.ov-ico{color:var(--gold);width:14px;text-align:center;flex-shrink:0;font-size:12px;margin-top:2px}
.ov-lbl{color:rgba(255,255,255,0.38);flex-shrink:0;font-size:12px;min-width:70px}
.ov-val{margin-left:auto;font-weight:700;color:#fff;text-align:right;font-size:13px}
.ov-edit{font-size:10px;color:var(--gold);font-weight:700;cursor:pointer;margin-left:8px;flex-shrink:0}
.svc-tbl{background:var(--g08);border:1px solid var(--g15);border-radius:14px;overflow:hidden;margin-bottom:12px}
.svc-trow{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--g08)}
.svc-trow:last-child{border-bottom:none}
.svc-tn{color:#fff;font-weight:600;font-size:13px}
.svc-tq{color:rgba(255,255,255,0.35);font-size:11px}
.svc-tp{font-weight:800;color:#fff;font-size:13px}

/* ─── TOTALEN ─── */
.totals{background:var(--g08);border:1px solid var(--g15);border-radius:14px;overflow:hidden;margin-bottom:20px}
.tot-row{display:flex;justify-content:space-between;padding:10px 14px;font-size:13px;color:rgba(255,255,255,0.45);border-bottom:1px solid var(--g08)}
.tot-final{display:flex;justify-content:space-between;padding:13px 14px;background:rgba(255,255,255,0.05)}
.tot-fl{color:#fff;font-size:13px;font-weight:800}
.tot-fr{color:var(--gold);font-size:16px;font-weight:900}

/* ─── FORMULIER ─── */
.input-group{margin-bottom:14px}
.input-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,0.45);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;display:block}
.input-row{
  display:flex;align-items:center;background:var(--g08);
  border:1.5px solid var(--g15);border-radius:11px;padding:0 14px;gap:10px;transition:border-color .15s;
}
.input-row:focus-within{border-color:var(--gold)}
.input-row i{color:rgba(255,255,255,0.28);font-size:14px;flex-shrink:0}
.input-row input{flex:1;border:none;outline:none;padding:13px 0;font-size:14px;font-weight:600;background:none;color:#fff;font-family:inherit}
.input-row input::placeholder{color:rgba(255,255,255,0.22);font-weight:400}
.input-opt{font-size:10px;color:rgba(255,255,255,0.28);flex-shrink:0}
.input-err{font-size:11px;color:var(--red);margin-top:4px}
.info-box{
  background:rgba(201,166,107,0.07);border:1px solid rgba(201,166,107,0.18);
  border-radius:12px;padding:14px;margin-top:6px;display:flex;gap:10px;align-items:flex-start;
}
.info-box i{color:var(--gold);margin-top:2px;flex-shrink:0}
.info-box span{font-size:12px;color:rgba(255,255,255,0.38);line-height:1.5}

/* ─── WELKOMST ─── */
.welcome-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:60px 24px 0}
.w-logo-ring{width:88px;height:88px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.w-logo-ring svg{width:50px;height:50px;stroke:var(--gold);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.w-brand{font-size:26px;font-weight:900;color:#fff;letter-spacing:3px;margin-bottom:4px;text-align:center}
.w-brand-sub{font-size:8.5px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.38);text-align:center}
.w-tag{font-size:13px;color:rgba(255,255,255,0.45);margin-top:14px;margin-bottom:40px;text-align:center}
.w-actions{width:100%;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.w-loc{text-align:center;font-size:11px;color:rgba(255,255,255,0.28);padding:16px 0 30px}

/* ─── BEVESTIGING ─── */
.conf-hero{display:flex;flex-direction:column;align-items:center;padding:32px 20px 20px;text-align:center}
.conf-ring{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.conf-ring i{color:var(--gold);font-size:26px}
.conf-h{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px}
.conf-s{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6;max-width:270px}
.ref-block{background:var(--g08);border:1px solid var(--g15);border-radius:14px;padding:18px;text-align:center;margin-bottom:12px}
.ref-lbl{font-size:9px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,0.38);text-transform:uppercase;margin-bottom:8px}
.ref-num{font-size:22px;font-weight:900;color:var(--gold);letter-spacing:1px}
.next-steps{background:var(--g08);border:1px solid var(--g15);border-radius:14px;padding:14px;margin-bottom:12px}
.ns-row{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.ns-num{width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1a1a1a;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ns-txt{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.5}

/* ─── FOUT MELDING ─── */
.fout-balk{
  background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);
  border-radius:10px;padding:12px 14px;margin:0 14px 12px;
  font-size:12px;color:var(--red);
}