/**
 * Villa Booking Suite - front end.
 *
 * Everything is scoped under .vbs or .vbs-modal so themes are never touched.
 * Colours, radius and fonts come from custom properties, which is what the
 * Elementor style controls write to.
 */

.vbs,
.vbs-modal {
	--vbs-accent: #1f6f5c;
	--vbs-accent-contrast: #ffffff;
	--vbs-accent-soft: color-mix( in srgb, var( --vbs-accent ) 12%, #ffffff );
	--vbs-ink: #1b1d1c;
	--vbs-ink-soft: #5d6360;
	--vbs-line: #e2e5e3;
	--vbs-surface: #ffffff;
	--vbs-surface-alt: #f6f7f6;
	--vbs-danger: #a6332e;
	--vbs-radius: 14px;
	--vbs-radius-sm: 9px;
	--vbs-shadow: 0 1px 2px rgba( 20, 28, 25, .05 ), 0 12px 32px -12px rgba( 20, 28, 25, .18 );
	--vbs-columns: 3;

	box-sizing: border-box;
	color: var( --vbs-ink );
	font-size: 16px;
	line-height: 1.5;
}

.vbs *,
.vbs *::before,
.vbs *::after,
.vbs-modal *,
.vbs-modal *::before,
.vbs-modal *::after {
	box-sizing: border-box;
}

@supports not ( background: color-mix( in srgb, red 10%, white ) ) {
	.vbs,
	.vbs-modal {
		--vbs-accent-soft: #eef4f2;
	}
}

/* ---------------------------------------------------------------- Buttons */

.vbs .vbs-button,
.vbs-modal .vbs-button {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var( --vbs-radius-sm );
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-weight: 600;
	gap: .5em;
	line-height: 1.2;
	min-height: 46px;
	padding: .75em 1.4em;
	text-align: center;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}

.vbs .vbs-button--primary,
.vbs-modal .vbs-button--primary {
	background: var( --vbs-accent );
	color: var( --vbs-accent-contrast );
}

.vbs .vbs-button--primary:hover,
.vbs-modal .vbs-button--primary:hover {
	filter: brightness( .94 );
	color: var( --vbs-accent-contrast );
}

.vbs .vbs-button--ghost,
.vbs-modal .vbs-button--ghost {
	background: transparent;
	border-color: var( --vbs-line );
	color: var( --vbs-ink );
	min-height: 40px;
	padding: .55em 1em;
}

.vbs .vbs-button--ghost:hover,
.vbs-modal .vbs-button--ghost:hover {
	border-color: var( --vbs-accent );
	color: var( --vbs-accent );
}

.vbs .vbs-button--block,
.vbs-modal .vbs-button--block {
	width: 100%;
}

.vbs .vbs-button[disabled],
.vbs-modal .vbs-button[disabled] {
	cursor: not-allowed;
	opacity: .45;
}

.vbs .vbs-button:focus-visible,
.vbs-modal .vbs-button:focus-visible,
.vbs .vbs-input:focus-visible,
.vbs-modal .vbs-input:focus-visible,
.vbs-modal .vbs-cal__day:focus-visible {
	outline: 2px solid var( --vbs-accent );
	outline-offset: 2px;
}

.vbs .vbs-link,
.vbs-modal .vbs-link {
	background: none;
	border: 0;
	color: var( --vbs-accent );
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- Inputs */

.vbs .vbs-label,
.vbs-modal .vbs-label {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin: 0 0 .35em;
	text-transform: uppercase;
	color: var( --vbs-ink-soft );
}

.vbs .vbs-label--inline,
.vbs-modal .vbs-label--inline {
	font-size: .9375rem;
	font-weight: 400;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;
	color: var( --vbs-ink );
}

.vbs .vbs-input,
.vbs-modal .vbs-input {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius-sm );
	color: var( --vbs-ink );
	font: inherit;
	min-height: 46px;
	padding: .6em .85em;
	width: 100%;
}

.vbs textarea.vbs-input,
.vbs-modal textarea.vbs-input {
	min-height: 92px;
	resize: vertical;
}

.vbs .vbs-field,
.vbs-modal .vbs-field {
	margin: 0 0 .9rem;
}

.vbs .vbs-field--check,
.vbs-modal .vbs-field--check {
	align-items: flex-start;
	display: flex;
	gap: .6em;
}

.vbs .vbs-field--check a,
.vbs-modal .vbs-field--check a {
	color: var( --vbs-accent );
	text-underline-offset: 3px;
}

.vbs .vbs-checkbox,
.vbs-modal .vbs-checkbox {
	accent-color: var( --vbs-accent );
	height: 20px;
	margin: 2px 0 0;
	width: 20px;
	flex: 0 0 auto;
}

.vbs .vbs-hp,
.vbs-modal .vbs-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

/* ------------------------------------------------------------ Search form */

.vbs-search {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius );
	box-shadow: var( --vbs-shadow );
	display: grid;
	gap: 1rem;
	padding: 1.1rem 1.2rem;
}

.vbs-search--inline {
	align-items: end;
	grid-template-columns: minmax( 220px, 2fr ) repeat( auto-fit, minmax( 90px, 1fr ) );
}

.vbs-search--inline .vbs-search__field--submit {
	grid-column: span 1;
}

.vbs-search--stacked {
	grid-template-columns: 1fr;
}

.vbs-daterange-trigger {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius-sm );
	cursor: pointer;
	font: inherit;
	min-height: 46px;
	padding: .6em .85em;
	text-align: left;
	width: 100%;
	color: var( --vbs-ink );
}

.vbs-daterange-trigger:hover {
	border-color: var( --vbs-accent );
}

@media ( max-width: 782px ) {
	.vbs-search--inline {
		grid-template-columns: 1fr 1fr;
	}

	.vbs-search--inline .vbs-search__field--dates,
	.vbs-search--inline .vbs-search__field--submit {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------- Calendar */

.vbs-calendar-wrap {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius );
	padding: 1.1rem;
}

.vbs-cal__header {
	align-items: center;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	margin-bottom: .9rem;
}

.vbs-cal__title {
	font-size: 1.0625rem;
	font-weight: 700;
	text-transform: capitalize;
}

.vbs-cal__subtitle {
	font-weight: 700;
	margin-bottom: .6rem;
	text-align: center;
	text-transform: capitalize;
}

.vbs-cal__nav {
	align-items: center;
	background: var( --vbs-surface-alt );
	border: 1px solid var( --vbs-line );
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
	color: var( --vbs-ink );
}

.vbs-cal__nav[disabled] {
	cursor: not-allowed;
	opacity: .35;
}

.vbs-cal__months {
	display: grid;
	gap: 1.6rem;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

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

.vbs-cal__weekday {
	color: var( --vbs-ink-soft );
	font-size: .75rem;
	font-weight: 600;
	padding-bottom: .4rem;
	text-align: center;
	text-transform: uppercase;
}

.vbs-cal__day {
	align-items: center;
	aspect-ratio: 1 / 1;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --vbs-radius-sm );
	color: var( --vbs-ink );
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 1px;
	justify-content: center;
	min-height: 44px;
	padding: 2px;
	position: relative;
	transition: background-color .12s ease, color .12s ease;
}

.vbs-cal__num {
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1;
}

.vbs-cal__price {
	color: var( --vbs-ink-soft );
	font-size: .625rem;
	line-height: 1;
}

.vbs-cal__day:hover:not( [disabled] ) {
	background: var( --vbs-accent-soft );
}

.vbs-cal__day.is-booked,
.vbs-cal__day.is-blocked,
.vbs-cal__day.is-closed,
.vbs-cal__day.is-past,
.vbs-cal__day[disabled] {
	color: #b3b8b5;
	cursor: not-allowed;
}

.vbs-cal__day.is-booked .vbs-cal__num,
.vbs-cal__day.is-blocked .vbs-cal__num {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.vbs-cal__day.is-booked,
.vbs-cal__day.is-blocked {
	background: repeating-linear-gradient( -45deg, #f1f2f1, #f1f2f1 4px, #fafbfa 4px, #fafbfa 8px );
}

.vbs-cal__day.is-between {
	background: var( --vbs-accent-soft );
	border-radius: 0;
}

.vbs-cal__day.is-start,
.vbs-cal__day.is-end {
	background: var( --vbs-accent );
	color: var( --vbs-accent-contrast );
}

.vbs-cal__day.is-start .vbs-cal__price,
.vbs-cal__day.is-end .vbs-cal__price {
	color: inherit;
	opacity: .8;
}

.vbs-cal__day.is-unreachable {
	opacity: .45;
}

.vbs-cal__footer {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-top: .9rem;
}

.vbs-cal__message {
	color: var( --vbs-danger );
	font-size: .875rem;
	margin: 0;
}

.vbs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-size: .8125rem;
	color: var( --vbs-ink-soft );
}

.vbs-legend__item {
	align-items: center;
	display: flex;
	gap: .4rem;
}

.vbs-legend__swatch {
	border: 1px solid var( --vbs-line );
	border-radius: 4px;
	display: inline-block;
	height: 14px;
	width: 14px;
}

.vbs-legend__swatch--available {
	background: var( --vbs-surface );
}

.vbs-legend__swatch--booked,
.vbs-legend__swatch--blocked {
	background: repeating-linear-gradient( -45deg, #f1f2f1, #f1f2f1 3px, #fafbfa 3px, #fafbfa 6px );
}

/* ------------------------------------------------------------ Book button */

.vbs-book__price {
	margin: 0 0 .6rem;
	font-size: 1rem;
	color: var( --vbs-ink-soft );
}

.vbs-book__price strong {
	color: var( --vbs-ink );
	font-size: 1.375rem;
}

/* ------------------------------------------------------------------ Modal */

.vbs-modal {
	align-items: flex-start;
	background: rgba( 16, 22, 20, .55 );
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	opacity: 0;
	overflow-y: auto;
	padding: clamp( 12px, 4vw, 48px );
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity .18s ease;
	z-index: 2147483000;
	-webkit-overflow-scrolling: touch;
}

.vbs-modal.is-visible {
	opacity: 1;
}

.vbs-modal__dialog {
	background: var( --vbs-surface );
	border-radius: var( --vbs-radius );
	box-shadow: 0 24px 70px -20px rgba( 12, 18, 16, .5 );
	margin: auto;
	max-width: 940px;
	position: relative;
	transform: translateY( 8px );
	transition: transform .18s ease;
	width: 100%;
}

.vbs-modal.is-visible .vbs-modal__dialog {
	transform: translateY( 0 );
}

.vbs-modal__close {
	align-items: center;
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	font-size: 24px;
	height: 40px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 40px;
	z-index: 2;
	color: var( --vbs-ink );
}

.vbs-modal__close:hover {
	background: var( --vbs-surface-alt );
}

body.vbs-modal-open {
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	width: 100%;
}

/* ------------------------------------------------------------ Booking panel */

.vbs-panel {
	padding: clamp( 20px, 3vw, 34px );
}

.vbs-panel__title {
	font-size: clamp( 1.25rem, 2.4vw, 1.625rem );
	line-height: 1.2;
	margin: 0 0 1.2rem;
	padding-right: 48px;
}

.vbs-panel__subtitle {
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .03em;
	margin: 1.2rem 0 .5rem;
	text-transform: uppercase;
	color: var( --vbs-ink-soft );
}

.vbs-panel__layout {
	display: grid;
	gap: clamp( 20px, 3vw, 34px );
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, .95fr );
}

@media ( max-width: 860px ) {
	.vbs-panel__layout {
		grid-template-columns: 1fr;
	}
}

.vbs-panel__calendar {
	min-width: 0;
}

.vbs-panel__side {
	min-width: 0;
}

/* Guest count steppers */

.vbs-stepper-num {
	align-items: center;
	border-bottom: 1px solid var( --vbs-line );
	display: flex;
	justify-content: space-between;
	padding: .7rem 0;
}

.vbs-stepper-num__label {
	font-weight: 500;
}

.vbs-stepper-num__controls {
	align-items: center;
	display: flex;
	gap: .8rem;
}

.vbs-stepper-num__btn {
	align-items: center;
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	font-size: 18px;
	height: 34px;
	justify-content: center;
	line-height: 1;
	width: 34px;
	color: var( --vbs-ink );
}

.vbs-stepper-num__btn:hover {
	border-color: var( --vbs-accent );
	color: var( --vbs-accent );
}

.vbs-stepper-num__value {
	font-variant-numeric: tabular-nums;
	min-width: 1.5ch;
	text-align: center;
}

/* Step progress */

.vbs-stepper {
	counter-reset: vbs-step;
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.vbs-stepper__item {
	align-items: center;
	color: var( --vbs-ink-soft );
	display: flex;
	flex: 1 1 0;
	font-size: .875rem;
	gap: .5rem;
	min-width: 0;
	padding-bottom: .55rem;
	position: relative;
}

.vbs-stepper__item::after {
	background: var( --vbs-line );
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	border-radius: 2px;
}

.vbs-stepper__item.is-current,
.vbs-stepper__item.is-done {
	color: var( --vbs-ink );
}

.vbs-stepper__item.is-current::after,
.vbs-stepper__item.is-done::after {
	background: var( --vbs-accent );
}

.vbs-stepper__dot {
	align-items: center;
	background: var( --vbs-surface-alt );
	border-radius: 50%;
	color: var( --vbs-ink-soft );
	display: inline-flex;
	flex: 0 0 auto;
	font-size: .8125rem;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	width: 26px;
}

.vbs-stepper__item.is-current .vbs-stepper__dot,
.vbs-stepper__item.is-done .vbs-stepper__dot {
	background: var( --vbs-accent );
	color: var( --vbs-accent-contrast );
}

.vbs-stepper__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media ( max-width: 560px ) {
	.vbs-stepper__label {
		display: none;
	}
}

/* Step 2 and 3 */

.vbs-review {
	background: var( --vbs-surface-alt );
	border-radius: var( --vbs-radius-sm );
	margin: 0 0 1.3rem;
	padding: .9rem 1.1rem;
}

.vbs-review__line {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	justify-content: space-between;
}

.vbs-review__label {
	color: var( --vbs-ink-soft );
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	width: 100%;
}

.vbs-review__value {
	flex: 1 1 auto;
}

.vbs-review__total {
	font-size: 1.125rem;
	font-weight: 700;
	white-space: nowrap;
}

.vbs-form__row {
	display: grid;
	gap: 0 .9rem;
	grid-template-columns: 1fr 1fr;
}

@media ( max-width: 520px ) {
	.vbs-form__row {
		grid-template-columns: 1fr;
	}
}

.vbs-panel__details,
.vbs-panel__payment {
	margin: 0 auto;
	max-width: 620px;
}

.vbs-payopts {
	display: grid;
	gap: .6rem;
	margin: 1.2rem 0;
}

.vbs-payopt {
	align-items: center;
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius-sm );
	cursor: pointer;
	display: flex;
	gap: .8rem;
	padding: .9rem 1rem;
	transition: border-color .14s ease, background-color .14s ease;
}

.vbs-payopt:hover {
	border-color: var( --vbs-accent );
}

.vbs-payopt:has( input:checked ) {
	background: var( --vbs-accent-soft );
	border-color: var( --vbs-accent );
}

.vbs-payopt input {
	accent-color: var( --vbs-accent );
	flex: 0 0 auto;
	height: 20px;
	width: 20px;
}

.vbs-payopt__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.vbs-payopt__note {
	color: var( --vbs-ink-soft );
	font-size: .8125rem;
}

.vbs-payopt__amount {
	font-weight: 700;
	white-space: nowrap;
}

.vbs-panel__footer {
	border-top: 1px solid var( --vbs-line );
	margin-top: 1.4rem;
	padding-top: 1.1rem;
}

.vbs-panel__actions {
	display: flex;
	gap: .7rem;
}

.vbs-panel__actions .vbs-button--ghost {
	flex: 0 0 auto;
}

.vbs-extra {
	align-items: center;
	display: flex;
	gap: .6rem;
	padding: .45rem 0;
}

.vbs-extra__label {
	flex: 1 1 auto;
}

.vbs-extra__price {
	color: var( --vbs-ink-soft );
	font-size: .9375rem;
}

.vbs-panel__summary {
	background: var( --vbs-surface-alt );
	border-radius: var( --vbs-radius-sm );
	margin: 1.1rem 0;
	padding: 1rem 1.1rem;
	transition: opacity .15s ease;
}

.vbs-panel__summary.is-loading {
	opacity: .5;
}

.vbs-panel__dates {
	margin: 0 0 .7rem;
}

.vbs-panel__nights {
	color: var( --vbs-ink-soft );
}

.vbs-panel__hint {
	color: var( --vbs-ink-soft );
	font-size: .9375rem;
	margin: 0;
}

.vbs-panel__deposit {
	border-top: 1px solid var( --vbs-line );
	margin: .8rem 0 0;
	padding-top: .7rem;
	font-size: .9375rem;
}

.vbs-quote {
	border-collapse: collapse;
	width: 100%;
}

.vbs-quote__row td,
.vbs-quote__row th {
	border: 0;
	font-weight: 400;
	padding: .3rem 0;
	text-align: left;
}

.vbs-quote__value {
	text-align: right !important;
	white-space: nowrap;
}

.vbs-quote__row--total th {
	border-top: 1px solid var( --vbs-line );
	font-weight: 700;
	padding-top: .6rem;
}

.vbs-errors {
	color: var( --vbs-danger );
	font-size: .9375rem;
	margin: 0;
	padding-left: 1.1rem;
}

.vbs-feedback {
	font-size: .9375rem;
	margin: 0 0 .8rem;
}

.vbs-feedback--error {
	color: var( --vbs-danger );
}

.vbs-success {
	padding: 2.4rem 1rem;
	text-align: center;
}

.vbs-success__mark {
	align-items: center;
	background: var( --vbs-accent-soft );
	border-radius: 50%;
	color: var( --vbs-accent );
	display: inline-flex;
	height: 64px;
	justify-content: center;
	margin-bottom: 1rem;
	width: 64px;
}

.vbs-success__title {
	font-size: 1.25rem;
	margin: 0 0 .5rem;
}

.vbs-success__code {
	color: var( --vbs-ink-soft );
	margin: 0;
}

/* ---------------------------------------------------------------- Results */

/*
 * A search form that shows its own results wraps them in .vbs-searchwrap, so
 * the results sit with the form rather than on a page of their own.
 */
.vbs-searchwrap__results {
	margin-top: 2rem;
}

/* Themes that force display on block elements would otherwise reveal this. */
.vbs-searchwrap__results[hidden] {
	display: none;
}

.vbs-results--modal {
	max-height: min( 78vh, 760px );
	overflow-y: auto;
	padding: 1.8rem;
	-webkit-overflow-scrolling: touch;
}

.vbs-results--modal .vbs-results__section:last-child {
	margin-bottom: 0;
}

.vbs-results__section {
	margin: 0 0 2.6rem;
}

.vbs-results__heading {
	font-size: 1.25rem;
	margin: 0 0 .4rem;
}

.vbs-results__intro,
.vbs-results__empty {
	color: var( --vbs-ink-soft );
	margin: 0 0 1.2rem;
}

.vbs-cards {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat( var( --vbs-columns, 3 ), minmax( 0, 1fr ) );
}

@media ( max-width: 980px ) {
	.vbs-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.vbs-cards {
		grid-template-columns: 1fr;
	}
}

.vbs-card {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

.vbs-card:hover {
	box-shadow: var( --vbs-shadow );
	transform: translateY( -2px );
}

/* Cards render as buttons when properties have no pages of their own, so the
   button chrome has to be stripped back to what the anchors looked like. */
.vbs button.vbs-card__media,
.vbs button.vbs-card__titlelink,
.vbs button.vbs-itinerary__title {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: left;
	width: 100%;
}

.vbs button.vbs-card__titlelink:hover,
.vbs button.vbs-itinerary__title:hover {
	color: var( --vbs-accent );
}

.vbs-card__media {
	aspect-ratio: 4 / 3;
	display: block;
	overflow: hidden;
}

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

.vbs-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .45rem;
	padding: 1.1rem 1.15rem 1.2rem;
}

.vbs-card__title {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0;
}

.vbs-card__title a,
.vbs-card__title .vbs-card__titlelink {
	color: inherit;
	text-decoration: none;
}

.vbs-card__title a:hover,
.vbs-card__title .vbs-card__titlelink:hover {
	color: var( --vbs-accent );
}

.vbs-card__meta,
.vbs-card__dates {
	color: var( --vbs-ink-soft );
	font-size: .875rem;
	margin: 0;
}

.vbs-card__price {
	align-items: baseline;
	display: flex;
	gap: .4rem;
	margin-top: auto;
	padding-top: .5rem;
}

.vbs-card__total {
	font-size: 1.25rem;
	font-weight: 700;
}

.vbs-card__nights {
	color: var( --vbs-ink-soft );
	font-size: .875rem;
}

.vbs-card__cta {
	margin-top: .6rem;
}

/* ------------------------------------------------------------- Itinerary */

.vbs-itinerary {
	background: var( --vbs-surface );
	border: 1px solid var( --vbs-line );
	border-radius: var( --vbs-radius );
	margin-bottom: 1.2rem;
	overflow: hidden;
}

.vbs-itinerary__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vbs-itinerary__step {
	align-items: center;
	border-bottom: 1px solid var( --vbs-line );
	display: grid;
	gap: 1rem;
	grid-template-columns: auto 84px minmax( 0, 1fr ) auto auto;
	padding: 1rem 1.2rem;
}

.vbs-itinerary__index {
	align-items: center;
	background: var( --vbs-accent-soft );
	border-radius: 50%;
	color: var( --vbs-accent );
	display: inline-flex;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.vbs-itinerary__media img {
	aspect-ratio: 4 / 3;
	border-radius: var( --vbs-radius-sm );
	display: block;
	object-fit: cover;
	width: 84px;
}

.vbs-itinerary__info {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.vbs-itinerary__title {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.vbs-itinerary__title:hover {
	color: var( --vbs-accent );
}

.vbs-itinerary__dates {
	color: var( --vbs-ink-soft );
	font-size: .875rem;
}

.vbs-itinerary__price {
	font-weight: 600;
	white-space: nowrap;
}

.vbs-itinerary__footer {
	align-items: center;
	background: var( --vbs-surface-alt );
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: .9rem 1.2rem;
}

.vbs-itinerary__summary {
	color: var( --vbs-ink-soft );
	font-size: .9375rem;
}

.vbs-itinerary__total {
	font-size: 1.125rem;
	font-weight: 700;
}

@media ( max-width: 720px ) {
	.vbs-itinerary__step {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"index info"
			"media info"
			"price cta";
	}

	.vbs-itinerary__index { grid-area: index; }
	.vbs-itinerary__media { grid-area: media; }
	.vbs-itinerary__info { grid-area: info; }
	.vbs-itinerary__price { grid-area: price; }
	.vbs-itinerary__cta { grid-area: cta; }
}

/* ------------------------------------------------------------ Misc states */

.vbs-skeleton {
	background: linear-gradient( 90deg, var( --vbs-surface-alt ) 25%, #eceeed 37%, var( --vbs-surface-alt ) 63% );
	background-size: 400% 100%;
	border-radius: var( --vbs-radius-sm );
	height: 280px;
	animation: vbs-shimmer 1.4s ease infinite;
}

@keyframes vbs-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.vbs *,
	.vbs-modal * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

.vbs-error {
	color: var( --vbs-danger );
}

.vbs-notice--editor {
	background: #fff8e5;
	border: 1px dashed #d9b45a;
	border-radius: var( --vbs-radius-sm );
	color: #6b5310;
	font-size: .9375rem;
	padding: .9rem 1rem;
}