
/* ── CTDB Frontend ── */
.ctdb-widget{--ctdb-primary:#2563eb;--ctdb-bg:#fff;background:var(--ctdb-bg);border-radius:16px;box-shadow:0 4px 32px rgba(0,0,0,.10);padding:28px;max-width:820px;margin:0 auto;font-family:'Inter',system-ui,sans-serif;color:#1e293b}

/* Progress bar */
.ctdb-progress-bar{width:100%;height:4px;background:#e2e8f0;border-radius:999px;margin-top:24px;overflow:hidden}
.ctdb-progress-fill{height:100%;background:var(--ctdb-primary);border-radius:999px;transition:width .35s ease}

/* Steps */
.ctdb-step{display:none;animation:ctdb-fadeIn .25s ease}
.ctdb-step.active{display:block}
@keyframes ctdb-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ctdb-step-title{font-size:20px;font-weight:700;margin:0 0 18px;color:#0f172a}
.ctdb-q-count{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ctdb-primary);margin:0 0 6px}

/* Calendar grid */
.ctdb-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}
@media(max-width:600px){.ctdb-row{grid-template-columns:1fr}}
.ctdb-calendar-grid{background:#f8fafc;border-radius:12px;padding:16px}
.ctdb-cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ctdb-cal-month-label{font-size:14px;font-weight:700;color:#0f172a}
.ctdb-cal-prev,.ctdb-cal-next{background:none;border:none;cursor:pointer;font-size:20px;color:#64748b;padding:2px 8px;border-radius:6px;line-height:1}.ctdb-cal-prev:hover,.ctdb-cal-next:hover{background:#e2e8f0}
.ctdb-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px}
.ctdb-cal-weekdays span{font-size:11px;font-weight:600;color:#94a3b8;padding:4px 0}
.ctdb-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ctdb-cal-day{text-align:center;padding:7px 2px;font-size:13px;border-radius:8px;cursor:pointer;color:#334155;border:1px solid transparent;transition:all .15s}
.ctdb-cal-day:hover:not(.disabled):not(.empty){background:#dbeafe;color:var(--ctdb-primary)}
.ctdb-cal-day.selected{background:var(--ctdb-primary);color:#fff;font-weight:700}
.ctdb-cal-day.today{border-color:var(--ctdb-primary)}
.ctdb-cal-day.disabled{color:#cbd5e1;cursor:not-allowed}
.ctdb-cal-day.empty{cursor:default}

/* Slots */
.ctdb-slots-wrap{display:flex;flex-direction:column}
.ctdb-slots-hint{font-size:13px;color:#94a3b8;margin:0 0 10px}
.ctdb-slots-list{display:flex;flex-wrap:wrap;gap:8px}
.ctdb-slot{padding:9px 16px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;color:#334155}
.ctdb-slot:hover{border-color:var(--ctdb-primary);color:var(--ctdb-primary)}
.ctdb-slot.selected{background:var(--ctdb-primary);color:#fff;border-color:var(--ctdb-primary)}

/* Form inputs */
.ctdb-input{width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;color:#1e293b;background:#fff;transition:border-color .15s;margin-top:4px;font-family:inherit}
.ctdb-input:focus{outline:none;border-color:var(--ctdb-primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.ctdb-widget label{display:block;font-size:13px;font-weight:500;color:#334155;margin-bottom:12px}

/* Options (radio/checkbox) */
.ctdb-options{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.ctdb-option-label{display:flex;align-items:center;gap:10px;padding:12px 16px;border:1.5px solid #e2e8f0;border-radius:10px;cursor:pointer;font-size:14px;transition:all .15s}
.ctdb-option-label:hover{border-color:var(--ctdb-primary);background:#eff6ff}
.ctdb-option-label input[type=radio]:checked~*,.ctdb-option-label:has(input:checked){border-color:var(--ctdb-primary);background:#eff6ff}

/* Buttons */
.ctdb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--ctdb-primary);color:#fff;border:none;padding:11px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit}
.ctdb-btn:hover{filter:brightness(1.1)}
.ctdb-btn.ctdb-secondary{background:#f1f5f9;color:#334155;border:1.5px solid #e2e8f0}.ctdb-btn.ctdb-secondary:hover{background:#e2e8f0}
.ctdb-btn:disabled{opacity:.5;cursor:not-allowed}
.ctdb-step-btns{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* Summary */
.ctdb-summary{background:#f8fafc;border-radius:12px;padding:16px;font-size:13px;line-height:2}
.ctdb-summary strong{color:#0f172a}

/* Success */
.ctdb-success-step{text-align:center;padding:20px 0}
.ctdb-success-icon{width:64px;height:64px;background:#dcfce7;border-radius:50%;font-size:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#15803d}
.ctdb-success-step h3{font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px}
.ctdb-confirm-msg{color:#64748b;font-size:14px;margin-bottom:16px}
.ctdb-gcal-btn{margin:0 auto}

/* Trigger button */
.ctdb-trigger-btn{display:inline-flex;align-items:center;gap:6px;background:var(--ctdb-primary);color:#fff;border:none;padding:12px 26px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.ctdb-trigger-btn:hover{filter:brightness(1.1)}

/* Modal */
.ctdb-modal{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center}
.ctdb-modal.open{display:flex}
.ctdb-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ctdb-modal-box{position:relative;background:#fff;border-radius:20px;padding:32px;max-width:900px;width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2);z-index:1}
.ctdb-modal-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:26px;cursor:pointer;color:#94a3b8;line-height:1}.ctdb-modal-close:hover{color:#334155}

/* Spinner */
.ctdb-loading{display:flex;justify-content:center;padding:20px}
.ctdb-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:var(--ctdb-primary);border-radius:50%;animation:ctdb-spin .6s linear infinite}
@keyframes ctdb-spin{to{transform:rotate(360deg)}}

/* Mobile */
@media(max-width:520px){.ctdb-widget{padding:18px}.ctdb-step-title{font-size:17px}.ctdb-btn{padding:10px 18px;font-size:13px}}

/* ── Booked & Locked slot states (v2.2 fix) ── */
.ctdb-slot.ctdb-slot-booked {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
  cursor: not-allowed !important;
  opacity: 0.75;
  text-decoration: line-through;
}
.ctdb-slot.ctdb-slot-booked small {
  display: inline-block;
  font-size: 10px;
  background: #b91c1c;
  color: #fff;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  text-decoration: none;
}
.ctdb-slot.ctdb-slot-locked {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}
.ctdb-slot:disabled {
  pointer-events: none;
}
/* Loading spinner inside slots area */
.ctdb-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  color: #64748b;
  font-size: 13px;
}
.ctdb-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--ctdb-primary, #2563eb);
  border-radius: 50%;
  animation: ctdb-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes ctdb-spin { to { transform: rotate(360deg); } }
/* Step inline error message */
.ctdb-step-error {
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

/* Summary rows */
.ctdb-summary-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.ctdb-summary-row:last-child{border-bottom:none}
.ctdb-summary-row span{color:#64748b;flex-shrink:0;margin-right:12px}
.ctdb-summary-row strong{color:#0f172a;text-align:right}

/* Required asterisk */
.ctdb-req{color:#ef4444;margin-left:2px}

/* Field error state */
.ctdb-input-err{border-color:#ef4444 !important}
.ctdb-input-err:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}
