/**
 * Pandao Booking - design of the booking pages, in the colors of the owner.
 *
 * Loaded after front.css (the layout) unless the owner chose the style of the
 * theme in Settings > Appearance. The fonts stay those of the theme; colors,
 * fields, buttons, cards and the calendar follow the look of Panda Resort.
 * Everything is scoped to .pdb (and .pdb-calendar, the date picker opened
 * outside the block), with selectors just precise enough to win over the
 * styles of a theme inside the blocks, never !important. A theme may still
 * change the variables:
 *
 *     .pdb, .pdb-calendar { --pdb-accent: #0b5; --pdb-radius: 4px; }
 *
 * @package PandaoBooking
 */

.pdb,
.pdb-calendar {
	--pdb-main: #0f2557;
	--pdb-accent: #3b6bc3;
	--pdb-accent-text: #fff;
	--pdb-accent-dark: color-mix(in srgb, var(--pdb-accent) 78%, var(--pdb-main));
	--pdb-accent-soft: color-mix(in srgb, var(--pdb-accent) 9%, #fff);
	--pdb-muted: color-mix(in srgb, var(--pdb-main) 52%, #9aa3b5);
	--pdb-border: color-mix(in srgb, var(--pdb-main) 13%, #fff);
	--pdb-surface: color-mix(in srgb, var(--pdb-accent) 5%, #f7f8fb);
	--pdb-card: #fff;
	--pdb-good: #1f8a5b;
	--pdb-radius: 12px;
	--pdb-shadow: 0 14px 36px color-mix(in srgb, var(--pdb-main) 10%, transparent);
	--pdb-shadow-small: 0 2px 10px color-mix(in srgb, var(--pdb-main) 6%, transparent);
}

/* Texts */

.pdb h2,
.pdb h3,
.pdb .pdb-offers__title,
.pdb .pdb-card-item__title,
.pdb .pdb-booking__reference {
	color: var(--pdb-main);
}

.pdb a:not(.pdb-button) {
	color: var(--pdb-accent);
}

.pdb .pdb-meta,
.pdb .pdb-results__count {
	color: var(--pdb-muted);
}

/* Fields */

.pdb label {
	color: var(--pdb-main);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Labels around a choice keep the size of the text. */
.pdb .pdb-method,
.pdb .pdb-field--consent label,
.pdb .pdb-service__body label,
.pdb .pdb-activity-offer__form label {
	color: inherit;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.pdb .pdb-service__body label {
	color: var(--pdb-main);
	font-size: 1em;
}

.pdb input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.pdb select,
.pdb textarea {
	background-color: var(--pdb-card);
	border: 1px solid var(--pdb-border);
	border-radius: calc(var(--pdb-radius) * 0.66);
	box-shadow: none;
	color: var(--pdb-main);
	font: inherit;
	min-height: 2.9em;
	padding: 0.5em 0.85em;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pdb input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.pdb select:focus,
.pdb textarea:focus {
	border-color: var(--pdb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pdb-accent) 22%, transparent);
	outline: none;
}

.pdb input[type="checkbox"],
.pdb input[type="radio"] {
	accent-color: var(--pdb-accent);
}

/* Buttons */

.pdb .pdb-button,
.pdb .pdb-account--login .login-submit input[type="submit"] {
	background: linear-gradient(135deg, var(--pdb-accent), var(--pdb-accent-dark));
	border: 0;
	border-radius: calc(var(--pdb-radius) * 0.66);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--pdb-accent) 28%, transparent);
	color: var(--pdb-accent-text);
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.05em;
	min-height: 2.9em;
	text-transform: uppercase;
	transition: box-shadow 0.15s, transform 0.15s, filter 0.15s;
}

.pdb .pdb-button:hover:not(:disabled),
.pdb .pdb-button:focus-visible {
	box-shadow: 0 8px 22px color-mix(in srgb, var(--pdb-accent) 38%, transparent);
	color: var(--pdb-accent-text);
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.pdb .pdb-button.pdb-button--secondary {
	background: var(--pdb-card);
	border: 1px solid var(--pdb-accent);
	box-shadow: none;
	color: var(--pdb-accent);
}

.pdb .pdb-button.pdb-button--secondary:hover:not(:disabled) {
	background: var(--pdb-accent-soft);
	color: var(--pdb-accent);
}

.pdb .pdb-button.pdb-button--danger {
	background: var(--pdb-bad);
	box-shadow: none;
}

.pdb .pdb-button--large {
	font-size: 1em;
}

.pdb .pdb-link-button {
	color: var(--pdb-accent);
}

/* Tags, badges, notices */

.pdb .pdb-tag {
	background: var(--pdb-surface);
	color: var(--pdb-main);
	font-weight: 600;
}

.pdb .pdb-tag--good,
.pdb .pdb-badge--success {
	background: color-mix(in srgb, var(--pdb-good) 11%, #fff);
	color: var(--pdb-good);
}

.pdb .pdb-tag--good::before {
	content: "✓ ";
}

.pdb .pdb-notice,
.pdb .pdb-error-box {
	border-radius: calc(var(--pdb-radius) * 0.66);
}

.pdb .pdb-empty {
	background: var(--pdb-surface);
	color: var(--pdb-main);
}

/* Cards: the search, the accommodations, the selection, the sections */

.pdb .pdb-search,
.pdb .pdb-offers,
.pdb .pdb-card-item,
.pdb .pdb-summary,
.pdb .pdb-checkout__section,
.pdb .pdb-booking,
.pdb .pdb-activity-offer,
.pdb .pdb-review,
.pdb .pdb-account-booking,
.pdb .pdb-request,
.pdb .pdb-alternatives {
	background: var(--pdb-card);
	border: 1px solid var(--pdb-border);
	border-radius: var(--pdb-radius);
	box-shadow: var(--pdb-shadow-small);
}

.pdb .pdb-search {
	box-shadow: var(--pdb-shadow);
	padding: 1.1em 1.25em 1.25em;
}

.pdb .pdb-summary {
	box-shadow: var(--pdb-shadow);
	padding: 1.3em;
}

.pdb .pdb-search__nights {
	color: var(--pdb-muted);
	top: 2.75em;
}

.pdb .pdb-search__range input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
	padding-right: 5.5em;
}

.pdb .pdb-search__submit .pdb-button {
	white-space: nowrap;
}

/* Accommodations and their offers */

.pdb .pdb-card-item__image img,
.pdb .pdb-offers__image img {
	border-radius: calc(var(--pdb-radius) * 0.66);
}

.pdb .pdb-card-item__image img {
	border-radius: 0;
}

.pdb .pdb-offers__head {
	padding: 1.25em;
}

.pdb .pdb-offers__title,
.pdb .pdb-card-item__title {
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pdb .pdb-offers__title a,
.pdb .pdb-card-item__title a {
	color: var(--pdb-main);
	text-decoration: none;
}

.pdb .pdb-offers__title a:hover,
.pdb .pdb-card-item__title a:hover {
	color: var(--pdb-accent);
}

.pdb .pdb-facilities li {
	color: var(--pdb-muted);
}

.pdb .pdb-facilities .pdb-icon {
	color: var(--pdb-accent);
}

.pdb .pdb-offers__table th {
	background: var(--pdb-surface);
	border-color: var(--pdb-border);
	color: var(--pdb-muted);
	font-size: 0.7em;
	letter-spacing: 0.07em;
}

.pdb .pdb-offers__table td {
	border-color: var(--pdb-border);
}

.pdb .pdb-offers__offer > strong,
.pdb .pdb-offers__offer > span:first-child {
	color: var(--pdb-main);
	font-weight: 700;
}

.pdb .pdb-offers__price span {
	white-space: nowrap;
}

.pdb .pdb-offers__price strong,
.pdb .pdb-price-from strong,
.pdb .pdb-activity-card__price strong {
	color: var(--pdb-main);
	font-weight: 800;
}

/* An offer chosen: the row of its units stands out. */
.pdb .pdb-offers__table tr:has(select[data-pdb-quantity] option:checked:not([value="0"])) td {
	background: var(--pdb-accent-soft);
}

.pdb .pdb-offers__table tr:has(select[data-pdb-quantity] option:checked:not([value="0"])) td:first-child {
	box-shadow: inset 3px 0 0 var(--pdb-accent);
}

.pdb .pdb-offers__left {
	color: #c0392b;
}

.pdb .pdb-alternatives__list a {
	border-color: var(--pdb-border);
	border-radius: calc(var(--pdb-radius) * 0.66);
	color: var(--pdb-main);
}

.pdb .pdb-alternatives__list a:hover {
	border-color: var(--pdb-accent);
	box-shadow: var(--pdb-shadow-small);
}

/* The selection and its total */

.pdb .pdb-summary__title {
	color: var(--pdb-main);
	font-size: 0.85em;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.pdb .pdb-summary__units li {
	border-color: var(--pdb-border);
}

.pdb .pdb-summary__unit {
	color: var(--pdb-main);
	font-weight: 600;
}

.pdb .pdb-summary__unit span {
	font-weight: 400;
}

.pdb .pdb-summary__total {
	border-top: 1px solid var(--pdb-border);
	color: var(--pdb-main);
	padding-top: 0.8em;
}

.pdb .pdb-summary__total strong {
	font-weight: 800;
}

.pdb .pdb-summary__promises {
	color: var(--pdb-muted);
}

/* The page of an accommodation */

.pdb .pdb-gallery img {
	border-radius: var(--pdb-radius);
}

.pdb .pdb-booking-box {
	border-top-color: var(--pdb-border);
}

/* The booking form */

.pdb .pdb-checkout__section {
	padding: 1.25em 1.4em 0.6em;
}

.pdb .pdb-checkout__section h2 {
	font-size: 0.95em;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.pdb .pdb-checkout__units li {
	background: var(--pdb-accent-soft);
	border-left-color: var(--pdb-accent);
	border-radius: 0 calc(var(--pdb-radius) * 0.5) calc(var(--pdb-radius) * 0.5) 0;
	padding: 0.6em 0.9em;
}

.pdb .pdb-checkout__units li > strong {
	color: var(--pdb-main);
}

.pdb .pdb-service,
.pdb .pdb-method,
.pdb .pdb-session {
	background: var(--pdb-card);
	border-color: var(--pdb-border);
	border-radius: calc(var(--pdb-radius) * 0.66);
	transition: border-color 0.15s, background-color 0.15s;
}

.pdb .pdb-service:has(input:checked),
.pdb .pdb-service:has(select option:checked:not([value="0"])),
.pdb .pdb-method:has(input:checked) {
	background: var(--pdb-accent-soft);
	border-color: var(--pdb-accent);
	box-shadow: inset 0 0 0 1px var(--pdb-accent);
}

.pdb .pdb-service > .pdb-icon {
	background: var(--pdb-accent-soft);
	border-radius: 50%;
	box-sizing: content-box;
	color: var(--pdb-accent);
	padding: 0.45em;
}

.pdb .pdb-required {
	color: #c0392b;
}

/* The page of a booking */

.pdb .pdb-booking {
	padding: 1.4em 1.5em;
}

.pdb .pdb-booking section {
	border-color: var(--pdb-border);
}

.pdb .pdb-booking__lines li {
	border-color: var(--pdb-border);
}

.pdb .pdb-booking__total {
	color: var(--pdb-main);
	font-weight: 800;
}

.pdb .pdb-dl dd {
	color: var(--pdb-main);
}

.pdb .pdb-booking__pay {
	background: var(--pdb-accent-soft);
	border: 1px solid color-mix(in srgb, var(--pdb-accent) 30%, #fff);
}

/* The modules: activities, reviews, customer account, requests */

.pdb .pdb-activity-offer,
.pdb .pdb-review,
.pdb .pdb-account-booking,
.pdb .pdb-request {
	padding: 1.1em 1.25em;
}

.pdb .pdb-session.is-full {
	background: var(--pdb-surface);
}

.pdb .pdb-reviews__score,
.pdb .pdb-reviews__average {
	color: var(--pdb-main);
}

.pdb .pdb-reviews__bar dd {
	accent-color: var(--pdb-accent);
}

.pdb .pdb-account__tab.is-current {
	border-color: var(--pdb-accent);
	color: var(--pdb-accent);
}

/* The date picker, opened outside the block */

.pdb-calendar.flatpickr-calendar {
	border: 1px solid var(--pdb-border);
	border-radius: var(--pdb-radius);
	box-shadow: var(--pdb-shadow);
}

.pdb-calendar .flatpickr-months .flatpickr-month,
.pdb-calendar .flatpickr-current-month,
.pdb-calendar span.flatpickr-weekday {
	color: var(--pdb-main);
}

.pdb-calendar .flatpickr-current-month {
	font-weight: 700;
}

.pdb-calendar .flatpickr-day {
	border-radius: calc(var(--pdb-radius) * 0.5);
	color: var(--pdb-main);
}

.pdb-calendar .flatpickr-day:hover {
	background: var(--pdb-accent-soft);
	border-color: var(--pdb-accent-soft);
}

.pdb-calendar .flatpickr-day.today {
	border-color: var(--pdb-accent);
}

.pdb-calendar .flatpickr-day.inRange,
.pdb-calendar .flatpickr-day.inRange:hover {
	background: var(--pdb-accent-soft);
	border-color: var(--pdb-accent-soft);
	box-shadow: -5px 0 0 var(--pdb-accent-soft), 5px 0 0 var(--pdb-accent-soft);
	color: var(--pdb-main);
}

.pdb-calendar .flatpickr-day.selected,
.pdb-calendar .flatpickr-day.startRange,
.pdb-calendar .flatpickr-day.endRange,
.pdb-calendar .flatpickr-day.selected:hover,
.pdb-calendar .flatpickr-day.startRange:hover,
.pdb-calendar .flatpickr-day.endRange:hover {
	background: var(--pdb-accent);
	border-color: var(--pdb-accent);
	color: var(--pdb-accent-text);
}

.pdb-calendar .flatpickr-day.flatpickr-disabled,
.pdb-calendar .flatpickr-day.prevMonthDay,
.pdb-calendar .flatpickr-day.nextMonthDay {
	color: color-mix(in srgb, var(--pdb-main) 30%, #fff);
}

/* A narrow column: cards in cards keep room for their text. */

@container (max-width: 560px) {
	.pdb .pdb-checkout__section,
	.pdb .pdb-booking {
		padding: 1em 0.9em 0.5em;
	}

	.pdb .pdb-service,
	.pdb .pdb-activity-offer {
		padding: 0.7em 0.75em;
	}

	.pdb .pdb-service > .pdb-icon {
		display: none;
	}
}

/* Phones: the total and the button at the bottom of the screen */

@media (max-width: 781px) {
	.pdb .pdb-results__summary .pdb-summary {
		border-bottom: 0;
		box-shadow: 0 -8px 28px color-mix(in srgb, var(--pdb-main) 16%, transparent);
	}
}