/*
====================================================================
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: #6E88A2;
	--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: #6E88A2;
	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;
}
.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; }

/* 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: 160px;
}
.pos-period-location-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 120px;
}
.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;
}
.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; }
.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: #6E88A2;
	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: #6E88A2;
	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;
}

/* 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;
}
.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);
}
.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;
}

/* 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: #6E88A2;
	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: #6E88A2;
	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: #6E88A2;
	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: #6E88A2;
	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: #6E88A2;
}

/* 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: #6E88A2;
}

/* 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: #6E88A2;
	font-weight: 600;
	margin-bottom: 8px;
}
.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: #6E88A2;
	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;
}
.pos-cart-exp-price {
	font-size: 13px;
	font-weight: 600;
	color: #003264;
	white-space: nowrap;
}
.pos-cart-exp-sub {
	font-size: 11px;
	color: #6E88A2;
}
.pos-cart-exp-dot { margin: 0 4px; color: #C7CFD8; }
.pos-cart-exp-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.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; }
.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: #6E88A2;
	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: #6E88A2;
	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; }
.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: #6E88A2;
	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: #6E88A2;
	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%; }
.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: #6E88A2; 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: #6E88A2;
	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: #6E88A2;
	cursor: pointer;
	height: 32px;
	margin-top: 0;
}
.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: #6E88A2;
}
.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: #6E88A2;
	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: #6E88A2;
}

/* 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: #6E88A2;
	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;
	padding: 14px 18px 18px;
	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: #6E88A2;
}
.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;
}