/* ==========================================================================
   Crebi BookFlow Pro — Public Booking Funnel
   Minimal, clean, embeds cleanly into any WordPress theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap');

.cbf-funnel {
	--cbf-primary:    #5B4FE5;
	--cbf-primary-lt: #EFEDFD;
	--cbf-text:       #1C1D22;
	--cbf-muted:      #6B6D78;
	--cbf-border:     #E2E0DC;
	--cbf-surface:    #FFFFFF;
	--cbf-canvas:     #FAF9F6;
	--cbf-success:    #10B981;
	--cbf-error:      #EF4444;
	--cbf-shadow:     0 1px 2px rgba(20,21,26,.04), 0 8px 24px -12px rgba(20,21,26,.10);
	--cbf-radius:     14px;

	font-family: 'Inter', sans-serif;
	color: var(--cbf-text);
	max-width: 560px;
	margin: 0 auto;
	padding: 8px 0;
}

.cbf-funnel-loading { text-align:center; padding:40px; color:var(--cbf-muted); font-size:13.5px; }

.cbf-funnel-steps { display:flex; justify-content:center; margin-bottom:28px; position:relative; }
.cbf-funnel-steps::before { content:''; position:absolute; top:14px; left:10%; right:10%; height:2px; background:var(--cbf-border); z-index:0; }
.cbf-funnel-step-item { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; z-index:1; }
.cbf-funnel-step-item .bubble { width:28px; height:28px; border-radius:50%; background:var(--cbf-surface); border:2px solid var(--cbf-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--cbf-muted); margin-bottom:6px; transition:all .2s ease; }
.cbf-funnel-step-item.done .bubble  { background:var(--cbf-success); border-color:var(--cbf-success); color:#fff; }
.cbf-funnel-step-item.active .bubble { background:var(--cbf-primary); border-color:var(--cbf-primary); color:#fff; box-shadow:0 0 0 4px var(--cbf-primary-lt); }
.cbf-funnel-step-item .lbl { font-size:10.5px; color:var(--cbf-muted); font-weight:500; }
.cbf-funnel-step-item.active .lbl { color:var(--cbf-primary); font-weight:600; }

.cbf-panel { background:var(--cbf-surface); border:1px solid var(--cbf-border); border-radius:var(--cbf-radius); padding:24px; box-shadow:var(--cbf-shadow); }
.cbf-panel h2 { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; margin:0 0 16px; }
.cbf-panel p { font-size:13.5px; color:var(--cbf-muted); margin:0 0 16px; }

.cbf-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.cbf-service-card { border:2px solid var(--cbf-border); border-radius:10px; padding:14px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.cbf-service-card:hover { border-color:var(--cbf-primary); background:var(--cbf-primary-lt); }
.cbf-service-card.selected { border-color:var(--cbf-primary); background:var(--cbf-primary-lt); }
.cbf-service-card .dot { width:10px; height:10px; border-radius:50%; margin-bottom:8px; }
.cbf-service-card .name { font-weight:600; font-size:13.5px; margin-bottom:3px; }
.cbf-service-card .dur { font-size:11.5px; color:var(--cbf-muted); }

.cbf-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cbf-cal-header .month-label { font-family:'Sora',sans-serif; font-weight:600; font-size:15px; }
.cbf-cal-nav { background:none; border:1px solid var(--cbf-border); border-radius:8px; width:30px; height:30px; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.cbf-cal-nav:hover { border-color:var(--cbf-primary); color:var(--cbf-primary); }
.cbf-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:16px; }
.cbf-cal-day-name { font-size:10.5px; font-weight:600; text-align:center; color:var(--cbf-muted); padding-bottom:4px; }
.cbf-cal-cell { position:relative; aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:500; cursor:pointer; border:2px solid transparent; transition:all .12s ease; }
.cbf-cal-cell:hover:not(.disabled):not(.empty) { border-color:var(--cbf-primary); color:var(--cbf-primary); }
.cbf-cal-cell.selected { background:var(--cbf-primary); color:#fff; }
.cbf-cal-cell.today { font-weight:700; color:var(--cbf-primary); }
.cbf-cal-cell.disabled { color:var(--cbf-border); cursor:default; }
.cbf-cal-cell.empty { cursor:default; }
.cbf-cal-cell.has-slots::after { content:''; width:4px; height:4px; border-radius:50%; background:var(--cbf-success); position:absolute; bottom:3px; left:50%; transform:translateX(-50%); }

.cbf-slots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; margin-bottom:16px; }
.cbf-slot { border:1.5px solid var(--cbf-border); border-radius:9px; padding:9px 4px; text-align:center; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .12s ease; }
.cbf-slot:hover { border-color:var(--cbf-primary); color:var(--cbf-primary); background:var(--cbf-primary-lt); }
.cbf-slot.selected { background:var(--cbf-primary); color:#fff; border-color:var(--cbf-primary); }
.cbf-slots-empty { text-align:center; color:var(--cbf-muted); font-size:13px; padding:20px 0; }

.cbf-form-row { margin-bottom:14px; }
.cbf-form-row label { display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.cbf-form-row input, .cbf-form-row select, .cbf-form-row textarea { width:100%; padding:9px 12px; border:1.5px solid var(--cbf-border); border-radius:8px; font-family:'Inter',sans-serif; font-size:13px; background:var(--cbf-surface); color:var(--cbf-text); transition:border-color .12s ease; }
.cbf-form-row input:focus, .cbf-form-row select:focus, .cbf-form-row textarea:focus { outline:none; border-color:var(--cbf-primary); box-shadow:0 0 0 3px var(--cbf-primary-lt); }
.cbf-form-row.required label::after { content:' *'; color:var(--cbf-error); }
.cbf-form-row .cbf-error-msg { font-size:11.5px; color:var(--cbf-error); margin-top:4px; display:none; }
.cbf-form-row.has-error input, .cbf-form-row.has-error select { border-color:var(--cbf-error); }
.cbf-form-row.has-error .cbf-error-msg { display:block; }

.cbf-funnel-nav { display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:10px; }
.cbf-btn-next, .cbf-btn-submit { background:var(--cbf-primary); color:#fff; border:none; padding:11px 22px; border-radius:9px; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; cursor:pointer; transition:opacity .15s ease, transform .1s ease; display:flex; align-items:center; gap:6px; }
.cbf-btn-next:hover, .cbf-btn-submit:hover { opacity:.9; }
.cbf-btn-next:active, .cbf-btn-submit:active { transform:scale(.98); }
.cbf-btn-next:disabled, .cbf-btn-submit:disabled { opacity:.5; cursor:not-allowed; }
.cbf-btn-back { background:none; border:1.5px solid var(--cbf-border); color:var(--cbf-muted); padding:11px 16px; border-radius:9px; font-size:13px; font-weight:500; cursor:pointer; }
.cbf-btn-back:hover { border-color:var(--cbf-text); color:var(--cbf-text); }

.cbf-whatsapp-btn { display:flex; align-items:center; gap:8px; background:#25D366; color:#fff; border:none; padding:11px 18px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:opacity .15s ease; }
.cbf-whatsapp-btn:hover { opacity:.88; color:#fff; }

.cbf-success { text-align:center; padding:32px 20px; }
.cbf-success .icon { font-size:52px; display:block; margin-bottom:12px; }
.cbf-success h2 { font-family:'Sora',sans-serif; font-size:22px; margin:0 0 8px; }
.cbf-success .uid { font-family:'JetBrains Mono',monospace; font-size:13px; background:var(--cbf-canvas); border:1px solid var(--cbf-border); border-radius:6px; padding:4px 10px; display:inline-block; margin:8px 0 18px; }

@media (max-width:480px) {
	.cbf-service-grid { grid-template-columns:1fr; }
	.cbf-panel { padding:16px; }
}