/* ============== BOOKING WIDGET ============== */
.booking-section{
  background:linear-gradient(180deg,#ffffff 0%,#f0fdfa 100%);
  padding:90px 0;position:relative;overflow:hidden;
}
.booking-section::before{
  content:"";position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(94,234,212,.22) 0%,transparent 70%);
  top:-200px;right:-200px;
}

.booking-widget{
  position:relative;z-index:2;background:#fff;border-radius:24px;
  box-shadow:0 30px 80px rgba(15,118,110,.15);
  overflow:hidden;border:1px solid var(--border);
}

.booking-progress{
  display:flex;background:var(--teal-50);padding:0;
  border-bottom:1px solid var(--border);
}
.booking-step-tab{
  flex:1;padding:18px 16px;text-align:center;font-weight:600;font-size:.9rem;
  color:var(--text-soft);border-right:1px solid var(--border);position:relative;
  transition:all .25s;cursor:pointer;
}
.booking-step-tab:last-child{border-right:none}
.booking-step-tab.active{background:#fff;color:var(--teal-900)}
.booking-step-tab.active::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad);
}
.booking-step-tab .step-num{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--teal-100);color:var(--teal-700);font-size:.8rem;margin-right:8px;
  transition:all .25s;
}
.booking-step-tab.active .step-num{background:var(--grad);color:#fff}
.booking-step-tab.completed .step-num{background:#10b981;color:#fff}
.booking-step-tab.completed .step-num::before{content:"✓";font-weight:700}
.booking-step-tab.completed .step-num span{display:none}
@media(max-width:680px){
  .booking-step-tab{font-size:.78rem;padding:14px 6px}
  .booking-step-tab .step-num{width:20px;height:20px;font-size:.72rem;margin-right:5px}
  .booking-step-tab .step-label{display:none}
}

.booking-body{padding:40px;min-height:480px}
@media(max-width:700px){.booking-body{padding:24px 18px;min-height:0}}
@media(max-width:480px){.booking-body{padding:20px 14px}}

.booking-step{display:none}
.booking-step.active{display:block;animation:fadeStep .35s ease-out}
@keyframes fadeStep{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.booking-step h3{margin-bottom:6px;font-size:1.5rem}
.booking-step .step-sub{color:var(--text-soft);margin-bottom:24px}

/* Service tiles */
.service-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
@media(max-width:480px){.service-tiles{grid-template-columns:1fr}}
.service-tile{
  padding:18px 20px;border:2px solid var(--border);border-radius:14px;cursor:pointer;
  transition:all .2s;background:#fff;text-align:left;
}
.service-tile:hover{border-color:var(--teal-300);transform:translateY(-2px)}
.service-tile.selected{border-color:var(--accent);background:var(--teal-50);box-shadow:0 6px 18px rgba(13,148,136,.18)}
.service-tile-name{font-weight:600;color:var(--teal-900);margin-bottom:6px;font-size:.98rem}
.service-tile-meta{font-size:.85rem;color:var(--text-soft)}
.service-tile-price{font-weight:700;color:var(--accent);margin-top:8px;font-size:.95rem}

/* Specialist tiles */
.specialist-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;max-width:600px}
@media(max-width:480px){.specialist-tiles{grid-template-columns:1fr}}
.specialist-tile{
  padding:20px 16px;border:2px solid var(--border);border-radius:14px;cursor:pointer;
  transition:all .2s;background:#fff;text-align:center;
}
.specialist-tile:hover{border-color:var(--teal-300)}
.specialist-tile.selected{border-color:var(--accent);background:var(--teal-50)}
.specialist-tile.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.specialist-avatar{
  width:72px;height:72px;border-radius:50%;margin:0 auto 12px;background:var(--grad-soft);
  display:grid;place-items:center;font-weight:700;color:var(--teal-700);font-size:1.3rem;
  overflow:hidden;
}
.specialist-avatar img{width:100%;height:100%;object-fit:cover}
.specialist-tile-name{font-weight:600;color:var(--teal-900);font-size:.96rem;margin-bottom:4px}
.specialist-tile-role{font-size:.8rem;color:var(--text-soft);line-height:1.4}

/* Calendar */
.calendar-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:30px}
@media(max-width:780px){.calendar-wrap{grid-template-columns:1fr}}

.calendar{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;
}
.calendar-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;
}
.calendar-head h4{font-family:'Poppins',sans-serif;color:var(--teal-900);font-size:1.05rem}
.cal-nav{display:flex;gap:6px}
.cal-nav button{
  width:34px;height:34px;border-radius:8px;background:var(--teal-50);
  display:grid;place-items:center;color:var(--teal-700);transition:all .2s;
}
.cal-nav button:hover:not(:disabled){background:var(--teal-100)}
.cal-nav button:disabled{opacity:.35;cursor:not-allowed}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{
  text-align:center;font-size:.75rem;font-weight:600;color:var(--text-soft);
  padding:8px 0;text-transform:uppercase;letter-spacing:.04em;
}
.cal-day{
  aspect-ratio:1/1;display:grid;place-items:center;border-radius:10px;
  font-weight:500;font-size:.92rem;cursor:pointer;transition:all .15s;color:var(--text);
  border:1px solid transparent;
}
@media(max-width:480px){.cal-day{font-size:.82rem;border-radius:6px}.cal-day-name{font-size:.65rem;padding:6px 0}.cal-grid{gap:2px}}
.cal-day.empty{cursor:default}
.cal-day.disabled{color:#cbd5e1;cursor:not-allowed;text-decoration:line-through}
.cal-day.has-slots{color:var(--teal-900);font-weight:600}
.cal-day.has-slots:hover{background:var(--teal-100)}
.cal-day.no-slots{color:#cbd5e1;cursor:not-allowed}
.cal-day.today{border-color:var(--teal-300)}
.cal-day.selected{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(13,148,136,.4)}

.slots-panel h4{
  font-family:'Poppins',sans-serif;color:var(--teal-900);font-size:1.05rem;margin-bottom:14px;
}
.slots-empty{color:var(--text-soft);font-size:.92rem;padding:20px 0;text-align:center}
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.slot{
  padding:11px 8px;border:1.5px solid var(--border);border-radius:10px;
  text-align:center;font-weight:600;color:var(--teal-900);cursor:pointer;
  transition:all .2s;background:#fff;font-size:.92rem;
}
.slot:hover{border-color:var(--teal-300);background:var(--teal-50)}
.slot.selected{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(13,148,136,.35)}
.slot:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.calendar-legend{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.8rem;color:var(--text-soft);
}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* Step 4 — details */
.booking-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.booking-details-grid{grid-template-columns:1fr}}
.summary-card{
  background:var(--teal-50);border-radius:14px;padding:20px;margin-top:24px;
  border:1px solid var(--teal-100);
}
.summary-card h4{font-family:'Poppins',sans-serif;color:var(--teal-900);margin-bottom:12px;font-size:1rem}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--teal-100);font-size:.95rem}
.summary-row:last-child{border-bottom:none;font-weight:700;color:var(--teal-900);padding-top:12px}
.summary-row span:first-child{color:var(--text-soft)}
.summary-row span:last-child{color:var(--teal-900);font-weight:600;text-align:right}

/* Booking nav */
.booking-nav{
  display:flex;justify-content:space-between;gap:10px;margin-top:30px;padding-top:24px;
  border-top:1px solid var(--border);flex-wrap:wrap;
}
.booking-nav .btn{padding:14px 22px}
@media(max-width:480px){.booking-nav{gap:8px}.booking-nav .btn{padding:13px 16px;font-size:.78rem;flex:1;min-width:120px;width:auto}}

/* Confirmation */
.booking-confirm{text-align:center;padding:30px 20px}
.confirm-icon{
  width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#10b981,#34d399);
  margin:0 auto 24px;display:grid;place-items:center;color:#fff;font-size:2.4rem;
  box-shadow:0 10px 30px rgba(16,185,129,.35);
}
.booking-confirm h3{font-size:1.7rem;margin-bottom:10px}
.confirm-mock-note{
  background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:14px;
  margin:24px 0;font-size:.88rem;color:#92400e;
}

/* Sync info bar */
.sync-info{
  display:flex;align-items:center;gap:14px;background:var(--teal-50);
  padding:14px 18px;border-radius:12px;margin-bottom:24px;font-size:.88rem;
  border:1px solid var(--teal-100);
}
.sync-info .sync-icon{
  width:36px;height:36px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;color:#fff;flex-shrink:0;
}
.sync-info strong{color:var(--teal-900)}