/* ==========================================================================
   The Moon Homestay - booking
   Room pages and everything Hotel Booking Lite (MotoPress) prints: the
   availability bar, room details, prices, booking forms, the availability
   calendar, search results, checkout and the payment panel.

   Class names come from the plugin's own templates. Selectors are prefixed
   with a parent class where the plugin's stylesheet would otherwise win.
   ========================================================================== */

/* ---------- Search and booking fields ---------- */

/* The "Required fields are followed by *" note and the asterisks add nothing
   in short date forms where every field is obviously needed. */
.avail .mphb-required-fields-tip,
.avail label abbr,
.book-card .mphb-required-fields-tip,
.book-card label abbr,
.search-top .mphb-required-fields-tip,
.search-top label abbr {
	display: none;
}

/* A calendar in every date field and a person in every guest count. */
input.mphb-datepick {
	padding-left: 2.7rem;
	background-image: var(--i-calendar);
	background-position: left .95rem center;
	background-size: 1.1rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

select[name="mphb_adults"],
select[name="mphb_children"],
select[name$="[adults]"],
select[name$="[children]"] {
	padding-left: 2.7rem;
	background-image: var(--i-user), var(--i-chevron);
	background-position: left .95rem center, right .9rem center;
	background-size: 1.1rem, 1rem;
	background-repeat: no-repeat;
}

/* ---------- Required-field notes elsewhere ---------- */

.mphb-required-fields-tip {
	margin: 0 0 1rem;
	font-size: .82rem;
	color: var(--muted);
}

abbr[title="required"],
abbr[title="Required"] {
	color: var(--danger);
	text-decoration: none;
	border: 0;
}

/* ---------- Room page: header ---------- */

.page-hero--room {
	padding-bottom: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
}

.page-hero--room .page-hero__in > * {
	max-width: none;
}

.room-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 1.5rem 3rem;
}

@media (max-width: 860px) {
	.room-head {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

.room-head__main {
	display: grid;
	gap: 1rem;
	max-width: 62ch;
}

.room-head__book {
	display: grid;
	justify-items: end;
	gap: .8rem;
	text-align: right;
}

@media (max-width: 860px) {
	.room-head__book {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: .8rem 1.5rem;
		padding: 1rem 1.2rem;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		text-align: left;
	}
}

.room-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .2rem 0 0;
	padding: 0;
	list-style: none;
}

.room-facts li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .95rem .45rem .75rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: .9rem;
	color: var(--ink-2);
}

.room-facts .icon {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--sea);
}

/* "From ₹3,500 / night", shared by the header, the booking card and the bar. */
.room-price {
	margin: 0;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.room-price__from {
	display: block;
	margin-bottom: .2rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

.room-price__amount,
.room-price .mphb-price {
	font-family: var(--f-display);
	font-size: clamp(1.8rem, 1.5rem + 1vw, 2.35rem);
	color: var(--ink);
}

.room-price__unit {
	font-size: .92rem;
	color: var(--muted);
}

/* ---------- Room page: photo mosaic ---------- */

.room-gallery {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: .6rem;
	height: clamp(300px, 20rem + 12vw, 580px);
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
	overflow: hidden;
	border-radius: var(--r-lg);
}

.room-gallery__item {
	display: block;
	min-height: 0;
	overflow: hidden;
	background: var(--surface-2);
	cursor: zoom-in;
}

.room-gallery__item[hidden] {
	display: none;
}

.room-gallery__item:first-child {
	grid-row: span 2;
}

.room-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s var(--ease), filter .4s var(--ease);
}

.room-gallery__item:hover img {
	transform: scale(1.04);
	filter: brightness(1.04);
}

.room-gallery--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.room-gallery--2 {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
}

.room-gallery--1 .room-gallery__item:first-child,
.room-gallery--2 .room-gallery__item:first-child {
	grid-row: auto;
}

.room-gallery--3 {
	grid-template-columns: 2fr 1fr;
}

.room-gallery--4 .room-gallery__item:nth-child(2) {
	grid-row: span 2;
}

.room-gallery__all {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.1rem;
	background: rgba(255, 255, 255, .95);
	border: 0;
	border-radius: var(--r-pill);
	box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .4);
	font: 700 .86rem/1.2 var(--f-body);
	color: var(--ink);
	cursor: pointer;
	transition: background-color .2s var(--ease), transform .25s var(--ease);
}

.room-gallery__all:hover {
	background: #fff;
	transform: translateY(-1px);
}

.room-gallery__all .icon {
	width: 1.05rem;
	height: 1.05rem;
}

/* Phones: a swipeable row instead of the mosaic. */
@media (max-width: 760px) {
	.room-gallery {
		grid-template-columns: none;
		grid-template-rows: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;
		height: 66vw;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		border-radius: 0;
	}

	.room-gallery::-webkit-scrollbar {
		display: none;
	}

	.room-gallery__item {
		border-radius: var(--r-md);
		scroll-snap-align: start;
	}

	.room-gallery__item:first-child,
	.room-gallery--4 .room-gallery__item:nth-child(2) {
		grid-row: auto;
	}

	.room-gallery__all {
		display: none;
	}
}

/* ---------- Room page: content and booking card ---------- */

.room-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}

@media (max-width: 960px) {
	.room-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

.room-layout__main {
	display: grid;
	gap: clamp(2.5rem, 2rem + 2vw, 3.75rem);
	min-width: 0;
}

.room-layout__aside {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	scroll-margin-top: calc(var(--header-h) + 1rem);
}

.admin-bar .room-layout__aside {
	top: calc(var(--header-h) + 32px + 1.5rem);
}

@media (max-width: 960px) {
	.room-layout__aside {
		position: static;
	}
}

.room-block {
	display: grid;
	gap: 1.3rem;
	padding-top: clamp(2.5rem, 2rem + 2vw, 3.75rem);
	border-top: 1px solid var(--line);
}

.room-block:first-child {
	padding-top: 0;
	border-top: 0;
}

.room-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .8rem 2rem;
}

.room-block__title {
	font-size: var(--t-lg);
}

.room-description > * + * {
	margin-top: 1rem;
}

/* What this room offers: icon beside each amenity, two columns. */
.amenity-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.amenity-grid li {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-size: 1rem;
	color: var(--ink);
}

.amenity-grid__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	background: var(--sea-tint);
	border: 1px solid var(--sea-soft);
	border-radius: 50%;
	color: var(--sea);
}

.amenity-grid__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* Good to know: label and value pairs. */
.know-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

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

.know-list div {
	display: grid;
	gap: .3rem;
	padding: 1rem 1.2rem;
	background: var(--surface);
}

.know-list dt {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.know-list dt .icon {
	width: 1rem;
	height: 1rem;
	color: var(--sea);
}

.know-list dd {
	margin: 0;
	font-size: 1rem;
	color: var(--ink);
}

/* ---------- Section titles and details printed by the plugin ---------- */

.mphb-details-title,
.mphb-calendar-title,
.mphb-reservation-form-title {
	margin: 0 0 1.2rem;
	font-family: var(--f-display);
	font-size: var(--t-lg);
	font-weight: 400;
	line-height: 1.15;
}

.room-block .mphb-details-title {
	margin: 0;
}

/* The room page prints its own headings for these. */
.room-page .mphb-calendar-title,
.book-card .mphb-reservation-form-title {
	display: none;
}

/* The plugin's details list, used on a room page only when the room has no
   amenities or facts for the theme to show in its own way. */
.mphb-single-room-type-attributes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

/* Values are loose text and links, so the label is placed absolutely and the
   value simply flows in the space beside it. */
.mphb-single-room-type-attributes li {
	position: relative;
	margin: 0;
	padding: 1rem 0 1rem 10rem;
	border-bottom: 1px solid var(--line);
	line-height: 1.6;
}

.mphb-single-room-type-attributes .mphb-attribute-title {
	position: absolute;
	top: 1.2rem;
	left: 0;
	width: 9rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb-single-room-type-attributes a {
	color: var(--ink);
	text-decoration: none;
}

.mphb-single-room-type-attributes a:hover {
	color: var(--sea);
}

@media (max-width: 520px) {
	.mphb-single-room-type-attributes li {
		padding-left: 0;
	}

	.mphb-single-room-type-attributes .mphb-attribute-title {
		position: static;
		display: block;
		width: auto;
		margin-bottom: .3rem;
	}
}

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

.book-card {
	padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}

.book-card__head {
	display: grid;
	gap: .35rem;
	margin-bottom: 1.3rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--line);
}

.book-card__sub {
	font-size: .88rem;
	color: var(--muted);
}

/* The plugin's form: dates side by side, then adults and children. */
.book-card .mphb-booking-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem .7rem;
	margin: 0;
}

.book-card .mphb-booking-form > * {
	margin: 0;
	min-width: 0;
}

.book-card .mphb-booking-form > .mphb-errors-wrapper,
.book-card .mphb-booking-form > .mphb-reserve-btn-wrapper,
.book-card .mphb-booking-form > .mphb-required-fields-tip,
.book-card .mphb-booking-form > .mphb-reserve-room-section {
	grid-column: 1 / -1;
}

.book-card .mphb-booking-form label {
	font-size: .68rem;
}

.book-card input.mphb-datepick {
	padding-right: .6rem;
	padding-left: 2.3rem;
	background-position: left .75rem center;
	background-size: 1rem;
	font-size: .92rem;
}

/* The plugin puts a <br> between each label and its field. */
.book-card form br,
.room-page form br,
.search-top form br {
	display: none;
}

.book-card input[type="submit"],
.book-card button[type="submit"],
.book-card .button {
	width: 100%;
	min-height: 3.3rem;
	margin-top: .3rem;
	font-size: 1rem;
}

.book-card__notes {
	display: grid;
	gap: .55rem;
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
	line-height: 1.45;
	color: var(--ink-2);
}

.book-card__notes li {
	display: flex;
	gap: .6rem;
}

.book-card__notes .icon {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .1rem;
	color: var(--sea);
}

.book-card__wa {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-top: 1.3rem;
	padding: .9rem 1rem;
	background: #eef7f1;
	border: 1px solid #d3eadb;
	border-radius: var(--r-md);
	font-size: .9rem;
	line-height: 1.35;
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.book-card__wa:hover {
	background: #e5f3ea;
	border-color: var(--whatsapp);
}

.book-card__wa .icon {
	display: grid;
	width: 2.4rem;
	height: 2.4rem;
	padding: .55rem;
	background: var(--whatsapp);
	border-radius: 50%;
	color: #fff;
}

.book-card__wa strong {
	display: block;
	color: var(--whatsapp-deep);
}

/* Messages the plugin shows after "Check availability". */
.mphb-errors-wrapper,
.mphb-error {
	color: var(--danger);
	font-size: .92rem;
}

.mphb-reserve-room-section {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

/* Plugin buttons that use the generic .button class. */
.mphb-reserve-btn,
.mphb-book-button,
.mphb-view-details-button,
.mphb_sc_search_results-wrapper .button,
.mphb_sc_checkout-wrapper .button,
.mphb_sc_rooms-wrapper .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .85rem 1.55rem;
	background: var(--sea);
	border: 1px solid var(--sea);
	border-radius: var(--r-pill);
	box-shadow: 0 10px 22px -12px rgba(19, 68, 66, .7);
	font: 700 .95rem/1.2 var(--f-body);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .25s var(--ease);
}

.mphb-reserve-btn:hover,
.mphb-book-button:hover,
.mphb-view-details-button:hover,
.mphb_sc_search_results-wrapper .button:hover,
.mphb_sc_checkout-wrapper .button:hover,
.mphb_sc_rooms-wrapper .button:hover {
	background: var(--sea-deep);
	border-color: var(--sea-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* ---------- Availability calendar ---------- */

.calendar-card {
	padding: clamp(1rem, .7rem + 1.2vw, 1.6rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

/* The plugin colours its calendar through these variables. */
body .mphb-calendar {
	--mphb-available-date-bg: var(--sea-soft);
	--mphb-available-date-color: var(--sea-deep);
	--mphb-not-available-date-bg: var(--surface-2);
	--mphb-not-available-date-color: #8b918e;
	--mphb-booked-date-bg: #f3dfd6;
	--mphb-booked-date-color: #93493a;
	--mphb-out-of-season-date-bg: var(--surface-2);
	--mphb-out-of-season-date-color: #8b918e;
	--mphb-selected-date-bg: var(--sea);
	--mphb-selected-date-color: #fff;
	--mphb-unselectable-date-color: #8b918e;
}

/* The date picker script sets a fixed pixel width inline; let it flow. */
.mphb-calendar .datepick,
.mphb-datepick-popup .datepick {
	width: auto !important;
	max-width: 100%;
	font-family: var(--f-body);
	font-size: .92rem;
	color: var(--ink);
}

.mphb-calendar .datepick {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.mphb-datepick-popup .datepick {
	padding: 1rem 1.1rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}

.mphb-calendar .datepick-nav,
.mphb-datepick-popup .datepick-nav {
	float: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	width: auto;
	margin-bottom: 1rem;
	background: transparent;
	color: var(--ink);
	font-size: .85rem;
}

.mphb-calendar .datepick-nav a,
.mphb-datepick-popup .datepick-nav a {
	float: none;
	width: auto;
	padding: .45rem .95rem;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .2s var(--ease), color .2s var(--ease);
}

.mphb-calendar .datepick-nav a:hover,
.mphb-datepick-popup .datepick-nav a:hover {
	background: var(--surface);
	border-color: var(--sea);
	color: var(--sea);
}

.mphb-calendar .datepick-nav .datepick-cmd-disabled,
.mphb-datepick-popup .datepick-nav .datepick-cmd-disabled {
	opacity: .45;
	pointer-events: none;
}

.mphb-calendar .datepick-month-row,
.mphb-datepick-popup .datepick-month-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.5rem 2rem;
}

.mphb-datepick-popup .datepick-month-row {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.mphb-calendar .datepick-month,
.mphb-datepick-popup .datepick-month {
	float: none;
	width: auto !important;
	border: 0;
	text-align: center;
}

.mphb-calendar .datepick-month-header,
.mphb-calendar .datepick-month-header select,
.mphb-datepick-popup .datepick-month-header,
.mphb-datepick-popup .datepick-month-header select {
	padding: 0 0 .6rem;
	background: transparent;
	font-family: var(--f-display);
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--ink);
}

.mphb-calendar .datepick-month table,
.mphb-datepick-popup .datepick-month table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
}

/* Undo the plugin's table borders and the theme's own content table styles. */
.mphb-calendar .datepick-month th,
.mphb-calendar .datepick-month td,
.mphb-datepick-popup .datepick-month th,
.mphb-datepick-popup .datepick-month td {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
}

.mphb-calendar .datepick-month th,
.mphb-calendar .datepick-month th span,
.mphb-datepick-popup .datepick-month th,
.mphb-datepick-popup .datepick-month th span {
	padding: .3rem 0;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	background: transparent;
}

.mphb-calendar .datepick-month td a,
.mphb-calendar .datepick-month td span,
.mphb-datepick-popup .datepick-month td a,
.mphb-datepick-popup .datepick-month td span {
	display: block;
	padding: .6rem 0;
	border-radius: 8px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

/* Blank cells for the previous and next month. */
.mphb-calendar .datepick-month td .datepick-other-month,
.mphb-datepick-popup .datepick-month td .datepick-other-month {
	visibility: hidden;
}

.mphb-calendar .datepick-month td .mphb-past-date,
.mphb-datepick-popup .datepick-month td .mphb-past-date {
	opacity: .45;
}

.mphb-datepick-popup .datepick-month td a:hover {
	background: var(--sea);
	color: #fff;
}

.mphb-datepick-popup .datepick-month td a.datepick-selected,
.mphb-datepick-popup .datepick-month td a.datepick-highlight {
	background: var(--sea);
	color: #fff;
}

.mphb-datepick-popup .datepick-month td a.datepick-today,
.mphb-calendar .datepick-month td .datepick-today {
	box-shadow: inset 0 0 0 1.5px var(--sea);
	font-weight: 700;
}

/* Clear / Close strip under the popup. */
.mphb-calendar .datepick-ctrl,
.mphb-datepick-popup .datepick-ctrl {
	float: none;
	display: flex;
	justify-content: space-between;
	width: auto;
	margin-top: .8rem;
	padding: .6rem .2rem 0;
	background: transparent;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	font-weight: 400;
}

.mphb-calendar .datepick-ctrl a,
.mphb-datepick-popup .datepick-ctrl a {
	float: none;
	width: auto;
	padding: .3rem .5rem;
	background: transparent;
	color: var(--sea);
	font-weight: 700;
}

/* Colour key beside the room calendar. */
.calendar-key {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	color: var(--ink-2);
}

.calendar-key li {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.calendar-key__swatch {
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

.calendar-key__swatch--open   { background: var(--sea-soft); box-shadow: inset 0 0 0 1px rgba(29, 95, 92, .25); }
.calendar-key__swatch--booked { background: #f3dfd6; }
.calendar-key__swatch--closed { background: var(--surface-2); }

/* ---------- Search results: the search bar and summary ---------- */

.search-top {
	display: grid;
	gap: 1rem;
	margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* The same card for the plugin's search form placed on any page, such as
   its own "Search Availability" page. */
.search-top__form,
.entry-content > .mphb_sc_search-wrapper {
	max-width: none;
	padding: clamp(1.1rem, .9rem + .8vw, 1.5rem) clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
}

.search-top__form form,
.entry-content > .mphb_sc_search-wrapper form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .9rem 1rem;
	align-items: end;
	margin: 0;
}

.search-top__form form > p,
.entry-content > .mphb_sc_search-wrapper form > p {
	margin: 0;
}

.search-top__form input[type="submit"],
.entry-content > .mphb_sc_search-wrapper input[type="submit"] {
	width: 100%;
	min-height: 3.1rem;
}

.entry-content > .mphb_sc_search-wrapper .mphb-required-fields-tip,
.entry-content > .mphb_sc_search-wrapper label abbr,
.entry-content > .mphb_sc_search-wrapper br {
	display: none;
}

/* Phones: two columns, as on the homepage. */
@media (max-width: 600px) {
	.search-top__form form,
	.entry-content > .mphb_sc_search-wrapper form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .8rem .6rem;
	}

	.search-top__form .mphb_sc_search-submit-button-wrapper,
	.entry-content > .mphb_sc_search-wrapper .mphb_sc_search-submit-button-wrapper {
		grid-column: 1 / -1;
	}

	.search-top__form input.mphb-datepick,
	.entry-content > .mphb_sc_search-wrapper input.mphb-datepick {
		padding-right: .5rem;
		padding-left: 2.2rem;
		background-position: left .7rem center;
		background-size: 1rem;
		font-size: .9rem;
	}
}

.search-top__info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1rem;
	font-size: .98rem;
	color: var(--ink-2);
}

.search-top__info strong {
	color: var(--ink);
}

.search-top__info > .icon {
	color: var(--sea);
}

.search-top .mphb-errors-wrapper {
	padding: .9rem 1.1rem;
	background: #fbecea;
	border-radius: var(--r-sm);
}

.search-top__count {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .3rem .85rem;
	background: var(--sea-soft);
	border-radius: var(--r-pill);
	font-size: .86rem;
	font-weight: 700;
	color: var(--sea-deep);
}

.search-top__count .icon {
	width: 1rem;
	height: 1rem;
}

/* No rooms free: a friendly panel with somewhere to go next. */
.search-empty {
	display: grid;
	justify-items: center;
	gap: 1rem;
	max-width: 44rem;
	margin: 0 auto;
	padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.2rem, 1rem + 2vw, 3rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	text-align: center;
}

.search-empty__icon {
	display: grid;
	place-items: center;
	width: 4rem;
	height: 4rem;
	background: var(--sun-soft);
	border-radius: 50%;
	color: var(--sun);
}

.search-empty__icon .icon {
	width: 1.8rem;
	height: 1.8rem;
}

.search-empty h2 {
	margin: 0;
	font-size: var(--t-lg);
}

.search-empty p {
	max-width: 50ch;
	color: var(--ink-2);
}

.search-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin-top: .4rem;
}

/* The plugin's plain "N accommodations found" line, if it ever shows. */
.mphb_sc_search_results-info {
	margin: 0 0 1.5rem;
	font-size: .92rem;
	color: var(--muted);
}

/* ---------- Search results: the recommendation ---------- */

.mphb_sc_search_results-wrapper .mphb-recommendation-title {
	margin: 0 0 .9rem;
	font-size: var(--t-md);
}

.mphb_sc_search_results-wrapper .mphb-recommendation {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 2rem;
	margin: 0 0 2.4rem;
	padding: 1.3rem 1.5rem;
	background: linear-gradient(135deg, var(--sea-soft), var(--sea-tint));
	border: 1px solid rgba(29, 95, 92, .15);
	border-radius: var(--r-lg);
}

.mphb_sc_search_results-wrapper .mphb-recommendation > * {
	float: none;
	margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-details-list {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-details-list > li {
	margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-details-list::after {
	display: none;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2rem .6rem;
}

.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommedation-item-subtotal {
	order: 3;
	float: none;
	margin: 0;
	font-family: var(--f-display);
	font-size: 1.1rem;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-item-count {
	font-weight: 700;
	color: var(--muted);
}

.mphb_sc_search_results-wrapper .mphb-recommendation-item-link {
	font-family: var(--f-display);
	font-size: 1.3rem;
	color: var(--ink);
	text-decoration: none;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-item-link:hover {
	color: var(--sea);
}

.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommendation-item-guests {
	flex-basis: 100%;
	font-size: .86rem;
	color: var(--muted);
}

.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommendation-total {
	grid-column: 2;
	float: none;
	justify-self: end;
	font-size: .9rem;
	color: var(--muted);
	text-align: right;
}

.mphb_sc_search_results-wrapper .mphb-recommendation-total-value .mphb-price {
	display: block;
	font-family: var(--f-display);
	font-size: 1.8rem;
	line-height: 1.1;
	color: var(--ink);
}

.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommendation-reserve-button {
	grid-column: 2;
	float: none;
	justify-self: end;
	min-width: 10rem;
}

.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-clear {
	display: none;
}

@media (max-width: 600px) {
	.mphb_sc_search_results-wrapper .mphb-recommendation {
		grid-template-columns: 1fr;
	}

	.mphb_sc_search_results-wrapper .mphb-recommendation-details-list,
	.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommendation-total,
	.mphb_sc_search_results-wrapper .mphb-recommendation .mphb-recommendation-reserve-button {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		text-align: left;
	}
}

/* The running "your reservation" summary above the list. Until a room is
   added it only says "Select from available accommodations", so it stays
   hidden until then. */
.mphb_sc_search_results-wrapper .mphb-reservation-cart.mphb-empty-cart {
	display: none;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem 1.5rem;
	margin: 0 0 1.6rem;
	font-size: .95rem;
	color: var(--muted);
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart:not(.mphb-empty-cart) {
	position: sticky;
	top: calc(var(--header-h) + .75rem);
	z-index: 20;
	padding: .9rem 1.2rem;
	background: var(--ink);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	color: #fff;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-reservation-details {
	float: none;
}

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

.mphb_sc_search_results-wrapper .mphb-reservation-cart .mphb-confirm-reservation {
	float: none;
}

.mphb_sc_search_results-wrapper .mphb-reservation-cart:not(.mphb-empty-cart) .mphb-confirm-reservation {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

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

/* ---------- Search results and the rooms list: one card per room ---------- */

.mphb_sc_search_results-wrapper .mphb-room-type,
.mphb_sc_rooms-wrapper .mphb-room-type {
	margin: 0 0 1.8rem;
	padding: clamp(1rem, .8rem + .8vw, 1.4rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.mphb_sc_search_results-wrapper .mphb-room-type:hover,
.mphb_sc_rooms-wrapper .mphb-room-type:hover {
	border-color: transparent;
	box-shadow: var(--shadow-lg);
}

.mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type),
.mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type) {
	margin-top: 0;
}

/* The theme's version of the plugin template wraps the photos and the text,
   so the card can be a clean two-column grid. */
.moon-result {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.2rem, .8rem + 2vw, 2.6rem);
	align-items: start;
}

@media (max-width: 800px) {
	.moon-result {
		grid-template-columns: 1fr;
	}
}

.moon-result--no-media {
	grid-template-columns: 1fr;
}

.moon-result__media {
	min-width: 0;
}

/* Photo strip: the featured image first, then the gallery, one photo at a
   time. Swipe on phones; arrows appear on hover with a mouse. */
.photo-strip {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--surface-2);
}

.photo-strip__track {
	display: flex;
	aspect-ratio: 4 / 3;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: pointer;
}

.photo-strip__track::-webkit-scrollbar {
	display: none;
}

.photo-strip__track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	scroll-snap-align: start;
}

.photo-strip__btn {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0 0 .15rem;
	background: rgba(255, 255, 255, .94);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	font: 400 1.6rem/1 var(--f-body);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .2s var(--ease), background-color .2s var(--ease);
}

.photo-strip__btn--prev { left: .8rem; }
.photo-strip__btn--next { right: .8rem; }

.photo-strip:hover .photo-strip__btn,
.photo-strip__btn:focus-visible {
	opacity: 1;
}

.photo-strip__btn:hover {
	background: #fff;
}

.photo-strip .photo-strip__btn[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Touch screens swipe instead. */
@media (hover: none) {
	.photo-strip__btn {
		display: none;
	}
}

.photo-strip__count {
	position: absolute;
	right: .8rem;
	bottom: .8rem;
	padding: .25rem .65rem;
	background: rgba(12, 16, 15, .62);
	border-radius: var(--r-pill);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	pointer-events: none;
}

.moon-result__body {
	display: grid;
	gap: .8rem;
	align-content: start;
	min-width: 0;
	padding-block: .3rem;
}

.moon-result__body > * {
	margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-room-type-title,
.mphb_sc_rooms-wrapper .mphb-room-type-title {
	margin: 0;
	font-family: var(--f-display);
	font-size: var(--t-lg);
	font-weight: 400;
}

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

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

.moon-result__body > p {
	color: var(--ink-2);
}

.moon-result__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1rem;
	margin-top: .4rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

.moon-result__foot > * {
	margin: 0;
}

.moon-result__foot .mphb-regular-price {
	flex: 1 1 100%;
}

.moon-result__foot .mphb-reserve-room-section {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Room facts and amenity chips inside a result. */
.moon-result .room-facts li {
	padding: .35rem .8rem .35rem .6rem;
	font-size: .85rem;
	background: var(--ground);
	border-color: transparent;
}

.moon-result .chips li {
	padding: .35rem .8rem .35rem .6rem;
	font-size: .82rem;
}

/* The plugin's details list, kept for anything the theme does not print. */
.mphb-room-type-details-title {
	margin: .2rem 0 0;
	font-family: var(--f-body);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb-loop-room-type-attributes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.mphb-loop-room-type-attributes li {
	margin: 0;
	padding: .55rem 0;
	border-bottom: 1px solid var(--line);
	font-size: .92rem;
}

.mphb-loop-room-type-attributes .mphb-attribute-title {
	margin-right: .5rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb-loop-room-type-attributes a {
	color: var(--ink);
	text-decoration: none;
}

/* Price for the searched dates. */
.mphb_sc_search_results-wrapper .mphb-regular-price,
.mphb_sc_rooms-wrapper .mphb-regular-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .5rem;
	margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-regular-price strong,
.mphb_sc_rooms-wrapper .mphb-regular-price strong {
	flex-basis: 100%;
	font-size: var(--t-xs);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb_sc_search_results-wrapper .mphb-regular-price .mphb-price,
.mphb_sc_rooms-wrapper .mphb-regular-price .mphb-price {
	font-family: var(--f-display);
	font-size: 1.9rem;
	line-height: 1.1;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.mphb-price-period {
	font-size: .88rem;
	color: var(--muted);
	text-decoration: none;
	border: 0;
}

/* "View details" is the secondary action next to "Book". */
.mphb_sc_search_results-wrapper .mphb-view-details-button,
.mphb_sc_rooms-wrapper .mphb-view-details-button {
	background: transparent;
	border-color: var(--line-strong);
	box-shadow: none;
	color: var(--ink);
}

.mphb_sc_search_results-wrapper .mphb-view-details-button:hover,
.mphb_sc_rooms-wrapper .mphb-view-details-button:hover {
	background: transparent;
	border-color: var(--sea);
	color: var(--sea);
}

.mphb_sc_search_results-wrapper .mphb-view-details-button-wrapper {
	margin: 0;
}

.mphb_sc_search_results-wrapper .mphb-rooms-reservation-message-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1rem;
	margin-bottom: .7rem;
	font-size: .9rem;
	color: var(--sea-deep);
}

.mphb_sc_search_results-wrapper .mphb-reserve-room-section .mphb-rooms-reservation-message-wrapper .mphb-remove-from-reservation {
	float: none;
	order: 2;
	font-weight: 700;
	color: var(--danger);
}

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

/* ---------- The booking plugin's photo slider ---------- */

.mphb-gallery-main-slider {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
}

/* Page content indents lists; the slider is a list, and the indent showed a
   sliver of the neighbouring photo at its left edge. */
.mphb-flexslider-gallery-wrapper .slides,
.mphb-flexslider-gallery-wrapper .slides > li {
	margin: 0;
	padding: 0;
}

.mphb-gallery-main-slider .slides img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

/* The strip of small thumbnails under the slider only duplicates it. */
.mphb-gallery-thumbnail-slider {
	display: none;
}

.mphb-flexslider-gallery-wrapper .flex-direction-nav a {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-top: -1.3rem;
	background: rgba(255, 255, 255, .94);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	color: var(--ink);
	font-size: 0;
	text-shadow: none;
	opacity: 1;
}

.mphb-flexslider-gallery-wrapper .flex-direction-nav a::before {
	font-size: 16px;
	line-height: 1;
	color: var(--ink);
	text-shadow: none;
}

.mphb-flexslider-gallery-wrapper .flex-direction-nav .flex-prev { left: .8rem; }
.mphb-flexslider-gallery-wrapper .flex-direction-nav .flex-next { right: .8rem; }

/* ---------- Checkout ---------- */

.mphb_sc_checkout-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: 0 clamp(2rem, 1rem + 3vw, 4rem);
	align-items: start;
}

.mphb_sc_checkout-form > * {
	grid-column: 1;
	min-width: 0;
}

.mphb_sc_checkout-form > #mphb-customer-details {
	grid-row: 1 / span 2;
}

.mphb_sc_checkout-form > #mphb-booking-details {
	grid-column: 2;
	grid-row: 1;
}

.mphb_sc_checkout-form > #mphb-price-details {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 900px) {
	.mphb_sc_checkout-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.mphb_sc_checkout-form > #mphb-customer-details,
	.mphb_sc_checkout-form > #mphb-booking-details,
	.mphb_sc_checkout-form > #mphb-price-details {
		grid-column: 1;
		grid-row: auto;
	}
}

.mphb_sc_checkout-wrapper section,
.mphb_sc_checkout-wrapper fieldset {
	margin: 0 0 1.6rem;
	padding: clamp(1.2rem, 1rem + 1vw, 1.9rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

/* The plugin spaces its sections 4em apart; the grid handles spacing here. */
.mphb_sc_checkout-wrapper .mphb_sc_checkout-form > .mphb-checkout-section {
	margin-top: 0;
}

.mphb_sc_checkout-wrapper h3,
.mphb_sc_checkout-wrapper h4,
.mphb_sc_checkout-wrapper legend {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-size: var(--t-md);
	font-weight: 400;
}

.mphb_sc_checkout-wrapper p {
	margin: 0;
}

/* Your stay: dates and the room. */
.mphb_sc_checkout-wrapper #mphb-booking-details {
	background: var(--sea-tint);
	border-color: rgba(29, 95, 92, .14);
}

.mphb-check-in-date,
.mphb-check-out-date {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem .4rem;
	padding: .75rem 0;
	border-bottom: 1px solid rgba(29, 95, 92, .12);
	font-size: .92rem;
	color: var(--ink-2);
}

.mphb-check-in-date > span:first-child,
.mphb-check-out-date > span:first-child {
	flex-basis: 100%;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb-check-in-date strong,
.mphb-check-out-date strong {
	font-family: var(--f-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ink);
}

.mphb-reserve-rooms-details {
	margin-top: 1rem;
}

.mphb-room-details {
	display: grid;
	gap: .9rem;
}

.mphb-room-details + .mphb-room-details {
	margin-top: 1.2rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgba(29, 95, 92, .12);
}

.mphb_sc_checkout-wrapper .mphb-room-number {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}

.mphb_sc_checkout-wrapper .mphb-room-type-title span {
	display: block;
	font-size: .85rem;
	color: var(--muted);
}

.mphb_sc_checkout-wrapper .mphb-room-type-title a {
	font-family: var(--f-display);
	font-size: 1.35rem;
	color: var(--ink);
	text-decoration: none;
}

.mphb_sc_checkout-wrapper .mphb-room-type-title a:hover {
	color: var(--sea);
}

/* Price breakdown table. */
.mphb-price-breakdown {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

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

.mphb-price-breakdown .mphb-table-price-column,
.mphb-price-breakdown td:last-child,
.mphb-price-breakdown th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mphb-price-breakdown-expand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.mphb-price-breakdown-expand .mphb-inner-icon {
	display: grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	font-size: .8rem;
	line-height: 1;
	color: var(--sea);
}

.mphb-price-breakdown-rate {
	margin-top: .2rem;
	font-size: .82rem;
	color: var(--muted);
}

.mphb-price-breakdown tfoot th {
	padding-top: .9rem;
	border-bottom: 0;
	font-family: var(--f-display);
	font-size: 1.3rem;
	color: var(--ink);
}

/* Your information: two columns of fields. */
.mphb_sc_checkout-wrapper #mphb-customer-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1rem;
}

.mphb_sc_checkout-wrapper #mphb-customer-details > * {
	grid-column: 1 / -1;
	margin: 0;
}

.mphb_sc_checkout-wrapper #mphb-customer-details > .mphb-customer-name,
.mphb_sc_checkout-wrapper #mphb-customer-details > .mphb-customer-last-name,
.mphb_sc_checkout-wrapper #mphb-customer-details > .mphb-customer-email,
.mphb_sc_checkout-wrapper #mphb-customer-details > .mphb-customer-phone {
	grid-column: auto;
}

@media (max-width: 560px) {
	.mphb_sc_checkout-wrapper #mphb-customer-details {
		grid-template-columns: 1fr;
	}

	.mphb_sc_checkout-wrapper #mphb-customer-details > * {
		grid-column: 1 !important;
	}
}

.mphb_sc_checkout-wrapper #mphb-customer-details .mphb-customer-details-title {
	margin-bottom: 0;
}

.mphb_sc_checkout-wrapper #mphb-customer-details .mphb-required-fields-tip {
	margin-top: -.4rem;
}

.mphb_sc_checkout-wrapper br {
	display: none;
}

/* Total and the button. */
.mphb_sc_checkout-wrapper .mphb-total-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: 0 0 1rem;
	padding: 1.2rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	font-size: .95rem;
	color: var(--muted);
}

.mphb_sc_checkout-wrapper .mphb-total-price output {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1rem;
	width: 100%;
}

.mphb_sc_checkout-wrapper .mphb-total-price-field .mphb-price {
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 400;
	color: var(--ink);
}

.mphb_sc_checkout-wrapper .mphb_sc_checkout-submit-wrapper input[type="submit"] {
	width: 100%;
	min-height: 3.5rem;
	font-size: 1.05rem;
}

.mphb-data-incorrect,
.mphb_sc_checkout-wrapper .mphb-errors-wrapper:not(.mphb-hide) {
	margin: 0 0 1rem;
	padding: .9rem 1.1rem;
	background: #fbecea;
	border-radius: var(--r-sm);
	color: var(--danger);
}

/* "What happens next", printed by the Moon Homestay plugin above the button. */
.moon-next {
	margin: 0 0 1.2rem;
	padding: 1.2rem 1.4rem;
	background: var(--sand-soft);
	border-radius: var(--r-lg);
}

.moon-next__title {
	margin: 0 0 .8rem;
	font-family: var(--f-body);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

.moon-next ol {
	display: grid;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: moon-next;
}

.moon-next li {
	display: flex;
	gap: .7rem;
	margin: 0;
	font-size: .93rem;
	line-height: 1.45;
	color: var(--ink-2);
	counter-increment: moon-next;
}

.moon-next li::before {
	content: counter(moon-next);
	display: grid;
	flex: none;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--surface);
	border-radius: 50%;
	font-size: .78rem;
	font-weight: 700;
	color: var(--sea);
}

/* ---------- "Reservation submitted" and the payment panel ---------- */

.mphb-reservation-submitted-title {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 .5rem;
	font-family: var(--f-display);
	font-size: var(--t-lg);
	font-weight: 400;
}

.mphb-reservation-submitted-title::before {
	content: "\2713";
	display: grid;
	flex: none;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	background: var(--sea);
	border-radius: 50%;
	font-family: var(--f-body);
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
}

.mphb_sc_checkout-success-reservation-message {
	max-width: 62ch;
	color: var(--ink-2);
}

.moon-pay {
	max-width: 820px;
	margin-top: 2rem;
	padding: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
}

/* Booked, then pay, then confirmation. */
.moon-pay__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
	counter-reset: moon-pay-step;
}

.moon-pay__steps li {
	position: relative;
	display: grid;
	justify-items: center;
	gap: .45rem;
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--muted);
	counter-increment: moon-pay-step;
}

.moon-pay__steps li::before {
	content: counter(moon-pay-step);
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	background: var(--surface);
	border: 1.5px solid var(--line-strong);
	border-radius: 50%;
	font-size: .85rem;
}

.moon-pay__steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: calc(50% + 1.3rem);
	width: calc(100% - 2.6rem);
	height: 1.5px;
	background: var(--line-strong);
}

.moon-pay__steps .is-done {
	color: var(--sea);
}

.moon-pay__steps .is-done::before {
	content: "\2713";
	background: var(--sea);
	border-color: var(--sea);
	color: #fff;
}

.moon-pay__steps .is-done::after {
	background: var(--sea) !important;
}

.moon-pay__steps .is-current {
	color: var(--ink);
}

.moon-pay__steps .is-current::before {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(27, 32, 30, .08);
}

.moon-pay__eyebrow {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sea);
}

.moon-pay__head h2 {
	margin: .4rem 0 .6rem;
	font-size: var(--t-lg);
}

.moon-pay__head p {
	color: var(--ink-2);
}

.moon-pay__summary,
.moon-pay__bank {
	margin: 0;
}

/* The summary reads like a receipt, with the amount to pay at the bottom. */
.moon-pay__summary {
	margin-top: 1.6rem;
	padding: .3rem 1.3rem;
	background: var(--ground);
	border-radius: var(--r-md);
}

.moon-pay__summary > div,
.moon-pay__bank > div {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: .3rem 1rem;
	padding: .8rem 0;
	border-bottom: 1px dashed var(--line-strong);
}

.moon-pay__summary > div:last-child,
.moon-pay__bank > div:last-child {
	border-bottom: 0;
}

.moon-pay__summary dt,
.moon-pay__bank dt,
.moon-pay__upi span {
	padding-top: .15rem;
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.moon-pay__summary dd,
.moon-pay__bank dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.moon-pay__due {
	align-items: baseline;
}

.moon-pay__due dd {
	font-family: var(--f-display);
	font-size: 2rem;
	line-height: 1.15;
	color: var(--sea-deep);
	font-variant-numeric: tabular-nums;
}

.moon-pay__due small {
	display: block;
	margin-top: .2rem;
	font-family: var(--f-body);
	font-size: .82rem;
	color: var(--muted);
}

@media (max-width: 480px) {
	.moon-pay__summary > div,
	.moon-pay__bank > div {
		grid-template-columns: 1fr;
	}

	.moon-pay__steps li {
		font-size: .74rem;
	}
}

.moon-pay__methods {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.1rem;
	margin-top: 1.6rem;
}

.moon-pay__method {
	padding: 1.4rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}

.moon-pay__method h3 {
	margin-bottom: .9rem;
	font-size: var(--t-md);
}

.moon-pay__qr img {
	width: 220px;
	max-width: 100%;
	height: auto;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-sm);
}

.moon-pay__hint {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--muted);
}

.moon-pay__upi {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .6rem;
	margin-top: 1rem;
}

.moon-pay__upi strong {
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.moon-pay__copy {
	padding: .25rem .75rem;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-pill);
	font: 700 .74rem/1.4 var(--f-body);
	color: var(--sea);
	cursor: pointer;
	vertical-align: middle;
	transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}

.moon-pay__copy:hover {
	border-color: var(--sea);
}

.moon-pay__copy.is-copied {
	background: var(--sea);
	border-color: var(--sea);
	color: #fff;
}

.moon-pay__app,
.moon-pay__wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .95rem 1.5rem;
	border-radius: var(--r-pill);
	font-weight: 700;
	font-size: .96rem;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	transition: background-color .2s var(--ease), transform .25s var(--ease);
}

.moon-pay__app {
	margin-top: 1rem;
	background: var(--sea);
	box-shadow: 0 10px 22px -12px rgba(19, 68, 66, .7);
}

.moon-pay__app:hover {
	background: var(--sea-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* A computer cannot open upi:// links, so the button is for phones only. */
@media (hover: hover) and (pointer: fine) {
	.moon-pay__app {
		display: none;
	}
}

.moon-pay__ref {
	margin-top: 1.4rem;
	padding: .9rem 1.1rem;
	background: var(--sun-soft);
	border-radius: var(--r-sm);
	font-size: .93rem;
	color: var(--ink-2);
}

.moon-pay__note {
	margin-top: .9rem;
	font-size: .9rem;
	color: var(--muted);
}

.moon-pay__wa {
	display: grid;
	justify-items: start;
	gap: .6rem;
	margin-top: 1.8rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.moon-pay__wa-btn {
	background: var(--whatsapp);
	box-shadow: 0 10px 22px -12px rgba(24, 115, 62, .7);
}

.moon-pay__wa-btn:hover {
	background: var(--whatsapp-deep);
	color: #fff;
	transform: translateY(-1px);
}

.moon-pay__wa-btn .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.moon-pay__wa p {
	font-size: .88rem;
	color: var(--muted);
}

@media (max-width: 560px) {
	.moon-pay__app,
	.moon-pay__wa-btn {
		width: 100%;
	}

	.moon-pay__wa {
		justify-items: stretch;
	}
}