/* ===========================
   Design tokens
=========================== */
:root {
  --sb-green-900: #0e4b41;
  --sb-green-800: #135e52;
  --sb-green-700: #1a7a68;
  --sb-green:     #2a8a78;   /* hoofdthema/kader */
  --sb-white:     #ffffff;
  --sb-text:      #16302c;

  --sb-shadow:    0 4px 12px rgba(0,0,0,.10);
  --sb-shadow-sm: 0 2px  6px rgba(0,0,0,.08);

  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius:    10px;
}

/* ===========================
   Canvas / container
=========================== */
.sb-app {
  padding: 0; /* bewust geen extra padding */
}

.sb-card{
  background: var(--sb-white);
  border-radius: var(--radius-xl);
  padding: 20px 18px 18px;
  box-shadow: var(--sb-shadow);
  max-width: 520px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Inter", Segoe UI, Roboto, Arial, sans-serif;
  color: var(--sb-text);
}

/* ===========================
   Head & progress
=========================== */
.sb-step-header{display:flex;flex-direction:column;gap:8px}
.sb-step-count{font-weight:700;color:var(--sb-green-800);margin:0}
.sb-progress{height:12px;background:#ebeeed;border-radius:999px;overflow:hidden}
.sb-progress__bar{height:100%;background:var(--sb-green-700);border-radius:999px}

.sb-title{margin:0 0 4px;font-size:22px}
.sb-subtitle{margin:0 0 16px}
.sb-subtitle a{color:var(--sb-green-800);font-weight:700;text-decoration:none}

/* ===========================
   Select veld (dienstverlener)
=========================== */
.sb-field{margin:6px 0 14px}
.sb-field--staff.is-pending,
.sb-field--staff.is-hidden{
  display:none;
}
.sb-label{display:block;font-weight:700;margin-bottom:6px;color:var(--sb-green-900)}
.sb-select{position:relative}
.sb-select select{
  width:100%;
  appearance:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
}
.sb-select::after{
  content:"▾";
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.55;
}

/* ===========================
   Kalenderkaart
=========================== */
.sb-calendar-card{
  background: var(--sb-green);
  color: var(--sb-white);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--sb-shadow-sm);
}

.sb-cal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding: 4px 6px 8px;
}
.sb-cal-month{font-weight:800;font-size:20px}
.sb-cal-nav{
  appearance:none;border:0;background:transparent;color:var(--sb-white);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:8px;
}
.sb-cal-nav:hover{background:rgba(255,255,255,.10)}
.sb-cal-nav.is-disabled{opacity:.4;cursor:not-allowed;background:transparent}
.sb-cal-nav.is-busy{opacity:.55;pointer-events:none}

.sb-cal-divider{height:1px;background:rgba(255,255,255,.35);margin:8px 6px 10px;border-radius:1px}

/* Grid: altijd 7 kolommen */
.sb-calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  justify-items:center;
  align-items:start;
  text-align:center;
}
.sb-cal-dow{font-weight:700;opacity:.9}

/* ---- Dagbolletjes (basis) ----
   Desktop: vaste 44x44 voor pixel-perfect rond.
   Mobiel: breedte berekenen + aspect-ratio 1/1.
*/
.sb-day{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  line-height:1;
  font-variant-numeric: tabular-nums;
  padding:0;
  margin:0;
  border:none;
  box-shadow:none;
  min-width:0;

  /* UI regels */
  background: rgba(255,255,255,.14); /* klikbaar (default) */
  color: #fff;
  cursor: pointer;
}
.sb-day.is-muted{opacity:.55}

/* Niet-klikbare dagen */
.sb-day.is-disabled{
  background: transparent;
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}

/* Hover voor klikbaar & niet geselecteerd (desktop/hover devices) */
@media (hover:hover){
  .sb-day:not(.is-disabled):not(.is-selected):hover{
    background: rgba(255,255,255,.22);
  }
}

/* Geselecteerd: witte bol + groene tekst */
.sb-day.is-selected,
.sb-day.is-selected:hover{
  background:#fff;
  color: var(--sb-green);
  border:none;
  box-shadow:none;
}

/* Desktopafmetingen */
@media (min-width: 481px){
  .sb-day{ width:44px; height:44px; font-size:20px; }
}

/* Mobiel: altijd passend + rond */
@media (max-width: 480px){
  .sb-day{
    aspect-ratio: 1 / 1;
    height: auto;
    font-size:18px;
	padding: 12px;
  }
}

/* ===========================
   Tijdenkaart
=========================== */
.sb-times-card{
  background: var(--sb-green);
  color: var(--sb-white);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--sb-shadow-sm);
  margin-top: 12px;
}
.sb-times-title{font-weight:800;margin: 2px 4px 10px}
.sb-times-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media (max-width: 420px){
  .sb-times-grid{grid-template-columns:repeat(2,1fr)}
}
.sb-pill{
  background: rgba(255,255,255,.10);
  color: var(--sb-white);
  border: 1px solid rgba(255,255,255,.18);
  padding: 12px 8px;
  border-radius: 14px;
  font-weight:700;
  cursor:pointer;
}
.sb-pill:hover{background: rgba(255,255,255,.18)}
.sb-pill.is-selected{
  background: var(--sb-white);
  color: var(--sb-green-900);
  border-color: var(--sb-white);
}

/* ===========================
   Buttons
=========================== */
.sb-btn-primary{
  width:100%;
  background: var(--sb-green-900);
  color: var(--sb-white);
  border:0;border-radius:14px;
  padding:14px 16px;
  font-weight:800;font-size:16px;
  cursor:pointer;
  box-shadow: var(--sb-shadow-sm);
}
.sb-btn-primary:hover{filter:brightness(1.03)}
.sb-btn-secondary{
  background:#eef2f7;color:#111;border:0;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer;
}

/* ===========================
   Prijs & duur balk
=========================== */
.sb-pricebar{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:14px; margin-bottom:10px;
  font-weight:800; color: var(--sb-green-900);
}
.sb-pricebar .sb-price{ font-size:16px; }
.sb-pricebar .sb-dash{ opacity:.6; }
.sb-pricebar .sb-duration{ display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.sb-pricebar .sb-clock{ display:inline-block; vertical-align:middle; }

/* ===========================
   Samenvatting & form velden
=========================== */
.sb-summary{
  background:#f6fbfa;
  border:1px solid #e3efec;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:14px;
}
.sb-summary-title{margin-bottom:6px;color:var(--sb-green-900)}
.sb-summary-list{margin:0;padding-left:18px}
.sb-summary-list li{margin:2px 0}

.sb-textarea{
  width:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
  min-height:100px;
  resize:vertical;
}
.sb-textarea:focus{outline:none;border-color:#b9d6cf;box-shadow:0 0 0 3px rgba(26,122,104,.12)}

/* Juridische tekst */
.sb-legal{
  font-size:13px;
  line-height:1.55;
  color:#415a56;
  margin:6px 0 12px;
}
.sb-legal a{color:var(--sb-green-800);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sb-legal a:hover{text-decoration:underline}

/* ===========================
   Foutmeldingen & states
=========================== */
.sb-error-inline {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.sb-input-error {
  border-color: #e11d48 !important;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, .12);
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* ===========================
   Spinners / loaders
=========================== */
.sb-spinner {
  width: 24px; height: 24px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sbspin 0.8s linear infinite;
}
@keyframes sbspin { to { transform: rotate(360deg); } }
.sb-cal-loading, .sb-times-loading{
  display:flex; align-items:center; justify-content:center;
  padding:18px 0; opacity:.9;
}
@media (max-width: 480px){
  .sb-day{ aspect-ratio:1/1; padding:0; border-radius:9999px; }
}

/* --- Mobile fix: dagbol = exact rond en kolombreed --- */
@media (max-width: 480px){
  .sb-calendar{
    gap: 6px !important;
    justify-items: stretch !important;  /* <— niet center, maar rekken naar kolom */
  }
  .sb-day{
    width: 100% !important;             /* <— neem hele grid-kolom */
    aspect-ratio: 1 / 1 !important;     /* breedte = hoogte */
    height: auto !important;
    padding: 0 !important;              /* geen extra hoogte */
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

.sb-field input{
	border: 1px solid #dddddd !important;
	border-radius: 10px !important;
}
.sb-form-actions{
  display:flex;
  gap:12px;
  align-items:center;
}
.sb-form-actions .sb-btn-primary,
.sb-form-actions .sb-btn-secondary{
  width:auto;
  flex:1 1 0;
}
.sb-form-actions .sb-btn-primary{
  border: 2px solid #084c3e;
  background-color: #084c3e;
  color: #ffffff;
}
.sb-form-actions .sb-btn-primary:hover{
  border: 2px solid #0d5c4b;
  background-color: #0d5c4b;
  color: #ffffff;
  filter: none;
}
.sb-form-actions .sb-btn-primary:focus,
.sb-form-actions .sb-btn-primary:active{
  border: 2px solid #0d5c4b;
  background-color: #0d5c4b;
  color: #ffffff;
  filter: none;
}

.sb-form-actions .sb-btn-secondary{
	    background-color: transparent;
    color: #084c3e;
    border: solid 2px;
}
.sb-form-actions .sb-btn-secondary:hover{
	border: solid 2px;
	background-color: #084c3e;
	color: white;
}		
/* Voetpunt connector extras */
.sb-input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.sb-error {
  margin-top: 6px;
  color: #dc2626;
  font-size: 13px;
}

.sb-success {
  margin-top: 12px;
}

.sb-success-inner {
  border-radius: 12px;
  padding: 14px 16px;
  background: #0f6b59;
  color: #ffffff;
  font-weight: 700;
}