/*
Theme Name: Sun and Sea Booking
Template: twentytwentyfive
Description: book.sunandseavillas.com: the booking engine only. The marketing site holds everything about the villas; this carries its colours, type and logo so the hand-off feels like the same place.
Author: ConchShell Designs
Version: 0.5.1
Requires at least: 6.5
Text Domain: sunandsea-book
*/

/* =============================================================================
   Tokens: the marketing site's (Sun and Sea Villas/src/styles/global.css),
   after its 30 Oct redesign: a porcelain ground, Freight type, the ocean
   gradient for actions, hairlines rather than boxes (Marvin, 30 Oct 2026).
   ============================================================================= */
:root {
	--ink: #13242a;
	--porcelain: #fbfaf7;
	--sand: #f2eee6;
	--white: #ffffff;
	--sea-bright: #0cc0df;
	/* The redesign's ocean: text-grade teal, the solid fill, a quiet wash. */
	--sea: #0f6f79;
	--sea-wash: #eaf4f4;
	--sea-deep: #0d6670;
	--sun-bright: #fad02c;
	--sun-wash: #fdf3d0;

	/* Small text on it passes 4.5:1 (buttons, discs, the villa panel). */
	--ocean:
		radial-gradient(40% 120% at 18% 0%, rgba(19, 129, 138, 0.9) 0%, rgba(19, 129, 138, 0) 70%),
		linear-gradient(115deg, #0a5862 0%, #0d6670 28%, #13818a 44%, #0d6670 58%, #0a5862 78%, #0c6069 100%);

	/* Closer to white than the marketing site's porcelain (Marvin, 30 Oct). */
	--ground: #fefdfb;
	--text-muted: color-mix(in srgb, var(--ink) 64%, transparent);
	--hairline: color-mix(in srgb, var(--ink) 12%, transparent);
	--field-line: color-mix(in srgb, var(--ink) 16%, transparent);
	--accent-bright: var(--sea-bright);

	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--fs-small: 0.875rem;

	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--gutter: clamp(1rem, 5vw, 2rem);
	--container: 70rem;
	--card-pad: clamp(1.25rem, 3vw, 2rem);
	--gap: clamp(1rem, 2vw, 1.5rem);

	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.25rem;
	--radius-pill: 999px;
	--shadow-card: none;
	--nav-height: 4.25rem;
}

/* Sun Villa warm, Sea Villa cool, the whole property both (the brand's duality). */
.ss-accent-sun {
	--accent-bright: var(--sun-bright);
}

/* Georgia, scaled to Freight Display's proportions, until the kit lands
   (the marketing site's stand-in). */
@font-face {
	font-family: 'Freight Fallback';
	src: local('Georgia');
	size-adjust: 87.8%;
	ascent-override: 111.6%;
	descent-override: 30.8%;
	line-gap-override: 0%;
}

body {
	background: var(--ground);
	-webkit-font-smoothing: antialiased;
	/* Freight Sans runs small: size it, and its stand-in, by x-height, as
	   the marketing site does. Display type resets it (below). The kit has
	   no bold Freight Display, so never fake one. */
	font-size-adjust: 0.5;
	font-synthesis: none;
	/* Dates and prices read better in even, lining figures (Freight's
	   default figures have descenders). */
	font-variant-numeric: lining-nums;
}

:is(h1, h2, .ss-page__content h2, .mphb_sc_checkout-form :is(h3, h4), .mphb_sc_payment_request_checkout-wrapper :is(h3, h4), h2.mphb-room-type-title, .ss-brand__main, .ss-villa-card__name, .ss-villa-card__price strong, .ss-stepper__count, .ss-month-picker, .ss-summary__villa, .mphb-total-price-field, .mphb-price-breakdown-total .mphb-price, .ss-villa .mphb-period-price .mphb-price, .ss-villa .mphb-calendar .datepick-month-header select, .ss-villa .mphb-check-in-date-wrapper input, .ss-villa .mphb-check-out-date-wrapper input) {
	font-size-adjust: none;
}

/* The footer stays at the foot of short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

:where(a) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--sea);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

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

.ss-icon {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* One card style for every block of the booking. */
.mphb_sc_search-wrapper,
.mphb-booking-details,
.mphb-customer-details,
.ss-summary,
.ss-policy,
.mphb-room-type,
.fygaro-payment-status,
.mphb_sc_payment_request_checkout-wrapper form > section,
.ss-prose .ss-page__content {
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

/* =============================================================================
   Header: the logo, and the way back to the marketing site. Then the steps.
   ============================================================================= */
.ss-nav {
	height: var(--nav-height);
	border-bottom: 1px solid var(--hairline);
}

.ss-nav__inner,
.ss-steps__list {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.ss-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	height: 100%;
}

.ss-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	text-decoration: none;
}

.ss-brand img {
	width: 48px;
	height: 34px;
}

.ss-brand__word {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.ss-brand__main {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
}

.ss-brand__sub {
	margin-top: 0.2rem;
	font-size: 0.5625rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ss-nav__back {
	white-space: nowrap;
	font-size: var(--fs-small);
	color: var(--text-muted);
	text-decoration: none;
}

.ss-nav__back:hover {
	color: var(--sea);
	text-decoration: underline;
}

/* Narrow phones: the logo mark alone (the link keeps its name for screen
   readers), so the way back to the marketing site stays on one line. */
@media (max-width: 25rem) {
	.ss-brand__word {
		display: none;
	}
}

/* Steps: numbered circles joined by a line; on a phone only the current
   step keeps its label. */
.ss-steps {
	border-bottom: 1px solid var(--hairline);
}

.ss-steps__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-block: 0;
	padding-block: 0.9rem;
	list-style: none;
}

.ss-steps__step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	white-space: nowrap;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--text-muted);
}

.ss-steps__step + .ss-steps__step::before {
	content: '';
	width: clamp(1.25rem, 6vw, 5rem);
	height: 1px;
	margin-right: 0.15rem;
	background: var(--field-line);
}

.ss-steps__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--field-line);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-muted);
}

.ss-steps__num .ss-icon {
	width: 1rem;
	height: 1rem;
	stroke-width: 2.4;
}

.is-current .ss-steps__num {
	background: var(--sea-deep);
	background-image: var(--ocean);
	box-shadow: none;
	color: var(--white);
}

.is-done .ss-steps__num {
	background: var(--sea-deep);
	box-shadow: none;
	color: var(--white);
}

.is-current {
	font-weight: 600;
	color: var(--ink);
}

@media (max-width: 40rem) {
	.ss-steps__step:not(.is-current) .ss-steps__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* =============================================================================
   Page: a bold title, one line under it, then the cards.
   ============================================================================= */
.ss-page {
	padding-top: clamp(1.75rem, 5vw, 3rem);
	padding-bottom: clamp(3rem, 8vw, 5rem);
}

.ss-page > *,
.ss-page__content > * {
	max-width: var(--container) !important;
}

.ss-page__title {
	margin-bottom: 0.4rem;
	font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
	font-weight: 500;
	letter-spacing: -0.015em;
}

.ss-page__content {
	margin-top: 0 !important;
}

.ss-page__content > p:first-child {
	margin-top: 0;
	margin-left: 0 !important;
	font-size: var(--wp--preset--font-size--lead);
	color: var(--text-muted);
	max-width: 40rem !important;
}

.ss-page__content h2 {
	margin-top: var(--space-xl);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	font-family: var(--font-display);
	font-weight: 500;
}

.ss-page__content > :is(ul, ol) {
	padding-left: 1.2rem;
}

.ss-page__content > :is(ul, ol) li + li {
	margin-top: 0.5rem;
}

/* Prose pages (the terms): one reading-width card. */
.ss-prose .ss-page > *,
.ss-prose .ss-page__content > * {
	max-width: 46rem !important;
}

.ss-prose .ss-page__content {
	box-sizing: border-box;
	margin-top: var(--space-md) !important;
	padding: var(--card-pad) !important;
}

.ss-prose .ss-page__content > h2:first-of-type {
	margin-top: var(--space-lg);
}

/* =============================================================================
   Buttons: pills, as on the marketing site.
   ============================================================================= */
.mphb_sc_search-form input[type='submit'],
.mphb-book-button,
.mphb-view-details-button,
.mphb_sc_checkout-submit-wrapper input[type='submit'],
.mphb_sc_payment_request_checkout-wrapper input[type='submit'] {
	display: inline-flex;
	box-sizing: border-box;
	white-space: nowrap;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--sea-deep);
	background-image: var(--ocean);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.2s;
}

.mphb_sc_search-form input[type='submit']:hover,
.mphb-book-button:hover,
.mphb-view-details-button:hover,
.mphb_sc_checkout-submit-wrapper input[type='submit']:hover,
.mphb_sc_payment_request_checkout-wrapper input[type='submit']:hover {
	filter: saturate(1.1) brightness(0.9);
	color: var(--white);
}

:is(.mphb_sc_checkout-submit-wrapper, .mphb_sc_payment_request_checkout-wrapper) input[type='submit'] {
	width: 100%;
	min-height: 56px;
	font-size: 1.0625rem;
}

/* =============================================================================
   Fields: sentence-case labels above roomy inputs.
   ============================================================================= */
:is(.mphb_sc_search-form, .mphb_sc_checkout-form, .mphb_sc_payment_request_checkout-wrapper) label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
}

:is(.mphb_sc_search-form, .mphb_sc_checkout-form) abbr {
	text-decoration: none;
	color: var(--sea);
}

:is(.mphb_sc_search-form, .mphb_sc_checkout-form, .mphb_sc_payment_request_checkout-wrapper) :is(input[type='text'], input[type='email'], input[type='tel'], select, textarea) {
	width: 100%;
	min-height: 52px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-md);
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 1rem;
	box-sizing: border-box;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mphb_sc_checkout-form textarea {
	min-height: 7rem;
	resize: vertical;
}

:is(.mphb_sc_search-form, .mphb_sc_checkout-form, .mphb_sc_payment_request_checkout-wrapper) :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--sea);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 22%, transparent);
}

:is(.mphb_sc_search-form, .mphb_sc_checkout-form) select[name] {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313242a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
}

/* The date fields open a calendar: show it. */
.mphb_sc_search-form input.mphb-datepick {
	padding-left: 2.85rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23077387' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.95rem center;
}

/* =============================================================================
   Search: one card. One row on wide screens, two columns on a phone.
   ============================================================================= */
.mphb_sc_search-wrapper {
	margin-top: var(--space-md);
	padding: var(--card-pad);
}

.mphb_sc_search-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
	align-items: end;
}

.mphb_sc_search-form p {
	margin: 0;
}

.mphb_sc_search-form :is(.mphb-required-fields-tip, br) {
	display: none;
}

.mphb_sc_search-submit-button-wrapper {
	grid-column: 1 / -1;
}

.mphb_sc_search-submit-button-wrapper input[type='submit'] {
	width: 100%;
	min-height: 52px;
}

@media (min-width: 48rem) {
	.mphb_sc_search-form {
		grid-template-columns: 1.35fr 1.35fr 0.75fr 0.75fr auto;
	}

	.mphb_sc_search-submit-button-wrapper {
		grid-column: auto;
	}
}

/* =============================================================================
   Villa list (booking home and search results): one card per villa.
   Photo, name, sleeps and beds, price, Book.
   ============================================================================= */
.mphb_sc_rooms-wrapper,
.mphb_sc_search_results-wrapper {
	display: grid;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

.mphb-room-type {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	grid-template-areas:
		'photo name'
		'photo specs'
		'photo price'
		'book book';
	column-gap: var(--space-sm);
	row-gap: 0.3rem;
	align-items: center;
	margin: 0 !important;
	padding: var(--space-sm) !important;
}

@media (min-width: 40rem) {
	.mphb-room-type {
		grid-template-columns: 8rem minmax(0, 1fr) auto;
		grid-template-areas:
			'photo name book'
			'photo specs book'
			'photo price book';
		column-gap: var(--space-md);
		padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm) !important;
	}
}

.mphb-room-type > * {
	margin: 0 !important;
}

.mphb-room-type > :not(.mphb-loop-room-thumbnail, .mphb-room-type-title, .mphb-loop-room-type-attributes, .mphb-regular-price, .mphb-price-for-dates, .mphb-to-book-btn-wrapper, .mphb-reserve-room-section, .mphb-view-details-button-wrapper) {
	display: none;
}

.mphb-loop-room-thumbnail {
	grid-area: photo;
	align-self: start;
}

.mphb-loop-room-thumbnail img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius-md);
}

@media (min-width: 40rem) {
	.mphb-loop-room-thumbnail img {
		aspect-ratio: 4 / 3;
	}
}

h2.mphb-room-type-title {
	grid-area: name;
	align-self: end;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.2;
}

h2.mphb-room-type-title::before {
	content: '';
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--accent-bright);
}

.ss-accent-both h2.mphb-room-type-title::before {
	background: linear-gradient(90deg, var(--sun-bright) 50%, var(--sea-bright) 50%);
}

.mphb-loop-room-type-attributes {
	grid-area: specs;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	padding: 0;
	list-style: none;
	font-size: var(--fs-small);
}

.mphb-loop-room-type-attributes li {
	margin: 0;
}

.mphb-attribute-title {
	margin-right: 0.25rem;
	color: var(--text-muted);
}

/* The price, as a quiet line. */
:is(.mphb-regular-price, .mphb-price-for-dates) {
	grid-area: price;
	justify-self: start;
	align-self: start;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

:is(.mphb-regular-price, .mphb-price-for-dates) strong {
	font-weight: 430;
}

.mphb-room-type .mphb-price {
	font-weight: 600;
	color: var(--ink);
}

.mphb-price-period {
	border: 0 !important;
	text-decoration: none !important;
}

:is(.mphb-to-book-btn-wrapper, .mphb-reserve-room-section, .mphb-view-details-button-wrapper) {
	grid-area: book;
	align-self: center;
	margin-top: var(--space-sm) !important;
}

@media (min-width: 40rem) {
	:is(.mphb-to-book-btn-wrapper, .mphb-reserve-room-section, .mphb-view-details-button-wrapper) {
		margin-top: 0 !important;
	}
}

:is(.mphb-to-book-btn-wrapper, .mphb-reserve-room-section) form {
	margin: 0;
}

.mphb-room-type :is(.mphb-book-button, .mphb-view-details-button) {
	width: 100%;
	padding-inline: 2rem;
}

.mphb-rooms-reservation-message-wrapper,
.mphb-reservation-cart {
	display: none;
}

.mphb_sc_search_results-info {
	margin: var(--space-lg) 0 0;
	font-weight: 600;
}

/* =============================================================================
   Request to book, as a checkout: who's staying and your details on the
   left; the summary, the send button and the cancellation policy on the
   right. On a phone the summary comes first.
   ============================================================================= */
.mphb_sc_checkout-form {
	display: grid;
	gap: var(--gap);
	margin-top: var(--space-md);
}

.mphb_sc_checkout-form > * {
	margin: 0 !important;
}

.mphb_sc_checkout-form > .ss-summary {
	order: -2;
}

.mphb_sc_checkout-form > :is(.ss-back, .mphb-customer-details) {
	order: -1;
}

.mphb_sc_checkout-form > .ss-back {
	order: -3;
}

/* Back to the date page. */
.ss-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

.ss-back__arrow {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--field-line);
	border-radius: 50%;
	background: var(--white);
}

.ss-back__arrow::before {
	content: '';
	width: 0.5rem;
	height: 0.5rem;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: translateX(0.1rem) rotate(45deg);
}

.ss-back__link:hover {
	color: var(--sea);
}

.ss-back__link:hover .ss-back__arrow {
	border-color: var(--sea);
}

/* Only the ways to pay are left in MotoPress's booking details. */
.mphb-booking-details.ss-no-choice {
	display: none;
}

.mphb-room-details .mphb-rate-chooser h4 {
	display: none;
}

.mphb_sc_checkout-form > :is(.mphb-checkout-terms-wrapper, .mphb_sc_checkout-submit-wrapper) {
	order: 1;
}

.mphb-booking-details,
.mphb-customer-details {
	padding: var(--card-pad);
}

.mphb_sc_checkout-form :is(h3, h4) {
	margin: 0 0 var(--space-md);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.mphb_sc_checkout-form p {
	margin: 0 0 var(--space-sm);
}

.mphb-reserve-rooms-details {
	margin: 0;
	padding: 0;
	border: 0;
}

.mphb-room-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-sm);
}

.mphb-room-details > :is(.mphb-guest-name-wrapper, .mphb-rate-chooser) {
	grid-column: 1 / -1;
}

.mphb-room-details > .mphb-rate-chooser {
	margin: 0;
}

.mphb-room-details .mphb-rate-chooser .mphb-room-rate-variant:last-child {
	margin-bottom: 0 !important;
}

/* The two ways to pay, as cards. */
.mphb-room-rate-variant {
	position: relative;
	margin: 0 0 var(--space-xs) !important;
	padding: var(--space-sm) var(--space-sm) var(--space-sm) 3rem;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-md);
	font-size: var(--fs-small);
	color: var(--text-muted);
	cursor: pointer;
}

.mphb-room-rate-variant:has(input:checked) {
	border-color: var(--sea);
	background: var(--sea-wash);
	box-shadow: inset 0 0 0 1px var(--sea);
}

.mphb-room-rate-variant input[type='radio'] {
	position: absolute;
	left: 1.1rem;
	top: 1.15rem;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--sea);
}

.mphb-room-rate-variant label {
	margin: 0 0 0.35rem;
	font-size: 1rem;
	color: var(--ink);
	cursor: pointer;
}

.mphb-room-rate-variant strong {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.35rem;
	font-weight: 600;
}

.ss-rate-title {
	flex: 1 1 auto;
	margin-right: 0.65rem;
}

.mphb-room-rate-variant br {
	display: none;
}

.ss-rate-total {
	font-weight: 400;
	color: var(--text-muted);
}

.ss-rate-total .mphb-price {
	font-weight: 600;
	color: var(--ink);
}

.mphb-customer-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-sm);
}

.mphb-customer-details > :is(h3, .mphb-required-fields-tip, .mphb-customer-email, .mphb-customer-note, .ss-lead-guest) {
	grid-column: 1 / -1;
}

/* Name first, then the lead guest box, then the rest. */
.mphb-customer-details > :is(h3, .mphb-required-fields-tip) {
	order: -2;
}

.mphb-customer-details > :is(.mphb-customer-name, .mphb-customer-last-name) {
	order: -1;
}

.ss-lead-guest {
	margin: -0.25rem 0 var(--space-sm);
}

.ss-lead-guest p {
	margin: 0 !important;
}

.ss-lead-guest__toggle label {
	position: relative;
	padding-left: 1.75rem;
	font-size: 0.9375rem !important;
	font-weight: 400 !important;
	color: var(--text-muted) !important;
	cursor: pointer;
}

.ss-lead-guest__toggle input {
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--sea);
}

.ss-lead-guest__name {
	margin-top: var(--space-sm) !important;
}

.ss-lead-guest:not(:has(#ss-not-lead-guest:checked)) .ss-lead-guest__name {
	display: none;
}

.mphb-customer-details > h3 {
	margin-bottom: 0.25rem !important;
}

.mphb-customer-details br {
	display: none;
}

.mphb-required-fields-tip {
	margin-bottom: var(--space-md) !important;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

@media (max-width: 30rem) {
	.mphb-room-details,
	.mphb-customer-details {
		grid-template-columns: 1fr;
	}

	.mphb-room-details > *,
	.mphb-customer-details > * {
		grid-column: 1 / -1;
	}
}

/* The summary: the villa's photo with its name, the dates, then the price. */
.ss-summary {
	padding: 0.5rem 0.5rem var(--card-pad);
	overflow: hidden;
}

.ss-summary__photo {
	position: relative;
	margin: 0 0 var(--space-sm);
}

.ss-summary__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: calc(var(--radius-lg) - 0.35rem);
}

.ss-summary__photo::after {
	content: '';
	position: absolute;
	inset: 45% 0 0;
	border-radius: 0 0 calc(var(--radius-lg) - 0.35rem) calc(var(--radius-lg) - 0.35rem);
	background: linear-gradient(transparent, rgba(19, 36, 42, 0.6));
}

.ss-summary__villa {
	position: absolute;
	left: 1rem;
	bottom: 0.9rem;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 500;
	line-height: 1.1;
	color: var(--white);
}

.ss-summary__villa::before {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--accent-bright);
}

.ss-accent-both .ss-summary__villa::before {
	background: linear-gradient(90deg, var(--sun-bright) 50%, var(--sea-bright) 50%);
}

.ss-summary__body {
	padding-inline: calc(var(--card-pad) - 0.5rem);
}

.ss-summary__facts {
	display: grid;
	gap: var(--space-sm);
	margin-top: var(--space-md);
	margin-bottom: 0;
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--hairline);
}

.ss-summary__facts > div {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	column-gap: 0.85rem;
}

.ss-summary__facts dt {
	display: contents;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.ss-summary__facts dt .ss-icon {
	grid-row: span 2;
	margin-top: 0.1rem;
	color: var(--sea);
}

.ss-summary__facts dd {
	grid-column: 2;
	margin: 0.1rem 0 0;
	font-weight: 600;
}

.ss-summary h4.mphb-price-breakdown-title {
	margin: var(--space-md) 0 var(--space-xs);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--text-muted);
}

/* Price: a quiet table with a large total. */
.mphb-price-breakdown {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.mphb-price-breakdown :is(th, td) {
	padding: 0.45rem 0;
	border: 0;
	text-align: left;
	font-weight: 400;
	background: none;
}

.mphb-price-breakdown .mphb-table-price-column,
.mphb-price-breakdown :is(td, th):last-child:not(:first-child) {
	text-align: right;
}

.mphb-price-breakdown .mphb-price {
	font-weight: 600;
}

.mphb-price-breakdown-total :is(th, td) {
	padding-top: var(--space-md);
	border-top: 1px solid var(--hairline);
	font-size: 1.0625rem;
	font-weight: 600;
	vertical-align: baseline;
}

.mphb-price-breakdown-total .mphb-price {
	font-family: var(--font-display);
	font-size: 2.125rem;
	font-weight: 500;
	color: var(--sea);
}

.mphb-price-breakdown-expand {
	color: var(--ink);
	text-decoration: none;
}

.mphb-price-breakdown-expand .mphb-inner-icon {
	display: inline-grid;
	place-items: center;
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.45rem;
	border: 1px solid var(--field-line);
	border-radius: 50%;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--text-muted);
}

.mphb-price-breakdown-expand .mphb-inner-icon.mphb-hide {
	display: none;
}

.mphb-price-breakdown-rate {
	margin-top: 0.2rem;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* On the request form the price table already shows the total. (The balance
   page shares the form's classes and needs its amount to pay, so not there.) */
.mphb_sc_checkout-form:not(.mphb_sc_payment_request_checkout-form) .mphb-total-price {
	display: none !important;
}

.mphb-total-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--space-md) var(--card-pad);
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	font-weight: 600;
}

.mphb-total-price output {
	display: contents;
}

.mphb-total-price-field {
	font-family: var(--font-display);
	font-size: 2.125rem;
	font-weight: 500;
	color: var(--sea);
}

/* The agreement and the send button: one card. */
.mphb-terms-and-conditions {
	display: none;
}

.mphb-checkout-terms-wrapper {
	padding: var(--card-pad) var(--card-pad) var(--space-md) !important;
	background: var(--white) !important;
	border: 1px solid var(--hairline) !important;
	border-bottom: 0 !important;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper {
	margin-top: calc(-1 * var(--gap)) !important;
	padding: 0 var(--card-pad) var(--card-pad);
	background: var(--white);
	border: 1px solid var(--hairline);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.mphb-terms-and-conditions-accept {
	margin: 0 !important;
}

.mphb-terms-and-conditions-accept label {
	position: relative;
	margin: 0;
	padding-left: 1.9rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}

.mphb-terms-and-conditions-accept input {
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--sea);
}

.mphb-errors-wrapper:not(.mphb-hide) {
	margin-top: var(--space-sm) !important;
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	background: #fdecec;
	color: #8a1c1c;
}

/* Cancellations: a quiet note under the button, not another box. */
.ss-policy {
	display: flex;
	gap: 0.85rem;
	padding: var(--space-sm) var(--space-xs);
	background: none;
	border: 0;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.ss-policy > .ss-icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--sea);
}

.ss-policy h3 {
	margin: 0.1rem 0 0.4rem !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--ink);
}

.ss-policy p {
	margin: 0 0 0.5rem !important;
}

.ss-policy a {
	font-weight: 600;
	color: var(--sea);
}

@media (min-width: 56rem) {
	.mphb_sc_checkout-form {
		grid-template-columns: minmax(0, 1fr) 24rem;
		/* Two independent stacks in one grid: the summary spans the first two
		   rows so the left column's cards sit flush, and the last row takes
		   any extra height. */
		grid-template-rows: auto auto auto auto auto auto 1fr;
		column-gap: var(--space-lg);
		align-items: start;
	}

	.mphb_sc_checkout-form > .ss-back { grid-column: 1 / -1; grid-row: 1; }
	.mphb_sc_checkout-form > .mphb-customer-details { grid-column: 1; grid-row: 2; }
	.mphb_sc_checkout-form > .mphb-booking-details { grid-column: 1; grid-row: 3 / -1; }
	.mphb_sc_checkout-form > .ss-summary { grid-column: 2; grid-row: 2 / span 2; }
	.mphb_sc_checkout-form > .mphb-checkout-terms-wrapper { grid-column: 2; grid-row: 4; }
	.mphb_sc_checkout-form > .mphb_sc_checkout-submit-wrapper { grid-column: 2; grid-row: 5; }
	.mphb_sc_checkout-form > .ss-policy { grid-column: 2; grid-row: 6; }
}

/* After sending: one calm confirmation. */
.mphb_sc_checkout-wrapper:has(.mphb_sc_checkout-success-reservation-message) {
	max-width: 40rem;
	margin-top: var(--space-md);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
}

/* After paying: the plugin's status message, as one card. */
.fygaro-payment-status {
	max-width: 40rem;
	margin-top: var(--space-md);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* =============================================================================
   Pay your balance (Payment Request): the same checkout. Payments so far and
   how you'll pay on the left; the summary, the amount and the button on the
   right.
   ============================================================================= */
.mphb_sc_payment_request_checkout-wrapper form > section:not(.ss-summary) {
	padding: var(--card-pad);
}

.mphb_sc_payment_request_checkout-wrapper :is(h3, h4):not(.mphb-price-breakdown-title) {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
}

.mphb-payments-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.mphb-payments-table :is(th, td) {
	padding: 0.5rem 0;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	text-align: left;
	font-weight: 400;
	background: none;
}

.mphb-payments-table :is(th, td):last-child {
	text-align: right;
}

.mphb-payments-table thead th {
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.mphb-payments-table tfoot tr:last-child th {
	border-bottom: 0;
	font-weight: 600;
}

.mphb-payments-table.ss-no-payments :is(thead, tbody) {
	display: none;
}

.mphb_sc_payment_request_checkout-form > .mphb-total-price {
	order: 1;
	border-bottom: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: none;
}

@media (min-width: 56rem) {
	.mphb_sc_payment_request_checkout-form > .mphb-payment-history { grid-column: 1; grid-row: 1; }
	.mphb_sc_payment_request_checkout-form > .mphb-billing-fields-wrapper { grid-column: 1; grid-row: 2 / -1; }
	.mphb_sc_payment_request_checkout-form > .ss-summary { grid-column: 2; grid-row: 1 / span 2; }
	.mphb_sc_payment_request_checkout-form > .mphb-total-price { grid-column: 2; grid-row: 3; }
	.mphb_sc_payment_request_checkout-form > .mphb_sc_checkout-submit-wrapper { grid-column: 2; grid-row: 4; }
	.mphb_sc_payment_request_checkout-form > .mphb-errors-wrapper { grid-column: 2; grid-row: 5; }
}

/* =============================================================================
   A villa's date page: the villa at a glance, the arrival and departure,
   an open calendar, the guests, then the button on to the request form.
   MotoPress's calendar and form are flattened into one grid (display:
   contents) so their parts can be placed as cards; the form itself, and
   its script, are untouched.
   ============================================================================= */
.ss-villa {
	display: grid;
	/* minmax(0, …): the columns share the width; nothing inside (a date
	   field, the calendar) may widen them past a small phone's screen. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		'villa villa'
		'in out'
		'calendar calendar'
		'adults children'
		'errors errors'
		'action action';
	gap: var(--space-sm) var(--space-sm);
	margin-top: var(--space-md);
}

.ss-villa :is(.mphb_sc_booking_form-wrapper, .mphb-booking-form) {
	display: contents;
}

.ss-villa .mphb-booking-form > :is(.mphb-required-fields-tip, input[type='hidden']) {
	display: none;
}

.ss-villa .mphb-booking-form > * {
	margin: 0 !important;
}

.ss-villa > *,
.ss-villa .mphb-booking-form > * {
	min-width: 0;
	box-sizing: border-box;
}

@media (min-width: 56rem) {
	.ss-villa {
		grid-template-columns: minmax(0, 1fr) minmax(0, 12rem) minmax(0, 12rem);
		grid-template-rows: auto auto auto auto auto 1fr;
		grid-template-areas:
			'calendar villa villa'
			'calendar in out'
			'calendar adults children'
			'calendar errors errors'
			'calendar action action'
			'calendar . .';
		align-items: start;
	}

	.ss-villa .mphb_sc_availability_calendar-wrapper {
		margin-right: calc(var(--space-lg) - var(--space-sm));
	}
}

/* The villa: name, sleeps and minimum stay, the price, its photo. */
.ss-villa-card {
	grid-area: villa;
	display: flex;
	align-items: stretch;
	gap: var(--space-sm);
	padding: 0.5rem 0.5rem 0.5rem var(--space-md);
	background: var(--sea-deep);
	background-image: var(--ocean);
	border: 0;
	border-radius: var(--radius-lg);
	color: var(--white);
}

/* Sun Villa runs warm: its deepest gold (white text 7.4:1). */
.ss-accent-sun.ss-villa-card {
	background: #6e4b06;
	background-image: radial-gradient(40% 120% at 18% 0%, rgba(146, 100, 8, 0.85) 0%, rgba(146, 100, 8, 0) 70%);
}

.ss-villa-card__text {
	flex: 1;
	min-width: 0;
	padding-block: var(--space-sm);
}

.ss-villa-card__text p {
	margin: 0;
}

.ss-villa-card__name {
	margin: 0 0 0.35rem;
	font-size: 2rem;
	font-weight: 500;
	color: inherit;
}

.ss-villa-card__facts {
	font-size: var(--fs-small);
	opacity: 0.85;
}

.ss-villa-card__price {
	margin-top: 0.85rem !important;
	font-size: var(--fs-small);
}

.ss-villa-card__price strong {
	font-family: var(--font-display);
	font-size: 1.625rem;
	font-weight: 500;
}

.ss-villa-card__links {
	margin-top: 0.6rem !important;
	font-size: var(--fs-small);
}

.ss-villa-card a {
	color: inherit;
}

.ss-villa-card__photo {
	flex: none;
	width: clamp(5.5rem, 28vw, 7.5rem);
	height: auto;
	min-height: 100%;
	object-fit: cover;
	border-radius: calc(var(--radius-lg) - 0.35rem);
}

/* Arrival and departure: one strip, an arrow between. */
.ss-villa .mphb-check-in-date-wrapper,
.ss-villa .mphb-check-out-date-wrapper {
	position: relative;
	padding: var(--space-sm) var(--space-md);
	background: var(--white);
	border: 1px solid var(--hairline);
	box-shadow: var(--shadow-card);
}

.ss-villa .mphb-check-in-date-wrapper {
	grid-area: in;
	border-right: 0;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.ss-villa .mphb-check-out-date-wrapper {
	grid-area: out;
	margin-left: calc(-1 * var(--space-sm)) !important;
	border-left: 1px dashed var(--field-line);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	text-align: right;
}

.ss-villa .mphb-check-out-date-wrapper::before {
	content: '';
	position: absolute;
	left: -1rem;
	top: 50%;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
	background: var(--sea-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center no-repeat;
}

.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper) :is(br, abbr) {
	display: none;
}

.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper) label {
	display: block;
	margin: 0 0 0.2rem;
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--text-muted);
}

.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper) input[type='text'] {
	width: 100%;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 4.8vw, 1.375rem);
	font-weight: 500;
	color: var(--ink);
	cursor: default;
}

.ss-villa .mphb-check-out-date-wrapper input[type='text'] {
	text-align: right;
}

/* The date as "12 Apr 2027" (villa.js); MotoPress's own field stays in the
   form, out of sight. */
.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper) input.ss-date-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	pointer-events: none;
}

.ss-date-shown {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 4.8vw, 1.375rem);
	font-size-adjust: none;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ink);
}

.ss-date-shown.is-empty {
	font-weight: 400;
	color: var(--text-muted);
}

.ss-villa .mphb-check-out-date-wrapper .ss-date-shown {
	text-align: right;
}

.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper) input::placeholder {
	color: var(--text-muted);
	font-weight: 400;
}

/* The calendar: one plain card. Free days are plain numbers; taken days
   fade; the chosen nights run in the ocean. */
.ss-villa .mphb_sc_availability_calendar-wrapper {
	position: relative;
	grid-area: calendar;
	padding: var(--card-pad);
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.ss-villa .mphb-calendar,
.ss-villa .mphb-calendar .datepick {
	max-width: 100%;
	overflow: hidden;
}

.ss-villa .mphb-calendar .datepick {
	width: 100% !important;
	box-sizing: border-box;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--font-body) !important;
}

.ss-villa .mphb-calendar .datepick-nav {
	display: flex;
	justify-content: space-between;
	margin-bottom: -2.5rem;
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd {
	pointer-events: auto;
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd-today {
	display: none !important;
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--radius-sm);
	/* The words "<Prev" and "Next>" stay for screen readers only. */
	font-size: 0;
	font-size-adjust: none;
	color: var(--ink) !important;
	text-decoration: none;
	background: none !important;
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd:not(.datepick-disabled):hover {
	color: var(--sea) !important;
	background: var(--sea-wash) !important;
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd::before {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	/* Down a touch, to sit on the month name's line. */
	transform: translate(0.1rem, 0.2rem) rotate(45deg);
}

.ss-villa .mphb-calendar .datepick-nav .datepick-cmd-next::before {
	transform: translate(-0.1rem, 0.2rem) rotate(-135deg);
}

.ss-villa .mphb-calendar .datepick-nav .datepick-disabled {
	opacity: 0.25;
	cursor: default;
}

.ss-villa .mphb-calendar .datepick-month-row,
.ss-villa .mphb-calendar .datepick-month {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.ss-villa .mphb-calendar .datepick-month-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	/* Room for the arrows at each end. */
	padding-inline: 3rem;
	margin-bottom: var(--space-sm);
	text-align: left;
}

.ss-villa .mphb-calendar .datepick-month-header select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 0.25rem 0 0;
	border: 0;
	background: none;
	font-family: var(--font-display) !important;
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	font-weight: 500 !important;
	color: var(--ink) !important;
	field-sizing: content;
	cursor: pointer;
}

.ss-villa .mphb-calendar .datepick-month table {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0.35rem;
	table-layout: fixed;
}

.ss-villa .mphb-calendar .datepick-month thead th {
	padding: 0.35rem 0;
	border: 0 !important;
	background: none !important;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted) !important;
}

.ss-villa .mphb-calendar .datepick-month td {
	padding: 0;
	border: 0;
	background: none;
}

.ss-villa .mphb-calendar .datepick-month td > :is(a, span) {
	font-variant-numeric: lining-nums tabular-nums;
	display: grid;
	place-items: center;
	height: clamp(2.5rem, 9vw, 3.25rem);
	padding: 0;
	border: 0 !important;
	border-radius: var(--radius-md) !important;
	background: none !important;
	font-size: 1rem;
	font-weight: 400;
	color: var(--ink) !important;
	text-decoration: none;
	transition: background-color 0.15s;
}

.ss-villa .mphb-calendar .datepick-month td > a:hover {
	background: var(--sea-wash) !important;
}

.ss-villa .mphb-calendar .datepick-month td > :is(.mphb-past-date, .datepick-other-month, .mphb-extra-date) {
	background: none !important;
	color: color-mix(in srgb, var(--ink) 22%, transparent) !important;
}

/* Taken: faded, nothing more. */
.ss-villa .mphb-calendar .datepick-month td > :is(.mphb-booked-date, .mphb-not-available-date, .mphb-mark-as-unavailable) {
	background: none !important;
	color: color-mix(in srgb, var(--ink) 30%, transparent) !important;
	text-decoration: none;
	cursor: default;
}

.ss-villa .mphb-calendar .datepick-month td > :is(.datepick-selected, .mphb-selected-date, .mphb-date-check-in-selected, .mphb-date-check-out-selected) {
	background: var(--sea) !important;
	color: var(--white) !important;
}

.ss-villa .mphb-calendar .datepick-month td > .datepick-highlight {
	background: var(--sea-wash) !important;
	color: var(--ink) !important;
}

.ss-villa .mphb-calendar .datepick-month td > .datepick-today {
	box-shadow: inset 0 0 0 1px var(--field-line);
	font-weight: 600;
}

.ss-villa .mphb-calendar .datepick-ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--hairline) !important;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

/* Guests: a label and minus and plus, on the page itself (no box). */
.ss-villa .mphb-adults-wrapper { grid-area: adults; }
.ss-villa .mphb-children-wrapper { grid-area: children; }

.ss-villa .mphb-capacity-wrapper {
	padding: var(--space-sm) 0 var(--space-xs);
	border-top: 1px solid var(--hairline);
}

.ss-villa .mphb-capacity-wrapper br {
	display: none;
}

.ss-villa .mphb-capacity-wrapper label {
	display: block;
	margin-bottom: 0.6rem;
	font-weight: 600;
	color: var(--ink);
}

.ss-villa .mphb-capacity-wrapper select {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-md);
	font: inherit;
}

.ss-stepper__select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
}

.ss-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.ss-stepper__count {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 500;
	min-width: 1.5rem;
	text-align: center;
}

.ss-stepper__button {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--field-line);
	border-radius: 50%;
	background: var(--white);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
}

.ss-stepper__button:hover:not(:disabled) {
	border-color: var(--sea);
	color: var(--sea);
}

.ss-stepper__button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* The month and year as one select, centred over the calendar's own
   header (which is hidden once the select is there). */
.ss-villa .has-month-picker .datepick-month-header {
	visibility: hidden;
}

.ss-month-picker {
	position: absolute;
	top: var(--card-pad);
	left: 50%;
	z-index: 2;
	height: 2.5rem;
	max-width: calc(100% - 6rem);
	padding: 0 1.75rem 0 0.6rem;
	transform: translateX(-50%);
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313242a' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	font-weight: 500;
	color: var(--ink);
	text-align: center;
	cursor: pointer;
	field-sizing: content;
}

.ss-month-picker:hover {
	background-color: var(--sea-wash);
}

.ss-month-picker:focus-visible {
	outline: 2px solid var(--sea);
	outline-offset: 2px;
}

/* Narrow phones (under about 400px): tighter cards, smaller tiles. */
@media (max-width: 25rem) {
	.ss-villa {
		gap: 0.75rem;
	}

	.ss-villa .mphb-check-out-date-wrapper {
		margin-left: -0.75rem !important;
	}

	.ss-villa :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper, .mphb-capacity-wrapper),
	.ss-villa .mphb_sc_availability_calendar-wrapper {
		padding-inline: 1rem;
	}

	.ss-villa-card {
		padding-left: 1rem;
	}

	.ss-villa .mphb-calendar .datepick-month table {
		border-spacing: 0.2rem;
	}

	.ss-villa .mphb-calendar .datepick-month td > :is(a, span) {
		font-size: 0.875rem;
	}

	.ss-stepper__button {
		width: 2.25rem;
		height: 2.25rem;
	}

	.ss-month-picker {
		padding: 0 1.4rem 0 0.4rem;
		background-position: right 0.4rem center;
		font-size: 1.3125rem;
	}

	.ss-villa .mphb-calendar .datepick-nav .datepick-cmd {
		width: 2.25rem;
	}
}

/* Check, then the way on to the request form. MotoPress shows one or the
   other, so they share a place. */
.ss-villa .mphb-errors-wrapper { grid-area: errors; }
.ss-villa :is(.mphb-reserve-btn-wrapper, .mphb-reserve-room-section) { grid-area: action; }

.ss-villa .mphb-errors-wrapper:not(.mphb-hide) {
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	background: #fdecec;
	color: #8a1c1c;
}

.ss-villa .mphb-errors-wrapper p {
	margin: 0;
}

.ss-villa .mphb-reserve-room-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
}

.ss-villa .mphb-reserve-room-section.mphb-hide,
.ss-villa .mphb-hide {
	display: none !important;
}

.ss-villa .mphb-reserve-room-section > * {
	grid-area: auto;
	margin: 0;
}

.ss-villa .mphb-reserve-room-section > .mphb-period-price {
	order: 1;
	justify-self: stretch;
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.ss-villa .mphb-reserve-room-section > .mphb-confirm-reservation {
	order: 2;
}

.ss-villa .mphb-calendar__selected-dates {
	visibility: hidden;
}

.ss-villa .mphb-period-price .mphb-price {
	font-family: var(--font-display);
	font-size: 2.125rem;
	font-weight: 500;
	color: var(--sea);
}

.ss-villa :is(.mphb-reserve-btn, .mphb-confirm-reservation) {
	width: 100%;
	min-height: 56px;
	padding: 0.85rem 1.6rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--sea-deep);
	background-image: var(--ocean);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0;
	cursor: pointer;
	transition: filter 0.2s;
}

.ss-villa :is(.mphb-reserve-btn, .mphb-confirm-reservation):hover {
	filter: saturate(1.1) brightness(0.9);
}

/* =============================================================================
   Date picker (MotoPress uses kbwood datepick).
   ============================================================================= */
.datepick-popup .datepick {
	width: auto !important;
	padding: var(--space-sm);
	border: 1px solid var(--hairline) !important;
	border-radius: var(--radius-lg) !important;
	background: var(--white) !important;
	box-shadow: 0 12px 40px rgba(19, 36, 42, 0.14);
	font-family: var(--font-body) !important;
	color: var(--ink);
}

.datepick .datepick-nav,
.datepick .datepick-ctrl,
.datepick .datepick-month,
.datepick .datepick-month-header {
	background: none !important;
	border: 0 !important;
}

.datepick .datepick-nav a,
.datepick .datepick-ctrl a {
	color: var(--sea) !important;
	font-weight: 600;
}

.datepick .datepick-month-header,
.datepick .datepick-month-header select {
	color: var(--ink) !important;
	font-family: var(--font-display) !important;
	font-weight: 500 !important;
}

.datepick .datepick-month th,
.datepick .datepick-month th a {
	background: none !important;
	border: 0 !important;
	color: var(--text-muted) !important;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.datepick .datepick-month td a,
.datepick .datepick-month td span {
	border: 0 !important;
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
}

.datepick .datepick-month td .datepick-selected,
.datepick .datepick-month td .datepick-highlight {
	background: var(--sea-deep) !important;
	color: var(--white) !important;
}

/* =============================================================================
   Footer: one slim line.
   ============================================================================= */
.ss-footer {
	padding: var(--space-lg) var(--gutter);
	border-top: 1px solid var(--hairline);
	font-size: var(--fs-small);
	color: var(--text-muted);
}

.ss-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-md);
	max-width: var(--container);
	margin-inline: auto;
}

.ss-footer p {
	margin: 0;
}

.ss-footer a {
	color: var(--sea);
	/* A phone number or address never breaks across lines. */
	white-space: nowrap;
}