/* clay-booking.css — claymorphism theme for book-appointment.php (loads after the inline <style>) */
.form-row.cols4{grid-template-columns:1.35fr .7fr 1fr 1fr}
/* ═══ CLAYMORPHISM THEME ═══ */
:root{
  --clay-bg:#f7e9f5;--clay-surface:#fdf1fa;
  --clay-light:rgba(255,255,255,.95);--clay-shadow:rgba(156,63,150,.28);--clay-shadow-soft:rgba(156,63,150,.16);
  --clay-out:10px 10px 24px var(--clay-shadow-soft),-8px -8px 20px var(--clay-light),inset 3px 3px 8px rgba(255,255,255,.9),inset -4px -4px 10px rgba(193,90,168,.14);
  --clay-out-sm:6px 6px 14px var(--clay-shadow-soft),-5px -5px 12px var(--clay-light),inset 2px 2px 5px rgba(255,255,255,.9),inset -3px -3px 6px rgba(193,90,168,.13);
  --clay-in:inset 5px 5px 11px rgba(193,90,168,.17),inset -5px -5px 11px rgba(255,255,255,.95);
  --clay-btn:8px 8px 18px rgba(74,18,89,.38),-5px -5px 14px rgba(255,255,255,.8),inset 3px 3px 7px rgba(255,255,255,.28),inset -4px -4px 9px rgba(0,0,0,.28);
}
body{font-family:'Plus Jakarta Sans',sans-serif;background:radial-gradient(circle at 12% 8%,#fff 0,transparent 38%),radial-gradient(circle at 90% 90%,#f3cfe8 0,transparent 42%),var(--clay-bg);min-height:100vh}
.booking-card{background:var(--clay-surface);border:none;border-radius:42px;box-shadow:18px 18px 48px var(--clay-shadow-soft),-14px -14px 36px var(--clay-light),inset 4px 4px 10px rgba(255,255,255,.9),inset -6px -6px 14px rgba(193,90,168,.1)}
.booking-header{margin:14px 14px 0;border-radius:32px;background:linear-gradient(145deg,#b457a8,#7c2d86 60%,#5b1769);box-shadow:8px 10px 22px rgba(74,18,89,.35),inset 4px 4px 10px rgba(255,255,255,.28),inset -6px -6px 14px rgba(0,0,0,.22)}
.booking-brand-logo{border-radius:20px;box-shadow:4px 4px 10px rgba(0,0,0,.25),inset 2px 2px 5px rgba(255,255,255,.9),inset -3px -3px 6px rgba(193,90,168,.2)}
.header-badge{border:none;border-radius:22px;background:rgba(255,255,255,.18);box-shadow:inset 3px 3px 8px rgba(255,255,255,.3),inset -4px -4px 10px rgba(0,0,0,.2)}
.booking-header h1,.header-badge .hb-val,.clinic-picker h2,.estimate-total,.cal-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
.topstrip{padding:0 .5rem}
.back-btn,.change-clinic,.btn-submit{border:none;border-radius:999px;background:linear-gradient(145deg,#6d2377,#4a1259);box-shadow:var(--clay-btn);transition:transform .18s,box-shadow .18s}
.back-btn{padding:9px 18px}
.change-clinic{padding:10px 16px}
.back-btn:hover,.change-clinic:hover{background:linear-gradient(145deg,#7a2a86,#541567);transform:translateY(-2px)}
.btn-submit{padding:16px;border-radius:999px;font-size:1rem;font-weight:800;letter-spacing:.02em}
.btn-submit:hover{background:linear-gradient(145deg,#7a2a86,#541567);transform:translateY(-3px);box-shadow:10px 12px 22px rgba(74,18,89,.4),-5px -5px 14px rgba(255,255,255,.8),inset 3px 3px 7px rgba(255,255,255,.3),inset -4px -4px 9px rgba(0,0,0,.28)}
.btn-submit:active,.back-btn:active,.change-clinic:active{transform:translateY(1px);box-shadow:inset 4px 4px 10px rgba(0,0,0,.35),inset -3px -3px 8px rgba(255,255,255,.15)}
.clinic-picker,.clinic-summary,.estimate-card,.status-message,.calendar-wrap{border:none;background:var(--clay-surface);box-shadow:var(--clay-out)}
.clinic-picker,.clinic-summary{border-radius:30px}
.clinic-summary{background:color-mix(in srgb,var(--clinic-accent) 10%,var(--clay-surface))}
.clinic-option{border:none;border-radius:24px;background:var(--clay-surface);box-shadow:var(--clay-out-sm)}
.clinic-option:hover{transform:translateY(-4px);box-shadow:12px 14px 26px var(--clay-shadow-soft),-6px -6px 14px var(--clay-light),inset 2px 2px 5px rgba(255,255,255,.9),inset -3px -3px 6px rgba(193,90,168,.13)}
.status-message{border-radius:22px;padding:14px 18px}
.status-message.success{background:#e8faf1;box-shadow:6px 6px 14px rgba(11,107,67,.15),-5px -5px 12px rgba(255,255,255,.95),inset 2px 2px 5px rgba(255,255,255,.9)}
.status-message.error{background:#fdeeee}
.section-chip{border-radius:999px;padding:7px 16px;background:linear-gradient(145deg,#fff,var(--green-100));box-shadow:var(--clay-out-sm)}
.section-divider{border-top:none;height:6px;border-radius:99px;background:var(--clay-bg);box-shadow:inset 2px 2px 4px rgba(193,90,168,.18),inset -2px -2px 4px rgba(255,255,255,.95)}
.form-group label{font-weight:700}
.form-group input,.form-group select,.form-group textarea{border:none;border-radius:20px;padding:13px 16px;background:var(--clay-bg);box-shadow:var(--clay-in);font-family:'Plus Jakarta Sans',sans-serif}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{box-shadow:var(--clay-in),0 0 0 3px rgba(228,133,194,.45)}
.form-group input[readonly],.form-group select:disabled{background:#f1dcee;box-shadow:inset 4px 4px 9px rgba(193,90,168,.14),inset -4px -4px 9px rgba(255,255,255,.8)}
.time-select-wrap select{padding-left:42px}
.svc-item{border:none;border-radius:22px;background:var(--clay-surface);box-shadow:var(--clay-out-sm);transition:transform .18s,box-shadow .18s}
.svc-item:hover{background:var(--clay-surface);transform:translateY(-2px)}
.svc-item.checked{background:linear-gradient(145deg,var(--green-100),#f6c9e3);box-shadow:var(--clay-in)}
.estimate-card{border-radius:26px}
.estimate-note,.promo-summary{border-top:none}
.promo-summary{background:transparent}
.promo-chip{padding:6px 12px;background:var(--clay-surface);box-shadow:3px 3px 7px var(--clay-shadow-soft),-3px -3px 7px var(--clay-light),inset 1px 1px 3px rgba(255,255,255,.9)}
.calendar-wrap{border-radius:30px}
.cal-header{background:linear-gradient(145deg,#b457a8,#8a2f90);box-shadow:inset 3px 3px 8px rgba(255,255,255,.3),inset -4px -4px 10px rgba(0,0,0,.2)}
.cal-nav-btn{border:none;border-radius:50%;width:34px;height:34px;background:rgba(255,255,255,.2);box-shadow:3px 3px 7px rgba(0,0,0,.25),inset 2px 2px 4px rgba(255,255,255,.35)}
.cal-nav-btn:active{box-shadow:inset 3px 3px 6px rgba(0,0,0,.3)}
.cal-weekdays{background:transparent;border-bottom:none}
.cal-days{gap:7px;padding:10px 12px}
.cal-day{border:none;border-radius:18px;font-weight:700}
.cal-day.available,.cal-day.partial,.cal-day.full{box-shadow:4px 4px 9px var(--clay-shadow-soft),-3px -3px 8px var(--clay-light),inset 1px 1px 3px rgba(255,255,255,.9)}
.cal-day.available{background:var(--clay-surface)}
.cal-day.available:hover,.cal-day.partial:hover{transform:translateY(-2px);border:none}
.cal-day.today{box-shadow:0 0 0 3px rgba(228,133,194,.6),4px 4px 9px var(--clay-shadow-soft)}
.cal-day.selected{background:linear-gradient(145deg,#b457a8,#7c2d86)!important;box-shadow:inset 3px 3px 7px rgba(255,255,255,.3),inset -4px -4px 9px rgba(0,0,0,.28),4px 6px 12px rgba(74,18,89,.3)!important}
.cal-legend{background:transparent;border-top:none;padding:6px 16px 14px}
.legend-dot{box-shadow:inset 1px 1px 2px rgba(255,255,255,.7),1px 1px 3px rgba(0,0,0,.2)}
.selected-date-display{border:none;border-radius:999px;padding:10px 16px;background:var(--clay-surface);box-shadow:var(--clay-out-sm)}
@media(max-width:600px){.booking-card{border-radius:30px}.booking-header{margin:10px 10px 0;border-radius:24px}}
/* PHP-page extras + 4-column row (Date of Birth / Age / Gender / Marital Status) */
.branch-display{border:none;border-radius:22px;background:var(--clay-surface);box-shadow:var(--clay-out-sm)}
.slot-note.loading{color:var(--green-500)}
.btn-submit:disabled{opacity:.75;cursor:not-allowed;transform:none}
.clinic-summary-logo{border-radius:20px;background:none;box-shadow:none}
@media(max-width:820px){.form-row.cols4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  body{padding:0.75rem 0.5rem 2rem}
  .container{width:100%;max-width:100%}
  .booking-card{border-radius:24px}
  .booking-header{margin:8px 8px 0;border-radius:20px;padding:1.3rem 1rem}
  .booking-brand{gap:10px}
  .booking-brand-logo{width:48px;height:48px;border-radius:14px;padding:4px}
  .booking-header h1{font-size:1.25rem}
  .booking-header p{font-size:.8rem}
  .form-body{padding:1.2rem .85rem}
  .form-row,.form-row.cols3,.form-row.cols4,.service-grid{grid-template-columns:1fr;gap:10px}
  .topstrip{flex-direction:column;align-items:flex-start;gap:8px;padding:0 .2rem}
  .back-btn{padding:8px 16px;font-size:.82rem}
  .clinic-summary{grid-template-columns:auto 1fr;padding:.85rem;border-radius:20px}
  .change-clinic{grid-column:1/-1;text-align:center;width:100%;padding:9px 14px}
  .form-group input,.form-group select,.form-group textarea{font-size:16px;padding:11px 14px;border-radius:16px}
  .calendar-wrap{border-radius:22px}
  .cal-header{padding:10px 14px}
  .cal-days{gap:4px;padding:8px 6px}
  .cal-day{border-radius:12px;font-size:.76rem;min-height:36px}
  .cal-legend{gap:8px;padding:8px 10px;justify-content:center}
  .estimate-main{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
  .estimate-total{font-size:1.35rem}
  .btn-submit{padding:14px;font-size:.95rem}
}
@media(max-width:400px){
  .booking-header{padding:1.1rem .85rem}
  .booking-header h1{font-size:1.15rem}
  .cal-days{gap:3px;padding:6px 3px}
  .cal-day{font-size:.72rem;min-height:32px;border-radius:9px}
  .cal-weekday{font-size:.62rem;padding:6px 0}
  .section-chip{font-size:.68rem;padding:5px 12px}
}