/* MK Booking Pro — Front-end v2.1 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

/* ═══ ROOT + HARD RESET — beats any theme override ═══════ */
#mkb-app {
  --gold:#C8A96E; --gold-d:#9a7a45; --gold-l:#f5ead4;
  --black:#0e0e0e; --white:#ffffff; --grey:#f7f6f3;
  --border:#e0ddd6; --text:#1a1a1a; --muted:#888888; --r:6px;
  all:initial!important;
  display:block!important;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif!important;
  font-size:15px!important; line-height:1.5!important;
  color:#1a1a1a!important; background:#ffffff!important;
  max-width:940px!important; width:100%!important;
  margin:0 auto!important;
  border:1px solid #e0ddd6!important; border-radius:10px!important;
  overflow:hidden!important; box-shadow:0 4px 28px rgba(0,0,0,.09)!important;
  box-sizing:border-box!important; -webkit-font-smoothing:antialiased!important;
}
#mkb-app * {
  box-sizing:border-box!important;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
}
#mkb-app h1,#mkb-app h2,#mkb-app h3,#mkb-app h4,#mkb-app h5 {
  color:#1a1a1a!important; font-weight:400!important;
  font-size:inherit!important; line-height:1.3!important;
  margin:0!important; padding:0!important;
  background:none!important; border:none!important;
  letter-spacing:normal!important; text-transform:none!important;
}
#mkb-app p  { margin:0!important; color:#1a1a1a!important; }
#mkb-app ul { margin:0!important; padding:0!important; list-style:none!important; }
#mkb-app a  { color:#9a7a45!important; text-decoration:underline!important; }

/* ═══ STEPS ══════════════════════════════════════════════ */
#mkb-app .mkb-step { display:none!important; padding:32px 40px 16px!important; }
#mkb-app .mkb-step.active { display:block!important; animation:mkbIn .25s ease!important; }
@keyframes mkbIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

#mkb-app .mkb-step-label {
  display:block!important; font-size:10px!important; font-weight:600!important;
  text-transform:uppercase!important; letter-spacing:.14em!important;
  color:#C8A96E!important; margin:0 0 6px!important;
}
#mkb-app .mkb-step-h {
  display:block!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:22px!important; font-weight:400!important;
  color:#1a1a1a!important; margin:0 0 4px!important; line-height:1.3!important;
}
#mkb-app .mkb-step-sub {
  display:block!important; font-size:13px!important;
  color:#888!important; margin:0 0 20px!important;
}

/* ═══ SERVICE CARDS ══════════════════════════════════════ */
#mkb-app .mkb-services {
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(195px,1fr))!important;
  gap:10px!important; margin-bottom:24px!important;
}
#mkb-app .mkb-svc-card {
  display:block!important; border:1px solid #e0ddd6!important;
  border-radius:6px!important; padding:16px!important;
  cursor:pointer!important; transition:border-color .18s,box-shadow .18s!important;
  position:relative!important; background:#fff!important;
}
#mkb-app .mkb-svc-card:hover { border-color:#9a7a45!important; box-shadow:0 2px 12px rgba(0,0,0,.06)!important; }
#mkb-app .mkb-svc-card.selected { border-color:#C8A96E!important; background:#f5ead4!important; }
#mkb-app .mkb-svc-card.selected::after {
  content:'✓'!important; position:absolute!important;
  top:10px!important; right:12px!important;
  font-size:11px!important; color:#9a7a45!important; font-weight:700!important;
}
#mkb-app .mkb-svc-card.hidden { display:none!important; }
#mkb-app .mkb-svc-ico  { font-size:22px!important; display:block!important; margin-bottom:8px!important; }
#mkb-app .mkb-svc-name { font-size:13px!important; font-weight:500!important; color:#1a1a1a!important; margin-bottom:4px!important; display:block!important; line-height:1.3!important; }
#mkb-app .mkb-svc-from { font-size:13px!important; font-weight:600!important; color:#9a7a45!important; display:block!important; margin-bottom:2px!important; }
#mkb-app .mkb-svc-dur  { font-size:11px!important; color:#888!important; display:block!important; }

/* ═══ PACKAGE CARDS ══════════════════════════════════════ */
#mkb-app .mkb-svc-banner {
  display:flex!important; align-items:center!important; gap:12px!important;
  background:#f7f6f3!important; border:1px solid #e0ddd6!important;
  border-radius:6px!important; padding:12px 16px!important; margin-bottom:20px!important;
}
#mkb-app .mkb-svc-banner .ico { font-size:22px!important; flex-shrink:0!important; }
#mkb-app .mkb-svc-banner strong { font-size:14px!important; font-weight:500!important; color:#1a1a1a!important; display:block!important; margin-bottom:2px!important; }
#mkb-app .mkb-svc-banner span  { font-size:12px!important; color:#888!important; display:block!important; }

#mkb-app .mkb-packages { display:flex!important; flex-direction:column!important; gap:8px!important; margin-bottom:24px!important; }
#mkb-app .mkb-pkg-card {
  display:flex!important; justify-content:space-between!important;
  align-items:center!important; gap:16px!important;
  border:1px solid #e0ddd6!important; border-radius:6px!important;
  padding:16px 18px!important; cursor:pointer!important;
  transition:border-color .18s!important; background:#fff!important;
}
#mkb-app .mkb-pkg-card:hover   { border-color:#9a7a45!important; }
#mkb-app .mkb-pkg-card.selected { border-color:#C8A96E!important; background:#f5ead4!important; }
#mkb-app .mkb-pkg-left  { flex:1!important; }
#mkb-app .mkb-pkg-base-tag {
  display:inline-block!important; font-size:10px!important; font-weight:600!important;
  background:#0e0e0e!important; color:#fff!important;
  padding:2px 8px!important; border-radius:10px!important;
  letter-spacing:.04em!important; margin-bottom:4px!important;
}
#mkb-app .mkb-pkg-name  { font-size:14px!important; font-weight:500!important; color:#1a1a1a!important; display:block!important; margin-bottom:3px!important; }
#mkb-app .mkb-pkg-desc  { font-size:12px!important; color:#888!important; display:block!important; }
#mkb-app .mkb-pkg-price { font-size:18px!important; font-weight:600!important; color:#9a7a45!important; white-space:nowrap!important; flex-shrink:0!important; }

/* ═══ LOCATION (alleen familie portret) ══════════════════ */
#mkb-app .mkb-loc-toggle {
  display:grid!important; grid-template-columns:1fr 1fr!important;
  gap:10px!important; margin-bottom:16px!important;
}
#mkb-app .mkb-loc {
  display:flex!important; flex-direction:column!important;
  align-items:center!important; gap:4px!important;
  border:1px solid #e0ddd6!important; border-radius:6px!important;
  padding:16px!important; cursor:pointer!important;
  background:#fff!important; transition:border-color .18s!important; text-align:center!important;
}
#mkb-app .mkb-loc:hover { border-color:#9a7a45!important; }
#mkb-app .mkb-loc.active { border-color:#C8A96E!important; background:#f5ead4!important; }
#mkb-app .mkb-loc-ico    { font-size:22px!important; }
#mkb-app .mkb-loc strong { font-size:13px!important; font-weight:500!important; color:#1a1a1a!important; display:block!important; }
#mkb-app .mkb-loc-addr   { font-size:11px!important; color:#888!important; display:block!important; }

/* ═══ CALENDAR ═══════════════════════════════════════════ */
#mkb-app .mkb-cal-nav {
  display:flex!important; align-items:center!important;
  justify-content:space-between!important; margin-bottom:14px!important;
}
#mkb-app .mkb-cal-mo {
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:18px!important; font-weight:400!important; color:#1a1a1a!important;
}
/* FIXED: was white-on-transparent = invisible */
#mkb-app .mkb-cal-arr {
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:34px!important; height:34px!important; border-radius:50%!important;
  border:1px solid #e0ddd6!important; background:#fff!important;
  color:#1a1a1a!important; font-size:18px!important; line-height:1!important;
  cursor:pointer!important; transition:all .18s!important; padding:0!important;
}
#mkb-app .mkb-cal-arr:hover { border-color:#9a7a45!important; color:#9a7a45!important; }

#mkb-app .mkb-cal {
  display:grid!important; grid-template-columns:repeat(7,1fr)!important;
  gap:4px!important; margin-bottom:4px!important;
}
#mkb-app .mkb-cd-lbl {
  font-size:10px!important; font-weight:600!important; color:#888!important;
  text-align:center!important; padding:4px 0!important;
  text-transform:uppercase!important; letter-spacing:.04em!important;
}
#mkb-app .mkb-cd {
  aspect-ratio:1!important; border-radius:4px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  font-size:12px!important; color:#ccc!important;
  border:1px solid transparent!important; cursor:default!important;
  transition:all .15s!important; background:transparent!important;
}
/* FIXED: had transparent border = invisible cells */
#mkb-app .mkb-cd.available {
  color:#1a1a1a!important; border:1px solid #e0ddd6!important;
  background:#fff!important; cursor:pointer!important;
}
#mkb-app .mkb-cd.available:hover { border-color:#9a7a45!important; color:#9a7a45!important; }
#mkb-app .mkb-cd.selected {
  background:#0e0e0e!important; color:#fff!important;
  border-color:#0e0e0e!important; font-weight:600!important;
}
#mkb-app .mkb-cd.full   { color:#ccc!important; opacity:.4!important; }
#mkb-app .mkb-cd.closed { color:#ccc!important; opacity:.25!important; }
#mkb-app .mkb-cd.past   { color:#ccc!important; opacity:.25!important; }

/* Time slots */
#mkb-app .mkb-times { display:grid!important; grid-template-columns:repeat(5,1fr)!important; gap:6px!important; margin-bottom:4px!important; }
#mkb-app .mkb-t {
  display:flex!important; align-items:center!important; justify-content:center!important;
  border:1px solid #e0ddd6!important; border-radius:4px!important;
  padding:9px 4px!important; font-size:12px!important;
  color:#1a1a1a!important; background:#fff!important;
  cursor:pointer!important; transition:all .15s!important;
}
#mkb-app .mkb-t:hover   { border-color:#9a7a45!important; color:#9a7a45!important; }
#mkb-app .mkb-t.selected { background:#0e0e0e!important; color:#fff!important; border-color:#0e0e0e!important; font-weight:600!important; }
#mkb-app .mkb-t.busy     { opacity:.3!important; pointer-events:none!important; text-decoration:line-through!important; }

#mkb-app .mkb-lbl2 {
  display:block!important; font-size:10px!important; font-weight:600!important;
  text-transform:uppercase!important; letter-spacing:.09em!important;
  color:#888!important; margin-bottom:6px!important;
}

/* ═══ FORM ════════════════════════════════════════════════ */
#mkb-app .mkb-form-2col { display:grid!important; grid-template-columns:1fr 1fr!important; gap:12px!important; }
#mkb-app .mkb-field { margin-bottom:14px!important; }
#mkb-app .mkb-input,
#mkb-app .mkb-sel2,
#mkb-app .mkb-ta {
  display:block!important; width:100%!important;
  border:1px solid #e0ddd6!important; border-radius:6px!important;
  padding:10px 13px!important; font-size:13px!important;
  color:#1a1a1a!important; background:#fff!important;
  transition:border-color .18s!important; outline:none!important;
  appearance:none!important; -webkit-appearance:none!important; box-shadow:none!important;
}
#mkb-app .mkb-input:focus,
#mkb-app .mkb-sel2:focus,
#mkb-app .mkb-ta:focus { border-color:#C8A96E!important; box-shadow:0 0 0 2px rgba(200,169,110,.12)!important; }
#mkb-app .mkb-input::placeholder,
#mkb-app .mkb-ta::placeholder { color:#bbb!important; }
#mkb-app .mkb-sel2 { cursor:pointer!important; }
#mkb-app .mkb-ta   { resize:vertical!important; min-height:80px!important; }

/* ═══ SUMMARY ════════════════════════════════════════════ */
#mkb-app .mkb-summary { border:1px solid #e0ddd6!important; border-radius:6px!important; overflow:hidden!important; margin-bottom:16px!important; }
#mkb-app .mkb-sum-row {
  display:flex!important; justify-content:space-between!important;
  align-items:flex-start!important; gap:16px!important;
  padding:10px 16px!important; border-bottom:1px solid #e0ddd6!important; font-size:13px!important;
}
#mkb-app .mkb-sum-row:last-child { border-bottom:none!important; }
#mkb-app .mkb-sum-lbl  { color:#888!important; flex-shrink:0!important; }
#mkb-app .mkb-sum-val  { color:#1a1a1a!important; font-weight:500!important; text-align:right!important; }
#mkb-app .mkb-sum-total {
  display:flex!important; justify-content:space-between!important; align-items:center!important;
  padding:14px 16px!important; background:#f7f6f3!important;
  font-family:'Playfair Display',Georgia,serif!important;
  font-size:19px!important; color:#1a1a1a!important;
}
#mkb-app .mkb-sum-price { color:#9a7a45!important; font-weight:600!important; }
#mkb-app .mkb-privacy { font-size:11px!important; color:#aaa!important; margin-bottom:16px!important; display:block!important; }

/* ═══ BUTTONS ════════════════════════════════════════════ */
#mkb-app .mkb-btn {
  display:inline-flex!important; align-items:center!important;
  justify-content:center!important; gap:6px!important;
  padding:13px 22px!important; border-radius:6px!important;
  font-size:12px!important; font-weight:500!important;
  letter-spacing:.07em!important; text-transform:uppercase!important;
  cursor:pointer!important; transition:all .2s!important;
  text-decoration:none!important; outline:none!important; -webkit-appearance:none!important;
}
#mkb-app .mkb-btn-primary {
  background:#0e0e0e!important; color:#fff!important;
  width:100%!important; border:none!important;
}
#mkb-app .mkb-btn-primary:hover { background:#333!important; }
#mkb-app .mkb-btn-primary:disabled { opacity:.35!important; cursor:not-allowed!important; pointer-events:none!important; }

/* FIXED: was white on transparent = invisible */
#mkb-app .mkb-btn-ghost {
  background:#fff!important; color:#555!important;
  border:1px solid #e0ddd6!important; width:100%!important;
}
#mkb-app .mkb-btn-ghost:hover { border-color:#9a7a45!important; color:#1a1a1a!important; }

#mkb-app .mkb-btn-confirm {
  background:#C8A96E!important; color:#fff!important;
  width:100%!important; padding:15px 22px!important;
  font-size:13px!important; border:none!important;
}
#mkb-app .mkb-btn-confirm:hover    { background:#9a7a45!important; }
#mkb-app .mkb-btn-confirm:disabled { opacity:.45!important; cursor:not-allowed!important; }

#mkb-app .mkb-btn-wa {
  background:#25D366!important; color:#fff!important;
  border:none!important; width:100%!important; max-width:380px!important; margin:0 auto!important;
}
#mkb-app .mkb-btn-wa:hover { background:#1da851!important; }

#mkb-app .mkb-foot   { padding:8px 0 28px!important; }
#mkb-app .mkb-foot-2 { display:flex!important; flex-direction:column!important; gap:8px!important; }

/* ═══ SUCCESS ════════════════════════════════════════════ */
#mkb-app .mkb-success-ico {
  width:68px!important; height:68px!important; border-radius:50%!important;
  border:2px solid #C8A96E!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  font-size:28px!important; color:#9a7a45!important;
  margin:0 auto 20px!important; background:#f5ead4!important;
}

/* ═══ PROGRESS ═══════════════════════════════════════════ */
#mkb-app .mkb-progress { background:#f7f6f3!important; border-top:1px solid #e0ddd6!important; padding:14px 40px 18px!important; }
#mkb-app .mkb-prog-bar { height:2px!important; background:#e0ddd6!important; border-radius:2px!important; overflow:hidden!important; margin-bottom:12px!important; }
#mkb-app .mkb-prog-bar div { height:100%!important; background:#C8A96E!important; transition:width .4s ease!important; }
#mkb-app .mkb-prog-dots { display:flex!important; gap:6px!important; justify-content:center!important; }
#mkb-app .mkb-pdot {
  width:26px!important; height:26px!important; border-radius:50%!important;
  border:1px solid #e0ddd6!important; background:#fff!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  font-size:10px!important; font-weight:500!important; color:#888!important; cursor:default!important;
  transition:all .2s!important;
}
#mkb-app .mkb-pdot.active { background:#0e0e0e!important; border-color:#0e0e0e!important; color:#fff!important; }
#mkb-app .mkb-pdot.done   { background:#f5ead4!important; border-color:#C8A96E!important; color:#9a7a45!important; }

#mkb-app .mkb-loading { color:#888!important; font-size:13px!important; padding:32px!important; text-align:center!important; display:block!important; }

@media (max-width:640px) {
  #mkb-app .mkb-step      { padding:24px 20px 10px!important; }
  #mkb-app .mkb-progress  { padding:12px 20px 16px!important; }
  #mkb-app .mkb-services  { grid-template-columns:1fr 1fr!important; }
  #mkb-app .mkb-form-2col { grid-template-columns:1fr!important; }
  #mkb-app .mkb-times     { grid-template-columns:repeat(4,1fr)!important; }
  #mkb-app .mkb-loc-toggle { grid-template-columns:1fr!important; }
}

/* ═══ PAYMENT STEP ═══════════════════════════════════════ */
#mkb-app .mkb-pay-summary {
  display:flex!important; justify-content:space-between!important;
  align-items:center!important;
  background:#f7f6f3!important; border:1px solid #e0ddd6!important;
  border-radius:6px!important; padding:14px 18px!important;
  margin-bottom:20px!important; font-size:14px!important;
}
#mkb-app .mkb-pay-summary span { color:#888!important; }
#mkb-app .mkb-pay-summary strong { font-size:20px!important; color:#9a7a45!important; font-weight:600!important; }
#mkb-app .mkb-pay-err {
  background:#fce4ec!important; border:1px solid #ef9a9a!important;
  border-radius:6px!important; padding:10px 14px!important;
  font-size:13px!important; color:#c62828!important;
  margin-bottom:14px!important;
}
#mkb-app #mkb-payment-element iframe { border-radius:6px!important; }

/* Success step — werkt ook zonder .active class als display:block is gezet */
#mkb-app .mkb-step[data-step="success"] {
  padding: 48px 40px !important;
  text-align: center !important;
}
#mkb-app .mkb-step[data-step="success"].active,
#mkb-app .mkb-step[data-step="success"][style*="block"] {
  display: block !important;
}
#mkb-app .mkb-step[data-step="payment"].active,
#mkb-app .mkb-step[data-step="payment"][style*="block"] {
  display: block !important;
}

/* ═══ BETAALKEUZE ════════════════════════════════════════ */
#mkb-app .mkb-paychoice-grid {
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  margin-bottom:8px!important;
}
#mkb-app .mkb-paychoice-btn {
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:16px!important;
  border:2px solid #e0ddd6!important;
  border-radius:8px!important;
  padding:20px 22px!important;
  cursor:pointer!important;
  background:#fff!important;
  transition:all .2s!important;
  text-align:left!important;
  width:100%!important;
}
#mkb-app .mkb-paychoice-btn:hover {
  border-color:#C8A96E!important;
  background:#faf7f0!important;
}
#mkb-app .mkb-paychoice-btn.selected {
  border-color:#C8A96E!important;
  background:#f5ead4!important;
}
#mkb-app .mkb-paychoice-ico {
  font-size:30px!important;
  line-height:1!important;
  flex-shrink:0!important;
  width:44px!important;
  text-align:center!important;
}
#mkb-app .mkb-paychoice-info {
  flex:1!important;
}
#mkb-app .mkb-paychoice-title {
  font-size:15px!important;
  font-weight:600!important;
  color:#1a1a1a!important;
  display:block!important;
  margin-bottom:3px!important;
}
#mkb-app .mkb-paychoice-sub {
  font-size:12px!important;
  color:#888!important;
  display:block!important;
  line-height:1.5!important;
}
#mkb-app .mkb-paychoice-arrow {
  font-size:18px!important;
  color:#C8A96E!important;
  flex-shrink:0!important;
}