/* =============================================================================
 * Booking modal — confirm-step codes + compact when/where meta
 *
 * Scoped to the confirm step of the public booking modal on
 * single-practitioner.php. Tokens only (--lbb-*), mobile-first, min-width
 * queries only.
 *
 * NOTE: the surrounding .sp-bm-* modal chrome still lives in the monolithic
 * style.css and is hardcoded to a light surface (#fff / #fafafa). Until that
 * is migrated, pin the tokens this panel consumes to their light values when
 * the visitor has the dark theme enabled, so the panel stays legible against
 * modal chrome that does not flip. See the :root[data-theme="dark"] block at
 * the foot of this file.
 * =============================================================================
 */

.sp-bm-sum-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--lbb-space-2) var(--lbb-space-5);
	margin: 0 0 var(--lbb-space-3);
	padding: 0 0 var(--lbb-space-3);
	border-bottom: 1px solid var(--lbb-border-default);
}

.sp-bm-sum-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.sp-bm-sum-meta__label {
	font-size: var(--lbb-text-xs);
	font-weight: var(--lbb-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lbb-text-muted);
	line-height: 1.2;
}

.sp-bm-sum-meta__val {
	font-size: var(--lbb-text-sm);
	font-weight: var(--lbb-weight-semibold);
	color: var(--lbb-text-body);
	line-height: 1.3;
}

.sp-bm-codes {
	display: flex;
	flex-direction: column;
	gap: var(--lbb-space-2);
	margin-top: var(--lbb-space-3);
	padding: var(--lbb-space-3);
	border: 1px solid var(--lbb-border-default);
	border-radius: var(--lbb-radius-md);
}

.sp-bm-codes__row {
	display: flex;
	align-items: stretch;
	gap: var(--lbb-space-2);
}

.sp-bm-codes__row .sp-bm-input {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-bm-codes__row .sp-bm-codes__apply {
	align-self: stretch;
	flex: 0 0 auto;
}

.sp-bm-codes__input {
	text-transform: uppercase;
}

.sp-bm-codes__input::placeholder {
	text-transform: none;
}

.sp-bm-codes__apply {
	align-self: flex-start;
	padding: var(--lbb-space-2) var(--lbb-space-5);
	border: 1px solid var(--lbb-brand-violet-500);
	border-radius: var(--lbb-radius-pill);
	background: none;
	font-family: inherit;
	font-size: var(--lbb-text-sm);
	font-weight: var(--lbb-weight-semibold);
	color: var(--lbb-brand-violet-600);
	cursor: pointer;
	transition: background-color var(--lbb-duration-fast) var(--lbb-ease), color var(--lbb-duration-fast) var(--lbb-ease);
}

.sp-bm-codes__apply:hover:not(:disabled) {
	background: var(--lbb-brand-violet-500);
	color: var(--lbb-text-on-brand);
}

.sp-bm-codes__apply:focus-visible {
	outline: none;
	box-shadow: var(--lbb-focus-ring);
}

.sp-bm-codes__apply:disabled {
	border-color: var(--lbb-border-default);
	color: var(--lbb-text-disabled);
	cursor: default;
}

.sp-bm-codes__msg[hidden],
.sp-bm-codes__status[hidden] {
	display: none;
}

.sp-bm-codes__msg,
.sp-bm-codes__status {
	margin: 0;
	font-size: var(--lbb-text-sm);
	line-height: 1.4;
	color: var(--lbb-text-muted);
}

.sp-bm-codes__msg--error,
.sp-bm-codes__status--error {
	color: var(--lbb-hue-danger);
}

.sp-bm-codes__msg--ok {
	color: var(--lbb-tint-emerald-fg);
}

.sp-bm-codes__note {
	margin: 0;
	font-size: var(--lbb-text-xs);
	line-height: 1.5;
	color: var(--lbb-text-subtle);
}

.sp-bm-sum-credit-val {
	font-weight: var(--lbb-weight-semibold);
	color: var(--lbb-tint-emerald-fg);
}

.sp-bm-sum-note {
	margin: var(--lbb-space-2) 0 0;
	font-size: var(--lbb-text-xs);
	line-height: 1.5;
	color: var(--lbb-text-muted);
}

.sp-bm-sum-note--balance {
	font-weight: var(--lbb-weight-semibold);
	color: var(--lbb-tint-emerald-fg);
}

@media (min-width: 30em) {
	.sp-bm-sum-meta {
		gap: var(--lbb-space-2) var(--lbb-space-6);
	}
}

:root[data-theme="dark"] .sp-bm-codes,
:root[data-theme="dark"] .sp-bm-summary {
	--lbb-text-body: #1f1533;
	--lbb-text-muted: #6b5f7c;
	--lbb-text-subtle: #8b7fa0;
	--lbb-text-disabled: #b6adc4;
	--lbb-border-default: rgba(17, 10, 26, 0.1);
	--lbb-tint-emerald-fg: #047857;
}