:root{--bgs-primary:#d72bd7;--bgs-accent:#8e39ef;--bgs-bg:#fff8fd;--bgs-card:#fff;--bgs-text:#25172c;--bgs-muted:#756e7b;--bgs-line:#eadff0;--bgs-good:#2e7f69;--bgs-danger:#b83955}
html,body.bgs-frontend-page{margin:0;min-height:100%;background:linear-gradient(180deg,var(--bgs-bg),#f8f2f8);color:var(--bgs-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
*{box-sizing:border-box}.bgs-frontend-shell{max-width:680px;margin:0 auto;padding:0 7px 78px}.bgs-front-top{position:sticky;top:0;z-index:30;margin:0 -7px 7px;padding:6px 8px;background:color-mix(in srgb,var(--bgs-bg) 94%,white);backdrop-filter:blur(12px);border-bottom:1px solid var(--bgs-line);display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}.bgs-front-logo{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,var(--bgs-primary),var(--bgs-accent));display:grid;place-items:center;color:#fff;font-size:13px;font-weight:950}.bgs-front-brand strong{display:block;font-size:12px;line-height:1}.bgs-front-brand span{display:block;font-size:8px;color:var(--bgs-muted);margin-top:2px}.bgs-front-top .bgs-btn{min-height:36px;padding:7px 9px;font-size:9px}.bgs-front-hero{border-radius:18px;padding:16px 13px;background:linear-gradient(145deg,var(--bgs-primary),var(--bgs-accent));color:#fff;margin:8px 0;box-shadow:0 8px 22px color-mix(in srgb,var(--bgs-primary) 22%,transparent)}.bgs-front-hero h1{font-size:22px;line-height:1.04;margin:0 0 7px}.bgs-front-hero p{font-size:10px;line-height:1.45;margin:0;opacity:.9}.bgs-card,.bgs-front-card{background:var(--bgs-card);border:1px solid var(--bgs-line);border-radius:17px;box-shadow:0 7px 20px rgba(88,39,109,.06);padding:11px;margin:7px 0}.bgs-front-card h2{font-size:17px;margin:0 0 6px}.bgs-front-card h3{font-size:14px;margin:0 0 5px}.bgs-muted{color:var(--bgs-muted);font-size:10px;line-height:1.42}.bgs-btn{border:1px solid var(--bgs-line);background:#f5eef7;color:#62288d;border-radius:11px;padding:8px 10px;min-height:38px;font-weight:900;font-size:10px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:5px}.bgs-btn-primary{border:0;background:linear-gradient(145deg,var(--bgs-primary),var(--bgs-accent));color:#fff}.bgs-btn-danger{background:#fff0f3;border-color:#efccd5;color:var(--bgs-danger)}.bgs-btn-small{min-height:30px;padding:5px 8px;font-size:9px}.bgs-grid{display:grid;gap:7px}.bgs-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.bgs-field{display:grid;gap:4px}.bgs-field label{font-size:9px;font-weight:850;color:var(--bgs-muted)}.bgs-field input,.bgs-field select,.bgs-field textarea{width:100%;border:1px solid var(--bgs-line);background:#fff;color:var(--bgs-text);border-radius:10px;padding:8px 9px;font-size:11px;outline:none}.bgs-field textarea{min-height:62px;resize:vertical}.bgs-field input:focus,.bgs-field select:focus,.bgs-field textarea:focus{border-color:var(--bgs-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--bgs-primary) 12%,transparent)}.bgs-switch{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:var(--bgs-muted)}.bgs-switch input{accent-color:var(--bgs-primary);margin-top:1px}.bgs-auth-tabs,.bgs-client-tabs{display:flex;gap:4px;overflow:auto;background:#f4edf6;border-radius:12px;padding:4px;margin-bottom:9px}.bgs-auth-tab,.bgs-client-tab{flex:1;white-space:nowrap;border:0;background:transparent;border-radius:9px;padding:7px 8px;font-size:9px;font-weight:900;color:#776a7d}.bgs-auth-tab.is-active,.bgs-client-tab.is-active{background:#fff;color:var(--bgs-accent);box-shadow:0 4px 12px rgba(64,28,76,.08)}.bgs-notice{padding:8px 9px;border-radius:10px;background:#f5eefb;border:1px solid #e4d3f1;font-size:10px;line-height:1.45;color:#5f3e73}.bgs-notice-danger{background:#fff0f3;border-color:#efcbd4;color:#8e3248}.bgs-notice-success{background:#eaf8f2;border-color:#cce9dc;color:#226c52}.bgs-status{display:flex;gap:9px;align-items:flex-start}.bgs-status-icon{width:34px;height:34px;border-radius:11px;background:#f2e8fb;display:grid;place-items:center;flex:none}.bgs-account-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.bgs-badge{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:8px;font-weight:950;background:#eaf8f2;color:#28735a}.bgs-badge.warn{background:#fff4dc;color:#936100}.bgs-badge.bad{background:#fff0f3;color:#a13c53}.bgs-book-title{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.bgs-book-title h2{margin:0}.bgs-book-steps{display:flex;gap:5px;overflow:auto;margin:8px 0}.bgs-step{flex:1;min-width:88px;text-align:center;border:1px solid #e3d9e9;background:#f2edf4;color:#7a7080;border-radius:10px;padding:7px 6px;font-size:8px;font-weight:900;white-space:nowrap}.bgs-step.done{background:#e8f6f1;color:#2e7f69;border-color:#cde8de}.bgs-step.active{background:#efe3fb;color:#6d2dad;border-color:#d6bcef}.bgs-service-list,.bgs-extra-list{display:grid;gap:7px}.bgs-service{border:1px solid var(--bgs-line);background:#fff;border-radius:14px;padding:10px;text-align:left;color:var(--bgs-text);width:100%}.bgs-service.is-selected{border-color:#d0b2ed;box-shadow:0 0 0 1px #d0b2ed}.bgs-service-tag{display:inline-flex;background:#f0e3fb;color:#6d349a;padding:4px 6px;border-radius:999px;font-size:8px;font-weight:900}.bgs-service h3{font-size:14px;margin:6px 0 4px}.bgs-service p{font-size:9px;color:var(--bgs-muted);line-height:1.4;margin:0}.bgs-service-meta{display:flex;justify-content:space-between;font-size:10px;font-weight:900;margin-top:8px}.bgs-extra{display:grid;grid-template-columns:auto 1fr;gap:8px;border:1px solid var(--bgs-line);border-radius:14px;padding:9px;background:#fff}.bgs-extra input{width:17px;height:17px;accent-color:var(--bgs-primary)}.bgs-extra.bgs-extra-quantity{grid-template-columns:minmax(0,1fr) 105px;align-items:center}.bgs-extra.bgs-extra-quantity input[type=number]{width:100%;height:auto;accent-color:auto}.bgs-extra strong{font-size:12px}.bgs-extra p{font-size:9px;color:var(--bgs-muted);margin:3px 0}.bgs-extra small{font-size:9px;color:var(--bgs-muted)}.bgs-calendar-head{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:5px}.bgs-calendar-head strong{font-size:14px}.bgs-calendar-nav{display:flex;gap:4px}.bgs-calendar-nav button{width:31px;height:31px;border-radius:9px;border:1px solid var(--bgs-line);background:#fff;color:var(--bgs-text)}.bgs-calendar-dow,.bgs-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.bgs-calendar-dow div{text-align:center;font-size:7px;font-weight:900;color:var(--bgs-muted);padding:3px}.bgs-day{height:31px;border:1px solid var(--bgs-line);border-radius:9px;background:#fff;color:var(--bgs-text);font-size:10px;font-weight:900;position:relative}.bgs-day:disabled{opacity:.32}.bgs-day.has-space:after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:#5eaf83}.bgs-day.is-selected{border-color:var(--bgs-accent);background:#f8f1fd}.bgs-slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.bgs-slot{border:1px solid var(--bgs-line);border-radius:9px;background:#fff;color:var(--bgs-text);padding:7px 4px;font-size:9px;font-weight:900}.bgs-slot.is-selected{background:linear-gradient(145deg,var(--bgs-primary),var(--bgs-accent));color:#fff;border:0}.bgs-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}.bgs-book-summary{border:1px solid var(--bgs-line);border-radius:12px;overflow:hidden}.bgs-book-summary-row{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-bottom:1px solid var(--bgs-line);font-size:9px}.bgs-book-summary-row:last-child{border:0}.bgs-appointment{border:1px solid var(--bgs-line);border-radius:13px;padding:9px;margin-top:7px}.bgs-appointment-title{display:flex;justify-content:space-between;gap:8px}.bgs-appointment-title strong{font-size:11px}.bgs-bottom-nav{position:fixed;z-index:40;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--bgs-line);padding:5px 6px calc(5px + env(safe-area-inset-bottom))}.bgs-bottom-inner{max-width:680px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.bgs-bottom-btn{border:0;background:transparent;color:#7a7180;font-size:8px;font-weight:900;padding:5px 3px}.bgs-bottom-btn span{display:block;font-size:15px;line-height:1;margin-bottom:2px}.bgs-bottom-btn.is-active{color:var(--bgs-accent)}.bgs-theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.bgs-theme{border:1px solid var(--bgs-line);border-radius:12px;background:#fff;padding:8px;text-align:left}.bgs-theme.is-active{outline:2px solid var(--bgs-primary)}.bgs-swatches{display:flex;gap:3px;margin-bottom:5px}.bgs-swatch{width:15px;height:15px;border-radius:5px}.bgs-color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.bgs-color-grid input[type=color]{height:34px;padding:2px}.bgs-splash{min-height:55vh;display:grid;place-items:center;align-content:center;gap:8px}.bgs-logo-orb{width:45px;height:45px;border-radius:15px;background:linear-gradient(145deg,var(--bgs-primary),var(--bgs-accent));display:grid;place-items:center;color:#fff;font-weight:950}.bgs-toast-root{position:fixed;z-index:100;top:10px;left:8px;right:8px}.bgs-toast{max-width:480px;margin:5px auto;background:#2b2030;color:#fff;border-radius:11px;padding:8px 10px;font-size:10px;box-shadow:0 8px 25px rgba(0,0,0,.18)}.bgs-toast.success{background:#176a4d}.bgs-toast.error{background:#8d3249}
@media(min-width:600px){.bgs-frontend-shell{padding-top:8px}.bgs-service-list{grid-template-columns:repeat(2,1fr)}.bgs-grid-2{grid-template-columns:repeat(2,1fr)}.bgs-front-top{border-radius:15px;margin-top:0}.bgs-slot-grid{grid-template-columns:repeat(6,1fr)}}

/* 5.0.7 — mobiele tap-betrouwbaarheid */
.bgs-frontend-page button,
.bgs-frontend-page a,
.bgs-frontend-page input,
.bgs-frontend-page select,
.bgs-frontend-page textarea,
.bgs-frontend-page label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bgs-frontend-page button,
.bgs-frontend-page a,
.bgs-frontend-page .bgs-service,
.bgs-frontend-page .bgs-day,
.bgs-frontend-page .bgs-slot,
.bgs-frontend-page .bgs-theme,
.bgs-frontend-page .bgs-auth-tab,
.bgs-frontend-page .bgs-client-tab,
.bgs-frontend-page .bgs-bottom-btn {
  pointer-events: auto !important;
}
.bgs-frontend-shell {
  position: relative;
  isolation: isolate;
}
@media(max-width:599px){
  .bgs-frontend-page button,
  .bgs-frontend-page a,
  .bgs-frontend-page input,
  .bgs-frontend-page select,
  .bgs-frontend-page textarea {
    min-height: 44px;
  }
  .bgs-bottom-btn{min-height:48px}
  .bgs-day{min-height:38px;height:38px}
  .bgs-slot{min-height:40px}
}

/* 5.0.8 — echte mobiele tap-fix: toastlaag mag de pagina nooit afdekken */
#bgs-toast-root.bgs-toast-root {
  pointer-events: none !important;
  top: 10px !important;
  right: 8px !important;
  bottom: auto !important;
  left: 8px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}
#bgs-toast-root .bgs-toast {
  pointer-events: auto;
  max-width: 480px;
  margin: 5px auto;
}
@media(max-width:599px){
  #bgs-toast-root.bgs-toast-root{
    top: max(10px, env(safe-area-inset-top)) !important;
    right: 8px !important;
    left: 8px !important;
    bottom: auto !important;
  }
}

/* 5.0.9 — mobiel scrollen mag nooit als keuze worden geïnterpreteerd */
.bgs-frontend-page .bgs-service-list,
.bgs-frontend-page .bgs-extra-list {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}
.bgs-frontend-page .bgs-service {
  touch-action: pan-y !important;
  -webkit-user-select: none;
  user-select: none;
}
.bgs-frontend-page .bgs-service > * {
  pointer-events: none;
}
.bgs-frontend-page .bgs-nailart-none {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--bgs-line);
  border-radius: 12px;
  background: #fff;
}
.bgs-frontend-page button:disabled {
  cursor: not-allowed;
}

/* 5.1.0 — BGS-native klantlogin en 2FA volledig binnen de Planner */
.bgs-password-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.bgs-password-wrap input{
  padding-right:94px !important;
}
.bgs-password-toggle{
  position:absolute;
  z-index:2;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  min-height:32px !important;
  padding:5px 8px;
  border:0;
  border-radius:8px;
  background:#f4edf6;
  color:#62288d;
  font-size:9px;
  font-weight:900;
  line-height:1;
  touch-action:manipulation;
}
.bgs-password-toggle:focus-visible{
  outline:2px solid var(--bgs-primary);
  outline-offset:2px;
}
.bgs-otp-input{
  text-align:center;
  letter-spacing:.28em;
  font-size:20px !important;
  font-weight:950 !important;
  font-variant-numeric:tabular-nums;
}
.bgs-auth-security{
  display:flex;
  gap:7px;
  align-items:flex-start;
  margin:8px 0;
  padding:8px 9px;
  border:1px solid #d9c9eb;
  border-radius:11px;
  background:#f8f3fc;
  color:#5f3e73;
  font-size:9px;
  line-height:1.45;
}
@media(max-width:599px){
  .bgs-password-toggle{min-height:40px !important;padding:8px 10px;font-size:10px}
  .bgs-password-wrap input{padding-right:102px !important}
  .bgs-otp-input{font-size:22px !important;min-height:50px !important}
}

/* 5.1.3: geannuleerde afspraak blijft herkenbaar in Mijn afspraken. */
.bgs-appointment.is-cancelled{opacity:.78}
.bgs-appointment.is-cancelled .bgs-appointment-title strong{text-decoration:line-through}


/* 5.2.9 — verplichte nail-artkeuze voor klantboekingen */
.bgs-frontend-page .bgs-btn:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.55);box-shadow:none}
.bgs-frontend-page .bgs-nailart-required{background:#fff7e8;border-color:#edcf8d;color:#7b5511;font-weight:800}
.bgs-frontend-page .bgs-nailart-none{margin-top:9px;padding:9px;border:1px solid var(--bgs-line);border-radius:12px;background:#fff}