/* =========================================================
   KLP Consultation Booking Widget — booking.css
   ========================================================= */

:root {
	--klpb-navy:      #1a2744;
	--klpb-orange:    #e8651a;
	--klpb-orange-dk: #c4541a;
	--klpb-green:     #22c55e;
	--klpb-green-dk:  #16a34a;
	--klpb-light:     #f8f9fb;
	--klpb-border:    #e2e8f0;
	--klpb-gray:      #64748b;
	--klpb-radius:    12px;
	--klpb-radius-sm: 8px;
	--klpb-shadow:    0 4px 24px rgba(26,39,68,.08);
	--klpb-tr:        .18s ease;
}

/* ── Widget ─────────────────────────────────────────────── */
.klpb-widget {
	max-width: 740px;
	margin: 0 auto;
	font-family: 'Source Sans 3','Segoe UI',Arial,sans-serif;
	color: var(--klpb-navy);
}

/* ── Steps ──────────────────────────────────────────────── */
.klpb-step {
	background: #fff;
	border: 1px solid var(--klpb-border);
	border-radius: var(--klpb-radius);
	box-shadow: var(--klpb-shadow);
	padding: 36px 40px;
	margin-bottom: 20px;
	animation: klpbFadeIn .25s ease;
}
@keyframes klpbFadeIn {
	from { opacity:0; transform:translateY(10px); }
	to   { opacity:1; transform:translateY(0); }
}
.klpb-step-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.klpb-step-badge {
	width:36px; height:36px; background:var(--klpb-orange); color:#fff;
	border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-weight:700; font-size:15px; flex-shrink:0; margin-top:2px;
}
.klpb-step-title { font-size:1.35rem; font-weight:700; margin:0 0 4px; }
.klpb-step-sub   { font-size:.9rem; color:var(--klpb-gray); margin:0; }

/* ── Back button ─────────────────────────────────────────── */
.klpb-back-btn { margin-top:20px; }

/* ── Email step ─────────────────────────────────────────── */
.klpb-email-row { display:flex; gap:12px; flex-wrap:wrap; }

/* ── Inputs ─────────────────────────────────────────────── */
.klpb-input {
	width:100%; padding:13px 16px; border:1.5px solid var(--klpb-border);
	border-radius:var(--klpb-radius-sm); font-size:.95rem; font-family:inherit;
	color:var(--klpb-navy); background:#fff;
	transition:border-color var(--klpb-tr), box-shadow var(--klpb-tr);
	box-sizing:border-box;
}
.klpb-input:focus { outline:none; border-color:var(--klpb-orange); box-shadow:0 0 0 3px rgba(232,101,26,.15); }
.klpb-textarea { resize:vertical; min-height:100px; }
.klpb-field { display:flex; flex-direction:column; gap:6px; }
.klpb-label { font-size:.85rem; font-weight:600; }
.klpb-req   { color:var(--klpb-orange); }
.klpb-field-error { color:#dc2626; font-size:.85rem; margin:4px 0 0; }
.klpb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.klpb-field--full { grid-column:1/-1; }

/* ── Buttons ─────────────────────────────────────────────── */
.klpb-btn {
	display:inline-flex; align-items:center; gap:8px; padding:13px 24px;
	border-radius:var(--klpb-radius-sm); font-size:.95rem; font-weight:700;
	font-family:inherit; cursor:pointer; border:none;
	transition:background var(--klpb-tr), transform var(--klpb-tr), box-shadow var(--klpb-tr);
}
.klpb-btn--primary { background:var(--klpb-orange); color:#fff; }
.klpb-btn--primary:hover { background:var(--klpb-orange-dk); transform:translateY(-1px); box-shadow:0 4px 16px rgba(232,101,26,.3); }
.klpb-btn--primary:disabled { opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; }
.klpb-btn--ghost { background:transparent; color:var(--klpb-gray); border:1.5px solid var(--klpb-border); }
.klpb-btn--ghost:hover { border-color:var(--klpb-navy); color:var(--klpb-navy); }
.klpb-form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ── Pills ───────────────────────────────────────────────── */
.klpb-pill {
	display:inline-block; padding:3px 10px; border-radius:100px;
	font-size:.78rem; font-weight:700;
}
.klpb-pill--green  { background:#dcfce7; color:#166534; }
.klpb-pill--orange { background:#ffedd5; color:#9a3412; }
.klpb-pill--navy   { background:#dbeafe; color:#1e3a8a; }
.klpb-pill--gray   { background:#f1f5f9; color:var(--klpb-gray); }

/* ── Type cards ─────────────────────────────────────────── */
.klpb-type-cards { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }

.klpb-type-card {
	display:flex; align-items:center; gap:18px;
	border:2px solid var(--klpb-border); border-radius:var(--klpb-radius);
	padding:20px 24px; cursor:pointer;
	transition:border-color var(--klpb-tr), box-shadow var(--klpb-tr), transform var(--klpb-tr);
	background:#fff;
}
.klpb-type-card:hover {
	transform:translateY(-2px);
	box-shadow:0 6px 24px rgba(26,39,68,.1);
}
.klpb-type-card--free:hover     { border-color:var(--klpb-green); }
.klpb-type-card--online:hover   { border-color:var(--klpb-orange); }
.klpb-type-card--inperson:hover { border-color:var(--klpb-navy); }

.klpb-type-card--selected-free     { border-color:var(--klpb-green)!important;  background:#f0fdf4!important; }
.klpb-type-card--selected-online   { border-color:var(--klpb-orange)!important; background:#fff8f4!important; }
.klpb-type-card--selected-inperson { border-color:var(--klpb-navy)!important;   background:#eff6ff!important; }

.klpb-type-card-icon { font-size:1.8rem; flex-shrink:0; line-height:1; }
.klpb-type-card-body { flex:1; }
.klpb-type-card-name { font-weight:700; font-size:1rem; margin-bottom:4px; }
.klpb-type-card-desc { font-size:.85rem; color:var(--klpb-gray); margin-bottom:8px; line-height:1.5; }
.klpb-type-card-meta { display:flex; gap:6px; flex-wrap:wrap; }
.klpb-type-card-arrow { font-size:1.2rem; color:var(--klpb-gray); flex-shrink:0; transition:transform var(--klpb-tr), color var(--klpb-tr); }
.klpb-type-card:hover .klpb-type-card-arrow { transform:translateX(4px); color:var(--klpb-orange); }

/* ── Duration picker ─────────────────────────────────────── */
.klpb-duration-panel {
	background:var(--klpb-light); border:1px solid var(--klpb-border);
	border-radius:var(--klpb-radius); padding:24px 28px; margin-bottom:20px;
	animation:klpbFadeIn .2s ease;
}
.klpb-duration-title {
	display:flex; align-items:center; gap:8px;
	font-size:.95rem; font-weight:700; margin:0 0 16px;
}
.klpb-duration-options { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.klpb-duration-btn {
	display:flex; flex-direction:column; align-items:center; gap:4px;
	padding:14px 24px; border:2px solid var(--klpb-border); border-radius:var(--klpb-radius-sm);
	background:#fff; cursor:pointer; min-width:110px;
	transition:border-color var(--klpb-tr), background var(--klpb-tr), transform var(--klpb-tr);
	font-family:inherit;
}
.klpb-duration-btn:hover { border-color:var(--klpb-orange); transform:translateY(-1px); }
.klpb-duration-btn--selected { border-color:var(--klpb-orange)!important; background:#fff8f4!important; }
.klpb-duration-hours { font-weight:700; font-size:.95rem; color:var(--klpb-navy); }
.klpb-duration-price { font-size:.82rem; color:var(--klpb-orange); font-weight:600; }
.klpb-duration-note  { font-size:.82rem; color:var(--klpb-gray); margin:0; }

/* ── Calendar selected strip ─────────────────────────────── */
.klpb-selected-strip {
	background:var(--klpb-light); border-radius:var(--klpb-radius-sm);
	padding:12px 18px; margin-bottom:20px;
	font-size:.88rem; font-weight:600; color:var(--klpb-navy);
	display:flex; align-items:center; gap:10px;
}

/* ── Month nav ───────────────────────────────────────────── */
.klpb-month-nav { display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:20px; }
.klpb-month-label { font-weight:700; font-size:1.05rem; min-width:160px; text-align:center; }
.klpb-month-btn {
	width:36px; height:36px; border:1.5px solid var(--klpb-border); background:#fff;
	border-radius:50%; font-size:1.2rem; cursor:pointer; display:flex;
	align-items:center; justify-content:center;
	transition:border-color var(--klpb-tr), background var(--klpb-tr); color:var(--klpb-navy);
}
.klpb-month-btn:hover { border-color:var(--klpb-orange); background:var(--klpb-orange); color:#fff; }
.klpb-month-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── Calendar grid ───────────────────────────────────────── */
.klpb-day-names { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.klpb-day-name { text-align:center; font-size:.78rem; font-weight:700; color:var(--klpb-gray); text-transform:uppercase; letter-spacing:.04em; padding:4px 0; }
.klpb-calendar-cells { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }

.klpb-cal-cell {
	aspect-ratio:1; display:flex; align-items:center; justify-content:center;
	border-radius:var(--klpb-radius-sm); font-size:.9rem; font-weight:600;
	cursor:default; transition:background var(--klpb-tr), color var(--klpb-tr);
	user-select:none; position:relative;
}
.klpb-cal-cell--empty   { background:transparent; }
.klpb-cal-cell--past, .klpb-cal-cell--unavail { color:#cbd5e1; cursor:not-allowed; }
.klpb-cal-cell--available {
	background:#f0fdf4; color:#166534; cursor:pointer; border:1.5px solid #bbf7d0;
}
.klpb-cal-cell--available:hover { background:var(--klpb-green); color:#fff; border-color:var(--klpb-green); transform:scale(1.06); }
.klpb-cal-cell--selected { background:var(--klpb-navy)!important; color:#fff!important; border-color:var(--klpb-navy)!important; transform:scale(1.06); }
.klpb-cal-cell--today::after {
	content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
	width:4px; height:4px; border-radius:50%; background:var(--klpb-orange);
}

/* ── Time slots ──────────────────────────────────────────── */
.klpb-time-panel { border-top:1px solid var(--klpb-border); padding-top:20px; animation:klpbFadeIn .2s ease; }
.klpb-time-title { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700; margin:0 0 6px; }
.klpb-time-note  { font-size:.82rem; color:var(--klpb-gray); margin:0 0 14px; }
.klpb-time-slots { display:flex; flex-wrap:wrap; gap:10px; }
.klpb-time-slot {
	padding:10px 18px; border:1.5px solid var(--klpb-border); border-radius:100px;
	font-size:.88rem; font-weight:600; cursor:pointer;
	transition:all var(--klpb-tr); background:#fff; color:var(--klpb-navy); font-family:inherit;
}
.klpb-time-slot:hover { border-color:var(--klpb-orange); color:var(--klpb-orange); background:#fff8f4; }
.klpb-time-slot--selected { background:var(--klpb-orange); color:#fff!important; border-color:var(--klpb-orange)!important; }

/* ── Loading / no slots ──────────────────────────────────── */
.klpb-calendar-loading { display:flex; justify-content:center; padding:48px 0; color:var(--klpb-orange); }
@keyframes klpbSpin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.klpb-no-slots { text-align:center; padding:40px 0; color:var(--klpb-gray); display:flex; flex-direction:column; align-items:center; gap:12px; }

/* ── Booking summary ─────────────────────────────────────── */
.klpb-booking-summary {
	background:var(--klpb-light); border-radius:var(--klpb-radius-sm);
	padding:18px 22px; margin-bottom:24px;
	display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.klpb-booking-summary-item { display:flex; flex-direction:column; gap:2px; }
.klpb-booking-summary-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--klpb-gray); }
.klpb-booking-summary-value { font-size:1rem; font-weight:700; }
.klpb-booking-summary-value--orange { color:var(--klpb-orange); }

/* ── Success ─────────────────────────────────────────────── */
.klpb-success { text-align:center; padding:56px 40px; }
.klpb-success-icon {
	width:72px; height:72px; background:#dcfce7; border-radius:50%;
	display:flex; align-items:center; justify-content:center; margin:0 auto 24px; color:#16a34a;
}
.klpb-success-icon svg { width:36px; height:36px; }
.klpb-success h2 { font-size:1.6rem; margin:0 0 12px; }
.klpb-success p  { color:var(--klpb-gray); margin:0 0 28px; }
.klpb-success-checklist { list-style:none; padding:0; margin:0 auto; display:inline-flex; flex-direction:column; gap:10px; text-align:left; }
.klpb-success-checklist li { font-size:.9rem; color:#166534; background:#f0fdf4; border-radius:100px; padding:8px 18px; font-weight:600; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:600px) {
	.klpb-step { padding:24px 20px; }
	.klpb-form-grid { grid-template-columns:1fr; }
	.klpb-field--full { grid-column:1; }
	.klpb-email-row, .klpb-form-actions { flex-direction:column; }
	.klpb-email-row .klpb-btn, .klpb-form-actions .klpb-btn { width:100%; justify-content:center; }
	.klpb-form-actions { flex-direction:column-reverse; }
	.klpb-type-card { padding:16px 18px; }
	.klpb-duration-options { gap:8px; }
	.klpb-duration-btn { min-width:90px; padding:12px 16px; }
}