/* ==== css/pos-redesign.css ==== */
/*
====================================================================
POS Redesign — single-screen booking workspace.
All new patterns are prefixed `pos-` to avoid collisions with the
existing booking-layout / booking-checkout shells.
====================================================================
*/

:root {
	--pos-navy: #003264;
	--pos-pill-border: #DFE3E8;
	--pos-pill-active-bg: #EBF0F5;
	--pos-inset-bg: #F6F7F9;
	--pos-subtle: var(--ed-text-muted);
	--pos-line: #EBEBEB;
	--pos-text: #003264;
}

/* Full-width header region above the booking layout --------------- */
.pos-header-region {
	background: #fff;
	padding: 16px 24px 12px;
	border-bottom: 1px solid var(--pos-line);
}
.pos-header-region .inline-ai-input { margin-bottom: 12px; }
.pos-header-region .pos-filter-strip { margin-bottom: 0; }
@media (max-width: 768px) {
	.pos-header-region { padding: 12px 14px 8px; }
}

/* Scan F2 badge in page title row -------------------------------- */
.pos-scan-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background-color 0.12s;
}
.pos-scan-badge:hover { background: var(--pos-inset-bg); }
.pos-scan-badge svg { stroke: var(--pos-text); }
.pos-scan-kbd {
	display: inline-flex;
	align-items: center;
	background: var(--pos-inset-bg);
	border: 1px solid var(--pos-pill-border);
	border-radius: 4px;
	padding: 1px 6px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: var(--pos-subtle);
	line-height: 1.4;
}

/* Filter strip — single-row layout -------------------------------- */
.pos-filter-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap !important;
	margin-bottom: 12px;
	/* `overflow-x: auto` would silently force overflow-y to be a scroll
	   container too, clipping the absolutely-positioned dropdown menus
	   (categories / statuses) inside the strip. `clip` clips horizontally
	   without making a scroll container, so the menus can escape vertically. */
	overflow-x: clip;
	overflow-y: visible;
	padding-bottom: 4px;
	scrollbar-width: thin;
}
.pos-filter-strip > * { flex-shrink: 0; }
.pos-filter-strip .pos-pill-search {
	flex: 0 1 220px;
	min-width: 130px;
	max-width: 260px;
}
.pos-pill.pos-pill-clear {
	border: none;
	background: transparent;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	padding: 0 10px;
	cursor: pointer;
	white-space: nowrap;
}
.pos-pill.pos-pill-clear:hover { text-decoration: underline; }

/* Store-tab-only single-row location bar. Tighter than the multi-row
   period strip used by rentals — just label + dropdown, inline. */
.pos-store-location-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--pos-line);
	border-radius: 12px;
	padding: 8px 14px;
	margin-bottom: 8px;
}
.pos-store-location-bar .pos-period-group-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pos-subtle);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.pos-store-location-bar .pos-period-group-label img { width: 14px; height: 14px; opacity: 0.6; }
.pos-filter-strip .pos-pill-search input {
	min-width: 0;
}
.pos-filter-strip .pos-pill-button {
	min-width: 100px !important;
	padding: 0 10px !important;
}
.pos-filter-strip .pos-pill { padding: 0 10px; }
.pos-filter-strip .pos-bt-pill { padding: 6px 10px; }
.pos-filter-strip .pos-bt-pills { gap: 0; margin-right: 2px; }
/* Pill-style button that displays the selected experience/store date.
   Click toggles the quick-pick chip row beneath the filter strip; the
   actual daterangepicker only opens via the "Pick a date..." chip. */
.pos-filter-strip .pos-date-pill-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px;
	padding: 0 14px;
	min-height: 34px;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color 0.15s, background-color 0.15s;
}
.pos-filter-strip .pos-date-pill-btn:hover { border-color: #003264; }
.pos-filter-strip .pos-date-pill-btn.is-open { border-color: #003264; background: #F6F7FF; }
.pos-filter-strip .pos-date-pill-btn > img:first-child { width: 14px; height: 14px; opacity: 0.6; }
.pos-filter-strip .pos-date-pill-btn .pos-date-pill-chevron {
	width: 10px; height: 10px; opacity: 0.6;
	transition: transform 0.15s;
}
.pos-filter-strip .pos-date-pill-btn.is-open .pos-date-pill-chevron { transform: rotate(180deg); }

/* "Pick a date..." chip wraps the daterangepicker input. The input is styled
   to look like a chip so the picker overlay anchors to a visible element and
   the chip row stays open while the picker is showing. */
.pos-date-chip-pick-wrap {
	display: inline-flex;
	align-items: center;
}
.pos-date-chip-pick-wrap > div {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	border-radius: 999px !important;
	display: inline-flex;
	align-items: center;
}
.pos-date-chip-pick-wrap .date-picker-wrapper {
	display: inline-flex !important;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px !important;
	padding: 0 14px;
	min-height: 32px;
	height: auto !important;
	min-width: 132px !important;
	width: 132px !important;
	cursor: pointer;
	transition: border-color 0.12s;
	position: relative !important;
}
.pos-date-chip-pick-wrap .date-picker-wrapper:hover { border-color: #003264; }
.pos-date-chip-pick-wrap .date-picker-wrapper > button { display: none !important; }
.pos-date-chip-pick-wrap input.daterange {
	border: 0 !important;
	background: transparent !important;
	color: var(--pos-text);
	font-size: 13px !important;
	font-weight: 500 !important;
	width: 104px !important;
	min-width: 104px !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-style: italic;
	cursor: pointer;
	outline: none !important;
	box-shadow: none !important;
	display: inline-block !important;
	flex: 0 0 104px !important;
}
.pos-date-chip-pick-wrap input.daterange::placeholder {
	color: var(--ed-text-muted);
	font-style: italic;
}

/* Quick-pick chip row that drops down beneath the filter strip when the date pill is open. */
.pos-date-quick-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 24px 4px 24px;
	background: var(--pos-inset-bg);
	border-radius: 999px;
	margin-top: 8px;
}
.pos-date-chip {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px;
	padding: 6px 14px;
	min-height: 32px;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.pos-date-chip:hover { border-color: #003264; }
.pos-date-chip.is-active {
	background: #003264;
	border-color: #003264;
	color: #fff;
}
.pos-date-chip-pick {
	color: #6B7280;
	font-style: italic;
}
@media (max-width: 768px) {
	.pos-filter-strip { gap: 6px; padding-bottom: 6px; }
	.pos-filter-strip .pos-pill-button { min-width: 80px !important; }
	.pos-filter-strip .pos-pill-search { min-width: 110px; flex-basis: 110px; }
}

/* Three independent booking-type pills (per mockup) -------------- */
.pos-bt-pills {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-right: 4px;
	background: var(--pos-inset-bg);
	border-radius: 999px;
	padding: 3px;
}
.pos-bt-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	min-height: 30px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pos-bt-pill:hover:not(.is-locked):not(.is-active) {
	background: rgba(255, 255, 255, 0.6);
}
.pos-bt-pill.is-active {
	background: #fff;
	border-color: var(--pos-pill-border);
	color: var(--pos-text);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.pos-bt-pill.is-locked {
	opacity: 0.5;
	cursor: not-allowed;
}
.pos-bt-pill img {
	width: 14px;
	height: 14px;
}

/* Legacy alias — keep so old wire:click sites that still reference the old class don't break visually */
.pos-segmented { display: inline-flex; align-items: center; gap: 4px; }
.pos-segmented-btn { all: unset; }

/* Inline date pill (Experience date / Store date) ---------------- */
.pos-date-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px;
	padding: 0 12px;
	min-height: 34px;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}
.pos-date-pill img { width: 14px; height: 14px; opacity: 0.6; }
.pos-date-pill input {
	border: 0;
	background: transparent;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	min-width: 0;
	width: 92px;
	outline: none;
	padding: 0;
	cursor: pointer;
}

/* Compact pill heights to match the date pill */
.pos-pill { min-height: 34px; padding: 0 12px; }
.pos-pill-button { min-height: 34px; padding: 0 12px; min-width: 110px; }

/* Generic search/category/status pill (filter strip) -------------- */
.pos-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px;
	padding: 0 14px;
	min-height: 36px;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}
.pos-pill img { width: 14px; height: 14px; opacity: 0.6; }
.pos-pill.is-active {
	border-color: var(--pos-text);
	background: var(--pos-pill-active-bg);
}
.pos-pill input {
	border: 0;
	outline: none;
	background: transparent;
	font-size: 13px;
	color: var(--pos-text);
	min-width: 100px;
	padding: 0;
	flex: 1;
}
.pos-pill input::placeholder { color: var(--pos-subtle); }

/* Dropdown variant — entire pill is the trigger button. */
.pos-pill-dropdown { padding: 0; }
.pos-pill-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 0 14px;
	min-height: 36px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pos-text);
	cursor: pointer;
	min-width: 130px;
	white-space: nowrap;
}
/* The pill label carries the selected value ("Location: <name>"). A long one
   otherwise stretched the pill and pushed the rest of the filter strip off the
   row, so cap it and ellipsize. The open menu still lists every name in full. */
.pos-pill-button > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}
.pos-pill-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 10px;
	padding: 6px;
	margin: 0;
	list-style: none;
	box-shadow: 0 8px 24px rgba(0, 50, 100, 0.10);
	z-index: 30;
}
.pos-pill-menu-item {
	display: block;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--pos-text);
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}
.pos-pill-menu-item:hover { background: var(--pos-inset-bg); }
.pos-pill-menu-item.is-active {
	background: var(--pos-pill-active-bg);
	font-weight: 600;
}

/* Period strip — single-line tight layout ------------------------ */
.pos-period-strip {
	background: #fff;
	border: 1px solid var(--pos-line);
	border-radius: 16px;
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
	overflow: visible;
}
.pos-period-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.pos-period-summary {
	font-size: 12px;
	color: var(--pos-subtle);
	padding-left: 4px;
}
.pos-period-summary.is-error {
	color: #b42318;
}
.pos-period-hours {
	font-size: 11px;
	color: var(--pos-subtle);
	background: var(--pos-inset-bg, #F4F6F8);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 4px;
	white-space: nowrap;
	cursor: default;
}
.pos-period-hours.is-warning {
	color: #92400e;
	background: #fef3c7;
	font-weight: 500;
}
.pos-period-hours-icon {
	margin-right: 3px;
}
/* Tint the time pill itself when the selected time falls outside hours */
.pos-period-group.has-warning .form-control-category.timeSelect {
	border-color: #f59e0b !important;
	background: #fffbeb !important;
}
.pos-period-group.has-warning .form-control-category.timeSelect input {
	color: #92400e !important;
}
.pos-period-strip > * { flex-shrink: 0; }

/* When a divider sits at the start or end of a wrapped row (because the
   following pos-period-group flexed to the next line), it ends up dangling
   in mid-air. The cleanest fix is to hide a divider whenever the following
   sibling is a fresh row — but CSS can't detect wrap points directly. So we
   hide every divider on small / wrapped layouts and let the row gap do the
   visual separation instead. The previous rule already handled mobile, but
   the bar still wraps on narrow desktop columns; same treatment applies. */
.pos-period-strip { row-gap: 8px; }
.pos-period-strip > .pos-period-divider:last-child { display: none; }
@media (max-width: 1280px) {
	.pos-period-strip > .pos-period-divider { display: none; }
}
.pos-period-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pos-subtle);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.pos-period-label img { width: 14px; height: 14px; opacity: 0.6; }
/* Segmented Multi-day / Same-day pill — both options live inside one
   rounded container with the active option as a raised white pill. */
.pos-period-mode {
	display: inline-flex;
	background: #F4F6F8;
	border: 1px solid var(--pos-pill-border);
	border-radius: 999px;
	padding: 3px;
	gap: 0;
}
.pos-period-mode-btn {
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pos-subtle);
	padding: 4px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms ease, color 120ms ease;
}
.pos-period-mode-btn:hover:not(.is-active) {
	color: var(--pos-text);
}
.pos-period-mode-btn.is-active {
	background: #fff;
	color: var(--pos-text);
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
	.pos-period-strip {
		border-radius: 14px;
		padding: 10px 12px;
		gap: 8px;
		flex-wrap: wrap;
	}
	.pos-period-strip > .pos-period-divider { display: none; }
	.pos-period-strip > .pos-period-group { flex-basis: 100%; }
}
.pos-period-divider {
	width: 1px;
	height: 20px;
	background: var(--pos-line);
	flex-shrink: 0;
}
.pos-period-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}
.pos-period-group-label {
	color: var(--pos-subtle);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-right: 2px;
	white-space: nowrap;
}

/* Neutralize the wide outer wrappers from <x-booking.input.date> & <x-booking.input.time> */
.pos-period-strip .pos-period-group > div,
.pos-period-strip .pos-period-group > div.form-group,
.pos-period-strip .pos-period-group > div.p-0.w-100 {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	flex: 0 0 auto !important;
	border-radius: 8px !important;
	display: inline-flex;
	align-items: center;
}

/* Date input — slim pill-shaped */
.pos-period-strip .date-picker-wrapper {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	height: 30px;
	overflow: hidden;
	cursor: pointer;
}
.pos-period-strip .date-picker-wrapper input.daterange {
	cursor: pointer;
}
.pos-period-strip .date-picker-wrapper input.daterange,
.pos-period-strip input.daterange {
	width: 80px !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 28px !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0 4px !important;
	font-size: 12px !important;
	color: var(--pos-text);
	cursor: pointer;
	box-shadow: none !important;
}
.pos-period-strip .date-picker-wrapper > button {
	display: none !important;
}

/* Time input — slim pill-shaped */
.pos-period-strip .form-control-category.timeSelect {
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important;
	height: 30px !important;
	min-height: 30px !important;
	border: 1px solid var(--pos-pill-border) !important;
	border-radius: 8px !important;
	padding: 0 6px !important;
	margin: 0 !important;
	background: #fff !important;
}
.pos-period-strip .form-control-category.timeSelect input,
.pos-period-strip .form-control-category.timeSelect input.timeSelectInput {
	width: 72px !important;
	min-width: 0 !important;
	height: 28px !important;
	min-height: 28px !important;
	border: 0 !important;
	padding: 0 4px 0 0 !important;
	font-size: 12px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--pos-text);
}
.pos-period-strip .form-control-category.timeSelect .input-icon {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	pointer-events: none;
}

/* Time picker dropdown — absolutely positioned overlay so it escapes the
   pill's overflow:hidden and floats over the page below the input. */
.pos-period-strip .time-select-menu {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	z-index: 50;
	min-width: 110px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	padding: 4px;
	max-height: 220px;
	overflow-y: auto;
}
.pos-period-strip .time-select-menu .dropdown,
.pos-period-strip .time-select-menu .dropdown-options {
	display: block !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	position: static !important;
	transform: none !important;
}
.pos-period-strip .time-select-menu .dropdown-option {
	display: block;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	color: var(--pos-text);
	cursor: pointer;
	white-space: nowrap;
}
.pos-period-strip .time-select-menu .dropdown-option:hover {
	background: var(--pos-inset-bg);
}
.pos-period-strip .form-control-category.timeSelect .input-icon img {
	width: 10px !important;
	height: 10px !important;
	padding: 0 !important;
	opacity: 0.55;
}

/* Duration dropdown — same height as inputs */
.pos-period-strip .dropdown {
	display: inline-flex;
	align-items: center;
}
.pos-period-strip .dropdown button {
	height: 32px !important;
	min-height: 32px !important;
	padding: 0 10px !important;
	border-radius: 8px !important;
	border: 1px solid var(--pos-pill-border) !important;
	background: #fff !important;
	font-size: 13px !important;
}

/* Hide legacy noise from the booking inputs */
.pos-period-strip .booking-filters-heading,
.pos-period-strip .form-label { display: none !important; }
.pos-period-strip .toggle-container { display: none !important; }
.pos-period-strip .rental-period { display: none !important; }
.pos-period-strip .date-time-container-info-box { display: none !important; }
.pos-period-spacer { flex: 1; min-width: 1px; }

/* Pickup/return location live at the far right of the period row, so they
   read as their own control rather than as part of the period settings. */
.pos-period-locations {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}
@media (max-width: 768px) {
	/* No room to push right — drop to its own line instead, so the location
	   never reads as part of the PERIOD controls. */
	.pos-period-locations {
		margin-left: 0;
		flex-basis: 100%;
		flex-wrap: wrap;
	}
}

/* Location dropdown button inside period strip */
.pos-period-location-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	border: 1px solid var(--pos-pill-border);
	background: #fff;
	border-radius: 8px;
	padding: 0 10px;
	font-size: 13px;
	color: var(--pos-text);
	cursor: pointer;
	white-space: nowrap;
	max-width: 220px;
}
.pos-period-location-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Wide enough for a real location name ("Hillsboro - Washington Street Shop")
	   before it ellipsizes. The button carries the full name as a title. */
	max-width: 180px;
}
.pos-period-location-btn img {
	width: 10px; height: 10px; opacity: 0.5;
}
.pos-period-info {
	font-size: 11px;
	color: var(--pos-subtle);
	margin: -8px 0 12px;
	padding: 0 4px;
}
.pos-period-info-error { color: #dc3545; }

/* Catalog grid --------------------------------------------------- */
.pos-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 12px;
}
@media (max-width: 1199px) {
	.pos-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Catalog card --------------------------------------------------- */
.pos-card {
	background: #fff;
	border: 1px solid var(--pos-line);
	border-radius: 12px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	cursor: pointer;
	transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
	position: relative;
	min-height: 220px;
	/* Grid items default to min-width auto, so one long nowrap label would
	   push the whole card past its track. Clamp so inner labels truncate. */
	min-width: 0;
	max-width: 100%;
}
.pos-card:hover {
	border-color: var(--pos-text);
	box-shadow: 0 6px 18px rgba(0, 50, 100, 0.06);
}
.pos-card.is-soldout {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}
.pos-card.is-expanded {
	grid-column: span 2;
	border: 1.5px solid var(--pos-text);
	box-shadow: 0 8px 22px rgba(0, 50, 100, 0.08);
}
@media (max-width: 1199px) {
	.pos-card.is-expanded { grid-column: span 2; }
}
.pos-card-image {
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 8px;
	background: var(--pos-inset-bg) center/cover no-repeat;
	overflow: hidden;
	position: relative;
}
.pos-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pos-card-tag-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.pos-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 9px;
	letter-spacing: 0.02em;
}
.pos-tag-success { background: #E7F6EC; color: #166534; }
.pos-tag-warn    { background: #FFF4E0; color: #8a4b00; }
.pos-tag-danger  { background: #FDECEE; color: #b42318; }

/* Availability count pill — overlaid on the catalog card photo so stock for
   the chosen period reads in the same glance as the item. */
.pos-avail {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 16px);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
/* Same pill sitting inline in a stepper/label row (expanded card) instead of
   overlaid on the photo. */
.pos-avail.pos-avail-inline {
	position: static;
	box-shadow: none;
	vertical-align: middle;
	flex: 0 0 auto;
	/* The photo-overlay max-width resolves against a shrink-to-fit parent
	   here and chops the label ("Unlimite", "9 availabl"). Inline pills
	   size to their text; truncation belongs to the NAME beside them. */
	max-width: none;
	overflow: visible;
}

/* Name + price delta + availability pill on one line; a long variation name
   truncates instead of pushing the pill into the stepper. */
.pos-stepper-label {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.pos-stepper-name {
	font-size: 13px;
	color: #003264;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;
}
.pos-stepper-label small {
	flex: 0 0 auto;
}
.pos-avail-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 6px;
}
.pos-avail-success { background: #E5F5EC; color: #0f7a3d; }
.pos-avail-success .pos-avail-dot { background: #16a34a; }
.pos-avail-warn { background: #FFF4E0; color: #a35c04; }
.pos-avail-warn .pos-avail-dot { background: #d97706; }
.pos-avail-danger { background: #FDEAE7; color: #b02318; }
.pos-avail-danger .pos-avail-dot { background: #dc2626; }
.pos-tag-info    { background: #E6F0FB; color: #0d3b66; }
.pos-tag-neutral { background: var(--pos-inset-bg); color: var(--pos-subtle); }
.pos-tag-navy    { background: var(--pos-text); color: #fff; }

.pos-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--pos-text);
	margin: 0;
	line-height: 1.25;
}
.pos-card-sub {
	font-size: 12px;
	color: var(--pos-subtle);
	margin: 0;
	line-height: 1.3;
}
.pos-card-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--pos-text);
	margin: 0;
}
.pos-card-price small {
	font-size: 12px;
	color: var(--pos-subtle);
	font-weight: 400;
}
.pos-card-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--pos-text);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	transition: opacity 0.12s;
}
.pos-card-cta:hover { opacity: 0.92; }
.pos-card-cta.is-secondary {
	background: #fff;
	color: var(--pos-text);
	border: 1px solid var(--pos-pill-border);
}
.pos-card-cta:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Time chips on Experience card --------------------------------- */
.pos-time-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pos-time-chip {
	display: inline-flex;
	align-items: center;
	background: var(--pos-inset-bg);
	border: 1px solid var(--pos-pill-border);
	color: var(--pos-text);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.pos-time-chip:hover:not(.is-soldout):not(.is-active) {
	background: #fff;
	border-color: #003264;
	color: #003264;
}
.pos-time-chip.is-active {
	background: var(--pos-text);
	color: #fff;
	border-color: var(--pos-text);
}
.pos-time-chip.is-soldout {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Experience detail modal — POS view -------------------------------- */
.pos-detail-modal {
	display: flex;
	flex-direction: column;
	max-height: 86vh;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
}
.pos-detail-modal-hero {
	position: relative;
	height: 220px;
	background-size: cover;
	background-position: center;
	color: #fff;
	flex-shrink: 0;
}
.pos-detail-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 0;
	color: var(--pos-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s;
}
.pos-detail-modal-close:hover { background: #fff; }
.pos-detail-modal-hero-content {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 18px;
}
.pos-detail-modal-title {
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 10px 0;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.pos-detail-modal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pos-detail-modal-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--pos-text);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.pos-detail-modal-chip-price {
	background: #003264;
	color: #fff;
}
.pos-detail-modal-chip-muted {
	background: rgba(255, 255, 255, 0.75);
	color: #003264;
	font-weight: 500;
	font-family: var(--bs-font-monospace, monospace);
	letter-spacing: 0.02em;
}
.pos-detail-modal-body {
	padding: 22px 26px 18px 26px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.pos-detail-modal-section {
	margin-bottom: 22px;
}
.pos-detail-modal-section:last-child { margin-bottom: 0; }
.pos-detail-modal-section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ed-text-muted);
	margin: 0 0 10px 0;
}
.pos-detail-modal-description {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pos-text);
	margin: 0;
}
.pos-detail-modal-footer {
	border-top: 1px solid var(--pos-line);
	padding: 14px 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: #fff;
	flex-shrink: 0;
}
.pos-detail-modal-footer:not(:has(.pos-detail-modal-link)) {
	justify-content: flex-end;
}
.pos-detail-modal-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.pos-detail-modal-link:hover {
	text-decoration: underline;
	color: #003264;
}

/* "(Add-on)" suffix on the Store sub-tab inside Rentals/Experiences views */
.pos-tab-suffix {
	font-size: 11px;
	font-weight: 400;
	color: var(--ed-text-muted);
	margin-left: 2px;
}

/* "Next available — Fri, 1 May →" pill on unavailable experience cards.
   Explicit pointer-events:auto re-enables clicks even when the host card
   has .is-soldout (which sets pointer-events:none on the whole card). */
.pos-next-avail-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ECFDF5;
	border: 1px dashed #22C55E;
	color: #166534;
	/* Use a non-pill radius so wrapped text still looks intentional. */
	border-radius: 16px;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	cursor: pointer;
	/* Allow text to wrap on narrow cards so the pill never overflows. */
	white-space: normal;
	text-align: center;
	max-width: 100%;
	box-sizing: border-box;
	pointer-events: auto;
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
	margin-top: 4px;
}
.pos-card.is-soldout .pos-next-avail-pill {
	opacity: 1;
	pointer-events: auto;
}
.pos-next-avail-pill:hover {
	background: #DCFCE7;
	border-color: #166534;
	border-style: solid;
}

/* Skeleton placeholders for catalog grid ------------------------ */
@keyframes pos-skel-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}
.pos-card-skeleton {
	pointer-events: none;
}
.pos-skel-bar {
	display: inline-block;
	background: #EEF2F6;
	border-radius: 6px;
	animation: pos-skel-pulse 1.4s ease-in-out infinite;
}
.pos-skel-shimmer {
	background: #EEF2F6 !important;
	animation: pos-skel-pulse 1.4s ease-in-out infinite;
}
.pos-card-skeleton .pos-skel-shimmer img,
.pos-card-skeleton .pos-card-image img { display: none; }

/* Bundle contents preview --------------------------------------- */
.pos-bundle-preview {
	border-top: 1px dashed var(--pos-pill-border);
	padding-top: 8px;
	display: flex;
	flex-direction: column;
}
.pos-bundle-preview-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px 0;
	font-size: 12px;
	color: var(--pos-text);
	border-bottom: 1px dashed var(--pos-pill-border);
}
.pos-bundle-preview-row:last-child { border-bottom: 0; }
.pos-bundle-preview-row .name { color: var(--pos-text); }
.pos-bundle-preview-row .avail { color: var(--pos-subtle); font-size: 11px; }

/* Expanded card panel (gray inset) ------------------------------ */
.pos-card-expanded {
	background: var(--pos-inset-bg);
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.pos-card-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pos-subtle);
	margin: 0 0 6px 0;
}
.pos-size-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pos-size-pill {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	color: var(--pos-text);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 12px;
	cursor: pointer;
	white-space: nowrap;
	min-width: 56px;
	justify-content: center;
}
.pos-size-pill.is-active {
	background: var(--pos-text);
	color: #fff;
	border-color: var(--pos-text);
}
.pos-size-pill.is-soldout {
	opacity: 0.45;
	cursor: not-allowed;
}
/* #2759/#2760 — long labels (pick-one product/experience names, departure
   date+time) must wrap inside the pill instead of clipping off the card edge. */
.pos-size-pill.pos-pill-wrap {
	white-space: normal;
	text-align: left;
	min-width: 0;
	max-width: 100%;
	line-height: 1.3;
}

/* Stepper -------------------------------------------------------- */
.pos-stepper {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 0;
	overflow: hidden;
	/* Never let the stepper compress when the label/description on the left
	   is long — otherwise overflow:hidden clips the trailing "+" button. The
	   label column (min-width:0) absorbs the shrink and wraps instead. */
	flex-shrink: 0;
}
.pos-stepper button {
	background: transparent;
	border: 0;
	padding: 6px 10px;
	cursor: pointer;
	color: var(--pos-text);
	font-size: 14px;
	line-height: 1;
}
.pos-stepper button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.pos-stepper-value {
	min-width: 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--pos-text);
}

/* The typeable middle of the stepper. Sized and weighted exactly like the
   static .pos-stepper-value it replaced, so the control looks identical until
   you click into it. Native spinners are hidden — the -/+ buttons ARE the
   spinner, and a second pair inside the box reads as a bug. */
.pos-stepper-input {
	width: 44px;
	min-width: 44px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--pos-text);
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pos-stepper-input:focus {
	outline: 0;
	background: #eef2f7;
}

.pos-stepper-input::-webkit-outer-spin-button,
.pos-stepper-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pos-stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	gap: 10px;
}

/* Bundle Includes panel ----------------------------------------- */
.pos-includes-panel {
	background: #fff;
	border-radius: 8px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
}
.pos-includes-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	border-bottom: 1px dashed var(--pos-pill-border);
	font-size: 13px;
	color: var(--pos-text);
}
.pos-includes-row:last-child { border-bottom: 0; }
.pos-includes-limited {
	margin-top: 8px;
	padding: 8px 10px;
	font-size: 11px;
	color: var(--pos-subtle);
	background: var(--pos-pill-active-bg);
	border-radius: 6px;
	font-weight: 500;
}

/* Card actions row ---------------------------------------------- */
.pos-card-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
}
.pos-card-actions-left { display: flex; gap: 8px; align-items: center; }
.pos-card-actions-right { display: flex; gap: 8px; align-items: center; }
.pos-link-btn {
	background: transparent;
	border: 0;
	color: var(--pos-text);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

/* Document-icon "View details" link on the expanded experience card. */
.pos-view-details-link {
	background: transparent;
	border: 0;
	color: var(--pos-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.12s;
}
.pos-view-details-link:hover { color: #003264; text-decoration: underline; }
.pos-view-details-link svg { stroke: currentColor; }

/* Bottom-right "Add to booking" CTA on expanded experience card. */
.pos-add-to-booking {
	font-size: 13px;
	padding: 10px 22px;
	min-width: 150px;
	border-radius: 999px;
}
.pos-add-to-booking[disabled],
.pos-add-to-booking:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Live combo total footer (expanded bundle card) ---------------- */
.pos-combo-footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 10px;
	margin-top: 2px;
}
.pos-combo-footer-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}
.pos-combo-footer-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pos-subtle);
}
.pos-combo-footer-amount {
	font-size: 18px;
	font-weight: 800;
	color: var(--pos-text);
}
.pos-combo-footer-save {
	font-size: 13px;
	font-weight: 700;
	color: #166534;
	background: #E7F6EC;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Duration pills with an inline dollar deal --------------------- */
.pos-duration-pill {
	gap: 4px;
}
.pos-duration-pill-deal {
	font-size: 11px;
	font-weight: 700;
	color: #166534;
}
.pos-duration-pill.is-active .pos-duration-pill-deal {
	color: #BBF7D0;
}

/* Item Details modal -------------------------------------------- */
.pos-details-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 50, 100, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 1080;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pos-details-modal {
	background: #fff;
	border-radius: 14px;
	max-width: 880px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 50, 100, 0.18);
}
.pos-details-modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--pos-line);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}
.pos-details-modal-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--pos-text);
	margin: 0 0 4px 0;
}
.pos-details-modal-sub {
	font-size: 12px;
	color: var(--pos-subtle);
	margin: 0;
}
.pos-details-modal-close {
	background: transparent;
	border: 0;
	color: var(--pos-subtle);
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
}
.pos-details-modal-body {
	padding: 22px;
	overflow-y: auto;
	flex: 1;
}
.pos-details-id-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 22px;
	margin-bottom: 18px;
}
.pos-details-id-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pos-details-id-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pos-subtle);
}
.pos-details-id-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--pos-text);
}
.pos-details-section {
	margin-bottom: 18px;
}
.pos-details-section h6 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pos-subtle);
	margin: 0 0 8px 0;
}
.pos-details-modal-footer {
	padding: 14px 22px;
	border-top: 1px solid var(--pos-line);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.pos-btn-ghost {
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	color: var(--pos-text);
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.pos-btn-primary {
	background: var(--pos-text);
	border: 1px solid var(--pos-text);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

/* Cart polish --------------------------------------------------- */
.pos-cart-section {
	border-top: 1px solid var(--pos-line);
	padding-top: 14px;
	margin-top: 14px;
	padding-bottom: 14px;
}
.pos-cart-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pos-subtle);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.pos-cart-tag-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pos-cart-tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	/* Unselected pills are dashed-outlined (matches the design) — selected
	   pills below switch to a solid filled style. */
	border: 1px dashed var(--pos-pill-border);
	color: var(--ed-text-muted);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	cursor: pointer;
}
/* Selected tag pill — solid border + navy text on white. Matches the
   "blue" treatment used pre-redesign; only the unselected pill is dashed. */
.pos-cart-tag-pill.is-active {
	background: #fff;
	color: #003264;
	border: 1px solid #003264;
	border-style: solid;
}
.pos-cart-tag-pill.is-active .pill-x { color: #003264; }
.pos-cart-tag-pill .pill-x {
	margin-left: 2px;
	font-size: 13px;
	color: inherit;
	cursor: pointer;
}
.pos-cart-tag-input {
	width: 100%;
	margin-top: 8px;
	border: 1.5px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	color: var(--pos-text);
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pos-cart-tag-input:hover { border-color: #6E88A2; }
.pos-cart-tag-input:focus,
.pos-cart-tag-input:focus-visible {
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.15);
}
.pos-cart-tag-create { color: #003264; font-weight: 600; }
.pos-cart-tag-create:hover { background: #ECF1F7; }
.pos-cart-notes-textarea {
	width: 100%;
	border: 1.5px solid #C7CFD8 !important;
	border-radius: 8px;
	padding: 10px;
	font-size: 13px;
	color: var(--pos-text);
	background: #fff;
	outline: none !important;
	box-shadow: none;
	min-height: 70px;
	resize: vertical;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pos-cart-notes-textarea:hover { border-color: #6E88A2 !important; }
.pos-cart-notes-textarea:focus,
.pos-cart-notes-textarea:focus-visible {
	border-color: #003264 !important;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.15) !important;
}
/* Collapsed-state placeholder ("Tap to add allergies, requests, or gear notes."). */
.pos-cart-notes-empty {
	font-size: 12px;
	font-weight: 400;
	color: var(--ed-text-muted);
	line-height: 1.45;
}
/* Saved note pill — appears under the textarea after Save. */
.pos-cart-note-pill {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	background: #F6F7F9;
	border-radius: 8px;
	padding: 10px;
	margin-top: 8px;
	font-size: 12px;
	color: #003264;
}
.pos-cart-note-pill-text {
	white-space: pre-wrap;
	flex: 1;
}
.pos-cart-note-pill-remove {
	background: transparent;
	border: 0;
	color: var(--ed-text-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.pos-cart-note-pill-remove:hover { color: #B91C1C; }
/* Compact primary CTA — used inside the cart's collapsible Notes panel and
   anywhere else a 32-ish px primary button is needed without overpowering the
   surrounding 12-13px text. */
.pos-btn-primary-sm {
	font-size: 12px;
	padding: 6px 12px;
}
.pos-cart-customer-card {
	border: 1px dashed var(--pos-pill-border);
	border-radius: 8px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pos-cart-customer-card.is-filled {
	border: 1px solid var(--pos-pill-border);
}
.pos-cart-customer-search-input {
	width: 100%;
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	background: #fff;
	color: var(--pos-text);
	outline: none;
}
.pos-cart-customer-list {
	max-height: 180px;
	overflow-y: auto;
	border: 1px solid var(--pos-line);
	border-radius: 8px;
	background: #fff;
	margin-top: 8px;
}
.pos-cart-customer-item {
	padding: 8px 12px;
	border-bottom: 1px solid var(--pos-line);
	font-size: 13px;
	color: var(--pos-text);
	cursor: pointer;
}
.pos-cart-customer-item:last-child { border-bottom: 0; }
.pos-cart-customer-item:hover { background: var(--pos-inset-bg); }
.pos-cart-customer-item small { display: block; color: var(--pos-subtle); font-size: 11px; }
.pos-cart-customer-add {
	background: transparent;
	color: #003264;
	border: 0;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	width: 100%;
}
.pos-cart-customer-add:hover { color: #001f3f; }
.pos-cart-customer-quick {
	border-top: 1px solid var(--pos-pill-border);
	margin-top: 4px;
}
.pos-cart-quick-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 4px;
}
.pos-cart-quick-row {
	display: flex;
	gap: 6px;
}
.pos-cart-quick-form input {
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	background: #fff;
	color: var(--pos-text);
	outline: none;
	width: 100%;
}
.pos-cart-quick-form input:focus { border-color: #003264; }
.pos-cart-quick-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 2px;
}

/* Discount / security-deposit amount input — currency or % prefix
   inside the input, with an inline two-segment toggle on the right
   for the discount unit. Single rounded shell so the whole control
   reads as one field instead of three loose pieces. */
.pos-amount-input {
	display: flex;
	align-items: center;
	height: 38px;
	background: #fff;
	border: 1px solid #C7CFD8;
	border-radius: 8px;
	padding: 0 4px 0 12px;
	gap: 8px;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pos-amount-input:focus-within {
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}
.pos-amount-prefix {
	color: var(--ed-text-muted);
	font-size: 14px;
	font-weight: 500;
	flex-shrink: 0;
	min-width: 12px;
}
.pos-amount-input input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 14px;
	color: var(--pos-text);
	padding: 0;
	height: 100%;
}
.pos-amount-toggle {
	display: inline-flex;
	background: var(--pos-inset-bg);
	border-radius: 6px;
	padding: 2px;
	gap: 2px;
	flex-shrink: 0;
}
.pos-amount-toggle button {
	border: 0;
	background: transparent;
	color: var(--pos-subtle);
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	min-width: 28px;
}
.pos-amount-toggle button.is-active {
	background: #fff;
	color: var(--pos-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Adjustments — segmented small toggle (% / $) ------------------ */
.pos-mini-segmented {
	display: inline-flex;
	background: var(--pos-inset-bg);
	border-radius: 999px;
	padding: 2px;
	gap: 2px;
}
.pos-mini-segmented button {
	border: 0;
	background: transparent;
	color: var(--pos-subtle);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.pos-mini-segmented button.is-active {
	background: #fff;
	color: var(--pos-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Inline custom charge form in cart ----------------------------- */
.pos-inline-form {
	background: var(--pos-inset-bg);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pos-inline-form-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pos-subtle);
}
.pos-inline-form input {
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 13px;
	background: #fff;
	color: var(--pos-text);
	outline: none;
	width: 100%;
}
.pos-inline-form-row { display: flex; gap: 8px; }
.pos-inline-form-row > div { flex: 1; }
.pos-inline-form-field { display: flex; flex-direction: column; gap: 4px; }
.pos-inline-form-field-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--pos-text);
	margin: 0;
}
.pos-inline-form-input-affix {
	position: relative;
	display: flex;
	align-items: center;
}
.pos-inline-form-input-affix .pos-inline-form-affix {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--pos-subtle);
	pointer-events: none;
	font-weight: 500;
}
.pos-inline-form-input-affix input { padding-left: 24px !important; }
.pos-inline-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

/* Cart line participants toggle --------------------------------- */
.pos-line-participants-btn {
	background: transparent;
	border: 1px dashed var(--pos-pill-border);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 11px;
	font-weight: 500;
	color: var(--pos-subtle);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	margin-top: 6px;
}
.pos-line-participants-btn:hover { border-color: var(--pos-text); color: var(--pos-text); }
.pos-line-participants-panel {
	margin-top: 8px;
	background: var(--pos-inset-bg);
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pos-line-participants-row {
	display: flex;
	gap: 6px;
	align-items: center;
}
.pos-line-participants-row input {
	flex: 1;
	border: 1px solid var(--pos-pill-border);
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 12px;
	background: #fff;
	color: var(--pos-text);
	outline: none;
}

/* Tabs subtle restyle (rentals/bundles/store) ------------------- */
.pos-subtabs {
	display: flex;
	gap: 4px;
	margin-top: 10px;
	margin-bottom: 4px;
}
.pos-subtab {
	background: transparent;
	border: 0;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--pos-subtle);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: all 0.15s;
}
.pos-subtab:hover { color: var(--pos-text); }
.pos-subtab.is-active {
	font-weight: 600;
	color: var(--pos-text);
	border-bottom-color: var(--pos-text);
}

/* Empty state for catalog tab ---------------------------------- */
.pos-empty-state {
	background: #fff;
	border: 1px dashed var(--pos-pill-border);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	color: var(--pos-subtle);
	margin-top: 12px;
}
.pos-empty-state img { width: 48px; height: 48px; opacity: 0.6; margin-bottom: 8px; }
.pos-empty-state h6 { color: var(--pos-text); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.pos-empty-state p { font-size: 12px; margin: 0; }

/* ================================================================
   Mobile responsive — POS booking page
   - 1440px: hi-density desktop (default styles)
   - 768px:  tablet — single col catalog, looser period strip
   - 375px:  phone — checkout cart stacks below catalog
   ================================================================ */
@media (max-width: 1199px) {
	.pos-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.pos-catalog-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.pos-card { min-height: 0; }
	.pos-card.is-expanded { grid-column: span 1; }
	.pos-tab-bar { overflow-x: auto; }
	.pos-tab { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 575px) {
	/* Stack the cart under the catalog instead of side-by-side. */
	.booking-layout { flex-direction: column; }
	.booking-layout .booking-content,
	.booking-layout .booking-checkout {
		max-width: 100%;
		flex: 0 0 100%;
		width: 100%;
	}
	.booking-layout .booking-checkout {
		display: flex !important;
		border-top: 1px solid var(--pos-line);
	}
	.booking-content.col-md-8 { padding: 12px !important; }
	.pos-card-image { aspect-ratio: 16/9; }
	.pos-period-strip { font-size: 12px; }
	.pos-filter-strip { gap: 5px; }
	.pos-bt-pills { padding: 2px; }
	.pos-bt-pill { padding: 5px 9px; font-size: 12px; min-height: 28px; }
	.pos-bt-pill img { width: 12px; height: 12px; }
}

/* ============================================================
   Booking-type empty state — shown until a type is selected.
   Three big tappable tiles. On single-module suppliers the
   Livewire mount() preselects the type so this state never shows.
   ============================================================ */
.pos-bt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 48px 24px 24px;
	max-width: 760px;
	margin: 0 auto;
}
.pos-bt-empty-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--pos-text);
}
.pos-bt-empty-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}
.pos-bt-empty-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 32px 16px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 16px;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.pos-bt-empty-card:hover:not(.is-locked) {
	border-color: #003264;
	box-shadow: 0 6px 16px rgba(0, 50, 100, 0.08);
	transform: translateY(-1px);
}
.pos-bt-empty-card.is-locked {
	opacity: 0.5;
	cursor: not-allowed;
}
.pos-bt-empty-icon {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: #F4F6F9;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pos-bt-empty-icon img {
	width: 32px;
	height: 32px;
	opacity: 0.85;
}
.pos-bt-empty-label {
	font-size: 15px;
	font-weight: 500;
	color: var(--pos-text);
}
@media (max-width: 575px) {
	.pos-bt-empty-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Cart redesign — compact header, empty state, customer-first.
   ============================================================ */

/* Header — smaller than the legacy 20px section-title */
.pos-cart-header {
	padding: 14px 18px;
}
.pos-cart-header-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #003264;
}
.pos-cart-header-icon { flex-shrink: 0; }
.pos-cart-header-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	background: #F3F3F3;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ed-text-muted);
}

/* Custom-charge button — outlined pill matching the design mockup */
.pos-cart-charge-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1px solid var(--pos-pill-border);
	border-radius: 8px;
	padding: 6px 12px;
	color: #003264;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s, background-color 0.15s;
}
.pos-cart-charge-btn:hover { border-color: #003264; background: #F6F7FF; }
.pos-cart-charge-plus { color: #003264; font-weight: 600; }

.pos-cart-clear-btn {
	background: transparent;
	border: 0;
	color: #dc3545;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 6px;
}

/* Empty-state — circular icon + heading + sub */
.pos-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	margin: auto;
	text-align: center;
}
.pos-cart-empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #EEF1F5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.pos-cart-empty-title {
	font-size: 16px;
	font-weight: 600;
	color: #003264;
	margin-bottom: 4px;
}
.pos-cart-empty-sub {
	font-size: 13px;
	color: var(--ed-text-muted);
}

/* Customer block (always visible). Empty state shows a dashed-border CTA.
   Flush to the cart's edges per the design — no inset grey panel; just a
   1px hairline separates it from the adjacent sections. */
/* Customer + Adjustments share a single light-grey backdrop per the
   design — flush to the cart's outer edges, with inner horizontal padding
   so the contents don't sit on the very edge. The two sections sit
   stacked inside this grey region with a faint hairline between them. */
.pos-cart-customer-block {
	background: var(--pos-inset-bg);
	padding: 14px 16px 16px;
	margin: 0;
	border-top: 1px solid #EBEBEB;
}
.pos-cart-customer-block .pos-cart-section-label {
	font-size: 11px;
	color: var(--ed-text-muted);
	font-weight: 600;
	margin-bottom: 8px;
}
/* Save-as-quote drawer only. The customer block is shared with the cart column,
   where it is an inset panel with its own caps label; in the drawer it sits in a
   plain form beside "Valid until", so it drops the panel and takes an ordinary
   field label. Scoped to the drawer wrapper — nothing here reaches the cart. */
.pos-quote-customer-field .pos-cart-customer-block {
	background: transparent;
	border-top: 0;
	padding: 0;
}

.pos-quote-customer-field .pos-cart-customer-block .pos-cart-section-label {
	display: none;
}

.pos-cart-add-customer {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: transparent;
	border: 1.5px dashed #C7CFD8;
	border-radius: 999px;
	padding: 12px 16px;
	color: #003264;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.pos-cart-add-customer:hover {
	border-color: #003264;
	background: #fff;
}

/* =====================================================================
   Comprehensive hover states — all interactive POS buttons get a clear
   visual response. Transitions kept short (0.12s) so the UI feels snappy.
   ===================================================================== */
.pos-btn-primary,
.pos-btn-ghost,
.pos-pill-button,
.pos-period-mode-btn,
.pos-period-location-btn,
.pos-cart-tag-pill,
.pos-cart-charge-btn,
.pos-stepper button,
.pos-card-cta,
.pos-tab,
.pos-bt-empty-card {
	transition: background-color 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s, box-shadow 0.12s, transform 0.12s;
}

.pos-btn-primary:hover:not(:disabled):not([disabled]) {
	background: #002550;
	border-color: #002550;
}
.pos-btn-ghost:hover:not(:disabled):not([disabled]) {
	background: var(--pos-inset-bg);
	border-color: #6E88A2;
	color: #003264;
}
.pos-pill-button:hover {
	color: #003264;
	background: rgba(0, 50, 100, 0.04);
}
.pos-period-mode-btn:hover:not(.is-active) {
	background: rgba(0, 50, 100, 0.06);
	color: var(--pos-text);
}
.pos-period-location-btn:hover {
	border-color: #003264;
	background: #fff;
}
.pos-cart-tag-pill:hover:not(.is-active) {
	border-color: #003264;
	color: #003264;
}
.pos-cart-charge-btn:hover {
	background: #fff;
	border-color: #003264;
	color: #003264;
}
.pos-stepper button:hover:not(:disabled):not([disabled]) {
	background: var(--pos-inset-bg);
	color: #003264;
}
.pos-card-price-breakdown {
	font-size: 11px;
	color: var(--ed-text-muted);
	margin: 0 0 8px 0;
	line-height: 1.35;
}
.pos-card-cta:not(.is-secondary):hover { background: #002550; }
.pos-card-cta.is-secondary:hover {
	background: #F4F6F8;
	border-color: #C7CFD8;
	color: var(--pos-text);
}
.pos-tab:hover:not(.pos-tab-active) {
	color: #003264;
}
.pos-bt-empty-card:hover {
	border-color: #003264;
	box-shadow: 0 8px 22px rgba(0, 50, 100, 0.10);
	transform: translateY(-1px);
}
.pos-bt-pill:hover:not(.is-active):not(.is-locked) {
	background: rgba(0, 50, 100, 0.04);
}
.pos-pill-menu-item:hover { color: #003264; }
.pos-cart-customer-item:hover { background: var(--pos-inset-bg); color: #003264; }
.pos-cart-tag-input:hover, .pos-cart-tag-input:focus { border-color: #003264; }
.pos-cart-customer-search-input:hover, .pos-cart-customer-search-input:focus { border-color: #003264; }

/* Card-level loading state — added to the catalog card itself while the
   expandExperience / expandProduct round-trip is in flight, so the user
   sees instant feedback instead of a 200–400ms freeze. */
.pos-card.is-card-loading {
	pointer-events: none;
	position: relative;
}
.pos-card.is-card-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 12px;
	pointer-events: none;
	z-index: 4;
}
.pos-card.is-card-loading::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 22px; height: 22px;
	margin: -11px 0 0 -11px;
	border: 2px solid #DFE3E8;
	border-top-color: #003264;
	border-radius: 50%;
	animation: pos-card-spin 0.7s linear infinite;
	z-index: 5;
}
@keyframes pos-card-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   Cart row layout (experiences) — image thumb · body · stepper · delete.
   Same row pattern is reused for products/store/custom-charge below.
   ============================================================ */
.pos-cart-exp-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid #EEF1F4;
}
.pos-cart-exp-row:last-child { border-bottom: 0; }
.pos-cart-exp-main {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.pos-cart-exp-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background-color: #F4F6F8;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.pos-cart-exp-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pos-cart-exp-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pos-cart-exp-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}
.pos-cart-exp-title {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Combo cart line — the key picks ("— GTI 130 · 2h · +1 guest") rendered
   inline after the combo name, in a lighter weight so the name still leads. */
.pos-cart-bundle-picks {
	font-weight: 500;
	color: var(--ed-text-muted);
}
.pos-cart-exp-price {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}
.pos-cart-exp-sub {
	font-size: 11px;
	color: var(--ed-text-muted);
}
.pos-cart-exp-dot { margin: 0 4px; color: #C7CFD8; }
/* Cart-line stock hint — how much of the period's stock this line takes. */
.pos-cart-avail-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #5A7089;
}
.pos-cart-avail-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 6px;
	background: #16a34a;
}
.pos-cart-avail-hint.is-low .pos-cart-avail-dot { background: #d97706; }
.pos-cart-avail-hint.is-low { color: #a35c04; }
.pos-cart-avail-hint.is-none .pos-cart-avail-dot { background: #dc2626; }
.pos-cart-avail-hint.is-none { color: #b02318; }
.pos-cart-exp-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

/* A program is one thing in the cart, so its row reads as one thing: the rate
   steppers sit inside it rather than each being its own item row. */
.pos-cart-program-rates {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
}

.pos-cart-program-rate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pos-cart-program-rate-label {
	font-size: 12.5px;
	color: var(--ed-text-muted, #64748b);
	min-width: 0;
}
.pos-cart-exp-delete {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
}
.pos-cart-exp-delete:hover { background: #FDECEE; }
.pos-cart-exp-delete img { width: 14px; height: 14px; display: block; }

/* Participant assignment — collapsible toggle row + name inputs.
   Per the design this row spans the full cart row width (left edge of
   the image to the right edge of the qty/delete column), not just the
   text column under the title. */
.pos-cart-exp-participants {
	margin-top: 8px;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	background: #FFF;
}
.pos-cart-exp-participants.is-complete { border-color: #BBF0CC; background: #F4FBF7; }
.pos-cart-exp-participants-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	font-size: 12px;
	color: #003264;
	cursor: pointer;
}
.pos-cart-exp-participants-status { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pos-cart-exp-participants-body {
	padding: 4px 10px 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pos-cart-exp-participant-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pos-cart-exp-participant-num {
	flex: 0 0 18px;
	font-size: 11px;
	color: var(--ed-text-muted);
	text-align: center;
}
.pos-cart-exp-participant-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #DFE3E8;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 12px;
	color: #003264;
	background: #FFF;
	outline: none;
}
.pos-cart-exp-participant-input:hover,
.pos-cart-exp-participant-input:focus { border-color: #003264; }
.pos-cart-exp-participants-help {
	font-size: 11px;
	color: var(--ed-text-muted);
	font-style: italic;
}

/* ===== Phase 2 — inline cart participants (structured per-seat rows) ===== */
.pos-cart-exp-participants-header {
	display: flex;
	align-items: center;
	gap: 6px;
}
.pos-cart-exp-participants-header .pos-cart-exp-participants-toggle { flex: 1 1 auto; }
/* Program roster: one set of people covers every session line. Always sits on
   its own line under the count — the cart is too narrow to share one. */
.pos-cart-participants-applies {
	flex: 0 0 100%;
	padding-left: 20px;
	margin-top: -2px;
	font-size: 11px;
	font-weight: 400;
	color: var(--ed-text-muted);
	text-align: left;
}
.pos-cart-exp-participants-rate {
	font-size: 11px;
	font-weight: 600;
	color: #003264;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 2px;
}
.pos-cart-bulk-menu {
	position: relative;
	flex: 0 0 auto;
}
.pos-cart-bulk-trigger {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: transparent;
	border: 0;
	color: var(--ed-text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pos-cart-bulk-trigger:hover { background: #F1F4F7; color: #003264; }
.pos-cart-bulk-menu-list {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 200px;
	background: #FFF;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
	z-index: 20;
}
.pos-cart-bulk-menu-item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	font-size: 12px;
	color: #003264;
	text-align: left;
	cursor: pointer;
}
.pos-cart-bulk-menu-item:hover { background: #F1F4F7; }
.pos-cart-bulk-menu-item.is-danger { color: #B91C1C; }
.pos-cart-bulk-menu-item.is-danger:hover { background: #FEF2F2; }

.pos-cart-participant-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}
.pos-cart-participant-row.is-resolved { align-items: center; }
.pos-cart-participant-num {
	flex: 0 0 18px;
	font-size: 11px;
	color: var(--ed-text-muted);
	text-align: center;
	padding-top: 8px;
}
.pos-cart-participant-row.is-resolved .pos-cart-participant-num { padding-top: 0; }
.pos-cart-participant-fields {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pos-cart-participant-fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.pos-cart-participant-input {
	width: 100%;
	border: 1px solid #DFE3E8;
	border-radius: 6px;
	padding: 7px 9px;
	font-size: 12px;
	color: #003264;
	background: #FFF;
	outline: none;
}
.pos-cart-participant-input:hover,
.pos-cart-participant-input:focus { border-color: #003264; }
.pos-cart-participant-email { width: 100%; }
/* #3904 — "Same as customer" lives INSIDE the email field, pinned to its right
   edge, so it reads as part of that field rather than as a stray link under it.
   The input gets matching right padding so typed text never runs beneath it,
   and the button disappears once the field already holds that address. */
.pos-cart-participant-email-wrap {
	position: relative;
	width: 100%;
}
.pos-cart-participant-input.has-same-as { padding-right: 118px; }
.pos-cart-participant-same-as {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	background: transparent;
	border: 0;
	border-left: 1px solid #EDF0F3;
	border-radius: 0 5px 5px 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
	cursor: pointer;
}
.pos-cart-participant-same-as:hover { background: #F1F4F7; }
.pos-cart-participant-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 4px 0 0;
	padding: 4px;
	list-style: none;
	background: #FFF;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.08);
	max-height: 220px;
	overflow-y: auto;
	z-index: 30;
}
.pos-cart-participant-suggestion {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 7px 9px;
	border-radius: 6px;
	font-size: 12px;
	color: #003264;
	text-align: left;
	cursor: pointer;
}
.pos-cart-participant-suggestion:hover { background: #F1F4F7; }
.pos-cart-participant-suggestion-name { font-weight: 600; }
.pos-cart-participant-suggestion-email { color: var(--ed-text-muted); font-size: 11px; }

.pos-cart-participant-chip {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	background: #F4FBF7;
	border: 1px solid #BBF0CC;
	border-radius: 8px;
}
.pos-cart-participant-chip-text { display: flex; flex-direction: column; min-width: 0; }
.pos-cart-participant-chip-name {
	font-size: 12px;
	font-weight: 600;
	color: #003264;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pos-cart-participant-chip-email {
	font-size: 11px;
	color: #4F6679;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pos-cart-participant-chip-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.pos-cart-participant-chip-edit,
.pos-cart-participant-chip-clear {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: transparent;
	border: 0;
	color: var(--ed-text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pos-cart-participant-chip-edit:hover { background: #FFF; color: #003264; }
.pos-cart-participant-chip-clear:hover { background: #FEE2E2; color: #B91C1C; }

/* CLAUDE.md a11y rule: 44×44 minimum touch target. Tiny inline action buttons
   stay visually compact on desktop (mouse-only) but expand their hit-area on
   touch devices via @media (pointer: coarse) so cashiers on iPads can land a
   tap reliably. */
@media (pointer: coarse) {
	.pos-cart-bulk-trigger,
	.pos-cart-participant-chip-edit,
	.pos-cart-participant-chip-clear {
		min-width: 44px;
		min-height: 44px;
	}
	.pos-cart-participant-details-toggle {
		min-height: 44px;
	}
}

.pos-cart-participant-details-toggle {
	flex: 0 0 auto;
	background: transparent;
	border: 1px dashed #DFE3E8;
	border-radius: 6px;
	padding: 5px 8px;
	font-size: 11px;
	color: var(--ed-text-muted);
	cursor: pointer;
	height: 32px;
	margin-top: 0;
	/* Both labels ("+ details" / "Hide details") occupy the same box, so
	   toggling can't resize the button and shift the name fields beside it. */
	min-width: 88px;
	text-align: center;
}
.pos-cart-participant-details-toggle:hover { border-color: #003264; color: #003264; }
.pos-cart-participant-details-toggle.is-open { border-style: solid; color: #003264; border-color: #003264; }

.pos-cart-participant-extras {
	margin: 0 0 8px 26px;
	padding: 10px;
	background: #FFF;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pos-cart-participant-extras-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.pos-cart-participant-extras-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pos-cart-participant-extras-field > span {
	font-size: 11px;
	color: var(--ed-text-muted);
}
.pos-cart-participant-notes { resize: vertical; min-height: 50px; }
.pos-cart-participant-extras-cfs {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Mobile (375–767px): stack participant fields, hide "+ details" inline expand;
   the toggle still works but the panel renders below as a stacked block. */
@media (max-width: 767px) {
	.pos-cart-participant-fields-grid { grid-template-columns: 1fr; }
	.pos-cart-participant-extras-grid { grid-template-columns: 1fr; }
	.pos-cart-participant-extras { margin-left: 0; }
}

/* =====================================================================
   Cart bottom — Adjustments + Totals + Checkout. Per the design these
   blocks extend flush to the cart's outer edges (no inset grey panel).
   A single 1px hairline separates each section; backgrounds are
   transparent so the blocks read as flat full-width rows. The totals
   block specifically uses a white background per the mockup.
   ===================================================================== */

/* Adjustments — second half of the shared grey region. Same backdrop as
   the customer block, flush to outer edges, light hairline at the top. */
.pos-cart-adjustments {
	background: var(--pos-inset-bg);
	padding: 12px 16px 14px;
	margin: 0;
	border-top: 1px solid #EBEBEB;
}
.pos-cart-adjustments-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ed-text-muted);
	margin-bottom: 10px;
}
.pos-cart-adjustment-row {
	padding: 10px 0;
	border-bottom: 1px solid #EBEBEB;
}
.pos-cart-adjustment-row:last-child {
	border-bottom: 0;
}
.pos-cart-adjustment-label {
	font-size: 14px;
	font-weight: 500;
	color: #003264;
}
.pos-cart-adjustment-state {
	font-size: 12px;
	color: var(--ed-text-muted);
}

/* Promo / voucher input row — input with leading tag icon + inline
   "Apply" button on the right. */
.pos-cart-promo-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pos-cart-promo-input-wrap {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	padding: 0 12px;
	height: 40px;
	transition: border-color 0.12s, box-shadow 0.12s;
}
.pos-cart-promo-input-wrap:focus-within {
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.12);
}
.pos-cart-promo-icon {
	flex: 0 0 14px;
	margin-right: 8px;
}
.pos-cart-promo-input {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: #003264;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0;
	min-width: 0;
}
.pos-cart-promo-input::placeholder {
	color: var(--ed-text-muted);
	font-weight: 500;
	letter-spacing: 0.04em;
}
.pos-cart-promo-apply {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	color: #003264;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 4px;
	cursor: pointer;
	transition: color 0.12s, opacity 0.12s;
}
.pos-cart-promo-apply:hover {
	color: #002550;
	opacity: 0.85;
}

/* Totals block — white panel hugging the bottom of the cart per the
   design. Flush to the cart's outer edge (no horizontal margin) so it
   visually reads as one piece with the cart container. Subtotal/tax
   rows, divider, bold Total row, full-width dark "Checkout" button. */
.pos-cart-totals-block {
	background: #fff;
	/* The floating Dash AI button is fixed bottom-right (56px + 24px inset) and
	   lands directly on the Create booking CTA — and on its quote split-arrow.
	   Reserve a gutter below the CTA so the page always has enough scroll room
	   to bring the button clear of it. */
	padding: 14px 18px var(--pos-cta-fab-gutter, 96px);
	border-top: 1px solid #EBEBEB;
}
.pos-cart-totals-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pos-cart-totals-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--ed-text-muted);
}
.pos-cart-totals-row > span:last-child {
	color: #003264;
	font-weight: 500;
}
.pos-cart-totals-divider {
	height: 1px;
	background: #DFE3E8;
	margin: 10px 0 8px;
}
.pos-cart-totals-grand {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	font-weight: 700;
	color: #003264;
	margin-bottom: 12px;
}
.pos-cart-totals-grand > span:last-child {
	font-size: 18px;
	font-weight: 700;
}
.pos-cart-waiver-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	margin-bottom: 10px;
}
.pos-cart-checkout-btn {
	width: 100%;
	background: #003264;
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.12s, opacity 0.12s, transform 0.12s;
}
.pos-cart-checkout-btn:hover:not(:disabled) {
	background: #002550;
}
.pos-cart-checkout-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Quotes (QUOTES_PLAN.md §7.1) — Create booking split action + quote panel */
.pos-btn-split {
	position: relative;
	display: flex;
	width: 100%;
}
.pos-btn-split-main {
	flex: 1 1 auto;
	border-radius: 999px 0 0 999px;
}
.pos-btn-split-toggle {
	flex: 0 0 auto;
	background: #003264;
	color: #fff;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0 999px 999px 0;
	padding: 14px 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: background-color 0.12s;
}
.pos-btn-split-toggle:hover {
	background: #002550;
}
.pos-btn-split-menu {
	position: absolute;
	right: 0;
	bottom: calc(100% + 6px);
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
	min-width: 190px;
	padding: 6px;
	z-index: 30;
}
.pos-btn-split-menu button {
	width: 100%;
	background: transparent;
	border: 0;
	border-radius: 6px;
	text-align: left;
	padding: 9px 12px;
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
	cursor: pointer;
}
.pos-btn-split-menu button:hover {
	background: #F4F6F8;
}
/* Save-as-quote drawer (#3483) uses the site sidebar-modal + form-control kit — no bespoke panel CSS. */



/* Programs picker (#3050) — session list inside the expanded program card */
.pos-program-sessions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px;
	max-height: 220px;
	overflow-y: auto;
}
.pos-program-session-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	background: var(--pos-inset-bg);
	border-radius: 8px;
	font-size: 12px;
}
.pos-program-session-date {
	color: var(--pos-text);
	font-weight: 600;
}
.pos-program-session-avail {
	color: var(--pos-subtle);
	white-space: nowrap;
}

/* ==== css/booking-detail.css ==== */
/* ==========================================================================
   Booking Detail Redesign (May 2026)
   --------------------------------------------------------------------------
   Visual + structural restyle of /bookings/detail/{id}. NO new actions, no
   removed actions. Mirrors the POS visual vocabulary so the two surfaces
   feel like one product. See docs/BOOKING_DETAIL_REDESIGN_PLAN.md.
   ========================================================================== */

/* ----- Tokens (reused from POS where possible) ----- */
:root {
	--bd-navy: #003264;
	/* Body ink — the site-default text color, deliberately NOT navy. Navy is
	   reserved for links, actions and amounts; this is for labels and prose.
	   Same value the .bd-card__title / .bd-pay__title / .bd-header-title rules
	   below already hardcode. */
	--bd-text: #303233;
	--bd-line: #eef0f4;
	--bd-card-bg: #ffffff;
	--bd-page-bg: #f6f7f9;
	--bd-mute: #6d87a1;
	--bd-mute-2: #94a3b8;
	--bd-success: #16a34a;
	--bd-warn: #d97706;
	--bd-danger: #dc2626;
	--bd-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--bd-radius: 12px;
	--bd-radius-sm: 8px;
}

/* ----- Page shell ----- */
.bd-page {
	background: var(--bd-page-bg);
	min-height: 100%;
}

.bd-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

/* The booking-request panel renders nothing at all for an ordinary booking,
   but its wrapper still carried the full `.bd-shell` padding - 36px of blank
   page on desktop and 136px on mobile (the shell's 120px bottom padding, which
   exists to clear the fixed mobile CTA). Keep only the horizontal padding here
   and let the panel itself space away from the header when it does render. */
.bd-shell.rq-panel-wrap {
	padding-top: 0;
	padding-bottom: 0;
}
.rq-panel {
	margin-top: 16px;
}

/* Help banner sits below the bd-shell. Match horizontal padding so the
   alert lines up with the cards above, and sit close to the cards.
   The inner `.help-box` ships with its own `mt-3 mb-3`; we zero those
   out so the only spacing is the 8px above (from this banner's
   margin-top) and shell padding-bottom — keeping the visual gap small. */
.bd-help-banner {
	max-width: 1600px;
	margin: 0 auto 16px;
	padding: 0 32px;
}
.bd-help-banner .help-box {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
@media (max-width: 991px) {
	.bd-help-banner { padding: 0 16px; }
}

@media (max-width: 991px) {
	.bd-shell {
		padding: 16px 16px 120px;
	}
}

/* ----- Unified header -----
   Leans on the existing site-wide `.product-details-header.title` class for
   outer chrome (background / border-bottom / padding). We only add
   internal layout helpers below for the inline pills, metadata, dropdown,
   primary CTA — without overriding the global pattern. */
.bd-header {
	gap: 12px;
	/* Keep the Actions / CTA on the same row as the title — never let them wrap
	   onto a second line at desktop widths. The title block (flex: 1; min-width: 0)
	   absorbs the squeeze and its pills/meta wrap within it. Mobile (<=767px)
	   re-enables wrap for the stacked layout. */
	flex-wrap: nowrap;
}

/* Back button intentionally NOT styled here — uses the site-wide
   `.back-button` styling via <x-breadcrumb.back /> for consistency
   with every other page header. */

.bd-header-title-block {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1 1 auto;
	min-width: 0;
}

.bd-header-title {
	/* Match the site-wide section-title used on every other page header */
	font-size: 20px;
	font-weight: 600;
	color: #303233;
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
}

.bd-header-meta {
	font-size: 12.5px;
	color: var(--bd-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* Only render the dot BETWEEN consecutive metadata pieces — no leading dot.
   `:first-of-type` matches the first <span> sibling (which is usually a pill,
   not a meta), so we use the adjacent sibling combinator instead. */
.bd-header-meta + .bd-header-meta::before {
	content: "·";
	color: var(--bd-mute-2);
	margin: 0 4px;
}

/* Hide the secondary meta strip (booking type · duration · total) once the
   right-rail layout collapses — at that width the pills + title + Actions
   dropdown + primary CTA already fill the row, and the meta info just
   wraps to a second line that pushes everything down. The same details
   are still surfaced inside the Customer / Experience date / Payment
   cards lower on the page, so hiding here is purely a UI compaction. */
@media (max-width: 1199px) {
	.bd-header-meta { display: none; }
}

.bd-header-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}
.bd-header-pill--archived {
	background: #e5e7eb;
	color: #4b5563;
}

.bd-header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.bd-actions-trigger {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
	padding: 8px 14px;
	border-radius: var(--bd-radius-sm);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background 0.12s;
}
.bd-actions-trigger:hover { background: var(--bd-page-bg); }
.bd-actions-trigger img { width: 12px; height: 12px; }

.bd-cta-primary {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.12s, transform 0.05s;
}
.bd-cta-primary:hover { opacity: 0.92; }
.bd-cta-primary:active { transform: translateY(1px); }
.bd-cta-primary img { width: 14px; height: 14px; filter: brightness(0) invert(1); }

@media (max-width: 767px) {
	/* Mobile header: ONE row of chrome - back button, booking number and the
	   Actions kebab - with the status pills wrapping onto their own line
	   underneath the title. The previous rule set `width: 100%` on the title
	   block, but `flex: 1 1 auto` let it shrink again, so back / title / pills /
	   kebab all fought for the same row and the pills broke mid-line. */
	.bd-header {
		padding: 12px 16px;
		flex-wrap: nowrap;
		align-items: flex-start;
		column-gap: 10px;
		row-gap: 8px;
	}
	.bd-header-meta { display: none; }
	/* The status pills get a full-width row of their own, flush with the page's
	   left edge, so they line up with the banners and cards below instead of
	   hanging in a ragged half-line indented under the title ("the Confirmed /
	   Unpaid bit is out of place"). The block is pulled left by the back
	   button's width and the title padded back out by the same amount, which
	   keeps the number beside the chevron while its siblings wrap to the edge.
	   Works for any number of pills - nothing has to fit. */
	.bd-header-title-block {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin-left: -42px; /* back button (32px) + the header's column-gap */
		align-items: center;
		column-gap: 8px;
		row-gap: 6px;
	}
	.bd-header-title {
		flex: 1 1 100%;
		padding-left: 42px;
		font-size: 18px;
		line-height: 26px;
	}
	/* Keep the back button and the kebab on the booking number's line rather
	   than centered against the taller two-line title block. The header carries
	   Bootstrap's `align-items-center` (an `!important` utility), so alignment
	   has to be set per child via align-self. */
	.bd-header > a,
	.bd-header-title-block,
	.bd-header-actions { align-self: flex-start; }
	.bd-header-actions { margin-left: 0; }
	.bd-cta-primary {
		position: fixed;
		bottom: 16px;
		left: 16px;
		right: 16px;
		justify-content: center;
		padding: 14px 20px;
		font-size: 15px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
		z-index: 50;
	}
}

/* ----- Banners (reskin only, no behavior change) ----- */
.bd-banner {
	margin: 16px 32px 0;
	padding: 14px 18px;
	border-radius: var(--bd-radius-sm);
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}
.bd-banner--warning {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}
.bd-banner--shortage {
	background: #fef9c3;
	border: 1px solid #fde68a;
	color: #854d0e;
	justify-content: space-between;
}
.bd-banner--danger {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	justify-content: space-between;
}
.bd-banner--danger .bd-banner__icon {
	background: #dc2626;
}
.bd-banner__icon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--bd-warn);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}
.bd-banner__title {
	font-weight: 600;
	color: inherit;
}
.bd-banner__msg {
	color: inherit;
	margin: 2px 0 0;
	font-size: 13px;
}
.bd-banner__dismiss {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	padding: 4px 12px;
	border-radius: var(--bd-radius-sm);
	font-size: 12.5px;
	cursor: pointer;
}

@media (max-width: 767px) {
	.bd-banner {
		margin: 12px 16px 0;
		/* Stack: the action button gets its own full-width line rather than
		   being squeezed to a 3-line sliver beside the message. */
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.bd-banner__dismiss {
		width: 100%;
		padding: 9px 12px;
		min-height: 40px;
	}
}

/* ----- "not assigned" chip in the Inventory column (allow shortage, #3722) -----
   Units sold past real stock never get an inventory row, so the cell would just
   look short. Same amber as the shortage banner above it so the two read as one
   story, and the same pill shape as its Confirmed / Picked Up neighbours. */
.bd-shortage-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background-color: #fef3c7;
	color: #92400e;
	border: 1px solid #fde68a;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	white-space: nowrap;
}
.bd-shortage-pill i {
	font-size: 10px;
}
/* Bundle-component rows size their status pills down to 10px / 2px 6px inline,
   so the shortage chip needs the same small register or it renders visibly
   larger than the pills sitting beside it. Applied as a modifier on the chip —
   the neighbouring pills keep their own inline sizing untouched. */
.bd-shortage-pill.bd-shortage-pill-sm {
	font-size: 10px;
	padding: 2px 6px;
	gap: 4px;
}
.bd-shortage-pill.bd-shortage-pill-sm i {
	font-size: 9px;
}

/* ----- Tabs (label only; CSS unchanged from existing nav-tabs) ----- */
.bd-tabs-wrap {
	padding: 16px 32px 0;
}
@media (max-width: 767px) {
	.bd-tabs-wrap { padding: 12px 16px 0; }
	/* Mirrors .pd-tabs in public/css/product-detail.css:562-575 - the tab strip
	   scrolls sideways on narrow screens instead of wrapping to a second row. */
	.bd-tabs-wrap .nav-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.bd-tabs-wrap .nav-tabs::-webkit-scrollbar { display: none; }
	/* Tighter tab padding so the common 4-tab strip fits a 375px screen
	   without scrolling; longer strips (fit ticket, documents) still scroll. */
	.bd-tabs-wrap .nav-tabs .nav-link {
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* ----- Two-column layout ----- */
.bd-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 1279px) {
	.bd-layout {
		grid-template-columns: 1fr;
	}
}

.bd-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bd-side { min-width: 0; }

/* Sticky right rail on wide viewports only. Below 1280, the rail flows
   inline. On mobile we add a sticky-bottom payment summary bar instead
   (see .bd-side-mobile-bar). */
@media (min-width: 1280px) {
	.bd-side {
		position: sticky;
		top: 16px;
	}
}

/* ----- Cards ----- */
.bd-card {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-card-shadow);
	padding: 20px 22px;
}
.bd-card + .bd-card { /* nothing — gap handled by parent grid */ }

.bd-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.bd-card__title {
	font-size: 15px;
	font-weight: 600;
	/* Card section labels use the site-default text color, not navy */
	color: #303233;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.bd-card__title-count {
	color: var(--bd-mute);
	font-weight: 500;
	font-size: 13px;
}
.bd-card__action {
	background: transparent;
	border: 0;
	color: var(--bd-navy);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bd-card__action:hover { background: var(--bd-page-bg); }

/* ----- Two-up card row (Customer + Rental period) ----- */
.bd-card-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 767px) {
	.bd-card-row { grid-template-columns: 1fr; }
}

/* ----- Customer card ----- */
.bd-customer__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--bd-navy);
	text-decoration: none;
	margin-bottom: 4px;
}
.bd-customer__name:hover { text-decoration: underline; }
.bd-customer__contact {
	font-size: 13px;
	color: var(--bd-mute);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 8px;
}
.bd-customer__contact-label {
	color: var(--bd-mute-2);
	margin-right: 4px;
}
.bd-customer__divider {
	border-top: 1px solid var(--bd-line);
	margin: 12px 0;
}
.bd-customer__source-line {
	font-size: 12px;
	color: var(--bd-mute);
}
.bd-customer__source-label {
	color: var(--bd-mute-2);
	margin-right: 4px;
}

/* ----- Rental period card ----- */
.bd-period__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.bd-period__col {
	min-width: 0;
}
.bd-period__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--bd-mute);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.bd-period__time {
	font-size: 16px;
	font-weight: 600;
	color: var(--bd-navy);
	line-height: 1.2;
	margin-bottom: 2px;
}
.bd-period__date {
	font-size: 13px;
	color: var(--bd-mute);
}
.bd-period__location-block {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--bd-line);
}
.bd-period__location-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--bd-navy);
}
.bd-period__location-addr {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
	line-height: 1.4;
}
.bd-period__duration {
	margin-top: 14px;
	font-size: 13px;
	color: var(--bd-navy);
	font-weight: 500;
}
.bd-period__made {
	font-size: 12px;
	color: var(--bd-mute);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed var(--bd-line);
}

/* Click-to-move affordance on the period block */
.bd-period__grid--clickable {
	cursor: pointer;
	border-radius: 8px;
	margin: -8px;
	padding: 8px;
	transition: background-color 0.12s ease;
}
.bd-period__grid--clickable:hover {
	background-color: #f1f5fa;
}
.bd-period__grid--clickable:hover .bd-period__time {
	color: #003264;
}
.bd-period__edit-btn {
	font-size: 12px;
	font-weight: 500;
	color: #003264;
	background: transparent;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 4px 10px;
	cursor: pointer;
	transition: all 0.12s ease;
}
.bd-period__edit-btn:hover {
	background-color: #003264;
	color: #fff;
	border-color: #003264;
}

/* ----- Move dates panel ----- */
.bd-move__current {
	background-color: #f6f7f9;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
}
.bd-move__current-label {
	font-size: 11px;
	color: #6d87a1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.bd-move__current-value {
	font-size: 14px;
	color: #303233;
}
.bd-move__field-label {
	font-size: 12px;
	color: #6d87a1;
	font-weight: 500;
	margin-bottom: 6px;
	display: block;
}
.bd-move__select {
	font-size: 14px;
	padding: 8px 32px 8px 12px;
	border-radius: 8px;
	border: 1px solid #eaeaea;
}
/* Pickup half of the move panel when the gear is already collected. */
.bd-move__lock-hint {
	font-size: 12px;
	color: var(--bd-mute);
	line-height: 1.5;
}
/* style.css sets a global `a { display: block }` - keep a link in this sentence inline. */
.bd-move__lock-hint a { display: inline; }
.bd-move__exp-card {
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 12px;
}
.bd-move__exp-name {
	font-weight: 600;
	font-size: 14px;
	color: #303233;
	margin-bottom: 4px;
}
.bd-move__exp-meta {
	font-size: 12px;
	color: #6d87a1;
	margin-bottom: 10px;
}
.bd-move__exp-empty {
	font-size: 13px;
	color: #6d87a1;
	font-style: italic;
	margin-bottom: 0;
}
.bd-move__slot {
	padding: 10px 16px;
	border: 1px solid #eaeaea;
	background-color: #fff;
	color: #303233;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bd-move__slot--selected {
	border-color: #003264;
	background-color: #003264;
	color: #fff;
}
.bd-move__slot--full {
	background-color: #f3f4f6;
	color: #6b7280;
	cursor: not-allowed;
	text-decoration: line-through;
}
.bd-move__slot-meta {
	font-size: 11px;
	opacity: 0.85;
}
.bd-move__store-note {
	margin-top: 12px;
	font-size: 12px;
	color: #6d87a1;
	padding: 8px 12px;
	background: #f9fafb;
	border-radius: 6px;
}
.bd-move__alert {
	margin-top: 16px;
	padding: 12px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
}
.bd-move__alert-title {
	font-weight: 600;
	font-size: 13px;
	color: #991b1b;
	margin-bottom: 6px;
}
.bd-move__alert-list {
	padding-left: 20px;
	font-size: 13px;
	color: #991b1b;
	margin-bottom: 0;
}
.bd-move__error-banner {
	margin-top: 16px;
	padding: 10px 12px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	font-size: 13px;
	color: #991b1b;
}
.bd-move__pricing {
	margin-top: 16px;
	padding: 12px;
	border-radius: 8px;
}
.bd-move__pricing--charge {
	background-color: #fff7ed;
	border: 1px solid #fed7aa;
}
.bd-move__pricing--refund {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
}
.bd-move__pricing-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #4b5563;
	margin-top: 2px;
}
.bd-move__pricing-row--total {
	font-size: 14px;
	font-weight: 600;
	margin-top: 6px;
}
.bd-move__pricing-row--charge {
	color: #9a3412;
}
.bd-move__pricing-row--refund {
	color: #15803d;
}
.bd-move__loading {
	font-size: 12px;
	color: #6d87a1;
	font-style: italic;
}
.bd-move__loading-fade {
	opacity: 0.5;
	pointer-events: none;
}
.bd-move__action-row {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}
.bd-move__btn {
	border-radius: 8px;
	padding: 8px 16px;
	min-height: 44px;
}
.bd-move__btn-primary {
	background-color: #003264;
	border-color: #003264;
}

/* ----- Cancellation card (shown only when cancelled) ----- */
.bd-cancellation {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--bd-radius);
	padding: 18px 22px;
}
.bd-cancellation__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-danger);
	margin-bottom: 8px;
}
.bd-cancellation__reason {
	font-size: 14px;
	color: #7f1d1d;
	margin-bottom: 4px;
}
.bd-cancellation__notes {
	font-size: 13px;
	color: #991b1b;
}

/* Inventory cell — render each tracked inventory item on its own line so
   long lists of identifiers (#123, #124, …) are easy to scan in a row. */
.bd-items-card .inventory-line {
	display: block;
	line-height: 1.6;
}

/* ----- Items section (visual chrome only — table content unchanged) ----- */
.bd-items-card .table-bordered {
	margin-bottom: 0;
}
.bd-items-card__title-divider {
	margin-top: 8px;
	margin-bottom: 12px;
	border-top: 1px solid var(--bd-line);
}
.bd-items-store-section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--bd-line);
}
.bd-items-store-section__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy);
	margin-bottom: 12px;
}
/* Mixed bookings (MIXED_BOOKINGS_PLAN.md) — each line-type (Rentals, Experiences)
   gets its own heading + table with spacing between, so a mixed booking's two
   tracks read as distinct sections rather than two tables jammed together. */
.bd-items-group {
	margin-bottom: 26px;
}
.bd-items-group:last-child {
	margin-bottom: 0;
}
.bd-items-group__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy);
	margin-bottom: 12px;
}

/* ----- Participants card ----- */
.bd-participants-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 10px 0;
}
.bd-participants-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-participant-row {
	display: flex;
	flex-direction: column;
	padding: 10px 0;
	border-top: 1px solid var(--bd-line);
}
.bd-participant-row:first-child {
	border-top: 0;
	padding-top: 0;
}
.bd-participant-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-participant-row__name {
	font-size: 14px;
	font-weight: 500;
	color: var(--bd-navy);
	text-decoration: none;
}
.bd-participant-row__name:hover { text-decoration: underline; }
.bd-participant-row__head-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.bd-participant-row__edit,
.bd-participant-row__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 4px 6px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}
.bd-participant-row__edit { font-size: 14px; }
.bd-participant-row__remove { font-size: 16px; }
.bd-participant-row__edit:hover {
	background: rgba(0, 50, 100, 0.06);
	color: var(--bd-navy);
}
.bd-participant-row__remove:hover { color: var(--bd-danger); }

/* Inline name/email edit panel that replaces the name link in-place. */
.bd-participant-row.is-editing {
	background: #fff8e6;
	border: 1px solid #f3d7a2;
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
}
.bd-participant-row__edit-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}
.bd-participant-row__edit-name-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 575px) {
	.bd-participant-row__edit-name-grid { grid-template-columns: 1fr; }
}
.bd-participant-row__edit-input {
	width: 100%;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	font-family: inherit;
}
.bd-participant-row__edit-input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
/* #3904 — "Same as customer" lives INSIDE the email field, pinned to its right
   edge, so it reads as part of that field rather than as a stray link under it.
   The input takes matching right padding so typed text never runs beneath the
   button, and the button disappears once the field already holds that address. */
.bd-participant-row__email-wrap {
	position: relative;
	width: 100%;
}
.bd-participant-row__edit-input.has-same-as { padding-right: 122px; }
.bd-participant-row__same-as {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--bd-line);
	border-radius: 0 calc(var(--bd-radius-sm) - 1px) calc(var(--bd-radius-sm) - 1px) 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: var(--bd-navy);
	white-space: nowrap;
	cursor: pointer;
}
.bd-participant-row__same-as:hover { background: var(--bd-page-bg); }

.bd-participant-row__edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}
.bd-participant-row__edit-cancel,
.bd-participant-row__edit-save {
	border-radius: var(--bd-radius-sm);
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	min-width: 90px;
	line-height: 1.2;
	transition: background 0.12s, opacity 0.12s;
}
.bd-participant-row__edit-cancel {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
}
.bd-participant-row__edit-cancel:hover { background: var(--bd-page-bg); }
.bd-participant-row__edit-save {
	background: var(--bd-navy);
	border: 1px solid var(--bd-navy);
	color: #fff;
}
.bd-participant-row__edit-save:hover { opacity: 0.92; }
.bd-participant-row__edit-save:disabled { opacity: 0.6; cursor: not-allowed; }
.bd-participant-row__booker-tag {
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bd-mute);
	background: var(--bd-page-bg);
	padding: 2px 8px;
	border-radius: 999px;
	flex-shrink: 0;
}
.bd-participant-row__ticket {
	margin-top: 6px;
}
.bd-participant-row__ticket-select {
	width: 100%;
	max-width: 320px;
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
}
.bd-participant-row__ticket-select:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-participant-row__notes-input {
	margin-top: 6px;
	width: 100%;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 6px 10px;
	font-size: 12.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	resize: vertical;
	min-height: 32px;
	font-family: inherit;
	line-height: 1.4;
}
.bd-participant-row__notes-input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-participant-row--placeholder { opacity: 0.85; }

/* ----- Participants edit form (POS-style inline) ---------------------- */
.bd-edit-participants {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bd-edit-participant-row {
	background: var(--bd-page-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bd-edit-participant-row.is-resolved {
	background: #f0f7ee;
	border-color: #c4ddc1;
}
.bd-edit-participant-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-edit-participant-row__num {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bd-mute);
}
.bd-edit-participant-row__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0 4px;
	font-size: 18px;
	line-height: 1;
}
.bd-edit-participant-row__remove:hover { color: var(--bd-danger); }

.bd-edit-participant-row__chip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--bd-card-bg);
	border: 1px solid #c4ddc1;
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
}
.bd-edit-participant-row__chip-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy);
}
.bd-edit-participant-row__chip-email {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}
.bd-edit-participant-row__chip-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.bd-edit-participant-row__chip-edit,
.bd-edit-participant-row__chip-clear {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 4px 6px;
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}
.bd-edit-participant-row__chip-edit:hover {
	background: rgba(0, 50, 100, 0.06);
	color: var(--bd-navy);
}
.bd-edit-participant-row__chip-clear:hover { color: var(--bd-danger); }
.bd-edit-participant-row.is-editing-customer {
	background: #fff8e6;
	border-color: #f3d7a2;
}
.bd-edit-participant-row__editing-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--bd-radius-sm);
	background: rgba(217, 119, 6, 0.1);
	color: #92400e;
	font-size: 12px;
	font-weight: 500;
}
.bd-edit-participant-row__editing-done {
	background: var(--bd-card-bg);
	border: 1px solid #f3d7a2;
	color: #92400e;
	font-size: 11.5px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
	cursor: pointer;
}
.bd-edit-participant-row__editing-done:hover { background: #fef3c7; }

.bd-edit-participant-row__fields {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-edit-participant-row__name-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 575px) {
	.bd-edit-participant-row__name-grid { grid-template-columns: 1fr; }
}
.bd-edit-participant-row__label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--bd-mute);
	margin-bottom: 4px;
}
/* #3904 — same in-field treatment on the bulk participants form. */
.bd-edit-participant-row__email-wrap {
	position: relative;
	width: 100%;
}
.bd-edit-participant-row__input.has-same-as { padding-right: 122px; }
.bd-edit-participant-row__same-as {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--bd-line);
	border-radius: 0 calc(var(--bd-radius-sm) - 1px) calc(var(--bd-radius-sm) - 1px) 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: var(--bd-navy);
	white-space: nowrap;
	cursor: pointer;
}
.bd-edit-participant-row__same-as:hover { background: var(--bd-page-bg); }
.bd-edit-participant-row__input,
.bd-edit-participant-row__select,
.bd-edit-participant-row__textarea {
	width: 100%;
	font-family: inherit;
	font-size: 13px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 8px 12px;
	line-height: 1.4;
}
.bd-edit-participant-row__textarea {
	resize: vertical;
	min-height: 38px;
}
.bd-edit-participant-row__input:focus,
.bd-edit-participant-row__select:focus,
.bd-edit-participant-row__textarea:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}

.bd-edit-participant-row__suggestions {
	list-style: none;
	margin: 4px 0 0;
	padding: 4px;
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
	max-height: 220px;
	overflow-y: auto;
}
.bd-edit-participant-row__suggestion {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	background: transparent;
	border: 0;
	text-align: left;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--bd-navy);
}
.bd-edit-participant-row__suggestion:hover { background: var(--bd-page-bg); }
.bd-edit-participant-row__suggestion-name {
	font-size: 13px;
	font-weight: 500;
}
.bd-edit-participant-row__suggestion-email {
	font-size: 11.5px;
	color: var(--bd-mute);
}

.bd-edit-participants__add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px dashed var(--bd-line);
	color: var(--bd-navy);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	align-self: flex-start;
}
.bd-edit-participants__add:hover { background: var(--bd-page-bg); }
.bd-edit-participants__add img { width: 12px; height: 12px; }
.bd-participant-row__rate {
	font-size: 11.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}
.bd-participant-row__unassigned {
	font-size: 11.5px;
	color: var(--bd-warn);
	font-weight: 500;
	margin-top: 2px;
}
.bd-participant-row__notes,
.bd-participant-row__fields {
	font-size: 12.5px;
	color: var(--bd-mute);
	margin-top: 2px;
}

/* Per-participant custom fields — read-mode "label: value" rows + edit-mode
   wrapper around the standard <x-custom-fields.form-fields> component. */
.bd-participant-row__cf-list {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bd-participant-row__cf-row {
	font-size: 12.5px;
	color: var(--bd-mute);
	display: flex;
	gap: 6px;
}
.bd-participant-row__cf-label {
	font-weight: 500;
	color: var(--bd-text);
}
.bd-participant-row__cf-label::after {
	content: ':';
}
.bd-participant-row__cf-value {
	color: var(--bd-mute);
	word-break: break-word;
}
/* "Additional details" disclosure — one small toggle that reveals every extra
   captured for the participant (DOB, emergency contact, comments, custom
   fields) so the row stays scannable but nothing is hidden for good. */
.bd-participant-row__details {
	margin-top: 6px;
}
.bd-participant-row__details-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 0;
	background: none;
	border: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bd-mute);
	cursor: pointer;
}
.bd-participant-row__details-toggle:hover {
	color: var(--bd-text);
}
/* Touch devices get a comfortable ≥44px hit area; the label stays small text —
   the extra target is transparent padding, so desktop (mouse) is unchanged. */
@media (pointer: coarse) {
	.bd-participant-row__details-toggle {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}
.bd-participant-row__details .bd-participant-row__cf-list {
	margin-top: 4px;
}
/* Prevent a flash of the expanded panel before Alpine boots (default closed). */
[x-cloak] {
	display: none !important;
}
.bd-participant-row__cf-edit {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px dashed var(--bd-line);
}
.bd-participant-row__cf-edit .form-group { padding-top: 8px; }
.bd-participant-row__cf-edit .form-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--bd-text);
	margin-bottom: 4px;
}
.bd-participant-row__cf-edit .form-control,
.bd-participant-row__cf-edit input[type="text"],
.bd-participant-row__cf-edit input[type="email"],
.bd-participant-row__cf-edit input[type="number"],
.bd-participant-row__cf-edit input[type="date"],
.bd-participant-row__cf-edit textarea,
.bd-participant-row__cf-edit select {
	font-size: 13px;
	padding: 6px 10px;
}
.bd-participant-row__waivers {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.bd-participant-waiver-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 999px;
}
.bd-participant-waiver-pill--signed {
	background: #dcfce7;
	color: #166534;
}
.bd-participant-waiver-pill--pending {
	background: #fef3c7;
	color: #854d0e;
}
.bd-participant-waiver-link {
	font-size: 11.5px;
	color: var(--bd-navy);
	text-decoration: none;
	margin-left: 4px;
}
.bd-participant-waiver-link:hover { text-decoration: underline; }

/* #3599 — per-form consent lines under a participant.
   The person line above (.bd-participant-row__waivers) carries the aggregate
   summary and the per-person actions (Chase everything, timeline). Once a
   participant has more than one applicable form, each form gets its own line
   here so its state, its signing link and its PDFs are unambiguous — that
   replaces the old mix of an aggregate pill PLUS a separate "{Form}: Pending"
   chip per form, which said the same thing twice in two visual languages. A
   participant with a single form never renders this block. */
.bd-participant-forms {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.bd-participant-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 26px;
	padding-left: 10px;
	/* A quiet left rule reads as "these belong to the person above" without
	   adding a second card shape. */
	border-left: 2px solid var(--bd-line);
}
.bd-participant-form__name {
	font-size: 12px;
	font-weight: 500;
	color: #1f2933;
	min-width: 0;
	overflow-wrap: anywhere;
}
/* The per-form row-action buttons sit tight against their pill — the standard
   .btn padding leaves a gap that makes the line look broken up. The tight
   padding alone made a 24x20px target, the smallest on the page; a 32px box
   clears WCAG 2.2 AA's 24px minimum for any pointer while the glyph stays the
   same size, and a coarse pointer gets the site's 44x44 rule (mirrors
   .ct-seq-tools in consent-tracking.css). */
.bd-participant-form .btn-sm {
	padding: 2px 4px;
	line-height: 1;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
@media (pointer: coarse), (max-width: 767px) {
	.bd-participant-form { gap: 8px; }
	.bd-participant-form .btn-sm {
		min-width: 44px;
		min-height: 44px;
	}
}
.bd-participant-form .bd-participant-waiver-link { margin-left: 0; }

/* Inline edit-mode footer */
.bd-participants-edit-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--bd-line);
}

.bd-assign-link {
	font-size: 12px;
	color: var(--bd-warn);
	font-weight: 500;
	text-decoration: none;
	margin-left: 6px;
}
.bd-assign-link:hover { text-decoration: underline; }

/* ----- Tags card ----- */
.bd-tags-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}
.bd-tag-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f1f5f9;
	color: var(--bd-navy);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	border-radius: 999px;
}
.bd-tag-chip__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bd-tag-chip__remove:hover { color: var(--bd-danger); }
.bd-tags-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 4px 0 8px;
}

.bd-tags-add {
	position: relative;
	display: inline-block;
}
.bd-tags-add__btn {
	background: transparent;
	border: 1px dashed var(--bd-line);
	color: var(--bd-navy);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.12s;
}
.bd-tags-add__btn:hover { background: var(--bd-page-bg); }
.bd-tags-add__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 12px 14px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	z-index: 5;
}
.bd-tags-add__pop-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	padding: 4px 0;
}
.bd-tags-add__pop-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bd-line);
}

/* ----- Notes card ----- */
.bd-notes-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 220px;
	overflow-y: auto;
	padding-right: 4px;
}
.bd-note {
	background: var(--bd-page-bg);
	border-radius: var(--bd-radius-sm);
	padding: 10px 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.bd-note__body {
	flex: 1;
	font-size: 13.5px;
	color: var(--bd-navy);
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.bd-note__remove {
	background: transparent;
	border: 0;
	color: var(--bd-mute);
	cursor: pointer;
	padding: 0 4px;
	font-size: 14px;
	line-height: 1;
	flex-shrink: 0;
}
.bd-note__remove:hover { color: var(--bd-danger); }
.bd-note__meta {
	font-size: 11px;
	color: var(--bd-mute);
	margin-top: 4px;
}

.bd-notes-empty {
	font-size: 13px;
	color: var(--bd-mute);
	padding: 6px 0;
}

.bd-notes-add {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bd-line);
}
.bd-notes-add__input {
	flex: 1;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 8px 12px;
	font-size: 13.5px;
	color: var(--bd-navy);
	background: var(--bd-card-bg);
	resize: vertical;
	min-height: 38px;
}
.bd-notes-add__input:focus {
	outline: none;
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.06);
}
.bd-notes-add__btn {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	padding: 8px 16px;
	border-radius: var(--bd-radius-sm);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	flex-shrink: 0;
}
.bd-notes-add__btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ----- Email actions card ----- */
.bd-email-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bd-email-actions__btn {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	color: var(--bd-navy);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.12s;
}
.bd-email-actions__btn:hover { background: var(--bd-page-bg); }
.bd-email-actions__hint {
	font-size: 12px;
	color: var(--bd-mute);
	margin-top: 10px;
}
.bd-email-actions__hint--missing {
	color: var(--bd-danger);
}

/* ----- Custom fields card ----- */
.bd-fields-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px 18px;
}
.bd-field {
	min-width: 0;
}
.bd-field__label {
	font-size: 11.5px;
	color: var(--bd-mute);
	margin-bottom: 2px;
}
.bd-field__value {
	font-size: 14px;
	color: var(--bd-navy);
	word-break: break-word;
}

/* ----- Right-rail Payment summary ----- */
.bd-pay {
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius);
	box-shadow: var(--bd-card-shadow);
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bd-pay__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.bd-pay__title {
	font-size: 15px;
	font-weight: 600;
	color: #303233;
	margin: 0;
}
/* Right-rail Payment header pill should match all other pills on the page
   (header, items table, etc.) — same line-height, padding, font-size. */
.bd-pay__head .pill {
	font-size: 12px;
	padding: 4px 12px;
	line-height: 1.4;
}
.bd-pay__lines {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-pay__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: var(--bd-navy);
}
.bd-pay__row-label {
	color: var(--bd-mute);
}
.bd-pay__row-amount {
	font-variant-numeric: tabular-nums;
}
.bd-pay__row--negative .bd-pay__row-amount,
.bd-pay__row--negative .bd-pay__row-label {
	color: var(--bd-danger);
}
.bd-pay__row--success .bd-pay__row-amount,
.bd-pay__row--success .bd-pay__row-label {
	color: var(--bd-success);
}
.bd-pay__row--clickable {
	cursor: pointer;
}
.bd-pay__row--clickable:hover .bd-pay__row-label {
	text-decoration: underline;
}
.bd-pay__divider {
	border-top: 1px solid var(--bd-line);
	margin: 4px 0;
}
.bd-pay__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16px;
	font-weight: 600;
	color: var(--bd-navy);
}
.bd-pay__total .bd-header-pill {
	font-size: 11px;
	font-weight: 500;
	margin-right: auto;
	margin-left: 8px;
}
.bd-pay__amount-due {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bd-pay__amount-due--positive {
	color: var(--bd-danger);
}
.bd-pay__amount-due--zero {
	color: var(--bd-success);
}
/* Money owed BACK to the customer - same weight as Amount due, opposite direction. */
.bd-pay__amount-due--refund {
	color: var(--bd-danger);
}
/* A quiet inline action inside a payment row (Undo a waived refund). */
.bd-pay__linkbtn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--dash, #003264);
	text-decoration: underline;
	cursor: pointer;
}
.bd-pay__linkbtn:hover {
	opacity: 0.75;
}

/* Promo code on a booking that is already made (#4048).
   Every value below is .pos-cart-promo-* from public/css/pos-redesign.css
   :2896-2953, renamed into this namespace so the control is the same one the
   POS cart shows. Do not restyle it here - fix it in both places or neither. */
.bd-pay__promo-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--bd-navy);
	cursor: pointer;
}
.bd-pay__promo-link:hover {
	text-decoration: underline;
}
.bd-pay__promo-link svg {
	flex-shrink: 0;
}
.bd-pay__promo-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bd-pay__promo-input-wrap {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #dfe3e8;
	border-radius: var(--bd-radius-sm);
	padding: 0 12px;
	height: 40px;
	transition: border-color 0.12s, box-shadow 0.12s;
}
.bd-pay__promo-input-wrap:focus-within {
	border-color: var(--bd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.12);
}
.bd-pay__promo-input-wrap.is-invalid {
	border-color: #f3c6c6;
	background: #fff7f7;
}
.bd-pay__promo-icon {
	flex: 0 0 14px;
	margin-right: 8px;
}
.bd-pay__promo-input {
	flex: 1 1 auto;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: var(--bd-navy);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0;
	min-width: 0;
}
.bd-pay__promo-input::placeholder {
	color: var(--bd-mute);
	font-weight: 500;
	letter-spacing: 0.04em;
}
.bd-pay__promo-apply {
	flex: 0 0 auto;
	background: transparent;
	border: 0;
	color: var(--bd-navy);
	font-size: 14px;
	font-weight: 600;
	padding: 8px 4px;
	cursor: pointer;
	transition: color 0.12s, opacity 0.12s;
}
.bd-pay__promo-apply:hover {
	color: #002550;
	opacity: 0.85;
}
.bd-pay__promo-apply:disabled {
	opacity: 0.55;
	cursor: default;
}
.bd-pay__promo-error {
	font-size: 12px;
	color: var(--bd-danger);
	line-height: 1.45;
}
/* The transparent Apply is a 34px target at desktop sizing - too small for a
   phone at the counter. */
@media (max-width: 767px) {
	.bd-pay__promo-apply {
		min-height: 44px;
		padding: 8px 10px;
	}
}

.bd-pay__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.bd-pay__cta {
	background: var(--bd-navy);
	color: #fff;
	border: 0;
	/* 44px is the touch-target floor (ui-design.md). 10px padding on a 13.5px
	   font landed at 42.3px - close enough to look right on a desktop and still
	   under the minimum on a phone. */
	min-height: 44px;
	padding: 10px 16px;
	border-radius: var(--bd-radius-sm);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
}
.bd-pay__cta:hover { opacity: 0.92; }
.bd-pay__cta--ghost {
	background: transparent;
	color: var(--bd-navy);
	border: 1px solid var(--bd-line);
}
.bd-pay__cta--ghost:hover {
	background: var(--bd-page-bg);
}
.bd-pay__cta--danger {
	background: transparent;
	color: var(--bd-danger);
	border: 1px solid var(--bd-line);
}
.bd-pay__cta--danger:hover {
	background: #fef2f2;
}
/* One-click in-person payment — indigo to read as the fast card-reader path,
   distinct from the navy catch-all "Add payment". */
.bd-pay__cta--tap {
	background: #4f46e5;
	color: #fff;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.bd-pay__cta--tap:hover { background: #4338ca; opacity: 1; }
.bd-pay__cta--tap svg { flex-shrink: 0; }
.bd-pay__cta:disabled { opacity: 0.6; cursor: default; }

/* Combined-deposit toggle row — sits above the pay buttons / inside the modal
   steps. Subtle bordered card so it reads as an option, not a warning. */
.bd-combine-deposit {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	background: var(--bd-page-bg);
	cursor: pointer;
	margin: 0;
}
.bd-combine-deposit .form-check.form-switch {
	padding-left: 2.6em;
	min-height: auto;
	flex-shrink: 0;
}
.bd-combine-deposit .form-check-input { cursor: pointer; }
.bd-combine-deposit__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
}
.bd-combine-deposit__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--bd-navy);
}
.bd-combine-deposit__sub {
	font-size: 11.5px;
	color: var(--bd-mute);
}
.bd-combine-deposit--disabled {
	cursor: default;
	opacity: 0.75;
}

/* Inline ledger (replaces payment-history modal). Rendered conditionally. */
.bd-pay-ledger {
	margin-top: 6px;
	border-top: 1px dashed var(--bd-line);
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 280px;
	overflow-y: auto;
}
.bd-pay-ledger__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--bd-page-bg);
}
.bd-pay-ledger__row-meta {
	color: var(--bd-mute);
	font-size: 11px;
}
.bd-pay-ledger__row--refund {
	background: #fef2f2;
	color: var(--bd-danger);
}
.bd-pay-ledger__row--voucher {
	background: #eff6ff;
	color: #1e40af;
}

/* Mobile: collapse the rail below the main content & make payment a sticky bar */
@media (max-width: 1279px) {
	.bd-side {
		margin-top: 16px;
	}
}

/* ----- Security deposit collapsible row in the right rail ----- */
.bd-deposit-row {
	border-top: 1px dashed var(--bd-line);
	padding-top: 12px;
	margin-top: 4px;
}
.bd-deposit-row__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	width: 100%;
	color: var(--bd-navy);
}
.bd-deposit-row__head .bd-header-pill {
	font-size: 11px;
}
.bd-deposit-row__detail {
	margin-top: 10px;
	background: var(--bd-page-bg);
	border-radius: var(--bd-radius-sm);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Split-deposit modal rows: on a phone the modal body is ~295px, so the
   select + name + amount can't share one line. Let the row wrap and give the
   amount group the full width. */
@media (max-width: 480px) {
	.bd-split-row {
		flex-wrap: wrap;
	}
	.bd-split-row > .input-group {
		flex: 1 1 100% !important;
	}
}

/* Split deposit — one row per LOT (participant part). Two-line grid: the
   right rail is ~320px, so name+amount share line 1 and pill/meta + actions
   share line 2 (a single flex line crushed names to one letter). */
.bd-lot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	row-gap: 6px;
	column-gap: 10px;
	background: var(--bd-card-bg);
	border: 1px solid var(--bd-line);
	border-radius: var(--bd-radius-sm);
	padding: 8px 10px;
}
.bd-lot__name {
	font-size: 13px;
	font-weight: 500;
	color: #1e293b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.bd-lot__sub {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.bd-lot__meta {
	font-size: 11.5px;
	color: var(--bd-mute);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.bd-lot__error {
	grid-column: 1 / -1;
	font-size: 11.5px;
	color: var(--bd-danger);
	line-height: 1.35;
}
.bd-lot__amount,
.bd-lot__amount-edit {
	font-size: 13px;
	font-weight: 600;
	color: var(--bd-navy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	justify-self: end;
}
.bd-lot__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	justify-self: end;
}
/* Inline deposit-amount edit (add / change the amount). Label sits on its own
   line and the controls sit under it, so a narrow right rail can't squeeze the
   amount field to nothing or stretch Save across the row. */
.bd-deposit-edit {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bd-deposit-edit__label {
	font-size: 12.5px;
	color: var(--bd-mute);
}
.bd-deposit-edit__controls {
	display: flex;
	align-items: center;
	gap: 6px;
}
.bd-deposit-edit__amount {
	flex: 0 0 116px;
	margin: 0 !important;
	flex-wrap: nowrap;
}
/* Beat the global `.input-group > .input-group-text:first-child` (which sets a
   taller 10px padding) so the $ prefix matches the input's 34px exactly. */
.bd-deposit-edit__amount.input-group > .input-group-text:first-child {
	padding: 0 9px;
	height: 34px;
	display: flex;
	align-items: center;
	font-size: 13px;
}
.bd-deposit-edit__amount.input-group > .form-control {
	height: 34px;
	padding: 6px 8px !important;
	margin: 0 !important;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
/* The payment rail stretches its buttons full-width; these sit in a row. */
.bd-deposit-edit__controls .bd-deposit-edit__btn {
	flex: 0 0 auto;
	width: auto;
	height: 34px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

/* Clickable lot name — expands the per-lot activity timeline */
.bd-lot__namebtn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
	cursor: pointer;
	color: var(--bd-navy);
	text-align: left;
}
.bd-lot__timeline {
	grid-column: 1 / -1;
	border-top: 1px dashed var(--bd-line);
	margin-top: 2px;
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.bd-lot__tl-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 11.5px;
	color: var(--bd-mute);
	flex-wrap: wrap;
}
.bd-lot__tl-label {
	color: #1e293b;
	font-weight: 500;
	white-space: nowrap;
}
.bd-lot__tl-amount {
	font-variant-numeric: tabular-nums;
	color: var(--bd-navy);
	font-weight: 600;
	white-space: nowrap;
}
.bd-lot__tl-date {
	white-space: nowrap;
}
.bd-lot__tl-note {
	flex-basis: 100%;
	color: var(--bd-danger);
	line-height: 1.35;
}
.bd-lot__tl-row--failed .bd-lot__tl-label {
	color: var(--bd-danger);
}

/* ----- Visual reskin for kept legacy partials (light touch) ----- */
.bd-card .table-bordered {
	border-color: var(--bd-line);
	border-radius: var(--bd-radius-sm);
	overflow: hidden;
}
.bd-card .table-bordered > :not(caption) > * > * {
	border-color: var(--bd-line);
}
.bd-card .table-bordered thead th {
	background: var(--bd-page-bg);
	color: var(--bd-mute);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ----- Undo toast (tags / notes) ----- */
.bd-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--bd-navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	z-index: 1000;
}
.bd-toast__undo {
	background: transparent;
	border: 0;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

/* ----- Mobile: ensure interactive targets are reachable ----- */
@media (pointer: coarse) {
	.bd-tag-chip__remove,
	.bd-note__remove,
	.bd-card__action,
	.bd-pay__cta,
	.bd-cta-primary,
	.bd-actions-trigger {
		min-height: 36px;
	}
}

/* ====== Booking checklists card (v2 run sheets) ====== */
.bd-checklist-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bd-checklist-row:hover {
	border-color: #003264;
	box-shadow: 0 2px 8px rgba(0, 50, 100, 0.08);
}
.bd-checklist-row + .bd-checklist-row {
	margin-top: 8px;
}
.bd-checklist-row__name {
	font-size: 14px;
	font-weight: 600;
	color: #303233;
}
.bd-checklist-row__line {
	font-size: 12px;
	color: #6d87a1;
}
.bd-checklist-row__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.bd-checklist-section-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}
.bd-checklist-section-chip--done {
	color: #15803d;
	background: #dcfce7;
}
.bd-checklist-section-chip--failed {
	color: #b91c1c;
	background: #fee2e2;
}
.bd-checklist-row__progress {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}
/* Drawer */
.bd-runsheet-section {
	border: 1px solid #eaeaea;
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}
.bd-runsheet-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	background: #f8fafc;
	cursor: pointer;
}
.bd-runsheet-section__name {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
}
.bd-runsheet-gate-badge {
	font-size: 10.5px;
	font-weight: 500;
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
	background: #eef2ff;
	color: #3b5bdb;
}
.bd-runsheet-gate-badge--return {
	background: #fef3c7;
	color: #92400e;
}
.bd-runsheet-gate-badge--reminder {
	background: #f1f5f9;
	color: #64748b;
}
.bd-runsheet-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
	border-top: 1px solid #f1f5f9;
}
.bd-runsheet-item__label {
	font-size: 13px;
	color: #3a3a3a;
}
.bd-runsheet-item__label--done {
	color: #16a34a;
}

/* ==========================================================================
   Consents on the participants card (#3573) — the row's status pill and
   chase come from the shared .ct-* consent cell; this covers the piece
   unique to the booking page: the inline per-participant timeline panel.
   (The header's tracker link was removed in #3586 — its styles went with it.)
   ========================================================================== */
.bd-consent-tl {
	margin-top: 10px;
	padding: 12px 14px;
	background: #f7f9fb;
	border-radius: 10px;
}

/* ==========================================================================
   Actions menu — size to its contents.
   The shared `.dropdown .menu-items` box caps at 200px and scrolls, which on
   a short command list just reads as a cut-off menu (no visible scrollbar,
   no hint there is more below). This is a fixed handful of commands, so show
   them all; the viewport cap is only a fallback on very short screens.
   Selector depth matches style.css's `.dropdown .dropdown-menu .menu-items`
   (0,3,0) so it wins on the cascade without !important.
   ========================================================================== */
.dropdown .dropdown-menu.bd-actions-menu .menu-items {
	max-height: min(78vh, 640px);
	overflow-y: auto;
}

/* ==== css/product-detail.css ==== */
/* ==========================================================================
   Product Detail Redesign (Phase 1: chrome shell + hero strip + tab strip)
   --------------------------------------------------------------------------
   Visual restyle of /rentals/products/detail/{id}. Phase 1 introduces:
     - New header partial (back, breadcrumb, ID pill, action icons, ⋯ menu)
     - Hero metric strip (thumbnail + 6 tiles + Check availability + Book now)
     - New tab strip (7 tabs with badges + per-tab top-right action button)
     - Warning banner reskin (Inventory not configured / Pricing not configured)
   Phase 2-8 fill in tab body content. See docs/PRODUCT_DETAIL_REDESIGN_PLAN.md.
   All styles namespaced under .pd- to avoid collision with existing styles.
   ========================================================================== */

/* ----- Tokens (mirrors booking-detail.css / pos-redesign.css) ----- */
:root {
	--pd-navy: #003264;
	--pd-navy-700: #14457A;
	--pd-line: #eef0f4;
	--pd-line-strong: #dfe3e8;
	--pd-card-bg: #ffffff;
	--pd-page-bg: #f6f7f9;
	--pd-soft-bg: #f7f7f7;
	--pd-ink: #303233;
	--pd-ink-2: #444444;
	--pd-mute: #6d87a1;
	--pd-mute-2: #94a3b8;
	--pd-success: #16a34a;
	--pd-success-soft: #d8f1e4;
	--pd-warn: #d97706;
	--pd-warn-soft: #fff4e0;
	--pd-danger: #dc2626;
	--pd-danger-soft: #fde2dd;
	--pd-info: #00a3fa;
	--pd-info-soft: #bcdced;
	--pd-dash: #4a2fc9;
	--pd-dash-soft: #f4f0fe;
	--pd-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--pd-radius: 12px;
	--pd-radius-sm: 8px;
	--pd-radius-pill: 999px;
}

/* ----- Page shell ----- */
.pd-page {
	background: var(--pd-page-bg);
	min-height: 100%;
}

.pd-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.pd-shell {
		padding: 16px 16px 80px;
	}
}

/* ----- Header row -----
   Mirrors `.bd-header` from booking-detail.css. Breadcrumb sits inline with
   the title; right side hosts Ask Dash pill, copy/open icons, and ⋯ menu. */
.pd-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 32px;
	border-bottom: 1px solid var(--pd-line);
	background: var(--pd-card-bg);
}

.pd-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.pd-breadcrumb {
	font-size: 13px;
	color: var(--pd-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pd-breadcrumb a {
	color: var(--pd-mute);
	text-decoration: none;
}

.pd-breadcrumb a:hover {
	color: var(--pd-navy);
	text-decoration: underline;
}

.pd-breadcrumb .pd-breadcrumb-sep {
	color: var(--pd-mute-2);
}

.pd-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--pd-ink);
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 480px;
}

.pd-id-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--pd-mute);
	background: var(--pd-card-bg);
	white-space: nowrap;
}

.pd-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pd-ask-dash-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--pd-radius-pill);
	background: var(--pd-dash-soft);
	color: var(--pd-dash);
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms;
}

.pd-ask-dash-btn:hover {
	background: #ebe4fc;
}

.pd-ask-dash-btn .pd-hex {
	width: 14px;
	height: 14px;
	background: linear-gradient(135deg, #4a2fc9 0%, #6b4ef5 100%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	display: inline-block;
}

.pd-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--pd-radius-sm);
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-line-strong);
	color: var(--pd-mute);
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}

.pd-icon-btn:hover {
	background: var(--pd-soft-bg);
	border-color: var(--pd-mute-2);
	color: var(--pd-ink);
}

.pd-icon-btn img {
	width: 16px;
	height: 16px;
}

/* WCAG 2.1 SC 2.5.5 (AAA) / SC 2.5.8 (AA) — minimum 44x44 touch target on
   handheld viewports. Desktop keeps the more compact 34x34 chrome. */
@media (max-width: 575px) {
	.pd-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ----- ⋯ Menu dropdown ----- */
.pd-menu-wrap {
	position: relative;
}

.pd-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	padding: 6px 0;
	z-index: 1050;
}

.pd-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 13px;
	color: var(--pd-ink);
	cursor: pointer;
	transition: background 80ms;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	text-decoration: none;
}

.pd-menu-item:hover {
	background: var(--pd-soft-bg);
	color: var(--pd-ink);
}

.pd-menu-item.danger {
	color: var(--pd-danger);
}

.pd-menu-item.danger:hover {
	background: var(--pd-danger-soft);
}

.pd-menu-item img,
.pd-menu-item i {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	flex-shrink: 0;
}

.pd-menu-sep {
	height: 1px;
	background: var(--pd-line);
	margin: 4px 0;
}

/* ----- Warning banners (Inventory / Pricing not configured) ----- */
.pd-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--pd-radius-sm);
	background: var(--pd-warn-soft);
	border: 1px solid #f0c97f;
	color: #7a4a00;
	margin-bottom: 12px;
	font-size: 13px;
}

.pd-banner i {
	color: var(--pd-warn);
	flex-shrink: 0;
	margin-top: 2px;
}

.pd-banner strong {
	display: block;
	margin-bottom: 2px;
	color: #5a3700;
}

.pd-banner a {
	display: inline;
	color: var(--pd-navy);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.pd-banner a:hover {
	text-decoration: underline;
}

/* ----- Hero metric strip ----- */
.pd-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-card-shadow);
	margin-bottom: 16px;
}

.pd-hero-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--pd-radius-sm);
	background: var(--pd-soft-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid var(--pd-line);
}

.pd-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-hero-thumb-placeholder {
	color: var(--pd-mute-2);
}

.pd-hero-tiles {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0;
}

.pd-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pd-tile-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--pd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pd-tile-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--pd-ink);
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pd-tile-value .pd-tile-mute {
	font-weight: 500;
	color: var(--pd-mute);
	font-size: 12px;
}

.pd-tile-value a {
	color: var(--pd-navy);
	text-decoration: none;
	font-weight: 600;
}

.pd-tile-value a:hover {
	text-decoration: underline;
}

/* "as at HH:MM" disclaimer under point-in-time tiles (Inventory). */
.pd-tile-asof {
	font-size: 11px;
	color: var(--pd-mute);
	font-weight: 500;
	margin-top: 3px;
	white-space: nowrap;
}

/* Calendar icon on Check availability — uses existing site icon
   (calendar-v1.svg) for visual consistency with "Filter by date" pill on
   the bookings listing page. */
.pd-btn .pd-btn-icon-img {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: inline-block;
}

.pd-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pd-mute-2);
	margin-right: 6px;
	vertical-align: middle;
}

.pd-status-dot.active {
	background: var(--pd-success);
}

.pd-status-dot.disabled {
	background: var(--pd-mute-2);
}

.pd-status-dot.draft {
	background: var(--pd-warn);
}

/* Inventory bar (compact viz). */
.pd-inv-bar {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pd-inv-bar-track {
	width: 96px;
	height: 6px;
	background: var(--pd-line);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
}

.pd-inv-bar-fill {
	height: 100%;
}

.pd-inv-bar-fill.avail {
	background: var(--pd-success);
}

.pd-inv-bar-fill.resv {
	background: var(--pd-warn);
}

.pd-inv-bar-fill.out {
	background: var(--pd-danger);
}

.pd-inv-bar-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink);
	white-space: nowrap;
}

.pd-inv-bar-text .pd-tile-mute {
	font-weight: 500;
}

.pd-hero-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.pd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--pd-radius-sm);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
	text-decoration: none;
	white-space: nowrap;
}

.pd-btn-primary {
	background: var(--pd-navy);
	color: #fff;
}

.pd-btn-primary:hover {
	background: var(--pd-navy-700);
	color: #fff;
}

.pd-btn-secondary {
	background: var(--pd-card-bg);
	color: var(--pd-ink);
	border-color: var(--pd-line-strong);
}

.pd-btn-secondary:hover {
	background: var(--pd-soft-bg);
	border-color: var(--pd-mute-2);
}

.pd-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

/* Inline-SVG button icons. Use stroke="currentColor" on the SVG so the icon
   inherits the button's text color — but secondary buttons get navy icons
   instead of dark gray to match the brand (per design feedback 2026-05-06). */
.pd-btn .pd-icon-svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-block;
}

.pd-btn-secondary .pd-icon-svg {
	color: var(--pd-navy);
}

.pd-btn-primary .pd-icon-svg {
	color: #fff;
}

/* Header icon-button SVGs (copy / link / ⋯). Same trick — stroke
   currentColor + color from the button. */
.pd-icon-btn .pd-icon-svg {
	width: 16px;
	height: 16px;
	color: var(--pd-mute);
	flex-shrink: 0;
}

.pd-icon-btn:hover .pd-icon-svg {
	color: var(--pd-ink);
}

/* Banner icon stays orange (warning context). */
.pd-banner .pd-icon-svg {
	width: 18px;
	height: 18px;
	color: var(--pd-warn);
	flex-shrink: 0;
	margin-top: 1px;
}

/* ----- Tab strip ----- */
.pd-tabs-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--pd-line);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.pd-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.pd-tabs::-webkit-scrollbar {
	display: none;
}

.pd-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pd-mute);
	cursor: pointer;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color 120ms, border-color 120ms;
}

.pd-tab:hover {
	color: var(--pd-ink);
}

.pd-tab.active {
	color: var(--pd-navy);
	border-bottom-color: var(--pd-navy);
	font-weight: 600;
}

.pd-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--pd-radius-pill);
	background: var(--pd-line);
	color: var(--pd-mute);
	font-size: 11px;
	font-weight: 600;
}

.pd-tab.active .pd-tab-badge {
	background: var(--pd-navy);
	color: #fff;
}

.pd-tab-badge.alert {
	background: var(--pd-danger);
	color: #fff;
}

.pd-tab.active .pd-tab-badge.alert {
	background: var(--pd-danger);
	color: #fff;
}

/* Hide Alpine x-show targets until Alpine hydrates so tab bodies
   don't flash on the wrong tab during initial render. */
[x-cloak] {
	display: none !important;
}

/* ============================================================
   Phase 2a — Details Tab card chrome (visual reskin only)
   --------------------------------------------------------------
   Two-column grid (~62/38) with reusable card primitives. Cards
   are read-only in 2a; inline-edit comes in 2b-2c. See
   docs/PRODUCT_DETAIL_REDESIGN_PLAN.md §8.
   ============================================================ */

.pd-details-grid {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	gap: 16px;
	margin-top: 16px;
}

.pd-card {
	background: var(--pd-card-bg);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	box-shadow: var(--pd-card-shadow);
	overflow: hidden;
}

.pd-card + .pd-card {
	margin-top: 16px;
}

/* The drag-reorder <script> tag breaks the .pd-card + .pd-card adjacency
   before this card, so give it the same top margin explicitly. */
.pd-cb-card {
	margin-top: 16px;
}

.pd-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--pd-line);
}

.pd-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pd-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.pd-card-title-meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--pd-mute);
}

.pd-card-body {
	padding: 18px;
}

.pd-card-body-tight {
	padding: 12px 18px;
}

/* Read-only label/value rows used inside Behaviors / Tracking cards. */
.pd-detail-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pd-line);
}

.pd-detail-row:last-child {
	border-bottom: none;
}

.pd-detail-row-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pd-detail-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--pd-ink);
}

.pd-detail-sublabel {
	font-size: 12px;
	color: var(--pd-mute);
}

.pd-detail-value {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Stacked variant — for wide controls (e.g. a segmented pill): label runs
   full width, control sits on its own line beneath. */
.pd-detail-row-stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.pd-detail-row-stacked .pd-detail-value {
	justify-content: flex-start;
}

.pd-detail-meta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--pd-mute);
	line-height: 1.5;
}

.pd-detail-meta strong {
	color: var(--pd-ink-2);
	font-weight: 600;
}

/* iOS-style toggle switch used in the Behaviors card. The button is fully
   keyboard-focusable; on/off is driven by the .on class set from the server. */
.pd-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	background: #cbd5e1;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
	padding: 0;
}

.pd-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
	transition: left 0.15s ease;
}

.pd-switch.on {
	background: var(--pd-navy);
}

.pd-switch.on::after {
	left: 18px;
}

.pd-switch:focus-visible {
	outline: 2px solid var(--pd-navy);
	outline-offset: 2px;
}

.pd-switch:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Segmented control for the Tracking card. */
.pd-segmented {
	display: inline-flex;
	background: var(--pd-soft-bg);
	border-radius: var(--pd-radius-sm);
	padding: 3px;
	gap: 2px;
}

.pd-segmented-btn {
	padding: 6px 14px;
	border-radius: 6px;
	background: transparent;
	border: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--pd-mute);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pd-segmented-btn:hover:not(.active):not(:disabled) {
	color: var(--pd-ink);
}

.pd-segmented-btn.active {
	background: #fff;
	color: var(--pd-navy);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.pd-segmented-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pd-segmented-help {
	margin-top: 8px;
	font-size: 12px;
	color: var(--pd-mute);
	line-height: 1.5;
}

.pd-segmented-disabled-hint {
	margin-top: 8px;
	font-size: 12px;
	color: var(--pd-mute);
	font-style: italic;
}

/* Status pill matches existing status-active / status-disable colors but in
   the new card chrome's compact style. */
.pd-status {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--pd-radius-pill);
	white-space: nowrap;
}

.pd-status.on {
	background: var(--pd-success-soft);
	color: var(--pd-success);
}

.pd-status.off {
	background: #eef0f4;
	color: var(--pd-mute);
}

.pd-status.warn {
	background: var(--pd-warn-soft);
	color: var(--pd-warn);
}

/* Description card — preserves the existing "See More / See Less" affordance. */
.pd-desc-block + .pd-desc-block {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--pd-line);
}

.pd-desc-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.pd-desc-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pd-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pd-desc-error {
	margin-top: 8px;
	font-size: 12px;
	color: var(--pd-danger);
}

.pd-desc-sublabel {
	font-size: 12px;
	font-weight: 500;
	color: var(--pd-mute);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 6px;
}

/* Widget multilingual — language pills + Edit grouped on the right of the
   Description card header. Compact segmented buttons so the header keeps
   its standard height. */
.pd-desc-lang-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pd-desc-lang-group .pd-segmented-btn {
	padding: 4px 10px;
	font-size: 12px;
}

.pd-desc-textarea {
	width: 100%;
	min-height: 60px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pd-ink);
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pd-desc-textarea:focus {
	outline: none;
	border-color: var(--pd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.pd-desc-help {
	margin-top: 6px;
	font-size: 12px;
	color: var(--pd-mute);
}

/* Quill host inside the inline edit Description card. Height matches the
   modal's Quill so the visual feels familiar; toolbar inherits Quill's snow
   theme styles already loaded by detail.blade.php. */
.pd-quill-host {
	min-height: 160px;
	background: #fff;
}

.pd-quill-host .ql-toolbar.ql-snow,
.pd-quill-host + .ql-toolbar.ql-snow {
	border-top-left-radius: var(--pd-radius-sm);
	border-top-right-radius: var(--pd-radius-sm);
}

.pd-quill-host.ql-container.ql-snow {
	border-bottom-left-radius: var(--pd-radius-sm);
	border-bottom-right-radius: var(--pd-radius-sm);
	min-height: 160px;
}

.pd-quill-host .ql-editor {
	min-height: 160px;
	font-size: 14px;
	line-height: 1.55;
}

/* Save / Cancel row inside the Description card edit mode. */
.pd-desc-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--pd-line);
}

/* Phase 2d — Photos card 5-slot grid.
   Filled slot = image; "+ slot" = dashed upload trigger; empty = static
   placeholder. All slots are square via aspect-ratio so the grid stays
   visually balanced even when photos have varied aspect ratios. */
.pd-photo-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.pd-photo-slot {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
	background: var(--pd-soft-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pd-photo-slot-filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pd-photo-slot-filled.is-default {
	box-shadow: inset 0 0 0 2px var(--pd-success);
}

.pd-photo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 6px;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 60%);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.pd-photo-slot-filled:hover .pd-photo-overlay,
.pd-photo-slot-filled:focus-within .pd-photo-overlay {
	opacity: 1;
}

.pd-photo-slot-filled.is-default .pd-photo-overlay {
	opacity: 1;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 60%);
}

/* Icon-only circles (crop / star) — text labels don't fit the small slots;
   the title attribute carries the label. */
.pd-photo-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #fff;
	background: rgba(15, 23, 42, 0.6);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pd-photo-action:hover {
	background: rgba(15, 23, 42, 0.8);
}

.pd-photo-action-static {
	background: var(--pd-success);
	cursor: default;
}

.pd-photo-action-static:hover {
	background: var(--pd-success);
}

.pd-photo-remove {
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	background: rgba(220, 38, 38, 0.85);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.pd-photo-remove:hover {
	background: var(--pd-danger);
}

.pd-photo-slot-add {
	background: transparent;
	border: 2px dashed var(--pd-navy);
	color: var(--pd-navy);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	padding: 0;
}

.pd-photo-slot-add:hover {
	background: rgba(0, 50, 100, 0.04);
}

.pd-photo-slot-add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pd-photo-add-icon {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

.pd-photo-slot-empty {
	background: transparent;
	border: 1.5px dashed var(--pd-line-strong);
	color: var(--pd-line-strong);
}

.pd-photo-empty-icon {
	color: var(--pd-line-strong);
}

/* Highlight the Photos card while a file is dragged over it for upload. */
.pd-photos-card-dragover {
	outline: 2px dashed var(--pd-navy);
	outline-offset: 4px;
	background: rgba(0, 50, 100, 0.03);
}

.pd-photos-card-dragover .pd-photo-slot-add {
	background: rgba(0, 50, 100, 0.08);
	border-color: var(--pd-navy);
}

@media (max-width: 575px) {
	.pd-photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Card header action buttons — small ghost buttons that sit on the right of
   pd-card-header. Used for "Edit", "Manage", "Generate". */
.pd-card-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--pd-mute);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pd-card-action:hover:not(:disabled) {
	background: var(--pd-soft-bg);
	color: var(--pd-navy);
	border-color: var(--pd-navy);
}

.pd-card-action:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pd-card-action-icon {
	width: 12px;
	height: 12px;
	color: currentColor;
}

.pd-card-action-ai .pd-ai-icon {
	font-size: 12px;
}

.pd-spinner {
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--pd-mute);
	border-top-color: transparent;
	border-radius: 50%;
	animation: pd-spin 0.6s linear infinite;
}

@keyframes pd-spin {
	to { transform: rotate(360deg); }
}

.pd-desc-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pd-ink);
}

.pd-desc-body p:last-child {
	margin-bottom: 0;
}

.pd-desc-toggle {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pd-navy);
	cursor: pointer;
}

.pd-desc-toggle:hover {
	color: var(--pd-navy-700);
}

.pd-desc-empty {
	color: var(--pd-mute);
	font-style: italic;
}

/* Photos card — reuses existing <x-images.display-images> underneath. */
.pd-photos-card .pd-card-body {
	padding: 16px 18px;
}

/* Custom Fields — flex grid of label/value pairs. */
.pd-cf-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.pd-cf-item {
	min-width: 150px;
}

.pd-cf-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--pd-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.pd-cf-value {
	font-size: 14px;
	color: var(--pd-ink);
}

/* Barcodes card — partial emits pd-card-header + pd-card-body directly inside
   .pd-card. Inline-style rules keep the SVG preview hover-to-reveal download
   affordance. */
.pd-barcodes-help {
	font-size: 12px;
	color: var(--pd-mute);
	margin-bottom: 12px;
}

.pd-link {
	display: inline;
	color: var(--pd-navy);
	font-weight: 500;
	text-decoration: none;
}

.pd-link:hover {
	text-decoration: underline;
}

.pd-barcodes-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 8px 8px;
	text-align: center;
}

.pd-barcodes-empty-icon {
	width: 40px;
	height: 40px;
	opacity: 0.3;
}

.pd-barcodes-empty-text {
	margin: 0;
	font-size: 13px;
	color: var(--pd-mute);
}

.pd-barcodes-list {
	display: flex;
	flex-direction: column;
}

.pd-barcode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}

.pd-barcode-row.has-divider {
	border-bottom: 1px solid var(--pd-line);
}

.pd-barcode-row-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.pd-barcode-preview {
	position: relative;
	width: 56px;
	min-width: 56px;
	height: 56px;
	background: var(--pd-soft-bg);
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
}

.pd-barcode-preview .barcode-preview {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.pd-barcode-preview .barcode-download-btn {
	position: absolute;
	bottom: 2px;
	left: 2px;
	background: #fff;
	border-radius: 4px;
	padding: 1px;
	line-height: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.pd-barcode-meta {
	min-width: 0;
}

.pd-barcode-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pd-barcode-type {
	font-size: 11px;
	color: var(--pd-mute);
	margin-top: 2px;
}

.pd-barcode-auto-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	background: #eef0f4;
	color: var(--pd-mute);
	border-radius: 4px;
}

.pd-barcode-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

/* Barcode row action buttons — large hit-target with a near-flush icon so
   the visual gap between adjacent icons is small. Buttons are 40x40 with a
   24x24 icon (only 8px padding each side) and no extra margin between them,
   giving ~16px icon-to-icon. The earlier `.pd-icon-btn` at ~line 162
   (34x34 bordered card-action variant) is intentionally re-scoped here. */
.pd-barcode-actions .pd-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--pd-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0;
	color: var(--pd-mute);
}

.pd-barcode-actions .pd-icon-btn + .pd-icon-btn {
	margin-left: -10px;
}

.pd-barcode-actions .pd-icon-btn:hover {
	background: var(--pd-soft-bg);
}

.pd-barcode-actions .pd-icon-btn img {
	width: 24px;
	height: 24px;
}

/* ============================================================
   Phase 3-7 — Tab body shared primitives
   ============================================================ */

.pd-tab-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.pd-tab-body > .pd-card + .pd-card {
	margin-top: 0;
}

.pd-card-body-flat {
	padding: 0;
}

.pd-card-body-flat > * {
	margin: 0 !important;
}

/* Empty-state used when a tab requires a behavior to be enabled first
   (Variations off, Inventory off). Matches the design system "soft prompt". */
.pd-empty-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 16px;
	text-align: center;
}

.pd-empty-tab-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--pd-ink);
}

.pd-empty-tab-desc {
	font-size: 13px;
	color: var(--pd-mute);
	max-width: 420px;
}

/* Narrow label-left / toggle-right row sitting inside an empty-tab block.
   Lets us show "Turn on this thing" without an entire centered button row. */
.pd-empty-tab-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 280px;
	margin-top: 4px;
	padding: 10px 14px;
	background: var(--pd-soft-bg);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-sm);
	text-align: left;
}

.pd-empty-tab-toggle .pd-detail-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--pd-ink);
}

.pd-empty-inline {
	padding: 16px 4px;
	font-size: 13px;
	color: var(--pd-mute);
}

/* Chip primitive used by Variations + Embed segmented control. */
.pd-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	background: var(--pd-navy);
	color: #fff;
	border-radius: var(--pd-radius-pill);
}

.pd-chip.pd-chip-mute {
	background: var(--pd-soft-bg);
	color: var(--pd-ink-2);
	font-weight: 500;
}

.pd-chip.pd-chip-mute strong {
	color: var(--pd-navy);
	font-weight: 600;
}

.pd-chip-empty {
	font-size: 12px;
	color: var(--pd-mute);
	font-style: italic;
}

/* Phase 3a — Variation property rows */
.pd-variation-prop-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pd-line);
}

.pd-variation-prop-row:last-child {
	border-bottom: none;
}

.pd-variation-prop-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink);
	min-width: 100px;
}

.pd-variation-prop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.pd-variation-prop-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

/* Variation property action buttons match the barcode-row pattern: 40x40 hit
   target, 24x24 icon, transparent background, slight overlap so the visual
   gap stays tight (~16px icon-to-icon). */
.pd-variation-prop-actions .pd-icon-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--pd-radius-sm);
	padding: 0;
	color: var(--pd-mute);
}

.pd-variation-prop-actions .pd-icon-btn + .pd-icon-btn {
	margin-left: -10px;
}

.pd-variation-prop-actions .pd-icon-btn:hover {
	background: var(--pd-soft-bg);
}

.pd-variation-prop-actions .pd-icon-btn img {
	width: 24px;
	height: 24px;
}

/* Phase 3a — Variation list rows */
.pd-variation-list {
	display: flex;
	flex-direction: column;
}

.pd-variation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pd-line);
}

.pd-variation-row:last-child {
	border-bottom: none;
}

.pd-variation-row-main {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}

.pd-variation-thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--pd-radius-sm);
	background: var(--pd-soft-bg);
	color: var(--pd-mute-2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.pd-variation-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pd-variation-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pd-variation-id-sku {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.pd-variation-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink);
}

.pd-variation-id {
	font-size: 11px;
	color: var(--pd-mute);
}

.pd-variation-desc {
	font-size: 12px;
	color: var(--pd-mute);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pd-variation-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.pd-variation-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

.pd-variation-actions .pd-icon-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--pd-radius-sm);
	padding: 0;
	color: var(--pd-mute);
}

.pd-variation-actions .pd-icon-btn + .pd-icon-btn {
	margin-left: -10px;
}

.pd-variation-actions .pd-icon-btn:hover {
	background: var(--pd-soft-bg);
}

.pd-variation-actions .pd-icon-btn img {
	width: 24px;
	height: 24px;
}

/* Phase 7 — Embed tab */
.pd-embed-snippet {
	margin-top: 16px;
}

.pd-embed-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--pd-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.pd-embed-textarea {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	color: var(--pd-ink-2);
	background: var(--pd-soft-bg);
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-sm);
	padding: 12px 110px 12px 14px;
	min-height: 70px;
	resize: vertical;
	line-height: 1.5;
}

.pd-embed-copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	font-size: 12px;
	font-weight: 500;
	color: var(--pd-navy);
	cursor: pointer;
	transition: background 0.15s ease;
}

.pd-embed-copy-btn:hover {
	background: var(--pd-soft-bg);
}

.pd-embed-copy-btn img {
	width: 12px;
	height: 12px;
}

.pd-embed-preview {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius);
	overflow: hidden;
	background: var(--pd-soft-bg);
	display: flex;
	justify-content: center;
}

.pd-embed-preview iframe {
	width: 100%;
	height: 700px;
	background: #fff;
	border: none;
	transition: max-width 0.2s ease;
}

.pd-embed-preview.is-mobile iframe {
	max-width: 390px;
	box-shadow: 0 0 0 1px var(--pd-line-strong);
}

/* Bookings card uses a flush body so the existing table reaches the edge. */
.pd-bookings-card .table-responsive,
.pd-bookings-card table {
	margin: 0;
}

/* ----- Mobile responsive ----- */
@media (max-width: 991px) {
	.pd-details-grid {
		grid-template-columns: 1fr;
	}

	.pd-header {
		padding: 12px 16px;
	}

	.pd-title {
		font-size: 17px;
		max-width: 100%;
	}

	.pd-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.pd-hero-tiles {
		gap: 16px 24px;
	}

	.pd-hero-actions {
		width: 100%;
	}

	.pd-hero-actions .pd-btn {
		flex: 1;
		justify-content: center;
	}
}

@media (max-width: 575px) {
	.pd-header {
		gap: 8px;
	}

	.pd-header-left {
		flex: 1 1 100%;
	}

	.pd-header-right {
		flex: 1 1 100%;
		justify-content: flex-end;
	}

	.pd-ask-dash-btn span:not(.pd-hex) {
		display: none;
	}

	.pd-tile-label {
		font-size: 10px;
	}
}

/* ===== Dash AI band collapsible toggle ===================================
   Insight panel is always shown (passive summary). The chevron sits inline
   to its right and only collapses the ask input + suggestion chips beneath.
   ========================================================================= */
.pd-dash-ai-band {
	margin-top: 0.5rem;
}

.pd-dash-ai-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.pd-dash-ai-insight {
	flex: 1;
	min-width: 0;
}

/* The insight panel's `.dash-card` carries `mb-3` (~16px). We want the
   chevron to sit visually centered on the panel's first content row, which
   sits roughly 10–12px down from the panel's top edge (panel padding). */
.pd-dash-ai-chevron {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 4px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--pd-dash-soft);
	color: var(--pd-dash);
	cursor: pointer;
	transition: background 0.15s ease;
}

.pd-dash-ai-chevron:hover {
	background: #ebe4fb;
}

.pd-dash-ai-chevron:focus-visible {
	outline: 2px solid var(--pd-dash);
	outline-offset: 2px;
}

.pd-dash-ai-chevron svg {
	transition: transform 200ms ease;
}

/* ===== Product settings — inline value+unit field pair ===================
   Used by Buffer time and Rental period limits when their toggle is ON.
   Number input + dropdown side by side, matching the modal's field shape.
   ========================================================================= */
.pd-inline-fields-wrap {
	border-bottom: 1px solid var(--pd-line);
}

/* When the wrap holds a static "view" line, render it as a row with the
   summary on the left and the Edit pencil on the right. */
.pd-inline-static {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px 12px;
}

.pd-inline-static--block {
	padding: 8px 0 12px;
}

.pd-inline-static-summary {
	font-size: 13px;
	color: var(--pd-ink);
	font-weight: 500;
}

.pd-inline-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	color: var(--pd-mute);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pd-inline-edit-btn:hover {
	background: var(--pd-soft-bg);
	color: var(--pd-ink);
	border-color: var(--pd-mute-2);
}

.pd-inline-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 8px 16px 16px;
	margin-top: -4px;
}

/* When .pd-inline-fields lives inside .pd-inline-fields-wrap (the new
   view/edit container), the wrap already paints the bottom border so the
   inner grid shouldn't double it. */
.pd-inline-fields-wrap > .pd-inline-fields {
	border-bottom: none;
}

.pd-inline-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-inline-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink);
	margin: 0;
}

.pd-inline-value-unit {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 6px;
}

.pd-inline-input {
	width: 100%;
	height: 36px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--pd-ink);
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

.pd-inline-input:focus {
	outline: none;
	border-color: var(--pd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.1);
}

.pd-inline-input:disabled {
	background: #f7f7f7;
	cursor: not-allowed;
}

.pd-inline-unit-dropdown {
	position: relative;
}

.pd-inline-unit-button {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--pd-ink);
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
}

.pd-inline-unit-button:hover:not(:disabled) {
	border-color: var(--pd-navy);
}

.pd-inline-unit-button:disabled {
	background: #f7f7f7;
	cursor: not-allowed;
	opacity: 0.6;
}

.pd-inline-unit-chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.pd-inline-unit-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.pd-inline-unit-item {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--pd-ink);
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
}

.pd-inline-unit-item:hover {
	background: var(--pd-soft-bg);
}

/* Helper text shown beneath a toggle that's locked off because changing it
   would orphan dependent data (variations exist, inventory rows exist).

   The previous .pd-detail-row already paints a bottom border, so the hint
   needs to sit BELOW that line — generous top padding (12px) keeps a clear
   visual gap so the divider and text never read as overlapping. */
.pd-toggle-lock-hint {
	padding: 12px 16px 14px;
	font-size: 12px;
	color: var(--pd-mute);
	font-style: italic;
	line-height: 1.5;
}

/* ===== Inventory tracking — modal-style radio rows ======================= */
.pd-inventory-tracking-block {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--pd-line);
}

.pd-inventory-tracking-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--pd-ink);
	margin-bottom: 4px;
}

.pd-inventory-tracking-note {
	font-size: 12px;
	color: var(--pd-mute);
	margin-bottom: 10px;
}

.pd-radio-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}

.pd-radio-row + .pd-radio-row {
	border-top: 1px solid var(--pd-line);
}

.pd-radio-input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--pd-navy);
	cursor: pointer;
	flex-shrink: 0;
}

.pd-radio-input:disabled {
	cursor: not-allowed;
}

.pd-radio-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pd-radio-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--pd-ink);
	line-height: 1.3;
}

.pd-radio-help {
	font-size: 12px;
	color: var(--pd-mute);
	line-height: 1.4;
}

/* ===== Additional customer information card ==============================
   The embedded content-blocks editor brings its own padding/styling. The
   surrounding .pd-card just provides the white box; remove default padding
   so the editor's `season-fields p-3` boundary visually owns the inside.
   ========================================================================= */
/* Inside the .pd-card the editor renders with wrapper=false, so its first
   block has no top margin — let the .pd-card-body padding own the spacing. */
.pd-cb-mount > .content-blocks-editor-body > div > .mt-4:first-child {
	margin-top: 0 !important;
}

/* ============================================================
   Phase 5 — Bookings tab filter strip
   White bar attached flush above the booking table inside the
   .pd-bookings-card. Reuses POS pill chrome (pos-pill,
   pos-pill-dropdown, pos-pill-button, pos-pill-menu) defined in
   pos-redesign.css so the styling matches the POS / Bookings page
   1:1. The filter strip needs no border on the bottom — the table
   underneath supplies its own top border.
   ============================================================ */
.pd-bookings-card .pd-bookings-filter-strip {
	background: #ffffff;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	overflow: visible;
}

.pd-bookings-card .pd-bookings-filter-strip .pos-filter-strip {
	margin-bottom: 0;
	flex-wrap: wrap;
	gap: 8px;
}

.pd-bookings-card .pd-bookings-filter-strip .pos-pill-menu {
	z-index: 50;
}

.pd-bookings-filter-spacer {
	flex: 1 1 auto;
	min-width: 0;
}

.pd-bookings-tag-search {
	padding: 6px 8px 8px 8px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 4px;
}

.pd-bookings-tag-search input {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	color: #0f172a;
	outline: none;
}

.pd-bookings-tag-search input:focus {
	border-color: #003264;
}

.pd-bookings-active-filter {
	padding: 8px 16px 0 16px;
	font-size: 12px;
	color: #6b7280;
}

.pd-bookings-export-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--pos-pill-border, #DFE3E8);
	border-radius: 999px;
	padding: 0 14px;
	min-height: 36px;
	color: var(--pos-text, #003264);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.12s, background-color 0.12s;
}

.pd-bookings-export-btn:hover {
	border-color: var(--pos-text, #003264);
	background: var(--pos-pill-active-bg, #EBF0F5);
}

.pd-bookings-export-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pd-bookings-export-btn svg {
	stroke: currentColor;
	opacity: 0.8;
}

@media (max-width: 768px) {
	.pd-bookings-card .pd-bookings-filter-strip {
		padding: 10px 12px;
	}

	.pd-bookings-card .pd-bookings-filter-strip .pos-filter-strip {
		gap: 6px;
	}

	.pd-bookings-filter-spacer {
		display: none;
	}

	.pd-bookings-export-btn {
		margin-left: auto;
	}
}

/* ============================================================
   Phase 4 — Pricing tab (inline-edit)
   Two-column grid (left: editable price structure card with segmented
   Applies + Structure controls and base/schedule inputs; right: passive
   customer-view preview card). Stacks to a single column < 1024px.
   All inputs reuse the $form (ProductForm) — these classes only style
   the new tab chrome.
   ============================================================ */
.pd-pricing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* Override the generic `.pd-card + .pd-card { margin-top: 16px }` stacking
   rule — inside the pricing grid the cards sit side-by-side, so the second
   card was being pushed 16px down past the first, breaking top alignment. */
.pd-pricing-grid > .pd-card {
	margin-top: 0;
}

@media (max-width: 1023px) {
	.pd-pricing-grid {
		grid-template-columns: 1fr;
	}
}

.pd-pricing-preview-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}

.pd-pricing-preview-link:hover {
	background: rgba(0, 50, 100, 0.06);
}

.pd-pricing-preview-link svg {
	flex-shrink: 0;
}

.pd-pricing-segments {
	/* Inline-flex so each segment block (.pd-pricing-segment-block) sits at
	   its natural width — Applies + Structure controls hug their buttons
	   instead of stretching across the whole card body. Wrap on narrow
	   viewports rather than overflow. */
	display: inline-flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 20px;
}

/* ── Inline seasonal pricing editor ───────────────────────────────────
   Replaces the old "Edit seasons" modal launcher. See pricing-tab.blade. */
.pd-pricing-seasons-picker {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fafbfc;
}

.pd-pricing-seasons-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-top: 10px;
}

.pd-pricing-season-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #0f172a;
	cursor: pointer;
	user-select: none;
}

.pd-pricing-season-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
}

.pd-pricing-seasons-empty {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
}

.pd-pricing-seasons-empty a {
	display: inline;
	color: #003264;
	text-decoration: underline;
	font-size: inherit;
	font-weight: inherit;
}

.pd-pricing-season-block {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}

.pd-pricing-season-block-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 10px;
}

.pd-pricing-segment-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pd-pricing-segment-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

/* Helper copy under a pricing control (e.g. the daily-rate explainer).
   Must stay smaller than body text — never let hints inherit card size. */
.pd-pricing-hint {
	font-size: 13px;
	font-weight: 400;
	line-height: 18px;
	color: var(--ed-text-muted);
	margin-top: 6px;
	max-width: 560px;
}

.pd-pricing-fields-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.pd-pricing-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pd-pricing-field-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	margin: 0;
}

.pd-pricing-input {
	height: 38px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	color: #0f172a;
	background: #fff;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Selects lose Bootstrap's form-select chevron because the shorthand
   `background: #fff` above wipes the background-image — restore it so
   every dropdown on the tab clearly reads as a dropdown. */
select.pd-pricing-input {
	appearance: none;
	-webkit-appearance: none;
	background: #fff url('../icons/chevron-down-blue.svg') no-repeat right 12px center;
	background-size: 12px;
	padding-right: 34px;
}

select.pd-pricing-input:disabled {
	background-color: #f5f7fa;
	opacity: 0.65;
}

/* Scope-bar dropdowns (variation/location pricing) — filled grey so they
   read as controls, not text; the chevron comes from the rule above. */
select.pd-scope-select {
	background-color: #eef2f7;
	border-color: #d7dfe8;
	font-weight: 500;
	color: #003264;
}

select.pd-scope-select:hover:not(:disabled) {
	background-color: #e4eaf2;
}

/* "Editing …" chip on the Price structure header — names the scope the
   editor currently applies to (location · variation). */
.pd-scope-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background-color: #eef2f7;
	border: 1px solid #d7dfe8;
	color: #003264;
	font-size: 12px;
	font-weight: 600;
	margin-left: 10px;
	vertical-align: middle;
	white-space: nowrap;
}

.pd-pricing-input:focus {
	outline: none;
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.1);
}

.pd-pricing-input:disabled {
	background: #f5f7fa;
	color: #6b7280;
	cursor: not-allowed;
}

.pd-pricing-input-prefix {
	position: relative;
	display: flex;
	align-items: stretch;
}

.pd-pricing-input-prefix-symbol {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	pointer-events: none;
	border-right: 1px solid #e5e7eb;
}

.pd-pricing-input-with-prefix {
	padding-left: 42px !important;
}

.pd-pricing-flat-pair {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 8px;
}

.pd-pricing-unit-select {
	width: 100%;
}

.pd-pricing-schedule-table {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pd-pricing-schedule-head,
.pd-pricing-schedule-row {
	display: grid;
	/* Fixed width on the "Display" track (not auto) so the header grid and each
	   row grid resolve identical column widths — otherwise the auto track sizes
	   to its own content (label vs narrow checkbox) and the 1fr columns drift,
	   misaligning the headers from their inputs. */
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 1fr) 90px 36px;
	gap: 8px;
	align-items: center;
}

.pd-pricing-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #9aa5b1;
}

.pd-pricing-show-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pd-pricing-show-cell input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.pd-pricing-schedule-head .pd-pricing-show-col {
	text-align: center;
	white-space: nowrap;
}

.pd-pricing-schedule-head {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	padding: 0 4px 4px;
}

.pd-pricing-row-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pd-pricing-row-remove:hover {
	background: rgba(220, 53, 69, 0.08);
}

.pd-pricing-add-link {
	margin-top: 6px;
	background: none;
	border: none;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 0;
	text-align: left;
	cursor: pointer;
	align-self: flex-start;
}

.pd-pricing-add-link:hover:not(:disabled) {
	text-decoration: underline;
}

.pd-pricing-add-link:disabled {
	color: #6b7280;
	cursor: not-allowed;
}

.pd-pricing-error {
	color: #dc3545;
	font-size: 12px;
	margin-top: 4px;
}

.pd-pricing-tier-table {
	margin-top: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.pd-pricing-tier-table-head,
.pd-pricing-tier-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 10px 14px;
}

/* Exact-price templates have no multiplier column. */
.pd-pricing-tier-table.two-col .pd-pricing-tier-table-head,
.pd-pricing-tier-table.two-col .pd-pricing-tier-row {
	grid-template-columns: 1fr 1fr;
}

.pd-pricing-tier-table-head {
	background: #f5f7fa;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.pd-pricing-tier-row + .pd-pricing-tier-row {
	border-top: 1px solid #e5e7eb;
}

.pd-pricing-addcharge {
	margin-top: 16px;
	padding: 12px 14px;
	background: #f5f7fa;
	border-radius: 8px;
}

.pd-pricing-addcharge-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #0f172a;
	margin: 0;
	cursor: pointer;
}

.pd-pricing-addcharge-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.pd-pricing-seasonal-block {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	margin-bottom: 20px;
	background: #f5f7fa;
	border-radius: 10px;
}

.pd-pricing-seasonal-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #003264;
}

.pd-pricing-seasonal-text {
	flex: 1;
	min-width: 0;
}

.pd-pricing-seasonal-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 2px;
}

.pd-pricing-seasonal-help {
	font-size: 12px;
	color: #6b7280;
}

.pd-pricing-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.pd-pricing-divider {
	height: 1px;
	background: #e5e7eb;
	margin: 24px 0 18px;
}

.pd-pricing-extras-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pd-pricing-extras-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pd-pricing-extras-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	background: #003264;
	color: #fff;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.pd-pricing-coming-soon {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: #fff8e1;
	color: #b88600;
}

.pd-pricing-extras-empty {
	font-size: 13px;
	color: #6b7280;
	padding: 12px 0;
}

.pd-pricing-preview-card {
	position: sticky;
	top: 20px;
}

@media (max-width: 1023px) {
	.pd-pricing-preview-card {
		position: static;
	}
}

.pd-pricing-preview-inset {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	background: #fff;
}

/* Inline pricing-calculator (replaces the standalone preview modal launcher
   on the Product Detail Pricing tab — see pricing-tab.blade.php). */
.pd-pricing-preview-calc {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fafbfc;
}

.pd-pricing-preview-calc-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	margin-bottom: 10px;
}

.pd-pricing-preview-calc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.pd-pricing-preview-calc-btn {
	width: 100%;
	margin-top: 4px;
}

.pd-pricing-preview-calc-result {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
	font-size: 13px;
}

.pd-pricing-preview-calc-meta {
	display: flex;
	justify-content: space-between;
	color: #6b7280;
	padding: 4px 0;
}

.pd-pricing-preview-calc-meta span:last-child {
	color: #0f172a;
	font-weight: 600;
}

.pd-pricing-preview-calc-breakdown {
	margin-top: 8px;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.pd-pricing-preview-calc-line {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	color: #374151;
}

.pd-pricing-preview-calc-total {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
	font-weight: 700;
	color: #0f172a;
}

.pd-pricing-preview-calc-errors {
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #78350f;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
}

.pd-pricing-preview-name {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
}

.pd-pricing-preview-desc {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 14px;
	line-height: 1.4;
}

.pd-pricing-preview-price {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
	margin-top: 4px;
}

.pd-pricing-preview-price.pd-pricing-preview-empty {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
}

.pd-pricing-preview-price-unit {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
}

.pd-pricing-preview-sub {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
	margin-bottom: 12px;
}

.pd-pricing-preview-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0;
}

.pd-pricing-preview-cta {
	width: 100%;
	margin-top: 14px;
	padding: 10px 16px;
	background: #003264;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: not-allowed;
	opacity: 0.85;
}

.pd-pricing-preview-sample {
	margin-top: 12px;
	font-size: 12px;
	font-style: italic;
	color: #6b7280;
	text-align: center;
	padding: 0 8px;
}

/* ============================================================
   Phase 8 — Quick Book modal (rebuilt)
   Single-product fast-path booking modal launched from the
   product detail header. Density and chrome match the POS
   pages — same pos-pill primitives, same fonts, same compact
   spacing. Only the qb-* classes are local to the modal.
   ============================================================ */
.qb-modal {
	display: flex;
	flex-direction: column;
	width: 540px;
	max-width: 100%;
	background: #fff;
	border-radius: 14px;
	overflow: visible;
}

.delete-modal-main:has(.qb-modal) .modal-dialog {
	max-width: 540px;
}

.qb-footer-link { white-space: nowrap; }
.qb-btn { white-space: nowrap; }

.qb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid #eef0f4;
	gap: 12px;
}

.qb-header-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 16px;
	color: #0f172a;
	overflow: hidden;
}

.qb-header-prefix {
	font-weight: 600;
	color: #003264;
	flex: none;
}

.qb-header-sep { color: #cbd2db; flex: none; }

.qb-header-name {
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-close {
	flex: none;
	background: transparent;
	border: none;
	color: #6b7280;
	padding: 6px;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qb-close:hover { background: #f3f4f6; color: #003264; }

.qb-body {
	padding: 14px 20px 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qb-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.qb-field { min-width: 0; }

.qb-label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8b94a3;
	margin: 0 0 6px;
}

.qb-section { display: flex; flex-direction: column; }

/* ─── Date+time pill (replaces the old qb-pill 2-input row) ─ */
.qb-datepill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.qb-datepill:hover { border-color: #b8c1cc; }

.qb-datepill svg { color: #6b7280; flex: none; }
.qb-datepill-label { flex: 1 1 auto; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-datepill-chev { color: #6b7280; opacity: 0.7; }

.qb-datepop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
	padding: 12px;
	width: 280px;
	max-width: calc(100vw - 32px);
}

.qb-field { position: relative; z-index: 5; }
.qb-field:has(.qb-datepop[style*="display: block"]),
.qb-field:has(.qb-datepop:not([style*="display: none"])) { z-index: 1001; }

.qb-datepop-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.qb-datepop-row:last-child { margin-bottom: 0; }

.qb-datepop-sub {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8b94a3;
}

.qb-datepop-date {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e9ef;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: #0f172a;
}

.qb-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 6px;
	max-height: 180px;
	overflow-y: auto;
	padding-right: 2px;
}

.qb-time-chip {
	padding: 6px 8px;
	background: #f6f7f9;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 12.5px;
	color: #0f172a;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	white-space: nowrap;
	text-align: center;
}

.qb-time-chip:hover { background: #eef2f7; }

.qb-time-chip.is-selected {
	background: #003264;
	border-color: #003264;
	color: #fff;
	font-weight: 600;
}

/* ─── Pickup location ────────────────────────────────────── */
.qb-loc-pill { display: inline-flex; max-width: 320px; align-self: flex-start; }
.qb-loc-pill .pos-pill-button {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.qb-loc-readonly {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: #f6f7f9;
	border: 1px solid #e5e9ef;
	border-radius: 999px;
	font-size: 13px;
	color: #0f172a;
	max-width: 320px;
	align-self: flex-start;
}

.qb-loc-readonly span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-section { display: flex; flex-direction: column; }

.qb-input,
.qb-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e9ef;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: #0f172a;
}

.qb-input:focus,
.qb-select:focus { outline: 2px solid #003264; outline-offset: -1px; border-color: #003264; }

.qb-select-narrow { width: 90px; flex: none; }

/* ─── Variation chip row — compact, single-row preferred ── */
.qb-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qb-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
	font-size: 12.5px;
	color: #0f172a;
	line-height: 1.25;
}

.qb-chip:hover:not(.qb-chip-disabled):not(.qb-chip-selected) {
	background: #f6f7f9;
	border-color: #b8c1cc;
}

.qb-chip-label { font-weight: 600; font-size: 13px; }

.qb-chip-avail {
	font-size: 10.5px;
	color: #8b94a3;
	font-weight: 500;
}

.qb-chip-selected {
	background: #003264;
	border-color: #003264;
	color: #fff;
}

.qb-chip-selected .qb-chip-avail { color: rgba(255,255,255,0.85); }

.qb-chip-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #f3f4f6;
	color: #8b94a3;
}

.qb-chip-low {
	background: #fff8e1;
	border-color: #f8d775;
}

.qb-chip-low .qb-chip-avail { color: #b88600; font-weight: 600; }

/* Low + selected: keep the amber low-stock signal but darken so white text reads.
   Without this override, .qb-chip-selected sets color:#fff while .qb-chip-low's
   light amber background stays, giving unreadable white-on-yellow. */
.qb-chip-selected.qb-chip-low {
	background: #b88600;
	border-color: #a17500;
	color: #fff;
}

.qb-chip-selected.qb-chip-low .qb-chip-avail { color: rgba(255,255,255,0.95); }

/* ─── Customer typeahead ────────────────────────────────── */
.qb-customer-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.qb-customer-search-icon {
	position: absolute;
	left: 12px;
	color: #8b94a3;
	pointer-events: none;
}

.qb-customer-search-input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border: 1px solid #DFE3E8;
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	color: #0f172a;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.qb-customer-search-input:focus {
	outline: none;
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.qb-customer-search-input::placeholder { color: #8b94a3; }

.qb-customer-hint {
	margin-top: 6px;
	font-size: 11.5px;
	color: #8b94a3;
}

.qb-customer-panel {
	margin-top: 6px;
	border: 1px solid #e5e9ef;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.qb-customer-results {
	max-height: 200px;
	overflow-y: auto;
}

.qb-customer-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f3f4f6;
}

.qb-customer-item:last-child { border-bottom: none; }
.qb-customer-item:hover { background: #f6f7f9; }
.qb-customer-item strong { font-size: 13px; color: #0f172a; font-weight: 600; }
.qb-customer-item small { font-size: 11.5px; color: #6b7280; margin-top: 1px; }

.qb-customer-add-cta {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-top: 1px solid #f3f4f6;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	text-align: center;
	cursor: pointer;
}

.qb-customer-add-cta:hover { background: #f6f7f9; }

.qb-customer-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	background: #eef4fb;
	border: 1px solid #cfddef;
	border-radius: 10px;
}

.qb-customer-selected-info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #003264;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-customer-selected-info span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.qb-customer-clear {
	flex: none;
	background: transparent;
	border: none;
	color: #6b7280;
	padding: 4px;
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qb-customer-clear:hover { background: rgba(0,0,0,0.05); color: #003264; }

.qb-inline-customer {
	padding: 10px 12px 12px;
	background: #f8fafc;
	border-top: 1px solid #eef0f4;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.qb-inline-customer .qb-btn-secondary { align-self: flex-start; }

.qb-inline-customer-hint {
	font-size: 11.5px;
	color: #6b7280;
}

.qb-inline-customer-hint strong { color: #003264; }

/* "This is an organization" — the qb kit's echo of the POS cart's quick-add
   checkbox. width:auto is deliberate: the panel sizes its inputs to 100%, which
   would otherwise stretch the box and push the label off the row. */
.qb-inline-org-toggle {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 12.5px;
	color: #4b5563;
	cursor: pointer;
	margin: 0;
}

.qb-inline-org-toggle input[type="checkbox"] {
	width: auto;
	flex: none;
	margin: 2px 0 0;
}

.qb-inline-row {
	display: flex;
	gap: 6px;
}

.qb-inline-row .qb-input { flex: 1 1 0; min-width: 0; }

.qb-inline-customer-help {
	color: #6b7280;
	font-size: 11px;
}

/* ─── Notice rows ──────────────────────────────────────── */
.qb-notice {
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 12.5px;
	line-height: 1.4;
}

.qb-notice-warn {
	background: #fff8e1;
	border: 1px solid #f8d775;
	color: #4a3500;
}

.qb-notice-warn a { color: #003264; font-weight: 600; }

.qb-notice-info {
	background: #eef4fb;
	border: 1px solid #cfddef;
	color: #003264;
}

/* ─── Estimated total card ─────────────────────────────── */
.qb-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid;
	margin-top: 2px;
	gap: 10px;
}

.qb-total-ok {
	background: #f0fbf4;
	border-color: #d1ecdb;
}

.qb-total-bad {
	background: #f3f4f6;
	border-color: #e5e9ef;
}

.qb-total-left { min-width: 0; flex: 1 1 auto; }

.qb-total-amount {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.qb-total-duration {
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.qb-total-sub {
	font-size: 11.5px;
	color: #6b7280;
	margin-top: 3px;
}

.qb-pill-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex: none;
}

.qb-pill-status-ok { background: #047857; color: #fff; }
.qb-pill-status-bad { background: #b91c1c; color: #fff; }

/* ─── Footer ───────────────────────────────────────────── */
.qb-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 16px;
	gap: 12px;
	border-top: 1px solid #eef0f4;
	background: #fafbfc;
}

.qb-footer-link {
	font-size: 12.5px;
	color: #003264;
	font-weight: 500;
	text-decoration: none;
	font-style: italic;
}

.qb-footer-link:hover { text-decoration: underline; }

/* Quick book — a readout rather than a picker (a cohort's dates were decided
   when it was set up, so the modal shows them and never asks again). Same chip
   as .qb-time-chip minus every interactive affordance, and wide enough for a
   full "Mon Aug 24 - 9:00 AM" label. */
/* A cohort's dates are a readout, not a picker — one line that says when the
   thing runs, with the count beside it. */
/* The quick-book stepper's middle is typeable too — same reason as POS: a
   party of 20 shouldn't be 20 clicks. Native spinners off; the -/+ ARE the
   spinner. */
.qb-stepper input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.qb-stepper input[type="number"]::-webkit-outer-spin-button,
.qb-stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qb-modal .qb-date-summary,
.qb-drawer .qb-date-summary {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.qb-modal .qb-date-summary-range,
.qb-drawer .qb-date-summary-range {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
}

.qb-modal .qb-date-summary-count,
.qb-drawer .qb-date-summary-count {
	font-size: 12.5px;
	color: var(--ed-text-muted, #64748b);
}

/* The footer's left-hand note, where a plain sentence sits instead of a link. */
.qb-footer-note {
	font-size: 12.5px;
	color: var(--ed-text-muted, #64748b);
	font-style: italic;
}

.qb-footer-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qb-btn {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.qb-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.qb-btn-ghost {
	background: transparent;
	color: #6b7280;
	border-color: #e5e9ef;
}

.qb-btn-ghost:hover:not(:disabled) {
	background: #f6f7f9;
	color: #003264;
}

.qb-btn-primary {
	background: #003264;
	color: #fff;
	border-color: #003264;
}

.qb-btn-primary:hover:not(:disabled) {
	background: #002852;
}

.qb-btn-secondary {
	background: #fff;
	color: #003264;
	border-color: #003264;
	padding: 8px 14px;
	font-size: 13px;
}

.qb-btn-secondary:hover:not(:disabled) {
	background: #f6f7f9;
}

/* ─── Header CTA — "+ Book now" pill ───────────────────── */
.pd-book-now-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #003264;
	color: #fff;
	border: 1px solid #003264;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-right: 8px;
	transition: background 0.15s;
}

.pd-book-now-btn:hover { background: #002852; }

.pd-book-now-btn svg {
	stroke: currentColor;
	stroke-width: 2;
}

/* ─── Responsive — collapse two-up to single column ──── */
@media (max-width: 540px) {
	.qb-modal { width: 100%; border-radius: 0; }
	.qb-row { grid-template-columns: 1fr; }
	.qb-footer { flex-direction: column; align-items: stretch; }
	.qb-footer-link, .qb-footer-note { text-align: center; }
	.qb-footer-actions { justify-content: stretch; }
	.qb-footer-actions .qb-btn { flex: 1 1 0; }
}

/* ============================================================
   Variation property typeahead (add/edit variation modal)
   Suggests existing values used by other variations of the same
   product so users don't accidentally create a new "red" chip
   alongside an existing "Red". Server-side normalization in
   ProductVariationForm::save()/update() coerces casing to match.
   ============================================================ */
.pd-variation-input-wrap {
	position: relative;
}

.pd-variation-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	max-height: 240px;
	overflow-y: auto;
}

.pd-variation-suggest-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--pd-ink);
	cursor: pointer;
	transition: background 80ms;
}

.pd-variation-suggest-item:hover {
	background: var(--pd-soft-bg);
}

.pd-variation-suggest-hint {
	font-size: 11px;
	color: var(--pd-mute);
	font-style: italic;
}

/* ----- Store Inventory unified stock table -----
   Used in resources/views/store/products/inventoryTable.blade.php for the
   merged Stock card (variation + location sub-rows). Status-pill colors
   chosen to meet WCAG AA (≥4.5:1) at 11px/600. */

.pd-inv-stock-card { margin-bottom: 16px; }
.pd-inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-inv-table thead th { font-size: 11px; font-weight: 500; color: var(--ed-text-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 14px; border-bottom: 1px solid #eef0f4; text-align: left; white-space: nowrap; }
.pd-inv-table thead th.t-num { text-align: right; }
.pd-inv-table tbody td { font-size: 13px; padding: 10px 14px; border-bottom: 1px solid #eef0f4; vertical-align: middle; color: #303233; }
.pd-inv-table tbody td.t-num { text-align: right; }
.pd-inv-table tbody td.t-action { width: 1%; white-space: nowrap; }
.pd-inv-table tbody tr:last-child td { border-bottom: none; }
.pd-inv-table tr.is-sub td { background: #fafbfc; padding-top: 7px; padding-bottom: 7px; color: #4b5563; }
.pd-inv-table tr.is-sub td:first-child { padding-left: 36px; }
.pd-inv-loc-cell { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.pd-inv-loc-cell svg { color: var(--ed-text-muted); flex: 0 0 auto; }
.pd-inv-var-name { font-weight: 600; }
.pd-inv-var-sku { font-size: 11px; color: var(--ed-text-muted); margin-top: 2px; }
.pd-inv-qty-val { font-weight: 600; min-width: 18px; }
.pd-inv-adjust-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #dfe3e8; background: transparent; border-radius: 6px; color: var(--ed-text-muted); cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms; }
.pd-inv-adjust-btn:hover { background: #f7f7f7; color: #1f2937; border-color: #c7ccd2; }
.pd-inv-adjust-glyph { font-size: 13px; font-weight: 600; line-height: 1; }
.inv-status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.inv-status-pill.ok { background: #dcfce7; color: #166534; }
.inv-status-pill.low { background: #fef3c7; color: #854d0e; }
.inv-status-pill.out { background: #fee2e2; color: #991b1b; }
.pd-inv-bc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: transparent; border: 0; color: #303233; cursor: pointer; font-size: 12px; border-radius: 6px; }
.pd-inv-bc-btn:hover { background: #f7f7f7; }
.pd-inv-bc-btn-add { color: var(--ed-text-muted); }

/* WCAG SC 2.5.5 (AAA) / SC 2.5.8 (AA) — bump action buttons to 44x44 on
   handheld viewports while keeping the compact 24x24 chrome at desktop. */
@media (max-width: 575px) {
	.pd-inv-adjust-btn { min-width: 44px; min-height: 44px; }
	.pd-inv-bc-btn { min-height: 44px; padding: 8px 12px; }
}

/* ===== Tracking choice — shared two-card chooser =========================
   ONE component (resources/views/components/input/tracking-choice.blade.php)
   used on three surfaces: the first-item onboarding wizard, the add/edit
   product form and this detail page. It lives in this file because the base
   layout already loads product-detail.css on every page, so the cards never
   flash unstyled after a wire:navigate.

   Matches docs/mockups/booqable-parity/wizard-inventory-step-mockup.html.
   The selected card swaps a 1px border for 2px and pays the extra pixel back
   in padding, so its inner box never shifts and the morph can't change the
   card's height.
   ========================================================================= */
.pd-choice-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.pd-choice-card {
	display: block;
	width: 100%;
	text-align: left;
	position: relative;
	border: 1px solid var(--pd-line-strong);
	border-radius: var(--pd-radius);
	background: var(--pd-card-bg);
	padding: 16px 16px 14px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.pd-choice-card:hover:not(.is-locked) {
	border-color: var(--pd-navy);
}

.pd-choice-card:focus-visible {
	outline: 2px solid var(--pd-navy);
	outline-offset: 2px;
}

.pd-choice-card.is-selected {
	border: 2px solid var(--pd-navy);
	background: #f7fafd;
	padding: 15px 15px 13px;
}

.pd-choice-card.is-locked {
	cursor: default;
}

.pd-choice-card.is-inactive {
	opacity: 0.5;
}

.pd-choice-top {
	display: flex;
	align-items: center;
	gap: 9px;
}

.pd-choice-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: 0 0 18px;
	border: 2px solid var(--pd-line-strong);
	background: var(--pd-card-bg);
}

.pd-choice-card.is-selected .pd-choice-radio {
	border-color: var(--pd-navy);
	background: radial-gradient(circle, var(--pd-navy) 0 5px, #fff 5.5px);
}

.pd-choice-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--pd-ink);
	line-height: 1.3;
}

.pd-choice-preview {
	display: flex;
	align-items: center;
	margin-top: 11px;
	min-height: 56px;
	padding: 10px 12px;
	border: 1px dashed var(--pd-line-strong);
	border-radius: var(--pd-radius-sm);
	background: #fbfcfe;
}

.pd-choice-pool {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pd-ink-2);
	min-width: 0;
}

.pd-choice-pool-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.pd-choice-pool-sep {
	color: var(--pd-mute-2);
}

.pd-choice-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pd-success);
	flex: 0 0 7px;
}

.pd-choice-avail {
	color: #0f7a3d;
}

.pd-choice-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pd-choice-chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: var(--pd-radius-pill);
	background: #eef3f8;
	border: 1px solid #d3dfec;
	color: var(--pd-navy);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pd-choice-caption {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--pd-mute);
}

/* Locked state always ships with a reason — a disabled control on its own
   reads as broken. Same sentence on every surface. */
.pd-choice-locked-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 12px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pd-mute);
}

.pd-choice-locked-note i {
	margin-top: 2px;
	font-size: 11px;
}

@media (max-width: 575px) {
	.pd-choice-row {
		grid-template-columns: 1fr;
	}
}

/* ===== Quantity stepper + plain-language note ============================
   Used by the first-item wizard's inventory step alongside the tracking
   choice above. Kept here (not in style.css) so every style this question
   needs ships in one file the base layout already loads.
   ========================================================================= */
.pd-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pd-line-strong);
	border-radius: 10px;
	overflow: hidden;
}

.pd-qty-btn {
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--pd-soft-bg);
	color: var(--pd-ink-2);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.pd-qty-btn:hover {
	background: #edf1f6;
}

.pd-qty-val {
	width: 84px;
	height: 48px;
	border: 0;
	border-left: 1px solid var(--pd-line-strong);
	border-right: 1px solid var(--pd-line-strong);
	border-radius: 0;
	background: var(--pd-card-bg);
	color: var(--pd-navy);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0;
	padding: 0;
	-moz-appearance: textfield;
}

.pd-qty-val:focus {
	outline: none;
	box-shadow: none;
}

.pd-qty-val::-webkit-outer-spin-button,
.pd-qty-val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pd-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 10px 13px;
	border: 1px solid #dbe6f1;
	border-radius: var(--pd-radius-sm);
	background: #f2f6fb;
	font-size: 12.5px;
	color: var(--pd-ink-2);
}

.pd-note-icon {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--pd-navy);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Hamburger (components/sidebar-toggle) in the detail header: hidden while
   the left nav is on screen, shown when the nav goes off-canvas below 992px.
   The docked-Dash equivalent (nav off-canvas below 1372px docked) shows it
   via ai-dock.css. Mirrors .content .title .menu-icon in style.css. */
.pd-header .menu-icon {
	display: none;
}

@media (max-width: 992px) {
	.pd-header .menu-icon {
		display: block;
		cursor: pointer;
		margin-right: 12px;
	}
}
/* ── Quick Book drawer (issue #4087, mockup: ux-modernization Track B) ──
   One right-side drawer for "New booking" anywhere + the per-item Quick
   Books on detail pages. The qb-modal center chrome above is superseded
   for Quick Book; these rules restyle the qb body for the drawer. Tokens
   only. */

/* The drawer content column: body scrolls with the panel, footer sticky. */
.qb-drawer,
.qb-drawer-embed {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.qb-drawer .qb-sections,
.qb-drawer-embed .qb-sections {
	display: flex;
	flex-direction: column;
	gap: var(--ed-s5);
	padding-bottom: var(--ed-s4);
}

/* The old fixed-width center card must not constrain the drawer. */
.qb-drawer .qb-modal,
.qb-drawer-embed .qb-modal {
	width: auto;
}

/* Body sections align with the drawer header, not the center card's inset. */
.qb-drawer .qb-body {
	padding: 0;
	gap: var(--ed-s5);
}

.qb-drawer .qb-footer,
.qb-drawer-embed .qb-footer {
	position: sticky;
	bottom: -2rem; /* cancel the panel's 2rem padding so it pins to the edge */
	margin: 0 -2rem -2rem;
	padding: var(--ed-s4) 2rem;
	background: var(--ed-surface);
	border-top: 1px solid var(--ed-border);
	z-index: 2;
}

/* ── Item picker ── */
.qb-pick-search {
	font: var(--ed-body-14);
	margin-bottom: var(--ed-s2);
}

.qb-pick-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qb-pick-label {
	font: var(--ed-caption-11);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ed-faint);
	padding: var(--ed-s2) var(--ed-s1) var(--ed-s1);
}

.qb-pick-row {
	display: flex;
	align-items: center;
	gap: var(--ed-s3);
	width: 100%;
	padding: 9px var(--ed-s3);
	border: 1px solid transparent;
	border-radius: var(--ed-r-ctl);
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background var(--ed-fast);
}

.qb-pick-row:hover,
.qb-pick-row:focus-visible {
	background: var(--ed-sunken);
}

.qb-pick-row.is-selected {
	background: var(--ed-navy-100);
	border-color: var(--ed-navy-600);
	cursor: default;
}

.qb-pick-icon {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--ed-r-ctl);
	background: var(--ed-navy-100);
	color: var(--ed-navy-700);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

.qb-pick-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.qb-pick-name {
	font: var(--ed-body-14);
	font-weight: 600;
	color: var(--ed-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-pick-text small {
	font: var(--ed-small-12);
	color: var(--ed-muted);
}

.qb-pick-chevron {
	margin-left: auto;
	color: var(--ed-faint);
	font-size: 11px;
	flex: none;
}

.qb-pick-change {
	margin-left: auto;
	flex: none;
	border: none;
	background: none;
	color: var(--ed-navy-600);
	font: var(--ed-small-12);
	font-weight: 700;
	cursor: pointer;
	padding: 4px 6px;
}

.qb-pick-empty {
	font: var(--ed-small-12);
	color: var(--ed-muted);
	padding: var(--ed-s3) var(--ed-s1);
}

.qb-pick-pos {
	display: inline-block;
	margin-top: var(--ed-s3);
}

/* ── "When?" calendar ── */
.qb-cal {
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	padding: var(--ed-s3);
}

.qb-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--ed-s2);
}

.qb-cal-month {
	font: var(--ed-subtitle-15);
	color: var(--ed-ink);
}

.qb-cal-nav {
	width: 28px;
	height: 28px;
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	background: var(--ed-surface);
	color: var(--ed-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.qb-cal-nav:hover {
	background: var(--ed-sunken);
}

.qb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.qb-cal-wd {
	font: var(--ed-caption-11);
	color: var(--ed-faint);
	text-align: center;
	padding: 4px 0;
	text-transform: uppercase;
}

.qb-cal-blank {
	min-height: 34px;
}

.qb-cal-day {
	position: relative;
	min-height: 34px;
	border: none;
	border-radius: var(--ed-r-ctl);
	background: transparent;
	font: var(--ed-small-12);
	color: var(--ed-faint);
	cursor: default;
	padding-bottom: 10px;
}

.qb-cal-day.is-av {
	color: var(--ed-ink);
	font-weight: 600;
	cursor: pointer;
}

.qb-cal-day.is-av:hover {
	background: var(--ed-sunken);
}

.qb-cal-day.is-selected {
	background: var(--ed-navy-700);
	color: var(--ed-on-accent);
}

.qb-cal-dot {
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ed-success);
}

.qb-cal-day.is-selected .qb-cal-dot {
	background: var(--ed-on-accent);
}

/* ── Session chips ── */
.qb-slot-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-s2);
	margin-top: var(--ed-s3);
}

.qb-slot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 8px 14px;
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	background: var(--ed-surface);
	cursor: pointer;
	transition: border-color var(--ed-fast), background var(--ed-fast);
}

.qb-slot:hover {
	border-color: var(--ed-navy-600);
}

.qb-slot.is-selected {
	background: var(--ed-navy-100);
	border-color: var(--ed-navy-600);
}

.qb-slot-time {
	font: var(--ed-body-14);
	font-weight: 700;
	color: var(--ed-ink);
}

.qb-slot small {
	font: var(--ed-small-12);
	color: var(--ed-muted);
}

.qb-slot.is-soldout {
	opacity: .5;
	cursor: not-allowed;
}

/* ── Total lines ── */
.qb-lines {
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	padding: var(--ed-s3) var(--ed-s4);
	background: var(--ed-sunken);
	display: flex;
	flex-direction: column;
	gap: var(--ed-s2);
}

.qb-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font: var(--ed-small-12);
	color: var(--ed-muted);
	font-variant-numeric: tabular-nums;
}

.qb-line-total {
	border-top: 1px solid var(--ed-border);
	padding-top: var(--ed-s2);
	font: var(--ed-body-14);
	color: var(--ed-ink);
}

.qb-line-total b {
	font-size: 16px;
}

.qb-line-total-wrap {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-s2);
}

.qb-lines-bad {
	border-color: var(--ed-danger);
	background: var(--ed-danger-soft);
}

/* Phone: the drawer panel itself goes full-width (style.css .modal-sidebar
   is 35% on desktop). */
@media (max-width: 767.98px) {
	.modal-sidebar:has(.qb-drawer),
	.modal-sidebar:has(.qb-drawer-embed) {
		width: 100%;
	}
}

/* Picker item thumbnails - real product/experience photos, icon fallback. */
.qb-pick-thumb {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--ed-r-ctl);
	object-fit: cover;
}

/* The drawer fills the panel so the picker's POS link pins to the bottom. */
.qb-drawer {
	min-height: calc(100vh - 4rem);
}

.qb-pick-footer {
	margin-top: auto;
	padding-top: var(--ed-s4);
	border-top: 1px solid var(--ed-border);
}

/* Picker fallback icons come from the site icon set (navy SVGs). */
.qb-pick-icon img {
	width: 16px;
	height: 16px;
}

/* ── Quick Book drawer, review round 2 ────────────────────────────────── */

/* Section label row - the status pill sits by the label, never by the price. */
.qb-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-s2);
}

/* Space between the picked-item card and the embedded sections. */
.qb-drawer-embed {
	margin-top: var(--ed-s5);
}

/* Variation pills - equal size; availability is a DOT, never a tint. */
.qb-var {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 92px;
	padding: 8px 12px;
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	background: var(--ed-surface);
	cursor: pointer;
	transition: border-color var(--ed-fast), background var(--ed-fast);
}

.qb-var:hover:not(:disabled) {
	border-color: var(--ed-navy-600);
}

.qb-var.is-selected {
	border-color: var(--ed-navy-600);
	background: var(--ed-navy-100);
}

.qb-var:disabled {
	opacity: .55;
	cursor: not-allowed;
}

.qb-var-label {
	font: var(--ed-body-14);
	font-weight: 600;
	color: var(--ed-ink);
}

.qb-var-avail {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: var(--ed-small-12);
	color: var(--ed-muted);
}

.qb-var-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.qb-var-dot.is-ok { background: var(--ed-success); }
.qb-var-dot.is-low { background: var(--ed-warning); }
.qb-var-dot.is-zero { background: var(--ed-danger); }

/* Quick date chips (Today / Tomorrow / weekday) in the date popovers. */
.qb-dateshort-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-s1);
}

.qb-dateshort {
	padding: 5px 11px;
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-pill);
	background: var(--ed-surface);
	font: var(--ed-small-12);
	font-weight: 600;
	color: var(--ed-ink);
	cursor: pointer;
}

.qb-dateshort:hover {
	background: var(--ed-sunken);
}

.qb-dateshort.is-selected {
	background: var(--ed-navy-700);
	border-color: var(--ed-navy-700);
	color: var(--ed-on-accent);
}

/* Same-day duration chips under the date pills. */
.qb-dur-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-s2);
	margin-top: var(--ed-s3);
}

/* The RETURN popover opens toward the drawer's inside edge. */
.qb-datepop-right {
	left: auto;
	right: 0;
}

/* Drawer footer: actions row first, POS escape hatch on its own line under. */
.qb-drawer .qb-footer,
.qb-drawer-embed .qb-footer {
	flex-direction: column;
	align-items: stretch;
	gap: var(--ed-s3);
}

.qb-drawer .qb-footer-actions,
.qb-drawer-embed .qb-footer-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--ed-s2);
	width: 100%;
	min-width: 0;
}

.qb-drawer .qb-footer-link,
.qb-drawer-embed .qb-footer-link {
	text-align: center;
}

/* Header scan-to-book button. */
.qb-scan-btn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-ctl);
	background: var(--ed-surface);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex: none;
}

.qb-scan-btn:hover {
	background: var(--ed-sunken);
}

/* The scan glyph is an inline currentColor SVG - navy like other icons. */
.qb-scan-btn {
	color: var(--ed-navy-700);
}

/* POS availability pill, in-flow inside the drawer's label row. */
.qb-avail {
	position: static;
	box-shadow: none;
}

/* Date popovers float above the drawer sections that follow them. */
.qb-datepop {
	z-index: 30;
}

/* Right-anchor override must beat the base left:0 wherever load order lands. */
.qb-datepop.qb-datepop-right {
	left: auto !important;
	right: 0;
}

/* The POS escape hatch sits above the footer line, far left. */
.qb-pos-link {
	align-self: flex-start;
	text-align: left;
}

.qb-scan-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Breathing room between the section label row (with its status pill) and
   the control below it. */
.qb-label-row {
	margin-bottom: var(--ed-s2);
}

/* Checkbox custom fields sit on one line - label left, box right. */
.qb-participant-cfs {
	width: 100%;
}

.qb-participant-cf-field.is-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-s3);
	width: 100%;
}

.qb-participant-cf-field.is-checkbox .qb-participant-cf-label {
	margin: 0;
}

.qb-participant-cf-field.is-checkbox .qb-participant-input {
	width: auto;
	flex: none;
}

/* Participant rows: quiet remove control + add-back link (up to the ticket
   seat count). */
.qb-participant-remove {
	border: none;
	background: none;
	color: var(--ed-faint);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	flex: none;
}

.qb-participant-remove:hover {
	color: var(--ed-danger);
}

.qb-participant-add {
	border: none;
	background: none;
	color: var(--ed-navy-600);
	font: var(--ed-small-12);
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
	text-align: left;
}

/* Participant row is a GRID (num | first | last) - give the remove control
   its own fourth column so it never wraps under the row. */
.qb-participant-row:has(.qb-participant-remove) {
	grid-template-columns: 24px 1fr 1fr 28px;
}

.qb-participant-row .qb-participant-input {
	min-width: 0;
}

/* Stepper limits read as limits. */
.qb-stepper button:disabled {
	opacity: .35;
	cursor: not-allowed;
}

/* Setup cards inside a settings card body (#4092): breathing room between
   stacked quiet cards and the detail rows around them. */
.pd-card-body-tight .ui-setup {
	margin: 10px 0;
}

/* ============================================================================
   Bundle-detail audit fixes (docs/design-audits/bundle-detail-2026-08-29.md).
   ========================================================================== */

/* Fix 3: the hero thumb is a fixed 64px box on every pd page - clip whatever
   renders inside (the bundle collage fills its parent). */
.pd-hero-thumb { overflow: hidden; }
.pd-hero-thumb > * { width: 100%; height: 100%; }

@media (max-width: 767.98px) {
	/* Fix 2: title + actions stay on one row at 375; the title truncates. */
	.pd-header { flex-wrap: nowrap; }
	.pd-header .pd-header-left { min-width: 0; flex: 1; }
	.pd-header .pd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	/* Fix 1: 44px touch floor on phone - buttons grow, the 36x20 switch keeps
	   its one-look size but gains an invisible 44px hit area. */
	.pd-hero-actions .pd-btn { min-height: 44px; }
	.pd-hero .pd-switch { position: relative; }
	.pd-hero .pd-switch::after { content: ''; position: absolute; inset: -12px -8px; }
}

/* ==== css/gear-list.css ==== */
/* ==========================================================================
   Gear list — the Gear tab on a booking and on a program cohort.
   "What do I pull off the shelf for this, and from where?"

   Namespaced .gl-* so it can't collide. Tokens are inherited from
   product-detail.css (--pd-*), which the base layout already loads, so this
   file only adds the list chrome — it never redefines a color.
   ========================================================================== */

.gl-wrap {
	padding: 4px 0 8px;
}

/* ----- Filter row: pills left, dropdown + column gear right ----- */
.gl-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

/* Search/filter controls and the pills share the standard 40px height so the
   row never looks half-built. */
.gl-filters .dropdown-filter .btn { height: 40px; }
.gl-filters .dropdown-filter .dropdown-menu { max-height: 322px; }

/* ----- Column manager panel -----
   .pd-card sets overflow:hidden, which clips the absolutely-positioned panel.
   Let this one card overflow, and open the panel UPWARD: the filter row sits
   near the top of a short card, so a downward panel runs off the bottom. */
.pd-card.gl-wrap { overflow: visible; }

.gl-filters .cm-panel {
	top: auto;
	bottom: calc(100% + 6px);
}

/* ----- Date pills (mirrors .pos-pill*) ----- */
.gl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gl-pill {
	height: 32px;
	padding: 0 14px;
	border-radius: var(--pd-radius-pill);
	border: 1px solid var(--pd-line-strong);
	background: #fff;
	color: var(--pd-ink-2);
	font-size: 12.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.gl-pill:hover {
	border-color: var(--pd-mute-2);
}

.gl-pill.active {
	background: var(--pd-navy);
	border-color: var(--pd-navy);
	color: #fff;
}

/* WCAG 2.5.5 — a comfortable target on handhelds. */
@media (max-width: 575px) {
	.gl-pill { min-height: 44px; }
}

/* ----- Shortfall banner ----- */
.gl-banner {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--pd-warn-soft);
	border: 1px solid #f5d9a8;
	border-radius: var(--pd-radius-sm);
	padding: 10px 13px;
	font-size: 13px;
	margin-bottom: 16px;
	color: var(--pd-ink);
}

.gl-banner b { color: #a35c04; }

/* ----- Location group ----- */
.gl-loc {
	border: 1px solid var(--pd-line);
	border-radius: var(--pd-radius-sm);
	overflow: hidden;
	margin-bottom: 14px;
	background: #fff;
}

.gl-loc:last-child { margin-bottom: 0; }

.gl-loc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var(--pd-soft-bg);
	border-bottom: 1px solid var(--pd-line);
}

.gl-loc-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--pd-ink);
}

.gl-loc-meta {
	font-size: 12px;
	color: var(--pd-mute);
	font-weight: 600;
	white-space: nowrap;
}

/* ----- Table ----- */
.gl-table {
	width: 100%;
	border-collapse: collapse;
}

.gl-table th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--pd-mute);
	padding: 9px 14px;
	border-bottom: 1px solid var(--pd-line);
	white-space: nowrap;
}

.gl-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--pd-line);
	vertical-align: top;
	font-size: 13.5px;
	color: var(--pd-ink);
}

.gl-table tr:last-child td { border-bottom: 0; }

.gl-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.gl-item-name { font-weight: 600; }

.gl-kit {
	margin-top: 5px;
	padding-left: 12px;
	border-left: 2px solid var(--pd-line-strong);
	font-size: 12px;
	color: var(--pd-mute);
	line-height: 1.5;
}

.gl-when { font-size: 12px; color: var(--pd-mute); }

/* One date per line — a term's worth of dates as a run-on list wraps into an
   unreadable paragraph. */
.gl-date-line { display: block; white-space: nowrap; }
.gl-date-line + .gl-date-line { margin-top: 2px; }

.gl-units {
	margin-top: 3px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gl-unit {
	font-size: 10.5px;
	font-weight: 600;
	background: var(--pd-soft-bg);
	border: 1px solid var(--pd-line-strong);
	border-radius: 4px;
	padding: 1px 5px;
	color: var(--pd-ink-2);
	font-family: "SF Mono", Menlo, monospace;
}

.gl-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--pd-radius-pill);
	padding: 2px 9px;
}

.gl-chip.ok { background: var(--pd-success-soft); color: #0f7a3d; }
.gl-chip.warn { background: var(--pd-warn-soft); color: #a35c04; }
.gl-chip.bad { background: var(--pd-danger-soft); color: #b02318; }

.gl-note {
	font-size: 12.5px;
	color: var(--pd-mute);
	margin-top: 10px;
}

/* ----- Empty state ----- */
.gl-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--pd-mute);
	font-size: 13.5px;
}

/* Same 84px illustration slot the app-wide empty state uses, so the gear tab
   reads as part of the same family without inheriting that component's card. */
.gl-empty-icon {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: contain;
	margin: 0 auto 12px;
}

.gl-empty-title {
	font-weight: 700;
	color: var(--pd-ink);
	font-size: 15px;
	margin-bottom: 4px;
}

/* ----- Narrow screens: the table scrolls, the page never does ----- */
@media (max-width: 767px) {
	.gl-scroll { overflow-x: auto; }
	.gl-table { min-width: 520px; }
}

/* ==== css/extras.css ==== */
/* ============================================================================
   Extras listing (#4095) - card list with inline controls. Tokens only.
   ========================================================================== */

.xt-list { display: flex; flex-direction: column; gap: 10px; }

.xt-card {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--ed-surface);
	border: 1px solid var(--ed-border);
	border-radius: var(--ed-r-card);
	padding: 14px 18px;
}

.xt-main { flex: 1 1 40%; min-width: 0; }
.xt-name { display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--ed-font); color: var(--ed-ink); }
.xt-desc { font: var(--ed-small-12); color: var(--ed-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.xt-scope { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.xt-scope span {
	display: inline-flex;
	align-items: center;
	border-radius: var(--ed-r-pill);
	background: var(--ed-sunken);
	border: 1px solid var(--ed-border);
	color: var(--ed-muted);
	font: 600 11px/1.2 var(--ed-font);
	padding: 3px 9px;
	white-space: nowrap;
}

.xt-facts { display: flex; gap: 26px; flex: 0 1 auto; }
.xt-fact .k { font: var(--ed-caption-11); text-transform: uppercase; letter-spacing: .06em; color: var(--ed-faint); display: block; }
.xt-fact .v { font: 600 13px/1.4 var(--ed-font); color: var(--ed-ink); margin-top: 2px; white-space: nowrap; }

.xt-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.xt-actions .form-switch { margin-right: 8px; }

@media (max-width: 767.98px) {
	.xt-card { flex-wrap: wrap; gap: 10px; }
	.xt-main { flex: 1 1 100%; }
	.xt-facts { gap: 18px; }
	.xt-actions { margin-left: auto; }
}

/* ==== css/experience-detail.css ==== */
/* ==========================================================================
   Product Detail Redesign (Phase 1: chrome shell + hero strip + tab strip)
   --------------------------------------------------------------------------
   Visual restyle of /rentals/products/detail/{id}. Phase 1 introduces:
     - New header partial (back, breadcrumb, ID pill, action icons, ⋯ menu)
     - Hero metric strip (thumbnail + 6 tiles + Check availability + Book now)
     - New tab strip (7 tabs with badges + per-tab top-right action button)
     - Warning banner reskin (Inventory not configured / Pricing not configured)
   Phase 2-8 fill in tab body content. See docs/PRODUCT_DETAIL_REDESIGN_PLAN.md.
   All styles namespaced under .ed- to avoid collision with existing styles.
   ========================================================================== */

/* ----- Tokens (mirrors booking-detail.css / pos-redesign.css) ----- */
:root {
	/* Names shared with tokens.css (--ed-navy-700, --ed-ink, --ed-success*,
	   --ed-danger*) are NOT redeclared here - this pre-v2 block silently
	   overrode the canonical tokens APP-WIDE, retinting every navy to a
	   drifted #14457A. Module-private names only below. */
	--ed-navy: #003264;
	--ed-line: #eef0f4;
	--ed-line-strong: #dfe3e8;
	--ed-card-bg: #ffffff;
	--ed-page-bg: #f6f7f9;
	--ed-soft-bg: #f7f7f7;
	--ed-ink-2: #444444;
	--ed-mute: #6d87a1;
	--ed-mute-2: #94a3b8;
	--ed-warn: #d97706;
	--ed-warn-soft: #fff4e0;
	--ed-info: #00a3fa;
	--ed-info-soft: #bcdced;
	--ed-dash: #4a2fc9;
	--ed-dash-soft: #f4f0fe;
	--ed-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--ed-radius: 12px;
	--ed-radius-sm: 8px;
	--ed-radius-pill: 999px;
}

/* ----- Page shell ----- */
.ed-page {
	background: var(--ed-page-bg);
	min-height: 100%;
}

.ed-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.ed-shell {
		padding: 16px 16px 80px;
	}
}

/* ----- Header row -----
   Mirrors `.bd-header` from booking-detail.css. Breadcrumb sits inline with
   the title; right side hosts Ask Dash pill, copy/open icons, and ⋯ menu. */
.ed-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 32px;
	border-bottom: 1px solid var(--ed-line);
	background: var(--ed-card-bg);
}

.ed-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.ed-breadcrumb {
	font-size: 13px;
	color: var(--ed-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ed-breadcrumb a {
	color: var(--ed-mute);
	text-decoration: none;
}

.ed-breadcrumb a:hover {
	color: var(--ed-navy);
	text-decoration: underline;
}

.ed-breadcrumb .ed-breadcrumb-sep {
	color: var(--ed-mute-2);
}

.ed-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ed-ink);
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 480px;
}

.ed-id-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--ed-mute);
	background: var(--ed-card-bg);
	white-space: nowrap;
}

.ed-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ed-ask-dash-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--ed-radius-pill);
	background: var(--ed-dash-soft);
	color: var(--ed-dash);
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms;
}

.ed-ask-dash-btn:hover {
	background: #ebe4fc;
}

.ed-ask-dash-btn .ed-hex {
	width: 14px;
	height: 14px;
	background: linear-gradient(135deg, #4a2fc9 0%, #6b4ef5 100%);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	display: inline-block;
}

.ed-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--ed-radius-sm);
	background: var(--ed-card-bg);
	border: 1px solid var(--ed-line-strong);
	color: var(--ed-mute);
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}

.ed-icon-btn:hover {
	background: var(--ed-soft-bg);
	border-color: var(--ed-mute-2);
	color: var(--ed-ink);
}

.ed-icon-btn img {
	width: 16px;
	height: 16px;
}

/* WCAG 2.1 SC 2.5.5 (AAA) / SC 2.5.8 (AA) — minimum 44x44 touch target on
   handheld viewports. Desktop keeps the more compact 34x34 chrome. */
@media (max-width: 575px) {
	.ed-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ----- ⋯ Menu dropdown ----- */
.ed-menu-wrap {
	position: relative;
}

.ed-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 220px;
	background: var(--ed-card-bg);
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	padding: 6px 0;
	z-index: 1050;
}

.ed-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 13px;
	color: var(--ed-ink);
	cursor: pointer;
	transition: background 80ms;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	text-decoration: none;
}

.ed-menu-item:hover {
	background: var(--ed-soft-bg);
	color: var(--ed-ink);
}

.ed-menu-item.danger {
	color: var(--ed-danger);
}

.ed-menu-item.danger:hover {
	background: var(--ed-danger-soft);
}

.ed-menu-item img,
.ed-menu-item i {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	flex-shrink: 0;
}

.ed-menu-sep {
	height: 1px;
	background: var(--ed-line);
	margin: 4px 0;
}

/* ----- Warning banners (Inventory / Pricing not configured) ----- */
.ed-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--ed-radius-sm);
	background: var(--ed-warn-soft);
	border: 1px solid #f0c97f;
	color: #7a4a00;
	margin-bottom: 12px;
	font-size: 13px;
}

.ed-banner i {
	color: var(--ed-warn);
	flex-shrink: 0;
	margin-top: 2px;
}

.ed-banner strong {
	display: block;
	margin-bottom: 2px;
	color: #5a3700;
}

.ed-banner a {
	display: inline;
	color: var(--ed-navy);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ed-banner a:hover {
	text-decoration: underline;
}

/* Danger variant — a hard block (e.g. vessel compliance lapsed: can't take
   bookings) rather than a soft warning. Mirrors the red dashboard banner. */
.ed-banner-danger {
	background: #FFECEC;
	border-color: #f5b5b5;
	color: #8a1f1f;
}

.ed-banner-danger strong {
	color: #6f1313;
}

.ed-banner-danger i,
.ed-banner-danger .ed-icon-svg {
	color: #d63a3a;
}

/* ----- Hero metric strip ----- */
.ed-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--ed-card-bg);
	border: 1px solid var(--ed-line);
	border-radius: var(--ed-radius);
	box-shadow: var(--ed-card-shadow);
	margin-bottom: 16px;
}

.ed-hero-thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--ed-radius-sm);
	background: var(--ed-soft-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid var(--ed-line);
}

.ed-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ed-hero-thumb-placeholder {
	color: var(--ed-mute-2);
}

.ed-hero-tiles {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0;
}

.ed-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ed-tile-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--ed-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ed-tile-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--ed-ink);
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ed-tile-value .ed-tile-mute {
	font-weight: 500;
	color: var(--ed-mute);
	font-size: 12px;
}

.ed-tile-value a {
	color: var(--ed-navy);
	text-decoration: none;
	font-weight: 600;
}

.ed-tile-value a:hover {
	text-decoration: underline;
}

/* "as at HH:MM" disclaimer under point-in-time tiles (Inventory). */
.ed-tile-asof {
	font-size: 11px;
	color: var(--ed-mute);
	font-weight: 500;
	margin-top: 3px;
	white-space: nowrap;
}

/* Calendar icon on Check availability — uses existing site icon
   (calendar-v1.svg) for visual consistency with "Filter by date" pill on
   the bookings listing page. */
.ed-btn .ed-btn-icon-img {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: inline-block;
}

.ed-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ed-mute-2);
	margin-right: 6px;
	vertical-align: middle;
}

.ed-status-dot.active {
	background: var(--ed-success);
}

.ed-status-dot.disabled {
	background: var(--ed-mute-2);
}

.ed-status-dot.draft {
	background: var(--ed-warn);
}

/* Inventory bar (compact viz). */
.ed-inv-bar {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ed-inv-bar-track {
	width: 96px;
	height: 6px;
	background: var(--ed-line);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
}

.ed-inv-bar-fill {
	height: 100%;
}

.ed-inv-bar-fill.avail {
	background: var(--ed-success);
}

.ed-inv-bar-fill.resv {
	background: var(--ed-warn);
}

.ed-inv-bar-fill.out {
	background: var(--ed-danger);
}

.ed-inv-bar-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--ed-ink);
	white-space: nowrap;
}

.ed-inv-bar-text .ed-tile-mute {
	font-weight: 500;
}

.ed-hero-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.ed-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--ed-radius-sm);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
	text-decoration: none;
	white-space: nowrap;
}

.ed-btn-primary {
	background: var(--ed-navy);
	color: #fff;
}

.ed-btn-primary:hover {
	background: var(--ed-navy-700);
	color: #fff;
}

.ed-btn-secondary {
	background: var(--ed-card-bg);
	color: var(--ed-ink);
	border-color: var(--ed-line-strong);
}

.ed-btn-secondary:hover {
	background: var(--ed-soft-bg);
	border-color: var(--ed-mute-2);
}

.ed-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

/* Inline-SVG button icons. Use stroke="currentColor" on the SVG so the icon
   inherits the button's text color — but secondary buttons get navy icons
   instead of dark gray to match the brand (per design feedback 2026-05-06). */
.ed-btn .ed-icon-svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-block;
}

.ed-btn-secondary .ed-icon-svg {
	color: var(--ed-navy);
}

.ed-btn-primary .ed-icon-svg {
	color: #fff;
}

/* Header icon-button SVGs (copy / link / ⋯). Same trick — stroke
   currentColor + color from the button. */
.ed-icon-btn .ed-icon-svg {
	width: 16px;
	height: 16px;
	color: var(--ed-mute);
	flex-shrink: 0;
}

.ed-icon-btn:hover .ed-icon-svg {
	color: var(--ed-ink);
}

/* Banner icon stays orange (warning context). */
.ed-banner .ed-icon-svg {
	width: 18px;
	height: 18px;
	color: var(--ed-warn);
	flex-shrink: 0;
	margin-top: 1px;
}

/* ----- Tab strip ----- */
.ed-tabs-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--ed-line);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.ed-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.ed-tabs::-webkit-scrollbar {
	display: none;
}

.ed-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ed-mute);
	cursor: pointer;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color 120ms, border-color 120ms;
}

.ed-tab:hover {
	color: var(--ed-ink);
}

.ed-tab.active {
	color: var(--ed-navy);
	border-bottom-color: var(--ed-navy);
	font-weight: 600;
}

.ed-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--ed-radius-pill);
	background: var(--ed-line);
	color: var(--ed-mute);
	font-size: 11px;
	font-weight: 600;
}

.ed-tab.active .ed-tab-badge {
	background: var(--ed-navy);
	color: #fff;
}

.ed-tab-badge.alert {
	background: var(--ed-danger);
	color: #fff;
}

.ed-tab.active .ed-tab-badge.alert {
	background: var(--ed-danger);
	color: #fff;
}

/* Hide Alpine x-show targets until Alpine hydrates so tab bodies
   don't flash on the wrong tab during initial render. */
[x-cloak] {
	display: none !important;
}

/* ============================================================
   Phase 2a — Details Tab card chrome (visual reskin only)
   --------------------------------------------------------------
   Two-column grid (~62/38) with reusable card primitives. Cards
   are read-only in 2a; inline-edit comes in 2b-2c. See
   docs/PRODUCT_DETAIL_REDESIGN_PLAN.md §8.
   ============================================================ */

.ed-details-grid {
	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	gap: 16px;
	margin-top: 16px;
}

.ed-card {
	background: var(--ed-card-bg);
	border: 1px solid var(--ed-line);
	border-radius: var(--ed-radius);
	box-shadow: var(--ed-card-shadow);
	overflow: hidden;
}

/* Cards that contain inline-unit dropdowns (e.g. Behaviors → Minimum
   booking notice) need overflow visible so the dropdown menu doesn't get
   clipped by the card's border-radius/overflow:hidden. The shadow + radius
   still apply via the card's `box-shadow` + `border-radius`. */
.ed-card.ed-card-overflow-visible,
.ed-card:has(.ed-inline-unit-dropdown) {
	overflow: visible;
}

/* Dropdowns in inline value+unit pickers should sit above sibling cards. */
.ed-inline-unit-menu {
	z-index: 50 !important;
}

.ed-card + .ed-card {
	margin-top: 16px;
}

/* The Photos card and the "Additional customer information" card are separated
   by the shared drag-reorder <script> (an element node), which breaks the
   `.ed-card + .ed-card` adjacent-sibling margin above. Restore the gap on the
   content-blocks card explicitly (without touching the Photos card). */
.ed-cb-card {
	margin-top: 16px;
}

.ed-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ed-line);
}

.ed-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ed-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ed-card-title-meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--ed-mute);
}

.ed-card-body {
	padding: 18px;
}

.ed-card-body-tight {
	padding: 12px 18px;
}

/* Read-only label/value rows used inside Behaviors / Tracking cards. */
.ed-detail-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ed-line);
}

.ed-detail-row:last-child {
	border-bottom: none;
}

.ed-detail-row-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ed-detail-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ed-ink);
}

.ed-detail-sublabel {
	font-size: 12px;
	color: var(--ed-mute);
}

/* Block-level helper text shown below segmented controls / pickers
   inside a card body. Same color as sublabel; relaxed line-height for
   readability when the description spans 1-2 lines. */
.ed-detail-row-helper {
	font-size: 12px;
	color: var(--ed-mute);
	line-height: 1.5;
	margin: 8px 0 4px;
}

/* Subtle horizontal divider between sections of a single card body
   (e.g. between Schedule type segments and Duration / Default capacity). */
.ed-card-divider {
	height: 1px;
	background: var(--ed-line);
	margin: 4px 16px;
}

.ed-detail-value {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* Stacked variant — for wide controls (e.g. a segmented pill): label runs
   full width, control sits on its own line beneath. */
.ed-detail-row-stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

.ed-detail-row-stacked .ed-detail-value {
	justify-content: flex-start;
}

.ed-detail-meta {
	margin-top: 6px;
	font-size: 12px;
	color: var(--ed-mute);
	line-height: 1.5;
}

.ed-detail-meta strong {
	color: var(--ed-ink-2);
	font-weight: 600;
}

/* iOS-style toggle switch used in the Behaviors card. The button is fully
   keyboard-focusable; on/off is driven by the .on class set from the server. */
.ed-switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20px;
	background: #cbd5e1;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease;
	padding: 0;
}

.ed-switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
	transition: left 0.15s ease;
}

.ed-switch.on {
	background: var(--ed-navy);
}

.ed-switch.on::after {
	left: 18px;
}

.ed-switch:focus-visible {
	outline: 2px solid var(--ed-navy);
	outline-offset: 2px;
}

.ed-switch:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Segmented control for the Tracking card. */
.ed-segmented {
	display: inline-flex;
	background: var(--ed-soft-bg);
	border-radius: var(--ed-radius-sm);
	padding: 3px;
	gap: 2px;
}

.ed-segmented-btn {
	padding: 6px 14px;
	border-radius: 6px;
	background: transparent;
	border: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--ed-mute);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ed-segmented-btn:hover:not(.active):not(:disabled) {
	color: var(--ed-ink);
}

.ed-segmented-btn.active {
	background: #fff;
	color: var(--ed-navy);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.ed-segmented-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ed-segmented-help {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ed-mute);
	line-height: 1.5;
}

.ed-segmented-disabled-hint {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ed-mute);
	font-style: italic;
}

/* Status pill matches existing status-active / status-disable colors but in
   the new card chrome's compact style. */
.ed-status {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--ed-radius-pill);
	white-space: nowrap;
}

.ed-status.on {
	background: var(--ed-success-soft);
	color: var(--ed-success);
}

.ed-status.off {
	background: #eef0f4;
	color: var(--ed-mute);
}

.ed-status.warn {
	background: var(--ed-warn-soft);
	color: var(--ed-warn);
}

/* Description card — preserves the existing "See More / See Less" affordance. */
.ed-desc-block + .ed-desc-block {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ed-line);
}

.ed-desc-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.ed-desc-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ed-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ed-desc-error {
	margin-top: 8px;
	font-size: 12px;
	color: var(--ed-danger);
}

.ed-desc-sublabel {
	font-size: 12px;
	font-weight: 500;
	color: var(--ed-mute);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 6px;
}

/* Widget multilingual — language pills + Edit grouped on the right of the
   Description card header. Compact segmented buttons so the header keeps
   its standard height. */
.ed-desc-lang-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ed-desc-lang-group .ed-segmented-btn {
	padding: 4px 10px;
	font-size: 12px;
}

.ed-desc-textarea {
	width: 100%;
	min-height: 60px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ed-ink);
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ed-desc-textarea:focus {
	outline: none;
	border-color: var(--ed-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.ed-desc-help {
	margin-top: 6px;
	font-size: 12px;
	color: var(--ed-mute);
}

/* Quill host inside the inline edit Description card. Height matches the
   modal's Quill so the visual feels familiar; toolbar inherits Quill's snow
   theme styles already loaded by detail.blade.php. */
.ed-quill-host {
	min-height: 160px;
	background: #fff;
}

.ed-quill-host .ql-toolbar.ql-snow,
.ed-quill-host + .ql-toolbar.ql-snow {
	border-top-left-radius: var(--ed-radius-sm);
	border-top-right-radius: var(--ed-radius-sm);
}

.ed-quill-host.ql-container.ql-snow {
	border-bottom-left-radius: var(--ed-radius-sm);
	border-bottom-right-radius: var(--ed-radius-sm);
	min-height: 160px;
}

.ed-quill-host .ql-editor {
	min-height: 160px;
	font-size: 14px;
	line-height: 1.55;
}

/* Save / Cancel row inside the Description card edit mode. */
.ed-desc-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ed-line);
}

/* Phase 2d — Photos card 5-slot grid.
   Filled slot = image; "+ slot" = dashed upload trigger; empty = static
   placeholder. All slots are square via aspect-ratio so the grid stays
   visually balanced even when photos have varied aspect ratios. */
.ed-photo-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.ed-photo-slot {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--ed-radius-sm);
	overflow: hidden;
	background: var(--ed-soft-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ed-photo-slot-filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ed-photo-slot-filled.is-default {
	box-shadow: inset 0 0 0 2px var(--ed-success);
}

.ed-photo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 6px;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 60%);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ed-photo-slot-filled:hover .ed-photo-overlay,
.ed-photo-slot-filled:focus-within .ed-photo-overlay {
	opacity: 1;
}

.ed-photo-slot-filled.is-default .ed-photo-overlay {
	opacity: 1;
	background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 60%);
}

/* Icon-only circles (crop / star) — text labels don't fit the small slots;
   the title attribute carries the label. */
.ed-photo-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #fff;
	background: rgba(15, 23, 42, 0.6);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ed-photo-action:hover {
	background: rgba(15, 23, 42, 0.8);
}

.ed-photo-action-static {
	background: var(--ed-success);
	cursor: default;
}

.ed-photo-action-static:hover {
	background: var(--ed-success);
}

.ed-photo-remove {
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	background: rgba(220, 38, 38, 0.85);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.ed-photo-remove:hover {
	background: var(--ed-danger);
}

.ed-photo-slot-add {
	background: transparent;
	border: 2px dashed var(--ed-navy);
	color: var(--ed-navy);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	padding: 0;
}

.ed-photo-slot-add:hover {
	background: rgba(0, 50, 100, 0.04);
}

.ed-photo-slot-add:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ed-photo-add-icon {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

.ed-photo-slot-empty {
	background: transparent;
	border: 1.5px dashed var(--ed-line-strong);
	color: var(--ed-line-strong);
}

.ed-photo-empty-icon {
	color: var(--ed-line-strong);
}

/* Highlight the Photos card while a file is dragged over it for upload. */
.ed-photos-card-dragover {
	outline: 2px dashed var(--ed-navy);
	outline-offset: 4px;
	background: rgba(0, 50, 100, 0.03);
}

.ed-photos-card-dragover .ed-photo-slot-add {
	background: rgba(0, 50, 100, 0.08);
	border-color: var(--ed-navy);
}

@media (max-width: 575px) {
	.ed-photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Card header action buttons — small ghost buttons that sit on the right of
   ed-card-header. Used for "Edit", "Manage", "Generate". */
.ed-card-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ed-mute);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ed-card-action:hover:not(:disabled) {
	background: var(--ed-soft-bg);
	color: var(--ed-navy);
	border-color: var(--ed-navy);
}

.ed-card-action:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ed-card-action-icon {
	width: 12px;
	height: 12px;
	color: currentColor;
}

.ed-card-action-ai .ed-ai-icon {
	font-size: 12px;
}

.ed-spinner {
	display: inline-block;
	width: 11px;
	height: 11px;
	border: 1.5px solid var(--ed-mute);
	border-top-color: transparent;
	border-radius: 50%;
	animation: ed-spin 0.6s linear infinite;
}

@keyframes ed-spin {
	to { transform: rotate(360deg); }
}

.ed-desc-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ed-ink);
}

.ed-desc-body p:last-child {
	margin-bottom: 0;
}

.ed-desc-toggle {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ed-navy);
	cursor: pointer;
}

.ed-desc-toggle:hover {
	color: var(--ed-navy-700);
}

.ed-desc-empty {
	color: var(--ed-mute);
	font-style: italic;
}

/* Photos card — reuses existing <x-images.display-images> underneath. */
.ed-photos-card .ed-card-body {
	padding: 16px 18px;
}

/* Custom Fields — flex grid of label/value pairs. */
.ed-cf-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.ed-cf-item {
	min-width: 150px;
}

.ed-cf-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ed-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.ed-cf-value {
	font-size: 14px;
	color: var(--ed-ink);
}

/* Barcodes card — partial emits ed-card-header + ed-card-body directly inside
   .ed-card. Inline-style rules keep the SVG preview hover-to-reveal download
   affordance. */
.ed-barcodes-help {
	font-size: 12px;
	color: var(--ed-mute);
	margin-bottom: 12px;
}

.ed-link {
	display: inline;
	color: var(--ed-navy);
	font-weight: 500;
	text-decoration: none;
}

.ed-link:hover {
	text-decoration: underline;
}

.ed-barcodes-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 20px 8px 8px;
	text-align: center;
}

.ed-barcodes-empty-icon {
	width: 40px;
	height: 40px;
	opacity: 0.3;
}

.ed-barcodes-empty-text {
	margin: 0;
	font-size: 13px;
	color: var(--ed-mute);
}

.ed-barcodes-list {
	display: flex;
	flex-direction: column;
}

.ed-barcode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}

.ed-barcode-row.has-divider {
	border-bottom: 1px solid var(--ed-line);
}

.ed-barcode-row-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ed-barcode-preview {
	position: relative;
	width: 56px;
	min-width: 56px;
	height: 56px;
	background: var(--ed-soft-bg);
	border-radius: var(--ed-radius-sm);
	overflow: hidden;
}

.ed-barcode-preview .barcode-preview {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ed-barcode-preview .barcode-download-btn {
	position: absolute;
	bottom: 2px;
	left: 2px;
	background: #fff;
	border-radius: 4px;
	padding: 1px;
	line-height: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ed-barcode-meta {
	min-width: 0;
}

.ed-barcode-value {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--ed-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ed-barcode-type {
	font-size: 11px;
	color: var(--ed-mute);
	margin-top: 2px;
}

.ed-barcode-auto-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	background: #eef0f4;
	color: var(--ed-mute);
	border-radius: 4px;
}

.ed-barcode-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

/* Barcode row action buttons — large hit-target with a near-flush icon so
   the visual gap between adjacent icons is small. Buttons are 40x40 with a
   24x24 icon (only 8px padding each side) and no extra margin between them,
   giving ~16px icon-to-icon. The earlier `.ed-icon-btn` at ~line 162
   (34x34 bordered card-action variant) is intentionally re-scoped here. */
.ed-barcode-actions .ed-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--ed-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0;
	color: var(--ed-mute);
}

.ed-barcode-actions .ed-icon-btn + .ed-icon-btn {
	margin-left: -10px;
}

.ed-barcode-actions .ed-icon-btn:hover {
	background: var(--ed-soft-bg);
}

.ed-barcode-actions .ed-icon-btn img {
	width: 24px;
	height: 24px;
}

/* ============================================================
   Phase 3-7 — Tab body shared primitives
   ============================================================ */

.ed-tab-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 16px;
}

.ed-tab-body > .ed-card + .ed-card {
	margin-top: 0;
}

.ed-card-body-flat {
	padding: 0;
}

.ed-card-body-flat > * {
	margin: 0 !important;
}

/* Empty-state used when a tab requires a behavior to be enabled first
   (Variations off, Inventory off). Matches the design system "soft prompt". */
.ed-empty-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 16px;
	text-align: center;
}

.ed-empty-tab-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ed-ink);
}

.ed-empty-tab-desc {
	font-size: 13px;
	color: var(--ed-mute);
	max-width: 420px;
}

/* Narrow label-left / toggle-right row sitting inside an empty-tab block.
   Lets us show "Turn on this thing" without an entire centered button row. */
.ed-empty-tab-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 280px;
	margin-top: 4px;
	padding: 10px 14px;
	background: var(--ed-soft-bg);
	border: 1px solid var(--ed-line);
	border-radius: var(--ed-radius-sm);
	text-align: left;
}

.ed-empty-tab-toggle .ed-detail-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ed-ink);
}

.ed-empty-inline {
	padding: 16px 4px;
	font-size: 13px;
	color: var(--ed-mute);
}

/* Chip primitive used by Variations + Embed segmented control. */
.ed-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	background: var(--ed-navy);
	color: #fff;
	border-radius: var(--ed-radius-pill);
}

.ed-chip.ed-chip-mute {
	background: var(--ed-soft-bg);
	color: var(--ed-ink-2);
	font-weight: 500;
}

.ed-chip.ed-chip-mute strong {
	color: var(--ed-navy);
	font-weight: 600;
}

.ed-chip-empty {
	font-size: 12px;
	color: var(--ed-mute);
	font-style: italic;
}

/* Phase 3a — Variation property rows */
.ed-variation-prop-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ed-line);
}

.ed-variation-prop-row:last-child {
	border-bottom: none;
}

.ed-variation-prop-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ed-ink);
	min-width: 100px;
}

.ed-variation-prop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.ed-variation-prop-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

/* Variation property action buttons match the barcode-row pattern: 40x40 hit
   target, 24x24 icon, transparent background, slight overlap so the visual
   gap stays tight (~16px icon-to-icon). */
.ed-variation-prop-actions .ed-icon-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--ed-radius-sm);
	padding: 0;
	color: var(--ed-mute);
}

.ed-variation-prop-actions .ed-icon-btn + .ed-icon-btn {
	margin-left: -10px;
}

.ed-variation-prop-actions .ed-icon-btn:hover {
	background: var(--ed-soft-bg);
}

.ed-variation-prop-actions .ed-icon-btn img {
	width: 24px;
	height: 24px;
}

/* Phase 3a — Variation list rows */
.ed-variation-list {
	display: flex;
	flex-direction: column;
}

.ed-variation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ed-line);
}

.ed-variation-row:last-child {
	border-bottom: none;
}

.ed-variation-row-main {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}

.ed-variation-thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--ed-radius-sm);
	background: var(--ed-soft-bg);
	color: var(--ed-mute-2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.ed-variation-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ed-variation-meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ed-variation-id-sku {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.ed-variation-sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--ed-ink);
}

.ed-variation-id {
	font-size: 11px;
	color: var(--ed-mute);
}

.ed-variation-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ed-variation-actions {
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

.ed-variation-actions .ed-icon-btn {
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--ed-radius-sm);
	padding: 0;
	color: var(--ed-mute);
}

.ed-variation-actions .ed-icon-btn + .ed-icon-btn {
	margin-left: -10px;
}

.ed-variation-actions .ed-icon-btn:hover {
	background: var(--ed-soft-bg);
}

.ed-variation-actions .ed-icon-btn img {
	width: 24px;
	height: 24px;
}

/* Phase 7 — Embed tab */
.ed-embed-snippet {
	margin-top: 16px;
}

.ed-embed-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ed-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.ed-embed-textarea {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	color: var(--ed-ink-2);
	background: var(--ed-soft-bg);
	border: 1px solid var(--ed-line);
	border-radius: var(--ed-radius-sm);
	padding: 12px 110px 12px 14px;
	min-height: 70px;
	resize: vertical;
	line-height: 1.5;
}

.ed-embed-copy-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	font-size: 12px;
	font-weight: 500;
	color: var(--ed-navy);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ed-embed-copy-btn:hover {
	background: var(--ed-soft-bg);
}

.ed-embed-copy-btn img {
	width: 12px;
	height: 12px;
}

.ed-embed-preview {
	border: 1px solid var(--ed-line);
	border-radius: var(--ed-radius);
	overflow: hidden;
	background: var(--ed-soft-bg);
	display: flex;
	justify-content: center;
}

.ed-embed-preview iframe {
	width: 100%;
	height: 700px;
	background: #fff;
	border: none;
	transition: max-width 0.2s ease;
}

.ed-embed-preview.is-mobile iframe {
	max-width: 390px;
	box-shadow: 0 0 0 1px var(--ed-line-strong);
}

/* Bookings card uses a flush body so the existing table reaches the edge. */
.ed-bookings-card .table-responsive,
.ed-bookings-card table {
	margin: 0;
}

/* ----- Mobile responsive ----- */
@media (max-width: 991px) {
	.ed-details-grid {
		grid-template-columns: 1fr;
	}

	.ed-header {
		padding: 12px 16px;
	}

	.ed-title {
		font-size: 17px;
		max-width: 100%;
	}

	.ed-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.ed-hero-tiles {
		gap: 16px 24px;
	}

	.ed-hero-actions {
		width: 100%;
	}

	.ed-hero-actions .ed-btn {
		flex: 1;
		justify-content: center;
	}
}

@media (max-width: 575px) {
	.ed-header {
		gap: 8px;
	}

	.ed-header-left {
		flex: 1 1 100%;
	}

	.ed-header-right {
		flex: 1 1 100%;
		justify-content: flex-end;
	}

	.ed-ask-dash-btn span:not(.ed-hex) {
		display: none;
	}

	.ed-tile-label {
		font-size: 10px;
	}
}

/* ===== Dash AI band collapsible toggle ===================================
   Insight panel is always shown (passive summary). The chevron sits inline
   to its right and only collapses the ask input + suggestion chips beneath.
   ========================================================================= */
.ed-dash-ai-band {
	margin-top: 0.5rem;
}

.ed-dash-ai-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.ed-dash-ai-insight {
	flex: 1;
	min-width: 0;
}

/* The insight panel's `.dash-card` carries `mb-3` (~16px). We want the
   chevron to sit visually centered on the panel's first content row, which
   sits roughly 10–12px down from the panel's top edge (panel padding). */
.ed-dash-ai-chevron {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: 4px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--ed-dash-soft);
	color: var(--ed-dash);
	cursor: pointer;
	transition: background 0.15s ease;
}

.ed-dash-ai-chevron:hover {
	background: #ebe4fb;
}

.ed-dash-ai-chevron:focus-visible {
	outline: 2px solid var(--ed-dash);
	outline-offset: 2px;
}

.ed-dash-ai-chevron svg {
	transition: transform 200ms ease;
}

/* ===== Product settings — inline value+unit field pair ===================
   Used by Buffer time and Rental period limits when their toggle is ON.
   Number input + dropdown side by side, matching the modal's field shape.
   ========================================================================= */
.ed-inline-fields-wrap {
	border-bottom: 1px solid var(--ed-line);
}

/* When the wrap holds a static "view" line, render it as a row with the
   summary on the left and the Edit pencil on the right. */
.ed-inline-static {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 16px 12px;
}

.ed-inline-static--block {
	padding: 8px 0 12px;
}

.ed-inline-static-summary {
	font-size: 13px;
	color: var(--ed-ink);
	font-weight: 500;
}

.ed-inline-edit-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: transparent;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-mute);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ed-inline-edit-btn:hover {
	background: var(--ed-soft-bg);
	color: var(--ed-ink);
	border-color: var(--ed-mute-2);
}

.ed-inline-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 8px 16px 16px;
	margin-top: -4px;
}

/* When .ed-inline-fields lives inside .ed-inline-fields-wrap (the new
   view/edit container), the wrap already paints the bottom border so the
   inner grid shouldn't double it. */
.ed-inline-fields-wrap > .ed-inline-fields {
	border-bottom: none;
}

.ed-inline-field-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ed-inline-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ed-ink);
	margin: 0;
}

.ed-inline-value-unit {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 6px;
}

.ed-inline-input {
	width: 100%;
	height: 36px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--ed-ink);
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

.ed-inline-input:focus {
	outline: none;
	border-color: var(--ed-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.1);
}

.ed-inline-input:disabled {
	background: #f7f7f7;
	cursor: not-allowed;
}

.ed-inline-unit-dropdown {
	position: relative;
}

.ed-inline-unit-button {
	width: 100%;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--ed-ink);
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: 6px;
	cursor: pointer;
	text-align: left;
}

.ed-inline-unit-button:hover:not(:disabled) {
	border-color: var(--ed-navy);
}

.ed-inline-unit-button:disabled {
	background: #f7f7f7;
	cursor: not-allowed;
	opacity: 0.6;
}

.ed-inline-unit-chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.ed-inline-unit-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ed-inline-unit-item {
	display: block;
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--ed-ink);
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
}

.ed-inline-unit-item:hover {
	background: var(--ed-soft-bg);
}

/* Helper text shown beneath a toggle that's locked off because changing it
   would orphan dependent data (variations exist, inventory rows exist).

   The previous .ed-detail-row already paints a bottom border, so the hint
   needs to sit BELOW that line — generous top padding (12px) keeps a clear
   visual gap so the divider and text never read as overlapping. */
.ed-toggle-lock-hint {
	padding: 12px 16px 14px;
	font-size: 12px;
	color: var(--ed-mute);
	font-style: italic;
	line-height: 1.5;
}

/* ===== Inventory tracking — modal-style radio rows ======================= */
.ed-inventory-tracking-block {
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ed-line);
}

.ed-inventory-tracking-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--ed-ink);
	margin-bottom: 4px;
}

.ed-inventory-tracking-note {
	font-size: 12px;
	color: var(--ed-mute);
	margin-bottom: 10px;
}

.ed-radio-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	cursor: pointer;
}

.ed-radio-row + .ed-radio-row {
	border-top: 1px solid var(--ed-line);
}

.ed-radio-input {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	accent-color: var(--ed-navy);
	cursor: pointer;
	flex-shrink: 0;
}

.ed-radio-input:disabled {
	cursor: not-allowed;
}

.ed-radio-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ed-radio-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ed-ink);
	line-height: 1.3;
}

.ed-radio-help {
	font-size: 12px;
	color: var(--ed-mute);
	line-height: 1.4;
}

/* ===== Additional customer information card ==============================
   The embedded content-blocks editor brings its own padding/styling. The
   surrounding .ed-card just provides the white box; remove default padding
   so the editor's `season-fields p-3` boundary visually owns the inside.
   ========================================================================= */
/* Inside the .ed-card the editor renders with wrapper=false, so its first
   block has no top margin — let the .ed-card-body padding own the spacing. */
.ed-cb-mount > .content-blocks-editor-body > div > .mt-4:first-child {
	margin-top: 0 !important;
}

/* ============================================================
   Phase 5 — Bookings tab filter strip
   White bar attached flush above the booking table inside the
   .ed-bookings-card. Reuses POS pill chrome (pos-pill,
   pos-pill-dropdown, pos-pill-button, pos-pill-menu) defined in
   pos-redesign.css so the styling matches the POS / Bookings page
   1:1. The filter strip needs no border on the bottom — the table
   underneath supplies its own top border.
   ============================================================ */
.ed-bookings-card .ed-bookings-filter-strip {
	background: #ffffff;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	overflow: visible;
}

.ed-bookings-card .ed-bookings-filter-strip .pos-filter-strip {
	margin-bottom: 0;
	flex-wrap: wrap;
	gap: 8px;
}

.ed-bookings-card .ed-bookings-filter-strip .pos-pill-menu {
	z-index: 50;
}

.ed-bookings-filter-spacer {
	flex: 1 1 auto;
	min-width: 0;
}

.ed-bookings-tag-search {
	padding: 6px 8px 8px 8px;
	border-bottom: 1px solid #e5e7eb;
	margin-bottom: 4px;
}

.ed-bookings-tag-search input {
	width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	color: #0f172a;
	outline: none;
}

.ed-bookings-tag-search input:focus {
	border-color: #003264;
}

.ed-bookings-active-filter {
	padding: 8px 16px 0 16px;
	font-size: 12px;
	color: #6b7280;
}

.ed-bookings-export-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--pos-pill-border, #DFE3E8);
	border-radius: 999px;
	padding: 0 14px;
	min-height: 36px;
	color: var(--pos-text, #003264);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.12s, background-color 0.12s;
}

.ed-bookings-export-btn:hover {
	border-color: var(--pos-text, #003264);
	background: var(--pos-pill-active-bg, #EBF0F5);
}

.ed-bookings-export-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ed-bookings-export-btn svg {
	stroke: currentColor;
	opacity: 0.8;
}

@media (max-width: 768px) {
	.ed-bookings-card .ed-bookings-filter-strip {
		padding: 10px 12px;
	}

	.ed-bookings-card .ed-bookings-filter-strip .pos-filter-strip {
		gap: 6px;
	}

	.ed-bookings-filter-spacer {
		display: none;
	}

	.ed-bookings-export-btn {
		margin-left: auto;
	}
}

/* ============================================================
   Phase 4 — Pricing tab (inline-edit)
   Two-column grid (left: editable price structure card with segmented
   Applies + Structure controls and base/schedule inputs; right: passive
   customer-view preview card). Stacks to a single column < 1024px.
   All inputs reuse the $form (ProductForm) — these classes only style
   the new tab chrome.
   ============================================================ */
.ed-pricing-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* Override the generic `.ed-card + .ed-card { margin-top: 16px }` stacking
   rule — inside the pricing grid the cards sit side-by-side, so the second
   card was being pushed 16px down past the first, breaking top alignment. */
.ed-pricing-grid > .ed-card {
	margin-top: 0;
}

@media (max-width: 1023px) {
	.ed-pricing-grid {
		grid-template-columns: 1fr;
	}
}

.ed-pricing-preview-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
}

.ed-pricing-preview-link:hover {
	background: rgba(0, 50, 100, 0.06);
}

.ed-pricing-preview-link svg {
	flex-shrink: 0;
}

.ed-pricing-segments {
	/* Inline-flex so each segment block (.ed-pricing-segment-block) sits at
	   its natural width — Applies + Structure controls hug their buttons
	   instead of stretching across the whole card body. Wrap on narrow
	   viewports rather than overflow. */
	display: inline-flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 20px;
}

/* ── Inline seasonal pricing editor ───────────────────────────────────
   Replaces the old "Edit seasons" modal launcher. See pricing-tab.blade. */
.ed-pricing-seasons-picker {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fafbfc;
}

.ed-pricing-seasons-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	margin-top: 10px;
}

.ed-pricing-season-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #0f172a;
	cursor: pointer;
	user-select: none;
}

.ed-pricing-season-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
}

.ed-pricing-seasons-empty {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
}

.ed-pricing-field-hint {
	margin-top: 4px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}

/* Optional per-participant charges — small heading + subtle helpers. */
.ed-pricing-optional-heading {
	margin-top: 18px;
	font-size: 13px;
	font-weight: 600;
	color: #475569;
}

.ed-pricing-optional-sub {
	margin-top: 2px;
	margin-bottom: 12px;
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.4;
}

.ed-pricing-field-hint-subtle {
	color: #94a3b8;
}

.ed-pricing-seasons-empty a {
	display: inline;
	color: #003264;
	text-decoration: underline;
	font-size: inherit;
	font-weight: inherit;
}

.ed-pricing-season-block {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
}

.ed-pricing-season-block-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 10px;
}

.ed-pricing-segment-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ed-pricing-segment-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.ed-pricing-fields-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.ed-pricing-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ed-pricing-field-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	margin: 0;
}

.ed-pricing-input {
	height: 38px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	color: #0f172a;
	background: #fff;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ed-pricing-input:focus {
	outline: none;
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.1);
}

.ed-pricing-input:disabled {
	background: #f5f7fa;
	color: #6b7280;
	cursor: not-allowed;
}

.ed-pricing-input-prefix {
	position: relative;
	display: flex;
	align-items: stretch;
}

.ed-pricing-input-prefix-symbol {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	pointer-events: none;
	border-right: 1px solid #e5e7eb;
}

.ed-pricing-input-with-prefix {
	padding-left: 42px !important;
}

.ed-pricing-flat-pair {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 8px;
}

.ed-pricing-unit-select {
	width: 100%;
}

.ed-pricing-schedule-table {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ed-pricing-schedule-head,
.ed-pricing-schedule-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px;
	gap: 8px;
	align-items: center;
}

.ed-pricing-schedule-head {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	padding: 0 4px 4px;
}

.ed-pricing-row-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.ed-pricing-row-remove:hover {
	background: rgba(220, 53, 69, 0.08);
}

.ed-pricing-add-link {
	margin-top: 6px;
	background: none;
	border: none;
	color: #003264;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 0;
	text-align: left;
	cursor: pointer;
	align-self: flex-start;
}

.ed-pricing-add-link:hover:not(:disabled) {
	text-decoration: underline;
}

.ed-pricing-add-link:disabled {
	color: #6b7280;
	cursor: not-allowed;
}

.ed-pricing-error {
	color: #dc3545;
	font-size: 12px;
	margin-top: 4px;
}

.ed-pricing-tier-table {
	margin-top: 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
}

.ed-pricing-tier-table-head,
.ed-pricing-tier-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	padding: 10px 14px;
	font-size: 13px;
}

.ed-pricing-tier-table-head {
	background: #f5f7fa;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
}

.ed-pricing-tier-row + .ed-pricing-tier-row {
	border-top: 1px solid #e5e7eb;
}

.ed-pricing-addcharge {
	margin-top: 16px;
	padding: 12px 14px;
	background: #f5f7fa;
	border-radius: 8px;
}

.ed-pricing-addcharge-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #0f172a;
	margin: 0;
	cursor: pointer;
}

.ed-pricing-addcharge-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.ed-pricing-seasonal-block {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	margin-bottom: 20px;
	background: #f5f7fa;
	border-radius: 10px;
}

.ed-pricing-seasonal-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #003264;
}

.ed-pricing-seasonal-text {
	flex: 1;
	min-width: 0;
}

.ed-pricing-seasonal-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	margin-bottom: 2px;
}

.ed-pricing-seasonal-help {
	font-size: 12px;
	color: #6b7280;
}

.ed-pricing-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.ed-pricing-divider {
	height: 1px;
	background: #e5e7eb;
	margin: 24px 0 18px;
}

.ed-pricing-extras-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.ed-pricing-extras-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ed-pricing-extras-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	background: #003264;
	color: #fff;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.ed-pricing-coming-soon {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: #fff8e1;
	color: #b88600;
}

.ed-pricing-extras-empty {
	font-size: 13px;
	color: #6b7280;
	padding: 12px 0;
}

.ed-pricing-preview-card {
	position: sticky;
	top: 20px;
}

@media (max-width: 1023px) {
	.ed-pricing-preview-card {
		position: static;
	}
}

.ed-pricing-preview-inset {
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 18px;
	background: #fff;
}

/* Inline pricing-calculator (replaces the standalone preview modal launcher
   on the Product Detail Pricing tab — see pricing-tab.blade.php). */
.ed-pricing-preview-calc {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fafbfc;
}

.ed-pricing-preview-calc-title {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b7280;
	margin-bottom: 10px;
}

.ed-pricing-preview-calc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.ed-pricing-preview-calc-btn {
	width: 100%;
	margin-top: 4px;
}

.ed-pricing-preview-calc-result {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e5e7eb;
	font-size: 13px;
}

.ed-pricing-preview-calc-meta {
	display: flex;
	justify-content: space-between;
	color: #6b7280;
	padding: 4px 0;
}

.ed-pricing-preview-calc-meta span:last-child {
	color: #0f172a;
	font-weight: 600;
}

.ed-pricing-preview-calc-breakdown {
	margin-top: 8px;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.ed-pricing-preview-calc-line {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	color: #374151;
}

.ed-pricing-preview-calc-total {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
	font-weight: 700;
	color: #0f172a;
}

.ed-pricing-preview-calc-errors {
	background: #fef3c7;
	border: 1px solid #fcd34d;
	color: #78350f;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13px;
}

.ed-pricing-preview-name {
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 4px;
}

.ed-pricing-preview-desc {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 14px;
	line-height: 1.4;
}

.ed-pricing-preview-price {
	font-size: 26px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
	margin-top: 4px;
}

.ed-pricing-preview-price.ed-pricing-preview-empty {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
}

.ed-pricing-preview-price-unit {
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
}

.ed-pricing-preview-sub {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
	margin-bottom: 12px;
}

.ed-pricing-preview-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0;
}

.ed-pricing-preview-cta {
	width: 100%;
	margin-top: 14px;
	padding: 10px 16px;
	background: #003264;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: not-allowed;
	opacity: 0.85;
}

.ed-pricing-preview-sample {
	margin-top: 12px;
	font-size: 12px;
	font-style: italic;
	color: #6b7280;
	text-align: center;
	padding: 0 8px;
}

/* ============================================================
   Phase 8 — Quick Book modal (rebuilt)
   Single-product fast-path booking modal launched from the
   product detail header. Density and chrome match the POS
   pages — same pos-pill primitives, same fonts, same compact
   spacing. Only the qb-* classes are local to the modal.
   ============================================================ */
.qb-modal {
	display: flex;
	flex-direction: column;
	width: 540px;
	max-width: 100%;
	background: #fff;
	border-radius: 14px;
	overflow: visible;
}

.delete-modal-main:has(.qb-modal) .modal-dialog {
	max-width: 540px;
}

.qb-footer-link { white-space: nowrap; }
.qb-btn { white-space: nowrap; }

.qb-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid #eef0f4;
	gap: 12px;
}

.qb-header-title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
	font-size: 16px;
	color: #0f172a;
	overflow: hidden;
}

.qb-header-prefix {
	font-weight: 600;
	color: #003264;
	flex: none;
}

.qb-header-sep { color: #cbd2db; flex: none; }

.qb-header-name {
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-close {
	flex: none;
	background: transparent;
	border: none;
	color: #6b7280;
	padding: 6px;
	cursor: pointer;
	border-radius: 8px;
	transition: background 0.15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qb-close:hover { background: #f3f4f6; color: #003264; }

.qb-body {
	padding: 14px 20px 4px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qb-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.qb-field { min-width: 0; }

.qb-label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8b94a3;
	margin: 0 0 6px;
}

.qb-section { display: flex; flex-direction: column; }

/* ─── Date+time pill (replaces the old qb-pill 2-input row) ─ */
.qb-datepill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #0f172a;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.qb-datepill:hover { border-color: #b8c1cc; }

.qb-datepill svg { color: #6b7280; flex: none; }
.qb-datepill-label { flex: 1 1 auto; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-datepill-chev { color: #6b7280; opacity: 0.7; }

.qb-datepop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	background: #fff;
	border: 1px solid #e5e9ef;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
	padding: 12px;
	width: 280px;
	max-width: calc(100vw - 32px);
	/* Cap popover to viewport so a long date list never spills below
	   the visible modal area (and never gets clipped by the .modal-content
	   centered panel). The grid inside scrolls to absorb the overflow. */
	max-height: min(360px, calc(100vh - 240px));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.qb-field { position: relative; z-index: 5; }
.qb-field:has(.qb-datepop[style*="display: block"]),
.qb-field:has(.qb-datepop:not([style*="display: none"])) { z-index: 1001; }

.qb-datepop-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.qb-datepop-row:last-child { margin-bottom: 0; }

.qb-datepop-sub {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #8b94a3;
}

.qb-datepop-date {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e9ef;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: #0f172a;
}

.qb-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 6px;
	/* Inner grid grows to popover-allowed height; popover caps the outer
	   bound. Was a fixed 180px which silently clipped 4+ row date lists
	   inside the centered Quick Book modal even when more vertical space
	   was available below the date pill. */
	max-height: 280px;
	overflow-y: auto;
	padding-right: 2px;
	flex: 1 1 auto;
	min-height: 0;
}

.qb-time-chip {
	padding: 6px 8px;
	background: #f6f7f9;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 12.5px;
	color: #0f172a;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
	white-space: nowrap;
	text-align: center;
}

.qb-time-chip:hover { background: #eef2f7; }

.qb-time-chip.is-selected {
	background: #003264;
	border-color: #003264;
	color: #fff;
	font-weight: 600;
}

/* ─── Inline per-participant capture (qb-participants) ───── */
.qb-participants {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.qb-participant-row {
	display: grid;
	grid-template-columns: 24px 1fr 1fr;
	gap: 6px;
	align-items: center;
}

.qb-participant-num {
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-align: right;
}

.qb-participant-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e9ef;
	border-radius: 8px;
	background: #f6f7f9;
	font-size: 13px;
	color: #0f172a;
	transition: border-color 0.12s, background 0.12s;
}

.qb-participant-input:focus {
	outline: none;
	border-color: #003264;
	background: #fff;
}

.qb-participant-input::placeholder { color: #9aa3b2; }

/* Per-seat custom field block (participant-scoped CFs) */
.qb-participant-cfs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	padding: 4px 0 8px 30px;
	margin-bottom: 4px;
}
.qb-participant-cf-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.qb-participant-cf-label {
	font-size: 11px;
	font-weight: 500;
	color: #6d87a1;
	letter-spacing: 0.02em;
}

/* ─── Pickup location ────────────────────────────────────── */
.qb-loc-pill { display: inline-flex; max-width: 320px; align-self: flex-start; }
.qb-loc-pill .pos-pill-button {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.qb-loc-readonly {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: #f6f7f9;
	border: 1px solid #e5e9ef;
	border-radius: 999px;
	font-size: 13px;
	color: #0f172a;
	max-width: 320px;
	align-self: flex-start;
}

.qb-loc-readonly span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-section { display: flex; flex-direction: column; }

.qb-input,
.qb-select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #e5e9ef;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: #0f172a;
}

.qb-input:focus,
.qb-select:focus { outline: 2px solid #003264; outline-offset: -1px; border-color: #003264; }

.qb-select-narrow { width: 90px; flex: none; }

/* ─── Variation chip row — compact, single-row preferred ── */
.qb-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qb-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #DFE3E8;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s;
	font-size: 12.5px;
	color: #0f172a;
	line-height: 1.25;
}

.qb-chip:hover:not(.qb-chip-disabled):not(.qb-chip-selected) {
	background: #f6f7f9;
	border-color: #b8c1cc;
}

.qb-chip-label { font-weight: 600; font-size: 13px; }

.qb-chip-avail {
	font-size: 10.5px;
	color: #8b94a3;
	font-weight: 500;
}

.qb-chip-selected {
	background: #003264;
	border-color: #003264;
	color: #fff;
}

.qb-chip-selected .qb-chip-avail { color: rgba(255,255,255,0.85); }

.qb-chip-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #f3f4f6;
	color: #8b94a3;
}

.qb-chip-low {
	background: #fff8e1;
	border-color: #f8d775;
}

.qb-chip-low .qb-chip-avail { color: #b88600; font-weight: 600; }

/* Low + selected: keep the amber low-stock signal but darken so white text reads.
   Without this override, .qb-chip-selected sets color:#fff while .qb-chip-low's
   light amber background stays, giving unreadable white-on-yellow. */
.qb-chip-selected.qb-chip-low {
	background: #b88600;
	border-color: #a17500;
	color: #fff;
}

.qb-chip-selected.qb-chip-low .qb-chip-avail { color: rgba(255,255,255,0.95); }

/* ─── Customer typeahead ────────────────────────────────── */
.qb-customer-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.qb-customer-search-icon {
	position: absolute;
	left: 12px;
	color: #8b94a3;
	pointer-events: none;
}

.qb-customer-search-input {
	width: 100%;
	padding: 9px 12px 9px 34px;
	border: 1px solid #DFE3E8;
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	color: #0f172a;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.qb-customer-search-input:focus {
	outline: none;
	border-color: #003264;
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.qb-customer-search-input::placeholder { color: #8b94a3; }

.qb-customer-hint {
	margin-top: 6px;
	font-size: 11.5px;
	color: #8b94a3;
}

.qb-customer-panel {
	margin-top: 6px;
	border: 1px solid #e5e9ef;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.qb-customer-results {
	max-height: 200px;
	overflow-y: auto;
}

.qb-customer-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #f3f4f6;
}

.qb-customer-item:last-child { border-bottom: none; }
.qb-customer-item:hover { background: #f6f7f9; }
.qb-customer-item strong { font-size: 13px; color: #0f172a; font-weight: 600; }
.qb-customer-item small { font-size: 11.5px; color: #6b7280; margin-top: 1px; }

.qb-customer-add-cta {
	display: block;
	width: 100%;
	background: transparent;
	border: none;
	border-top: 1px solid #f3f4f6;
	padding: 14px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	text-align: center;
	cursor: pointer;
}

.qb-customer-add-cta:hover { background: #f6f7f9; }

.qb-customer-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 12px;
	background: #eef4fb;
	border: 1px solid #cfddef;
	border-radius: 10px;
}

.qb-customer-selected-info {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #003264;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qb-customer-selected-info span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.qb-customer-clear {
	flex: none;
	background: transparent;
	border: none;
	color: #6b7280;
	padding: 4px;
	cursor: pointer;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qb-customer-clear:hover { background: rgba(0,0,0,0.05); color: #003264; }

.qb-inline-customer {
	padding: 10px 12px 12px;
	background: #f8fafc;
	border-top: 1px solid #eef0f4;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.qb-inline-customer .qb-btn-secondary { align-self: flex-start; }

.qb-inline-customer-hint {
	font-size: 11.5px;
	color: #6b7280;
}

.qb-inline-customer-hint strong { color: #003264; }

.qb-inline-row {
	display: flex;
	gap: 6px;
}

.qb-inline-row .qb-input { flex: 1 1 0; min-width: 0; }

.qb-inline-customer-help {
	color: #6b7280;
	font-size: 11px;
}

/* ─── Notice rows ──────────────────────────────────────── */
.qb-notice {
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 12.5px;
	line-height: 1.4;
}

.qb-notice-warn {
	background: #fff8e1;
	border: 1px solid #f8d775;
	color: #4a3500;
}

.qb-notice-warn a { color: #003264; font-weight: 600; }

.qb-notice-info {
	background: #eef4fb;
	border: 1px solid #cfddef;
	color: #003264;
}

.qb-notice-danger {
	background: #FFECEC;
	border: 1px solid #f5b5b5;
	color: #8a1f1f;
}

.qb-notice-danger strong { color: #8a1f1f; }
.qb-notice-danger a { color: #8a1f1f; font-weight: 600; text-decoration: underline; }

/* ─── Estimated total card ─────────────────────────────── */
.qb-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid;
	margin-top: 2px;
	gap: 10px;
}

.qb-total-ok {
	background: #f0fbf4;
	border-color: #d1ecdb;
}

.qb-total-bad {
	background: #f3f4f6;
	border-color: #e5e9ef;
}

.qb-total-left { min-width: 0; flex: 1 1 auto; }

.qb-total-amount {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.1;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.qb-total-duration {
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.qb-total-sub {
	font-size: 11.5px;
	color: #6b7280;
	margin-top: 3px;
}

.qb-pill-status {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex: none;
}

.qb-pill-status-ok { background: #047857; color: #fff; }
.qb-pill-status-bad { background: #b91c1c; color: #fff; }

/* ─── Footer ───────────────────────────────────────────── */
.qb-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 16px;
	gap: 12px;
	border-top: 1px solid #eef0f4;
	background: #fafbfc;
}

.qb-footer-link {
	font-size: 12.5px;
	color: #003264;
	font-weight: 500;
	text-decoration: none;
	font-style: italic;
}

.qb-footer-link:hover { text-decoration: underline; }

.qb-footer-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qb-btn {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.qb-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.qb-btn-ghost {
	background: transparent;
	color: #6b7280;
	border-color: #e5e9ef;
}

.qb-btn-ghost:hover:not(:disabled) {
	background: #f6f7f9;
	color: #003264;
}

.qb-btn-primary {
	background: #003264;
	color: #fff;
	border-color: #003264;
}

.qb-btn-primary:hover:not(:disabled) {
	background: #002852;
}

.qb-btn-secondary {
	background: #fff;
	color: #003264;
	border-color: #003264;
	padding: 8px 14px;
	font-size: 13px;
}

.qb-btn-secondary:hover:not(:disabled) {
	background: #f6f7f9;
}

/* ─── Header CTA — "+ Book now" pill ───────────────────── */
.ed-book-now-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #003264;
	color: #fff;
	border: 1px solid #003264;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-right: 8px;
	transition: background 0.15s;
}

.ed-book-now-btn:hover { background: #002852; }

.ed-book-now-btn svg {
	stroke: currentColor;
	stroke-width: 2;
}

/* ─── Responsive — collapse two-up to single column ──── */
@media (max-width: 540px) {
	.qb-modal { width: 100%; border-radius: 0; }
	.qb-row { grid-template-columns: 1fr; }
	.qb-footer { flex-direction: column; align-items: stretch; }
	.qb-footer-link { text-align: center; }
	.qb-footer-actions { justify-content: stretch; }
	.qb-footer-actions .qb-btn { flex: 1 1 0; }
}

/* ============================================================
   Variation property typeahead (add/edit variation modal)
   Suggests existing values used by other variations of the same
   product so users don't accidentally create a new "red" chip
   alongside an existing "Red". Server-side normalization in
   ProductVariationForm::save()/update() coerces casing to match.
   ============================================================ */
.ed-variation-input-wrap {
	position: relative;
}

.ed-variation-suggest {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ed-line-strong);
	border-radius: var(--ed-radius-sm);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	max-height: 240px;
	overflow-y: auto;
}

.ed-variation-suggest-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	font-size: 14px;
	color: var(--ed-ink);
	cursor: pointer;
	transition: background 80ms;
}

.ed-variation-suggest-item:hover {
	background: var(--ed-soft-bg);
}

.ed-variation-suggest-hint {
	font-size: 11px;
	color: var(--ed-mute);
	font-style: italic;
}

/* ============================================================
   Stacked detail row — for free-text values (e.g. Location) that
   would overflow the standard single-line `.ed-detail-row`. The
   value lives on its own line below the label so long strings
   wrap naturally instead of pushing the label sideways.
   ============================================================ */
.ed-detail-row-stacked {
	padding: 12px 0;
	border-top: 1px solid var(--ed-line);
	/* Pin the base size on the row so the stacked value can never inherit a large
	   ancestor font. After an inline save the Livewire morph can briefly re-insert
	   the value node before Alpine re-applies its class context; without this the
	   location/equipment value rendered massive until the next full page refresh. */
	font-size: 13px;
}

.ed-detail-row-stacked-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.ed-detail-row-stacked-head .ed-detail-row-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ed-detail-row-stacked-value {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ed-ink);
	word-break: break-word;
	line-height: 1.4;
}

.ed-detail-row-stacked-edit {
	margin-top: 8px;
}

/* ============================================================
   Experience Quick Book — per-rate participant stepper rows.
   Mirrors rental's qb-chip-row visual weight but laid out as
   list rows because each row has its own qty stepper.
   ============================================================ */
.qb-rate-rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.qb-rate-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--ed-line);
	border-radius: 8px;
	background: #fff;
}

.qb-rate-name {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qb-rate-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--ed-ink);
}

.qb-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ed-line-strong);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	flex: none;
}

.qb-stepper button {
	background: transparent;
	border: none;
	padding: 6px 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ed-ink);
	cursor: pointer;
	line-height: 1;
}

.qb-stepper button:hover {
	background: var(--ed-soft-bg);
}

.qb-stepper input {
	width: 38px;
	text-align: center;
	border: none;
	background: transparent;
	font-weight: 600;
	font-size: 14px;
	padding: 6px 0;
	font-variant-numeric: tabular-nums;
}

.qb-stepper input:focus {
	outline: none;
}

/* overwriteThirdParty.css borders every .modal-sidebar input; the stepper's
   number box must stay borderless inside its own bordered wrapper. */
.modal-sidebar .qb-stepper input {
	border: none;
}

/* Tour Packages — pick-one choice groups in Quick Book. Mirrors the POS
   experiences choice-group radio cards using the experience-detail tokens. */
.qb-choice-group {
	margin-bottom: 12px;
}

.qb-choice-group:last-child {
	margin-bottom: 0;
}

.qb-choice-group-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.qb-choice-group-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--ed-ink);
}

.qb-choice-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--ed-radius-pill);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
}

.qb-choice-badge-req {
	background: #e6f0fa;
	color: var(--ed-navy);
}

.qb-choice-badge-opt {
	background: transparent;
	color: var(--ed-mute);
	font-weight: 500;
}

.qb-choice-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qb-choice-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--ed-line-strong);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.qb-choice-option:hover {
	border-color: var(--ed-navy-700);
}

.qb-choice-option.is-selected {
	border-color: var(--ed-navy);
	background: #f5f8fc;
}

.qb-choice-option-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.qb-choice-radio {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #b7c4d2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qb-choice-radio.is-on {
	border-color: var(--ed-navy);
}

.qb-choice-radio.is-on::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ed-navy);
}

.qb-choice-option-text {
	min-width: 0;
}

.qb-choice-option-text strong {
	display: block;
	font-size: 13px;
	color: var(--ed-navy);
}

.qb-choice-option-text small {
	display: block;
	color: var(--ed-mute);
	font-size: 12px;
}

.qb-choice-option-price {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--ed-navy);
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Per-day times on the repeating schedule (Manage availability drawer).

   Each applicable day shows whether it runs the default times or its own. The
   picker itself is the standard multi-select dropdown (see
   components/dropdown/selector.blade.php) — nothing here restyles it, so it
   keeps the shared chrome and the 200px scrolling menu.
   --------------------------------------------------------------------------- */
.exp-day-times {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.exp-day-inherit {
	font-size: 14px;
	color: var(--ed-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.exp-day-link {
	font-size: 14px;
	font-weight: 500;
	color: #003264;
	background: none;
	border: none;
	padding: 4px 0;
	white-space: nowrap;
}

.exp-day-link:hover { text-decoration: underline; }
.exp-day-link:disabled { opacity: .5; }

/* The app's button reset removes the outline, which leaves a keyboard user with
   no idea where they are. Put it back for these two controls only. */
.exp-day-link:focus-visible,
.exp-day-picker .btn:focus-visible {
	outline: 2px solid #003264;
	outline-offset: 2px;
	border-radius: 6px;
}

.seasonal-checkbox-label.exp-day-own { font-weight: 600 !important; }

/* Sits under its day, indented past the checkbox.
   ⛔ Do NOT put `w-100` on this element: Bootstrap's `width: 100% !important`
   beats this width, and the control then renders a full row wide AND shifted by
   the indent — 25px past the panel edge, taking its menu with it. */
.exp-day-picker {
	margin: 10px 0 2px 25px;
	width: calc(100% - 25px);
	max-width: calc(100% - 25px);
}

/* The menu is absolutely positioned against the picker, so it inherits the
   corrected width — but pin it so a long list can never widen it. */
.exp-day-picker .dropdown-menu { max-width: 100%; }

/* One line, ellipsed — a day with many times must not stretch the control. */
.exp-day-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Phone: the day's times drop under the day name so nothing truncates. */
@media screen and (max-width: 576px) {
	.form-checkbox:has(.exp-day-times) { flex-wrap: wrap; }
	/* 44px minimum touch target on a phone. */
	.exp-day-link {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 0 4px;
	}
	.exp-day-times {
		width: 100%;
		margin: 4px 0 0 25px;
		justify-content: space-between;
	}
}

/* Marks the shared times control as the default every day follows — only shown
   once at least one day runs its own times. */
.exp-times-tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2px;
	color: #003264;
	background: #eaf1f8;
	border-radius: 10px;
	padding: 2px 7px;
	margin-left: 6px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Schedule periods — every date range the schedule is built from, in one box at
   the top of the Manage availability drawer. The form underneath edits whichever
   row is selected, so the whole plan and the thing being changed are on screen
   together. Rows use the .dash-list / .dash-item read-only shape.
   --------------------------------------------------------------------------- */
.exp-period-panel { padding-top: 4px; margin-bottom: 18px; }

.exp-period-head { margin-bottom: 10px; }

/* Full width under the box, matching the other controls in the drawer. */
.exp-period-add {
	display: block;
	width: 100%;
	margin-top: 10px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px dashed #c7d0da;
	border-radius: 12px;
	background: none;
	color: #003264;
	font-size: 15px;
	font-weight: 500;
}

.exp-period-add:hover { background: #f7f9fc; }

/* Scrolls once a supplier runs more than a few stretches of the year. */
.exp-period-box {
	border: 1px solid #dee2e6;
	border-radius: 12px;
	padding: 8px;
	max-height: 232px;
	overflow-y: auto;
	background: #fbfcfd;
}

.exp-period-row {
	border: 1px solid #e6eaee;
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
}

.exp-period-row + .exp-period-row { margin-top: 8px; }
.exp-period-row.current { border-color: #cbd9e6; }
.exp-period-row.editing { border-color: #003264; box-shadow: inset 0 0 0 1px #003264; }

.exp-period-top { display: flex; align-items: baseline; gap: 10px; }
.exp-period-dates { font-size: 15px; font-weight: 600; line-height: 22px; }

.exp-period-now {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2px;
	color: #027a48;
	background: #ecfdf3;
	border-radius: 10px;
	padding: 2px 7px;
}

.exp-period-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.exp-period-edit,
.exp-period-remove {
	font-size: 14px;
	font-weight: 500;
	color: #003264;
	background: none;
	border: none;
	padding: 4px 0;
	white-space: nowrap;
}

.exp-period-remove { color: var(--ed-text-muted); }
.exp-period-edit:hover, .exp-period-remove:hover { text-decoration: underline; }
.exp-period-edit:disabled, .exp-period-remove:disabled { opacity: .5; }

.exp-period-edit:focus-visible,
.exp-period-remove:focus-visible,
.exp-period-add:focus-visible {
	outline: 2px solid #003264;
	outline-offset: 2px;
	border-radius: 6px;
}

.exp-period-editing-flag {
	font-size: 12px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}

.exp-period-body { margin-top: 4px; font-size: 14px; color: var(--ed-text-muted); }

.exp-period-gap {
	font-size: 13px;
	color: var(--ed-text-muted);
	text-align: center;
	padding: 6px 0;
}

.exp-period-empty {
	font-size: 14px;
	color: var(--ed-text-muted);
	padding: 10px 4px;
}

/* Which range the form below is editing. */
.exp-period-editing {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 12px;
}

@media screen and (max-width: 576px) {
	.exp-period-top { flex-wrap: wrap; }
	.exp-period-actions { width: 100%; margin: 6px 0 0; justify-content: flex-start; }
	.exp-period-edit, .exp-period-remove { min-height: 44px; display: inline-flex; align-items: center; }
	.exp-period-box { max-height: 260px; }
}

/* ==== css/customer-detail.css ==== */
/* ==========================================================================
   Customer Detail Redesign — `.cd-` namespace
   --------------------------------------------------------------------------
   Visual restyle of /customers/detail/{customer}. Mirrors the shipped Staff
   Detail / Product Detail / Experience Detail / Store Product Detail chrome
   exactly — same shell, same hero card shape, same tab strip pattern, same
   tile typography. Tokens cloned 1:1 from `.sd-` so behaviour is uniform.
   See docs/CUSTOMER_DETAIL_REDESIGN_PLAN.md.
   ========================================================================== */

/* ----- Tokens (sibling to --sd- / --pd- / --bd-) ----- */
:root {
	--cd-navy: #003264;
	--cd-navy-700: #14457A;
	--cd-line: #eef0f4;
	--cd-line-strong: #dfe3e8;
	--cd-card-bg: #ffffff;
	--cd-page-bg: #f6f7f9;
	--cd-soft-bg: #f7f7f7;
	--cd-soft-bg-2: #f1f4f7;
	--cd-ink: #303233;
	--cd-ink-2: #444444;
	--cd-mute: #6d87a1;
	--cd-mute-2: #94a3b8;
	--cd-success: #16a34a;
	--cd-success-soft: #d8f1e4;
	--cd-warn: #d97706;
	--cd-warn-soft: #fff4e0;
	--cd-danger: #dc2626;
	--cd-danger-soft: #fde2dd;
	--cd-info: #00a3fa;
	--cd-info-soft: #bcdced;
	--cd-dash: #4a2fc9;
	--cd-dash-soft: #f4f0fe;
	--cd-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--cd-radius: 12px;
	--cd-radius-sm: 8px;
	--cd-radius-pill: 999px;
}

/* ----- Page shell ----- */
.cd-page {
	background: var(--cd-page-bg);
	min-height: 100%;
}

.cd-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.cd-shell { padding: 16px 16px 80px; }
}

/* ----- Header (back + breadcrumb + title + ID pill + Edit Customer + ⋯) ----- */
.cd-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 32px;
	border-bottom: 1px solid var(--cd-line);
	background: var(--cd-card-bg);
}

.cd-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.cd-breadcrumb {
	font-size: 13px;
	color: var(--cd-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cd-breadcrumb a { color: var(--cd-mute); text-decoration: none; }
.cd-breadcrumb a:hover { color: var(--cd-navy); text-decoration: underline; }
.cd-breadcrumb-sep { color: var(--cd-mute-2); }

.cd-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--cd-ink);
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 480px;
}

.cd-id-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--cd-line-strong);
	border-radius: var(--cd-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--cd-mute);
	background: var(--cd-card-bg);
	white-space: nowrap;
}

.cd-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ----- Hero card (single card containing avatar + name + sub-line + tiles + CTAs) ----- */
.cd-hero {
	display: flex;
	align-items: stretch;
	gap: 20px;
	padding: 20px;
	background: var(--cd-card-bg);
	border: 1px solid var(--cd-line);
	border-radius: var(--cd-radius);
	box-shadow: var(--cd-card-shadow);
	margin-bottom: 16px;
}

/* Left block — avatar + name + sub-line */
.cd-hero-identity {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	min-width: 0;
	flex: 1 1 auto;
}

.cd-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.cd-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	user-select: none;
	letter-spacing: 0.5px;
}

.cd-hero-namebox {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.cd-hero-name {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 22px;
	font-weight: 600;
	color: var(--cd-ink);
	line-height: 1.2;
	margin: 0;
}

.cd-hero-subline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--cd-mute);
	line-height: 1.4;
}
.cd-hero-subline a { color: var(--cd-mute); text-decoration: none; }
.cd-hero-subline a:hover { color: var(--cd-navy); text-decoration: underline; }

.cd-hero-subline-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cd-hero-subline-sep {
	color: var(--cd-mute-2);
}

.cd-hero-subline-strong {
	color: var(--cd-ink);
	font-weight: 500;
}

/* Hero metric tiles — 3 tiles inside the card (Lifetime value, Avg. booking,
   Next booking), separated from identity by a single border-left. Balance
   was removed because the 4th column crushed at 1378–1500px. */
.cd-hero-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	flex: 1 1 auto;
	align-items: center;
	border-left: 1px solid var(--cd-line);
	padding-left: 20px;
	min-width: 0;
}

.cd-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cd-tile-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 14px;
	/* Allow long single-word labels (e.g. "OUTSTANDING") to wrap to 2 lines
	   at the narrow 1378–1500px viewport where tile columns are tight,
	   instead of getting clipped by the next column or the action buttons. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.cd-tile-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--cd-ink);
	line-height: 18px;
	/* Allow longer values (e.g. "15 May · in 5 days") to wrap to 2 lines
	   inside narrow tile columns at 1378–1500px instead of getting clipped
	   to "15 May · t" by overflow:hidden + text-overflow:ellipsis. The
	   typical values ($1,267.16 / $97.47 / Today / 15 May · in 5 days)
	   all fit cleanly on 1–2 lines now. */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cd-tile-value.success { color: var(--cd-success); }
.cd-tile-value.warn    { color: var(--cd-warn); }
.cd-tile-value.danger  { color: var(--cd-danger); }

.cd-tile-value .cd-tile-mute {
	font-weight: 500;
	color: var(--cd-mute);
	font-size: 12px;
}

.cd-tile-sub {
	color: var(--cd-mute);
	font-size: 11px;
	font-weight: 400;
	white-space: nowrap;
}

.cd-hero-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	align-items: center;
}

/* ----- Buttons (mirrors .sd-btn) ----- */
.cd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--cd-radius-sm);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
}
.cd-btn-primary {
	background: var(--cd-navy);
	color: #fff;
}
.cd-btn-primary:hover { background: var(--cd-navy-700); color: #fff; }

.cd-btn-secondary {
	background: var(--cd-card-bg);
	color: var(--cd-ink);
	border-color: var(--cd-line-strong);
}
.cd-btn-secondary:hover {
	background: var(--cd-soft-bg);
	border-color: var(--cd-mute-2);
	color: var(--cd-ink);
}

.cd-btn-ghost {
	background: transparent;
	color: var(--cd-mute);
}
.cd-btn-ghost:hover { background: var(--cd-soft-bg); color: var(--cd-ink); }

.cd-btn-sm { padding: 6px 12px; font-size: 12px; }

.cd-btn .cd-icon-svg { width: 14px; height: 14px; flex-shrink: 0; }
.cd-btn-secondary .cd-icon-svg { color: var(--cd-navy); }
.cd-btn-primary .cd-icon-svg { color: #fff; }

.cd-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--cd-radius-sm);
	background: var(--cd-card-bg);
	border: 1px solid var(--cd-line-strong);
	color: var(--cd-mute);
	cursor: pointer;
}
.cd-icon-btn:hover {
	background: var(--cd-soft-bg);
	border-color: var(--cd-mute-2);
	color: var(--cd-ink);
}
.cd-icon-btn img, .cd-icon-btn svg { width: 14px; height: 14px; }

@media (max-width: 575px) {
	.cd-icon-btn { min-width: 44px; min-height: 44px; }
}

/* ----- ⋯ menu dropdown ----- */
.cd-menu-wrap { position: relative; }
.cd-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: var(--cd-card-bg);
	border: 1px solid var(--cd-line-strong);
	border-radius: var(--cd-radius-sm);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	padding: 6px;
	z-index: 50;
}
.cd-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--cd-ink);
	cursor: pointer;
	background: transparent;
	border: 0;
	width: 100%;
	text-align: left;
	text-decoration: none;
}
.cd-menu-item:hover { background: var(--cd-soft-bg); }
.cd-menu-item.danger { color: var(--cd-danger); }
.cd-menu-item.danger:hover { background: var(--cd-danger-soft); color: var(--cd-danger); }

/* ----- Tab strip (transparent, just border-bottom) ----- */
.cd-tabs-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--cd-line);
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.cd-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.cd-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--cd-mute);
	cursor: pointer;
	transition: color 120ms, border-color 120ms;
	margin-bottom: -1px;
}
.cd-tab:hover { color: var(--cd-ink); }
.cd-tab.active {
	color: var(--cd-navy);
	border-bottom-color: var(--cd-navy);
	font-weight: 600;
}

.cd-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--cd-radius-pill);
	background: var(--cd-line);
	color: var(--cd-mute);
	font-size: 11px;
	font-weight: 600;
}
.cd-tab.active .cd-tab-badge {
	background: var(--cd-navy);
	color: #fff;
}
.cd-tab-badge.alert {
	background: var(--cd-danger-soft);
	color: var(--cd-danger);
}
.cd-tab.active .cd-tab-badge.alert {
	background: var(--cd-danger);
	color: #fff;
}

/* ----- AI band ----- */
.cd-dash-ai-band {
	margin-bottom: 16px;
}
.cd-dash-ai-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cd-dash-ai-insight { flex: 1 1 auto; min-width: 0; }
.cd-dash-ai-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: transparent;
	color: var(--cd-mute);
	cursor: pointer;
	border: 0;
	flex-shrink: 0;
}
.cd-dash-ai-chevron:hover { background: var(--cd-soft-bg); color: var(--cd-ink); }

/* ----- Card chrome ----- */
.cd-card {
	background: var(--cd-card-bg);
	border: 1px solid var(--cd-line);
	border-radius: var(--cd-radius);
	box-shadow: var(--cd-card-shadow);
	overflow: hidden;
}
.cd-card + .cd-card { margin-top: 16px; }

.cd-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid var(--cd-line);
}
.cd-card-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--cd-ink);
	margin: 0;
	letter-spacing: 0.2px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.cd-card-title-meta {
	color: var(--cd-mute);
	font-weight: 400;
	font-size: 12px;
}
.cd-card-body         { padding: 18px; }
.cd-card-body-tight   { padding: 0; }
.cd-card-body-tight > * { padding: 14px 18px; border-bottom: 1px solid var(--cd-line); }
.cd-card-body-tight > *:last-child { border-bottom: 0; }
.cd-card-body-flat    { padding: 0; }

.cd-card-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: transparent;
	color: var(--cd-mute);
	font-size: 12px;
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
}
.cd-card-action:hover {
	background: var(--cd-soft-bg);
	color: var(--cd-ink);
	border-color: var(--cd-line-strong);
}
.cd-card-action.is-active {
	background: var(--cd-dash-soft);
	color: var(--cd-dash);
	border-color: transparent;
}
.cd-card-action-icon { width: 14px; height: 14px; }

/* ----- Overview layout ----- */
.cd-overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}
@media (max-width: 991px) {
	.cd-overview-grid { grid-template-columns: 1fr; }
}

/* ----- Contact card ----- */
.cd-contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 24px;
}
@media (max-width: 575px) {
	.cd-contact-grid { grid-template-columns: 1fr; }
}
.cd-contact-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cd-contact-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--cd-mute);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.cd-contact-value {
	font-size: 14px;
	color: var(--cd-ink);
	font-weight: 500;
	word-break: break-word;
}
.cd-contact-value-muted { color: var(--cd-mute); font-weight: 400; }
.cd-contact-multiline { white-space: pre-line; }

.cd-contact-input,
.cd-contact-input:focus {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cd-line-strong);
	border-radius: 8px;
	background: var(--cd-card-bg);
	font-size: 14px;
	color: var(--cd-ink);
	outline: none;
}
.cd-contact-input:focus {
	border-color: var(--cd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}
.cd-contact-input.is-invalid { border-color: var(--cd-danger); }

.cd-contact-input-group {
	display: flex;
	gap: 6px;
}
.cd-contact-input-group select { width: 90px; flex: none; }
.cd-contact-input-group .cd-contact-input { flex: 1; }

.cd-contact-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 4px;
}

/* ----- Custom Fields ----- */
.cd-cf-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
}
@media (max-width: 575px) { .cd-cf-grid { grid-template-columns: 1fr; } }

/* ----- Most-booked ----- */
.cd-most-booked-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cd-line);
}
.cd-most-booked-row:last-child { border-bottom: 0; }
.cd-most-booked-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 600;
}
.cd-most-booked-icon.rental     { background: rgba(0, 50, 100, 0.08); color: var(--cd-navy); }
.cd-most-booked-icon.experience { background: var(--cd-success-soft); color: var(--cd-success); }
.cd-most-booked-icon.store      { background: var(--cd-warn-soft); color: var(--cd-warn); }

/* Real product/experience/store-product thumbnail. Same footprint as the
   letter-icon fallback above so row alignment stays consistent. */
.cd-most-booked-thumb {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--cd-soft-bg);
	border: 1px solid var(--cd-line);
}

.cd-most-booked-main { flex: 1; min-width: 0; }
.cd-most-booked-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--cd-ink);
	text-decoration: none;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cd-most-booked-name:hover { color: var(--cd-navy); }
.cd-most-booked-meta {
	font-size: 11px;
	color: var(--cd-mute);
	margin-top: 2px;
}
.cd-most-booked-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--cd-mute);
	flex-shrink: 0;
}

/* ----- Filter pill row ----- */
.cd-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.cd-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--cd-radius-pill);
	background: var(--cd-card-bg);
	border: 1px solid var(--cd-line-strong);
	color: var(--cd-mute);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
}
.cd-pill:hover { background: var(--cd-soft-bg); color: var(--cd-ink); }
.cd-pill.active { background: var(--cd-navy); color: #fff; border-color: var(--cd-navy); }
.cd-pill .cd-pill-count { font-size: 11px; color: var(--cd-mute-2); }
.cd-pill.active .cd-pill-count { color: rgba(255,255,255,0.7); }

/* ----- Communication ----- */
.cd-comm-list { display: flex; flex-direction: column; gap: 0; }
.cd-comm-row {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cd-line);
}
.cd-comm-row:last-child { border-bottom: 0; }
.cd-comm-channel-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--cd-soft-bg);
	color: var(--cd-mute);
	flex-shrink: 0;
}
.cd-comm-channel-icon.email { background: rgba(74, 47, 201, 0.10); color: var(--cd-dash); }
.cd-comm-channel-icon.sms   { background: var(--cd-info-soft); color: var(--cd-info); }
.cd-comm-main { min-width: 0; }
.cd-comm-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
	font-size: 11px;
	color: var(--cd-mute);
}
.cd-comm-channel-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: var(--cd-radius-pill);
	background: var(--cd-soft-bg);
	color: var(--cd-mute);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.cd-comm-status-pill {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: var(--cd-radius-pill);
	background: var(--cd-success-soft);
	color: var(--cd-success);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.cd-comm-status-pill.failed    { background: var(--cd-danger-soft); color: var(--cd-danger); }
.cd-comm-status-pill.queued    { background: var(--cd-warn-soft); color: var(--cd-warn); }
.cd-comm-status-pill.sending   { background: var(--cd-warn-soft); color: var(--cd-warn); }
.cd-comm-status-pill.delivered { background: var(--cd-success-soft); color: var(--cd-success); }
.cd-comm-subject {
	font-size: 14px;
	font-weight: 600;
	color: var(--cd-ink);
	margin: 0;
}
.cd-comm-preview {
	margin-top: 4px;
	font-size: 13px;
	color: var(--cd-mute);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cd-comm-actions {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex-shrink: 0;
}
.cd-comm-action {
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: transparent;
	border: 0;
	color: var(--cd-mute);
	cursor: pointer;
}
.cd-comm-action:hover { background: var(--cd-soft-bg); color: var(--cd-ink); }

/* ----- Activity ----- */
.cd-activity-list { display: flex; flex-direction: column; gap: 0; }
.cd-activity-row {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cd-line);
}
.cd-activity-row:last-child { border-bottom: 0; }
.cd-activity-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cd-soft-bg);
	color: var(--cd-mute);
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
}
.cd-activity-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}
.cd-activity-icon.bookings       { background: rgba(0, 50, 100, 0.08); color: var(--cd-navy); }
.cd-activity-icon.payments       { background: var(--cd-success-soft); color: var(--cd-success); }
.cd-activity-icon.communications { background: rgba(74, 47, 201, 0.10); color: var(--cd-dash); }
.cd-activity-icon.forms          { background: var(--cd-warn-soft); color: var(--cd-warn); }
.cd-activity-icon.note           { background: var(--cd-soft-bg); color: var(--cd-mute); }

.cd-activity-main { min-width: 0; }
.cd-activity-label {
	font-size: 14px;
	color: var(--cd-ink);
	font-weight: 500;
	margin: 0;
}
.cd-activity-meta {
	margin-top: 2px;
	font-size: 12px;
	color: var(--cd-mute);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.cd-activity-meta a { color: var(--cd-navy); text-decoration: none; }
.cd-activity-meta a:hover { text-decoration: underline; }
.cd-activity-meta-sep { color: var(--cd-mute-2); }
.cd-activity-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding-top: 14px;
	font-size: 12px;
	color: var(--cd-mute);
}

/* ----- Notes ----- */
.cd-notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.cd-note {
	position: relative;
	background: var(--cd-soft-bg);
	border-radius: var(--cd-radius-sm);
	border: 1px solid var(--cd-line);
	padding: 14px 14px 28px;
	min-height: 100px;
	display: flex;
	flex-direction: column;
}
.cd-note-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cd-ink-2);
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
}
.cd-note-timestamp {
	position: absolute;
	bottom: 6px;
	right: 10px;
	font-size: 11px;
	color: var(--cd-mute);
}

/* ----- Forms & Surveys (legacy partial host) -----
   waivers.blade.php / surveys.blade.php wrap their content in
   `.waivers-section.mx-4.mt-4` + `.customer-personel-details` (margin-top:
   2rem, white bg) + `.row.p-4` (24px padding). Inside the new cd-card chrome
   that cascades into a giant block with a small title pinned top-left and
   ~150px of empty space below. Strip the nested margins + tighten padding so
   the legacy partial sits flush in cd-card-body-flat. */
.cd-card-body-flat .waivers-section,
.cd-card-body-flat .surveys-section {
	margin: 0 !important;
}
.cd-card-body-flat .customer-personel-details {
	margin-top: 0 !important;
	background: transparent;
	border-radius: 0;
}
.cd-card-body-flat .customer-personel-details .row.p-4 {
	padding: 16px 20px !important;
}
.cd-card-body-flat .customer-personel-details-title {
	font-size: 15px;
	color: var(--cd-ink);
	margin: 0 !important;
}
.cd-card-body-flat .customer-personel-details .col-12.mb-3 {
	margin-bottom: 12px !important;
}
.cd-card-body-flat .customer-personel-details .col-12 > p {
	color: var(--cd-mute);
	font-size: 13px;
	margin: 0;
}

/* ----- Notes (legacy partial host) -----
   The legacy <livewire:customers.customer-details.notes> partial renders a
   4-col CSS grid (.notes-grid-container) plus its own "Note" section title.
   When hosted inside the cd-card chrome that gave us a double-header and a
   single orphaned cell. Overrides below flatten the grid into a vertical
   stack, hide the duplicate title, and re-skin the note tiles to match cd-. */
.cd-notes-host .cd-card-body-flat .notes-section {
	margin: 0 !important;
	padding: 14px 18px 18px !important;
	background: transparent;
	border-radius: 0;
}
.cd-notes-host .cd-card-body-flat .notes-section.mx-4 { margin-left: 0 !important; margin-right: 0 !important; }
.cd-notes-host .cd-card-body-flat .notes-section.p-4 { padding: 14px 18px 18px !important; }
.cd-notes-host .cd-card-body-flat .notes-section-title { display: none; }
.cd-notes-host .cd-card-body-flat .notes-grid-container {
	display: flex;
	flex-direction: column;
	grid-template-columns: none;
	gap: 10px;
	margin-top: 0 !important;
}
/* Add-note composer (#4294) - a plain input row above the saved-note cards;
   the grey card chrome belongs to saved notes only. */
.cd-notes-host .cd-card-body-flat .note-composer textarea {
	background: #fff;
	border: 1px solid var(--cd-line-strong);
	border-radius: 8px;
	font-size: 13px;
	padding: 8px 10px;
	min-height: 64px;
	color: var(--cd-ink);
}
.cd-notes-host .cd-card-body-flat .note-item.grid-item {
	background: var(--cd-soft-bg);
	color: var(--cd-ink);
	border-radius: 12px;
	padding: 12px 12px 8px;
	height: auto;
	min-height: 86px;
	text-align: left;
	border: 1px solid var(--cd-line);
}
.cd-notes-host .cd-card-body-flat .note-item textarea {
	background: #fff;
	border: 1px solid var(--cd-line-strong);
	border-radius: 8px;
	font-size: 13px;
	padding: 8px 10px;
	min-height: 64px;
	color: var(--cd-ink);
}
.cd-notes-host .cd-card-body-flat .note-item p {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cd-ink-2);
	margin: 0;
	padding-right: 36px;
	white-space: pre-wrap;
	word-break: break-word;
}
.cd-notes-host .cd-card-body-flat .note-item-input-save-btn,
.cd-notes-host .cd-card-body-flat .note-item-input-update-btn {
	background: var(--cd-navy);
	color: #fff;
	border-radius: var(--cd-radius-pill);
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	border: none;
}
.cd-notes-host .cd-card-body-flat .note-item-input-save-btn:hover,
.cd-notes-host .cd-card-body-flat .note-item-input-update-btn:hover {
	background: var(--cd-navy-700);
}
.cd-notes-host .cd-card-body-flat .note-item-input-delete-btn {
	color: var(--cd-danger);
	font-size: 13px;
	font-weight: 500;
}
.cd-notes-host .cd-card-body-flat .notes-section-timestamp {
	color: var(--cd-mute);
	font-size: 11px;
}
.cd-notes-host .cd-card-body-flat .notes-section-edit-button img,
.cd-notes-host .cd-card-body-flat .note-item-input-cross-btn img {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}
.cd-notes-host .cd-card-body-flat .notes-section-edit-button:hover img,
.cd-notes-host .cd-card-body-flat .note-item-input-cross-btn:hover img {
	opacity: 1;
}

/* ----- Empty states ----- */
.cd-empty-tab {
	padding: 48px 24px;
	text-align: center;
}
.cd-empty-tab-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--cd-ink);
	margin-bottom: 6px;
}
.cd-empty-tab-body {
	font-size: 13px;
	color: var(--cd-mute);
	max-width: 400px;
	margin: 0 auto 14px;
}
.cd-empty-inline {
	padding: 14px;
	font-size: 13px;
	color: var(--cd-mute);
	text-align: center;
	background: var(--cd-soft-bg);
	border-radius: var(--cd-radius-sm);
}

/* ----- Help banner spacing inside tab body ----- */
.cd-help-banner-wrap { padding: 18px 0 0; }

/* ----- Delete modal helper ----- */
.cd-modal-trash {
	width: 56px;
	height: 56px;
	margin: 0 auto 10px;
	display: block;
}

/* ----- Responsive ----- */
/* At narrower-than-wide desktops, collapse hero secondary CTAs to icon-only
   so the metric tiles keep their breathing room. The "+ New booking" primary
   stays full-width because it's the page's only primary action.
   Threshold 1500px: typical 1378–1440px laptops fall under this so labels
   collapse and tiles stay legible. */
@media (max-width: 1500px) {
	.cd-hero-actions .cd-btn-secondary span { display: none; }
	.cd-hero-actions .cd-btn-secondary { padding: 9px 10px; }
}

@media (max-width: 991px) {
	.cd-hero { flex-direction: column; align-items: stretch; }
	.cd-hero-tiles { border-left: 0; padding-left: 0; border-top: 1px solid var(--cd-line); padding-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cd-hero-actions { justify-content: flex-end; }
	.cd-hero-actions .cd-btn-secondary span { display: inline; }
	.cd-hero-actions .cd-btn-secondary { padding: 9px 16px; }
}

@media (max-width: 768px) {
	.cd-header { padding: 10px 14px; }
	.cd-header-right .cd-btn span { display: inline; }
	.cd-tab { padding: 10px 10px; font-size: 13px; }
	.cd-content { padding: 0; }
}

@media print {
	.cd-header, .cd-tabs-bar, .cd-dash-ai-band, .cd-hero-actions { display: none !important; }
}

/* ==========================================================================
   Group detail (#3046 / #3054) — page-scoped tweaks.
   ========================================================================== */

/* The shared .form-control-category picker renders ~24px tall by default,
   which reads as a cramped search box. On the group detail search / org
   pickers give it a proper ~40px search-bar height with vertically-centered
   content. Scoped to .gd-picker so no other .form-control-category is touched. */
.gd-picker .form-control-category {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 12px;
}

.gd-picker .form-control-category .form-control-category-input {
	flex: 1 1 auto;
	width: auto;
	padding: 0;
}

.gd-picker .form-control-category .input-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

/* Member (and organization) names are clear, tappable links to the customer
   record — navy with a hover underline, matching the cd link convention
   (e.g. .cd-activity-meta a). The app styles `.table td a` dark with an
   `!important` cell-color rule, so these scoped links need `!important` to win
   it back (narrowly, only inside the members table / usage card). */
.cd-card-body .gd-members-table td a.gd-member-link,
.cd-contact-value a.gd-member-link {
	color: var(--cd-navy) !important;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.cd-card-body .gd-members-table td a.gd-member-link:hover,
.cd-contact-value a.gd-member-link:hover {
	color: var(--cd-navy-700) !important;
	text-decoration: underline;
}

/* Picker result dropdowns (org / member search) inside a cd-card are
   position:absolute overlays; the hosting card must not clip them, or the
   list gets cut off at the card's bottom edge (org picker in the Usage card).
   These cards (Members, Usage) have no edge content that relies on clipping. */
.cd-card:has(.gd-picker) { overflow: visible; }

.cd-card:has(.gd-picker) .gd-picker { position: relative; }

.cd-card:has(.gd-picker) .gd-picker .dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 60;
}

/* The results list is normally its own position:absolute layer; let it fill
   the positioned .dropdown above so .dropdown has real height and its top/bottom
   anchor actually moves the list. */
.cd-card:has(.gd-picker) .gd-picker .dropdown .dropdown-options {
	position: static;
	width: 100%;
}

/* The organization picker sits at the bottom of the Usage card, so open its
   results UPWARD — a downward list would run off the page and get clipped. The
   member-search picker (top of the Members card) keeps opening downward. */
.cd-card:has(.gd-picker) .cd-contact-value .gd-picker .dropdown {
	top: auto;
	bottom: calc(100% + 4px);
}

/* Groups the customer belongs to (Overview tab) — tappable rows that link to
   each group's detail page. Mirrors the Most-booked rail rows so it reads as a
   native cd card (13px name, muted count, hairline separators). */
.cd-group-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cd-line);
	text-decoration: none;
}

.cd-group-row:last-child { border-bottom: 0; }

.cd-group-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--cd-ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cd-group-row:hover .cd-group-name { color: var(--cd-navy); }

.cd-group-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--cd-mute);
	flex-shrink: 0;
	white-space: nowrap;
}

/* ==== css/program-communications.css ==== */
/* ==========================================================================
   Program Communications (#3549) — the message plan on a program, and the
   same plan resolved to real dates on a cohort.
   --------------------------------------------------------------------------
   Namespaced .pc-*. Card chrome, radii, shadows and ink match .pd-card in
   product-detail.css exactly — this is not a fifth card shape, it is the same
   one. Tokens are reused from :root there (loaded ahead of this file in the
   base layout), with .pc- aliases so a future token change lands once.
   ========================================================================== */

:root {
	--pc-navy: var(--pd-navy, #003264);
	--pc-line: var(--pd-line, #eef0f4);
	--pc-line-strong: var(--pd-line-strong, #dfe3e8);
	--pc-card-bg: var(--pd-card-bg, #ffffff);
	--pc-soft-bg: var(--pd-soft-bg, #f7f7f7);
	--pc-ink: var(--pd-ink, #303233);
	--pc-mute: var(--pd-mute, #6d87a1);
	--pc-mute-2: var(--pd-mute-2, #94a3b8);
	--pc-success: var(--pd-success, #16a34a);
	--pc-success-soft: var(--pd-success-soft, #d8f1e4);
	--pc-warn: var(--pd-warn, #d97706);
	--pc-warn-soft: var(--pd-warn-soft, #fff4e0);
	--pc-danger: var(--pd-danger, #dc2626);
	--pc-danger-soft: var(--pd-danger-soft, #fde2dd);
	--pc-info: var(--pd-info, #00a3fa);
	--pc-violet: #6d4bd8;
	--pc-violet-soft: #efeafc;
	--pc-radius: var(--pd-radius, 12px);
	--pc-radius-sm: var(--pd-radius-sm, 8px);
	--pc-shadow: var(--pd-card-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03));
}

/* ----- Card (matches .pd-card) ----- */
.pc-card {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	overflow: hidden;
}

/* The timeline card is the one that holds absolutely-positioned add menus
   between its rows. The last "Add a message here" sits near the bottom edge,
   so a clipping card cuts its menu in half. */
.pc-card--timeline { overflow: visible; }

.pc-card + .pc-card { margin-top: 16px; }

.pc-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--pc-line);
	flex-wrap: wrap;
}

.pc-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-card-sub {
	font-size: 12.5px;
	color: var(--pc-mute);
	font-weight: 400;
}

.pc-card-body { padding: 18px; }

/* ----- The vertical timeline ----- */
.pc-line-wrap {
	position: relative;
	padding-left: 34px;
}

.pc-line-wrap::before {
	content: "";
	position: absolute;
	left: 11px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--pc-line-strong);
	border-radius: 2px;
}

.pc-node { position: relative; margin-bottom: 12px; }

.pc-node::before {
	content: "";
	position: absolute;
	left: -28px;
	top: 18px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pc-card-bg);
	border: 2px solid var(--pc-navy);
	box-shadow: 0 0 0 3px var(--pc-card-bg);
}

/* A fixed moment the owner can't delete — muted, filled. */
.pc-node--anchor::before {
	border-color: var(--pc-line-strong);
	background: var(--pc-line-strong);
	box-shadow: 0 0 0 4px var(--pc-card-bg);
}

.pc-node--off::before { border-color: var(--pc-line-strong); }

.pc-anchor {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0 8px;
	flex-wrap: wrap;
}

.pc-anchor-kicker {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pc-mute-2);
}

.pc-anchor-title { font-size: 13.5px; font-weight: 600; color: var(--pc-ink); }
.pc-anchor-meta { font-size: 12.5px; color: var(--pc-mute); }

/* ----- A message card ----- */
.pc-step {
	border: 1px solid var(--pc-line);
	background: var(--pc-card-bg);
	border-radius: var(--pc-radius-sm);
	padding: 13px 15px;
	box-shadow: var(--pc-shadow);
}

.pc-step--off { background: var(--pc-soft-bg); opacity: 0.75; }

.pc-step-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.pc-step-kicker {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pc-mute-2);
	margin-bottom: 3px;
}

.pc-step-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--pc-ink);
	word-break: break-word;
}

.pc-step-preview {
	font-size: 12.5px;
	color: var(--pc-mute);
	margin: 0;
	word-break: break-word;
}

.pc-step-preview strong { color: var(--pc-ink); font-weight: 500; }

.pc-tools { display: flex; gap: 5px; flex: none; }

.pc-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-line-strong);
	background: var(--pc-card-bg);
	color: var(--pc-mute);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.pc-icon-btn:hover { color: var(--pc-ink); border-color: var(--pc-mute-2); }
.pc-icon-btn--danger:hover { color: var(--pc-danger); border-color: var(--pc-danger); }
.pc-icon-btn i { font-size: 13px; }

/* Inline timing / audience / channel row */
.pc-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 11px;
	margin-top: 11px;
	border-top: 1px dashed var(--pc-line);
}

.pc-inline-label { font-size: 12.5px; color: var(--pc-mute-2); font-weight: 500; }

/* Selects and the number box share the site's control height so a row never
   mixes a full control with a small one. */
.pc-select,
.pc-date,
.pc-number {
	height: 34px;
	border-radius: var(--pc-radius-sm);
	border: 1px solid var(--pc-line-strong);
	background: var(--pc-card-bg);
	color: var(--pc-ink);
	font-size: 12.5px;
	font-weight: 500;
	padding: 0 10px;
}

.pc-number { width: 60px; text-align: center; font-weight: 600; }
.pc-date { width: 150px; font-weight: 600; }
.pc-select { max-width: 220px; }

.pc-chan {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 9px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 600;
	background: #e9f0ff;
	color: #2456d6;
}

.pc-chan--sms { background: var(--pc-violet-soft); color: var(--pc-violet); }
.pc-chan i { font-size: 11px; }

.pc-cost-note { font-size: 11.5px; color: var(--pc-mute-2); }

/* Add-a-message affordance between steps */
.pc-add { display: flex; align-items: center; gap: 9px; margin: 2px 0 14px; }

.pc-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: 9px;
	border: 1px dashed var(--pc-line-strong);
	background: transparent;
	color: var(--pc-mute);
	font-weight: 600;
	font-size: 12.5px;
	cursor: pointer;
}

.pc-add-btn:hover {
	border-color: var(--pc-navy);
	color: var(--pc-navy);
	background: #f2f6fb;
}

.pc-add-menu {
	position: absolute;
	z-index: 30;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
	padding: 6px;
	width: 270px;
}

.pc-add-menu-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 9px 10px;
	border-radius: var(--pc-radius-sm);
	border: 0;
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
}

.pc-add-menu-item:hover { background: var(--pc-soft-bg); }
.pc-add-menu-item i { color: var(--pc-navy); margin-top: 2px; }
.pc-add-menu-name { font-weight: 600; font-size: 13px; color: var(--pc-ink); }
.pc-add-menu-desc { font-size: 11.5px; color: var(--pc-mute); }

/* Summary + footnote under the timeline */
.pc-summary {
	margin-top: 6px;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	padding: 12px 15px;
	font-size: 13px;
	color: var(--pc-ink);
}

.pc-note { font-size: 12px; color: var(--pc-mute); margin: 9px 2px 0; }

/* ----- Empty state (matches .{m}-empty-tab) ----- */
.pc-empty-tab { text-align: center; padding: 44px 20px; }

.pc-empty-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #e9f0ff;
	color: #2456d6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 14px;
}

.pc-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--pc-ink); }

.pc-empty-text {
	margin: 0 auto 18px;
	color: var(--pc-mute);
	font-size: 13px;
	max-width: 46ch;
}

.pc-starter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.pc-starter-btn {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 9px;
	padding: 9px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pc-mute);
	cursor: pointer;
}

.pc-starter-btn:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

/* The "(4 messages)" note inside a starter button. Bootstrap's .text-muted
   carries the body font, so inside a button it rendered in a different face
   than the label beside it — inherit explicitly instead. */
.pc-starter-btn-note {
	font: inherit;
	color: var(--pc-mute-2);
	font-weight: 500;
}

/* Label-left / switch-right row inside an empty state — mirrors
   .pd-empty-tab-toggle on the product-detail Variations tab, so the one
   control that turns a feature on sits where the owner is already looking. */
.pc-empty-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	max-width: 300px;
	margin: 16px auto 0;
	padding: 10px 14px;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
}

.pc-empty-toggle-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--pc-ink);
}

/* ----- Cohort schedule ----- */
.pc-stats { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }

.pc-stat {
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow);
	padding: 11px 15px;
	min-width: 130px;
}

.pc-stat-n { font-size: 20px; font-weight: 700; color: var(--pc-ink); line-height: 1.2; }
.pc-stat-n--upcoming { color: var(--pc-navy); }
.pc-stat-n--warn { color: var(--pc-warn); }
.pc-stat-l { font-size: 11.5px; color: var(--pc-mute); font-weight: 500; }

.pc-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 23px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	white-space: nowrap;
}

.pc-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.pc-status--sent { background: var(--pc-success-soft); color: var(--pc-success); }
.pc-status--scheduled { background: #eef1f6; color: #5b6a86; }
.pc-status--soon { background: #e9f0ff; color: #2456d6; }
.pc-status--skipped { background: #eef1f6; color: #5b6a86; }
.pc-status--failed { background: var(--pc-danger-soft); color: var(--pc-danger); }
.pc-status--warn { background: var(--pc-warn-soft); color: var(--pc-warn); }

.pc-when { font-weight: 600; color: var(--pc-ink); }
.pc-when-sub { font-size: 11.5px; color: var(--pc-mute); }
.pc-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pc-row--muted td { opacity: 0.62; }

/* ----- A cohort's sent timeline: expandable entries ----- */
.pc-sent-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

.pc-sent-main { display: block; min-width: 0; }

.pc-sent-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.pc-sent-count { font-size: 12px; color: var(--pc-mute); font-weight: 500; }

.pc-sent-chevron {
	color: var(--pc-mute-2);
	font-size: 13px;
	flex: none;
	margin-top: 4px;
	transition: transform 0.15s ease;
}

.pc-sent-chevron.is-open { transform: rotate(180deg); }

.pc-sent-detail {
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px dashed var(--pc-line);
}

.pc-people { list-style: none; margin: 0; padding: 0; }

.pc-person {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--pc-line);
	flex-wrap: wrap;
}

.pc-person:last-child { border-bottom: 0; }
.pc-person-who { display: flex; flex-direction: column; min-width: 0; }
.pc-person-name { font-size: 13px; font-weight: 500; color: var(--pc-ink); }

.pc-person-where {
	font-size: 11.5px;
	color: var(--pc-mute);
	word-break: break-word;
}

.pc-sent-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px dashed var(--pc-line);
}

/* ----- Empty inline (a sub-component with nothing in it) ----- */
.pc-empty-inline {
	padding: 18px;
	text-align: center;
	color: var(--pc-mute);
	font-size: 13px;
	border: 1px dashed var(--pc-line-strong);
	border-radius: var(--pc-radius-sm);
}

/* ----- The message editor, inline in the timeline (#3582) -----
   It replaces the message's own card in place, so it keeps the card's box and
   just grows: same border, same radius, accented so it reads as "this is the
   one you're working on" without leaving the timeline. */
.pc-editor {
	border: 1px solid var(--pc-navy);
	background: var(--pc-card-bg);
	border-radius: var(--pc-radius-sm);
	box-shadow: 0 0 0 3px #eaf0f7;
	padding: 15px 17px;
}

.pc-editor-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 13px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--pc-line);
}

.pc-editor-title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-editor-grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.pc-editor-side { min-width: 0; }
.pc-editor-canvas { min-width: 0; }

.pc-field { margin-bottom: 15px; }

.pc-field-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--pc-mute);
	margin-bottom: 6px;
}

.pc-hint { font-size: 11.5px; color: var(--pc-mute-2); margin-top: 5px; }

.pc-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--pc-line-strong);
	border-radius: 9px;
	padding: 10px 12px;
	cursor: pointer;
	margin-bottom: 8px;
	background: var(--pc-card-bg);
}

.pc-radio--on { border-color: var(--pc-navy); background: #f2f6fb; }
.pc-radio-name { font-weight: 600; font-size: 13px; color: var(--pc-ink); }
.pc-radio-desc { font-size: 11.5px; color: var(--pc-mute); }

.pc-tag {
	display: inline-block;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: 6px;
	padding: 2px 7px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--pc-mute);
	margin: 0 4px 4px 0;
	cursor: pointer;
}

.pc-tag:hover { border-color: var(--pc-navy); color: var(--pc-navy); }

.pc-sms-preview {
	max-width: 320px;
	margin: 0 auto;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	border-radius: 26px;
	padding: 18px 14px;
	box-shadow: var(--pc-shadow);
}

.pc-sms-bubble {
	background: #e9f0ff;
	color: #12213f;
	border-radius: 16px 16px 16px 4px;
	padding: 11px 13px;
	font-size: 12.5px;
	line-height: 1.5;
	word-break: break-word;
	white-space: pre-wrap;
}

.pc-sms-meta { text-align: center; font-size: 10.5px; color: var(--pc-mute-2); margin-top: 8px; }

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
	.pc-editor-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
	.pc-line-wrap { padding-left: 26px; }
	.pc-line-wrap::before { left: 7px; }
	.pc-node::before { left: -25px; }

	.pc-step-top { flex-direction: column; }

	/* Touch targets stay at 44px on a phone. flex: none matters — six buttons
	   in one row otherwise shrink below the minimum. */
	.pc-tools { width: 100%; margin-top: 8px; flex-wrap: wrap; }
	.pc-icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
	.pc-add-btn { width: 100%; height: 44px; justify-content: center; }
	.pc-select, .pc-number, .pc-date { height: 40px; }
	.pc-inline { gap: 6px; }
	.pc-tag { min-height: 44px; padding: 0 12px; }
	.pc-select { max-width: 100%; }
}

/* ==== css/customer-messages.css ==== */
/* ==========================================================================
   Customer messages (#3589 / #3590 / #3591) — Settings → Customer messages.
   --------------------------------------------------------------------------
   The timeline itself is the SAME one programs use: this file adds nothing
   that .pc-* already covers, and everything here is namespaced .cm-*. What it
   does add is the two things a shop-wide plan has and a program plan does
   not: the locked "we always send this" card, and the timing controls that
   moved off Settings → Email templates onto the card they control.

   Tokens are the .pc-* aliases (program-communications.css loads first in the
   base layout), which are themselves the .pd-* card tokens — so this is not a
   new card shape, it is the same one.
   ========================================================================== */

/* ----- Locked system card -----
   Grayed on purpose: the owner can reword it and retime it, but cannot delete
   it, and the surface says so before the padlock does. A cooler, slightly
   stronger tint than --pc-soft-bg — at #f7f7f7 the card read as white on a
   white page and the "we always send this" signal was invisible. */
.cm-step--system {
	background: #f3f6f9;
	border-color: var(--pc-line-strong);
}

.cm-lock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--pc-line);
	color: var(--pc-mute);
	white-space: nowrap;
}

.cm-lock i { font-size: 9px; }

/* ----- Timing row on a card -----
   Same dashed divider and same 40px-family controls as .pc-inline, so a
   locked card and an owner's own card read as one family. */
.cm-timing {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding-top: 11px;
	margin-top: 11px;
	border-top: 1px dashed var(--pc-line-strong);
}

.cm-timing-label {
	font-size: 13px;
	color: var(--pc-mute);
	font-weight: 500;
}

.cm-timing-note {
	font-size: 13px;
	color: var(--pc-mute);
}

/* The directions box sits under its own timing row, full width. */
.cm-timing-field { width: 100%; margin-top: 10px; }
.cm-timing-field label { font-size: 13px; color: var(--pc-mute); font-weight: 500; display: block; margin-bottom: 5px; }
.cm-timing-field textarea { max-width: 620px; }

/* ----- Cross-link banner -----
   Used at the top of this page and, in reverse, at the top of Settings →
   Email templates. One shape, two directions. */
.cm-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--pc-soft-bg);
	border: 1px solid var(--pc-line);
	border-radius: var(--pc-radius-sm);
	padding: 14px 16px;
	margin-bottom: 16px;
}

.cm-banner-icon {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--pc-card-bg);
	border: 1px solid var(--pc-line-strong);
	color: var(--pc-navy);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 14px;
}

.cm-banner-body { flex: 1; min-width: 220px; }
.cm-banner-body strong { display: block; font-size: 14px; margin-bottom: 2px; color: var(--pc-ink); }
.cm-banner-body span { font-size: 13px; color: var(--pc-mute); }

/* ⛔ public/style.css sets a global `a { display: block }`, so every link in a
   sentence here would break onto its own line and orphan the period after it.
   Scope it back for this module's copy — the same fix .ct-card carries. */
.cm-banner a:not(.btn),
.cm-step-note a:not(.btn),
.pc-step-preview a:not(.btn),
.pc-summary a:not(.btn),
.pc-note a:not(.btn) {
	display: inline;
}

/* The "Change the wording" / "Change when this sends" links under a card. */
.cm-step-note {
	font-size: 13px;
	color: var(--pc-mute);
	margin: 0;
}

.cm-step-note a { color: var(--pc-navy); font-weight: 600; text-decoration: none; }
.cm-step-note a:hover { text-decoration: underline; }

/* The card the owner was deep-linked to, so "change when this sends" lands
   somewhere obvious rather than just scrolling. */
.cm-step--focus {
	border-color: var(--pc-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

@media (max-width: 767.98px) {
	.cm-timing { gap: 6px; }
	.cm-banner { flex-direction: column; }
	/* A switch has to stay a real 44px target on a phone. */
	.cm-step-switch { min-height: 44px; display: flex; align-items: center; }
}

/* ========================================================================
   Line-of-business tabs, the inherit control and the resolved chain
   (#3592 / #3593 / #3594).
   ------------------------------------------------------------------------
   Same .cm-* namespace and the same --pc-* tokens as above. The timeline
   itself stays Program Communications' — reused, never restyled.
   ======================================================================== */

/* ----- The inherit banner: the one control, on every level ----- */
.cm-inherit {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--pc-card-bg, #fff);
	border: 1px solid var(--pc-line, #eef0f4);
	border-radius: var(--pc-radius, 12px);
	box-shadow: var(--pc-shadow);
	padding: 14px 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* Broken away — the accent state, so "this one is different" is visible
   without reading a word. */
.cm-inherit--own {
	border-color: var(--pc-navy, #003264);
	background: #f4f8fc;
}

.cm-inherit-icon {
	width: 34px;
	height: 34px;
	border-radius: var(--pc-radius-sm, 8px);
	background: var(--pc-soft-bg, #f7f7f7);
	color: var(--pc-mute, #6d87a1);
	display: grid;
	place-items: center;
	flex: none;
	font-size: 14px;
}

.cm-inherit--own .cm-inherit-icon {
	background: #e3edf6;
	color: var(--pc-navy, #003264);
}

.cm-inherit-body { flex: 1 1 260px; min-width: 0; }

.cm-inherit-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pc-ink, #303233);
	margin-bottom: 2px;
}

.cm-inherit-text {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	line-height: 1.5;
}

/* public/style.css sets a global `a { display: block }`, so ANY bare <a> in
   sentence copy breaks onto its own line and orphans the trailing period.
   Every surface on this screen that can carry an inline link scopes it back.
   Verified in the browser: each sentence must flow as one paragraph. */
.cm-inherit a:not(.btn),
.cm-card a:not(.btn),
.cm-advanced a:not(.btn),
.cm-note a:not(.btn),
.pc-step-preview a:not(.btn) {
	display: inline;
}

.cm-inherit-act {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	margin-left: auto;
}

.cm-inherit-switch-label {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--pc-mute, #6d87a1);
	cursor: pointer;
}

/* ----- The resolved chain: All bookings -> Rentals [in use] -> This item ----- */
.cm-chain {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 9px;
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
}

.cm-chain-arrow { color: var(--pc-mute-2, #94a3b8); }
.cm-chain-now { color: var(--pc-ink, #303233); font-weight: 600; }

.cm-chain-win {
	background: var(--pc-success-soft, #d8f1e4);
	color: var(--pc-success, #16a34a);
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11.5px;
}

/* A level that exists but was beaten by a more specific one. */
.cm-chain-past { text-decoration: line-through; opacity: 0.6; }
.cm-chain-unset { color: var(--pc-mute-2, #94a3b8); }

/* ----- Locked system emails ----- */
.cm-step--locked { background: var(--pc-soft-bg, #f7f7f7); }

.pc-node--locked::before {
	border-color: var(--pc-line-strong, #dfe3e8);
	background: var(--pc-line-strong, #dfe3e8);
}

.cm-lockchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 20px;
	padding: 0 8px;
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 600;
	background: #eef1f6;
	color: #5b6a86;
	letter-spacing: 0.02em;
}

.cm-lockchip i { font-size: 9px; }

/* A plan shown for information only — it is edited at the level that owns it. */
.cm-readonly { opacity: 0.78; }

.cm-note {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	margin: 14px 2px 0;
}

/* ----- The advanced door: "set up a different flow for one of them" ----- */
.cm-advanced {
	margin-top: 16px;
	border: 1px dashed var(--pc-line-strong, #dfe3e8);
	border-radius: var(--pc-radius-sm, 8px);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.cm-advanced-text {
	font-size: 12.5px;
	color: var(--pc-mute, #6d87a1);
	flex: 1 1 260px;
	line-height: 1.5;
}

.cm-advanced-text strong { color: var(--pc-ink, #303233); font-weight: 600; }

.cm-lob-pick { display: flex; gap: 8px; flex-wrap: wrap; }

.cm-lob-btn {
	height: 40px;
	padding: 0 14px;
	border-radius: var(--pc-radius-sm, 8px);
	border: 1px solid var(--pc-line-strong, #dfe3e8);
	background: var(--pc-card-bg, #fff);
	color: var(--pc-ink, #303233);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
}

.cm-lob-btn:hover:not(:disabled) {
	border-color: var(--pc-navy, #003264);
	color: var(--pc-navy, #003264);
}

.cm-lob-btn:disabled { opacity: 0.5; cursor: default; }

/* ----- Line-of-business tabs (only once one exists) ----- */
.cm-scope-tabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var(--pc-line, #eef0f4);
	margin-bottom: 18px;
	overflow-x: auto;
	/* The nav scrolls sideways on a phone rather than squashing. */
	-webkit-overflow-scrolling: touch;
}

.cm-scope-tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 9px 2px 11px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--pc-mute, #6d87a1);
	white-space: nowrap;
	cursor: pointer;
}

.cm-scope-tab.active {
	color: var(--pc-navy, #003264);
	border-bottom-color: var(--pc-navy, #003264);
	font-weight: 600;
}

/* Status at a glance: Following all / Own messages. */
.cm-scope-chip {
	display: inline-block;
	margin-left: 7px;
	font-size: 10.5px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 20px;
	background: #eef1f6;
	color: #5b6a86;
	vertical-align: middle;
}

.cm-scope-chip--own {
	background: var(--pc-success-soft, #d8f1e4);
	color: var(--pc-success, #16a34a);
}

/* ----- Lazy placeholder ----- */
.cm-inherit--loading { opacity: 0.6; }

.cm-skeleton {
	display: block;
	background: var(--pc-soft-bg, #f7f7f7);
	border-radius: 6px;
	height: 12px;
}

.cm-skeleton--title { width: 180px; margin-bottom: 8px; }
.cm-skeleton--text { width: 320px; max-width: 100%; }
.cm-skeleton--row { height: 54px; margin-bottom: 12px; border-radius: var(--pc-radius-sm, 8px); }

/* ----- Phone ----- */
@media (max-width: 767.98px) {
	.cm-inherit { gap: 11px; padding: 13px 14px; }

	/* The switch drops under the copy instead of squeezing beside it, and
	   keeps a full-width tap target. */
	.cm-inherit-act {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
		padding-top: 4px;
	}

	.cm-advanced { gap: 12px; }
	.cm-lob-pick { width: 100%; }
	.cm-lob-btn { flex: 1 1 auto; min-height: 44px; }
	.cm-scope-tabs { gap: 16px; }
}

/* Touch targets on a phone. The tab row sat at 42px — under the 44px minimum
   the rest of the app holds to. */
@media (max-width: 767.98px) {
	.cm-scope-tab { min-height: 44px; padding-top: 11px; padding-bottom: 13px; }
	.cm-lob-btn { min-height: 44px; }
}

/* The default/custom pair either side of the switch (#3617, #3618): the active
   end is the one in ink, so state reads without parsing the sentence. */
.cm-inherit-opt { color: var(--pc-mute-2, #93a5b8); font-weight: 500; }
.cm-inherit-opt--on { color: var(--pc-navy, #003264); font-weight: 600; }

/* #3621 — the two states are not shades of the same thing: default is the
   inherited, quieter one; custom is a deliberate choice, so it carries the
   brand navy rather than a second gray. */
.cm-scope-chip { background: #eef1f6; color: #5b6a86; }
.cm-scope-chip--own {
	background: color-mix(in srgb, var(--pc-navy, #003264) 12%, #fff);
	color: var(--pc-navy, #003264);
}

/* #3622 — where a line of business gets its own flow, at the top of All
   bookings rather than a tab nobody asked for. */
.cm-scope-switches {
	background: var(--pc-soft-bg, #f7f7f7);
	border: 1px solid var(--pc-line, #eef0f4);
	border-radius: var(--pc-radius-sm, 10px);
	padding: 14px 16px;
	margin-bottom: 18px;
}

.cm-scope-switches-head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--pc-ink, #16233a);
	margin-bottom: 10px;
}

.cm-help-dot { color: var(--pc-mute-2, #93a5b8); font-size: 12.5px; cursor: help; }

.cm-scope-switch-row { display: flex; flex-wrap: wrap; gap: 10px 26px; }

.cm-scope-switch { display: flex; align-items: center; gap: 10px; }

.cm-scope-switch-label {
	font-size: 13px;
	color: var(--pc-mute, #6d87a1);
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.cm-scope-switch { width: 100%; justify-content: space-between; min-height: 44px; }
}

/* ==== css/staff-detail.css ==== */
/* ==========================================================================
   Staff Detail Redesign — `.sd-` namespace
   --------------------------------------------------------------------------
   Visual restyle of /staff/detail/{staff}. Mirrors the shipped Product Detail
   chrome (`.pd-`) — same tokens, same shell shape, same card primitives. Per
   docs/STAFF_DETAIL_REDESIGN_PLAN.md the page has 5 tabs (Profile / Schedule
   / Performance / Documents / Activity), no `⋯` menu in the header (Q13),
   single `[+ Assign shift]` CTA in the hero (Q14), 4 metric tiles (Q11), no
   Permissions card (Q10).
   ========================================================================== */

:root {
	--sd-navy: #003264;
	--sd-navy-700: #14457A;
	--sd-line: #eef0f4;
	--sd-line-strong: #dfe3e8;
	--sd-card-bg: #ffffff;
	--sd-page-bg: #f6f7f9;
	--sd-soft-bg: #f7f7f7;
	--sd-soft-bg-2: #f1f4f7;
	--sd-ink: #303233;
	--sd-ink-2: #444444;
	--sd-mute: #6d87a1;
	--sd-mute-2: #94a3b8;
	--sd-success: #16a34a;
	--sd-success-soft: #d8f1e4;
	--sd-success-bg: #f0fdf4;
	--sd-warn: #d97706;
	--sd-warn-soft: #fff4e0;
	--sd-danger: #dc2626;
	--sd-danger-soft: #fde2dd;
	--sd-info: #00a3fa;
	--sd-info-soft: #bcdced;
	--sd-dash: #4a2fc9;
	--sd-dash-soft: #f4f0fe;
	--sd-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
	--sd-radius: 12px;
	--sd-radius-sm: 8px;
	--sd-radius-pill: 999px;
	--sd-vacation: #003264;
	--sd-sick: #dc3545;
	--sd-personal: #fd7e14;
	--sd-other: #6c757d;
}

/* ----- Page shell ----- */
.sd-page {
	background: var(--sd-page-bg);
	min-height: 100%;
}

.sd-shell {
	padding: 24px 32px 12px;
	max-width: 1600px;
	margin: 0 auto;
}

@media (max-width: 991px) {
	.sd-shell {
		padding: 16px 16px 80px;
	}
}

/* ----- Header (back + breadcrumb + title + ID pill + invite chip + Edit Staff button) ----- */
.sd-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 32px;
	border-bottom: 1px solid var(--sd-line);
	background: var(--sd-card-bg);
}

.sd-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.sd-breadcrumb {
	font-size: 13px;
	color: var(--sd-mute);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sd-breadcrumb a {
	color: var(--sd-mute);
	text-decoration: none;
}

.sd-breadcrumb a:hover {
	color: var(--sd-navy);
	text-decoration: underline;
}

.sd-breadcrumb-sep {
	color: var(--sd-mute-2);
}

.sd-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--sd-ink);
	line-height: 26px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 480px;
}

.sd-id-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border: 1px solid var(--sd-line-strong);
	border-radius: var(--sd-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--sd-mute);
	background: var(--sd-card-bg);
	white-space: nowrap;
}

/* "Invited" / "Active member" small chip — orange when invited (pending),
   green when active member, hidden otherwise. */
.sd-invite-chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--sd-radius-pill);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.sd-invite-chip.invited {
	background: var(--sd-warn-soft);
	color: var(--sd-warn);
}

.sd-invite-chip.active {
	background: var(--sd-success-soft);
	color: var(--sd-success);
}

.sd-header-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ----- Hero metric strip ----- */
.sd-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 18px;
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-card-shadow);
	margin-bottom: 16px;
}

/* Left block — avatar + name + sub-line */
.sd-hero-identity {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	min-width: 0;
	flex: 1 1 auto;
}

.sd-avatar-wrap {
	position: relative;
	flex-shrink: 0;
}

.sd-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	background: var(--sd-soft-bg);
	border: 1px solid var(--sd-line);
	user-select: none;
}

.sd-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover overlay — click to upload, × to remove (Q9) */
.sd-avatar-overlay {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s ease;
	cursor: pointer;
	color: #fff;
}

.sd-avatar-wrap:hover .sd-avatar-overlay,
.sd-avatar-overlay:focus-visible {
	opacity: 1;
}

.sd-avatar-overlay:focus-visible {
	outline: 2px solid var(--sd-navy);
	outline-offset: 2px;
}

/* Keep the avatar `<input type=file>` invisible to sight but reachable by
   keyboard and screen readers — `display: none` strips it from the a11y
   tree entirely. */
.sd-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sd-avatar-overlay svg {
	width: 22px;
	height: 22px;
	color: #fff;
}

.sd-avatar-remove {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sd-danger);
	color: #fff;
	border: 2px solid var(--sd-card-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.sd-avatar-wrap:hover .sd-avatar-remove {
	opacity: 1;
}

.sd-avatar-dropzone {
	border: 2px dashed transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sd-avatar-dropzone.dragging {
	border-color: var(--sd-navy);
	background-color: var(--sd-info-soft);
}

.sd-hero-namebox {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sd-hero-name {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 18px;
	font-weight: 600;
	color: var(--sd-ink);
	line-height: 1.2;
	margin: 0;
}

.sd-hero-subline {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--sd-mute);
	line-height: 1.4;
}

.sd-hero-subline a {
	color: var(--sd-mute);
	text-decoration: none;
}

.sd-hero-subline a:hover {
	color: var(--sd-navy);
	text-decoration: underline;
}

.sd-hero-subline-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sd-hero-subline-sep {
	color: var(--sd-mute-2);
}

/* Status dot inline next to name (Q12) — separate from the hero tile pill. */
.sd-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sd-mute-2);
	vertical-align: middle;
	flex-shrink: 0;
}

.sd-status-dot.active { background: var(--sd-success); }
.sd-status-dot.draft { background: var(--sd-warn); }
.sd-status-dot.disabled { background: var(--sd-mute-2); }

/* Generic "chip" used for employment-type pill in the sub-line. */
.sd-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--sd-radius-pill);
	font-size: 11px;
	font-weight: 600;
	background: var(--sd-soft-bg);
	color: var(--sd-ink-2);
}

/* Hero metric tiles — 4 tiles per Q11. Flex (not grid) so each tile sizes to
   its own content. `nowrap` keeps the row on a single line; shortening
   hire date to "Oct 22, 2024" via Carbon's `M j, Y` lets all 4 fit. Same
   shape as Product Detail's `.pd-hero-tiles`. */
.sd-hero-tiles {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	border-left: 1px solid var(--sd-line);
	padding-left: 18px;
	min-width: 0;
}

.sd-tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sd-tile-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sd-tile-value {
	font-size: 14px;
	font-weight: 600;
	color: var(--sd-ink);
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sd-tile-value .sd-tile-mute {
	font-weight: 500;
	color: var(--sd-mute);
	font-size: 12px;
}

.sd-hero-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	align-items: center;
}

/* ----- Buttons ----- */
.sd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--sd-radius-sm);
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
	text-decoration: none;
	white-space: nowrap;
}

.sd-btn-primary {
	background: var(--sd-navy);
	color: #fff;
}

.sd-btn-primary:hover {
	background: var(--sd-navy-700);
	color: #fff;
}

.sd-btn-secondary {
	background: var(--sd-card-bg);
	color: var(--sd-ink);
	border-color: var(--sd-line-strong);
}

.sd-btn-secondary:hover {
	background: var(--sd-soft-bg);
	border-color: var(--sd-mute-2);
}

.sd-btn-sm {
	padding: 6px 12px;
	font-size: 12px;
}

.sd-btn .sd-icon-svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	display: inline-block;
}

.sd-btn-secondary .sd-icon-svg {
	color: var(--sd-navy);
}

.sd-btn-primary .sd-icon-svg {
	color: #fff;
}

/* ----- Tab strip ----- */
.sd-tabs-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--sd-line);
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.sd-tabs {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.sd-tabs::-webkit-scrollbar {
	display: none;
}

.sd-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sd-mute);
	cursor: pointer;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color 120ms, border-color 120ms;
}

.sd-tab:hover {
	color: var(--sd-ink);
}

.sd-tab.active {
	color: var(--sd-navy);
	border-bottom-color: var(--sd-navy);
	font-weight: 600;
}

.sd-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--sd-radius-pill);
	background: var(--sd-line);
	color: var(--sd-mute);
	font-size: 11px;
	font-weight: 600;
}

.sd-tab.active .sd-tab-badge {
	background: var(--sd-navy);
	color: #fff;
}

.sd-tab-badge.alert {
	background: var(--sd-danger);
	color: #fff;
}

[x-cloak] {
	display: none !important;
}

/* ----- Card chrome ----- */
.sd-card {
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-card-shadow);
	overflow: hidden;
}

.sd-card + .sd-card {
	margin-top: 16px;
}

.sd-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--sd-line);
}

.sd-card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--sd-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}

.sd-card-title-meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--sd-mute);
}

.sd-card-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border-radius: var(--sd-radius-sm);
	font-size: 12px;
	font-weight: 500;
	color: var(--sd-mute);
	background: transparent;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms, color 120ms;
	text-decoration: none;
}

.sd-card-action:hover {
	background: var(--sd-soft-bg);
	color: var(--sd-ink);
}

.sd-card-body {
	padding: 18px;
}

.sd-card-body-tight {
	padding: 12px 18px;
}

.sd-card-body-flat {
	padding: 0;
}

/* Two-column responsive grid for Profile tab */
.sd-grid-2col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

/* Cancel the `.sd-card + .sd-card { margin-top: 16px }` rule for cards
   that live inside the grid — the grid `gap` already handles spacing, and
   the cascaded margin pushes the right-hand card down by 16px so its top
   edge no longer aligns with the left-hand card. */
.sd-grid-2col > .sd-card + .sd-card,
.sd-grid-2col > .sd-card { margin-top: 0; }

@media (max-width: 991px) {
	.sd-grid-2col {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ----- Detail rows ----- */
.sd-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px 24px;
}

@media (max-width: 767px) {
	.sd-detail-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sd-detail-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sd-detail-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sd-detail-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--sd-ink);
	line-height: 1.4;
	word-break: break-word;
}

.sd-detail-value.muted {
	color: var(--sd-mute);
	font-style: italic;
}

/* ----- Inline edit chrome — pencil flips the card body to edit mode where
   each field is `wire:model.blur` and auto-saves via the matching
   `updatedInline*()` hook. The "Edit" pencil at the top-right is hidden
   while editing; a primary "Done" button appears bottom-right of the card
   body (mirrors `details-tab.blade.php` in rental product and experience). */
.sd-edit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--sd-line);
}

.sd-inline-input,
.sd-inline-input:focus {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--sd-line-strong);
	border-radius: 8px;
	background: var(--sd-card-bg);
	font-size: 14px;
	color: var(--sd-ink);
	outline: none;
}

.sd-inline-input:focus {
	border-color: var(--sd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.sd-inline-input.is-invalid { border-color: var(--sd-danger); }

select.sd-inline-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236d87a1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 28px;
	cursor: pointer;
}

.sd-inline-input-group {
	display: flex;
	gap: 6px;
}

/* `width !important` to beat the generic `.sd-inline-input { width: 100%; }`
   when both selectors hit the same select element. */
.sd-inline-input-group > select.sd-inline-input { width: 78px !important; flex: 0 0 78px; }
.sd-inline-input-group > input.sd-inline-input { flex: 1 1 auto; width: auto; min-width: 0; }

/* Multi-select dropdown (Other locations) — same pattern as the Edit Staff
   modal's other-locations picker. Tap to open, click an item to toggle. */
.sd-inline-multi {
	position: relative;
}

.sd-inline-multi-trigger {
	width: 100%;
	padding: 8px 30px 8px 10px;
	border: 1px solid var(--sd-line-strong);
	border-radius: 8px;
	background: var(--sd-card-bg);
	font-size: 14px;
	color: var(--sd-ink);
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	min-height: 38px;
	position: relative;
}

.sd-inline-multi-trigger::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236d87a1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	transform: translateY(-50%);
}

.sd-inline-multi-trigger:focus {
	outline: none;
	border-color: var(--sd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.08);
}

.sd-inline-multi-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: var(--sd-radius-pill);
	background: var(--sd-info-soft);
	color: var(--sd-navy);
	font-size: 11px;
	font-weight: 500;
}

.sd-inline-multi-empty {
	font-size: 13px;
	color: var(--sd-mute);
	font-style: italic;
}

.sd-inline-multi-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line-strong);
	border-radius: var(--sd-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	z-index: 50;
}

.sd-inline-multi-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 13px;
	color: var(--sd-ink);
	cursor: pointer;
}

.sd-inline-multi-option:hover {
	background: var(--sd-soft-bg);
}

.sd-inline-multi-option input[type="checkbox"] {
	margin: 0;
}

/* ----- Status pill (read-only) ----- */
.sd-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--sd-radius-pill);
	white-space: nowrap;
}

.sd-status-active {
	background: var(--sd-success-soft);
	color: var(--sd-success);
}

.sd-status-draft {
	background: var(--sd-warn-soft);
	color: var(--sd-warn);
}

.sd-status-terminated {
	background: var(--sd-danger-soft);
	color: var(--sd-danger);
}

/* ----- AI bar ----- */
.sd-dash-ai-band {
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	margin-bottom: 16px;
	overflow: hidden;
}

.sd-dash-ai-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.sd-dash-ai-insight {
	flex: 1 1 auto;
	min-width: 0;
}

.sd-dash-ai-chevron {
	flex-shrink: 0;
	background: transparent;
	border: 1px solid var(--sd-line-strong);
	color: var(--sd-mute);
	border-radius: var(--sd-radius-sm);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 120ms, color 120ms, transform 200ms;
}

.sd-dash-ai-chevron:hover {
	background: var(--sd-soft-bg);
	color: var(--sd-ink);
}

.sd-dash-ai-content {
	padding: 0 16px 12px;
}

/* ----- Empty states ----- */
.sd-empty-tab {
	background: var(--sd-card-bg);
	border: 1px dashed var(--sd-line-strong);
	border-radius: var(--sd-radius);
	padding: 48px 24px;
	text-align: center;
}

.sd-empty-tab-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--sd-ink);
	margin-bottom: 6px;
}

.sd-empty-tab-desc {
	font-size: 13px;
	color: var(--sd-mute);
	margin-bottom: 16px;
}

.sd-empty-inline {
	font-size: 13px;
	color: var(--sd-mute);
	font-style: italic;
	padding: 12px 0;
	text-align: center;
}

.sd-cal-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.sd-cal-nav-btn {
	width: 28px;
	height: 28px;
	border-radius: var(--sd-radius-sm);
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line-strong);
	color: var(--sd-mute);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 120ms, color 120ms;
}

.sd-cal-nav-btn:hover {
	background: var(--sd-soft-bg);
	color: var(--sd-ink);
}

.sd-cal-range {
	font-size: 14px;
	font-weight: 600;
	color: var(--sd-ink);
	min-width: 200px;
	text-align: center;
}

/* Quick Add bar */
/* ----- Schedule tab action bar — Set Work Hours + Record Time Off ----- */
.sd-schedule-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.sd-schedule-actions .sd-btn { padding: 9px 18px; font-size: 13px; }

/* Spacing between the inline sections below the schedule grids */
.sd-card-section { margin-top: 18px; }

.sd-card-action-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Inline tinted Edit/Delete button used in Working hours card actions */
.sd-btn-danger {
	color: var(--sd-danger) !important;
	border-color: var(--sd-line-strong);
}
.sd-btn-danger:hover {
	background: var(--sd-danger-soft);
	border-color: var(--sd-danger);
	color: var(--sd-danger) !important;
}

/* ----- Working hours card grid ----- */
.sd-wh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.sd-wh-card {
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius-sm);
	padding: 14px;
	background: var(--sd-card-bg);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sd-wh-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.sd-wh-days {
	font-size: 13px;
	font-weight: 600;
	color: var(--sd-ink);
}

.sd-wh-time {
	font-size: 13px;
	color: var(--sd-ink-2);
}

.sd-wh-range {
	font-size: 12px;
	color: var(--sd-mute);
}

.sd-wh-actions {
	display: flex;
	gap: 6px;
	margin-top: 6px;
}

/* ----- Time off calendar ----- */
.sd-timeoff-cal {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.sd-timeoff-cal-head {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 8px 0;
}

.sd-timeoff-cal-day {
	position: relative;
	text-align: center;
	font-size: 13px;
	padding: 10px 4px;
	min-height: 42px;
	color: var(--sd-ink);
	border-radius: 8px;
	user-select: none;
	/* Reset native <button> styling so interactive days look identical to
	   the inert <div> variant — see schedule-tab.blade.php where time-off
	   days render as buttons for keyboard accessibility. */
	display: block;
	width: 100%;
	background: transparent;
	border: 0;
	font: inherit;
	line-height: inherit;
}

.sd-timeoff-cal-day.other-month { color: var(--sd-mute-2); }
.sd-timeoff-cal-day.today {
	background: var(--sd-info-soft);
	font-weight: 600;
}
.sd-timeoff-cal-day.clickable { cursor: pointer; }
.sd-timeoff-cal-day.clickable:hover { background: var(--sd-soft-bg); }
.sd-timeoff-cal-day.clickable:focus-visible {
	outline: 2px solid var(--sd-navy);
	outline-offset: 2px;
}

.sd-timeoff-cal-dot {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.sd-timeoff-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 14px;
	margin-top: 16px;
	border-top: 1px solid var(--sd-line);
}

.sd-timeoff-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--sd-mute);
}

.sd-legend-swatch {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

/* Tinted type pill used inside the Time off entries table */
.sd-timeoff-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--sd-radius-pill);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
}

.sd-list-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--sd-card-bg);
	border-radius: var(--sd-radius);
	overflow: hidden;
	border: 1px solid var(--sd-line);
}

.sd-list-table thead th {
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	padding: 12px 16px;
	background: var(--sd-soft-bg);
	border-bottom: 1px solid var(--sd-line);
}

.sd-list-table tbody td {
	padding: 12px 16px;
	font-size: 13px;
	color: var(--sd-ink);
	border-bottom: 1px solid var(--sd-line);
}

.sd-list-table tbody tr:last-child td {
	border-bottom: none;
}

.sd-list-table tbody tr:hover {
	background: var(--sd-soft-bg);
}

/* ============================================================
   PERFORMANCE TAB
   ============================================================ */

.sd-perf-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

@media (max-width: 991px) {
	.sd-perf-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sd-perf-tile {
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line);
	border-radius: var(--sd-radius);
	box-shadow: var(--sd-card-shadow);
	padding: 16px;
}

.sd-perf-tile.deferred {
	background: var(--sd-soft-bg-2);
	border-style: dashed;
}

.sd-perf-tile-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--sd-mute);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
}

.sd-perf-tile-value {
	font-size: 28px;
	font-weight: 700;
	color: var(--sd-ink);
	line-height: 1.1;
}

.sd-perf-tile-value .sd-perf-tile-unit {
	font-size: 16px;
	font-weight: 500;
	color: var(--sd-mute);
}

.sd-perf-tile-sub {
	margin-top: 6px;
	font-size: 12px;
	color: var(--sd-mute);
}

.sd-perf-tile-deferred-note {
	font-size: 12px;
	color: var(--sd-mute);
	font-style: italic;
}

/* Sparkline (CSS-only) */
.sd-sparkline {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 80px;
	padding: 8px 0;
}

.sd-sparkline-bar {
	flex: 1 1 0;
	min-height: 2px;
	background: var(--sd-navy);
	border-radius: 2px 2px 0 0;
	opacity: 0.85;
	transition: opacity 120ms;
}

.sd-sparkline-bar:hover {
	opacity: 1;
}

.sd-sparkline-axis {
	display: flex;
	gap: 3px;
	margin-top: 4px;
}

.sd-sparkline-axis-label {
	flex: 1 1 0;
	text-align: center;
	font-size: 10px;
	color: var(--sd-mute);
}

/* ============================================================
   DOCUMENTS TAB
   ============================================================ */

.sd-docs-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

/* Documents card header toolbar — search + upload pinned right of the title. */
.sd-docs-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sd-docs-search {
	position: relative;
	width: 220px;
	max-width: 220px;
}

.sd-docs-search-input {
	width: 100%;
	padding: 8px 12px 8px 36px;
	font-size: 13px;
	background: var(--sd-card-bg);
	border: 1px solid var(--sd-line-strong);
	border-radius: var(--sd-radius-sm);
}

.sd-docs-search-input:focus {
	outline: none;
	border-color: var(--sd-navy);
	box-shadow: 0 0 0 3px rgba(0, 50, 100, 0.1);
}

.sd-docs-search-icon {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--sd-mute);
	pointer-events: none;
}

.sd-doc-row {
	display: grid;
	grid-template-columns: 1fr 100px 120px 120px 120px 32px;
	gap: 12px;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--sd-line);
	transition: background 120ms;
}

.sd-doc-row:last-child {
	border-bottom: none;
}

.sd-doc-row:hover {
	background: var(--sd-soft-bg);
}

.sd-doc-name {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sd-doc-icon {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--sd-soft-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sd-mute);
	flex-shrink: 0;
}

.sd-doc-name-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--sd-ink);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sd-doc-name-text:hover {
	color: var(--sd-navy);
	text-decoration: underline;
}

.sd-doc-meta {
	font-size: 12px;
	color: var(--sd-mute);
}

.sd-doc-action-btn {
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: var(--sd-mute);
	border-radius: var(--sd-radius-sm);
	cursor: pointer;
	transition: background 120ms, color 120ms;
}

.sd-doc-action-btn:hover {
	background: var(--sd-soft-bg);
	color: var(--sd-danger);
}

/* ============================================================
   ACTIVITY TAB
   ============================================================ */

.sd-activity-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.sd-timeline {
	position: relative;
	padding-left: 24px;
}

.sd-timeline::before {
	content: '';
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 7px;
	width: 2px;
	background: var(--sd-line);
}

.sd-timeline-item {
	position: relative;
	padding-bottom: 20px;
}

.sd-timeline-item:last-child {
	padding-bottom: 0;
}

.sd-timeline-dot {
	position: absolute;
	top: 4px;
	left: -24px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sd-card-bg);
	border: 3px solid var(--sd-navy);
}

.sd-timeline-item.system .sd-timeline-dot {
	border-color: var(--sd-mute-2);
}

.sd-timeline-meta {
	font-size: 11px;
	color: var(--sd-mute);
	font-weight: 500;
	margin-bottom: 2px;
}

.sd-timeline-text {
	font-size: 13px;
	color: var(--sd-ink);
	line-height: 1.45;
}

.sd-timeline-actor {
	font-weight: 600;
	color: var(--sd-ink);
}

.sd-timeline-action {
	color: var(--sd-mute);
}

.sd-timeline-detail {
	font-size: 12px;
	color: var(--sd-mute);
	margin-top: 2px;
}

.sd-timeline-loadmore {
	margin-top: 12px;
	background: transparent;
	border: 1px solid var(--sd-line-strong);
	color: var(--sd-mute);
	padding: 6px 14px;
	border-radius: var(--sd-radius-sm);
	font-size: 12px;
	cursor: pointer;
}

.sd-timeline-loadmore:hover {
	background: var(--sd-soft-bg);
	color: var(--sd-ink);
}

/* ----- Mobile (<768px) ----- */
@media (max-width: 767px) {
	.sd-header {
		padding: 12px 16px;
	}

	.sd-title {
		font-size: 17px;
		max-width: 100%;
	}

	.sd-hero {
		flex-direction: column;
		align-items: stretch;
	}

	.sd-hero-tiles {
		/* `.sd-hero-tiles` is `display: flex` (not grid) — `grid-template-columns`
		   has no effect here. Allow wrap + equal flex share so each tile takes
		   half the row at this breakpoint. */
		flex-wrap: wrap;
		gap: 16px;
		border-left: none;
		border-top: 1px solid var(--sd-line);
		padding-left: 0;
		padding-top: 16px;
	}

	.sd-hero-tiles .sd-tile {
		flex: 1 1 calc(50% - 8px);
		min-width: 0;
	}

	.sd-hero-actions {
		justify-content: stretch;
	}

	.sd-hero-actions .sd-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.sd-perf-tiles {
		grid-template-columns: 1fr 1fr;
	}

	.sd-doc-row {
		grid-template-columns: 1fr 32px;
	}

	.sd-doc-row .sd-doc-meta {
		display: none;
	}
}

/* ── T3 — Qualifications card: certifications list + expiry badges ── */
.sd-cert-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sd-cert-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #eaecf0;
	border-radius: 10px;
	background: #fff;
}
.sd-cert-main {
	min-width: 0;
}
.sd-cert-title {
	font-size: 14px;
	font-weight: 600;
	color: #1d2939;
}
.sd-cert-name {
	font-weight: 400;
	color: #475467;
}
.sd-cert-meta {
	font-size: 12px;
	color: #667085;
	margin-top: 2px;
}
.sd-cert-side {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.sd-cert-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.sd-cert-badge-valid {
	background: #ecfdf3;
	color: #027a48;
}
.sd-cert-badge-expiring {
	background: #fffaeb;
	color: #b54708;
}
.sd-cert-badge-expired {
	background: #fef3f2;
	color: #b42318;
}
.sd-cert-badge-none {
	background: #f2f4f7;
	color: #475467;
}

/* ── T3 fixes ── */
/* The Qualifications component root is a single wrapper div (the Livewire
   component root), so its cards are NOT adjacent siblings of the Employment
   card and miss the `.sd-card + .sd-card` margin. Add the gap here. */
.sd-quals {
	margin-top: 16px;
}
.sd-quals > .sd-card + .sd-card {
	margin-top: 16px;
}
/* Allow the languages multi-select dropdown to overflow the card while editing
   (default `.sd-card { overflow: hidden }` clips it). */
.sd-card-overflow-visible {
	overflow: visible !important;
}

/* Hamburger in the detail header - same contract as .pd-header .menu-icon. */
.sd-header .menu-icon {
	display: none;
}

@media (max-width: 992px) {
	.sd-header .menu-icon {
		display: block;
		cursor: pointer;
		margin-right: 12px;
	}
}

/* ==== css/quotes.css ==== */
/* ==========================================================================
   Quotes (QUOTES_PLAN.md)
   --------------------------------------------------------------------------
   Quote-specific chrome layered on top of booking-detail's .bd-* vocabulary
   (tokens come from public/css/booking-detail.css — --bd-navy, --bd-line,
   --bd-mute, --bd-page-bg, --bd-radius-sm). Card/layout chrome on the quote
   pages reuses .bd-card / .bd-layout directly; only quote-specific bits
   (hold chips, kv rows, line rows, sign boxes, decision actions) live here.
   ========================================================================== */

/* ----- Id pill (header, next to the title) ----- */
.qt-id-pill {
	display: inline-flex;
	align-items: center;
	background: #ebf0f5;
	color: var(--bd-navy, #003264);
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	white-space: nowrap;
}

/* ----- Holding chips (list table + detail status card) ----- */
.qt-hold-chip,
.qt-nohold-chip {
	display: inline-flex;
	align-items: center;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	white-space: nowrap;
}
.qt-hold-chip {
	background: #ebf0f5;
	color: var(--bd-navy, #003264);
}
.qt-nohold-chip {
	background: #f3f4f6;
	color: #6b7280;
}

/* ----- Side rail stack ----- */
.qt-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ----- Card sub copy ----- */
.qt-card-sub {
	font-size: 13px;
	color: var(--bd-mute, #6d87a1);
	margin: -6px 0 12px;
}

/* ----- Key/value rows (money + status cards) ----- */
.qt-kv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	padding: 6px 0;
}
.qt-kv__label {
	color: var(--bd-mute, #6d87a1);
}
.qt-kv--total {
	font-weight: 700;
	font-size: 15px;
	border-top: 1px solid var(--bd-line, #eef0f4);
	margin-top: 4px;
	padding-top: 10px;
}
.qt-kv--control .qt-date-input {
	max-width: 170px;
	margin-bottom: 0;
}
/* Quote details (the business's own quote questions) — a typed answer can be
   long, so the value column wraps instead of squashing the label. */
.qt-kv--wrap {
	align-items: flex-start;
}
.qt-kv--wrap .qt-kv__value {
	text-align: right;
	overflow-wrap: break-word;
	min-width: 0;
}

/* ----- Line-item rows (What's included) ----- */
.qt-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--bd-line, #eef0f4);
}
.qt-line:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.qt-line__main {
	min-width: 0;
}
.qt-line__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--bd-navy, #003264);
}
.qt-line__meta {
	font-size: 12.5px;
	color: var(--bd-mute, #6d87a1);
}
.qt-line__price {
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
}

/* ----- Agreement signature boxes ----- */
.qt-sign-box {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--bd-page-bg, #f6f7f9);
	border-radius: var(--bd-radius-sm, 8px);
	padding: 12px 14px;
}
.qt-sign-box--stacked {
	margin-top: 10px;
}
.qt-sign-box__main {
	min-width: 0;
	flex: 1;
}
.qt-sign-box__name {
	font-size: 13.5px;
	font-weight: 600;
}
.qt-sign-box__meta {
	font-size: 12.5px;
	color: var(--bd-mute, #6d87a1);
}

/* ----- Empty states (sub-component level) ----- */
.qt-empty-inline {
	background: var(--bd-page-bg, #f6f7f9);
	border-radius: var(--bd-radius-sm, 8px);
	padding: 14px;
	text-align: center;
	font-size: 13.5px;
	color: var(--bd-mute, #6d87a1);
}

/* ----- Status card switch row ----- */
.qt-switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--bd-line, #eef0f4);
	margin-top: 8px;
	padding-top: 12px;
}
.qt-switch-row__label {
	font-size: 13.5px;
	font-weight: 600;
}
.qt-hint {
	font-size: 12.5px;
	color: var(--bd-mute-2, #94a3b8);
}

/* ----- Decision card actions ----- */
.qt-decision-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.qt-decision-actions .btn {
	width: auto;
}

/* Valid-until inline editor (detail header). Display lives here, not inline,
   so x-show can toggle it without an x-cloak (morph re-add bug class). */
.qt-vu-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ==== css/voucher-detail.css ==== */
/* Voucher detail (#4308) - card chrome and label/value rows mirroring the
   campaign detail cards (public/css/campaigns-detail.css .cd-card / .cd-detail-row,
   themselves mirroring rentals/products/detail's .pd-card). Page-scoped: the
   .vd- namespace loads on the voucher AND promo code detail pages (#4318). */

.vd-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 24px; }
@media (max-width: 992px) { .vd-details-grid { grid-template-columns: 1fr; } }

.vd-card { background: var(--ed-surface); border: 1px solid var(--ed-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); overflow: hidden; }
.vd-card + .vd-card { margin-top: 16px; }
.vd-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ed-border); }
.vd-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ed-ink); display: flex; align-items: center; gap: 8px; }
.vd-card-body { padding: 8px 18px; }
.vd-card-action { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--ed-border); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: var(--ed-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.vd-card-action:hover { background: var(--ed-sunken); color: var(--ed-navy-700); border-color: var(--ed-navy-700); }

/* Label/value rows. */
.vd-detail-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--ed-border); }
.vd-detail-row:last-child { border-bottom: none; }
.vd-detail-label { flex: 0 0 150px; font-size: 13px; font-weight: 600; color: var(--ed-muted); }
.vd-detail-value { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ed-ink); text-align: right; overflow-wrap: break-word; }
.vd-detail-value .progress { max-width: 160px; margin-left: auto; }
.vd-muted { color: var(--ed-faint); }

/* ==== css/time-clock.css ==== */
/* ============================================================
   Time clock (kiosk + timesheets) — tc- namespace
   Palette + radii follow docs/DESIGN_SYSTEM.md
   ============================================================ */

/* ---------- Kiosk shell ---------- */
.tc-kiosk {
	min-height: 100vh;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: column;
}

.tc-kiosk-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background-color: #ffffff;
	border-bottom: 1px solid #e7ecf1;
}

.tc-kiosk-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: #003264;
}

.tc-kiosk-title img {
	width: 24px;
	height: 24px;
}

.tc-kiosk-now {
	font-size: 28px;
	font-weight: 700;
	color: #003264;
	font-variant-numeric: tabular-nums;
}

.tc-kiosk-date {
	font-size: 13px;
	color: var(--ed-text-muted);
	text-align: center;
}

.tc-kiosk-shop {
	font-size: 15px;
	font-weight: 600;
	color: var(--ed-text-muted);
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Staff grid ---------- */
.tc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	padding: 24px;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

.tc-card {
	background-color: #ffffff;
	border: 1px solid #e7ecf1;
	border-radius: 12px;
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	min-height: 150px;
	text-align: center;
}

.tc-card:hover,
.tc-card:focus-visible {
	box-shadow: 0 4px 14px rgba(0, 50, 100, 0.10);
	transform: translateY(-1px);
	outline: none;
}

.tc-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #eef3f8;
	color: #003264;
	font-weight: 700;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.tc-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tc-card-name {
	font-weight: 600;
	font-size: 15px;
	color: #1d2939;
	line-height: 1.3;
}

/* ---------- Status pills ---------- */
.tc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	white-space: nowrap;
}

.tc-pill-off {
	background-color: #f1f4f8;
	color: var(--ed-text-muted);
}

.tc-pill-on {
	background-color: #e3f5e4;
	color: #08810E;
}

.tc-pill-break {
	background-color: #fdf0db;
	color: #b76e00;
}

.tc-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

/* ---------- Action / PIN overlay ---------- */
.tc-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(13, 27, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1050;
	padding: 16px;
}

.tc-panel {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 28px 24px;
	width: 100%;
	max-width: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.tc-panel-name {
	font-size: 20px;
	font-weight: 700;
	color: #003264;
}

.tc-panel-status {
	font-size: 13px;
	color: var(--ed-text-muted);
}

/* PIN dots */
.tc-pin-dots {
	display: flex;
	gap: 14px;
	margin: 6px 0;
}

.tc-pin-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #c2cfdb;
	background-color: transparent;
}

.tc-pin-dot.filled {
	background-color: #003264;
	border-color: #003264;
}

.tc-pin-error {
	color: #d92d20;
	font-size: 13px;
	font-weight: 600;
	min-height: 20px;
}

/* PIN pad */
.tc-pin-pad {
	display: grid;
	grid-template-columns: repeat(3, 72px);
	gap: 10px;
	justify-content: center;
}

.tc-pin-key {
	width: 72px;
	height: 60px;
	border-radius: 12px;
	border: 1px solid #e7ecf1;
	background-color: #f9fafb;
	font-size: 22px;
	font-weight: 600;
	color: #1d2939;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.tc-pin-key:active {
	background-color: #e7eef5;
}

.tc-pin-key.muted {
	border: none;
	background: transparent;
	color: var(--ed-text-muted);
	font-size: 18px;
}

/* Big action buttons */
.tc-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.tc-action-btn {
	width: 100%;
	min-height: 56px;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
}

.tc-action-in {
	background-color: #08810E;
	color: #ffffff;
}

.tc-action-out {
	background-color: #003264;
	color: #ffffff;
}

.tc-action-break {
	background-color: #f1f4f8;
	color: #003264;
	border: 1px solid #e7ecf1;
}

.tc-action-cancel {
	background: transparent;
	border: none;
	color: var(--ed-text-muted);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 8px;
}

/* Empty state */
.tc-empty {
	text-align: center;
	color: var(--ed-text-muted);
	padding: 60px 24px;
}

/* ---------- Timesheets: kiosk device link ---------- */
.tc-link-panel {
	background-color: #ffffff;
	border: 1px solid #e7ecf1;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
}

.tc-link-label {
	font-size: 13px;
	font-weight: 700;
	color: #003264;
	margin-bottom: 8px;
}

.tc-link-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tc-link-input {
	flex: 1 1 280px;
	min-width: 0;
	height: 40px;
	margin-bottom: 0 !important;
	font-size: 13px;
	color: var(--ed-text-muted);
}

/* ---------- Timesheets page bits ---------- */
.tc-on-now-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background-color: #ffffff;
	border: 1px solid #e7ecf1;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
}

.tc-on-now-label {
	font-size: 13px;
	font-weight: 700;
	color: #003264;
	margin-right: 4px;
	white-space: nowrap;
}

.tc-on-now-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #e3f5e4;
	color: #08810E;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	white-space: nowrap;
}

.tc-on-now-chip.break {
	background-color: #fdf0db;
	color: #b76e00;
}

.tc-source-note {
	font-size: 12px;
	color: var(--ed-text-muted);
}

.tc-summary-total {
	font-weight: 700;
	color: #003264;
}

/* Scheduled vs actual deviation hints */
.tc-deviation {
	font-size: 12px;
	color: var(--ed-text-muted);
	white-space: nowrap;
}

.tc-deviation.late {
	color: #b76e00;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.tc-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		padding: 16px;
		gap: 12px;
	}

	.tc-kiosk-header {
		flex-wrap: wrap;
		padding: 12px 16px;
	}

	.tc-kiosk-now {
		font-size: 22px;
	}
}

@media (max-width: 375px) {
	.tc-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.tc-pin-pad {
		grid-template-columns: repeat(3, 64px);
	}

	.tc-pin-key {
		width: 64px;
		height: 54px;
	}
}

/* ==== css/widget-studio.css ==== */
/* ──────────────────────────────────────────────────────────────────────────
   Widget Studio — the redesigned /settings/booking-widget screen.
   All selectors are `ws-` prefixed to avoid clashing with Bootstrap / app CSS.
   Chrome (chooser, sections, preview) uses the app navy; the live preview
   iframe renders the real widget, so widget styling is NOT duplicated here.
   ────────────────────────────────────────────────────────────────────────── */

.ws-wrap { --ws-navy: #003264; --ws-line: #e6ebf1; --ws-muted: var(--ed-text-muted); }

/* 1 ── Widget-type chooser ─────────────────────────────────────────────── */
.ws-placer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0 22px; }
.ws-opt { position: relative; background: #fff; border: 2px solid var(--ws-line); border-radius: 14px; padding: 15px 16px 13px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ws-opt:hover { border-color: #c4d2e0; }
.ws-opt.ws-active { border-color: var(--ws-navy); box-shadow: 0 6px 18px rgba(0,50,100,.10); }
.ws-opt .ws-ic { width: 36px; height: 36px; border-radius: 10px; background: #eef3f8; display: grid; place-items: center; margin-bottom: 9px; }
.ws-opt .ws-ic svg { width: 19px; height: 19px; stroke: var(--ws-navy); fill: none; stroke-width: 2; }
.ws-opt h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: #1f2933; }
.ws-opt p { margin: 0; font-size: 11.5px; color: var(--ws-muted); line-height: 1.45; }
.ws-opt .ws-tick { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--ws-navy); color: #fff; display: none; place-items: center; font-size: 12px; }
.ws-opt.ws-active .ws-tick { display: grid; }

/* 2 ── Studio tabs (Widget settings | Embed options) ───────────────────── */
.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ws-line); margin: 18px 0 20px; }
.ws-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--ws-muted); cursor: pointer; }
.ws-tab:hover { color: #1f2933; }
.ws-tab.ws-tab-on { color: var(--ws-navy); border-bottom-color: var(--ws-navy); }
.ws-tabpane[x-cloak] { display: none !important; }

/* Embed tab: chooser on top, then options + code (left) | live preview (right).
   Full width here (its own tab) so neither column is squashed. The preview-pane
   keeps its 3 children; CSS grid lays them into 2 columns. */
/* Embed tab: options → code → preview, each full width, stacked. */
.ws-embed-tab .ws-preview-pane { position: static; display: flex; flex-direction: column; gap: 16px; }
.ws-embed-tab .ws-pcfg { margin: 0; }
.ws-embed-tab .ws-frame iframe { height: 720px; }
/* Product-list preview starts compact and the equipdash-resize bridge (JS)
   shrink-wraps it to the cards — so a short row never leaves dead white space. */
.ws-embed-tab .ws-frame iframe.ws-fit-frame { height: 360px; }
/* srcdoc previews (the "Book now" button) — tall enough for the full-screen
   booking pop-up to open over the mockup; the eqstudio-resize bridge trims it. */
.ws-embed-tab .ws-srcdoc-frame iframe { height: 560px; }

/* Placeholder website nav bar — frames the live preview so the widget reads as
   sitting WITHIN the owner's own site, not floating in a void. Sits between the
   browser chrome and the embedded widget. */
.ws-sitenav { display: flex; align-items: center; gap: 13px; padding: 11px 16px; background: #fff; border-bottom: 1px solid #eceff3; }
.ws-snlogo { width: 92px; height: 15px; border-radius: 5px; background: #dbe2ea; flex: none; }
.ws-snlink { width: 40px; height: 9px; border-radius: 5px; background: #eef1f5; flex: none; }
.ws-snlink:first-of-type { margin-left: auto; }
.ws-sncta { width: 62px; height: 23px; border-radius: 7px; background: #d7e0ea; flex: none; }
.ws-frame.ws-mobile .ws-snlink { display: none; }

/* Faux customer-website page — grey placeholder content (the owner's OWN page)
   with our widget embedded within it, so they see exactly how it drops in.
   Mirrors the product/experience detail Embed tab preview. */
.ws-ph { background: #eef1f5; border-radius: 7px; animation: wsplp 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.ws-ph-bar { height: 26px; width: 55%; margin-bottom: 16px; }
.ws-ph-line { height: 12px; margin-bottom: 10px; }
.ws-ph-line.short { width: 62%; }
.ws-ph-img { height: 200px; background: linear-gradient(135deg, #dde6ee, #c4d2e0); border-radius: 9px; margin: 14px 0 18px; }
@keyframes wsplp { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* single_product — two-column: placeholder page content | the embedded widget. */
.ws-embed-tab .ws-faux-page { display: flex; gap: 22px; padding: 22px; align-items: flex-start; background: #fff; }
.ws-embed-tab .ws-faux-col { flex: 1; min-width: 0; }
.ws-embed-tab .ws-faux-embed { width: 384px; flex: none; }
.ws-embed-tab .ws-faux-embed iframe { width: 100%; height: 660px; border: 1px solid var(--ws-line); border-radius: 12px; background: #fff; display: block; }
.ws-frame.ws-tablet .ws-faux-page, .ws-frame.ws-mobile .ws-faux-page { flex-direction: column; }
.ws-frame.ws-tablet .ws-faux-embed, .ws-frame.ws-mobile .ws-faux-embed { width: 100%; }

/* product_list — full-width row embedded mid-page, placeholder content around it. */
.ws-embed-tab .ws-faux-block { padding: 14px 22px 20px; background: #fff; }
.ws-embed-tab .ws-faux-block-top { padding: 20px 22px 4px; }
.ws-embed-tab .ws-faux-rowframe { display: block; width: 100%; border: 0; background: #fff; }

/* Landing-page mock for the product_list preview — hero, intro, section heading
   and footer, so the embedded row reads as sitting INSIDE a real website. */
.ws-embed-tab .ws-hero { height: 150px; background: linear-gradient(120deg, #c9d6e3, #aebfd0 55%, #93a8bf); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; }
.ws-embed-tab .ws-hero-h { width: 46%; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .85); }
.ws-embed-tab .ws-hero-sub { width: 30%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .55); }
.ws-embed-tab .ws-intro { background: #f6f8fa; padding: 20px 26px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ws-embed-tab .ws-intro .ws-ph-line { width: 72%; max-width: 640px; margin: 0; }
.ws-embed-tab .ws-intro .ws-ph-line.short { width: 46%; }
.ws-embed-tab .ws-secrow { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px 6px; }
.ws-embed-tab .ws-sec-h { width: 190px; height: 18px; border-radius: 6px; background: #dbe2ea; }
.ws-embed-tab .ws-sec-more { width: 96px; height: 12px; border-radius: 6px; background: #eef1f5; }
.ws-embed-tab .ws-foot { margin-top: 20px; background: #1e2a37; padding: 24px 26px; display: flex; align-items: center; gap: 16px; }
.ws-embed-tab .ws-foot-brand { width: 96px; height: 15px; border-radius: 5px; background: rgba(255, 255, 255, .35); }
.ws-embed-tab .ws-foot-l { width: 54px; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .18); }
.ws-embed-tab .ws-foot-l:first-of-type { margin-left: auto; }

/* Browser-window chrome around every preview (so it reads like the customer's
   own site, matching the product/experience detail Embed tab). */
.ws-browserbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #e8edf2; border-bottom: 1px solid var(--ws-line); }
.ws-bdot { width: 9px; height: 9px; border-radius: 50%; background: #cdd7e1; flex: none; }
.ws-burl { margin-left: 8px; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--ws-line); border-radius: 6px; font-size: 11px; color: var(--ws-muted); padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-embed-note { font-size: 12.5px; color: var(--ws-muted); margin: -6px 0 16px; line-height: 1.5; }

/* Faux host-page preview for the "Book now" button type (it's a floating button
   on the customer's own page, not an iframe of the widget). */
.ws-faux { position: relative; background: #fff; border-radius: 11px; box-shadow: 0 10px 28px rgba(15,40,70,.12); width: 100%; max-width: 560px; min-height: 380px; padding: 22px; overflow: hidden; }
.ws-faux-bar { height: 34px; width: 55%; background: #eef2f6; border-radius: 8px; margin-bottom: 16px; }
.ws-faux-line { height: 11px; background: #eef1f5; border-radius: 5px; margin-bottom: 10px; }
.ws-faux-line.ws-short { width: 62%; }
.ws-faux-img { height: 140px; background: linear-gradient(135deg, #dde6ee, #c4d2e0); border-radius: 10px; margin: 16px 0; }
.ws-faux-fab { position: absolute; bottom: 18px; right: 18px; display: inline-flex; align-items: center; gap: 7px; color: #fff; border-radius: 999px; padding: 11px 18px; font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px rgba(15,40,70,.22); white-space: nowrap; }
.ws-faux-fab.ws-left { right: auto; left: 18px; }

/* 3 ── Left: collapsible setting groups ────────────────────────────────── */
.ws-controls { background: #fff; border: 1px solid var(--ws-line); border-radius: 14px; overflow: hidden; }
.ws-sect { border-bottom: 1px solid var(--ws-line); }
.ws-sect:last-child { border-bottom: 0; }
.ws-sect-hd { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; user-select: none; }
.ws-sect-hd .ws-ti { flex: 1; min-width: 0; }
.ws-sect-hd .ws-t { font-weight: 600; font-size: 14.5px; color: #1f2933; }
.ws-sect-hd .ws-sum { display: block; font-size: 11.5px; color: var(--ws-muted); margin-top: 2px; }
.ws-sect-hd .ws-chev { color: var(--ws-muted); transition: transform .2s; flex: none; }
.ws-sect.ws-open .ws-sect-hd .ws-chev { transform: rotate(90deg); }
.ws-sect-hd .ws-tag { font-size: 10px; font-weight: 700; letter-spacing: .03em; color: #0a7d3d; background: #e2f7ea; border-radius: 5px; padding: 2px 6px; flex: none; }
.ws-sect-bd { padding: 4px 18px 18px; }
.ws-sect-bd[x-cloak] { display: none !important; }

/* ── Control system (mirrors the approved mockup) ───────────────────────── */

/* Sub-groups within a section */
.ws-grp + .ws-grp { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ws-line); }
.ws-gtitle { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ws-muted); margin: 2px 0 9px; }

/* label … control row */
.ws-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.ws-row .ws-lbl { font-size: 13.5px; color: #1f2933; }
.ws-row .ws-lbl small { display: block; color: var(--ws-muted); font-size: 11.5px; margin-top: 1px; line-height: 1.4; }
.ws-hint { font-size: 11.5px; color: var(--ws-muted); margin: 2px 0 0; line-height: 1.45; }
.ws-subfields { margin-top: 8px; }
.ws-always { font-size: 11.5px; color: var(--ws-muted); font-style: italic; }

/* Toggle switch */
.ws-sw { position: relative; width: 40px; height: 23px; flex: none; display: inline-block; margin: 0; }
.ws-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.ws-sw .ws-tr { position: absolute; inset: 0; background: #cdd7e1; border-radius: 999px; transition: .18s; cursor: pointer; }
.ws-sw .ws-tr::before { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ws-sw input:checked + .ws-tr { background: var(--ws-navy); }
.ws-sw input:checked + .ws-tr::before { transform: translateX(17px); }

/* Segmented control + tri-state (Req/Opt/Hidden). Radios stay underneath so
   wire:model.live binding is unchanged. */
.ws-seg { display: inline-flex; flex-wrap: wrap; background: #eef3f8; border-radius: 9px; padding: 3px; flex: none; }
.ws-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ws-seg label { margin: 0; font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer; color: var(--ws-muted); white-space: nowrap; line-height: 1.3; transition: background .15s, color .15s; }
.ws-seg input:checked + label { background: #fff; color: #1f2933; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.ws-seg input:focus-visible + label { outline: 2px solid var(--ws-navy); outline-offset: 1px; }
.ws-seg.ws-tri input:checked + label { color: #fff; background: var(--ws-navy); box-shadow: none; }
.ws-seg.ws-tri input.ws-hid:checked + label { background: #94a3b8; }

/* Segmented control built from buttons (waiver timing — boolean via wire:click) */
.ws-segbtn { display: inline-flex; background: #eef3f8; border-radius: 9px; padding: 3px; flex: none; }
.ws-segbtn button { border: 0; background: transparent; font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer; color: var(--ws-muted); white-space: nowrap; }
.ws-segbtn button.ws-on { background: #fff; color: #1f2933; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }

/* Color swatches + custom picker + hex */
.ws-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ws-swatches .ws-sw-c { width: 25px; height: 25px; border-radius: 7px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ws-line); }
.ws-swatches .ws-sw-c.ws-on { box-shadow: 0 0 0 2px var(--ws-navy); }
.ws-swatches input[type=color] { width: 29px; height: 29px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fff; padding: 2px; cursor: pointer; }
.ws-hexin { width: 94px; border: 1px solid var(--ws-line); border-radius: 7px; background: #fff; padding: 6px 8px; font-family: "SF Mono", Menlo, monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; color: #1f2933; }
.ws-hexin:focus { outline: none; border-color: var(--ws-navy); }

/* Text inputs / textareas */
.ws-tin { width: 100%; border: 1px solid var(--ws-line); border-radius: 9px; background: #f9fafb; padding: 9px 11px; font: inherit; font-size: 13px; color: #1f2933; }
.ws-tin:focus { outline: none; border-color: var(--ws-navy); background: #fff; }
textarea.ws-tin { resize: vertical; min-height: 58px; }
.ws-fieldlbl { font-size: 12px; color: var(--ws-muted); margin: 0 0 5px; display: block; }
.ws-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }

/* Voucher amount list — compact read-only rows with inline edit, so a shop with
   six price points reads as a list instead of six input boxes shouting at once. */
.ws-amts { display: flex; flex-direction: column; gap: 4px; max-width: 320px; margin-top: 6px; }
.ws-amt { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ws-line); border-radius: 9px; background: #f9fafb; padding: 6px 8px 6px 11px; }
.ws-amt-val { flex: 1; font-size: 13px; color: #1f2933; }
.ws-amt input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: #1f2933; padding: 0; }
.ws-amt input:focus { outline: none; }
.ws-amt-btn { border: 0; background: transparent; color: var(--ws-muted); font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 6px; cursor: pointer; }
.ws-amt-btn:hover { background: #eef1f5; color: var(--ws-navy); }
.ws-amt-add { align-self: flex-start; border: 1px dashed var(--ws-line); background: #fff; color: var(--ws-navy); font-size: 12.5px; border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.ws-amt-add:hover { border-color: var(--ws-navy); }

/* URL slug box */
.ws-urlbox { display: flex; align-items: stretch; border: 1px solid var(--ws-line); border-radius: 9px; overflow: hidden; max-width: 520px; }
.ws-urlbox .ws-pre { background: #f3f5f8; color: var(--ws-muted); font-size: 12.5px; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; }
.ws-urlbox input { border: 0; background: #fff; padding: 9px 10px; font: inherit; font-size: 13px; flex: 1; min-width: 0; }
.ws-urlbox input:focus { outline: none; }
.ws-urlrow { display: flex; gap: 8px; align-items: stretch; max-width: 560px; }
.ws-urlrow .ws-urlbox { flex: 1; max-width: none; }
.ws-copybtn { flex: none; border: 1px solid var(--ws-line); background: #fff; border-radius: 9px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: var(--ws-navy); cursor: pointer; white-space: nowrap; }
.ws-copybtn:hover { background: #f0f6ff; border-color: var(--ws-navy); }

/* "Manage levels" disclosure link */
.ws-disc { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ws-navy); cursor: pointer; padding: 6px 0; background: none; border: 0; font-weight: 600; }
.ws-disc svg { width: 14px; height: 14px; }

/* Settings tab capped so rows stay tight like the mockup (a full-width tab
   would stretch each label-to-control row across the whole page). */
.ws-settings { max-width: 880px; }

/* "Saved automatically" chip */
.ws-saved { display: none; align-items: center; gap: 6px; font-size: 12px; color: #0a7d3d; transition: opacity .3s; }
.ws-saved.ws-saved-on { display: inline-flex; }
.ws-saved .ws-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ee06a; }

/* Inline link inside hint text (the app's global <a> can compute to block,
   which would force a line break before/after — keep it inline). */
.ws-link { display: inline; color: var(--ws-navy); font-weight: 600; }
.ws-link:hover { text-decoration: underline; }

/* Field info tooltip icon */
.ws-info { color: var(--ws-muted); font-size: 12px; margin-left: 4px; cursor: help; opacity: .7; }
.ws-info:hover { opacity: 1; color: var(--ws-navy); }

/* Advanced section tag (grey vs the green "new" tag) */
.ws-sect-hd .ws-tag.ws-adv { color: var(--ws-muted); background: #eef1f5; }

/* 4 ── Right: options → code → preview ─────────────────────────────────── */
.ws-preview-pane { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.ws-pcfg { background: #fff; border: 1px solid var(--ws-line); border-radius: 14px; padding: 14px 16px; }
.ws-pcfg .ws-pchd { font-weight: 600; font-size: 13.5px; color: #1f2933; }
.ws-pcfg .ws-pcsub { font-size: 11.5px; color: var(--ws-muted); margin: 4px 0 12px; line-height: 1.45; }
.ws-pcfg .ws-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; border-radius: 9px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; margin-top: 4px; }

.ws-embed { background: #0e1b2b; border-radius: 14px; padding: 13px 15px; }
.ws-embed .ws-eh { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ws-embed .ws-eh .ws-et { font-weight: 600; color: #fff; font-size: 13px; flex: 1; }
.ws-embed textarea { width: 100%; background: transparent; border: 0; resize: none; color: #9fd0ff; font-family: "SF Mono", Menlo, monospace; font-size: 11px; line-height: 1.55; padding: 0; }
.ws-embed textarea:focus { outline: none; }
.ws-copy { background: #1c8cff; color: #fff; border: 0; border-radius: 8px; font-size: 12px; font-weight: 600; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.ws-copy:hover { opacity: .9; }

.ws-pv-box { background: #fff; border: 1px solid var(--ws-line); border-radius: 14px; overflow: hidden; }
.ws-pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ws-line); }
.ws-pv-bar .ws-lab { font-size: 12px; color: var(--ws-muted); flex: 1; }
.ws-device { display: inline-flex; gap: 4px; }
.ws-device button { border: 1px solid var(--ws-line); background: #fff; border-radius: 8px; width: 33px; height: 29px; display: grid; place-items: center; cursor: pointer; color: var(--ws-muted); }
.ws-device button.ws-on { border-color: var(--ws-navy); color: var(--ws-navy); background: #f0f6ff; }
.ws-device svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ws-refresh { border: 1px solid var(--ws-line); background: #fff; border-radius: 8px; height: 29px; padding: 0 10px; font-size: 11.5px; cursor: pointer; color: var(--ws-muted); }
.ws-refresh:hover { color: var(--ws-navy); border-color: var(--ws-navy); }

.ws-stage { background: #eef1f5; padding: 16px; display: grid; place-items: start center; }
.ws-frame { background: #fff; border-radius: 11px; box-shadow: 0 10px 28px rgba(15,40,70,.12); width: 100%; transition: max-width .25s; overflow: hidden; }
.ws-frame.ws-tablet { max-width: 360px; }
.ws-frame.ws-mobile { max-width: 280px; }
.ws-frame iframe { display: block; width: 100%; height: 620px; border: 0; }

.ws-pv-empty { padding: 40px 24px; text-align: center; color: var(--ws-muted); font-size: 13px; line-height: 1.5; }

@media (max-width: 1100px) {
	.ws-preview-pane { position: static; }
	.ws-placer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ws-placer { grid-template-columns: 1fr; }
}

/* ==== css/unified-dashboard.css ==== */
/* Unified dashboard (multi-module) — ud-* namespace.
   New chrome only; KPI stat cards reuse the existing .performance-snapshot /
   .sales-widgets / .card patterns from style.css. */

[x-cloak] {
	display: none !important;
}

/* White content card (matches .sales-widgets .card look, full-width) */
.ud-card {
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 16px;
	padding: 20px;
}

/* ---- Happening today (worklist) ---- */
.ud-worklist-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	text-align: left;
	cursor: pointer;
}

.ud-worklist-chevron {
	transition: transform 0.15s ease;
	width: 14px;
}

.ud-worklist-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	border-bottom: 1px solid #f0f2f4;
}

.ud-worklist-row:last-child {
	border-bottom: none;
	padding-bottom: 4px;
}

#ud-worklist-body .ud-worklist-row:first-child {
	margin-top: 12px;
}

/* One neutral icon chip — site navy icon set, no per-module colors. */
.ud-module-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #F6F7F9;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ud-module-icon img {
	width: 17px;
	height: 17px;
}

.ud-module-icon-sm {
	width: 28px;
	height: 28px;
}

.ud-module-icon-sm img {
	width: 14px;
	height: 14px;
}

.ud-worklist-name {
	font-weight: 600;
	font-size: 14px;
	color: #303233;
	min-width: 108px;
}

.ud-chips {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	flex: 1;
}

/* Chips are links — click through to the relevant bookings tab. */
.ud-chip {
	font-size: 12px;
	font-weight: 500;
	border-radius: 999px;
	padding: 3px 10px;
	background: #eef3f7;
	color: #3b5566;
	white-space: nowrap;
	text-decoration: none;
	transition: filter 0.1s ease, box-shadow 0.1s ease;
}

.ud-chip:hover {
	filter: brightness(0.94);
	box-shadow: inset 0 0 0 1px rgba(0, 50, 100, 0.25);
	color: #3b5566;
}

.ud-chip-warn { background: #fff3d6; color: #8a6500; }
.ud-chip-warn:hover { color: #8a6500; }
.ud-chip-danger { background: #fde4e4; color: #b42020; }
.ud-chip-danger:hover { color: #b42020; }
.ud-chip-success { background: #e3f6ec; color: #1a7a44; }
.ud-chip-success:hover { color: #1a7a44; }

/* Icon + name link — same destination as the row chevron. */
.ud-worklist-module {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.ud-worklist-module:hover .ud-worklist-name {
	color: #003264;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Icon-only row link (chevron) — 44px touch target, small visual. */
.ud-open-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	flex-shrink: 0;
}

.ud-open-icon:hover {
	background: #F6F7F9;
}

.ud-open-icon img {
	width: 6px;
}

/* ---- Per-module summary cards ---- */
.ud-modgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

/* Whole card is clickable (opens the module's dashboard tab). */
.ud-card-clickable {
	cursor: pointer;
	transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.ud-card-clickable:hover,
.ud-card-clickable:focus-visible {
	border-color: #003264;
	box-shadow: 0 2px 8px rgba(0, 50, 100, 0.08);
}

.ud-modcard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.ud-modcard-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600;
	color: #303233;
}

.ud-mini {
	display: flex;
	gap: 20px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.ud-mini-value {
	font-size: 20px;
	font-weight: 600;
	color: #003264;
	line-height: 1.2;
}

.ud-mini-label {
	font-size: 11px;
	color: var(--ed-text-muted);
}

.ud-attn {
	font-size: 12px;
	color: var(--ed-text-muted);
}

/* ---- Default-tab star (active tab only) ----
   Tiny by design; the theme's span-pill styling inside nav-links is
   explicitly neutralized (it was blowing the star up into a gray oval). */
.nav-tabs .nav-link .ud-star,
.ud-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px !important;
	height: 18px !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 5px !important;
	min-width: 0 !important;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.1s ease;
	vertical-align: middle;
}

.ud-star img {
	width: 12px !important;
	height: 12px !important;
}

.ud-star:hover,
.ud-star:focus-visible {
	opacity: 1;
	background: #F6F7F9 !important;
}

.ud-star-on {
	opacity: 1;
}

/* ---- Tab panels ---- */
.ud-panel-skeleton {
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 16px;
	padding: 24px;
}

.ud-panel-skeleton .bar {
	height: 14px;
	background: #f1f3f5;
	border-radius: 6px;
	margin-bottom: 12px;
}

/* Small screens: worklist rows wrap */
@media (max-width: 560px) {
	.ud-worklist-name { min-width: auto; }
	.ud-worklist-row { flex-wrap: wrap; }
}

/* ---- Onboarding setup banner ----
   Shared by every module dashboard (components/onboarding/dashboard-banner).
   Desktop: icon | title + progress | actions on one row.
   Phone: the actions wrap onto their own full-width row so the title keeps its
   width and "Continue setup" can't run off the edge. */
.ob-banner {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 1rem 1.5rem;
}

.ob-banner-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ob-banner-icon {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1;
	color: #003264;
}

.ob-banner-body {
	flex: 1 1 0;
	min-width: 0;
}

.ob-banner-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}

.ob-banner-progress {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ob-banner-track {
	flex: 1 1 120px;
	max-width: 200px;
	height: 6px;
	background-color: #e9ecef;
	border-radius: 3px;
	overflow: hidden;
}

.ob-banner-fill {
	height: 100%;
	background-color: #003264;
	border-radius: 3px;
}

.ob-banner-meta {
	font-size: 13px;
	color: var(--ed-text-muted);
}

.ob-banner-actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ob-banner-actions .btn {
	border-radius: 8px;
	white-space: nowrap;
}

@media (max-width: 767.98px) {
	.ob-banner { padding: 14px 16px; }
	.ob-banner-row { align-items: flex-start; flex-wrap: wrap; row-gap: 12px; }
	.ob-banner-icon { margin-top: 2px; }
	.ob-banner-track { max-width: none; }
	.ob-banner-next { flex: 1 1 100%; }
	.ob-banner-actions { flex: 1 1 100%; justify-content: flex-end; }
	.ob-banner-actions .btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Phone: the two actions split the row so both stay easy to hit. */
@media (max-width: 575.98px) {
	.ob-banner-actions .btn { flex: 1 1 0; }
}

/* ---- "Dash found these on your website" suggestions card ----
   Same shape as .ob-banner: a header row with one CTA, then a list of rows.
   Phone: the CTA wraps to its own row, each item's name sits above its type
   and price instead of being clipped, and Add keeps a 44px target. */
.sug-card {
	background: #ffffff;
	border: 1px solid #e4dcfc;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sug-head {
	display: flex;
	align-items: center;
	gap: 9px;
}

.sug-head-icon { flex-shrink: 0; }

.sug-title {
	flex: 1 1 0;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: #303233;
}

.sug-cta-wrap {
	display: flex;
	margin-left: auto;
	flex-shrink: 0;
}

.sug-cta { white-space: nowrap; }

.sug-close {
	flex-shrink: 0;
	color: var(--ed-text-muted);
}

.sug-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.sug-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid #eef0f4;
	border-radius: 10px;
	padding: 10px 14px;
}

.sug-item-text {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.sug-item-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #303233;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sug-item-meta {
	font-size: 12px;
	color: #6d87a1;
	white-space: nowrap;
}

.sug-item-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.sug-item-actions .btn-primary {
	width: auto;
	padding: 6px 16px;
	font-size: 12.5px;
}

.sug-more {
	background: none;
	border: none;
	padding: 2px;
	margin-top: 2px;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	text-decoration: underline;
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.sug-card { padding: 14px 16px; }
	.sug-head { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
	.sug-head-icon { margin-top: 2px; }
	.sug-title { flex: 1 1 0; }
	.sug-close { order: 2; }
	.sug-cta-wrap {
		order: 3;
		flex: 1 1 100%;
		margin-left: 0;
		justify-content: flex-end;
	}
	.sug-cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.sug-item-text {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.sug-item-name,
	.sug-item-meta {
		white-space: normal;
		overflow: visible;
	}
	.sug-item-actions .btn { min-height: 44px; }
}

/* Phone: the concierge button spans the row so it is easy to hit. */
@media (max-width: 575.98px) {
	.sug-cta { flex: 1 1 0; }
}

/* ==== css/agents.css ==== */
/* ============================================================
   Dash Agents module (.ag-*) — 2026 module-namespaced pattern.
   Shared by /agents, run views, and /agents/skills.
   Card chrome mirrors .pd-card; pills mirror .pos-pill.
   ============================================================ */

.ag-card {
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 16px;
	margin-bottom: 16px;
}

.ag-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid #f0f2f4;
	font-size: 15px;
	font-weight: 600;
	color: #303233;
}

.ag-card-header .ag-card-action {
	margin-left: auto;
}

.ag-card-body {
	padding: 16px 18px;
}

/* ---- Tab strip ---- */
.ag-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ag-tab {
	background: #fff;
	border: 1px solid #e3e6ea;
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 13px;
	font-weight: 500;
	color: #5a6b7b;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ag-tab .ag-tab-count {
	background: #eef1f4;
	border-radius: 999px;
	font-size: 11px;
	padding: 1px 7px;
	font-weight: 600;
}

.ag-tab.active {
	background: #003264;
	border-color: #003264;
	color: #fff;
}

.ag-tab.active .ag-tab-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* ---- Status pills ---- */
.ag-status {
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
	padding: 2px 9px;
	white-space: nowrap;
}

.ag-status-on { background: #e7f4ec; color: #198754; }
.ag-status-off { background: #eef1f4; color: #5a6b7b; }
.ag-status-attention { background: #fff3d9; color: #b45309; }
.ag-status-trouble { background: #fdecec; color: #b42020; }

/* ---- Buttons ---- */
.ag-btn {
	background: #0d3b66;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 9px 15px;
	font-size: 13px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.ag-btn:hover { background: #0a2f52; color: #fff; }

.ag-btn-ghost {
	background: #fff;
	color: #5a6b7b;
	border: 1px solid #dfe4e9;
}

.ag-btn-ghost:hover { background: #f7f9fb; color: #303233; }

.ag-btn-keep {
	background: #198754;
}

.ag-btn-keep:hover { background: #146c43; }

/* ---- Skills page: proposal cards ---- */
.ag-proposal {
	border: 1px solid #cfe8d8;
	background: #f6fbf8;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.ag-proposal-head {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ag-proposal-head i { color: #1b6b3f; }

.ag-proposal-source {
	font-size: 11.5px;
	color: var(--ed-text-muted);
	font-weight: 400;
	margin-left: auto;
}

.ag-proposal-text {
	font-size: 13px;
	line-height: 1.55;
	color: #3f4a55;
}

.ag-proposal-detail {
	background: #fff;
	border: 1px solid #e6efe9;
	border-radius: 10px;
	padding: 10px 12px;
	margin: 10px 0;
	font-size: 12.5px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.ag-proposal-detail .ag-diff-old { color: #a05252; text-decoration: line-through; }
.ag-proposal-detail .ag-diff-new { color: #1b6b3f; font-weight: 500; }

.ag-proposal-actions {
	display: flex;
	gap: 8px;
	margin-top: 6px;
}

/* ---- Skills page: skill rows ---- */
.ag-skill-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid #f0f2f4;
	font-size: 13.5px;
}

.ag-skill-row:last-child { border-bottom: none; }

.ag-skill-icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: #e7f0fb;
	color: #003264;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.ag-skill-title { font-weight: 600; }

.ag-skill-desc {
	font-size: 12px;
	color: var(--ed-text-muted);
	margin-top: 2px;
}

.ag-skill-meta {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	font-size: 11.5px;
	color: var(--ed-text-muted);
}

.ag-source-tag {
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 10.5px;
	font-weight: 600;
}

.ag-source-learned { background: #eef7f1; color: #1b6b3f; }
.ag-source-owner { background: #e7f0fb; color: #003264; }

.ag-row-link {
	color: #0d3b66;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.ag-row-link.ag-row-link-muted { color: #8a96a3; }

/* ---- Skills page: memory cards ---- */
.ag-memory-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 900px) {
	.ag-memory-grid { grid-template-columns: 1fr; }
}

.ag-memory-cap {
	margin-left: auto;
	font-size: 11px;
	font-weight: 400;
	color: var(--ed-text-muted);
}

.ag-memory-textarea {
	width: 100%;
	border: 1px solid #dfe4e9;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.6;
	min-height: 160px;
	resize: vertical;
	font-family: inherit;
	color: #303233;
}

.ag-memory-textarea:focus {
	outline: none;
	border-color: #003264;
}

/* ---- Skills page: history timeline ---- */
.ag-history-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #f0f2f4;
	font-size: 13px;
}

.ag-history-row:last-child { border-bottom: none; }

.ag-history-when {
	color: var(--ed-text-muted);
	font-size: 12px;
	white-space: nowrap;
	min-width: 90px;
}

/* ---- Chips (shared) ---- */
.ag-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #f0f4f8;
	border: 1px solid #e3e6ea;
	border-radius: 999px;
	padding: 3px 11px;
	font-size: 12px;
	font-weight: 500;
	color: #33526f;
	white-space: nowrap;
}

/* ---- Empty states ---- */
.ag-empty-tab {
	text-align: center;
	padding: 44px 20px;
	color: var(--ed-text-muted);
}

.ag-empty-tab i {
	font-size: 28px;
	margin-bottom: 10px;
	display: block;
	color: #aab5bf;
}

.ag-empty-tab .ag-empty-title {
	font-size: 15px;
	font-weight: 600;
	color: #303233;
	margin-bottom: 4px;
}

.ag-empty-inline {
	color: var(--ed-text-muted);
	font-size: 13px;
	padding: 10px 0;
}

/* ---- Home: "Waiting for your OK" approval inbox ---- */
.ag-okbox {
	background: #fff8ec;
	border: 1px solid #f3dfb6;
	border-radius: 14px;
	padding: 14px 16px;
}

.ag-okbox-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 14px;
	color: #b45309;
	margin-bottom: 6px;
}

.ag-okbox-count {
	background: #b45309;
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	padding: 1px 8px;
}

.ag-okrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid #f3e8cf;
	font-size: 13.5px;
	flex-wrap: wrap;
}

.ag-okrow-what {
	flex: 1;
	min-width: 220px;
}

.ag-okrow-from {
	color: var(--ed-text-muted);
	font-size: 12px;
	white-space: nowrap;
}

.ag-okrow-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-shrink: 0;
}

/* ---- Home: "Dash picked something up" banner ---- */
.ag-learnbox {
	background: #eef7f1;
	border: 1px solid #cfe8d8;
	border-radius: 14px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13.5px;
	flex-wrap: wrap;
}

.ag-learnbox-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #d8eee0;
	color: #1b6b3f;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.ag-learnbox-link {
	margin-left: auto;
	color: #1b6b3f;
	font-weight: 600;
	font-size: 12.5px;
	white-space: nowrap;
	text-decoration: none;
}

.ag-learnbox-link:hover { color: #14522f; }

/* ---- Home: shortcut cards (Dash Skills + Connected apps) ---- */
.ag-shortcut-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Only Dash Skills shows (no integrations permission) — don't leave a gap. */
.ag-shortcut-row-single { grid-template-columns: 1fr; }

@media (max-width: 900px) {
	.ag-shortcut-row { grid-template-columns: 1fr; }
}

.ag-shortcut {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 14px;
	padding: 14px 16px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s, transform 0.2s;
}

.ag-shortcut:hover {
	color: inherit;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.ag-shortcut-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
}

.ag-shortcut-icon-skills { background: #eef7f1; color: #1b6b3f; }
.ag-shortcut-icon-apps { background: #e7f0fb; color: #003264; }

.ag-shortcut-body { flex: 1; min-width: 0; }

.ag-shortcut-title {
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.ag-shortcut-count {
	background: #198754;
	color: #fff;
	border-radius: 999px;
	font-size: 10.5px;
	padding: 2px 8px;
	font-weight: 600;
}

.ag-shortcut-sub {
	font-size: 12px;
	color: var(--ed-text-muted);
	margin-top: 3px;
}

.ag-shortcut-chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 5px;
}

.ag-shortcut-chevron {
	font-size: 12px;
	color: #aab5bf;
	flex-shrink: 0;
}

/* ---- Home: build-your-agent CTA (moved from an inline style block) ---- */
.btn-build-agent {
	background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
	border: none;
	color: #fff;
	border-radius: 12px;
	padding: 8px 20px;
	font-size: 14px;
	transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-build-agent:hover:not(:disabled) {
	opacity: 0.88;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
	color: #fff;
}

.btn-build-agent:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: none;
}

.btn-build-agent:disabled {
	opacity: 0.55;
	color: #fff;
}

/* ---- Run timeline: thought + condensation nodes ---- */
.ag-thought {
	color: #7b8794;
	font-style: italic;
	font-size: 12.5px;
	line-height: 1.5;
}

.ag-cost-note {
	background: #e7f0fb;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12.5px;
	color: #33526f;
}

.ag-cost-note b { color: #003264; }

/* ---- Form bits (playbook editor) ---- */
.ag-input {
	width: 100%;
	border: 1px solid #dfe4e9;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 13.5px;
	color: #303233;
	background: #fff;
}

.ag-input:focus {
	outline: none;
	border-color: #003264;
}

.ag-label {
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 6px;
	display: block;
	color: #303233;
}

.ag-form-row { margin-bottom: 12px; }

/* Agent card kebab menu (#4309). The global `.dropdown { width: 100% }` in
   style.css stretched the wrapper across the card header, which parked the
   3-dots button on the LEFT of the card. Scope it back to content width and
   pin it to the right edge of the header row. */
.ag-card-menu {
	width: auto;
	margin-left: auto;
}

/* The opened menu must paint above the fixed sidebar (z-index 1041). */
.ag-card-menu .dropdown-menu {
	z-index: 1045;
}

/* ==== css/ai-cards.css ==== */
/* ==========================================================================
   AI generative-UI cards (.aic-*) — Ask Dash typed card catalog (#3796)
   Rendered by resources/views/components/ai-cards/* (history) and mirrored
   1:1 by window.DashCards (streaming). Loads app-wide from the base layout
   because the AI sidebar renders on every supplier page.
   Tokens: AI purple #7c3aed→#9333ea, surfaces #FAF5FF/#DDD6FE, navy #003264,
   12px card radius. Font inherits the global BRCandor.
   ========================================================================== */

.aic-card {
	background: #fff;
	border: 1px solid #DDD6FE;
	border-radius: 12px;
	margin-top: 8px;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -16px rgba(124, 58, 237, 0.25);
	font-size: 13px;
	line-height: 1.45;
	color: #101d2b;
}

.aic-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0ebfc;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.01em;
}

.aic-card-header .aic-pill {
	margin-left: auto;
}

.aic-card-header .aic-pill + .aic-pill {
	margin-left: 0;
}

.aic-card-body {
	padding: 10px 14px;
}

.aic-card a {
	display: inline;
	color: #7c3aed;
	text-decoration: none;
}

.aic-card a:hover {
	text-decoration: underline;
}

/* --- Key/value rows (booking, customer, availability) --- */

.aic-kv {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.aic-kv-label {
	color: #5c7186;
	font-size: 12px;
	flex-shrink: 0;
}

.aic-kv-value {
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

.aic-accent {
	color: #7c3aed;
}

/* Money still owed / attention value (e.g. open balance on customer_card). */
.aic-warn {
	color: #dc2626;
}

/* --- Status pills --- */

.aic-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.aic-pill--green {
	background: #dcfce7;
	color: #16a34a;
}

.aic-pill--amber {
	background: #fef3c7;
	color: #b45309;
}

.aic-pill--red {
	background: #fee2e2;
	color: #dc2626;
}

.aic-pill--blue {
	background: #dbeafe;
	color: #1d4ed8;
}

.aic-pill--purple {
	background: #FAF5FF;
	color: #6d28d9;
	border: 1px solid #DDD6FE;
}

.aic-pill--neutral {
	background: #eef2f7;
	color: #5c7186;
}

/* --- availability_card day strip (#3884) — mirrors the Check Availability
   grid's bucket colors: high = green, med = purple, low = amber, none = red,
   closed = gray. The requested window gets a purple ring. --- */

.aic-subline {
	padding: 0 14px 6px;
	font-size: 12px;
	color: #5c7186;
}

.aic-days {
	display: flex;
	gap: 4px;
	padding: 4px 14px 10px;
}

.aic-day {
	flex: 1;
	min-width: 0;
	text-align: center;
	border-radius: 8px;
	padding: 5px 1px;
	border: 1px solid #eef2f7;
	background: #fafbfd;
}

.aic-day-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #5c7186;
	white-space: nowrap;
	overflow: hidden;
}

.aic-day-count {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #101d2b;
	white-space: nowrap;
}

.aic-day--high {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.aic-day--high .aic-day-count {
	color: #16a34a;
}

.aic-day--med {
	background: #faf5ff;
	border-color: #e9d5ff;
}

.aic-day--med .aic-day-count {
	color: #7c3aed;
}

.aic-day--low {
	background: #fffbeb;
	border-color: #fde68a;
}

.aic-day--low .aic-day-count {
	color: #b45309;
}

.aic-day--none {
	background: #fef2f2;
	border-color: #fecaca;
}

.aic-day--none .aic-day-count {
	color: #dc2626;
}

.aic-day--closed {
	background: #f1f4f8;
	border-color: #e2e8f0;
}

.aic-day--closed .aic-day-count {
	color: #94a3b8;
	font-weight: 600;
}

.aic-day--range {
	box-shadow: inset 0 0 0 1.5px #7c3aed;
}

/* --- stat_row --- */

.aic-stats {
	display: flex;
	flex-wrap: wrap;
}

.aic-stat {
	flex: 1 1 0;
	min-width: 90px;
	padding: 10px 14px;
	border-right: 1px solid #f6f1fd;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.aic-stat:last-child {
	border-right: none;
}

.aic-stat-label {
	font-size: 11px;
	color: #5c7186;
	font-weight: 600;
}

.aic-stat-value {
	font-size: 17px;
	font-weight: 700;
	color: #7c3aed;
	letter-spacing: -0.02em;
}

.aic-delta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 2px;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
}

.aic-delta--up {
	background: #dcfce7;
	color: #16a34a;
}

.aic-delta--down {
	background: #fee2e2;
	color: #dc2626;
}

.aic-delta--neutral {
	background: #eef2f7;
	color: #5c7186;
}

/* --- chart_card --- */

.aic-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 110px;
	padding: 22px 14px 2px;
}

.aic-bar {
	flex: 1;
	min-width: 0;
	background: linear-gradient(180deg, #a78bfa, #7c3aed);
	border-radius: 6px 6px 0 0;
	position: relative;
	box-shadow: 0 -4px 14px -6px rgba(124, 58, 237, 0.4);
}

.aic-bar span {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10.5px;
	font-weight: 700;
	color: #101d2b;
	white-space: nowrap;
}

.aic-bar-labels {
	display: flex;
	gap: 8px;
	padding: 3px 14px 10px;
	font-size: 10.5px;
	color: #5c7186;
}

.aic-bar-labels span {
	flex: 1;
	min-width: 0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aic-line {
	padding: 14px 14px 0;
}

.aic-line svg {
	display: block;
	width: 100%;
	height: 110px;
}

/* --- chart_card expand affordance + full-width modal (#3880) --- */

.aic-expand-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid #DDD6FE;
	border-radius: 999px;
	background: #FAF5FF;
	color: #6d28d9;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.aic-expand-btn:hover {
	background: #f3eafe;
}

.aic-chart-area {
	cursor: zoom-in;
}

.aic-chart-modal {
	position: fixed;
	inset: 0;
	z-index: 1080; /* above the AI sidebar panel (1045) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.aic-chart-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.55);
}

.aic-chart-modal-dialog {
	position: relative;
	width: min(920px, 94vw);
	max-height: 86vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 64px -12px rgba(16, 24, 40, 0.35);
	padding-bottom: 8px;
}

.aic-chart-modal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid #f0ebfc;
	font-weight: 700;
	font-size: 14px;
}

.aic-chart-modal-close {
	margin-left: auto;
	border: none;
	background: none;
	color: #5c7186;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
}

.aic-chart-modal-close:hover {
	background: #f1f5f9;
	color: #101d2b;
}

.aic-bars--modal {
	height: 260px;
	padding: 26px 22px 4px;
	gap: 6px;
}

.aic-line--modal svg {
	height: 260px;
}

.aic-bar-labels--modal {
	padding: 4px 22px 12px;
	gap: 6px;
}

.aic-chart-modal .aic-takeaway {
	padding: 0 22px 12px;
}

/* --- table_card --- */

.aic-table-wrap {
	overflow-x: auto;
}

.aic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.aic-table th {
	text-align: left;
	color: #5c7186;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 8px 14px;
	border-bottom: 1px solid #f1f4f8;
	white-space: nowrap;
}

.aic-table td {
	padding: 7px 14px;
	border-bottom: 1px solid #f6f8fb;
}

.aic-table tbody tr:last-child td {
	border-bottom: none;
}

/* --- booking_card extras --- */

.aic-items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.aic-item {
	background: #FAF5FF;
	border: 1px solid #DDD6FE;
	color: #003264;
	border-radius: 8px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
}

.aic-money {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid #f1f4f8;
}

.aic-money-total {
	font-size: 16px;
	font-weight: 700;
	color: #7c3aed;
	letter-spacing: -0.02em;
}

.aic-money-note {
	margin-left: auto;
	font-size: 11.5px;
	color: #5c7186;
}

/* --- diff_card --- */

.aic-diff {
	padding-top: 6px;
	padding-bottom: 6px;
}

.aic-diff-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid #f6f8fb;
}

.aic-diff-row:last-child {
	border-bottom: none;
}

.aic-diff-values {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-align: right;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.aic-diff-before {
	color: #5c7186;
	text-decoration: line-through;
	font-size: 12px;
}

.aic-diff-arrow {
	color: #9333ea;
	font-weight: 700;
}

.aic-diff-after {
	color: #7c3aed;
	font-weight: 700;
}

/* diff_card availability verdict on the proposed window (#3885). */
.aic-avail-note {
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	border-top: 1px solid #f1f4f8;
}

.aic-avail-note--ok {
	color: #16a34a;
	background: #f0fdf4;
}

.aic-avail-note--warn {
	color: #b45309;
	background: #fffbeb;
}

/* Actionable cards (#3927): the Approve/Decline row and the outcome strip
   the card morphs to once the pending action is acted on (or expired). The
   buttons reuse .aic-btn from the plan cards; the strip mirrors the plan
   result tones. */
.aic-actions {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-top: 1px solid #f1f4f8;
	background: rgba(250, 245, 255, 0.6);
}

.aic-outcome {
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 600;
	border-top: 1px solid #f1f4f8;
}

.aic-outcome--ok {
	color: #166534;
	background: #f0fdf4;
}

.aic-outcome--warn {
	color: #b45309;
	background: #fffbeb;
}

.aic-outcome--neutral {
	color: #5c7186;
	background: #f1f5f9;
}

/* --- shared states / footer --- */

.aic-takeaway {
	padding: 0 14px 10px;
	font-size: 12.5px;
	color: #5c7186;
}

.aic-empty {
	padding: 14px;
	font-size: 12.5px;
	color: #5c7186;
	background: #FAF5FF;
}

.aic-error-line {
	padding: 10px 14px;
	font-size: 12.5px;
	color: #b45309;
	background: #fef3c7;
}

.aic-card-footer {
	padding: 9px 14px;
	border-top: 1px solid #f1f4f8;
}

.aic-action {
	font-weight: 700;
	font-size: 12.5px;
}

/* The live stream composes prose + cards in ONE bubble: each prose segment is
   an .ai-stream-prose div, cards land inline between them at the point of the
   answer (#3881…#3885). */
.ai-stream-content .ai-stream-prose:empty {
	display: none;
}

.ai-stream-content .aic-card + .ai-stream-prose {
	margin-top: 10px;
}

/* Chart axis labels (#3880): the renderers thin to a handful of short labels,
   so nothing truncates mid-word ("Augu…") — the ellipsis stays only as a
   last-resort guard. In the narrow sidebar panel, shrink a touch further. */
.ai-sidebar-panel .aic-bar-labels {
	font-size: 10px;
	gap: 5px;
}

.ai-sidebar-panel .aic-bars {
	gap: 5px;
}


/* ==========================================================================
   plan_card / result_card (#3797) — the plan-approve-execute surface.
   Rendered by components/ai-cards/plan-card.blade.php + result-card.blade.php
   and mirrored 1:1 by window.DashCards.plan_card / .result_card.
   ========================================================================== */

.aic-plan-count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: #5c7186;
}

.aic-plan-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid #f1f4f8;
	font-size: 13px;
}

.aic-plan-step:last-of-type {
	border-bottom: none;
}

.aic-plan-ck {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid #DDD6FE;
	background: #faf5ff;
	color: #7c3aed;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}

.aic-plan-step--done .aic-plan-ck {
	background: linear-gradient(135deg, #7c3aed, #9333ea);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45);
}

.aic-plan-step--running .aic-plan-ck {
	border-color: #7c3aed;
	animation: aic-pulse 1.1s ease-in-out infinite;
}

.aic-plan-step--failed .aic-plan-ck,
.aic-plan-step--awaiting_confirmation .aic-plan-ck {
	background: #fef3c7;
	border-color: #f59e0b;
	color: #b45309;
}

.aic-plan-step--skipped {
	opacity: 0.55;
}

@keyframes aic-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.aic-plan-step-body {
	flex: 1;
	min-width: 0;
}

.aic-plan-step-label {
	font-weight: 600;
	letter-spacing: -0.005em;
}

.aic-plan-step-detail {
	font-size: 12px;
	color: #5c7186;
	margin-top: 1px;
}

.aic-plan-step-fail {
	font-size: 12px;
	color: #b91c1c;
	margin-top: 1px;
}

.aic-plan-step-link {
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

.aic-plan-remove {
	border: none;
	background: transparent;
	color: #5c7186;
	font-size: 12px;
	cursor: pointer;
	padding: 2px 4px;
	flex-shrink: 0;
}

.aic-plan-remove:hover {
	color: #b91c1c;
}

.aic-plan-failure {
	padding: 10px 14px;
	font-size: 12.5px;
	color: #b91c1c;
	background: #fef2f2;
}

.aic-plan-foot {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: rgba(250, 245, 255, 0.6);
}

.aic-btn {
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: -0.005em;
}

.aic-btn--primary {
	background: linear-gradient(135deg, #7c3aed, #9333ea);
	color: #fff;
	box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.5);
}

.aic-btn--plain {
	background: #eef2f7;
	color: #101d2b;
}

.aic-btn--ghost {
	background: transparent;
	color: #5c7186;
}

.aic-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.aic-plan-note {
	font-size: 12px;
	color: #5c7186;
	font-weight: 600;
}

.aic-plan-result {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 14px;
	font-size: 12.5px;
	background: #f0fdf4;
	color: #166534;
}

.aic-plan-result-ok {
	font-weight: 800;
}

.aic-plan-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.aic-plan-links a {
	font-weight: 700;
}

.aic-plan-undo {
	border: none;
	background: transparent;
	color: #7c3aed;
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
	padding: 0;
}

.aic-plan-undo:hover {
	text-decoration: underline;
}

/* result_card — the standalone completion/failure card. */
.aic-result--completed {
	border-color: #bbf7d0;
}

.aic-result--failed {
	border-color: #fecaca;
}

.aic-result-line {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13px;
}

.aic-result--completed .aic-result-line {
	background: #f0fdf4;
	color: #166534;
}

.aic-result--failed .aic-result-line {
	background: #fef2f2;
	color: #b91c1c;
}

.aic-result--cancelled .aic-result-line {
	background: #f1f4f8;
	color: #5c7186;
}

.aic-result-mark {
	font-weight: 800;
}

/* ==== css/ai-dock.css ==== */
/* ==========================================================================
   Dash docked companion - Phase 2 (#3800)
   --------------------------------------------------------------------------
   The AI sidebar is no longer a slide-over: once opened it DOCKS to the right
   edge and the page compresses beside it, so the page and Dash are usable at
   once. Collapsed, it is the same floating Dash button the portal has always
   had (styles live in the component's own stylesheet).

   The panel keeps the portal's white chat surface - Dash is a working panel,
   not a themed one. The page brief (.ai-brief) is styled as a Dash message
   with its actions inline, so the whole panel reads as one conversation.

   Loaded from the base layout head (before overwriteThirdParty.css) so the
   compression class never flashes uncompressed on wire:navigate. Selectors
   are namespaced: `.main-wrapper[.dash-docked]` only touches the one layout
   wrapper and is inert until the class is present; everything else lives
   under `.ai-brief-*` / `.ed-row-mark*`.
   ========================================================================== */

:root {
	/* Kept in sync with the panel width in the component stylesheet - one knob
	   for both the panel and the compression it causes. */
	--dash-dock-w: 380px;
}

/* Page compression. The panel is position:fixed, so the content wrapper
   yields the same width. Desktop only - below lg the panel overlays like the
   old slide-over (with a backdrop, see the component stylesheet) and nothing
   compresses. The transition lives on the bare class so collapse/expand
   animates both ways; margin-right is 0 without .dash-docked, so this is
   inert elsewhere. */
.main-wrapper {
	transition: margin-right 0.25s ease;
}

@media (min-width: 992px) {
	.main-wrapper.dash-docked {
		margin-right: var(--dash-dock-w);
	}

	/* Dashboard / report stat-card rows: the row's horizontal scroll is dead
	   (.custom-tooltip-dashboard forces overflow visible so tooltips aren't
	   clipped, and the reports row never had it), so docked, the fixed-width
	   cards run under the panel. Let the row wrap - inert while they fit. */
	.main-wrapper.dash-docked .sales-widgets {
		flex-wrap: wrap;
	}

	/* Waiver/form builder: the canvas column is flex-grow with min-width:auto,
	   so its intrinsic width (logo row, table elements) wins over the shrunk
	   page and the canvas runs under the panel. Let it shrink and scroll. */
	.main-wrapper.dash-docked .form-builder-wrapper .form-content {
		min-width: 0;
		overflow-x: auto;
	}

	/* Manifests toolbar (date nav + filters + scan) is one nowrap row. */
	.main-wrapper.dash-docked .manifests-toolbar {
		flex-wrap: wrap;
	}

	/* POS cart header: title + action buttons don't fit the narrowed cart
	   column side by side - let the buttons drop to a second line. */
	.main-wrapper.dash-docked .pos-cart-header {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	/* Settings permission chips (Team roles): a long chip is nowrap and juts
	   out of its table cell when the cell narrows - let its text wrap. */
	.main-wrapper.dash-docked .settings-content-container .badge.bg-light,
	.main-wrapper.dash-docked .settings-content-wraper .badge.bg-light {
		white-space: normal;
		text-align: left;
	}
}

/* Docked, the page must follow the same responsive pattern it would use at
   (viewport - panel) width. The portal's breakpoints key off the viewport, so
   they never fire when the panel eats 380px - a 1200px window docked renders
   full desktop chrome into ~580px and the title bar, tab rows and filter
   buttons clip under the panel. 992 + 380 = 1372: below this a docked page
   has less than the 992px desktop minimum, so the left nav goes off-canvas
   behind the hamburger and the listing toolbar wraps - exactly what style.css
   does below 992px undocked. Same rules, shifted by the panel width. */
@media (min-width: 992px) and (max-width: 1371.98px) {
	.main-wrapper.dash-docked .sidebar {
		margin-left: -300px;
		width: 80%;
		max-width: 300px;
	}

	.main-wrapper.dash-docked .sidebar.show {
		margin-left: 0;
	}

	.main-wrapper.dash-docked .content {
		padding-left: 0;
	}

	/* The pd-/sd- detail headers carry their own chrome instead of .title -
	   they include the same sidebar-toggle partial, shown here too. */
	.main-wrapper.dash-docked .content .title .menu-icon,
	.main-wrapper.dash-docked .content .pd-header .menu-icon,
	.main-wrapper.dash-docked .content .sd-header .menu-icon {
		display: block;
		cursor: pointer;
		margin-left: 8px;
		margin-right: 12px;
	}

	.main-wrapper.dash-docked .content .title .menu-icon:hover {
		background-color: #00000014;
	}

	/* Listing toolbar: search box and filter dropdowns wrap instead of
	   clipping (mirror of the max-width:991px booking-content-header rules). */
	.main-wrapper.dash-docked .booking-content-header > .col,
	.main-wrapper.dash-docked .booking-content-header > .col-md-3,
	.main-wrapper.dash-docked .booking-content-header > .col-md-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.main-wrapper.dash-docked .booking-content-header .search-input {
		justify-content: flex-start !important;
		flex-wrap: wrap;
	}

	.main-wrapper.dash-docked .booking-content-header .search-input .input-group {
		max-width: none;
		flex: 1 1 150px;
		min-width: 150px;
	}

	.main-wrapper.dash-docked .booking-content-header .search-input .dropdown-filter {
		flex-shrink: 0;
	}

	.main-wrapper.dash-docked .global-search-container {
		max-width: 100%;
	}

	/* Listing filter rows outside .booking-content-header (experiences,
	   categories) nest the search box and dropdowns in one nowrap flex row -
	   wrap the row and its inner group instead of clipping the dropdowns. */
	.main-wrapper.dash-docked .search-input,
	.main-wrapper.dash-docked .search-input > .d-flex {
		flex-wrap: wrap;
	}

	/* Bootstrap display utilities key off the viewport too, so a control a
	   page hides below lg (the title-bar global search, an extra header
	   button) stays visible docked and clips under the panel. Mirror the
	   below-lg state: shown-from-lg-up hides, shown-below-lg shows. Scoped
	   to .content: the off-canvas nav's own d-* internals (e.g. the
	   .user-info row) must keep their real-viewport behavior. */
	.main-wrapper.dash-docked .content .d-none.d-lg-block,
	.main-wrapper.dash-docked .content .d-none.d-lg-flex,
	.main-wrapper.dash-docked .content .d-none.d-lg-inline-block,
	.main-wrapper.dash-docked .content .d-none.d-lg-inline-flex {
		display: none !important;
	}

	.main-wrapper.dash-docked .content .d-flex.d-lg-none,
	.main-wrapper.dash-docked .content .d-inline-flex.d-lg-none {
		display: flex !important;
	}

	.main-wrapper.dash-docked .content .d-lg-none:not(.d-flex):not(.d-inline-flex) {
		display: block !important;
	}

	/* Tab strips (.eq-tabs) are flex-wrap:nowrap so their dropdowns aren't
	   clipped by a scroll container - docked, a long strip (program detail,
	   bookings) runs under the panel instead. Wrap: the ms-auto extras keep
	   their right alignment on whatever row they land on. */
	.main-wrapper.dash-docked .nav-tabs.eq-tabs {
		flex-wrap: wrap;
	}

	/* POS pill strip (booking-type pills + search + category/status
	   dropdowns) is one nowrap row - wrap it rather than clip the trailing
	   dropdowns. */
	.main-wrapper.dash-docked .pos-filter-strip {
		flex-wrap: wrap;
	}
}

/* /settings/ai-bookings lays its launcher form out on a 3-column grid that
   its own stylesheet collapses at 900px - mirror that at 900 + 380. */
@media (min-width: 992px) and (max-width: 1279.98px) {
	.main-wrapper.dash-docked .dash-lf-grid {
		grid-template-columns: 1fr;
	}

	.main-wrapper.dash-docked .dash-stats {
		grid-template-columns: 1fr 1fr;
	}

	.main-wrapper.dash-docked .dash-select,
	.main-wrapper.dash-docked .dash-split-l {
		min-width: 0;
		max-width: none;
		width: 100%;
	}
}

/* Below-md equivalent: 768 + 380 = 1148. Same mirror one tier down - pages
   swap header buttons and toolbars on d-md-* utilities. */
@media (min-width: 992px) and (max-width: 1147.98px) {
	.main-wrapper.dash-docked .content .d-none.d-md-block,
	.main-wrapper.dash-docked .content .d-none.d-md-flex,
	.main-wrapper.dash-docked .content .d-none.d-md-inline-block,
	.main-wrapper.dash-docked .content .d-none.d-md-inline-flex {
		display: none !important;
	}

	.main-wrapper.dash-docked .content .d-flex.d-md-none,
	.main-wrapper.dash-docked .content .d-inline-flex.d-md-none {
		display: flex !important;
	}

	.main-wrapper.dash-docked .content .d-md-none:not(.d-flex):not(.d-inline-flex) {
		display: block !important;
	}

	/* Stack-below-md rows (.flex-column.flex-md-row) stack docked too. */
	.main-wrapper.dash-docked .flex-column.flex-md-row {
		flex-direction: column !important;
	}

	/* Settings data tables must scroll, never crush (the same fix style.css
	   carries at max-width:767px - docked below 1148 the page has the same
	   effective width, so the same squeeze applies: columns snap to
	   min-content and the rest clips under the panel). */
	.main-wrapper.dash-docked .settings-content-wraper .table-responsive > table,
	.main-wrapper.dash-docked .settings-content-container .table-responsive > table {
		width: max-content;
		min-width: 100%;
	}

	.main-wrapper.dash-docked .table-responsive > table.table-fixed-cols {
		table-layout: auto;
		width: max-content;
		min-width: 100%;
	}

	.main-wrapper.dash-docked .inv-accordion {
		overflow-x: auto;
	}

	/* POS: the cart is d-none d-md-flex, so the mirror above would hide it -
	   but a cashier needs the cart. Use the page's own phone pattern instead
	   (the max-width:575px block): stack it under the catalog, full width. */
	.main-wrapper.dash-docked .booking-layout {
		flex-direction: column;
	}

	.main-wrapper.dash-docked .booking-layout .booking-content,
	.main-wrapper.dash-docked .booking-layout .booking-checkout {
		max-width: 100%;
		flex: 0 0 100%;
		width: 100%;
	}

	.main-wrapper.dash-docked .booking-layout .booking-checkout {
		display: flex !important;
		border-top: 1px solid var(--pos-line, #E8ECF1);
	}
}

/* --- The page brief (#3800 unified panel) ---------------------------------
   One bubble pinned above the composer: greeting lede, fact rows with their
   action button inline, per-page suggested questions. Styled like a Dash
   message so the whole panel reads as one conversation. */
.ai-brief {
	margin: 8px 14px 10px;
	background: #F3F4F6;
	border-radius: 12px;
	padding: 11px 13px 9px;
	flex-shrink: 0;
	max-height: 45%;
	overflow-y: auto;
}

.ai-brief-lede {
	font-size: 12.5px;
	line-height: 1.5;
	color: #1F2A37;
	margin-bottom: 4px;
}

.ai-brief-clear {
	font-size: 12.5px;
	line-height: 1.5;
	color: #1F2A37;
}

.ai-brief-item {
	padding: 7px 0;
}

.ai-brief-item-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.ai-brief-item + .ai-brief-item {
	border-top: 1px solid #E5E7EB;
}

.ai-brief-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 16px;
	justify-content: center;
	color: var(--ed-text-muted, #5A7089);
}

.ai-brief-icon-warning { color: #b45309; }
.ai-brief-icon-danger { color: #dc2626; }

.ai-brief-text {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #1F2A37;
}

/* The action beside its fact. White on the grey bubble, portal navy. */
.ai-brief-act {
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	padding: 5.5px 11px;
	font-size: 11px;
	font-weight: 600;
	color: #003264;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ai-brief-act:hover:not(:disabled) {
	background: #F1F5F9;
	border-color: #94A3B8;
}

.ai-brief-act:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Approve? / Cancel for money and customer-facing actions (#4036). The fact
   text sits on the same row, so "Approve?" is unambiguous - and it pulses
   once a second so the eye cannot miss which button is armed. */
.ai-brief-act.ai-brief-act-approve {
	background: #16a34a;
	border-color: #16a34a;
	color: #fff;
	animation: ai-approve-pulse 1.2s ease-in-out infinite;
}

.ai-brief-act.ai-brief-act-approve:hover:not(:disabled) {
	background: #15803d;
	border-color: #15803d;
	animation: none;
}

@keyframes ai-approve-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
	50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.ai-brief-act.ai-brief-act-cancel {
	background: transparent;
	border-color: transparent;
	color: var(--ed-text-muted, #5A7089);
}

.ai-brief-act.ai-brief-act-cancel:hover:not(:disabled) {
	background: #F1F5F9;
	border-color: transparent;
	color: #1F2A37;
}

/* Navigate chips read as links, not commands. */
.ai-brief-act.ai-brief-act-link {
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
	padding-left: 4px;
	padding-right: 4px;
}

.ai-brief-act.ai-brief-act-link:hover:not(:disabled) {
	background: transparent;
	border-color: transparent;
	color: #00264d;
}

/* The result of a run: its own full-width line under the fact (#4035). */
.ai-brief-outcome {
	margin: 5px 0 0 25px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.45;
	color: #166534;
}

.ai-brief-outcome.ai-brief-outcome-error {
	color: #b91c1c;
}

/* style.css sets a global a { display: block }; the "Show them" link must
   flow inside the outcome sentence. */
.ai-brief-outcome a {
	display: inline;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
}

/* Suggested questions - tappable prompts, per page family. */
.ai-brief-sugs {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 9px;
}

.ai-brief-sug {
	background: #fff;
	border: 1px solid #E2E8F0;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 11.5px;
	color: var(--ed-text-muted, #5A7089);
	cursor: pointer;
	text-align: left;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ai-brief-sug:hover {
	border-color: #94A3B8;
	color: #003264;
}

/* --- In-place row markers (#3803) ------------------------------------------
   The "Chased · Returns · 2m ago" pill on list rows after a chip runs.
   Rendered server-side from the recent-action cache and instantly by
   public/js/ai-row-marks.js - same look both ways. */
.ed-row-mark {
	display: inline-block;
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 700;
	color: #003264;
	background: #E2E8F0;
	border-radius: 999px;
	padding: 2.5px 10px;
	white-space: nowrap;
}

.ed-row-mark-link {
	display: inline; /* style.css sets a global a { display: block } */
	margin-left: 6px;
	font-weight: 700;
	color: #003264;
	text-decoration: none;
}

.ed-row-mark-link:hover {
	text-decoration: underline;
}

/* --- Inline Dash input, expand-to-dock (#3800) -----------------------------
   The embedded page input and the docked panel are ONE companion: the input
   carries an expand control that docks the panel, and the input hides itself
   while the panel is docked so the page never shows two Dash affordances. */
.inline-ai-dock-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-left: 2px;
	padding: 0;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--ed-text-muted, #5A7089);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.inline-ai-dock-btn:hover {
	background: #F1F5F9;
	color: #003264;
}

/* One Dash per page. While the panel is docked the embedded input is
   redundant - and two Dash inputs on one screen is exactly the "which one do
   I use?" the companion is meant to end. Driven off the same .dash-docked
   class the layout renders server-side and the panel's Alpine keeps in sync,
   so it tracks dock/collapse in both directions with no events. */
.main-wrapper.dash-docked .inline-ai-input {
	display: none;
}
/* Mobile: the brief's buttons and suggestion pills meet the 44px touch
   minimum (ui-design rule). Desktop keeps the compact size. */
@media (max-width: 576px) {
	.ai-brief-act {
		min-height: 44px;
		padding: 10px 14px;
		font-size: 12px;
	}

	.inline-ai-dock-btn {
		width: 44px;
		height: 44px;
	}

	.ai-brief-sug {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		padding: 10px 16px;
		font-size: 12.5px;
	}
}

/* ==== css/staff-listing.css ==== */
/* Staff listing module (sl-) — certification chips in the All staff table.
   Tints mirror the detail-page cert badges (staff-detail.css .sd-cert-badge-*)
   so the same cert reads identically on the list and the profile. */
.sl-cert-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 260px;
}

.sl-cert-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

.sl-cert-chip i {
	font-size: 10px;
}

.sl-cert-chip--valid {
	background: #ecfdf3;
	color: #027a48;
}

.sl-cert-chip--expiring {
	background: #fffaeb;
	color: #b54708;
}

.sl-cert-chip--expired {
	background: #fef3f2;
	color: #b42318;
}

.sl-cert-chip--none {
	background: #f2f4f7;
	color: #475467;
}

/* ==== css/booking-page-share.css ==== */
/* ============================================================================
   Booking page share (.bps-*)
   The "your booking page is live" card — setup wizard final step + dashboard.
   Loaded from components/layouts/base.blade.php (never @push('css'), or it
   paints one unstyled frame on every wire:navigate into the dashboard).
   ========================================================================== */

.bps-card {
	background: #ffffff;
	border: 1px solid #e5e9f0;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
	padding: 18px 20px 20px;
	position: relative;
}

/* public/style.css sets a global `a { display: block }`, which would break the
   CTA out onto its own line and orphan anything beside it. Scope it back. */
.bps-card a {
	display: inline-flex;
}

.bps-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding-right: 34px;
}

.bps-title {
	font-size: 16px;
	font-weight: 700;
	color: #1a2b3c;
	margin: 0;
}

.bps-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 11px;
	border-radius: 999px;
	background: #e5f5ec;
	color: #0f7a3d;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	flex-shrink: 0;
}

.bps-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #16a34a;
}

.bps-body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.bps-main {
	flex: 1;
	min-width: 0;
}

.bps-row {
	display: flex;
	align-items: center;
	gap: 10px;
	/* No wrapping above mobile: with flex-wrap the browser wraps BEFORE it
	   shrinks, which pushed Open onto its own line in the narrower wizard card.
	   nowrap lets the link chip shrink and ellipsize instead. The mobile block
	   below restores stacking. */
	flex-wrap: nowrap;
}

/* The link chip is a real <button> — clicking it copies the link, same as the
   Copy button. Everything below the `overflow` line strips the default button
   chrome so it still reads as the link field it always was. */
.bps-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	max-width: 100%;
	width: auto;
	/* Must be able to shrink, or the address pushes Copy/Open onto a second
	   line in the narrower wizard card. The label ellipsizes instead. */
	flex: 0 1 auto;
	min-width: 0;
	padding: 0 14px;
	border: 1px solid #d7dde6;
	border-radius: 8px;
	background: #f9fbfd;
	font-size: 13.5px;
	font-weight: 600;
	color: #003264;
	overflow: hidden;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.bps-link:hover {
	background: #f2f6fa;
	border-color: #c3ccd8;
	color: #003264;
}

.bps-link-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bps-link i {
	color: var(--ed-text-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.bps-btn {
	height: 40px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid #003264;
	background: #ffffff;
	color: #003264;
	white-space: nowrap;
	width: auto;
}

.bps-btn:hover {
	background: #f2f6fa;
	color: #003264;
}

.bps-btn-primary {
	background: #003264;
	border-color: #003264;
	color: #ffffff;
}

.bps-btn-primary:hover {
	background: #14457A;
	color: #ffffff;
}

.bps-btn-icon {
	width: 40px;
	padding: 0;
}

.bps-sub {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin: 10px 0 0;
}

.bps-qr {
	flex: 0 0 96px;
	text-align: center;
}

.bps-qr img {
	width: 96px;
	height: 96px;
	border: 1px solid #d7dde6;
	border-radius: 8px;
	background: #ffffff;
	display: block;
}

.bps-qr-cap {
	font-size: 11px;
	color: var(--ed-text-muted);
	margin-top: 6px;
}

/* Dashboard-only: the QR opens under the row rather than sitting beside it.
   Width is pinned to the code itself so the caption centers under the image
   instead of across the whole card. */
.bps-qr-drop {
	margin-top: 14px;
	width: 96px;
}

.bps-dismiss {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: var(--ed-text-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bps-dismiss:hover {
	background: #f0f3f7;
	color: #3c4c5d;
}

@media (max-width: 575.98px) {
	.bps-body {
		flex-direction: column;
	}

	/* Stack the link and its buttons on a phone rather than squeezing them. */
	.bps-row {
		flex-wrap: wrap;
	}

	.bps-qr {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.bps-link,
	.bps-btn {
		width: 100%;
	}

	.bps-btn-icon {
		width: 100%;
	}
}

/* ==== css/consent-tracking.css ==== */
/* ============================================================
   Consent tracking (CONSENT_TRACKING_PLAN.md — epic #3467)
   .ct-* namespace: tracker table accents, per-participant
   timeline, and the reminder sequence strip. Loaded from the
   base layout so wire:navigate never paints an unstyled frame.
   ============================================================ */

/* ---------- Shared card (mirrors .bd-card / .pd-card chrome) ---------- */
.ct-card {
	background: #fff;
	border: 1px solid #e9edf2;
	border-radius: 12px;
	padding: 20px;
}
.ct-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
/* #3598 — a card heading is a SECTION LABEL, so it takes the settings kit's
   header treatment verbatim (`.set-section-head .set-t` in public/style.css:
   15px / 600 / 20px, ink #1f2933). Navy (#003264) is reserved for links,
   buttons and active tabs — using it for a heading made "When reminders go
   out" read as a different, louder register than every other settings
   section label on the page and across /settings. */
.ct-card-header h3 {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #1f2933;
	margin: 0;
}
.ct-card-sub {
	font-size: 13px;
	color: var(--ed-text-muted);
	margin: 0 0 12px;
}

/* The tracker's bulk-action dropdown sits on the LEFT side of the toolbar.
   The base .pos-pill-menu is right-anchored (designed for filters on the
   right side), which makes the menu extend leftward and clip behind the
   sidebar. Anchor LEFT so it opens to the right (mirrors .ed-avail-actions-dd). */
.ct-actions-dd .pos-pill-menu {
	right: auto;
	left: 0;
	z-index: 1050;
}
/* The Actions pill shares the toolbar row with the 40px search box and the
   40px filter dropdowns; the base .pos-pill-button is 34px, which reads as a
   broken half-height control beside them. */
.ct-actions-dd,
.ct-actions-dd .pos-pill-button {
	min-height: 40px;
	height: 40px;
}

/* ---------- Warning banner (mirrors .pd-banner on the product detail page) ---------- */
.ct-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #fff4e0;
	border: 1px solid #f0c97f;
	color: #7a4a00;
	margin-bottom: 12px;
	font-size: 13px;
}
.ct-banner strong {
	display: block;
	margin-bottom: 2px;
	color: #5a3700;
}
.ct-banner a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ct-banner-icon {
	width: 18px;
	height: 18px;
	color: #d97706;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ---------- Signed-progress bar (tracker rows + booking hero) ---------- */
.ct-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 140px;
}
.ct-bar {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 999px;
	background: #eef2f6;
	overflow: hidden;
	min-width: 70px;
}
.ct-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #2e9e5b;
}
.ct-bar i.ct-bar--low {
	background: #e2a03f;
}
.ct-bar-num {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}

/* ---------- Status pills ---------- */
.ct-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.ct-status--danger { background: #fdecec; color: #b42318; }
.ct-status--success { background: #e8f6ee; color: #1e7a44; }
.ct-status--pending { background: #fff4e0; color: #9a6700; }
.ct-status--muted { background: #eef2f6; color: var(--ed-text-muted); }

/* ---------- Participant rail (booking timeline) ---------- */
.ct-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.ct-layout { grid-template-columns: 1fr; }
}
.ct-rail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ct-rail button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 14px;
	color: #003264;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
}
.ct-rail button:hover { background: #f4f7fa; }
.ct-rail button.ct-rail--on { background: #0032641a; font-weight: 600; }
.ct-rail .ct-rail-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ct-rail .ct-rail-count {
	font-size: 12px;
	color: var(--ed-text-muted);
	white-space: nowrap;
}
.ct-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.ct-dot--signed { background: #2e9e5b; }
.ct-dot--opened { background: #e2a03f; }
.ct-dot--none { background: #c6cfd9; }

/* ---------- Timeline ---------- */
.ct-tl {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.ct-tl li {
	position: relative;
	padding: 0 0 16px 26px;
}
.ct-tl li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2e9e5b;
}
.ct-tl li::after {
	content: '';
	position: absolute;
	left: 10.5px;
	top: 19px;
	bottom: 2px;
	width: 1px;
	background: #e4e9ef;
}
.ct-tl li:last-child { padding-bottom: 2px; }
.ct-tl li:last-child::after { display: none; }
.ct-tl li.ct-tl--fail::before { background: #d92d20; }
.ct-tl li.ct-tl--next::before {
	background: #fff;
	border: 2px dashed #9db2c6;
}
.ct-tl li.ct-tl--muted::before { background: #c6cfd9; }
.ct-tl-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.ct-tl-title {
	font-size: 14px;
	font-weight: 600;
	color: #003264;
}
.ct-tl-when {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	white-space: nowrap;
}
.ct-tl-meta {
	font-size: 13px;
	color: var(--ed-text-muted);
	margin-top: 1px;
}
.ct-tl-meta.ct-tl-meta--bad {
	color: #b42318;
	font-weight: 500;
}

/* ---------- Empty states ---------- */
.ct-empty-tab {
	text-align: center;
	color: var(--ed-text-muted);
	padding: 48px 16px;
	font-size: 14.5px;
}
.ct-empty-inline {
	color: var(--ed-text-muted);
	font-size: 13.5px;
	padding: 12px 0;
}

/* ---------- Reminder sequence (vertical, #3564) ----------
   Stacked step cards joined by a short connector line — the same
   top-to-bottom idiom as the consent timeline (.ct-tl). */
.ct-seq {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	max-width: 460px;
	padding: 14px 2px;
}
.ct-seq-step {
	position: relative;
	border: 1px solid #e4e9ef;
	border-radius: 12px;
	padding: 12px 14px;
	background: #fff;
}
/* #3584 — one vertical axis for the whole sequence. The cards, the Add-step
   button and this connector all line up on the cards' inner text edge: a card
   is 1px border + 14px padding, so its text starts 15px in, and a 2px line at
   margin-left 14px is centered on exactly that. Any other offset (this was
   28px) leaves the line floating between the card edge and the text. */
.ct-seq-link {
	width: 2px;
	height: 20px;
	background: #d7e1ea;
	margin-left: 14px;
	flex: 0 0 auto;
}
.ct-seq-step--trigger {
	background: #f2f6fa;
	border-color: #d7e1ea;
}
.ct-seq-step--stop {
	background: #fafbfc;
	border-style: dashed;
	color: var(--ed-text-muted);
}
.ct-seq-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ed-text-muted);
	margin-bottom: 3px;
}
/* #3598 — same ink as every other label on a settings page (`.set-label`
   is #1f2933). A step's title is content, not a link. */
.ct-seq-title {
	font-size: 14.5px;
	font-weight: 600;
	color: #1f2933;
}
.ct-seq-when {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin-top: 2px;
}
.ct-seq-chan {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.ct-chan {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	color: #003264;
	background: #0032641a;
	border-radius: 999px;
	padding: 2px 9px;
}
.ct-seq-tools {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	gap: 2px;
}
/* Target size: these were 20x21px, under every guideline. Base is 32px — past
   WCAG 2.2 AA's 24px minimum for any pointer, without a mouse user getting two
   fat blocks in a small card corner. A coarse pointer (finger) gets the site's
   44x44 rule below, with a wider gap so two adjacent targets can't overlap
   into each other's hit area. The glyph stays 13px in all cases. */
.ct-seq-tools button {
	border: 0;
	background: transparent;
	color: var(--ed-text-muted);
	font-size: 13px;
	line-height: 1;
	padding: 0;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}
.ct-seq-tools button:hover { background: #eef2f6; color: #003264; }
@media (pointer: coarse), (max-width: 767px) {
	.ct-seq-tools { gap: 6px; }
	.ct-seq-tools button { min-width: 44px; min-height: 44px; }
}
.ct-seq-add {
	border: 1px dashed #9db2c6;
	background: transparent;
	color: #003264;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 12px;
	/* 14px matches a step card's padding so the label starts on the same
	   axis as every card's kicker text (#3584). */
	padding: 12px 14px;
	cursor: pointer;
	min-height: 44px;
	text-align: left;
}
.ct-seq-add:hover { background: #f4f7fa; }
.ct-seq-summary {
	background: #f7f9fb;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	/* #3598 — body copy, so settings ink, not navy. */
	color: #1f2933;
	margin-top: 6px;
}
.ct-seq-note {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin: 10px 0 0;
}

/* Links inside sentence copy must flow INLINE. public/style.css sets a
   global `a { display: block }`, which knocks any bare anchor in helper
   text onto its own line (bit the "Email templates" and "SMS" links,
   #3564). Scope every .ct-card anchor back to inline. */
.ct-card a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
}
/* Inline step editor (#3570) — rendered INSIDE the step card being edited
   (and the "New reminder" card). Two labeled 40px selects side by side,
   Done/Cancel on the row below, hint on its own line. The global
   .form-select carries 13px/11px vertical padding, which at a forced 40px
   height cut the option text in half — the 7px padding + 14px font here
   makes the 40px control render its label whole. */
.ct-seq-edit {
	margin-top: 6px;
}
.ct-seq-edit-fields {
	display: flex;
	gap: 10px;
}
.ct-seq-edit .ct-field {
	flex: 1 1 0;
	min-width: 0;
}
.ct-seq-edit .ct-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	/* #3598 — the settings kit's label ink (`.set-row .set-label`). */
	color: #1f2933;
	margin-bottom: 4px;
}
.ct-seq-edit .form-select {
	width: 100%;
	height: 40px;
	padding: 7px 32px 7px 12px;
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
}
.ct-seq-edit-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}
/* 40px is the app's standard control height — these sit directly under the
   two 40px selects above them, and adjacent controls share a height. */
.ct-seq-edit-actions .btn {
	height: 40px;
	display: inline-flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.ct-step-edit-hint {
	font-size: 12.5px;
	color: var(--ed-text-muted);
	margin-top: 8px;
}

/* ==== css/rental-agreement.css ==== */
/*
	Rental agreement (#3637) — the .ra-* namespace.

	Loaded in BOTH the portal base layout (counter signing on booking detail)
	and the widget layout (the customer's signing page), because the agreement
	"sheet" is the exact same document on both surfaces. Every selector is
	namespaced, so it is inert on any page that doesn't use it.

	Mirrors docs/mockups/booqable-parity/rental-agreement-mockup.html and reuses
	the booking-detail token values so the card sits flush beside .bd-card.
*/

:root {
	--ra-navy: #003264;
	--ra-ink: #1a2b3c;
	--ra-ink-2: #3c4c5d;
	/* The app-wide muted token (public/style.css) — darkened to #5A7089 for
	   WCAG AA. Never a literal hex here, or this namespace drifts back. */
	--ra-mute: var(--ed-text-muted, #5A7089);
	--ra-line: #e5e9f0;
	--ra-line-strong: #d7dde6;
	--ra-success: #16a34a;
	--ra-success-soft: #e5f5ec;
	--ra-success-ink: #0f7a3d;
	--ra-warn: #d97706;
	--ra-warn-soft: #fff4e0;
	--ra-warn-ink: #a35c04;
}

/* ------------------------------------------------------------------ *
 * Status pill
 * ------------------------------------------------------------------ */

.ra-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.ra-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.ra-status--signed { background: var(--ra-success-soft); color: var(--ra-success-ink); }
.ra-status--signed .ra-status__dot { background: var(--ra-success); }
.ra-status--sent { background: #eef3f8; color: #35526f; }
.ra-status--sent .ra-status__dot { background: var(--ra-mute); }
.ra-status--draft { background: var(--ra-warn-soft); color: var(--ra-warn-ink); }
.ra-status--draft .ra-status__dot { background: var(--ra-warn); }

/* ------------------------------------------------------------------ *
 * Booking-detail row (inside the Documents card)
 * ------------------------------------------------------------------ */

.ra-row {
	padding: 12px 0 4px;
	border-bottom: 1px solid var(--ra-line);
	margin-bottom: 8px;
}

.ra-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ra-row__wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ra-row__icon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 8px;
	background: #eef3f8;
	color: var(--ra-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.ra-row__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ra-ink);
}

.ra-row__meta {
	font-size: 11.5px;
	color: var(--ra-mute);
	margin-top: 1px;
}

.ra-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 12px;
}

/* public/style.css sets a global `.btn-primary { width: 100% }`. Left alone it
   stretches the primary action across the whole row, pushes its partner onto a
   second line, and leaves the two at different heights (41px vs 34px). Scope
   the width back and give both one height so the actions read as one row.

   That height is 44px, not the usual 40px form height: these buttons sign,
   send and clear a contract on a phone, and 44x44 is the minimum tap target.
   The 640px rule further down still stacks them full-width on a phone. */
.ra-row__actions .btn,
.ra-panel__actions .btn,
.ra-sign__actions .btn,
.ra-form__actions .btn {
	width: auto;
	min-height: 44px;
}

/* Icon-only row actions (#3735/#3736). They sit beside the labelled "Sign now"
   button, so the 44px rule above already gives them a matching height — this
   only squares them up so the icon isn't a 30px-wide sliver and the tap target
   is a full 44x44 on a phone. */
.ra-icon-action {
	min-width: 44px;
	padding-left: 0;
	padding-right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never stretched by the ≤640px full-width stack rule further down. */
	flex: 0 0 auto;
}

/* A link dropped into helper text must stay in the sentence — public/style.css
   sets a global `a { display: block }`. */
.ra-row a,
.ra-sheet a {
	display: inline;
}

/* ------------------------------------------------------------------ *
 * The agreement sheet — identical on the counter and the customer page
 * ------------------------------------------------------------------ */

.ra-sheet {
	background: #fff;
	border: 1px solid var(--ra-line-strong);
	border-radius: 6px;
	padding: 28px 30px 26px;
	color: var(--ra-ink);
	max-width: 760px;
	margin: 0 auto;
}

.ra-sheet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ra-navy);
}

.ra-sheet__logo {
	max-height: 46px;
	max-width: 170px;
	margin-bottom: 6px;
	display: block;
}

.ra-sheet__business {
	font-size: 18px;
	font-weight: 700;
	color: var(--ra-navy);
}

.ra-sheet__addr {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 3px;
	line-height: 1.55;
}

.ra-sheet__title-block { text-align: right; }

.ra-sheet__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: var(--ra-ink-2);
}

.ra-sheet__ref {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 3px;
}

.ra-parties {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 16px 0 4px;
}

.ra-party { flex: 1 1 220px; min-width: 0; }

.ra-party__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-mute);
	margin-bottom: 4px;
}

.ra-party__name {
	font-size: 13.5px;
	font-weight: 700;
}

.ra-party__line {
	font-size: 12px;
	color: var(--ra-ink-2);
	word-break: break-word;
}

.ra-table-wrap { overflow-x: auto; }

.ra-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 4px;
	font-size: 12.5px;
}

.ra-table th {
	text-align: left;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--ra-mute);
	padding: 7px 10px;
	border-bottom: 1px solid var(--ra-line-strong);
	background: #fafbfd;
}

.ra-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--ra-line);
	vertical-align: top;
}

.ra-table .ra-num {
	text-align: right;
	white-space: nowrap;
}

.ra-table tfoot td {
	border-bottom: 0;
	padding: 6px 10px;
}

.ra-table tfoot .ra-lab { text-align: right; color: var(--ra-ink-2); }
.ra-table tfoot tr.ra-total td { font-weight: 700; font-size: 13.5px; }
.ra-table tfoot tr.ra-total .ra-num { color: var(--ra-navy); }
.ra-table tfoot tr.ra-sub td { color: var(--ra-mute); font-size: 12px; }

.ra-terms { margin-top: 18px; }

.ra-terms__head {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-ink-2);
	margin-bottom: 6px;
}

/* The wording is rich text (#3733) — RichTextHelper::render() turns it into
   allowlisted HTML (and legacy plain-text rows into <br>s), so `pre-wrap` must
   NOT be here or every paragraph would gain a blank line. */
.ra-terms__body {
	font-size: 12.5px;
	color: var(--ra-ink-2);
	line-height: 1.7;
}

.ra-terms__body p {
	margin: 0 0 10px;
}

.ra-terms__body p:last-child {
	margin-bottom: 0;
}

.ra-terms__body ul,
.ra-terms__body ol {
	margin: 0 0 10px;
	padding-left: 22px;
}

.ra-terms__body li {
	margin-bottom: 4px;
}

/* The editor offers headings; without these they'd paint at browser defaults
   (h1 ≈ 2em) and tower over a 12.5px document. */
.ra-terms__body h1,
.ra-terms__body h2 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ra-ink);
	margin: 16px 0 7px;
}

.ra-terms__body h3,
.ra-terms__body h4,
.ra-terms__body h5,
.ra-terms__body h6 {
	font-size: 13px;
	font-weight: 700;
	color: var(--ra-ink);
	margin: 14px 0 6px;
}

.ra-terms__body blockquote {
	margin: 0 0 10px 14px;
	padding-left: 10px;
	border-left: 2px solid var(--ra-line-strong);
}

/* ------------------------------------------------------------------ *
 * Signature box
 * ------------------------------------------------------------------ */

.ra-sign {
	margin-top: 24px;
	border: 1px solid var(--ra-line-strong);
	border-radius: 8px;
	padding: 16px 18px 14px;
	background: #fcfdfe;
}

.ra-sign__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-mute);
}

.ra-sign__pad {
	position: relative;
	margin-top: 8px;
	height: 120px;
	border: 1px dashed var(--ra-line-strong);
	border-radius: 6px;
	background: #fff;
}

.ra-sign__canvas {
	display: block;
	width: 100%;
	height: 118px;
	touch-action: none;
	user-select: none;
	cursor: crosshair;
}

.ra-sign__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-size: 11.5px;
	color: #b6c2ce;
	pointer-events: none;
}

.ra-sign__image {
	margin-top: 8px;
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--ra-ink-2);
}

.ra-sign__image img {
	display: block;
	max-height: 84px;
	max-width: 100%;
}

.ra-sign__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 12px;
}

.ra-sign__name-field { flex: 1 1 240px; min-width: 0; }

.ra-sign__field-label {
	display: block;
	font-size: 12px;
	color: var(--ra-ink-2);
	margin-bottom: 4px;
}

.ra-sign__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* "Agree and sign" / "Clear" — the pair that signs a contract, so 44px is the
   floor on a phone, not the usual 40px form height. The name input beside them
   already renders taller than that on both surfaces (52px on the customer
   page, 54px in the counter panel), so the row still reads as one height. */
.ra-sign__actions .btn { min-height: 44px; }

.ra-sign__log {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ra-ink-2);
}

.ra-sign__check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: 0 0 16px;
	background: var(--ra-success);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
}

.ra-note {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 12px;
}

.ra-notice {
	border: 1px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * Counter signing panel (booking detail) + customer page shell
 * ------------------------------------------------------------------ */

.ra-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

.ra-page { padding: 24px 0 48px; }

.ra-page__head {
	text-align: center;
	margin-bottom: 16px;
}

.ra-page__business {
	font-weight: 600;
	font-size: 15px;
	color: var(--ra-ink);
}

.ra-page__meta {
	font-size: 12.5px;
	color: var(--ra-mute);
	margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Settings › Rentals → Agreement tab (#3724) — the wording editor
 * ------------------------------------------------------------------ */

/* "Needed before pickup" lives inside the master-switch card (#3734), set off
   from the switch above it by the same hairline the settings rows use. */
.ra-switch-extra {
	margin-top: 14px;
	padding-top: 4px;
	border-top: 1px solid #f1f3f5;
}

.ra-switch-extra .set-row:first-child {
	padding-bottom: 0;
}

/* A document heading is a few words, not a paragraph — `.set-field .form-control`
   would otherwise stretch it across the whole card. */
.ra-heading-input {
	max-width: 420px;
}

/* The shared <x-input.description> field brings its own `mb-3` wrapper; inside
   a settings .set-field that reads as a double gap. */
.ra-editor > .mb-3 {
	margin-bottom: 0 !important;
}

/* The agreement is a full page of terms, not a one-line note. */
.ra-editor .ql-editor {
	min-height: 340px;
}

.ra-tags-label {
	margin-top: 14px;
}

/* ------------------------------------------------------------------ *
 * Settings — merge tag reference
 * ------------------------------------------------------------------ */

.ra-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.ra-tag {
	border: 1px solid var(--ra-line-strong);
	background: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11.5px;
	color: var(--ra-ink-2);
	cursor: pointer;
	font-family: inherit;
}

.ra-tag:hover { background: #eef3f8; border-color: #b9cbdd; }

.ra-tag__code {
	font-weight: 700;
	color: var(--ra-navy);
}

@media (max-width: 640px) {
	.ra-sheet { padding: 20px 18px 18px; }
	.ra-sheet__head { flex-direction: column; }
	.ra-sheet__title-block { text-align: left; }
	.ra-parties { gap: 16px; }
	.ra-panel__actions .btn,
	.ra-form__actions .btn,
	.ra-sign__actions .btn { flex: 1 1 100%; }
}

/* ==== css/roi-report.css ==== */
/* ==========================================================================
   Reports → Return on investment (#3640)
   Namespaced .roi-* so nothing here can reach another report.
   ========================================================================== */

.roi-table td,
.roi-table th {
	vertical-align: middle;
}

.roi-table th.roi-num,
.roi-table td.roi-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- product row (the parent, always visible) --- */
.roi-product-toggle {
	background: none;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	color: #1a2b3c;
	font-weight: 600;
	min-height: 44px;
}

.roi-product-toggle:focus-visible {
	outline: 2px solid #003264;
	outline-offset: 2px;
}

.roi-caret {
	color: var(--ed-text-muted, #5A7089);
	font-size: 11px;
	width: 12px;
	flex: 0 0 12px;
	transition: transform 0.15s ease;
}

.roi-caret.roi-open {
	transform: rotate(90deg);
}

.roi-item-count {
	font-size: 12px;
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
	margin-left: 20px;
}

/* --- item rows (revealed under a product) --- */
.roi-item-row > td {
	background: #FAFBFD;
}

.roi-item-label {
	padding-left: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #3c4c5d;
	font-weight: 600;
}

.roi-tick {
	color: #B7C3D1;
	font-size: 11px;
}

.roi-when {
	color: var(--ed-text-muted, #5A7089);
	font-size: 13px;
	white-space: nowrap;
}

/* --- ROI pill --- */
.roi-pill {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.roi-pill-good {
	background: #E5F5EC;
	color: #0F7A3D;
}

.roi-pill-mid {
	background: #FFF4E0;
	color: #A35C04;
}

.roi-pill-low {
	background: #FDEAE7;
	color: #B02318;
}

/* --- paid-off cell --- */
.roi-paid {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #0F7A3D;
	white-space: nowrap;
}

.roi-paid-date {
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
}

.roi-partial {
	font-size: 13px;
	font-weight: 600;
	color: #3c4c5d;
	white-space: nowrap;
}

.roi-progress {
	min-width: 118px;
}

.roi-bar {
	width: 110px;
	height: 6px;
	border-radius: 999px;
	background: #E8EDF3;
	overflow: hidden;
}

.roi-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: #D97706;
}

.roi-bar-fill.roi-bar-low {
	background: #DC2626;
}

.roi-togo {
	font-size: 11px;
	color: var(--ed-text-muted, #5A7089);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* What the items with no cost recorded earned — disclosed beside the
   like-for-like figure, never added into it. */
.roi-earned-note {
	font-size: 11px;
	color: var(--ed-text-muted, #5A7089);
	font-weight: 500;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* --- "no cost recorded" --- */
.roi-dash {
	color: #B7C3D1;
}

.roi-hint {
	color: var(--ed-text-muted, #5A7089);
	font-size: 13px;
}

/* public/style.css sets a global `a { display: block }`, which would drop the
   "Add cost" link onto its own line and orphan the sentence around it. */
.roi-table a,
.roi-hint a {
	display: inline;
	color: #003264;
	font-weight: 600;
	text-decoration: none;
}

.roi-table a:hover,
.roi-hint a:hover {
	text-decoration: underline;
}

@media (max-width: 767.98px) {
	.roi-bar,
	.roi-progress {
		width: 90px;
		min-width: 90px;
	}

	.roi-item-count {
		margin-left: 0;
	}
}

/* ==== css/email-canvas.css ==== */
/* Shared canvas email editor chrome (#3418) — the parent-page styles for
   every visual email editor surface (campaigns message editor, settings
   email templates): toolbar, subject bar, canvas shell, popovers. Loaded
   by both pages; the in-iframe styles live in email-canvas-edit.js. */

/* ---- Canvas editor (#3341) — the email IS the editor ---- */
.cd-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid #eef1f4; margin-bottom: 12px; }
.cd-tb-btn { border: none; background: transparent; color: #33475b; width: 32px; height: 32px; border-radius: 7px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cd-tb-btn:hover { background: #eef3fb; color: #0d3b66; }
.cd-tb-sep { width: 1px; height: 20px; background: #e2e8f0; margin: 0 6px; }
.cd-tb-test { white-space: nowrap; }
.cd-tb-select { border: 1px solid #dfe4e9; border-radius: 7px; height: 32px; font-size: 12.5px; color: #33475b; background: #fff; padding: 0 8px; cursor: pointer; }
.cd-tb-color { position: relative; overflow: hidden; cursor: pointer; }
.cd-tb-color input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0; }
.cd-tb-color::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e11d48, #f59e0b, #10b981, #2563eb); }
/* Size + text color are selection tools (#3359): greyed and inert until the
   caret sits in a text section on the canvas (same 0.65 as .btn:disabled). */
.cd-tb-select:disabled, .cd-tb-color.disabled { opacity: 0.65; pointer-events: none; }

/* Subject bar — reads like the email client header above the message. */
.cd-subject-bar { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dfe4e9; border-bottom: none; border-radius: 12px 12px 0 0; padding: 12px 18px; max-width: 720px; margin: 0 auto; }
.cd-subject-label { flex: 0 0 auto; margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8aa0b5; }
.cd-subject-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; font-weight: 600; color: #1f2d3d; padding: 0; }
.cd-subject-input::placeholder { color: #a5b3c1; font-weight: 400; }

/* The canvas: grey email-client backdrop, real email centered inside. */
.cd-canvas-shell { background: #e9edf2; border: 1px solid #dfe4e9; border-radius: 0 0 12px 12px; padding: 0; max-width: 720px; margin: 0 auto; }
.cd-canvas-frame { display: block; width: 100%; border: none; min-height: 480px; height: 640px; border-radius: 0 0 12px 12px; background: transparent; }

.cd-upl-busy { font-size: 12.5px; color: #5a6b7b; display: flex; align-items: center; gap: 7px; margin-top: 6px; }

/* Popovers (button/link editing, add-block menu) — parent-page chrome. */
.cd-popover { position: fixed; z-index: 1080; background: #fff; border: 1px solid #dfe4e9; border-radius: 10px; box-shadow: 0 10px 26px rgba(13, 42, 74, .18); padding: 12px; min-width: 300px; }
.cd-pop-row { margin-bottom: 10px; }
.cd-pop-row label { display: block; font-size: 11.5px; font-weight: 600; color: #5a6b7b; margin-bottom: 4px; }
.cd-pop-row .form-control { margin-bottom: 0; }
.cd-pop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cd-pop-item { border: none; background: transparent; text-align: left; width: 100%; font-size: 12.5px; color: #23384d; border-radius: 7px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cd-pop-item:hover { background: #f1f5f9; }
.cd-pop-item .fas { width: 14px; color: #8aa0b5; font-size: 11px; }

/* Personalize picker (merge tags) — same look on every canvas host page.
   (Campaigns pages also carry these via campaigns.css; keep in sync.) */
.cc-tagchip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #0d3b66; background: #eef4fa; border-radius: 5px; padding: 0 4px; }
.cc-pers-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #c9d4de; color: #0d3b66; border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cc-pers-menu { margin-top: 6px; background: #fff; border: 1px solid #ebebeb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 6px; max-width: 340px; position: absolute; z-index: 1050; }
.cc-pers-menu .cc-pm { padding: 6px 10px; font-size: 12px; border-radius: 6px; display: flex; justify-content: space-between; gap: 14px; cursor: pointer; }
.cc-pers-menu .cc-pm:hover { background: #f4f8fc; }
.cc-pers-menu .cc-pm .cc-pm-d { color: var(--ed-text-muted); font-size: 11px; }
.cc-pm { width: 100%; border: none; background: none; font: inherit; text-align: left; }