.kayan-booking-wizard {
	--kbw-primary: #2563eb;
	--kbw-primary-dark: #1e40af;
	--kbw-radius: 16px;
	direction: rtl;
	font-family: inherit;
	max-width: 760px;
	margin: 40px auto;
	position: relative;
}
.kbw-inner {
	background: #fff;
	border-radius: var(--kbw-radius);
	box-shadow: 0 8px 30px rgba(15, 23, 42, .08);
	padding: 28px;
	position: relative;
}

/* Progress */
.kbw-progress { display: flex; justify-content: space-between; margin-bottom: 28px; position: relative; }
.kbw-progress:before {
	content: ''; position: absolute; top: 14px; right: 6%; left: 6%; height: 2px; background: #e5e7eb; z-index: 0;
}
.kbw-step-dot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1; }
.kbw-step-dot span {
	width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; color: #6b7280;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-bottom: 6px;
	transition: all .25s;
}
.kbw-step-dot label { font-size: 11px; color: #6b7280; text-align: center; max-width: 70px; }
.kbw-step-dot.is-active span { background: var(--kbw-primary); color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.kbw-step-dot.is-done span { background: var(--kbw-primary-dark); color: #fff; }
.kbw-step-dot.is-active label { color: var(--kbw-primary); font-weight: 700; }

/* Step titles */
.kbw-step h3 { font-size: 18px; margin: 0 0 16px; color: #111827; }

/* Step 1 — service cards */
.kbw-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.kbw-service-card {
	--kbw-accent: var(--kbw-primary);
	border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px; cursor: pointer; position: relative;
	transition: all .2s; background: #fafafa;
}
.kbw-service-card:hover { border-color: var(--kbw-accent); transform: translateY(-2px); }
.kbw-service-card.is-selected { border-color: var(--kbw-accent); background: color-mix(in srgb, var(--kbw-accent) 6%, #fff); }
.kbw-service-icon { font-size: 26px; color: var(--kbw-accent); margin-bottom: 8px; }
.kbw-service-title { font-weight: 700; color: #111827; margin-bottom: 4px; }
.kbw-service-desc { font-size: 12px; color: #6b7280; margin-bottom: 8px; line-height: 1.5; }
.kbw-service-meta { display: flex; justify-content: space-between; font-size: 12px; color: #374151; }
.kbw-price { font-weight: 700; color: var(--kbw-accent); }
.kbw-service-check {
	position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid #d1d5db; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent;
}
.kbw-service-card.is-selected .kbw-service-check { background: var(--kbw-accent); border-color: var(--kbw-accent); color: #fff; }

/* Fields (steps 2/3/4) */
.kbw-fields-group, .kbw-customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kbw-field label { display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 6px; }
.kbw-field .req { color: #dc2626; }
.kbw-field .kbw-hint { display: block; font-size: 11px; color: #9ca3af; margin-bottom: 6px; }
.kbw-field input[type="text"], .kbw-field input[type="tel"], .kbw-field input[type="email"],
.kbw-field input[type="number"], .kbw-field input[type="date"], .kbw-field input[type="file"],
.kbw-field select, .kbw-field textarea {
	width: 100%; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; font-size: 14px;
	background: #fff; transition: border-color .2s;
}
.kbw-field input:focus, .kbw-field select:focus, .kbw-field textarea:focus { outline: none; border-color: var(--kbw-primary); }

.kbw-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.kbw-choice { display: flex; align-items: center; gap: 6px; border: 1.5px solid #e5e7eb; border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.kbw-choice input { accent-color: var(--kbw-primary); }

.kbw-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.kbw-switch input { position: absolute; opacity: 0; }
.kbw-switch-slider { width: 42px; height: 24px; background: #e5e7eb; border-radius: 999px; position: relative; transition: .2s; }
.kbw-switch-slider:before { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; right: 3px; transition: .2s; }
.kbw-switch input:checked + .kbw-switch-slider { background: var(--kbw-primary); }
.kbw-switch input:checked + .kbw-switch-slider:before { transform: translateX(-18px); }

.kbw-locate-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.kbw-locate-btn { border: 1.5px solid var(--kbw-primary); color: var(--kbw-primary); background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13px; cursor: pointer; }
.kbw-loc-status { font-size: 12px; color: #16a34a; }

/* Review */
.kbw-review-services { list-style: none; margin: 0 0 16px; padding: 0; }
.kbw-review-services li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #e5e7eb; font-size: 14px; }
.kbw-totals { background: #f9fafb; border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; }
.kbw-totals > div { display: flex; justify-content: space-between; font-size: 13px; color: #6b7280; padding: 4px 0; }
.kbw-total-final { font-size: 16px !important; font-weight: 800; color: #111827 !important; border-top: 1px solid #e5e7eb; margin-top: 6px; padding-top: 10px !important; }
.kbw-review-summary p { font-size: 13px; color: #374151; margin: 4px 0; }

/* Nav / buttons */
.kbw-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 10px; }
.kbw-btn { border: none; border-radius: 12px; padding: 13px 26px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s; }
.kbw-btn-next { background: linear-gradient(135deg, var(--kbw-primary), var(--kbw-primary-dark)); color: #fff; margin-right: auto; box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.kbw-btn-next:hover { transform: translateY(-1px); }
.kbw-btn-back { background: #f3f4f6; color: #374151; }

/* Error / loading */
.kbw-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; margin-top: 14px; font-size: 13px; }
.kbw-loading, .kbw-loading-overlay {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	padding: 40px 0; position: absolute; inset: 0; background: rgba(255,255,255,.85); border-radius: var(--kbw-radius); z-index: 5;
}
.kbw-spinner { width: 30px; height: 30px; border: 3px solid #e5e7eb; border-top-color: var(--kbw-primary); border-radius: 50%; animation: kbw-spin 0.8s linear infinite; }
@keyframes kbw-spin { to { transform: rotate(360deg); } }

/* Payment step */
.kbw-demo-notice {
	background: #fff7ed; color: #9a3412; border: 1px dashed #fdba74; border-radius: 10px;
	padding: 10px 14px; font-size: 12px; margin-bottom: 18px;
}
.kbw-pay-method-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kbw-pay-method-card {
	border: 2px solid #e5e7eb; border-radius: 12px; padding: 22px 16px; text-align: center; cursor: pointer;
	transition: all .2s; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.kbw-pay-method-card:hover { border-color: var(--kbw-primary); transform: translateY(-2px); }
.kbw-pay-method-card i { font-size: 26px; color: var(--kbw-primary); }
.kbw-pay-method-card span { font-size: 14px; font-weight: 700; color: #111827; }

.kbw-payment-processing { text-align: center; padding: 50px 0; }
.kbw-spinner-lg { width: 46px; height: 46px; border-width: 4px; margin: 0 auto 16px; }

.kbw-otp-field input {
	text-align: center; letter-spacing: 8px; font-size: 22px; font-weight: 700;
}

.kbw-invoice-btn {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; background: #111827; color: #fff;
	padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 700;
}

/* Success */
.kbw-success { text-align: center; padding: 20px 0; }
.kbw-success-icon { font-size: 52px; color: #16a34a; margin-bottom: 12px; }
.kbw-ref { font-size: 15px; }
.kbw-whatsapp-confirm {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: #25d366; color: #fff;
	padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 700;
}

/* Mobile */
@media (max-width: 640px) {
	.kayan-booking-wizard { margin: 24px 0; max-width: 100%; }
	.kbw-inner { padding: 16px; border-radius: 12px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
	.kbw-progress { margin-bottom: 18px; }
	.kbw-step-dot label { display: none; }
	.kbw-step-dot span { width: 26px; height: 26px; font-size: 12px; }
	.kbw-service-grid { grid-template-columns: 1fr; gap: 10px; }
	.kbw-fields-group, .kbw-customer-grid { grid-template-columns: 1fr; gap: 12px; }
	.kbw-nav {
		position: sticky; bottom: 0; background: #fff; padding-top: 12px;
		display: flex; gap: 8px; z-index: 5;
	}
	.kbw-btn { flex: 1; min-height: 46px; font-size: 15px; }
	.kbw-pay-methods { grid-template-columns: 1fr; }
	.kbw-step h3 { font-size: 16px; }
	.kbw-summary, .kbw-success { padding: 14px; }
}

@media (max-width: 400px) {
	.kbw-inner { padding: 14px; }
	.kbw-choice { width: 100%; justify-content: flex-start; }
}