/* =========================================================================
   Canto de Luz – child theme styles
   1. Global design tokens
   2. Global typography / base
   3. Global layout container
   4. MotoPress accommodation grid  (.accommodation)
   5. Accommodation card internals
   6. Gallery (FlexSlider) + arrows
   7. Responsive
   ========================================================================= */

/* =========================================================================
   1. DESIGN TOKENS (global)
   ========================================================================= */

:root {
	/* Brand palette (from cantodeluz.com Elementor kit) */
	--cdl-brand:        #663264;
	--cdl-brand-dark:   #4d254b;
	--cdl-ink:          #000000;
	--cdl-text:         #000000;   /* one text colour; hierarchy comes from weight */
	--cdl-soft:         #F6F6F6;   /* page ground, as on the reference */
	--cdl-line:         #DDDDDD;   /* every border on the page uses this */
	--cdl-white:        #FFFFFF;

	/* Typography: the reference booking flow ships no web fonts, so neither do we */
	--cdl-font-title:   -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cdl-font-body:    -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cdl-font-ui:      -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Type scale */
	--cdl-fs-body:      16px;
	--cdl-lh-body:      1.5;
	--cdl-fs-lead:      16px;
	--cdl-fs-h1:        16px;
	--cdl-fs-h2:        16px;
	--cdl-fs-h3:        16px;
	--cdl-fs-card-title:18px;
	--cdl-fs-meta:      14px;
	--cdl-fs-ui:        14px;
	--cdl-ls-ui:        normal;

	/* Shape */
	--cdl-radius:       20px;  /* boxes, cards, inputs */
	--cdl-radius-pill:  999px; /* buttons and the search bar */
	--cdl-radius-img:   0px;   /* the card clips the image, so it needs none of its own */

	/* Layout */
	--cdl-container:    1440px;
	--cdl-gutter:       20px;
	--cdl-grid-gap:     30px;
	--cdl-card-pad:     24px;
	--cdl-section-pad:  60px;

	/* Grid columns per breakpoint */
	--cdl-cols:         3;

	/* Card image aspect ratio */
	--cdl-img-ratio:    4 / 3;
}


/* =========================================================================
   2. GLOBAL TYPOGRAPHY / BASE
   ========================================================================= */

body {
	font-family: var(--cdl-font-body);
	font-size: var(--cdl-fs-body);
	line-height: var(--cdl-lh-body);
	color: var(--cdl-text);
	background-color: var(--cdl-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cdl-font-title);
	color: var(--cdl-ink);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .5em;
}

h1 { font-size: var(--cdl-fs-h1); font-weight: 700; }
h2 { font-size: var(--cdl-fs-h2); font-weight: 700; }
h3 { font-size: var(--cdl-fs-h3); font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--cdl-brand); text-decoration: none; }
a:hover { color: var(--cdl-brand-dark); }

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


/* =========================================================================
   3. GLOBAL LAYOUT CONTAINER
   ========================================================================= */

.cdl-container,
.accommodation {
	width: 100%;
	max-width: calc(var(--cdl-container) + (var(--cdl-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cdl-gutter);
	box-sizing: border-box;
}


/* =========================================================================
   4. ACCOMMODATION GRID
   Markup: div.mphb_sc_rooms-wrapper.mphb-room-types.accommodation
             > div.mphb-room-type  (xN)
   ========================================================================= */

.accommodation {
	display: grid;
	grid-template-columns: repeat(var(--cdl-cols), minmax(0, 1fr));
	gap: var(--cdl-grid-gap);
	align-items: stretch;
	padding-block: var(--cdl-section-pad);
	list-style: none;
}

/* Kill the theme/plugin float & clearfix leftovers */
.accommodation::before,
.accommodation::after { content: none; display: none; }

/* !important: the plugin ships `.mphb-room-type + .mphb-room-type
   { margin-top: 4em }` for its stacked layout. In a grid that margin only
   hits cards 2..n, which pushes the whole grid row 64px taller and leaves
   the first card stretching to fill the difference. */
.accommodation > .mphb-room-type,
.accommodation > .mphb-room-type + .mphb-room-type {
	float: none;
	width: auto;
	margin: 0 !important;
	clear: none;
}

/* Unavailable boxes */

.accommodation > .mphb-room-type.unavailable {
	filter: grayscale(1);
	opacity: .65;
}

.accommodation > .mphb-room-type.unavailable .mphb-regular-price span {
	display: none;
}

.accommodation > .mphb-room-type.unavailable .mphb-reserve-room-section .mphb-book-button {
	pointer-events: none;
	cursor: pointer;
}


/* --- 4.1 Non-card children of the search-results wrapper --------------
   [mphb_availability_search_results] prints a results-info paragraph and
   the reservation cart form as siblings of the cards, so they each ate a
   grid cell and pushed the first card into a row of its own.
   ---------------------------------------------------------------------- */
.accommodation > .mphb_sc_search_results-info {
	display: none;
}

.accommodation > .mphb-errors-wrapper,
.accommodation > form.mphb-reservation-cart {
	grid-column: 1 / -1;
	margin: 0;
}

/* The cart is only meaningful once something is in it */
.accommodation > form.mphb-reservation-cart.mphb-empty-cart {
	display: none;
}

.accommodation > form.mphb-reservation-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px var(--cdl-card-pad);
	background: var(--cdl-soft);
	border-radius: var(--cdl-radius);
}

.mphb-reservation-cart .mphb-reservation-details {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0;
}

.mphb-reservation-cart .mphb-reservation-details p { margin: 0; }

.mphb-reservation-cart .mphb-cart-total-price-title {
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	opacity: 1;
}

.mphb-reservation-cart .mphb-cart-total-price-value {
	font-family: var(--cdl-font-title);
	font-size: 16px;
	color: var(--cdl-ink);
	font-weight: 700;
}

.mphb-reservation-cart .mphb-clear { display: none; }


/* =========================================================================
   5. CARD
   DOM order:  images → h2.title → p.desc → h3."Details" → ul.attributes
               → p.mphb-regular-price → p.mphb-view-details-button-wrapper
   Visual order (Casa Roca style):
               gallery → title → meta chips → amenities → description
               → [ price | button ] pinned to the bottom
   ========================================================================= */

.mphb-room-type {
	display: grid;
	/* minmax(0, …): a plain 1fr grows to the min-content of the rate chooser and the card overflows */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto auto auto 1fr auto auto;
	height: 100%;              /* fill the grid row → all cards equal height */
	background: var(--cdl-white);
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
	overflow: hidden;
}

/* Everything except the footer row spans the full card width */
.mphb-room-type > .mphb-room-type-images,
.mphb-room-type > .mphb-loop-room-thumbnail,
.mphb-room-type > .mphb-room-type-title,
.mphb-room-type > .mphb-loop-room-type-attributes,
.mphb-room-type > p:not([class]) {
	grid-column: 1 / -1;
}

/* Horizontal padding for the text block (gallery stays full-bleed) */
.mphb-room-type > .mphb-room-type-title,
.mphb-room-type > .mphb-loop-room-type-attributes,
.mphb-room-type > p:not([class]),
.mphb-room-type > .mphb-regular-price,
.mphb-room-type > .mphb-view-details-button-wrapper,
.mphb-room-type > .mphb-to-book-btn-wrapper {
	padding-inline: var(--cdl-card-pad);
	margin-block: 0;
}

/* --- 5.1 Image slot ---------------------------------------------------
   Two possible markups:
   - 2+ images  →  div.mphb-room-type-images  (FlexSlider gallery)
   - 1 image    →  p.post-thumbnail.mphb-loop-room-thumbnail > a > img
   ---------------------------------------------------------------------- */
.mphb-room-type > .mphb-room-type-images,
.mphb-room-type > .mphb-loop-room-thumbnail {
	order: 1;
	position: relative;
	margin: 0;
	padding: 0;
	background: var(--cdl-soft);
}

/* Single featured image: same box as the slider */
.mphb-room-type > .mphb-loop-room-thumbnail,
.mphb-room-type > .mphb-loop-room-thumbnail > a {
	display: block;
	width: 100%;
	aspect-ratio: var(--cdl-img-ratio);
	line-height: 0;
}

.mphb-room-type > .mphb-loop-room-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border: 0;
	border-radius: 0;
}

/* Cards with no image at all: keep the grid rhythm with a placeholder */
.mphb-room-type:not(:has(.mphb-room-type-images)):not(:has(.mphb-loop-room-thumbnail))::before {
	content: "";
	grid-column: 1 / -1;
	order: 1;
	aspect-ratio: var(--cdl-img-ratio);
	background: linear-gradient(135deg, var(--cdl-soft) 0%, #efecef 100%);
}

/* --- 5.2 Title -------------------------------------------------------- */
.mphb-room-type > .mphb-room-type-title {
	order: 2;
	font-family: var(--cdl-font-title);
	font-size: var(--cdl-fs-card-title);
	font-weight: 700;
	line-height: 1.2;
	color: var(--cdl-ink);
	padding-top: var(--cdl-card-pad);
	padding-bottom: 10px;
}

.mphb-room-type .mphb-room-type-title a {
	color: inherit;
	text-decoration: none;
}

.mphb-room-type .mphb-room-type-title a:hover {
	color: var(--cdl-brand);
}

/* --- 5.3 "Details" heading — not in the Casa Roca layout -------------- */
.mphb-room-type > .mphb-room-type-details-title {
	display: none;
}

/* --- 5.4 Attributes ---------------------------------------------------
   Row 1: Adults / Children chips
   Row 2: Size      (own line)
   Row 3: View      (own line)
   Row 4: Bed Type  (own line)
   Row 5: Amenities tags
   ---------------------------------------------------------------------- */
.mphb-room-type > .mphb-loop-room-type-attributes {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 5px;
	list-style: none;
	padding-block: 0 14px;
	margin: 0;
}

.mphb-loop-room-type-attributes > li {
	margin: 0;
	font-family: var(--cdl-font-ui);
	font-size: 16px;
	line-height: 1.2;
	color: var(--cdl-text);
}

/* Capacity renders as compact chips */
.mphb-loop-room-type-attributes > .mphb-room-type-total-capacity,
.mphb-loop-room-type-attributes > .mphb-room-type-adults-capacity,
.mphb-loop-room-type-attributes > .mphb-room-type-children-capacity {
	order: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	padding: 5px 10px;
	background: var(--cdl-soft);
	border-radius: var(--cdl-radius);
	white-space: nowrap;
}

/* Size / View / Bed Type — one per line, label + value */
.mphb-loop-room-type-attributes > .mphb-room-type-size,
.mphb-loop-room-type-attributes > .mphb-room-type-view,
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type {
	flex: 1 0 100%;
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 0;
	background: none;
	border-radius: 0;
}

.mphb-loop-room-type-attributes > .mphb-room-type-size     { order: 2; margin-top: 4px; }
.mphb-loop-room-type-attributes > .mphb-room-type-view     { order: 3; }
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type { order: 4; }

.mphb-loop-room-type-attributes > .mphb-room-type-size > .mphb-attribute-title,
.mphb-loop-room-type-attributes > .mphb-room-type-view > .mphb-attribute-title,
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type > .mphb-attribute-title {
	flex: 0 0 96px;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	color: var(--cdl-text);
	opacity: 1;
}

.mphb-loop-room-type-attributes > .mphb-room-type-size > .mphb-attribute-value,
.mphb-loop-room-type-attributes > .mphb-room-type-view > .mphb-attribute-value,
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type > .mphb-attribute-value {
	font-size: 16px;
	font-weight: 500;
	color: var(--cdl-ink);
	text-transform: capitalize;
}

.mphb-loop-room-type-attributes .mphb-attribute-title {
	color: var(--cdl-text);
	opacity: 1;
}

.mphb-loop-room-type-attributes .mphb-attribute-value {
	color: var(--cdl-ink);
	font-weight: 500;
}

/* Amenities: own full-width row, rendered as outline tags */
.mphb-loop-room-type-attributes > .mphb-room-type-facilities {
	order: 5;
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Margins, not gap: the hidden comma text nodes are flex items too and a
	   gap would push the first tag of a line inwards */
	gap: 0;
	margin-top: 4px;
}

.mphb-room-type-facilities > .mphb-facilities-title {
	flex: 1 0 100%;
	font-size: 16px;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	color: var(--cdl-text);
	opacity: 1;
	margin-bottom: 8px;
}

.mphb-room-type-facilities > .mphb-attribute-value {
	display: contents;
}

.mphb-room-type-facilities > .mphb-attribute-value > span {
	display: inline-block;
}

/* Amenities are labels, not links — kill the click target */
.mphb-room-type-facilities > .mphb-attribute-value > span {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius-pill);
	font-size: 14px;
	line-height: 1.4;
	color: var(--cdl-text);
	margin: 0 6px 6px 0;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal; /* long tags wrap inside the pill */
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}

/* Hide the comma separators MotoPress prints between facilities */
.mphb-room-type-facilities > .mphb-attribute-value {
	font-size: 0;
}
.mphb-room-type-facilities > .mphb-attribute-value > span { font-size: 14px; }

/* --- 5.5 Description -------------------------------------------------- */
.mphb-room-type > p:not([class]) {
	order: 4;
	grid-row: 5;
	font-size: 16px;
	line-height: 1.6;
	color: var(--cdl-text);
	padding-bottom: 18px;
}

/* Cap long descriptions. Higher specificity: the theme sets display on p. */
.accommodation .mphb-room-type > p:not([class]) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;*/
	align-self: start;
}

/* --- 5.6 Footer: price left, button right ----------------------------
   One continuous separator drawn by the card's ::after, so the line is
   not split between the two footer cells.
   ---------------------------------------------------------------------- */
.mphb-room-type::after {
	content: "";
	order: 5;
	grid-column: 1 / -1;
	grid-row: 6;
	align-self: start;
	height: 1px;
	background: var(--cdl-line);
}

.mphb-room-type > .mphb-regular-price,
.mphb-room-type > .mphb-view-details-button-wrapper {
	grid-row: 6;
	align-self: center;
	padding-top: 16px;
	padding-bottom: 8px;
	border-top: 0;
}

.mphb-room-type > .mphb-regular-price {
	order: 5;
	grid-column: 1 / -1;
	flex-direction: column;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	font-family: var(--cdl-font-ui);
	font-size: 14px;
	color: var(--cdl-text);
	align-self: flex-start;
}

.mphb-room-type .cdl-club-badge {
	flex: 0 0 auto;
	margin-right: 100%;
}

.mphb-regular-price .cdl-price-note {
	font-size: 11px;
}

.mphb-regular-price > strong {
	flex: 1 0 100%;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	opacity: 1;
}

.mphb-regular-price .mphb-price {
	font-family: var(--cdl-font-title);
	font-size: 18px;
	line-height: 1;
	color: var(--cdl-ink);
	font-weight: 700;
}

.mphb-regular-price .mphb-price-period {
	font-size: 14px;
	font-weight: 400;
}

/* Book / Reserve block — search-results markup only.
   Own full-width row under the price. */
.mphb-room-type > .mphb-reserve-room-section {
	order: 6;
	grid-column: 1 / -1;
	grid-row: 7;
	align-self: end;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between; /* Book left, Confirm Reservation right */
	gap: 6px 12px;
	padding-inline: var(--cdl-card-pad);
	padding-top: 0;
	padding-bottom: var(--cdl-card-pad);
	margin: 0;
}

.mphb-reserve-room-section .mphb-rooms-reservation-message-wrapper {
	flex: 1 0 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	color: var(--cdl-text);
	order: 1;
}

.mphb-reserve-room-section .mphb-rooms-reservation-message {
	margin: 0;
}

.mphb-reserve-room-section .mphb-remove-from-reservation {
	font-size: 12px;
	text-decoration: underline;
	color: var(--cdl-text);
	order: 1;
}

.mphb-reserve-room-section .mphb-remove-from-reservation:hover {
	color: var(--cdl-brand);
}

/* Book block — [mphb_rooms] markup (home page list).
   div.mphb-to-book-btn-wrapper > form > button.mphb-book-button
   Same footer slot as the reserve section, so both listings look alike. */
.mphb-room-type > .mphb-to-book-btn-wrapper {
	order: 6;
	grid-column: 2;
	grid-row: 6;
	align-self: end; /* button sits on the card's bottom line */
	padding-top: 17px;
	padding-bottom: var(--cdl-card-pad);
	text-align: right;
}

.mphb-room-type > .mphb-to-book-btn-wrapper form {
	display: inline-block;
	margin: 0;
}

/* The plugin prints a stray <br> after the form */
.mphb-room-type > .mphb-to-book-btn-wrapper br {
	display: none;
}

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

/* Shared button shape */
.mphb-room-type .button,
.mphb-room-type .mphb-button,
.mphb-room-type .mphb-view-details-button,
.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
	display: inline-block;
	font-family: var(--cdl-font-ui);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	line-height: 1;
	border-radius: var(--cdl-radius-pill);
	padding: 13px 24px 12px;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Primary — Book / Confirm / Search */
.mphb-room-type .mphb-book-button,
.mphb-room-type .mphb-confirm-reservation,
.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
	color: var(--cdl-white);
	background: var(--cdl-brand);
	border: 1px solid var(--cdl-brand);
}

/* Book becomes secondary once a room is in the cart */
.mphb-rooms-added .mphb-book-button {
  background: transparent;
  color: #663264;
  border: 1px solid #663264;
}
.mphb-rooms-added .mphb-book-button:hover {
  background: rgba(102, 50, 100, .08);
}

/* Primary CTA gets a forward cue */
.mphb-confirm-reservation::after {
  content: "\2192";
  margin-left: .5em;
  display: inline-block;
  transition: transform .2s;
}

.mphb-confirm-reservation:hover::after {
  transform: translateX(3px);
}

@media (hover: hover) {
	.mphb-room-type .mphb-book-button:hover,
	.mphb-room-type .mphb-confirm-reservation:hover,
	.hotelSearch .mphb_sc_search-submit-button-wrapper .button:hover {
		color: var(--cdl-white);
		background: var(--cdl-brand-dark);
		border-color: var(--cdl-brand-dark);
	}

	/* Secondary — View Details: purple outline, grey on hover */
	.mphb-room-type .mphb-view-details-button {
		color: var(--cdl-brand);
		background: transparent;
		border: 1px solid var(--cdl-brand);
	}

	.mphb-room-type .mphb-view-details-button:hover {
		color: var(--cdl-ink);
		background: var(--cdl-soft);
		border-color: var(--cdl-line);
	}
}

/* View Details drops to its own full-width row under the footer */
.mphb-room-type > .mphb-view-details-button-wrapper {
	order: 7;
	grid-column: 1 / -1;
	grid-row: 7;
	align-self: end;
	text-align: left;
	padding-top: 0;
	padding-bottom: var(--cdl-card-pad);
}

.mphb-room-type > .mphb-view-details-button-wrapper .mphb-view-details-button {
	display: inline-block;
	width: auto;
}


/* =========================================================================
   6. GALLERY — MotoPress FlexSlider
   Thumbnail strip removed, Mirai-style single slider with hover arrows.
   ========================================================================= */

/* Thumbnails off */
.mphb-room-type .mphb-gallery-thumbnails-slider,
.mphb-room-type .mphb-gallery-thumbnail-slider {
	display: none !important;
}

.mphb-room-type .mphb-gallery-main-slider,
.mphb-room-type .mphb-flexslider-gallery-wrapper {
	margin: 0;
	border: 0;
	background: var(--cdl-soft);
	border-radius: 0;
	overflow: hidden;
}

.mphb-room-type .flex-viewport {
	aspect-ratio: var(--cdl-img-ratio);
}

.mphb-room-type .mphb-gallery-slider .slides {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.mphb-room-type .mphb-gallery-slider .slides > li {
	margin: 0;
	height: 100%;
}

.mphb-room-type .mphb-gallery-slider .gallery-item,
.mphb-room-type .mphb-gallery-slider .gallery-icon,
.mphb-room-type .mphb-gallery-slider .gallery-icon > a {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
}

/* !important: WP core gallery CSS + the plugin both set height/display on
   these images with higher specificity, which leaves a gap under the slide. */
.mphb-room-type .mphb-gallery-slider img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block !important;
	border: 0;
	border-radius: 0;
	vertical-align: top;
}

/* Caption / lightbox overlays MotoPress may print */
.mphb-room-type .mphb-gallery-slider .gallery-caption { display: none; }

/* --- 6.1 Arrows (cantodeluz.com hero style: bare chevron, no chrome) --- */
.mphb-room-type .flex-direction-nav {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	z-index: 2;
}

.mphb-room-type .flex-direction-nav a {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	/* !important: MotoPress sets font-size:16px / text-indent:0 on these,
	   which is what makes the "Previous" / "Next" labels show up. */
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	color: transparent !important;
	background: none;
	border: 0;
	opacity: 0;
	pointer-events: auto;
	transition: opacity .2s ease;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.mphb-room-type .flex-direction-nav a::before,
.mphb-room-type .flex-direction-nav a::after {
	content: none;
}

/* CSS chevron */
.mphb-room-type .flex-direction-nav a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	border-top: 2px solid var(--cdl-white);
	border-right: 2px solid var(--cdl-white);
	transform-origin: center;
}

.mphb-room-type .flex-direction-nav .flex-prev {
	left: 10px;
}
.mphb-room-type .flex-direction-nav .flex-prev::before {
	transform: translate(-40%, -50%) rotate(-135deg);
}

.mphb-room-type .flex-direction-nav .flex-next {
	right: 10px;
}
.mphb-room-type .flex-direction-nav .flex-next::before {
	transform: translate(-60%, -50%) rotate(45deg);
}

.mphb-room-type:hover .flex-direction-nav a,
.mphb-room-type .flex-direction-nav a:focus-visible {
	opacity: 1;
}

.mphb-room-type .flex-direction-nav a:focus-visible {
	outline: 2px solid var(--cdl-white);
	outline-offset: 2px;
}

/* Touch devices have no hover — keep the arrows visible */
@media (hover: none) {
	.mphb-room-type .flex-direction-nav a { opacity: .9; }
}

/* Dot pagination, if MotoPress prints it */
.mphb-room-type .flex-control-nav {
	position: absolute;
	bottom: 12px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 2;
}

.mphb-room-type .flex-control-nav li { margin: 0; }

.mphb-room-type .flex-control-nav a {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	font-size: 0;
	text-indent: -9999px;
	box-shadow: none;
	transition: background-color .2s ease;
}

.mphb-room-type .flex-control-nav a.flex-active {
	background: var(--cdl-white);
}


/* =========================================================================
   7. SEARCH FORM  —  wrapper has the custom class .hotelSearch
   Markup: div.mphb_sc_search-wrapper.hotelSearch > form.mphb_sc_search-form
             > p.mphb_sc_search-check-in-date  (label + br + input)
             > p.mphb_sc_search-check-out-date
             > p.mphb_sc_search-adults         (label + br + select)
             > p.mphb_sc_search-children
             > p.mphb_sc_search-submit-button-wrapper
   ========================================================================= */

.hotelSearch {
	width: 100%;
	max-width: calc(var(--cdl-container) + (var(--cdl-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cdl-gutter);
	box-sizing: border-box;
}

/* --- 7.1 Sticky search bar (desktop only) -----------------------------
   The reference pins the search to the top of the viewport while the
   results scroll under it, on a translucent band of the page ground.
   Pure CSS: position:sticky needs no scroll listener.

   Only the form travels. Keep the guest-age note and anything else in
   their own blocks OUTSIDE .hotelSearch, or they stick along with it.
   ---------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.hotelSearch {
		position: sticky;
		top: 0;
		z-index: 30;
		padding-block: 12px;
		background: rgba(246, 246, 246, .66);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
	}

	/* The bar itself reads as one floating control, as on the reference. */
	.hotelSearch .mphb_sc_search-form {
		border-radius: var(--cdl-radius-pill);
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
		padding-inline: 28px;
	}
}


.hotelSearch .mphb_sc_search-form {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	align-items: end;
	gap: 16px;
	padding: 20px var(--cdl-card-pad);
	background: var(--cdl-white);
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
}

/* "* required fields" tip — noise */
.hotelSearch .mphb-required-fields-tip { display: none; }

.hotelSearch .mphb_sc_search-form > p {
	margin: 0;
	min-width: 0;
}

.hotelSearch .mphb_sc_search-form label {
	display: block;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	color: var(--cdl-text);
	opacity: 1;
	margin-bottom: 6px;
	white-space: nowrap;
}

/* The plugin separates label and field with a <br> */
.hotelSearch .mphb_sc_search-form br { display: none; }

.hotelSearch .mphb_sc_search-form label abbr {
	border: 0;
	text-decoration: none;
	color: var(--cdl-brand);
}

.hotelSearch .mphb_sc_search-form input[type="text"],
.hotelSearch .mphb_sc_search-form select {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--cdl-font-body);
	font-size: 16px;
	line-height: 1.2;
	color: var(--cdl-ink);
	background: var(--cdl-white);
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
	padding: 12px 14px;
	height: 44px;
	transition: border-color .2s ease;
}

.hotelSearch .mphb_sc_search-form input[type="text"]:focus,
.hotelSearch .mphb_sc_search-form select:focus {
	outline: none;
	border-color: var(--cdl-brand);
}

.hotelSearch .mphb_sc_search-form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--cdl-text) 50%),
	                  linear-gradient(135deg, var(--cdl-text) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
	height: 44px;
	padding-block: 0;
	border: 1px solid var(--cdl-brand);
}

/* Datepicker popup */
.mphb-datepick-popup,
.datepick-popup {
	font-family: var(--cdl-font-body);
	border-radius: var(--cdl-radius);
	border-color: var(--cdl-line);
}

/* Cart confirm button uses the primary style too */
.mphb-reservation-cart .mphb-confirm-reservation {
	display: inline-block;
	font-family: var(--cdl-font-ui);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	line-height: 1;
	color: var(--cdl-white);
	background: var(--cdl-brand);
	border: 1px solid var(--cdl-brand);
	border-radius: var(--cdl-radius-pill);
	padding: 13px 24px 12px;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.mphb-reservation-cart .mphb-confirm-reservation:hover {
	background: var(--cdl-brand-dark);
	border-color: var(--cdl-brand-dark);
}


/* =========================================================================
   8. RESPONSIVE
   ========================================================================= */

/* Tablet: 2 columns */
@media (max-width: 1024px) {
	:root {
		--cdl-cols: 2;
		--cdl-grid-gap: 24px;
		--cdl-section-pad: 48px;
	}

	.hotelSearch .mphb_sc_search-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
		width: 100%;
	}
}

/* Mobile: 1 column */
@media (max-width: 767px) {
	:root {
		--cdl-cols: 1;
		--cdl-grid-gap: 20px;
		--cdl-card-pad: 20px;
		--cdl-section-pad: 36px;
		--cdl-img-ratio: 16 / 10;
	}

	/* Footer stacks so the button gets full width */
	.mphb-room-type {
		grid-template-columns: 1fr;
	}

	.hotelSearch .mphb_sc_search-form {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px 16px;
	}

	.mphb-room-type::after,
	.mphb-room-type > .mphb-regular-price,
	.mphb-room-type > .mphb-reserve-room-section,
	.mphb-room-type > .mphb-to-book-btn-wrapper,
	.mphb-room-type > .mphb-view-details-button-wrapper {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Stacked footer: the separator would sit right above the button
	   for no reason, so drop it */
	.mphb-room-type::after {
		display: none;
	}

	.mphb-room-type > .mphb-to-book-btn-wrapper {
		padding-top: 0;
		text-align: left;
	}

	.mphb-room-type > .mphb-to-book-btn-wrapper form,
	.mphb-room-type > .mphb-to-book-btn-wrapper .mphb-book-button {
		display: block;
		width: 100%;
	}

	.mphb-room-type > .mphb-reserve-room-section {
		align-items: stretch;
		padding-top: 0;
		padding-bottom: 10px;
	}

	.mphb-room-type > .mphb-reserve-room-section .mphb-button {
		width: 100%;
	}

	.mphb-room-type > .mphb-reserve-room-section .mphb-rooms-reservation-message-wrapper {
		justify-content: flex-start;
		text-align: left;
	}

	.mphb-room-type > .mphb-regular-price {
		padding-bottom: 14px;
	}

	.mphb-room-type > .mphb-view-details-button-wrapper {
		padding-top: 0;
		text-align: left;
	}

	.mphb-room-type .mphb-view-details-button,
	.mphb-room-type .button {
		display: block;
		text-align: center;
	}

	.mphb-room-type > p:not([class]) {
		-webkit-line-clamp: 4;
	}

	/* --- Datepicker on phones -----------------------------------------
	   iOS zooms the whole page whenever a focused field is under 16px, and
	   the two-month popup is wider than the viewport. Both fixed here. */
	.hotelSearch .mphb_sc_search-form input[type="text"],
	.hotelSearch .mphb_sc_search-form select {
		font-size: 16px;
	}

	/* The popup is absolutely positioned next to the field and sized for two
	   months side by side, which never fits a phone. Pin it to the viewport
	   instead and let it stack and scroll. */
	.datepick-popup {
		position: fixed !important;
		top: 12px !important;
		left: 12px !important;
		right: 12px !important;
		bottom: auto !important;
		width: auto !important;
		max-width: none !important;
		max-height: calc(100vh - 24px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 100000;
		background: var(--cdl-white);
		border: 1px solid var(--cdl-line);
		border-radius: var(--cdl-radius);
		box-shadow: 0 12px 40px rgba(45, 45, 45, .18);
		box-sizing: border-box;
	}

	.datepick-popup .datepick,
	.datepick-popup .datepick-multi {
		width: 100% !important;
		box-sizing: border-box;
		border: 0;
	}

	/* Two-month layout stacks instead of overflowing */
	.datepick-popup .datepick-month {
		float: none !important;
		width: 100% !important;
		margin: 0 0 8px;
		box-sizing: border-box;
	}

	.datepick-popup table {
		width: 100%;
		table-layout: fixed;
	}

	.datepick-popup .datepick-ctrl,
	.datepick-popup .datepick-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		width: 100% !important;
		box-sizing: border-box;
		padding: 8px 12px;
	}

	.datepick-popup .datepick-cmd {
		width: auto !important;
		padding: 8px 4px !important;
	}

	.mphb-datepick-popup {
		--cdl-day-size: 34px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.mphb-room-type .flex-direction-nav a,
	.mphb-room-type .mphb-view-details-button,
	.mphb-room-type .button {
		transition: none;
	}
}
/* =========================================================================
   Append to cdl-accommodations.css (the general stylesheet).

   A. Global centering for every MotoPress shortcode wrapper
   B. Booking confirmation / thank-you page  (.hotelConfirm)
   ========================================================================= */


/* =========================================================================
   A. GLOBAL CENTERING
   Every MPHB shortcode prints a top-level div whose class starts with
   "mphb_sc_". Centering them here means new shortcodes are handled too,
   and .accommodation / .hotelSearch / .hotelCheckout keep working as before.
   ========================================================================= */

body > [class*="mphb_sc_"],
.entry-content > [class*="mphb_sc_"],
.site-main > [class*="mphb_sc_"],
.page-content > [class*="mphb_sc_"] {
	width: 100%;
	max-width: calc(var(--cdl-container) + (var(--cdl-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--cdl-gutter);
	box-sizing: border-box;
}


/* =========================================================================
   B. BOOKING CONFIRMATION  (.hotelConfirm)
   Markup: div.mphb_sc_booking_confirmation.hotelConfirm
             > p                                    (status messages)
             > div.mphb-booking-details-section.booking
                 > h3.mphb-booking-details-title
                 > ul.mphb-booking-details
                     > li.booking-number|booking-check-in|booking-check-out|
                        booking-price|booking-status
                         > span.label + span.value
                 > div.accommodations
                     > span.accommodations-title + span.accommodations-list
             > div.mphb-booking-details-section.payment   (same ul markup)
   ========================================================================= */

.hotelConfirm {
	padding-block: var(--cdl-section-pad);
	font-family: var(--cdl-font-body);
	color: var(--cdl-text);
}


/* -------------------------------------------------------------------------
   B1. Status messages
   ------------------------------------------------------------------------- */

.hotelConfirm > p {
	margin: 0 0 16px;
	padding: 18px var(--cdl-card-pad);
	background: var(--cdl-soft);
	border-left: 3px solid var(--cdl-brand);
	border-radius: var(--cdl-radius);
	font-size: 16px;
	line-height: 1.5;
	color: var(--cdl-ink);
}

.hotelConfirm > p ~ p {
	font-size: 16px;
}

.hotelConfirm > p:last-of-type {
	margin-bottom: 32px;
}


/* -------------------------------------------------------------------------
   B2. Detail sections as cards
   ------------------------------------------------------------------------- */

.hotelConfirm .mphb-booking-details-section {
	background: var(--cdl-white);
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
	padding: var(--cdl-card-pad);
	margin: 0;
}

.hotelConfirm .mphb-booking-details-section + .mphb-booking-details-section {
	margin-top: 24px;
}

.hotelConfirm .mphb-booking-details-title {
	font-family: var(--cdl-font-title);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cdl-ink);
	margin: 0 0 16px;
}


/* -------------------------------------------------------------------------
   B3. Label / value rows
   Flex rows rather than a grid, so the separator always spans the full card
   width and the accommodations row lines up with the list above it.
   ------------------------------------------------------------------------- */

.hotelConfirm .mphb-booking-details {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hotelConfirm .mphb-booking-details > li,
.hotelConfirm .accommodations {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--cdl-line);
}

.hotelConfirm .mphb-booking-details > li:first-child {
	border-top: 1px solid var(--cdl-line);
}

/* No trailing rule at the bottom of a card */
.hotelConfirm .mphb-booking-details-section > *:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.hotelConfirm .mphb-booking-details .label,
.hotelConfirm .accommodations-title {
	flex: 0 0 auto;
	font-family: var(--cdl-font-ui);
	font-size: .85em;
	font-weight: 500;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	color: var(--cdl-text);
	opacity: 1;
	padding: 0;
	border: 0;
}

.hotelConfirm .cdl-rate-details .label, 
.hotelConfirm .booking-status .label {
	font-size: .85em;
	font-weight: 500;
}

.hotelConfirm .cdl-rate-details .value, 
.hotelConfirm .accommodations .accommodations-list {
	font-weight: 700;	
}

.hotelConfirm .mphb-booking-details .value,
.hotelConfirm .accommodations-list {
	flex: 1 1 auto;
	text-align: right;
	font-size: 16px;
	line-height: 1.4;
	color: var(--cdl-ink);
	padding: 0;
	border: 0;
}

/* Money row */
.hotelConfirm .booking-price .value,
.hotelConfirm .payment-price .value {
	font-family: var(--cdl-font-title);
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
}

/* Status as a solid brand badge, same language as the buttons */
.hotelConfirm .booking-status .value,
.hotelConfirm .payment-status .value {
	flex: 0 0 auto;
	display: inline-block;
	padding: 7px 14px 6px;
	background: var(--cdl-brand);
	border: 0;
	border-radius: var(--cdl-radius-pill);
	color: var(--cdl-white);
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	line-height: 1;
}

.hotelConfirm .accommodations-list a {
	color: var(--cdl-ink);
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}


/* -------------------------------------------------------------------------
   B4. Price breakdown table, if the page prints one
   ------------------------------------------------------------------------- */

.hotelConfirm .mphb-price-breakdown {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 8px;
}

.hotelConfirm .mphb-price-breakdown th,
.hotelConfirm .mphb-price-breakdown td {
	padding: 10px 0;
	border: 0;
	border-top: 1px solid var(--cdl-line);
	text-align: left;
	font-weight: 400;
	vertical-align: top;
}

.hotelConfirm .mphb-price-breakdown .mphb-table-price-column {
	text-align: right;
	white-space: nowrap;
	color: var(--cdl-ink);
}

.hotelConfirm .mphb-price-breakdown-total th,
.hotelConfirm .mphb-price-breakdown-deposit th {
	font-weight: 700;
	color: var(--cdl-ink);
}


/* -------------------------------------------------------------------------
   B5. Payment instructions
   ------------------------------------------------------------------------- */

.hotelConfirm .mphb-payment-instructions {
	margin: 24px 0 0;
	padding: 18px var(--cdl-card-pad);
	background: var(--cdl-soft);
	border-radius: var(--cdl-radius);
	font-size: 16px;
	line-height: 1.6;
}


/* -------------------------------------------------------------------------
   B6. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.hotelConfirm .mphb-booking-details > li,
	.hotelConfirm .accommodations {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.hotelConfirm .mphb-booking-details .value,
	.hotelConfirm .accommodations-list {
		text-align: left;
	}
}


/* =========================================================================
   HEADER: logo + booking step bar
   ========================================================================= */

.cdl-header-inner {
	gap: 40px;
	width: 100%;
}

/* Logo is the page's h1, so reset the heading styles theme.json gives it.
   Flex + line-height:0 on the link stops the inline baseline gap that was
   clipping the bottom of the wordmark on small screens. */
.cdl-logo {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 1;
	overflow: visible;
}

.cdl-logo a {
	display: flex;
	line-height: 0;
	text-decoration: none;
}

/* Explicit height, not `auto`: an intrinsic height computed from the
   viewBox lands on a fraction of a pixel and the descenders get clipped. */
.cdl-logo svg {
	display: block;
	width: 120px;
	height: 17px;
	overflow: visible;
}

/* Wordmark uses currentColor, the "de luz" mark uses --cdl-brand */
.cdl-logo a {
	color: var(--cdl-ink);
}

.cdl-logo a:hover {
	color: var(--cdl-brand);
}

.cdl-steps {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.cdl-step {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	color: var(--cdl-text);
	opacity: 1;
	white-space: nowrap;
	min-width: 0;
}

/* Dashed connector between steps, vertically centred.
   The ::after is a flex item of the step itself, so it grows into the space
   left over and always sits on the circles' centre line. */
.cdl-step:not(:last-child) {
	flex: 1 1 auto;
}

.cdl-step:not(:last-child)::after {
	content: "";
	flex: 1 1 40px;
	min-width: 20px;
	height: 0;
	margin: 0 14px;
	border-top: 1px dashed var(--cdl-line);
}

.cdl-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
}

.cdl-step.is-active {
	color: var(--cdl-brand);
	opacity: 1;
	font-weight: 700;
}

.cdl-step.is-active .cdl-step-num {
	background: var(--cdl-brand);
	border-color: var(--cdl-brand);
	color: var(--cdl-white);
	font-weight: 700;
}

.cdl-step.is-done {
	color: var(--cdl-ink);
	opacity: 1;
}

.cdl-step.is-done .cdl-step-num {
	background: var(--cdl-soft);
	border-color: var(--cdl-line);
	color: var(--cdl-ink);
	position: relative;
	font-size: 0;          /* hide the digit */
}

/* A completed step shows a tick instead of its number */
.cdl-step.is-done .cdl-step-num::after {
	content: "";
	position: absolute;
	top: 46%;
	left: 50%;
	width: 10px;
	height: 5px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 767px) {
	.cdl-header-inner { gap: 16px; }

	.cdl-logo svg {
		width: 96px;
		height: 14px;
	}

	.cdl-step { gap: 8px; }

	.cdl-step:not(:last-child)::after {
		margin: 0 8px;
		min-width: 14px;
	}

	/* Only the current step keeps its label.
	   font-size:0 on the step hides bare text nodes too, so it works whether
	   or not the label is wrapped in a .cdl-step-label span. */
	.cdl-step:not(.is-active) {
		font-size: 0;
	}

	.cdl-step:not(.is-active) .cdl-step-label {
		display: none;
	}

	.cdl-step:not(.is-active):not(.is-done) .cdl-step-num {
		font-size: 12px;
	}
}

.infoChild {
	width: 100%;
	max-width: calc(var(--cdl-container) + (var(--cdl-gutter) * 2));
	margin: 10px auto 0;
	padding-inline: var(--cdl-gutter);
	box-sizing: border-box;
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	line-height: 1.5;
	color: var(--cdl-text);
	opacity: 1;
}

.infoChild::before {
	content: "i";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 12px;
	font-style: italic;
	line-height: 1;
	opacity: 1;
	transform: translateY(1px);
}

@media (max-width: 767px) {
	.infoChild {
		padding-inline: 16px;
		font-size: 12px;
	}
}

/* currency changer */

.cdl-currency {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.cdl-currency-select {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 6px 28px 6px 10px;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	letter-spacing: var(--cdl-ls-ui);
	text-transform: none;
	line-height: 1;
	color: var(--cdl-ink);
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, var(--cdl-text) 50%),
	                  linear-gradient(135deg, var(--cdl-text) 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
	cursor: pointer;
	transition: border-color .2s ease;
}

.cdl-currency-select:hover,
.cdl-currency-select:focus {
	outline: none;
	border-color: var(--cdl-brand);
}

.cdl-currency-select:disabled {
	opacity: .5;
	cursor: wait;
}

.cdl-currency .screen-reader-text {
	text-indent: -9999px;
}

@media (max-width: 767px) {
	.cdl-currency-select {
		font-size: 16px;
		padding: 6px 26px 6px 8px;
	}
}

/* =========================================================================
   9. HEADER TOOLS, ICONS, SEARCH BAR WIDTHS
   Appended last on purpose: these override the grid and header rules above.
   ========================================================================= */

/* --- Icon helper ------------------------------------------------------
   Every icon is a mask, so it inherits the text colour and needs no
   per-colour copy of the file. */
.cdl-icon,
.cdl-tool > svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* --- Header tools (currency + language) ------------------------------- */
.cdl-tools {
	display: flex;
	align-items: center;
	gap: 18px;
}

.cdl-tool,
.cdl-tools .cdl-currency {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	color: var(--cdl-text);
}

.cdl-tools select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	padding: 0 14px 0 0;
	margin: 0;
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--cdl-ink);
	cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--cdl-text) 50%),
	                  linear-gradient(135deg, var(--cdl-text) 50%, transparent 50%);
	background-position: calc(100% - 5px) 50%, calc(100% - 1px) 50%;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.cdl-tools select:focus-visible {
	outline: 1px solid var(--cdl-line);
	outline-offset: 2px;
}

/* The live header puts the currency shortcode and the WPML dropdown in the
   header group as plain siblings, so they are addressed directly. */
.cdl-header-inner > .cdl-currency,
.cdl-header-inner > .wpml-ls {
	display: flex;
	align-items: center;
	margin: 0;
}

.cdl-header-inner > .cdl-currency { order: 1; }
.cdl-header-inner > .wpml-ls      { order: 2; }
.cdl-header-inner > .cdl-steps    { order: 3; }

@media (min-width: 768px) {
	/* Logo, steps, then the two switchers pinned to the right edge. */
	.cdl-header-inner > .cdl-steps { order: 2; }

	.cdl-header-inner > .cdl-currency {
		order: 3;
		margin-left: auto;
	}

	.cdl-header-inner > .wpml-ls { order: 4; }

	.cdl-steps {
		flex: 0 0 auto;
		margin-left: 40px;
	}

	.cdl-step:not(:last-child) {
		flex: 0 0 auto;
	}

	/* A short rule between the numbers, as on the reference, not a
	   stretching connector. */
	.cdl-step:not(:last-child)::after {
		flex: 0 0 32px;
		width: 32px;
		min-width: 0;
		margin: 0 12px;
	}
}

/* Mobile: logo and the tools share the first row, steps drop below. */
@media (max-width: 767px) {
	.cdl-header-inner {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.cdl-tools {
		order: 2;
		gap: 12px;
	}

	.cdl-header-inner > .cdl-steps {
		order: 3;
		flex: 1 0 100%;
		margin-left: 0;
	}

	.cdl-header-inner > .cdl-currency { margin-left: auto; }
}

/* --- Search bar: icons, narrow guest selects, centred ------------------ */
.hotelSearch .mphb_sc_search-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: end;
	gap: 16px;
}

.hotelSearch .mphb_sc_search-form > p {
	position: relative;
	flex: 0 0 auto;
}

/* Dates need room for "dd/mm/yyyy" plus the icon, guests do not. */
.hotelSearch .mphb_sc_search-form > p[class*="check-in"],
.hotelSearch .mphb_sc_search-form > p[class*="check-out"] {
	flex: 0 1 210px;
}

.hotelSearch .mphb_sc_search-form > p[class*="adults"],
.hotelSearch .mphb_sc_search-form > p[class*="children"] {
	flex: 0 0 auto;
}

.hotelSearch .mphb_sc_search-form > p[class*="adults"] select,
.hotelSearch .mphb_sc_search-form > p[class*="children"] select {
	width: auto;
	min-width: 0;
}

/* The icon sits inside the field, so it lines up with the value. */
.hotelSearch .mphb_sc_search-form > p[class*="check-in"]::before,
.hotelSearch .mphb_sc_search-form > p[class*="check-out"]::before,
.hotelSearch .mphb_sc_search-form > p[class*="adults"]::before,
.hotelSearch .mphb_sc_search-form > p[class*="children"]::before {
	content: "";
	position: absolute;
	left: 14px;
	bottom: 13px;
	width: 18px;
	height: 18px;
	background-color: var(--cdl-text);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	pointer-events: none;
}

.hotelSearch .mphb_sc_search-form > p[class*="check-in"]::before,
.hotelSearch .mphb_sc_search-form > p[class*="check-out"]::before {
	-webkit-mask-image: url("../icons/calendar_month.svg");
	mask-image: url("../icons/calendar_month.svg");
}

.hotelSearch .mphb_sc_search-form > p[class*="adults"]::before {
	-webkit-mask-image: url("../icons/person.svg");
	mask-image: url("../icons/person.svg");
}

.hotelSearch .mphb_sc_search-form > p[class*="children"]::before {
	-webkit-mask-image: url("../icons/group.svg");
	mask-image: url("../icons/group.svg");
}

.hotelSearch .mphb_sc_search-form > p[class*="check-in"] input[type="text"],
.hotelSearch .mphb_sc_search-form > p[class*="check-out"] input[type="text"],
.hotelSearch .mphb_sc_search-form > p[class*="adults"] select,
.hotelSearch .mphb_sc_search-form > p[class*="children"] select {
	padding-left: 40px;
}

/* Search button is the magnifier, no label. font-size:0 hides the value
   text of an <input type="submit"> as well as a <button>'s text node. */
.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-size: 0;
	width: 44px;
	min-width: 44px;
	padding: 0;
}

/* The submit control is an <input>, which has no ::before, so the icon is
   painted on the wrapper and centred over the button. */
.hotelSearch .mphb_sc_search-submit-button-wrapper {
	position: relative;
	display: flex;
	align-items: end;
}

.hotelSearch .mphb_sc_search-submit-button-wrapper::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12px;
	width: 20px;
	height: 20px;
	transform: translateX(-50%);
	background-color: var(--cdl-white);
	-webkit-mask: url("../icons/search.svg") no-repeat center / 20px 20px;
	mask: url("../icons/search.svg") no-repeat center / 20px 20px;
	pointer-events: none;
}

@media (max-width: 767px) {
	.hotelSearch .mphb_sc_search-form > p {
		flex: 1 0 100%;
	}

	.hotelSearch .mphb_sc_search-form > p[class*="adults"],
	.hotelSearch .mphb_sc_search-form > p[class*="children"] {
		flex: 1 0 calc(50% - 8px);
	}

	.hotelSearch .mphb_sc_search-form > p[class*="adults"] select,
	.hotelSearch .mphb_sc_search-form > p[class*="children"] select {
		width: 100%;
	}

	/* Full width tap target on a phone, icon still centred. */
	.hotelSearch .mphb_sc_search-submit-button-wrapper .button {
		width: 100%;
		min-width: 0;
	}
}

/* --- Card attribute icons --------------------------------------------- */
.mphb-loop-room-type-attributes > .mphb-room-type-size::before,
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type::before,
.mphb-loop-room-type-attributes > .mphb-room-type-total-capacity::before {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 18px;
	height: 18px;
	margin-right: 6px;
	background-color: var(--cdl-text);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
}

.mphb-loop-room-type-attributes > .mphb-room-type-size::before {
	-webkit-mask-image: url("../icons/straighten.svg");
	mask-image: url("../icons/straighten.svg");
}

.mphb-loop-room-type-attributes > .mphb-room-type-bed-type::before {
	-webkit-mask-image: url("../icons/king_bed.svg");
	mask-image: url("../icons/king_bed.svg");
}

.mphb-loop-room-type-attributes > .mphb-room-type-total-capacity::before {
	-webkit-mask-image: url("../icons/group.svg");
	mask-image: url("../icons/group.svg");
}

/* --- Unavailable cards read a touch lighter --------------------------- */
.accommodation > .mphb-room-type.unavailable {
	opacity: .85;
}

/* Types with several units: always book one, the quantity picker is noise */
.mphb-room-type .mphb-rooms-quantity-wrapper {
	display: none;
}

/* =========================================================================
   In Good Company (pattern: patterns/in-good-company.php)
   ========================================================================= */

.cdl-igc {
	border: 1px solid var(--cdl-line);
	border-radius: var(--cdl-radius);
	overflow: hidden;
	background: var(--cdl-white);
	/* Same edges as the search panel and the results grid */
	box-sizing: border-box;
	width: calc(100% - (var(--cdl-gutter) * 2));
	max-width: var(--cdl-container);
	margin: 20px auto 0 !important;
}

.cdl-igc .cdl-igc-head {
	gap: 16px;
	padding: 12px 20px;
	background: var(--cdl-soft);
	border-bottom: 1px solid var(--cdl-line);
}

.cdl-igc .cdl-igc-title {
	margin: 0;
	font-weight: 600;
}

.cdl-igc .cdl-club-toggle {
	flex-direction: row-reverse;
	padding: 6px 8px 6px 14px;
	background: var(--cdl-white);
	border-radius: 999px;
}

.cdl-igc .cdl-igc-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0;
	padding: 14px 20px;
	list-style: none;
}

.cdl-igc .cdl-igc-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.cdl-igc .cdl-igc-list li::before {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--cdl-igc-icon) center / 18px 18px no-repeat;
	mask: var(--cdl-igc-icon) center / 18px 18px no-repeat;
}

.cdl-igc .cdl-igc-rates { --cdl-igc-icon: url("../icons/percent.svg"); }
.cdl-igc .cdl-igc-gift  { --cdl-igc-icon: url("../icons/redeem.svg"); }
.cdl-igc .cdl-igc-pour  { --cdl-igc-icon: url("../icons/wine_bar.svg"); }
.cdl-igc .cdl-igc-vip   { --cdl-igc-icon: url("../icons/local_offer.svg"); }

@media (max-width: 781px) {
	.cdl-igc .cdl-igc-head {
		flex-wrap: wrap;
	}

	.cdl-igc .cdl-igc-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Search page rhythm: panel, note, 20px, In Good Company, 20px, results */
.mphb_sc_search_results-wrapper.accommodation {
	margin-top: 20px !important;
	padding-top: 0;
}

/* Rate chooser: same side padding as every other card row */
.mphb-room-type > .cdl-rates {
	padding-inline: var(--cdl-card-pad);
}

/* Capacity chips: Max Guests alone on the first line, adults and children
   together underneath */
.mphb-loop-room-type-attributes > .mphb-room-type-total-capacity {
	order: 0;
	flex: 0 0 auto;
	width: fit-content;
	max-width: 100%;
	margin-right: 100%;
}

.mphb-loop-room-type-attributes > .mphb-room-type-adults-capacity,
.mphb-loop-room-type-attributes > .mphb-room-type-children-capacity {
	order: 1;
}

/* A two-line bed type keeps its icon on the first line */
.mphb-loop-room-type-attributes > .mphb-room-type-bed-type {
	align-items: flex-start;
}

.mphb-loop-room-type-attributes > .mphb-room-type-bed-type::before {
	align-self: flex-start;
	margin-top: 2px;
}

/* =========================================================================
   Reservation received page (theme templates in hotel-booking/)
   ========================================================================= */

.hotelConfirm .cdl-confirmation-headline {
	margin: 0 0 12px;
}

.hotelConfirm .cdl-occupancy-note {
	margin: 0 0 24px;
}

/* The short facts sit side by side and wrap to the next line when they run
   out of room */
.hotelConfirm .mphb-booking-details {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

.hotelConfirm .mphb-booking-details > li {
	flex: 1 1 160px;
	justify-content: flex-start;
	gap: 8px;
}

.hotelConfirm .mphb-booking-details > li .value {
	flex: 0 0 auto;
	text-align: left;
	font-weight: 700;
}

/* Room, Rate Details and Status: full width, label and value left aligned */
.hotelConfirm .cdl-detail-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cdl-line);
}

.hotelConfirm .cdl-detail-row .value,
.hotelConfirm .cdl-detail-row .accommodations-list {
	flex: 1 1 auto;
	text-align: left;
}

.hotelConfirm .accommodations.cdl-detail-row {
	justify-content: flex-start;
}

/* The payment id means nothing to the guest */
.hotelConfirm .mphb-booking-details-section.payment .mphb-booking-details > li:first-child {
	display: none;
}

.hotelConfirm .cdl-next-payment {
	margin: 16px 0 0;
}

/* Room, Rate Details and Status read in the same face as the values above */
.hotelConfirm .cdl-detail-row .value,
.hotelConfirm .cdl-detail-row .accommodations-list {
	font-family: var(--cdl-font-ui);
	font-size: 16px;
	line-height: 1.4;
	color: var(--cdl-ink);
}

/* The status badge is as wide as its text */
.hotelConfirm .cdl-detail-row.booking-status .value,
.hotelConfirm .mphb-booking-details .payment-number:nth-last-child(1) .value {
	flex: 0 0 auto;
	width: fit-content;
	display: inline-block;
	padding: 7px 14px 6px;
	background: var(--cdl-brand);
	border-radius: var(--cdl-radius-pill);
	color: var(--cdl-white);
	font-family: var(--cdl-font-ui);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

/* The next payment line closes the payment card */
.hotelConfirm .mphb-booking-details-section.payment {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.hotelConfirm .cdl-next-payment {
	margin: 0;
	padding: 16px var(--cdl-card-pad) var(--cdl-card-pad);
	background: var(--cdl-white);
	border: 1px solid var(--cdl-line);
	border-top: 0;
	border-radius: 0 0 var(--cdl-radius) var(--cdl-radius);
	font-family: var(--cdl-font-ui);
	font-size: 14px;
	line-height: 1.5;
}

.hotelConfirm .cdl-next-payment::before,
.hotelConfirm .cdl-next-payment::after {
	content: none;
}

.hotelConfirm .mphb-booking-details li {
	border-top: 0;
	border-right: 0 !important;
}

@media (max-width: 767px) {
  #__EAAPS_PORTAL [class*="FloatingButton__FloatingButtonContainer"] {
    margin-bottom: 80px !important;
  }
  #__EAAPS_PORTAL [class*="FloatingWindow__Container"] {
    bottom: 110px !important;
  }
}