/* Calendly Clone — public booking UI */
:root { --cc-accent: #0f766e; }
.cc-page-body { margin:0; background:#f5f6f8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color:#111827; }
.cc-booking-app * { box-sizing: border-box; }
.cc-booking-app { max-width: 980px; margin: 32px auto; padding: 0 16px; }
.cc-card-shell {
  display: grid; grid-template-columns: 320px 1fr; background:#fff; border-radius: 16px;
  border: 1px solid #e5e7eb; box-shadow: 0 6px 24px rgba(15,23,42,0.06); overflow:hidden;
}
.cc-card-single { grid-template-columns: 1fr; }
@media (max-width: 760px) { .cc-card-shell { grid-template-columns: 1fr; } }

.cc-side { padding: 28px; border-right: 1px solid #f1f5f9; background:#fafbfd; }
.cc-host { display:flex; align-items:center; gap:10px; margin-bottom: 14px; }
.cc-avatar { width:40px; height:40px; border-radius:999px; }
.cc-host-name { font-size: 14px; color:#475569; font-weight:500; }
.cc-event-title { font-size: 22px; font-weight: 700; margin: 4px 0 12px; letter-spacing: -0.01em; }
.cc-event-meta { display:flex; flex-direction:column; gap:6px; color:#475569; font-size:14px; margin-bottom: 14px;}
.cc-meta-item { display:flex; align-items:center; gap:8px; }
.cc-event-desc { color:#374151; font-size:14px; line-height:1.55; }
.cc-rescheduling-note { background:#fef3c7; padding:10px 12px; border-radius:8px; color:#854d0e; font-size:13px; margin-top: 10px;}
.cc-price-badge { display:inline-block; margin-top:8px; padding:6px 12px; border-radius:999px; background: var(--cc-accent); color:#fff; font-weight:700; font-size:14px; }

.cc-main { padding: 24px 28px 28px; }

/* Calendar */
.cc-pick-grid { display:grid; grid-template-columns: 1fr 280px; gap: 24px; }
@media (max-width: 760px) { .cc-pick-grid { grid-template-columns: 1fr; } }

.cc-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.cc-cal-nav { background:transparent; border:1px solid #e5e7eb; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:18px; }
.cc-cal-nav:hover { background:#f3f4f6; }
.cc-cal-title { font-weight:600; font-size:15px; }
.cc-cal-dows { display:grid; grid-template-columns: repeat(7,1fr); text-align:center; color:#6b7280; font-size:12px; padding-bottom: 4px; }
.cc-cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:4px; }
.cc-day { aspect-ratio: 1; display:flex; align-items:center; justify-content:center; border-radius:999px; font-size:14px; color:#111827; cursor:default; user-select:none; }
.cc-day.cc-day-empty { visibility:hidden; }
.cc-day.cc-day-disabled { color:#cbd5e1; cursor:not-allowed; }
.cc-day.cc-day-available { cursor:pointer; background:rgba(0,0,0,0.02); font-weight:600; }
.cc-day.cc-day-available:hover { background: var(--cc-accent); color:#fff; }
.cc-day.cc-day-selected { background: var(--cc-accent); color:#fff; }
.cc-day.cc-day-today { box-shadow: inset 0 0 0 1.5px var(--cc-accent); }

.cc-tz { margin-top: 18px; font-size: 13px; color:#475569; }
.cc-tz select { width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }

.cc-slots-head { font-weight:600; margin-bottom:10px; font-size:14px; }
.cc-slots-list { display:flex; flex-direction:column; gap:8px; max-height: 380px; overflow:auto; padding-right:4px; }
.cc-slot { padding:12px 14px; border:1.5px solid #e5e7eb; border-radius:10px; text-align:center; cursor:pointer; font-weight:600; color:#111827; background:#fff; transition: border-color .15s, color .15s; }
.cc-slot:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.cc-slot.cc-slot-selected { background: var(--cc-accent); color:#fff; border-color: var(--cc-accent); }
.cc-slot.cc-confirm { background: var(--cc-accent); color:#fff; border-color: var(--cc-accent); margin-top:6px;}
.cc-slots-empty { color:#6b7280; font-size:14px; padding:20px 0; text-align:center; }

/* Form */
.cc-back { background:transparent; border:none; color:#374151; cursor:pointer; padding:0; font-size:14px; margin-bottom:10px; }
.cc-selected-time { background: rgba(15,118,110,0.08); color: var(--cc-accent); padding: 10px 14px; border-radius: 8px; font-weight:600; margin-bottom:18px; font-size:14px; }
.cc-form { display:flex; flex-direction:column; gap:14px; max-width: 520px; }
.cc-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:#374151; font-weight:500; }
.cc-form input[type=text], .cc-form input[type=email], .cc-form textarea { padding:10px 12px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:15px; font-family:inherit; outline:none; transition: border-color .15s; }
.cc-form input:focus, .cc-form textarea:focus { border-color: var(--cc-accent); }
.cc-form textarea { resize: vertical; }
.cc-form-actions { margin-top:6px; }
.cc-btn-primary { background: var(--cc-accent); color:#fff; border:none; padding:12px 20px; font-size:15px; font-weight:600; border-radius:10px; cursor:pointer; }
.cc-btn-primary:hover { filter: brightness(0.92); }
.cc-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.cc-btn-danger { background:#dc2626; }
.cc-form-error { background:#fee2e2; color:#991b1b; padding:10px 12px; border-radius:8px; font-size:14px; }

/* Done */
.cc-step-done { text-align:center; padding: 24px 12px; }
.cc-done-icon { color: var(--cc-accent); display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:999px; background: rgba(15,118,110,0.1); margin-bottom: 14px; }
.cc-step-done h2 { margin:0 0 8px; font-size:24px; }
.cc-done-summary { font-weight:600; color:#111827; margin: 8px 0; }
.cc-done-sub { color:#6b7280; margin: 4px 0; }

/* Event list shortcode */
.cc-event-list { max-width: 560px; margin: 24px auto; }
.cc-events { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.cc-event-card { --cc-accent: #0f766e; border:1px solid #e5e7eb; border-radius:12px; transition: border-color .15s; }
.cc-event-card:hover { border-color: var(--cc-accent); }
.cc-event-card a { display:flex; align-items:center; gap:12px; padding:14px 16px; text-decoration:none; color:#111827; }
.cc-event-dot { width:10px; height:10px; border-radius:999px; background: var(--cc-accent); }
.cc-event-title { flex:1; font-weight:600; }
.cc-event-meta { color:#6b7280; font-size:13px; }

/* Public host profile */
.cc-profile { max-width: 620px; margin: 48px auto; padding: 0 20px; }
.cc-profile-header { text-align:center; margin-bottom: 28px; }
.cc-profile-avatar { width:96px; height:96px; border-radius:999px; box-shadow: 0 4px 18px rgba(15,23,42,0.08); }
.cc-profile-name { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 6px; }
.cc-profile-bio { color:#6b7280; max-width: 460px; margin: 0 auto; line-height: 1.55; }
.cc-profile-events { list-style:none; padding:0; margin: 16px 0; display:flex; flex-direction:column; gap: 10px; }
.cc-profile-event { background:#fff; border:1px solid #e5e7eb; border-radius: 14px; transition: transform .15s, border-color .15s, box-shadow .15s; overflow:hidden; }
.cc-profile-event:hover { transform: translateY(-1px); border-color: var(--cc-accent); box-shadow: 0 6px 22px rgba(15,23,42,0.06); }
.cc-profile-event-link { display:grid; grid-template-columns: 6px 1fr auto; align-items:center; gap: 14px; padding: 16px 18px; text-decoration:none; color:#111827; }
.cc-profile-event-bar { background: var(--cc-accent); border-radius: 4px; height: 36px; }
.cc-profile-event-body h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cc-profile-event-meta { display:flex; gap: 10px; align-items:center; color:#6b7280; font-size: 13px; margin: 0; }
.cc-profile-price { background: rgba(15,118,110,0.08); color: var(--cc-accent); padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.cc-profile-event-desc { margin: 6px 0 0; color: #4b5563; font-size: 13px; line-height: 1.45; }
.cc-profile-event-arrow { color: #9ca3af; font-size: 22px; transition: color .15s, transform .15s; }
.cc-profile-event:hover .cc-profile-event-arrow { color: var(--cc-accent); transform: translateX(2px); }
.cc-profile-empty { text-align:center; color:#6b7280; padding: 40px 0; }
.cc-profile-foot { text-align:center; color:#9ca3af; font-size: 12px; margin-top: 32px; }