/* ============================================================
   Casa Lago Booking - front-end booking widget (Phase 7).

   Rendered by the [casa_lago_booking] shortcode as the booking
   card in the right column of the product page, and as a slim
   sticky bottom bar on mobile. Restyled to the approved mockup
   in the Casa Lago design language; the data logic in
   booking-calendar.js is unchanged.

   The card sits on a paper surface with NO border - the surface
   alone differentiates it (a hard requirement). Inside: the
   "from" price (server value), the arrive / depart read-outs,
   the guests select, the two-month calendar, the server price
   breakdown, the single ochre CTA, and the no-charge line.

   House craft rules applied here:
   - Sentence case everywhere; no uppercase, no wide tracking.
   - Line icons on the booking fields.
   - Hairlines are inset box-shadows, never a 1px border, and only
     where there is no distinguishing background (dividers, input
     underlines).
   - Motion is transform / opacity only, eased with --clb-ease.
   - Hover effects are gated behind (hover: hover).
   - Selected range ochre; blocked nights struck through.
   ============================================================ */

.clb-booking {
	box-sizing: border-box;
	color: var(--text-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

.clb-booking :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

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

/* --- Line icons ------------------------------------------- */
.clb-booking .clb-icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	display: inline-block;
	vertical-align: middle;
	color: inherit;
}

/* --- The booking card (paper surface, NO border) ---------- */
.clb-booking__card {
	position: sticky;
	top: 96px;
	background: var(--surface-raised);
	border-radius: var(--radius-xs);
	padding: clamp(1.5rem, 2vw, 2rem);
}

/* --- The "from" price (server value, empty until then) ---- */
.clb-booking__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.6rem;
	min-height: 1.4em;
}

.clb-booking__from {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.clb-booking__amount {
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: var(--text-display-s);
	color: var(--text-primary);
	line-height: 1;
}

.clb-booking__per {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* The "From" label, the amount, and the "per night" suffix only read
   once the calendar JS adds is-priced (a confirmed server amount). The
   price block is otherwise empty, so it never shows a hardcoded number
   or a dangling label. */
.clb-booking__from,
.clb-booking__amount,
.clb-booking__per {
	display: none;
}

.clb-booking__price.is-priced .clb-booking__from,
.clb-booking__price.is-priced .clb-booking__amount,
.clb-booking__price.is-priced .clb-booking__per {
	display: inline;
}

/* --- Controls: arrive / depart / guests ------------------- */
.clb-controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.4rem;
	margin-bottom: 1.8rem;
}

.clb-control--guests {
	grid-column: span 2;
}

.clb-control__label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
	margin-bottom: 6px;
}

.clb-control__label .clb-icon {
	color: var(--accent);
}

.clb-readout {
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--text-primary);
	letter-spacing: var(--tracking-body);
	padding: 8px 0;
	min-height: calc(var(--text-body) + 16px);
	box-shadow: inset 0 -1px 0 0 var(--border-hairline);
}

.clb-readout:empty::before {
	content: attr(data-placeholder);
	color: var(--text-muted);
}

.clb-select__wrap {
	position: relative;
	box-shadow: inset 0 -1px 0 0 var(--border-hairline);
	transition: box-shadow var(--dur-quick) var(--clb-ease);
}

.clb-select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 8px 28px 8px 0;
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--text-primary);
	outline: none;
	cursor: pointer;
}

.clb-select__wrap:focus-within {
	box-shadow: inset 0 -1px 0 0 var(--accent);
}

.clb-select__chevron {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	color: var(--text-muted);
	pointer-events: none;
}

.clb-select__chevron .clb-icon {
	width: 1.05em;
	height: 1.05em;
}

/* --- Calendar --------------------------------------------- */
.clb-calendar {
	margin-bottom: 1.6rem;
}

/* --- Month tabs (scrollable filter row) ------------------- */
/* A horizontal, scrollable row of sentence-case month pills for the
   next ~12 months. The active month is filled; a fully unavailable,
   fully loaded month reads muted. Keyboard operable via roving
   tabindex on the tabs (managed in booking-calendar.js). */
.clb-monthtabs {
	display: flex;
	gap: 7px;
	margin-bottom: var(--space-md);
	padding: 2px 2px 9px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--color-stone) transparent;
	-webkit-overflow-scrolling: touch;
	/* Soft fade at both ends so the row reads as a continuous track that runs
	   on past the edges, rather than stopping with a hard cut. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.clb-monthtabs::-webkit-scrollbar {
	height: 5px;
}

.clb-monthtabs::-webkit-scrollbar-track {
	background: transparent;
}

.clb-monthtabs::-webkit-scrollbar-thumb {
	background: var(--color-stone);
	border-radius: var(--radius-pill);
}

.clb-monthtab {
	appearance: none;
	flex: 0 0 auto;
	scroll-snap-align: center;
	padding: 8px 16px;
	background: var(--surface-sunk);
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--text-secondary);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--dur-quick) var(--clb-ease), color var(--dur-quick) var(--clb-ease), transform var(--dur-quick) var(--clb-ease);
}

.clb-monthtab.is-active {
	background: var(--color-ink);
	color: var(--text-on-ink);
	font-weight: var(--weight-medium);
}

.clb-monthtab.is-muted:not(.is-active) {
	color: var(--text-muted);
	opacity: 0.55;
}

/* --- Legend (three-way day read) -------------------------- */
.clb-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}

.clb-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--text-micro);
	color: var(--text-muted);
}

.clb-legend__dot {
	flex: 0 0 auto;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
}

.clb-legend__item--free .clb-legend__dot {
	background: var(--day-free);
}

.clb-legend__item--request .clb-legend__dot {
	background: var(--day-request);
}

.clb-legend__item--taken .clb-legend__dot {
	background: var(--day-booked);
}

.clb-legend__item--selected .clb-legend__dot {
	background: var(--accent);
}

.clb-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-md);
}

.clb-calendar__navbtn {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-primary);
	box-shadow: inset 0 0 0 1px var(--border-hairline);
	transition: background var(--dur-quick) var(--clb-ease), box-shadow var(--dur-quick) var(--clb-ease);
}

.clb-calendar__navbtn[disabled] {
	opacity: 0.32;
	cursor: not-allowed;
}

.clb-calendar__navbtn svg {
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Two months side by side, each half width on the same line. Picking a month
   tab shows that month on the left and the next on the right. The pair stacks
   to one column only when the card is too narrow to keep the days tappable. */
.clb-calendar__months {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(0.9rem, 2vw, 1.6rem);
	align-items: start;
}

@media (max-width: 560px) {
	.clb-calendar__months {
		grid-template-columns: 1fr;
	}
}

.clb-month__label {
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: var(--text-lead);
	letter-spacing: var(--tracking-title);
	margin: 0 0 var(--space-sm);
}

.clb-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: var(--space-2xs);
}

.clb-weekday {
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--text-micro);
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
	padding: var(--space-2xs) 0;
}

.clb-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px 4px;
}

.clb-day {
	appearance: none;
	background: var(--day-free);
	border: 0;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--day-free-ink);
	cursor: pointer;
	position: relative;
	transition: background var(--dur-quick) var(--clb-ease), color var(--dur-quick) var(--clb-ease);
}

.clb-day--empty {
	visibility: hidden;
	cursor: default;
}

.clb-day.is-today {
	box-shadow: inset 0 0 0 1px var(--border-hairline);
}

/* Request-only nights: a soft warm gold circle, a sibling to the green
   available circle, never a warning red. The night is still selectable (it
   routes to the request flow), so it keeps the pointer cursor. */
.clb-day.is-request {
	background: var(--day-request);
	color: var(--day-request-ink);
}

/* Past days: no fill, the number struck through and quietened. They are not
   "taken", just gone, so they stay neutral rather than red. */
.clb-day.is-disabled {
	background: transparent;
	color: var(--text-muted);
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Occupied nights: a soft light red circle with the number struck through, so a
   taken night reads at a glance and never looks bookable. */
.clb-day.is-blocked {
	background: var(--day-booked);
	color: var(--day-booked-ink);
	cursor: not-allowed;
	text-decoration: line-through;
}

.clb-day.is-inrange {
	background: var(--color-limewash-deep);
}

.clb-day.is-start,
.clb-day.is-end {
	background: var(--accent);
	color: var(--text-on-image);
}

/* --- Price summary (values are server-authoritative) ------ */
.clb-summary {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding-top: 1.4rem;
	box-shadow: inset 0 1px 0 0 var(--border-hairline);
}

.clb-summary__row {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.clb-summary__empty {
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0;
}

.clb-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	box-shadow: inset 0 1px 0 0 var(--border-hairline);
}

.clb-summary__total-label {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-body);
	color: var(--text-secondary);
}

.clb-summary__total-value {
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-size: var(--text-display-s);
}

.clb-notice {
	margin-top: 1rem;
	font-size: var(--text-meta);
	color: var(--accent);
	min-height: 1.2em;
}

/* --- Call to action --------------------------------------- */
.clb-cta-wrap {
	margin-top: 1.6rem;
}

.clb-cta {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 18px 32px;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-body);
	letter-spacing: var(--tracking-body);
	line-height: 1;
	color: var(--text-on-image);
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--dur-quick) var(--clb-ease), opacity var(--dur-quick) var(--clb-ease);
}

.clb-cta[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The request variant: when the chosen range is request only (or below the
   season minimum), the CTA turns warm gold and opens the inquiry modal instead
   of the book flow. Same shape, the gold reads as "ask us", not "buy now". */
.clb-cta--request {
	background: var(--day-request);
	color: var(--day-request-ink);
}

.clb-reassure {
	font-size: var(--text-meta);
	color: var(--text-muted);
	margin: 1rem 0 0;
	text-align: center;
}

.clb-reassure a {
	color: var(--text-muted);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 currentColor;
}

/* --- Mobile sticky bottom bar + reveal -------------------- */
/* The bar is built and toggled by booking-calendar.js on small
   viewports; it shows the "from" price and a Reserve button that
   reveals the card. It lives outside the card so the card can
   keep its sticky behaviour on desktop. */
.clb-bottombar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem clamp(1rem, 4vw, 1.5rem);
	background: var(--surface-raised);
	box-shadow: inset 0 1px 0 0 var(--border-hairline);
	transform: translateY(100%);
	transition: transform var(--dur-quick) var(--clb-ease);
}

.clb-bottombar.is-ready {
	transform: translateY(0);
}

.clb-bottombar__price {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	min-width: 0;
}

.clb-bottombar__amount {
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: var(--text-lead);
	color: var(--text-primary);
	line-height: 1;
}

.clb-bottombar__per {
	font-family: var(--font-body);
	font-size: var(--text-meta);
	color: var(--text-muted);
}

.clb-bottombar__cta {
	appearance: none;
	flex: 0 0 auto;
	padding: 13px 26px;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-body);
	line-height: 1;
	color: var(--text-on-image);
	background: var(--accent);
	border: 0;
	border-radius: var(--radius-xs);
	cursor: pointer;
	transition: background var(--dur-quick) var(--clb-ease);
}

/* --- Hover (pointer devices only) ------------------------- */
@media (hover: hover) {
	.clb-calendar__navbtn:hover:not([disabled]) {
		background: rgba(22, 21, 15, 0.03);
		box-shadow: inset 0 0 0 1px var(--color-ink);
	}

	.clb-day:not(.is-disabled):not(.is-blocked):not(.is-request):not(.is-start):not(.is-end):not(.is-inrange):hover {
		background: var(--day-free-hover);
	}

	.clb-day.is-request:not(.is-start):not(.is-end):not(.is-inrange):hover {
		background: var(--day-request-hover);
	}

	.clb-monthtab:not(.is-active):hover {
		background: var(--color-stone);
		color: var(--text-primary);
	}

	.clb-cta:not([aria-disabled="true"]):not(.clb-cta--request):hover {
		background: var(--accent-pressed);
	}

	.clb-cta--request:not([aria-disabled="true"]):hover {
		background: var(--day-request-hover);
	}

	.clb-bottombar__cta:hover {
		background: var(--accent-pressed);
	}

	.clb-pay__option:hover:not(:has(.clb-pay__radio:checked)) {
		background: rgba(22, 21, 15, 0.03);
	}
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
	/* The card is hidden until the bottom-bar Reserve reveals it. */
	.clb-booking__card {
		position: static;
		display: none;
		margin-bottom: 5.5rem;
	}

	.clb-booking.is-revealed .clb-booking__card {
		display: block;
	}

	.clb-bottombar {
		display: flex;
	}

	.clb-booking.is-revealed .clb-bottombar {
		transform: translateY(100%);
	}
}

/* --- Payment choice (deposit option, server amounts only) - */
/* A small radio group inside the card, shown by booking-calendar.js
   once the server has computed a price. Each option's amounts are
   written from the /price "deposit" object; no money is styled in or
   baked here. No border (the option background differentiates the
   selected state); hairline divider above; motion is opacity / colour
   only, eased; focus is the shared 2px ochre ring. */
.clb-pay {
	margin: 1.4rem 0 0;
	padding: 1.4rem 0 0;
	border: 0;
	min-width: 0;
	box-shadow: inset 0 1px 0 0 var(--border-hairline);
}

.clb-pay[hidden] {
	display: none;
}

.clb-pay__legend {
	display: block;
	padding: 0;
	margin-bottom: 0.8rem;
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-meta);
	letter-spacing: var(--tracking-body);
	color: var(--text-muted);
}

.clb-pay__option {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem 0.95rem;
	border-radius: var(--radius-xs);
	cursor: pointer;
	background: transparent;
	transition: background var(--dur-quick) var(--clb-ease);
}

.clb-pay__option + .clb-pay__option {
	margin-top: 0.4rem;
}

.clb-pay__option:has(.clb-pay__radio:checked) {
	background: var(--surface-sunk);
}

.clb-pay__radio {
	flex: 0 0 auto;
	margin: 0.15rem 0 0;
	width: 1.05em;
	height: 1.05em;
	accent-color: var(--accent);
	cursor: pointer;
}

.clb-pay__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.clb-pay__title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-primary);
}

.clb-pay__amount {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	color: var(--text-primary);
}

.clb-pay__amount:empty {
	display: none;
}

.clb-pay__note {
	font-size: var(--text-meta);
	color: var(--text-muted);
}

.clb-pay__note:empty {
	display: none;
}

/* The "due now" line in the summary when the deposit choice is active. */
.clb-summary__duenow {
	display: flex;
	justify-content: flex-end;
	margin: 0.6rem 0 0;
	font-size: var(--text-meta);
	color: var(--text-muted);
}

.clb-summary__duenow[hidden] {
	display: none;
}

/* --- Seasonal prices (server-rendered, info-only) --------- */
/* A quiet reference block at the bottom of the booking card, rendered
   by the shortcode from CLB_Rates: per period the date range and its
   minimum nights inline, then the nightly price (a server value, never
   hardcoded). No season label, no title, no border, hairline dividers
   between periods, sentence case. */
.clb-villa-rates {
	margin: 1.6rem 0 0;
	padding: 1.4rem 0 0;
	list-style: none;
	box-shadow: inset 0 1px 0 0 var(--border-hairline);
}

.clb-villa-rates__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
	box-shadow: inset 0 1px 0 0 var(--border-faint);
}

.clb-villa-rates__item:first-child {
	box-shadow: none;
}

.clb-villa-rates__when {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.clb-villa-rates__price {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	color: var(--text-primary);
	white-space: nowrap;
}

/* --- Inquiry modal ---------------------------------------- */
/* Opened by booking-calendar.js when the chosen range is request only.
   role=dialog, aria-modal, focus trap and Escape are wired in JS. The
   overlay dims the page; the dialog sits on a paper surface with no
   border. Motion is opacity / transform only, eased. */
.clb-modal {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}

.clb-modal[hidden] {
	display: none;
}

.clb-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(22, 21, 15, 0.62);
	opacity: 0;
	transition: opacity var(--dur-quick) var(--clb-ease);
}

.clb-modal.is-open .clb-modal__overlay {
	opacity: 1;
}

.clb-modal__dialog {
	position: relative;
	width: min(34rem, 100%);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--surface-raised);
	border-radius: var(--radius-xs);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur-quick) var(--clb-ease), transform var(--dur-quick) var(--clb-ease);
}

.clb-modal.is-open .clb-modal__dialog {
	opacity: 1;
	transform: translateY(0);
}

.clb-modal__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.1rem);
	right: clamp(0.75rem, 2vw, 1.1rem);
	appearance: none;
	background: transparent;
	border: 0;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	color: var(--text-primary);
	cursor: pointer;
	box-shadow: inset 0 0 0 1px var(--border-hairline);
	transition: background var(--dur-quick) var(--clb-ease);
}

.clb-modal__close svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.clb-modal__title {
	margin: 0 2.5rem 0.4rem 0;
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-weight: var(--weight-display);
	font-size: var(--text-display-s);
	letter-spacing: var(--tracking-title);
	color: var(--text-primary);
}

.clb-modal__intro {
	margin: 0 0 1.4rem;
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.clb-modal__dates {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: 1.4rem;
	padding: 0.9rem 1rem;
	background: var(--surface-sunk);
	border-radius: var(--radius-xs);
}

.clb-modal__dates-label {
	font-size: var(--text-micro);
	color: var(--text-muted);
}

.clb-modal__dates-value {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-sm);
	color: var(--text-primary);
}

.clb-modal__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}

.clb-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.clb-field--full {
	grid-column: span 2;
}

.clb-field__label {
	font-family: var(--font-body);
	font-weight: var(--weight-medium);
	font-size: var(--text-meta);
	color: var(--text-muted);
}

.clb-field__input {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 8px 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	color: var(--text-primary);
	box-shadow: inset 0 -1px 0 0 var(--border-hairline);
	transition: box-shadow var(--dur-quick) var(--clb-ease);
}

.clb-field__input:focus {
	outline: none;
	box-shadow: inset 0 -1px 0 0 var(--accent);
}

.clb-field__textarea {
	resize: vertical;
	min-height: 4.5rem;
	line-height: var(--leading-body);
}

.clb-modal__notice {
	grid-column: span 2;
	margin: 0;
	min-height: 1.2em;
	font-size: var(--text-meta);
	color: var(--accent);
}

.clb-modal__submit {
	grid-column: span 2;
	margin-top: 0.4rem;
}

.clb-modal__submit[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}

.clb-modal__thanks {
	text-align: center;
	padding: 1rem 0;
}

.clb-modal__thanks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	border-radius: var(--radius-pill);
	color: var(--text-on-image);
	background: var(--accent);
}

.clb-modal__thanks-icon .clb-icon {
	width: 1.4em;
	height: 1.4em;
}

.clb-modal__thanks-text {
	margin: 0 0 1.4rem;
	font-family: var(--font-display);
	font-variation-settings: var(--display-settings);
	font-size: var(--text-lead);
	line-height: var(--leading-snug);
	letter-spacing: var(--tracking-title);
	color: var(--text-primary);
}

@media (max-width: 480px) {
	.clb-modal__fields {
		grid-template-columns: 1fr;
	}

	.clb-field--full,
	.clb-modal__notice,
	.clb-modal__submit {
		grid-column: span 1;
	}
}

/* --- Checkout modal --------------------------------------- */
/* Opened by booking-calendar.js after a confirmed booking POST. It frames
   WooCommerce's own checkout form (rendered server-side by the shortcode) in
   the Casa Lago language. WooCommerce owns the form, its fields, and the
   payment UI; this only styles the surrounding chrome and the field
   presentation. No price is styled in; the order total is Woo's review. The
   dialog is wider than the inquiry dialog to give the form and the order
   review room to breathe. */
/* Lock the page behind any open modal so only the dialog scrolls, not the page
   underneath. The dialog scrolls internally (the .clb-modal__dialog base sets
   max-height + overflow-y: auto). !important to beat any theme overflow rule. */
html.clb-modal-open {
	overflow: hidden !important;
}

/* The body is pinned at its current scroll offset (the offset and a scrollbar-width
   padding are set inline by the scroll lock in booking-calendar.js) so the page
   behind cannot scroll on ANY theme - only the dialog scrolls. No `top` here: the
   JS sets it inline so the page stays exactly where it was. */
html.clb-modal-open body {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* --- Hover (pointer devices only) - modal ----------------- */
@media (hover: hover) {
	.clb-modal__close:hover {
		background: rgba(22, 21, 15, 0.05);
	}
}

/* --- Day tooltip ------------------------------------------ */
/* A single reused, decorative bubble shown on day hover / focus. It is
   position:fixed (the widget sets left/top from the day's rect) and
   pointer-events:none, so it never blocks a day click. Minimal: a status dot
   in the day's state colour, a short status label, and the night price for
   bookable nights. The animated entrance is opacity plus a small translateY,
   eased with the shared tokens; reduced motion settles to the end state via
   the .clb-booking * rule below. */
.clb-tip {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	max-width: 16rem;
	padding: 0.4rem 0.6rem;
	border-radius: var(--radius-xs);
	background: var(--surface-ink);
	color: var(--text-on-ink);
	font-family: var(--font-body);
	font-size: var(--text-meta);
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px) scale(0.98);
	transition: opacity var(--dur-quick) var(--clb-ease), transform var(--dur-quick) var(--clb-ease);
	box-shadow: 0 6px 24px rgba(22, 21, 15, 0.18);
}

.clb-tip.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* When flipped below the day, the entrance rises from the opposite side. */
.clb-tip.clb-tip--below {
	transform: translateY(-4px) scale(0.98);
}

.clb-tip.clb-tip--below.is-open {
	transform: translateY(0) scale(1);
}

.clb-tip__dot {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--text-muted);
}

.clb-tip--available .clb-tip__dot {
	background: var(--day-free);
}

.clb-tip--request .clb-tip__dot {
	background: var(--day-request);
}

.clb-tip--taken .clb-tip__dot {
	background: var(--day-booked);
}

.clb-tip--past .clb-tip__dot {
	background: var(--text-muted);
}

.clb-tip__status {
	font-weight: var(--weight-medium);
}

.clb-tip__price {
	opacity: 0.85;
}

.clb-tip__price[hidden] {
	display: none;
}

/* --- Reduced motion: settle to the end state -------------- */
@media (prefers-reduced-motion: reduce) {
	.clb-booking *,
	.clb-booking *::before,
	.clb-booking *::after,
	.clb-bottombar,
	.clb-bottombar *,
	.clb-modal,
	.clb-modal * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}