.sbp-app {
	max-width: 720px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #2b2b2b;
	background: #fff;
	border: 1px solid #e6e2dd;
	border-radius: 10px;
	padding: 28px;
	box-sizing: border-box;
}
.sbp-app * { box-sizing: border-box; }

.sbp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
}
.sbp-step-indicator {
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 20px;
	background: #f4f1ee;
	color: #999;
	letter-spacing: .2px;
}
.sbp-step-indicator.active { background: #2b2b2b; color: #fff; }
.sbp-step-indicator.done { background: #cfe8d8; color: #1a5c33; }

.sbp-panel h3 { margin-top: 0; font-size: 18px; }

.sbp-service-list, .sbp-stylist-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 10px;
}
.sbp-card {
	border: 1px solid #e6e2dd;
	border-radius: 8px;
	padding: 14px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	text-align: left;
	background: #fff;
}
.sbp-card:hover { border-color: #b8afa4; }
.sbp-card.selected { border-color: #2b2b2b; box-shadow: 0 0 0 1px #2b2b2b; }
.sbp-card h4 { margin: 0 0 6px; font-size: 15px; }
.sbp-card .sbp-meta { font-size: 13px; color: #777; }
.sbp-card img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }

.sbp-calendar-wrap { display: flex; gap: 20px; flex-wrap: wrap; }
.sbp-calendar { flex: 1 1 280px; }
.sbp-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; }
.sbp-cal-header button { background: none; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; padding: 4px 10px; }
.sbp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.sbp-cal-grid .sbp-dow { font-size: 11px; color: #999; padding: 4px 0; }
.sbp-cal-day {
	padding: 8px 0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	background: #f8f6f4;
}
.sbp-cal-day:hover { background: #ece7e1; }
.sbp-cal-day.sbp-disabled { color: #ccc; cursor: not-allowed; background: transparent; }
.sbp-cal-day.sbp-empty { background: transparent; cursor: default; }
.sbp-cal-day.sbp-selected { background: #2b2b2b; color: #fff; }

.sbp-slots { flex: 1 1 200px; }
.sbp-slot-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sbp-slot-btn {
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 6px;
	padding: 7px 12px;
	cursor: pointer;
	font-size: 13px;
}
.sbp-slot-btn:hover { border-color: #999; }
.sbp-slot-btn.selected { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
.sbp-hint { color: #999; font-size: 13px; }

.sbp-form label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.sbp-form input, .sbp-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 9px 10px;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 14px;
	font-weight: normal;
	font-family: inherit;
}

.sbp-nav { display: flex; justify-content: space-between; margin-top: 18px; }
.sbp-btn {
	border: none;
	border-radius: 6px;
	padding: 10px 18px;
	font-size: 14px;
	cursor: pointer;
}
.sbp-btn-primary { background: #2b2b2b; color: #fff; margin-left: auto; }
.sbp-btn-primary:hover { background: #444; }
.sbp-btn-secondary { background: #f0ede9; color: #2b2b2b; }

.sbp-summary { background: #f8f6f4; border-radius: 8px; padding: 16px; }
.sbp-summary div { margin-bottom: 8px; font-size: 14px; }
.sbp-summary strong { display: inline-block; width: 90px; color: #777; font-weight: 600; }

.sbp-success { text-align: center; padding: 30px 10px; }
.sbp-again-prompt { margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; }
.sbp-success-icon {
	width: 54px; height: 54px; line-height: 54px;
	border-radius: 50%; background: #2b7a3d; color: #fff;
	font-size: 26px; margin: 0 auto 14px;
}

.sbp-error {
	margin-top: 14px;
	background: #fdecec;
	color: #a00000;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
}

@media (max-width: 480px) {
	.sbp-app { padding: 18px; }
	.sbp-steps { gap: 4px; }
	.sbp-step-indicator { font-size: 10px; padding: 4px 8px; }
}