/* ProNest view styles — booking domain. Uses the dark tokens from general.css
   (--surface-2, --text, --accent, --border, --radius-card). */

:root {
	--player-h: 0px; /* ProNest has no player bar — reclaim the bottom space */
}

/* ─── Page headers ──────────────────────────────────────────────────────── */
.page-header {
	margin-bottom: var(--spacing-lg);

	h1 {
		font: var(--font-h3);
		margin: 0 0 4px;
	}
}

.page-subtitle {
	color: var(--text-dim);
	font: var(--font-body-large-regular);
	margin: 0;
}

.detail-header {
	text-align: center;

	.service-icon.lg { font-size: 56px; }
	h1 { margin-top: 8px; }
	.service-meta {
		color: var(--text-dim);
		font: var(--font-body-medium-regular);
		margin-top: 6px;
	}
}

.back-link {
	display: inline-flex;
	align-items: center;
	color: var(--text-dim);
	margin-bottom: 8px;

	&:hover { color: var(--text); }
	.ms { font-size: 26px; }
}

/* ─── Service grid (home) ───────────────────────────────────────────────── */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--spacing-md);
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: var(--spacing-lg);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	transition: transform 0.12s, border-color 0.12s;

	&:hover { border-color: var(--accent); }
	&:active { transform: scale(0.97); }
}

.service-icon {
	font-size: 32px;
	line-height: 1;
	color: var(--accent-2);
}

.service-name {
	font: var(--font-body-large-semibold);
	color: var(--text);
}

.service-price {
	font: var(--font-body-small-medium);
	color: var(--text-dim);
}

/* ─── Item selection (service detail) ───────────────────────────────────── */
.item-list {
	list-style: none;
	margin: 0 0 96px; /* clear the sticky continue bar */
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
}

.item-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.item-name  { font: var(--font-body-large-semibold); color: var(--text); }
.item-price { font: var(--font-body-medium-regular); color: var(--text-dim); }

.stepper {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-shrink: 0;

	.qty {
		min-width: 18px;
		text-align: center;
		font: var(--font-body-large-semibold);
		color: var(--text);
		font-variant-numeric: tabular-nums;
	}

	.step {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		display: grid;
		place-items: center;
		border: 1px solid var(--border);
		background: var(--surface-3);
		color: var(--text);
		cursor: pointer;
		transition: background 0.12s, opacity 0.12s;

		.ms { font-size: 22px; }
		&:hover:not(:disabled) { background: var(--surface-2); }
		&:disabled { opacity: 0.35; cursor: not-allowed; }

		&.add {
			background: var(--accent-grad);
			border-color: transparent;
			color: #fff;
		}
	}
}

/* Sticky bottom action bar with the running total */
.continue-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	/* Keep the bar's content aligned with the 600px main column on wide screens */
	padding-block: 12px;
	padding-left: max(16px, calc((100% - 600px) / 2));
	padding-right: max(16px, calc((100% - 600px) / 2));
	background: rgba(14, 14, 18, 0.96);
	border-top: 1px solid var(--border);
	backdrop-filter: blur(8px);

	.continue-meta {
		display: flex;
		flex-direction: column;
		gap: 2px;
		font: var(--font-body-medium-semibold);
		color: var(--text);
	}
	.muted { color: var(--text-dim); font: var(--font-body-small-regular); }

	wa-button { flex-shrink: 0; }
}

/* ─── Booking extras (radio option cards) ───────────────────────────────── */
.extras-prompt { margin-bottom: var(--spacing-md); }

.option-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
}

.option-card {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	text-align: left;
	padding: 14px var(--spacing-md);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;

	&:hover { border-color: var(--accent); }
	&.selected { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, var(--surface-2)); }

	/* Neutralize the global `button span` clamp (nowrap/ellipsis/overflow:hidden)
	   which otherwise collapses the multi-line text column. */
	span {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.option-radio {
		font-size: 24px;
		line-height: 1;
		color: var(--text-faint);
		flex-shrink: 0;
	}
	&.selected .option-radio { color: var(--accent); }
}

.option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-label { font: var(--font-body-large-semibold); }
.option-delta { color: var(--text-dim); font-weight: 400; }
.option-desc  { font: var(--font-body-small-regular); color: var(--accent-2); }

.option-detail {
	margin: 0 0 var(--spacing-lg) 4px;

	.option-detail-title { font: var(--font-body-medium-semibold); color: var(--text); margin: 0 0 8px; }
	ul { margin: 0; padding-left: 18px; }
	li { color: var(--text-dim); font: var(--font-body-medium-regular); margin-bottom: 4px; }
}

/* ─── Order summary (schedule step) ─────────────────────────────────────── */
.order-summary {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-lg);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--spacing-md);
	font: var(--font-body-medium-regular);
	color: var(--text-dim);

	&.total {
		margin-top: 6px;
		padding-top: 10px;
		border-top: 1px solid var(--border);
		font: var(--font-body-large-bold);
		color: var(--text);
	}
}

/* ─── Date / time pickers (schedule step) ───────────────────────────────── */
.picker-block { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.picker-label { font: var(--font-body-large-semibold); color: var(--text); margin: 0; }
.picker-note { margin: 4px 0; }

.day-strip {
	display: flex;
	gap: var(--spacing-sm);
	overflow-x: auto;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.day-chip {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 56px;
	padding: 10px 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	color: var(--text);
	cursor: pointer;
	scroll-snap-align: start;
	transition: border-color 0.12s, background 0.12s;

	.day-wd  { font: var(--font-body-small-medium); color: var(--text-dim); }
	.day-num { font: var(--font-body-large-bold); }

	&:hover { border-color: var(--accent); }
	&.selected {
		background: var(--accent-grad);
		border-color: transparent;
		.day-wd, .day-num { color: #fff; }
	}
}

.slot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--spacing-sm);
}

.slot-chip {
	padding: 12px 8px;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-input);
	color: var(--text);
	font: var(--font-body-medium-semibold);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;

	&:hover:not(:disabled) { border-color: var(--accent); }
	&.selected {
		background: var(--accent-grad);
		border-color: transparent;
		color: #fff;
	}
	&:disabled {
		opacity: 0.4;
		cursor: not-allowed;
		text-decoration: line-through;
	}
}

/* ─── Booking form (schedule step) ──────────────────────────────────────── */
.booking-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	max-width: 480px;
	margin: 0 auto;

	label {
		display: flex;
		flex-direction: column;
		gap: 6px;
		font: var(--font-body-medium-semibold);
		color: var(--text-dim);
		text-align: left;
	}

	input, select, textarea {
		font: var(--font-body-large-regular);
		color: var(--text);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: var(--radius-input);
		padding: 14px 16px;

		&:focus {
			outline: none;
			border-color: var(--accent);
		}
	}

	textarea { resize: vertical; }

	wa-button { margin-top: 8px; }
}

/* Segmented one-off / weekly toggle */
.freq-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-button);

	button {
		padding: 10px;
		border: none;
		background: transparent;
		color: var(--text-dim);
		font: var(--font-body-medium-semibold);
		border-radius: var(--radius-button);
		cursor: pointer;
		transition: background 0.12s, color 0.12s;

		&.active {
			background: var(--accent-grad);
			color: #fff;
		}
	}
}

/* ─── Bookings list ─────────────────────────────────────────────────────── */
.booking-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.booking-card {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);

	.service-icon { font-size: 28px; }
}

.booking-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.booking-title { font: var(--font-body-large-semibold); color: var(--text); }
.booking-when  { font: var(--font-body-medium-medium); color: var(--text); }
.booking-sub   { font: var(--font-body-small-regular); color: var(--text-dim); }

.badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--radius-button);
	background: color-mix(in oklch, var(--accent) 25%, transparent);
	color: var(--accent-2);
	font: var(--font-body-xsmall-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.link-danger {
	background: none;
	border: none;
	color: var(--color-error, #ff6b6b);
	font: var(--font-body-medium-semibold);
	cursor: pointer;
	padding: 4px 8px;
	white-space: nowrap;

	&:hover { text-decoration: underline; }
}

/* ─── Provider: jobs + onboarding ───────────────────────────────────────── */
.btn-complete {
	flex-shrink: 0;
	padding: 8px 14px;
	border: none;
	border-radius: var(--radius-button);
	background: var(--accent-grad);
	color: #fff;
	font: var(--font-body-medium-semibold);
	cursor: pointer;

	&:hover { opacity: 0.92; }
}

.badge.done {
	background: color-mix(in oklch, var(--color-success, #16a34a) 30%, transparent);
	color: #86efac;
}

.section-heading {
	font: var(--font-h6);
	margin: 0 0 var(--spacing-sm);
	color: var(--text);
}

.provider-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);

	label { display: flex; flex-direction: column; gap: 6px; font: var(--font-body-medium-semibold); color: var(--text-dim); }
	input[type="text"] {
		font: var(--font-body-large-regular);
		color: var(--text);
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-input);
		padding: 12px 14px;
		&:focus { outline: none; border-color: var(--accent); }
	}
}

.field-label { font: var(--font-body-medium-semibold); color: var(--text-dim); margin: 0; }

.check-list { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.check-row {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-direction: row !important;
	padding: 12px var(--spacing-md);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	color: var(--text);
	font: var(--font-body-large-regular) !important;
	cursor: pointer;

	&.checked { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, var(--surface)); }
	.service-icon { font-size: 24px; }
	input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
}

.provider-actions { display: flex; gap: var(--spacing-sm); align-items: center; flex-wrap: wrap; }

/* ─── Settings ──────────────────────────────────────────────────────────── */
.settings-section {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-medium);
	padding: var(--spacing-md) var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

.stat-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;

	& + .stat-row { border-top: 1px solid var(--border); }
	span { color: var(--text-dim); }
	strong { color: var(--text); }
}

/* ─── Empty / loading states ────────────────────────────────────────────── */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	color: var(--text-dim);
	text-align: center;
	padding: var(--spacing-2xl) var(--spacing-md);
}