/**
 * cv-booking: front-end styles.
 *
 * Mobile first: most seasonal-rental traffic is mobile, so the date picker has
 * to be comfortable under a thumb before it is elegant on a large screen (§10.3).
 *
 * No parallel design system (§10.3). The palette below is READ FROM THE ACTIVE
 * THEME, not invented: navy #011d4a from the header and footer, gold #e0bf6e
 * from the theme's buttons, ink #122223 from the body text, Cormorant Garamond
 * for headings and Jost for copy, and the theme's 50px pill radius on buttons.
 *
 * Every value is a prefixed custom property, so the theme, or an Elementor
 * colour control, overrides any of them without touching this file.
 */

.cvb {
	--cvb-navy: #011d4a;
	--cvb-gold: #e0bf6e;
	--cvb-ink: #122223;

	--cvb-accent: var(--cvb-navy);
	--cvb-text: var(--cvb-ink);
	--cvb-muted: #6b7a7b;
	--cvb-border: #dfe3e4;
	--cvb-surface: #f7f8f8;

	/* Day states. Real, distinguishable colours, a calendar whose states are
	   five shades of the same grey communicates nothing. */
	--cvb-available: #ffffff;
	--cvb-available-border: #dfe3e4;
	--cvb-booked: #e6e9ea;
	--cvb-booked-text: #97a2a3;
	--cvb-blocked: #f0e6e4;
	--cvb-blocked-text: #a08782;
	--cvb-no-arrival: #fbf6ea;
	--cvb-selected: var(--cvb-navy);
	--cvb-selected-text: #ffffff;
	--cvb-range: #eef2f8;
	--cvb-hover: var(--cvb-gold);

	--cvb-radius: 10px;
	--cvb-radius-pill: 50px;
	--cvb-gap: 1rem;
	--cvb-touch: 46px; /* WCAG 2.5.8 target size, with room to breathe. */

	font-family: inherit;
	color: var(--cvb-text);
	line-height: 1.5;

	/* Chosen, not inherited: iOS Safari's default grey flash on every tap of a
	   navy calendar cell reads as a rendering fault. */
	-webkit-tap-highlight-color: rgba(1, 29, 74, 0.15);
}

/* Removes the 300 ms double-tap-zoom wait on every control the booking journey
   is made of. On a calendar, that delay is the whole interaction. */
.cvb-button,
.cvb-day,
.cvb-month__nav {
	touch-action: manipulation;
}

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

/* Headings pick up the theme's display face. */
.cvb h2,
.cvb h3,
.cvb .cvb-month__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	color: var(--cvb-navy);
}

/* ---------------------------------------------------------------- Fields */

.cvb-field-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cvb-gap);
	margin-block: var(--cvb-gap);
}

@media (min-width: 40em) {
	.cvb-field-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cvb-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
}

.cvb-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cvb-muted);
}

.cvb-input {
	font: inherit;
	color: var(--cvb-ink);
	min-height: var(--cvb-touch);
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	background: #fff;
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cvb-input:hover {
	border-color: var(--cvb-gold);
}

.cvb-input:focus,
.cvb-input:focus-visible {
	outline: none;
	border-color: var(--cvb-navy);
	box-shadow: 0 0 0 3px rgba(1, 29, 74, 0.12);
}

.cvb-hint {
	font-size: 0.875rem;
	color: var(--cvb-muted);
	margin-block: 0.25rem 0.875rem;
}

.cvb-notice {
	padding: 0.875rem 1rem;
	border: 1px solid var(--cvb-border);
	border-left: 3px solid var(--cvb-gold);
	border-radius: var(--cvb-radius);
	background: var(--cvb-surface);
	font-size: 0.9375rem;
}

.cvb-error {
	margin-block-start: 0.875rem;
	padding: 0.875rem 1rem;
	border-radius: var(--cvb-radius);
	border: 1px solid #d9b3ad;
	border-left: 3px solid #b4483a;
	background: #fdf5f4;
	color: #8f382d;
	font-size: 0.9375rem;
}

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

.cvb-button {
	font: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	min-height: var(--cvb-touch);
	padding: 0.75rem 2rem;
	border: 1px solid var(--cvb-gold);
	border-radius: var(--cvb-radius-pill);
	background: var(--cvb-gold);
	color: var(--cvb-ink);
	cursor: pointer;
	width: 100%;
	text-align: center;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

@media (min-width: 40em) {
	.cvb-button {
		width: auto;
	}
}

.cvb-button:hover:not(:disabled) {
	background: var(--cvb-navy);
	border-color: var(--cvb-navy);
	color: #fff;
}

.cvb-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cvb-button:focus-visible {
	outline: 2px solid var(--cvb-navy);
	outline-offset: 3px;
}

.cvb-button--ghost {
	background: transparent;
	border-color: var(--cvb-navy);
	color: var(--cvb-navy);
}

.cvb-button--ghost:hover {
	background: var(--cvb-navy);
	color: #fff;
}

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

/* ONE calendar, holding two months and one pair of arrows.
   Two framed months with a pair of arrows each is two calendars side by side:
   the visitor has to work out whether an arrow moves one month or both, and the
   answer changes depending on which pair they press. Here the frame is the
   calendar, the arrows belong to the frame, and the whole window slides. */

.cvb-calendar {
	margin-block: 1rem 1.25rem;
	padding: 1rem 1rem 1.25rem;
	border: 1px solid var(--cvb-border);
	border-radius: 14px;
	background: #fff;
	min-width: 0;
	box-shadow: 0 14px 30px -28px rgba(1, 29, 74, 0.5);
}

.cvb-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-end: 1rem;
	padding-block-end: 0.85rem;
	border-block-end: 1px solid var(--cvb-border);
}

.cvb-calendar__range {
	flex: 1;
	min-width: 0;
	margin: 0;
	text-align: center;
	font-family: var(--cvb-heading-font, "Cormorant Garamond", Georgia, serif);
	font-size: 1.35rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--cvb-navy);
	letter-spacing: 0.01em;
}

.cvb-calendar__range::first-letter {
	text-transform: uppercase;
}

.cvb-calendar__months,
.cvb-form__calendar {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	min-width: 0;
}

.cvb-calendar__months > *,
.cvb-form__calendar > * {
	min-width: 0;
}

/* Side by side only when the column is genuinely wide enough for two grids of
   seven columns each. In the 420px booking card they stay stacked, which is
   what a phone does too. */
@media (min-width: 62em) {
	.cvb-calendar--wide .cvb-calendar__months,
	.cvb-form__calendar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* A month inside the calendar is a section, not a card: the frame is already
   drawn by the calendar around it. */
.cvb-calendar .cvb-month {
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.cvb-calendar .cvb-month__head {
	justify-content: center;
	margin-block-end: 0.6rem;
	padding-block-end: 0;
	border-block-end: 0;
}

.cvb-calendar .cvb-month__title {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: inherit;
	color: var(--cvb-muted);
}

/* A month rendered outside the calendar panel keeps its own frame. */
.cvb-month {
	min-width: 0;
	padding: 1rem;
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	background: #fff;
}

.cvb-month__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block-end: 0.875rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid var(--cvb-border);
}

.cvb-month__title {
	font-weight: 600;
	font-size: 1.375rem;
	margin: 0;
	text-align: center;
	flex: 1;
	text-transform: capitalize;
	letter-spacing: 0.01em;
}

.cvb-month__nav {
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var(--cvb-border);
	border-radius: 50%;
	background: #fff;
	color: var(--cvb-navy);
	cursor: pointer;
	flex: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cvb-month__nav:hover:not(:disabled) {
	background: var(--cvb-navy);
	border-color: var(--cvb-navy);
	color: #fff;
}

.cvb-month__nav:disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

.cvb-month__nav:focus-visible {
	outline: 2px solid var(--cvb-gold);
	outline-offset: 2px;
}

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

.cvb-grid__row {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	min-width: 0;
}

.cvb-grid__weekday {
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--cvb-muted);
	padding-block: 0.375rem 0.5rem;
	text-transform: uppercase;
}

.cvb-grid__weekday abbr {
	text-decoration: none;
	border: 0;
	cursor: help;
}

/* One cell. Buttons and divs share the box so the grid never shifts. */
.cvb-day {
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--cvb-touch);
	padding: 0.3125rem 0.125rem;
	border: 1px solid var(--cvb-available-border);
	border-radius: var(--cvb-radius);
	background: var(--cvb-available);
	color: var(--cvb-ink);
	cursor: pointer;
	text-align: center;
	transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease;

	/* Grid items default to min-width:auto, so the nowrap price below would
	   force the column wider than its 1fr share and push the whole two-month
	   layout past its container. */
	min-width: 0;
	overflow: hidden;
}

.cvb-day__num {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.1;
}

.cvb-day__price {
	font-size: 0.6875rem;
	line-height: 1;
	color: var(--cvb-muted);
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Below this width the price no longer fits a seventh of the row without
   cramping the day number, which matters more. */
@media (max-width: 26em) {
	.cvb-day__price {
		display: none;
	}

	.cvb-day {
		border-radius: 8px;
	}
}

.cvb-day--empty {
	background: transparent;
	border-color: transparent;
	cursor: default;
	min-height: 0;
}

.cvb-day--past,
.cvb-day--unknown {
	background: transparent;
	border-color: transparent;
	color: #c4cccd;
	cursor: not-allowed;
}

.cvb-day--past .cvb-day__price,
.cvb-day--unknown .cvb-day__price {
	color: #d6dcdd;
}

/* Booked: clearly taken, and struck through so the state survives a
   black-and-white print or a colour-blind reader. */
.cvb-day--booked {
	background: var(--cvb-booked);
	border-color: var(--cvb-booked);
	color: var(--cvb-booked-text);
	cursor: not-allowed;
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}

.cvb-day--booked .cvb-day__price {
	color: var(--cvb-booked-text);
	text-decoration: none;
}

/* Blocked: a different hue from booked, because they are different reasons. */
.cvb-day--blocked {
	background: var(--cvb-blocked);
	border-color: var(--cvb-blocked);
	color: var(--cvb-blocked-text);
	cursor: not-allowed;
}

.cvb-day--blocked .cvb-day__price {
	color: var(--cvb-blocked-text);
}

/* Free, but no arrival allowed, a Saturday-only summer, typically.
   Its own state: you may stay through this night, you just cannot start on it.
   Warm tint plus a gold underline, so it never reads as "taken" (§10.2). */
.cvb-day--free.cvb-day--no-arrival {
	background: var(--cvb-no-arrival);
	border-color: #f0e4c8;
	color: #8a7c5d;
	cursor: not-allowed;
	position: relative;
}

.cvb-day--free.cvb-day--no-arrival .cvb-day__price {
	color: #a4977a;
}

.cvb-day--free.cvb-day--no-arrival::after {
	content: "";
	position: absolute;
	inset-inline: 25%;
	inset-block-end: 5px;
	border-block-end: 2px solid var(--cvb-gold);
	border-radius: 2px;
}

button.cvb-day:hover {
	border-color: var(--cvb-gold);
	background: #fffdf7;
	transform: translateY(-1px);
}

button.cvb-day:focus-visible {
	outline: 2px solid var(--cvb-navy);
	outline-offset: 2px;
	z-index: 1;
}

/* Selection states, driven by the script. */
.cvb-day[data-cvb-state="checkin"],
.cvb-day[data-cvb-state="checkout"] {
	background: var(--cvb-selected);
	border-color: var(--cvb-selected);
	color: var(--cvb-selected-text);
	font-weight: 700;
}

.cvb-day[data-cvb-state="checkin"] .cvb-day__price,
.cvb-day[data-cvb-state="checkout"] .cvb-day__price {
	color: var(--cvb-gold);
}

.cvb-day[data-cvb-state="checkin"]::after,
.cvb-day[data-cvb-state="checkout"]::after {
	display: none;
}

.cvb-day[data-cvb-state="in-range"] {
	background: var(--cvb-range);
	border-color: #dbe3ef;
	color: var(--cvb-navy);
}

/* The range under the pointer, before the second click. Lighter than a
   confirmed range on purpose: a provisional answer must not look like a
   decided one. */
.cvb-day[data-cvb-state="preview"] {
	background: #f5f8fc;
	border-color: #e6ecf5;
	color: var(--cvb-navy);
}

.cvb-day[data-cvb-state="preview-end"] {
	background: #fff;
	border-color: var(--cvb-navy);
	border-style: dashed;
	color: var(--cvb-navy);
	font-weight: 700;
}

/* A day the script has ruled out as a departure for the chosen arrival. */
.cvb-day[data-cvb-unselectable="1"] {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* The chosen arrival stays clickable whatever else is switched off: clicking it
   again is the way to undo, and an undo you cannot reach is not an undo. */
.cvb-day[data-cvb-state="checkin"],
.cvb-day[data-cvb-state="checkout"] {
	pointer-events: auto;
	opacity: 1;
}

.cvb-day[data-cvb-state="checkin"]::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 2px rgba(224, 191, 110, 0.55);
	pointer-events: none;
}

.cvb-day[data-cvb-state="checkin"],
.cvb-day[data-cvb-state="checkout"],
.cvb-day[data-cvb-state="preview-end"] {
	position: relative;
}

/* ---------------------------------------------------------------- Legend */

.cvb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--cvb-border);
	border-radius: 10px;
	background: var(--cvb-surface);
	font-size: 0.78rem;
	color: var(--cvb-muted);
}

.cvb-calendar .cvb-legend {
	margin-block-start: 1.1rem;
}

.cvb-legend__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cvb-legend__swatch {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 5px;
	border: 1px solid var(--cvb-available-border);
	flex: none;
	position: relative;
}

.cvb-legend__swatch--free {
	background: var(--cvb-available);
}

.cvb-legend__swatch--booked {
	background: var(--cvb-booked);
	border-color: var(--cvb-booked);
}

.cvb-legend__swatch--blocked {
	background: var(--cvb-blocked);
	border-color: var(--cvb-blocked);
}

.cvb-legend__swatch--no-arrival {
	background: var(--cvb-no-arrival);
	border-color: #f0e4c8;
}

.cvb-legend__swatch--no-arrival::after {
	content: "";
	position: absolute;
	inset-inline: 3px;
	inset-block-end: 3px;
	border-block-end: 2px solid var(--cvb-gold);
}

/* ------------------------------------------------------------ Cart panel */

.cvb-cart {
	margin-block-end: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--cvb-border);
	border-left: 3px solid var(--cvb-gold);
	border-radius: var(--cvb-radius);
	background: var(--cvb-surface);
}

.cvb-cart__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.cvb-cart__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.375rem;
	font-size: 0.9375rem;
}

.cvb-cart__item strong {
	color: var(--cvb-navy);
}

.cvb-cart__total {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--cvb-muted);
}

.cvb-cart__total strong {
	color: var(--cvb-ink);
	font-size: 1.125rem;
}

.cvb-cart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cvb-cart__actions .cvb-button {
	width: auto;
	flex: 1 1 auto;
}

@media (min-width: 30em) {
	.cvb-cart__actions .cvb-button {
		flex: 0 0 auto;
	}
}

/* ----------------------------------------------------------------- Quote */

/* Two blocks. The lines compose the price; the panel underneath states what is
   about to be charged. They are different kinds of statement and they are not
   allowed to look like consecutive rows of the same list. */

.cvb-quote:empty {
	display: none;
}

.cvb-quote {
	margin-block: 1.25rem 1rem;
	border: 1px solid var(--cvb-border);
	border-radius: 14px;
	background: #fff;
	padding: 1.1rem 1.25rem;
	box-shadow: 0 14px 30px -26px rgba(1, 29, 74, 0.5);
}

/* The theme styles every <table> on the site: a 1px grey frame and a 24px
   bottom margin. On a price list sitting inside a card that already has its own
   frame and its own padding, that second frame lands 20px inside the first and
   the figures print hard against it. Reset the element itself, not just its
   cells: a border on the table is not a border on a cell, and clearing one
   leaves the other. */
.cvb-quote__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	border: 0;
	margin: 0;
	background: none;
	table-layout: auto;
}

.cvb-quote__table thead,
.cvb-quote__table tbody,
.cvb-quote__table tfoot,
.cvb-quote__table tr,
.cvb-quote__table caption {
	border: 0;
	background: none;
}

/* And the zebra striping a theme adds to tables it does not know about. */
.cvb-quote__table tr:nth-child(even),
.cvb-quote__table tr:nth-child(odd) {
	background: none;
}

.cvb-quote__table th,
.cvb-quote__table td {
	text-align: start;
	padding: 0.55rem 0;
	vertical-align: top;
	font-weight: 400;
	border: 0;
}

.cvb-quote__table tr + tr th,
.cvb-quote__table tr + tr td {
	border-block-start: 1px solid #f0f2f3;
}

.cvb-quote__table td {
	text-align: end;
	white-space: nowrap;
	padding-inline-start: 1rem;
	font-variant-numeric: tabular-nums;
}

.cvb-quote__basis {
	display: block;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--cvb-muted);
	margin-block-start: 3px;
	font-weight: 400;
}

.cvb-quote__row--accommodation th {
	font-weight: 600;
	color: var(--cvb-ink);
}

.cvb-quote__row--discount th,
.cvb-quote__row--discount td {
	color: #2e7d55;
}

.cvb-quote__row--total th,
.cvb-quote__row--total td {
	border-block-start: 1px solid var(--cvb-navy);
	padding-block-start: 0.85rem;
	font-weight: 700;
	font-size: 1.1875rem;
	color: var(--cvb-navy);
	line-height: 1.2;
}

/* --- What is due now --------------------------------------------------- */

.cvb-quote__due {
	margin-block-start: 1rem;
	padding: 0.95rem 1.05rem;
	border-radius: 12px;
	background: linear-gradient(180deg, #fdf8ec 0%, #fbf4e2 100%);
	border: 1px solid #f0e1bd;
}

.cvb-quote__due-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
}

.cvb-quote__due-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #8a7038;
}

.cvb-quote__due-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--cvb-navy);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cvb-quote__balance-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid rgba(138, 112, 56, 0.22);
	font-size: 0.875rem;
	color: #6f6444;
	font-variant-numeric: tabular-nums;
}

.cvb-quote__note {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #7d7250;
}

.cvb-quote__note--plain {
	color: var(--cvb-muted);
	margin-block-start: 0.75rem;
}

.cvb-quote__loading {
	color: var(--cvb-muted);
	font-size: 0.9375rem;
	margin: 0;
}

/* The button that follows the quote is the end of the journey on this page.
   It gets the full width and the weight that goes with it. */
.cvb-form [data-cvb-submit] {
	width: 100%;
	min-height: 54px;
	font-size: 1.0625rem;
}

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

.cvb-search__form .cvb-field-group {
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.cvb-search--inline .cvb-search__form .cvb-field-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cvb-search__results {
	margin-block-start: 1.5rem;
	display: grid;
	gap: 0.875rem;
}

.cvb-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	background: #fff;
}

.cvb-result__name {
	font-weight: 700;
	margin: 0;
	color: var(--cvb-navy);
}

.cvb-result__meta {
	margin: 0.1875rem 0 0;
	font-size: 0.875rem;
	color: var(--cvb-muted);
}

.cvb-result__price {
	font-size: 1.25rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--cvb-navy);
}

.cvb-result--unavailable {
	background: var(--cvb-surface);
	border-style: dashed;
}

/* ---------------------------------------------------------------- Teaser */

.cvb-teaser {
	padding: 1.5rem;
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	background: var(--cvb-surface);
	display: grid;
	gap: 0.375rem;
}

.cvb-teaser__unit {
	margin: 0;
	font-weight: 700;
	color: var(--cvb-navy);
}

.cvb-teaser__price {
	margin: 0;
	font-size: 1.5rem;
	color: var(--cvb-navy);
}

.cvb-teaser__from,
.cvb-teaser__unit-label {
	font-size: 0.875rem;
	color: var(--cvb-muted);
}

.cvb-teaser__next {
	margin: 0;
	font-size: 0.875rem;
	color: var(--cvb-muted);
}

.cvb-teaser .cvb-button {
	margin-block-start: 0.75rem;
	justify-self: start;
	width: auto;
}

/* ---------------------------------------------------------------- Extras */

.cvb-extras {
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	padding: 0.875rem 1.125rem 1rem;
	margin-block: var(--cvb-gap);
	background: #fff;
}

.cvb-extras legend {
	padding-inline: 0.5rem;
	color: var(--cvb-muted);
}

.cvb-extra {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--cvb-touch);
}

.cvb-extra input {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	accent-color: var(--cvb-navy);
}

.cvb-extra label {
	cursor: pointer;
}

.cvb-extra__price {
	color: var(--cvb-muted);
	font-size: 0.875rem;
}

/* --------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.cvb *,
	.cvb *::before,
	.cvb *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	button.cvb-day:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------ Screen reader */

.cvb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cvb-cart__hint {
	margin-block-end: 0;
}


/* ------------------------------------------------- Property page (fiche) */

/* The whole property page ships here rather than in the page's content, so a
   client editing the page cannot break the layout, and so the palette stays in
   one place. Everything below is scoped to .cvb-fiche. */

.cvb-fiche {
	--cvb-fiche-max: 1180px;

	color: var(--cvb-text);
	font-size: 1rem;

	/* The hero breaks out to 100vw, and 100vw counts the scrollbar: on a
	   desktop with classic scrollbars that is ~8px of horizontal scroll on
	   every page. Clipped on one axis only: `clip` (unlike `hidden`) does not
	   turn this into a scroll container, so the sticky booking card still
	   sticks. */
	overflow-x: clip;
}

.cvb-fiche__wrap {
	max-width: var(--cvb-fiche-max);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Typeface only. Colour is set per element below: the hero sits on a photograph
   and needs white, everything else needs navy, and a single rule here would
   out-specify the hero's own class. */
.cvb-fiche h1,
.cvb-fiche h2,
.cvb-fiche h3,
.cvb-fiche h4 {
	font-family: var(--cvb-heading-font, "Cormorant Garamond", Georgia, serif);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.cvb-fiche .cvb-fiche__h2,
.cvb-fiche .cvb-fiche__h3,
.cvb-fiche .cvb-fiche__h4,
.cvb-fiche .cvb-fiche__card-title {
	color: var(--cvb-navy);
}

/* --- Hero ------------------------------------------------------------- */

/* Full-bleed out of whatever container the theme wraps page content in.
   100vw includes the scrollbar; the two rules cancel each other exactly, so no
   horizontal overflow is introduced. */
.cvb-fiche__hero {
	position: relative;
	width: 100vw;
	margin-inline-start: calc(50% - 50vw);
	margin-block-end: clamp(2rem, 5vw, 3.5rem);
	min-height: clamp(420px, 68vh, 680px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.cvb-fiche__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.cvb-fiche__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Two gradients, not one. The vertical pass anchors the block at the bottom;
	   the horizontal pass keeps the left column dark enough for white text
	   wherever the photograph happens to be bright: here, a white house under a
	   pale sky, which a single bottom-up gradient does not cover. Contrast
	   measured on the worst pixel of the title area, not on the average. */
	background:
		linear-gradient(
			100deg,
			rgba(1, 29, 74, 0.9) 0%,
			rgba(1, 29, 74, 0.78) 38%,
			rgba(1, 29, 74, 0.34) 68%,
			rgba(1, 29, 74, 0.22) 100%
		),
		linear-gradient(
			to top,
			rgba(1, 29, 74, 0.75) 0%,
			rgba(1, 29, 74, 0.1) 55%,
			rgba(1, 29, 74, 0.3) 100%
		);
}

.cvb-fiche__hero-body {
	position: relative;
	width: 100%;
	max-width: var(--cvb-fiche-max);
	margin-inline: auto;
	padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
	color: #fff;
}

.cvb-fiche__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cvb-gold);
}

.cvb-fiche .cvb-fiche__title {
	margin: 0 0 0.9rem;
	color: #fff;
	text-shadow: 0 2px 24px rgba(1, 29, 74, 0.55);
	font-size: clamp(2rem, 5.2vw, 3.75rem);
	line-height: 1.08;
	max-width: 18ch;
	text-wrap: balance;
}

.cvb-fiche__lead {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.88);
}

.cvb-fiche__from {
	margin: 1.25rem 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.8);
}

.cvb-fiche__from strong {
	font-size: 1.5rem;
	color: var(--cvb-gold);
	margin-inline: 0.25rem;
}

.cvb-fiche__cta {
	margin-block-start: 1.5rem;
	display: inline-flex;
	width: auto;
}

/* --- Key figures ------------------------------------------------------ */

.cvb-fiche__stats {
	list-style: none;
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	background: var(--cvb-surface);
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
}

.cvb-fiche__stats li {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	text-align: center;
}

.cvb-fiche__stats strong {
	font-family: var(--cvb-heading-font, "Cormorant Garamond", Georgia, serif);
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--cvb-navy);
	line-height: 1.1;
}

.cvb-fiche__stats span {
	font-size: 0.76rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--cvb-muted);
}

/* --- Two-column layout ------------------------------------------------ */

.cvb-fiche__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 1024px) {
	.cvb-fiche__layout {
		grid-template-columns: minmax(0, 1fr) 420px;
	}

	.cvb-fiche__aside {
		position: sticky;
		top: 24px;
	}
}

.cvb-fiche__main,
.cvb-fiche__aside {
	min-width: 0;
}

.cvb-fiche__section {
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.cvb-fiche__section > p {
	margin: 0 0 1rem;
	line-height: 1.75;
	color: #3d4b4c;
	max-width: 68ch;
}

.cvb-fiche__h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	line-height: 1.2;
	text-wrap: balance;
}

.cvb-fiche__h3 {
	margin: 2rem 0 1rem;
	font-size: 1.35rem;
}

.cvb-fiche__h4 {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
}

.cvb-fiche__sub {
	margin: 0 0 1.5rem;
	color: var(--cvb-muted);
	max-width: 68ch;
	line-height: 1.7;
}

.cvb-fiche__closing {
	font-style: italic;
	color: var(--cvb-muted);
}

.cvb-fiche__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.cvb-fiche__list li {
	position: relative;
	padding-inline-start: 1.35rem;
	margin-block-end: 0.45rem;
	line-height: 1.6;
	color: #3d4b4c;
}

.cvb-fiche__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cvb-gold);
}

.cvb-fiche__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.5rem;
}

.cvb-fiche__col {
	min-width: 0;
	padding: 1.25rem;
	border: 1px solid var(--cvb-border);
	border-radius: var(--cvb-radius);
	background: #fff;
}

/* --- Amenities -------------------------------------------------------- */

.cvb-fiche__amenities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.9rem 1.5rem;
}

.cvb-fiche__amenities li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	color: #3d4b4c;
}

.cvb-fiche__amenities img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	flex: 0 0 auto;
	opacity: 0.85;
}

/* --- Gallery ---------------------------------------------------------- */

.cvb-fiche__gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0.75rem;
}

.cvb-fiche__gallery li {
	min-width: 0;
	overflow: hidden;
	border-radius: var(--cvb-radius);
}

.cvb-fiche__gallery img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.cvb-fiche__gallery li:hover img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.cvb-fiche__gallery img {
		transition: none;
	}

	.cvb-fiche__gallery li:hover img {
		transform: none;
	}
}

/* --- Booking card ----------------------------------------------------- */

.cvb-fiche__card {
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--cvb-border);
	border-radius: 16px;
	box-shadow: 0 18px 40px -28px rgba(1, 29, 74, 0.45);
	scroll-margin-top: 90px;
}

.cvb-fiche__card-title {
	margin: 0 0 0.35rem;
	font-size: 1.5rem;
}

.cvb-fiche__card-next {
	margin: 0 0 1.25rem;
	font-size: 0.85rem;
	color: var(--cvb-muted);
}

/* Inside the card the form is already framed; drop its own frame. */
.cvb-fiche__card .cvb-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* The month grid has to survive a 420px column. */
@media (min-width: 1024px) {
	.cvb-fiche__card .cvb-form__calendar {
		grid-template-columns: 1fr;
	}
}

/* --- Sub-units -------------------------------------------------------- */

.cvb-fiche__section--units {
	margin-block-start: clamp(2.5rem, 6vw, 4rem);
	padding-block-start: clamp(2rem, 5vw, 3rem);
	border-block-start: 1px solid var(--cvb-border);
}

.cvb-fiche__units {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(1.5rem, 3vw, 2rem);
}

.cvb-fiche__unit {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: #fff;
	border: 1px solid var(--cvb-border);
	border-radius: 16px;
	scroll-margin-top: 90px;
}

.cvb-fiche__unit .cvb-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.cvb-fiche__unit .cvb-form__calendar {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------ Unit chooser and dates */

/* Everything in this block exists because the form now asks three questions
   in one place: which lodging, which dates, how many people. The order is
   deliberate. Dates chosen before the lodging would have to be thrown away the
   moment the lodging changes, and a form that discards work the visitor has
   already done is a form they do not finish. */

.cvb-units {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
	min-width: 0;
}

.cvb-units > .cvb-label {
	display: block;
	padding: 0;
	margin-block-end: 0.625rem;
}

.cvb-units__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

.cvb-unit {
	position: relative;
	display: block;
	min-width: 0;
	cursor: pointer;
}

/* The radio is not hidden with display:none, which would take it out of the
   keyboard order. It is transparent and stretched over its own label, so the
   whole card is the hit target and the focus ring still lands somewhere real. */
.cvb-unit__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.cvb-unit__body {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name  price"
		"meta  price";
	align-items: center;
	gap: 0.1rem 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--cvb-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cvb-unit__name {
	grid-area: name;
	font-weight: 600;
	color: var(--cvb-navy);
	line-height: 1.25;
}

.cvb-unit__meta {
	grid-area: meta;
	font-size: 0.8125rem;
	color: var(--cvb-muted);
}

.cvb-unit__price {
	grid-area: price;
	font-size: 0.8125rem;
	color: var(--cvb-muted);
	text-align: end;
	white-space: nowrap;
}

.cvb-unit__input:hover + .cvb-unit__body {
	border-color: var(--cvb-gold);
}

.cvb-unit__input:focus-visible + .cvb-unit__body {
	outline: 2px solid var(--cvb-navy);
	outline-offset: 2px;
}

.cvb-unit__input:checked + .cvb-unit__body {
	border-color: var(--cvb-navy);
	box-shadow: inset 0 0 0 1px var(--cvb-navy);
	background: #fbfcfe;
}

.cvb-unit__input:checked + .cvb-unit__body .cvb-unit__price {
	color: var(--cvb-ink);
	font-weight: 600;
}

/* --- The two date chips ------------------------------------------------ */

.cvb-dates {
	margin-block-end: 0.75rem;
}

.cvb-dates__chips {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.cvb-chip {
	font: inherit;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label clear"
		"value clear";
	align-items: center;
	gap: 0 0.5rem;
	min-height: var(--cvb-touch);
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--cvb-border);
	border-radius: 12px;
	background: #fff;
	color: var(--cvb-ink);
	text-align: start;
	cursor: default;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cvb-chip__label {
	grid-area: label;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cvb-muted);
}

.cvb-chip__value {
	grid-area: value;
	font-size: 0.9375rem;
	line-height: 1.25;
	color: var(--cvb-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cvb-chip__clear {
	grid-area: clear;
	display: none;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--cvb-muted);
}

.cvb-chip--set {
	border-color: var(--cvb-navy);
	cursor: pointer;
}

.cvb-chip--set .cvb-chip__value {
	color: var(--cvb-navy);
	font-weight: 600;
}

/* French keeps weekday and month names lowercase. Only the opening letter is
   raised, which is a line beginning, not a title. */
.cvb-chip--set .cvb-chip__value::first-letter {
	text-transform: uppercase;
}

.cvb-chip--set .cvb-chip__clear {
	display: block;
}

.cvb-chip--set:hover {
	background: #fbfcfe;
	border-color: var(--cvb-gold);
}

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

.cvb-chip:disabled {
	cursor: default;
}

.cvb-dates__nights {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cvb-navy);
	min-height: 1.2em;
}

.cvb-dates__clear {
	font: inherit;
	font-size: 0.8125rem;
	margin-block-start: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cvb-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.cvb-dates__clear:hover {
	color: var(--cvb-navy);
}

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

/* --- The native inputs, once the grid has taken over ------------------- */

/* Hidden, not removed. They still carry the values the grid produces, and
   with the script absent this rule never applies, so they are the picker. */
.cvb-form--js .cvb-fallback {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.cvb-form--js .cvb-units noscript {
	display: none;
}

/* A month being refetched after a change of lodging. */
.cvb-form__calendar[aria-busy="true"],
.cvb-month[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}