/* =====================================================================
   DocLindenthal · Booking-Widget (Modal)
   Eigenständige Komponente — pixelnah nach Kalender-Preview-Mockup,
   angepasst an das V2-Design-System (Playfair Display + Inter).
   Gehört zu booking.js (injiziert das Markup selbst ins DOM).
   ===================================================================== */

:root{
  /* Booking-Tokens, abgeleitet aus dem V2-Design-System */
  --bk-bg:#FAF5EE;            /* --cream */
  --bk-bg-soft:#F2E8DC;       /* --beige */
  --bk-ink:#10202A;           /* --ink */
  --bk-ink-soft:#4C5962;      /* --muted */
  --bk-line:#E8E1D6;          /* --line */
  --bk-accent:#1F4B3A;        /* --green */
  --bk-accent-soft:#2E6B55;   /* --forest */
  --bk-accent-pale:#E4EDE6;   /* heller Grün-Ton fürs Selected-State */
  --bk-gold:#A77C35;          /* --gold */
  --bk-white:#FFFFFF;
}

/* ---------- OVERLAY ---------- */
.bk-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(16,32,42,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s ease;
}
.bk-overlay.bk-open{ opacity:1; visibility:visible; }

.bk-modal{
  background:var(--bk-white);
  border:1px solid var(--bk-line);
  border-radius:22px;
  width:100%; max-width:640px;
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(16,32,42,.35);
  transform:translateY(16px) scale(.98);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--bk-ink);
  line-height:1.55;
}
.bk-overlay.bk-open .bk-modal{ transform:translateY(0) scale(1); }

/* ---------- HEAD (Close) ---------- */
.bk-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0;
  flex-shrink:0;
}
.bk-brand{
  font-family:"Playfair Display",serif; font-size:20px; font-weight:600;
  letter-spacing:-.01em; color:var(--bk-ink);
}
.bk-close{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--bk-line); background:var(--bk-white);
  color:var(--bk-ink-soft); cursor:pointer;
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.bk-close:hover{ border-color:var(--bk-accent); color:var(--bk-accent); }

/* ---------- SCROLL-BODY ---------- */
.bk-body{
  padding:18px 32px 0;
  overflow-y:auto;
  flex:1;
}

/* ---------- PROGRESS ---------- */
.bk-progress-label{
  font-size:11px; color:var(--bk-ink-soft);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:8px; font-weight:600;
}
.bk-progress-row{ display:flex; gap:4px; margin-bottom:28px; }
.bk-progress-row .bk-bar{
  height:4px; flex:1; background:var(--bk-bg-soft); border-radius:2px;
  transition:background .3s;
}
.bk-progress-row .bk-bar.bk-active{ background:var(--bk-accent); }

/* ---------- STEP TITLES ---------- */
.bk-title{
  font-family:"Playfair Display",serif; font-size:27px; line-height:1.15;
  font-weight:500; letter-spacing:-.02em; margin:0 0 8px; color:var(--bk-ink);
}
.bk-title em{ font-style:italic; color:var(--bk-accent); }
.bk-title.bk-sm{ font-size:21px; margin-top:26px; }
.bk-sub{ font-size:14.5px; color:var(--bk-ink-soft); margin:0 0 24px; }

/* ---------- STEP TRANSITION ---------- */
.bk-step{ display:none; animation:bkFade .28s ease; }
.bk-step.bk-current{ display:block; }
@keyframes bkFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---------- THERAPY TILES (Step 1) ---------- */
.bk-therapy-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px; }
.bk-therapy-tile{
  border:1.5px solid var(--bk-line); border-radius:12px;
  padding:14px 16px; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; gap:12px; background:var(--bk-white);
  font-size:14px; text-align:left; width:100%; font-family:inherit; color:var(--bk-ink);
}
.bk-therapy-tile:hover{ border-color:var(--bk-accent-soft); }
.bk-therapy-tile.bk-selected{
  border-color:var(--bk-accent); background:var(--bk-accent-pale);
  color:var(--bk-accent); font-weight:600;
}
.bk-therapy-tile .bk-ico{
  width:30px; height:30px; border-radius:8px; background:var(--bk-bg-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--bk-accent); font-size:16px; line-height:1;
}
.bk-therapy-tile.bk-selected .bk-ico{ background:var(--bk-white); }

/* ---------- SELECT CARDS (Step 2) ---------- */
.bk-select-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bk-select-card{
  border:1.5px solid var(--bk-line); border-radius:14px;
  padding:18px; cursor:pointer; transition:all .2s;
  display:flex; align-items:flex-start; gap:12px; background:var(--bk-white);
  width:100%; text-align:left; font-family:inherit; color:var(--bk-ink);
}
.bk-select-card:hover{ border-color:var(--bk-accent-soft); }
.bk-select-card.bk-selected{ border-color:var(--bk-accent); background:var(--bk-accent-pale); }
.bk-select-radio{
  width:18px; height:18px; border-radius:50%; border:1.5px solid var(--bk-line);
  flex-shrink:0; margin-top:2px; position:relative;
}
.bk-select-card.bk-selected .bk-select-radio{ border-color:var(--bk-accent); }
.bk-select-card.bk-selected .bk-select-radio::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--bk-accent);
}
.bk-select-card .bk-cb{ flex:1; }
.bk-select-card .bk-cb strong{ font-size:14.5px; font-weight:600; display:block; margin-bottom:2px; }
.bk-select-card .bk-cb span{ font-size:12.5px; color:var(--bk-ink-soft); }
.bk-select-card .bk-price{ font-family:"Playfair Display",serif; font-size:20px; font-weight:500; white-space:nowrap; }
.bk-select-card .bk-price small{ font-size:11px; color:var(--bk-ink-soft); display:block; font-family:Inter,sans-serif; }

/* ---------- CALENDAR (Step 3) ---------- */
.bk-cal-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.bk-cal-month-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.bk-cal-month-header h3{ font-family:"Playfair Display",serif; font-size:18px; font-weight:500; margin:0; }
.bk-cal-nav{ display:flex; gap:4px; }
.bk-cal-nav button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--bk-line);
  background:var(--bk-white); cursor:pointer; font-size:16px; line-height:1;
  color:var(--bk-ink); display:flex; align-items:center; justify-content:center; transition:.2s;
}
.bk-cal-nav button:hover{ border-color:var(--bk-accent); color:var(--bk-accent); }
.bk-cal-nav button:disabled{ opacity:.35; cursor:not-allowed; }
.bk-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bk-cal-grid .bk-h{
  font-size:11px; color:var(--bk-ink-soft); text-align:center; padding:6px 0;
  letter-spacing:.08em; font-weight:600;
}
.bk-cal-grid .bk-d{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:13px; border-radius:8px; cursor:pointer; position:relative;
  border:none; background:transparent; font-family:inherit; color:var(--bk-ink); width:100%;
}
.bk-cal-grid .bk-d:hover{ background:var(--bk-bg-soft); }
.bk-cal-grid .bk-d.bk-dim{ color:var(--bk-line); pointer-events:none; }
.bk-cal-grid .bk-d.bk-has::after{
  content:''; position:absolute; bottom:4px; width:4px; height:4px;
  background:var(--bk-accent); border-radius:50%;
}
.bk-cal-grid .bk-d.bk-selected{ background:var(--bk-ink); color:var(--bk-white); font-weight:600; }
.bk-cal-grid .bk-d.bk-selected::after{ background:var(--bk-white); }
.bk-cal-grid .bk-d.bk-today{ color:var(--bk-accent); font-weight:600; }
.bk-cal-legend{
  font-size:11.5px; color:var(--bk-ink-soft); margin-top:12px;
  display:flex; align-items:center; gap:6px;
}
.bk-cal-legend .bk-dot{ width:5px; height:5px; background:var(--bk-accent); border-radius:50%; display:inline-block; }

.bk-slots-col h4{ font-family:"Playfair Display",serif; font-size:16px; font-weight:500; margin:0 0 4px; }
.bk-slots-col .bk-day{ font-size:12.5px; color:var(--bk-ink-soft); margin-bottom:16px; }
.bk-slots-col .bk-day-empty{ font-size:13px; color:var(--bk-ink-soft); padding:8px 0; }
.bk-slot-list{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bk-slot{
  padding:10px 8px; text-align:center; border:1px solid var(--bk-line);
  border-radius:8px; font-size:13px; cursor:pointer; background:var(--bk-white);
  transition:all .15s; font-family:inherit; color:var(--bk-ink);
}
.bk-slot:hover{ border-color:var(--bk-accent-soft); }
.bk-slot.bk-selected{ background:var(--bk-accent); color:var(--bk-white); border-color:var(--bk-accent); font-weight:500; }
.bk-slot.bk-taken{ color:var(--bk-line); pointer-events:none; text-decoration:line-through; }

/* ---------- FORM (Step 4) ---------- */
.bk-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.bk-form-row.bk-full{ grid-template-columns:1fr; }
.bk-field label{ font-size:12px; color:var(--bk-ink-soft); margin-bottom:6px; display:block; letter-spacing:.04em; }
.bk-field input, .bk-field textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--bk-line); border-radius:10px;
  font-family:inherit; font-size:14px; background:var(--bk-white); color:var(--bk-ink);
}
.bk-field input:focus, .bk-field textarea:focus{ outline:none; border-color:var(--bk-accent); }
.bk-field textarea{ min-height:90px; resize:vertical; }
.bk-checkbox{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px; color:var(--bk-ink-soft); margin-top:8px;
}
.bk-checkbox input{ margin-top:2px; }
.bk-checkbox a{ color:var(--bk-accent); }
.bk-field-error{ border-color:#C2452F !important; }

/* ---------- SUMMARY / CONFIRM (Step 5) ---------- */
.bk-summary-box{
  background:var(--bk-bg-soft); border-radius:14px; padding:22px 24px; margin-bottom:22px;
}
.bk-summary-line{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:10px 0; border-bottom:1px dashed var(--bk-line); font-size:14px; gap:16px;
}
.bk-summary-line:last-child{ border-bottom:none; }
.bk-summary-line .bk-lbl{ color:var(--bk-ink-soft); font-size:12.5px; flex-shrink:0; }
.bk-summary-line .bk-val{ font-weight:500; text-align:right; }
.bk-summary-total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:16px; margin-top:8px; border-top:2px solid var(--bk-ink);
}
.bk-summary-total .bk-lbl{ font-size:13px; }
.bk-summary-total .bk-val{ font-family:"Playfair Display",serif; font-size:26px; font-weight:500; }

.bk-confirm-banner{
  background:var(--bk-accent-pale); border:1px solid var(--bk-accent);
  border-radius:14px; padding:24px; text-align:center; margin-bottom:18px;
}
.bk-confirm-banner .bk-check{
  width:52px; height:52px; border-radius:50%; background:var(--bk-accent);
  color:var(--bk-white); display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 14px;
}
.bk-confirm-banner h3{ font-family:"Playfair Display",serif; font-size:22px; font-weight:500; color:var(--bk-accent); margin:0 0 6px; }
.bk-confirm-banner p{ font-size:13.5px; color:var(--bk-accent-soft); margin:0; }
.bk-note{
  background:var(--bk-accent-pale); border-left:3px solid var(--bk-accent);
  padding:14px 18px; border-radius:0 12px 12px 0;
  font-size:13px; color:var(--bk-accent); line-height:1.5;
}

/* ---------- ACTIONS (sticky footer) ---------- */
.bk-actions{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:20px 32px; margin-top:8px; border-top:1px solid var(--bk-line);
  flex-shrink:0; background:var(--bk-white);
}
.bk-hint{ font-size:12.5px; color:var(--bk-ink-soft); }
.bk-btn{
  padding:12px 24px; border:none; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:.2s; white-space:nowrap;
}
.bk-btn-primary{ background:var(--bk-accent); color:var(--bk-white); }
.bk-btn-primary:hover{ background:#173b2d; }
.bk-btn-primary:disabled{ opacity:.45; cursor:not-allowed; }
.bk-btn-ghost{ background:transparent; color:var(--bk-ink-soft); }
.bk-btn-ghost:hover{ color:var(--bk-ink); }

body.bk-lock{ overflow:hidden; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:640px){
  .bk-overlay{ padding:0; align-items:flex-end; }
  .bk-modal{
    max-width:100%; max-height:96vh;
    border-radius:22px 22px 0 0;
    transform:translateY(40px);
  }
  .bk-overlay.bk-open .bk-modal{ transform:translateY(0); }
  .bk-body{ padding:14px 20px 0; }
  .bk-modal-head{ padding:16px 20px 0; }
  .bk-actions{ padding:16px 20px; }
  .bk-title{ font-size:23px; }
  .bk-therapy-grid, .bk-select-grid, .bk-cal-wrap, .bk-form-row{ grid-template-columns:1fr; }
  .bk-hint{ display:none; }
}