/* ==========================================================================
   BonziVan Reusable Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.bv-container {
	width: 100%;
	max-width: var(--container-xl);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* One shape (pill), flat fill, ≥44px target. Primary = brand orange with ink
   text (5.67:1); secondary = paper-2 tone step with ink text, no outline. */
.bv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: 44px;
	padding: 0.625rem 1.375rem;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: var(--leading-tight);
	letter-spacing: 0;
	text-decoration: none;
	border: 0;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
	white-space: nowrap;
}
/* Press feedback lives in motion.css (scale on :active, reduced-motion aware). */

.bv-btn:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Phones: a long label ("Iniciá sesión para contactar al anfitrión") wraps
   inside the button instead of pushing the page wider than the viewport. */
@media (max-width: 480px) {
	.bv-btn {
		white-space: normal;
		max-width: 100%;
		text-align: center;
	}
}

/* Primary */
.bv-btn--primary,
.bv-btn--primary:visited {
	background-color: var(--accent);
	color: var(--on-accent);
}

.bv-btn--primary:hover,
.bv-btn--primary:focus-visible {
	background-color: var(--accent-hover);
	color: var(--on-accent);
}

/* Secondary: a tone step, not an outlined box */
.bv-btn--secondary,
.bv-btn--secondary:visited {
	background-color: var(--paper-2);
	color: var(--ink);
}

.bv-btn--secondary:hover {
	background-color: var(--paper-3);
	color: var(--ink);
}

/* Ghost */
.bv-btn--ghost,
.bv-btn--ghost:visited {
	background-color: transparent;
	color: var(--ink);
}

.bv-btn--ghost:hover {
	background-color: var(--paper-2);
	color: var(--ink);
}

/* Sizes — the small one keeps a 44px target */
.bv-btn--sm {
	padding: 0.5rem 1.125rem;
	font-size: var(--text-base);
}

.bv-btn--lg {
	min-height: 52px;
	padding: 0.875rem 1.75rem;
	font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
/* Marketplace card (home, shop, category pages): no box. A rounded 4:3
   photo, then name, place · seats, rating and price on the page ground. The
   whole card is the link; lift on hover comes from .lift in motion.css. */
.bv-card {
	position: relative;
	min-width: 0;
}

.bv-card__link,
.bv-card__link:visited {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius-card);
}

.bv-card__link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 4px;
}

.bv-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-card);
	background: var(--paper-2);
}

.bv-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.bv-card__media img {
		transition: scale var(--transition-slow);
	}

	.bv-card:hover .bv-card__media img {
		scale: 1.04;
	}
}

/* No real photo yet: a paper sheet with the type's icon, the vehicle's name
   and its type. */
.bv-card__sheet {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
	padding: clamp(16px, 6%, 24px);
}

.bv-card__sheet .bv-icon {
	margin-bottom: auto;
	color: var(--ink-soft);
}

.bv-card__sheet-name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.25rem; /* the lead step's floor: card widths barely change with the viewport */
	font-weight: 600;
	letter-spacing: var(--tracking-display);
	line-height: 1.15;
	text-wrap: balance;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.bv-card__sheet-type {
	color: var(--ink-soft);
	font-size: 1rem;
}

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

.bv-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--step-body);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-wrap: pretty;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* a headline holds to two lines */
}

.bv-card__meta,
.bv-card__rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.bv-card__meta {
	color: var(--ink-soft);
}

.bv-card__rating .bv-icon {
	color: var(--ink);
}

.bv-card__rating-count {
	color: var(--ink-soft);
}

.bv-card__price {
	margin: 4px 0 0;
	font-size: 1rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.bv-card__price [data-act="count"] {
	font-weight: var(--font-semibold);
}

/* --------------------------------------------------------------------------
   Badges / chips — sentence case at the small step, pill shape
   -------------------------------------------------------------------------- */
.bv-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.25rem 0.75rem;
	font-size: var(--step-small);
	font-weight: var(--font-medium);
	border-radius: var(--radius-full);
	background-color: var(--paper-2);
	color: var(--ink);
}

.bv-badge--success {
	background-color: var(--paper-2);
	color: var(--color-success);
}

/* --------------------------------------------------------------------------
   Form Fields
   -------------------------------------------------------------------------- */
/* Form fields keep their edge (fields are exempt from the no-line rule). */
.bv-input {
	width: 100%;
	min-height: 44px;
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: var(--ink);
	background-color: var(--paper);
	border: 1px solid var(--field-line); /* taste-skill-ignore: form field edge */
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast);
}

.bv-input:focus {
	outline: var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--ink);
}

.bv-input::placeholder {
	color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Search panels: the surfaces the search bar and the booking card open (the
   place and type lists, the date-range calendar). One look: paper,
   --radius-banner, --shadow-float, --panel-gap under what opened them.
   Shown and hidden with the `hidden` attribute (search.js). They drop
   --dist-1 and fade in, and leave faster. Switching segments in the search
   bar, search.js sets --in-x / --out-x (−1, 0, 1, times --dist-3): the new
   panel slides in from the old one's side while the old one fades out.
   Movement only with html.mm-motion and no reduced-motion preference;
   otherwise they only fade.
   -------------------------------------------------------------------------- */
.bv-datepicker__dropdown,
.bv-search-panel {
	position: absolute;
	top: calc(100% + var(--panel-gap, 12px));
	z-index: var(--z-dropdown);
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--radius-banner);
	box-shadow: var(--shadow-float); /* taste-skill-ignore: a real overlay */
	text-align: left;
	transition:
		opacity var(--dur-fast) var(--ease-out-soft),
		translate var(--dur-base) var(--ease-out-expo),
		display var(--dur-base) allow-discrete;
}

.bv-datepicker__dropdown[hidden],
.bv-search-panel[hidden] {
	display: none;
	opacity: 0;
	pointer-events: none;
	transition-duration: var(--dur-fast);
	transition-timing-function: var(--ease-in-out-soft);
}

/* Until search.js takes a picker over it stays shut (the booking card's
   markup has no `hidden`). */
[data-datepicker]:not([data-datepicker-ready]) .bv-datepicker__dropdown {
	display: none;
}

@starting-style {
	.bv-datepicker__dropdown:not([hidden]),
	.bv-search-panel:not([hidden]) {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html.mm-motion .bv-datepicker__dropdown[hidden],
	html.mm-motion .bv-search-panel[hidden] {
		translate: calc(var(--out-x, 0) * var(--dist-3)) calc(var(--out-y, 1) * var(--dist-1) * -1);
	}

	@starting-style {
		html.mm-motion .bv-datepicker__dropdown:not([hidden]),
		html.mm-motion .bv-search-panel:not([hidden]) {
			translate: calc(var(--in-x, 0) * var(--dist-3)) calc(var(--in-y, 1) * var(--dist-1) * -1);
		}
	}
}

/* --------------------------------------------------------------------------
   Date Range Picker (reusable: the search bar and the booking card)
   Days are buttons. Each paints its range band (::before) and its circle
   (::after) under the number: the band runs between the two ends, the ends
   are orange circles. While the end is being picked, the prospective range
   (hover with a mouse, focus with the keyboard) is a light band with dashed
   edges up to a ringed day.
   -------------------------------------------------------------------------- */
.bv-datepicker__display {
	display: block;
	width: 100%;
	min-height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: 1.5;
	color: var(--ink-soft);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.bv-datepicker__display--filled {
	color: var(--ink);
}

/* The segment carries the ring. */
.bv-datepicker__display:focus,
.bv-datepicker__display:focus-visible {
	outline: none;
}

.bv-datepicker__dropdown {
	--day-h: 44px;          /* row height */
	--circle: 40px;         /* the ends' circle and the band's height */
	--cal-pad: var(--space-lg);
	--cal-gap: var(--space-xl);
	--cal-two-months: 560px; /* narrower than this, one month at a time (search.js) */
	left: 0;
	right: 0;
	padding: var(--cal-pad);
}

/* Short screens: tighter rows so the calendar fits under the bar (search.js). */
.bv-datepicker__dropdown.is-compact {
	--day-h: 36px;
	--circle: 34px;
	--cal-pad: var(--space-md);
}

.bv-datepicker__dropdown.is-compact .bv-datepicker__month-title { min-height: 36px; }
.bv-datepicker__dropdown.is-compact .bv-datepicker__nav { width: 36px; height: 36px; }
.bv-datepicker__dropdown.is-compact .bv-datepicker__grid { grid-template-rows: 24px; }

/* In the search bar: two months sized by their days, centred under the bar
   (--panel-left, search.js). */
.bv-search-form .bv-datepicker__dropdown {
	--day-w: 46px;
	left: var(--panel-left, 0);
	right: auto;
	width: calc(14 * var(--day-w) + var(--cal-gap) + 2 * var(--cal-pad));
}

.bv-search-form .bv-datepicker__dropdown.is-compact {
	--day-w: 42px;
}

.bv-datepicker__header {
	position: relative;
	margin-bottom: var(--space-xs);
}

.bv-datepicker__months {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cal-gap);
}

.bv-datepicker__month-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--ink);
}

.bv-datepicker__nav {
	position: absolute;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-out-soft);
}

.bv-datepicker__nav--prev { left: calc(var(--space-xs) * -1); }
.bv-datepicker__nav--next { right: calc(var(--space-xs) * -1); }

@media (hover: hover) and (pointer: fine) {
	.bv-datepicker__nav:not(:disabled):hover {
		background: var(--paper-2);
	}
}

.bv-datepicker__nav:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 0;
}

.bv-datepicker__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.bv-datepicker__nav--prev .bv-icon {
	transform: rotate(180deg);
}

.bv-datepicker__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cal-gap);
}

/* Two months whatever the page around asks for (the booking card's
   tablet rule): search.js turns it into one month when it is narrow. */
.bv-datepicker__dropdown:not(.is-single) .bv-datepicker__body {
	grid-template-columns: 1fr 1fr;
}

.bv-datepicker__dropdown.is-single .bv-datepicker__months,
.bv-datepicker__dropdown.is-single .bv-datepicker__body {
	grid-template-columns: 1fr;
}

.bv-datepicker__dropdown.is-single [data-datepicker-month-2],
.bv-datepicker__dropdown.is-single [data-datepicker-grid-2] {
	display: none;
}

.bv-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: 28px;
	grid-auto-rows: var(--day-h);
	align-content: start;
	text-align: center;
}

.bv-datepicker__weekday {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: var(--font-semibold);
	color: var(--ink-soft);
}

.bv-datepicker__day {
	position: relative;
	isolation: isolate; /* the band and the circle paint under the number */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--day-h);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--font-ui);
	font-size: var(--step-small);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.bv-datepicker__day::before,
.bv-datepicker__day::after {
	content: "";
	position: absolute;
	z-index: -1;
}

/* The band. */
.bv-datepicker__day::before {
	inset: calc((var(--day-h) - var(--circle)) / 2) 0;
}

/* The circle. */
.bv-datepicker__day::after {
	top: 50%;
	left: 50%;
	width: min(var(--circle), 100%);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	transition: background-color var(--dur-fast) var(--ease-out-soft), box-shadow var(--dur-fast) var(--ease-out-soft);
}

.bv-datepicker__day:focus {
	outline: none;
}

.bv-datepicker__day--empty {
	cursor: default;
}

.bv-datepicker__day--empty::before,
.bv-datepicker__day--empty::after {
	content: none;
}

@media (hover: hover) and (pointer: fine) {
	.bv-datepicker__day:not(.bv-datepicker__day--empty):not([aria-disabled="true"]):hover::after {
		box-shadow: inset 0 0 0 1.5px var(--ink);
	}
}

/* Keyboard focus: a ring on the circle (html.bv-kbd: set by search.js on keys). */
html.bv-kbd .bv-datepicker__day:focus::after {
	box-shadow: inset 0 0 0 2px var(--ink);
}

.bv-datepicker__day--disabled {
	color: #A9ADB3;
	cursor: default;
}

/* Blocked by a booking: struck through, on a tone step (no stripes). */
.bv-datepicker__day--blocked {
	text-decoration: line-through;
}

.bv-datepicker__day--blocked::after {
	background: var(--paper-2);
}

.bv-datepicker__day--today {
	font-weight: var(--font-bold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The committed range. */
.bv-datepicker__day--in-range::before {
	background: var(--paper-2);
}

.bv-datepicker__day--start,
.bv-datepicker__day--end {
	color: var(--on-accent);
	font-weight: var(--font-semibold);
	text-decoration: none;
}

.bv-datepicker__day--start::after,
.bv-datepicker__day--end::after {
	background: var(--accent);
}

.bv-datepicker__day--ranged::before {
	left: 50%;
	background: var(--paper-2);
}

.bv-datepicker__day--end::before {
	right: 50%;
	background: var(--paper-2);
}

/* The prospective range: a light band with dashed edges up to a ringed day. */
.bv-datepicker__day--preview::before,
.is-previewing .bv-datepicker__day--ranged::before,
.bv-datepicker__day--preview-end::before {
	background: var(--paper-2);
	border-block: 1px dashed var(--ink-soft);
}

.bv-datepicker__day--preview-end::before {
	right: 50%;
}

.bv-datepicker__day--preview-end::after,
.bv-datepicker__day--preview-end:hover::after {
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--ink);
}

.bv-datepicker__day--preview-end {
	font-weight: var(--font-semibold);
}

/* --------------------------------------------------------------------------
   Search Form: the search bar (home hero, header overlay)
   A pill of three segments and the submit. At rest the segments sit flat on
   the bar and take a tone step on hover. With a panel open the bar recedes a
   step (.is-active) and the open segment is raised: the white pill
   (.bv-search-form__pill) slides under it, the panel floats under the bar.
   Tokens per context: --bar-bg / --bar-bg-active / --seg-hover /
   --seg-hover-active (pages/home.css sets the hero's).
   -------------------------------------------------------------------------- */
.bv-search-form {
	--bar-bg: var(--paper-2);
	--bar-bg-active: var(--paper-3);
	--seg-hover: var(--paper-3);
	--seg-hover-active: rgb(18 24 32 / 0.07);
	--seg-lift: 0 1px 2px rgb(18 24 32 / 0.06), 0 4px 14px rgb(18 24 32 / 0.12);
	--panel-gap: 12px;
	--panel-edge: 16px; /* panels keep this far from the screen's bottom edge */
	position: relative;
	isolation: isolate; /* the pill paints under the segments, over the bar */
	display: flex;
	gap: 2px;
	width: 100%;
	padding: 4px;
	background: var(--bar-bg);
	border-radius: var(--radius-full);
	transition: background-color var(--dur-base) var(--ease-out-soft);
}

.bv-search-form.is-active {
	background: var(--bar-bg-active);
}

.bv-search-form__pill {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: var(--pill-w, 0px);
	height: var(--pill-h, 0px);
	translate: var(--pill-x, 0px) var(--pill-y, 0px);
	background: var(--paper);
	border-radius: var(--radius-full);
	box-shadow: var(--seg-lift); /* taste-skill-ignore: the raised segment of an open overlay */
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--dur-fast) var(--ease-out-soft);
}

.bv-search-form__pill.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	html.mm-motion .bv-search-form__pill:not(.is-jump) {
		transition:
			opacity var(--dur-fast) var(--ease-out-soft),
			translate var(--dur-base) var(--ease-out-expo),
			width var(--dur-base) var(--ease-out-expo),
			height var(--dur-base) var(--ease-out-expo);
	}
}

/* The whole segment is the hit target (search.js opens its panel). */
.bv-search-form__field {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: var(--space-xs) var(--space-lg);
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--dur-fast) var(--ease-out-soft);
}

@media (hover: hover) and (pointer: fine) {
	.bv-search-form__field:hover {
		background: var(--seg-hover);
	}

	.bv-search-form.is-active .bv-search-form__field:not(.is-active):hover {
		background: var(--seg-hover-active);
	}
}

/* Raised by the pill (desktop); the phone stack paints its own. */
.bv-search-form .bv-search-form__field.is-active {
	background: transparent;
}

.bv-search-form__label,
.bv-search-form__field label {
	display: block;
	margin: 0;
	font-size: var(--step-small);
	font-weight: var(--font-semibold);
	color: var(--ink);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	user-select: none;
}

.bv-search-form__field input[type="text"],
.bv-search-form__field .bv-combobox__input {
	display: block; /* same 24px line as the dates button: the labels align */
	width: 100%;
	height: 24px;
	min-height: 24px;
	line-height: 24px;
	border: none;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	color: var(--ink);
	background: transparent;
	padding: 0;
	outline: none;
	cursor: pointer;
	text-align: left;
	text-overflow: ellipsis;
}

.bv-search-form__field.is-active .bv-combobox__input:not([readonly]) {
	cursor: text;
}

/* Keyboard focus rings the segment (html.bv-kbd, search.js); a click does not. */
html.bv-kbd .bv-search-form__field:focus-within {
	outline: var(--focus-ring);
	outline-offset: -2px;
}

/* The field carries the ring; the bare input inside does not draw a second one. */
.bv-search-form .bv-search-form__field input:focus,
.bv-search-form .bv-search-form__field input:focus-visible {
	outline: none;
}

.bv-search-form__field input::placeholder {
	color: var(--ink-soft);
	opacity: 1;
}

.bv-search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	min-height: 52px;
	padding: 0 var(--space-xl);
	background: var(--accent);
	color: var(--on-accent);
	border: none;
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	cursor: pointer;
	transition: background-color var(--transition-fast);
	white-space: nowrap;
	flex-shrink: 0;
	border-radius: var(--radius-full);
}

.bv-search-form__submit:hover {
	background: var(--accent-hover);
	color: var(--on-accent);
}

.bv-search-form__submit:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

.bv-search-form__submit .bv-icon {
	flex-shrink: 0;
}

@media (max-width: 768px) {
	/* The phone stack: segments are cards; the open one is raised (no pill). */
	.bv-search-form {
		flex-direction: column;
		gap: 4px;
		border-radius: var(--radius-card);
	}

	.bv-search-form__pill {
		display: none;
	}

	.bv-search-form__field {
		border-radius: var(--radius-field);
		padding: var(--space-sm) var(--space-md);
		background: var(--paper);
	}

	.bv-search-form .bv-search-form__field.is-active {
		background: var(--paper);
		box-shadow: var(--seg-lift); /* taste-skill-ignore: the raised segment of an open overlay */
	}

	.bv-search-form__submit {
		padding: var(--space-md);
	}

	/* Panels flow inside the open card (the header's phone sheet). */
	.bv-search-form .bv-search-panel {
		position: static;
		width: auto;
		max-height: none;
		margin: var(--space-sm) calc(var(--space-sm) * -1) 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.bv-search-form .bv-combobox__dropdown-scroll {
		max-height: 45dvh;
	}
}

/* --------------------------------------------------------------------------
   Combobox (searchable select). The search bar's place and type lists are
   panels (search.js); the vendor form keeps its own look on the legacy
   --open class (vendor-form.css).
   -------------------------------------------------------------------------- */
.bv-combobox {
	position: static;
}

.bv-combobox__input {
	font-family: var(--font-primary);
}

.bv-combobox__input::placeholder {
	color: var(--ink-soft);
	opacity: 1;
}

/* Legacy (no search.js): shut until --open. */
.bv-combobox__dropdown {
	display: none;
}

.bv-combobox--open .bv-combobox__dropdown {
	display: block;
}

/* The search bar's lists: under their segment, as tall as the room under the
   bar allows (--panel-room, search.js), the list scrolling inside. */
.bv-search-form .bv-combobox__dropdown {
	display: flex;
	flex-direction: column;
	left: var(--panel-left, 0);
	width: min(var(--list-w, 360px), 100%);
	max-height: min(var(--list-max, 440px), max(var(--panel-min, 232px), var(--panel-room, 440px)));
	padding: var(--space-sm);
	overflow: hidden;
}

.bv-search-form .bv-combobox__dropdown[hidden] {
	display: none;
}

.bv-search-panel--ubicacion { --list-w: 384px; }
.bv-search-panel--tipo { --list-w: 300px; }

.bv-combobox__dropdown-scroll {
	max-height: 280px;
	overflow-y: auto;
}

.bv-search-form .bv-combobox__dropdown-scroll {
	position: relative; /* options' offsetTop, for scrolling the list only */
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.bv-combobox__dropdown-title {
	margin: var(--space-sm) var(--space-sm) var(--space-xs);
	font-size: var(--step-small);
	font-weight: var(--font-semibold);
	color: var(--ink-soft);
}

.bv-combobox__option {
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--text-base);
	color: var(--color-text);
	cursor: pointer;
}

.bv-combobox__option--highlighted {
	background: var(--paper-2);
}

.bv-combobox__option[hidden],
.bv-combobox__option--hidden {
	display: none;
}

/* Rows: an icon tile and the name. */
.bv-search-form .bv-combobox__option,
.bv-combobox__geo {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 6px 8px;
	border-radius: var(--radius-field);
	font-size: var(--text-base);
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out-soft);
}

.bv-search-form .bv-combobox__option[hidden] {
	display: none;
}

.bv-combobox__option-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-field);
	background: var(--paper-2);
	color: var(--ink);
	transition: background-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft);
}

.bv-combobox__option--highlighted .bv-combobox__option-icon {
	background: var(--paper);
}

.bv-combobox__option-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bv-combobox__option--selected {
	font-weight: var(--font-semibold);
}

.bv-combobox__option--selected .bv-combobox__option-icon {
	background: var(--paper);
	box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* "Cerca mío": the first row of the place list; geolocation + haversine on
   the term centroids pick the nearest place (search.js). */
.bv-combobox__geo {
	flex: none;
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-weight: 600;
	text-align: left;
}

@media (hover: hover) and (pointer: fine) {
	.bv-combobox__geo:hover {
		background: var(--paper-2);
	}

	.bv-combobox__geo:hover .bv-combobox__option-icon {
		background: var(--paper);
	}
}

.bv-combobox__geo:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.bv-combobox__geo svg { flex-shrink: 0; }
.bv-combobox__geo-spinner {
	width: 12px;
	height: 12px;
	border: 2px solid rgba(237, 106, 26, 0.25);
	border-top-color: #ED6A1A;
	border-radius: 50%;
	margin-left: auto;
	animation: bv-spin 0.7s linear infinite;
	display: none;
}
.bv-combobox__geo.is-loading .bv-combobox__geo-spinner { display: inline-block; }
.bv-combobox__geo[data-bv-error]::after {
	content: attr(data-bv-error);
	margin-left: auto;
	font-size: var(--step-small);
	color: var(--color-error);
	font-weight: 400;
}
.bv-combobox__geo[data-bv-error="denied"]::after  { content: "permiso denegado"; }
.bv-combobox__geo[data-bv-error="no-geo"]::after  { content: "no disponible"; }
.bv-combobox__geo[data-bv-error="error"]::after   { content: "no funcionó"; }
.bv-combobox__geo[data-bv-error="no-coords"]::after,
.bv-combobox__geo[data-bv-error="no-match"]::after { content: "sin coincidencias"; }
@keyframes bv-spin { to { transform: rotate(360deg); } }

.bv-combobox__empty {
	margin: 0;
	padding: 12px 8px;
	font-size: var(--step-small);
	color: var(--ink-soft);
}

/* ==========================================================================
   Gallery Lightbox (shared: single-product + Rutas Sugeridas)
   Loaded globally via components.css. JS: vehicle-detail.js / rutas.js.
   Fades in over the night field (photo grows from 97%); closing, the JS
   adds .is-closing and removes the node when the fade ends. A new photo
   cross-fades in (.is-swapping while it loads).
   ========================================================================== */
.bv-lightbox {
	position: fixed;
	inset: 0;
	background: rgb(18 24 32 / 0.94); /* the night field, never pure black */
	z-index: var(--z-modal, 400);
	display: flex;
	align-items: center;
	justify-content: center;
	overscroll-behavior: contain;
	transition: opacity var(--dur-base) var(--ease-out-soft);
}

.bv-lightbox.is-closing {
	opacity: 0;
	transition-duration: var(--dur-fast);
	transition-timing-function: var(--ease-in-out-soft);
}

.bv-lightbox__close,
.bv-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: rgb(255 255 255 / 0.14);
	color: var(--on-night);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out-soft), scale var(--dur-fast) var(--ease-out-soft);
}

.bv-lightbox__close {
	top: var(--space-lg);
	right: var(--space-lg);
}

.bv-lightbox__nav {
	top: calc(50% - 24px);
}

@media (hover: hover) and (pointer: fine) {
	.bv-lightbox__close:hover,
	.bv-lightbox__nav:hover {
		background: rgb(255 255 255 / 0.26);
		color: var(--on-night);
	}
}

.bv-lightbox__close:active,
.bv-lightbox__nav:active {
	scale: 0.97;
	transition-duration: var(--dur-press);
}

/* On the night field the ink ring would vanish: the ring turns white. */
.bv-lightbox :focus-visible {
	outline: 2px solid var(--on-night);
	outline-offset: 2px;
}

.bv-lightbox__img {
	max-width: 90vw;
	max-height: 85svh;
	object-fit: contain;
	border-radius: var(--radius-card);
	transition: opacity var(--dur-base) var(--ease-out-soft), scale var(--dur-base) var(--ease-out-expo);
}

.bv-lightbox__img.is-swapping {
	opacity: 0;
	transition-duration: var(--dur-fast);
}

.bv-lightbox__nav--prev {
	left: var(--space-lg);
}

.bv-lightbox__nav--prev .bv-icon {
	transform: rotate(180deg);
}

.bv-lightbox__nav--next {
	right: var(--space-lg);
}

.bv-lightbox__counter {
	position: absolute;
	bottom: var(--space-lg);
	left: 50%;
	transform: translateX(-50%);
	color: var(--on-night);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
	background: rgb(18 24 32 / 0.6);
	padding: var(--space-xs) var(--space-md);
	border-radius: var(--radius-full);
}

@starting-style {
	.bv-lightbox { opacity: 0; }
	.bv-lightbox__img { opacity: 0; scale: 0.97; }
}

@media (max-width: 599px) {
	.bv-lightbox__close {
		top: var(--space-md);
		right: var(--space-md);
	}

	.bv-lightbox__nav {
		top: auto;
		bottom: var(--space-md);
	}

	.bv-lightbox__nav--prev { left: var(--space-md); }
	.bv-lightbox__nav--next { right: var(--space-md); }
	.bv-lightbox__counter { bottom: calc(var(--space-md) + 10px); }
	.bv-lightbox__img { max-width: 100vw; border-radius: 0; }
}

/* ==========================================================================
   Modal dialogs and sheets (one look for every dialog on the site)
   Markup: .bv-modal (fixed, it is the ink scrim) > .bv-modal__panel
   [role=dialog]. Show and hide the wrapper with `hidden`; header.js's
   window.bvDialog traps focus, closes on Esc, locks the scroll and gives the
   focus back. A separate backdrop child (.bv-modal__scrim, or a legacy
   *__backdrop) is just the click target. Desktop: the panel grows from 97%
   in --dur-base; phone: a sheet that rises from the bottom in --dur-enter.
   Closing is quicker (--dur-fast). Reduced motion: opacity only.
   Native <dialog class="bv-dialog"> (showModal) gets the same look.
   ========================================================================== */
.bv-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 400);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	background-color: rgb(18 24 32 / 0.45);
	overscroll-behavior: contain;
	box-sizing: border-box;
	transition:
		background-color var(--dur-fast) var(--ease-out-soft),
		display var(--dur-base) allow-discrete,
		overlay var(--dur-base) allow-discrete;
}

.bv-modal[hidden] {
	display: none;
	background-color: rgb(18 24 32 / 0);
	transition-duration: var(--dur-fast);
}

.bv-modal__scrim {
	position: absolute;
	inset: 0;
	background: none;
}

.bv-modal__panel,
dialog.bv-dialog {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: calc(100svh - 2 * var(--space-md));
	margin: 0;
	padding: var(--space-lg);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: var(--radius-banner);
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-float); /* taste-skill-ignore: dialogs are real overlays */
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	text-align: left;
	box-sizing: border-box;
	transition:
		opacity var(--dur-base) var(--ease-out-soft),
		scale var(--dur-base) var(--ease-out-expo),
		translate var(--dur-enter) var(--ease-out-expo);
}

.bv-modal[hidden] .bv-modal__panel {
	opacity: 0;
	scale: 0.97;
	transition-duration: var(--dur-fast);
	transition-timing-function: var(--ease-in-out-soft);
}

@starting-style {
	.bv-modal:not([hidden]) { background-color: rgb(18 24 32 / 0); }
	.bv-modal:not([hidden]) .bv-modal__panel { opacity: 0; scale: 0.97; }
}

/* Native dialog: the top layer does the scrim (::backdrop) and the trap. */
dialog.bv-dialog {
	width: min(560px, calc(100vw - 2 * var(--space-md)));
	margin: auto;
	transition:
		opacity var(--dur-base) var(--ease-out-soft),
		scale var(--dur-base) var(--ease-out-expo),
		translate var(--dur-enter) var(--ease-out-expo),
		display var(--dur-base) allow-discrete,
		overlay var(--dur-base) allow-discrete;
}

dialog.bv-dialog:not([open]) {
	opacity: 0;
	scale: 0.97;
	transition-duration: var(--dur-fast);
	transition-timing-function: var(--ease-in-out-soft);
}

dialog.bv-dialog::backdrop {
	background-color: rgb(18 24 32 / 0.45);
	transition:
		background-color var(--dur-fast) var(--ease-out-soft),
		display var(--dur-base) allow-discrete,
		overlay var(--dur-base) allow-discrete;
}

dialog.bv-dialog:not([open])::backdrop {
	background-color: rgb(18 24 32 / 0);
}

@starting-style {
	dialog.bv-dialog[open] { opacity: 0; scale: 0.97; }
	dialog.bv-dialog[open]::backdrop { background-color: rgb(18 24 32 / 0); }
}

/* Inside: title, lead, close, fields and the action row. */
.bv-modal__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out-soft);
}

.bv-modal__close:hover {
	background: var(--paper-2);
	color: var(--ink);
}

.bv-modal__close:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 0;
}

.bv-modal__title,
.bv-modal__panel > h3:first-of-type {
	margin: 0 48px var(--space-sm) 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--step-lead);
	font-weight: 600;
	letter-spacing: var(--tracking-display);
	line-height: 1.2;
}

.bv-modal__lead {
	margin: 0 0 var(--space-md);
	color: var(--ink-soft);
	font-size: var(--text-base);
	line-height: 1.5;
}

.bv-modal__panel :is(textarea, select, input:is([type="text"], [type="number"], [type="email"], [type="tel"], [type="date"], [type="time"], [type="datetime-local"], [type="url"])) {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--field-line); /* taste-skill-ignore: form field edge */
	border-radius: var(--radius-field);
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 1rem;
	box-sizing: border-box;
}

.bv-modal__panel textarea {
	resize: vertical;
}

.bv-modal__panel :is(textarea, select, input):focus-visible {
	outline: var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--ink);
	box-shadow: none;
}

.bv-modal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.bv-modal__error {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-error);
	font-size: var(--text-base);
}

.bv-modal__error:empty {
	display: none;
}

/* Scroll lock while a dialog is open (window.bvDialog). */
html.bv-modal-open,
html.bv-modal-open body {
	overflow: hidden;
}

/* Phone: the panel is a sheet that rises from the bottom edge. */
@media (max-width: 599px) {
	.bv-modal {
		align-items: flex-end;
		padding: 0;
	}

	.bv-modal__panel,
	dialog.bv-dialog {
		width: 100%;
		max-width: none;
		max-height: 92svh;
		padding: var(--space-lg) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
		border-radius: var(--radius-banner) var(--radius-banner) 0 0;
	}

	dialog.bv-dialog {
		margin: auto 0 0;
	}

	.bv-modal[hidden] .bv-modal__panel,
	dialog.bv-dialog:not([open]) {
		opacity: 1;
		scale: none;
		translate: 0 100%;
	}

	@starting-style {
		.bv-modal:not([hidden]) .bv-modal__panel,
		dialog.bv-dialog[open] { opacity: 1; scale: none; translate: 0 100%; }
	}

	.bv-modal__actions > :is(.bv-btn, button, a) {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bv-modal__panel,
	.bv-modal[hidden] .bv-modal__panel,
	dialog.bv-dialog,
	dialog.bv-dialog:not([open]),
	.bv-lightbox__img {
		scale: none;
		translate: none;
	}

	.bv-modal[hidden] .bv-modal__panel,
	dialog.bv-dialog:not([open]) {
		opacity: 0;
	}

	@starting-style {
		.bv-modal:not([hidden]) .bv-modal__panel,
		dialog.bv-dialog[open],
		.bv-lightbox__img { scale: none; translate: none; opacity: 0; }
	}
}

@media print {
	.bv-modal,
	.bv-lightbox,
	.bv-toast {
		display: none !important;
	}
}

/* ?sinmov=1 (header.js sets html.mm-still): every overlay, menu, sheet and
   disclosure is instant, like the motion engine's "no motion" for QA. */
html.mm-still *,
html.mm-still *::before,
html.mm-still *::after,
html.mm-still *::backdrop {
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

/* Its own rule: a browser without ::details-content drops only this one. */
html.mm-still details::details-content {
	transition-duration: 0s !important;
}

/* ==========================================================================
   Toast: one short status line that floats at the bottom (window.bvToast in
   header.js). Rises 8px and fades in, leaves quicker; a success goes by
   itself, an error stays until closed.
   ========================================================================== */
.bv-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-toast, 500);
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: max-content;
	max-width: min(560px, calc(100vw - 2 * var(--space-md)));
	padding: 12px 8px 12px 16px;
	border-radius: var(--radius-card);
	background: var(--paper);
	color: var(--ink);
	box-shadow: var(--shadow-float); /* taste-skill-ignore: a toast is a real overlay */
	font-family: var(--font-ui);
	font-size: var(--text-base);
	line-height: 1.4;
	translate: -50% 0;
	transition:
		opacity var(--dur-fast) var(--ease-out-soft),
		translate var(--dur-base) var(--ease-out-expo),
		display var(--dur-base) allow-discrete;
}

.bv-toast[hidden] {
	display: none;
	opacity: 0;
	translate: -50% var(--dist-1);
	transition-duration: var(--dur-fast);
	transition-timing-function: var(--ease-in-out-soft);
}

@starting-style {
	.bv-toast:not([hidden]) { opacity: 0; translate: -50% var(--dist-1); }
}

.bv-toast__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--color-success);
}

.bv-toast--error .bv-toast__dot {
	background: var(--color-error);
}

.bv-toast__text {
	flex: 1;
	margin: 0;
}

.bv-toast__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ink);
	font-size: 1.375rem;
	line-height: 1;
	cursor: pointer;
}

.bv-toast__close:hover {
	background: var(--paper-2);
}

@media (prefers-reduced-motion: reduce) {
	.bv-toast,
	.bv-toast[hidden] {
		translate: -50% 0;
	}

	@starting-style {
		.bv-toast:not([hidden]) { translate: -50% 0; }
	}
}

/* ==========================================================================
   Disclosures: every <details> (FAQ, panels, "Rechazar", policy lists)
   opens and closes by height with ::details-content and interpolate-size,
   in --dur-base on the open/close curve. Where the browser lacks either,
   it just opens. Reduced motion: instant. Each FAQ rotates its own icon.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	details {
		interpolate-size: allow-keywords;
	}

	details::details-content {
		block-size: 0;
		overflow: clip;
		overflow-clip-margin: 4px; /* focus rings at the edges stay whole */
		opacity: 0;
		transition:
			block-size var(--dur-base) var(--ease-in-out-soft),
			opacity var(--dur-base) var(--ease-out-soft),
			content-visibility var(--dur-base) allow-discrete;
	}

	details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* ==========================================================================
   System base (F0): focus, shared interface faces
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Interface text stays in Inter. */
:where(input, select, textarea, button, table, .price, .amount, .woocommerce-Price-amount) {
	font-family: var(--font-ui);
}

/* ==========================================================================
   Bridge: WooCommerce / Dokan / bonzivan-custom components rendered on the
   public pages, mapped onto the system (pill, ink on accent, no shadow).
   `html body` beats plugin styles printed later in the page.
   ========================================================================== */
html body .woocommerce :is(a, button, input).button,
html body :is(a, button, input).button.wc-forward {
	border: 0;
	border-radius: var(--radius-full);
	background: var(--paper-2);
	color: var(--ink);
	font-family: var(--font-ui);
	font-weight: var(--font-semibold);
	min-height: 44px;
	padding: 0.625rem 1.375rem;
	box-shadow:none;
}

html body .woocommerce :is(a, button, input).button:hover {
	background: var(--paper-3);
	color: var(--ink);
}

html body .woocommerce :is(a, button, input).button.alt,
html body .woocommerce #place_order,
html body .woocommerce .single_add_to_cart_button,
html body .woocommerce .checkout-button,
html body .dokan-btn-theme,
html body a.dokan-btn-theme {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

html body .woocommerce :is(a, button, input).button.alt:hover,
html body .woocommerce #place_order:hover,
html body .woocommerce .checkout-button:hover,
html body .dokan-btn-theme:hover,
html body a.dokan-btn-theme:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--on-accent);
}

/* Cookie banner: styled at the source now (class-cookie-consent.php, on
   these tokens), no bridge needed. */

/* Ratings and report links: nothing a user reads below 13px. */
html body .bv-rating,
html body .bv-rating--sm,
html body .bv-report-btn {
	font-size: var(--step-small);
}
html body .bv-report-btn { color: var(--ink-soft); }

/* Icon tile: the reading aid for text-heavy blocks that carry a heading
   (feature grids, info cards, long section cards). One size everywhere: a
   48px circle on the tone step with a 24px ink icon (inc/icons.php). On a
   paper-2 surface the tile turns paper. Never the accent: it is not an action. */
.bv-icon-tile {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--ink);
	background: var(--paper-2);
	border-radius: 50%;
}

.bv-icon-tile .bv-icon {
	width: 24px;
	height: 24px;
}

.bv-icon-tile--on-tone {
	background: var(--paper);
}