/**
 * Modals — Concierge Bairro Alto Hotel
 *
 * Two patterns: the booking modal is a centered light card
 * (`.site-modal__panel--light`); the contact panel is dark and slides in
 * from the right, full height (`.site-modal--panel`). Reuses
 * `.site-overlay` (concierge-header.css) as the shared backdrop.
 */

body.has-open-modal {
	overflow: hidden;
}

.site-modal {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

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

.site-modal__panel {
	position: relative;
	width: 100%;
	max-width: 640px;
	/*
	 * A fixed 800px let the panel be taller than short viewports (a
	 * external monitor with less vertical space, cards 115/117) — `.site-
	 * modal`'s own 24px top+bottom padding is what's being subtracted here,
	 * same reasoning as `#modal-contact`'s viewport-relative override
	 * further below. The panel's own `overflow-y: auto` then scrolls
	 * whatever doesn't fit, keeping the sticky close button (anchored to
	 * this scroll container) reachable instead of pinned off-screen.
	 */
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	font-family: var(--bah-sans);
	/* Closed state: light/centered panel (booking, location) — enters with
	   a fade + slight rise/scale. The dark contact panel
	   (`.site-modal--panel`, further below) overrides this with a slide in
	   from the right — same transition system, different direction. */
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.3s ease, transform 0.3s ease;
	overflow-x: hidden;
}

.site-modal.is-open .site-modal__panel {
	opacity: 1;
	transform: none;
}

.site-modal__panel--light {
	background: var(--bah-surface);
	border: 1px solid var(--bah-accent);
	border-radius: var(--bah-radius);
	box-shadow: 0 32px 64px rgba(40, 30, 29, 0.28);
	color: var(--bah-body);
}

.site-modal__close {
	position: sticky;
    top: 20px;
    right: 20px;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--bah-surface);
    border: 1px solid var(--bah-border);
    border-radius: var(--bah-radius);
    color: inherit;
    cursor: pointer;
    margin-left: auto;
}

.site-modal__close svg {
	width: 14px;
	height: 14px;
}

.site-modal__panel--dark .site-modal__close {
	border-color: rgba(216, 198, 176, 0.4);
	background: transparent;
}

.site-modal__body {
	padding: 32px;
}

.site-modal__title {
	margin: 0 0 24px;
	font-family: var(--bah-display);
	font-size: clamp(23px, calc(21.22px + 0.455vw), 28px);
	font-weight: 500;
	color: var(--bah-ink);
	line-height: 1.2;
    max-width: 450px;
}

.site-modal__panel--dark .site-modal__title {
	color: var(--bah-on-dark);
}

.site-modal__disclaimer {
	margin: 20px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bah-soft);
}

/* --- Map ("Ver localização") ------------------------------------------- */

.site-modal__panel--map {
	max-width: 720px;
}

.site-modal__body--map {
	padding: 40px;
}

.site-modal__map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	background: var(--bah-paper);
}

.site-modal__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.site-modal__maplink {
	display: inline-block;
	margin-top: 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bah-accent);
	text-decoration: none;
}

.site-modal__maplink:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 560px) {
	.site-modal__body--map {
		padding: 40px 24px;
	}
}

/* --- Contact panel (dark, flush against the right) ---------------------- */

.site-modal--panel {
	justify-content: flex-end;
	padding: 0;
}

.site-modal--panel .site-modal__panel {
	max-width: 420px;
	max-height: none;
	border-radius: 0;
	/* Overrides the default closed state (fade + scale) with a slide in
	   from the right edge, where this panel sits flush. */
	transform: translateX(100%);
}

.site-modal--panel.is-open .site-modal__panel {
	transform: none;
}

/*
 * Above 1000px the panel stops being the full-height drawer flush
 * against the right and becomes a small popover, anchored by JS
 * (`positionPanel()` in `initContactModal()`, concierge.js) right below
 * the button that opened it — usually "FALE CONNOSCO" in
 * `.ct-header-cta` — with its right margin aligned to the button's own
 * and an 8px gap between the two. The inline `top`/`right` (set by JS on
 * every open) override the `.site-modal--panel` wrapper's flexbox
 * alignment above; the values here are just the resting/fallback state.
 * Below 1000px this block doesn't apply and the panel stays a drawer.
 */
@media (min-width: 1000px) {
	#modal-contact .site-modal__panel {
		position: fixed;
		top: 0;
		right: 24px;
		left: auto;
		max-height: calc(100vh - 32px);
		border-radius: var(--bah-radius);
		transform: translateY(-8px);
	}

	#modal-contact.is-open .site-modal__panel {
		transform: translateY(0);
	}

	/*
	 * Opened from anything other than the header's "Fale connosco" (e.g.
	 * `.exp-btn.exp-btn--dark`, deep in the Experience page) — there's no
	 * fixed header position to anchor to, so the panel centers on the
	 * screen instead. `.is-centered` is toggled by positionPanel() in
	 * concierge.js, which also skips setting the inline `top`/`right` in
	 * this case so they don't override the centering below.
	 */
	#modal-contact.is-centered .site-modal__panel {
		top: 50%;
		right: auto;
		left: 50%;
		max-height: calc(100vh - 32px);
		transform: translate(-50%, calc(-50% + 16px)) scale(0.98);
	}

	#modal-contact.is-centered.is-open .site-modal__panel {
		transform: translate(-50%, -50%);
	}
}

.site-modal__panel--dark {
	background: var(--bah-ink);
	color: var(--bah-paper);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

#modal-contact .site-modal__body {
	padding: 28px 32px 32px;
}

#modal-contact .site-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

#modal-contact .site-modal__title {
	margin: 0;
	font-size: clamp(25px, calc(22.51px + 0.637vw), 32px);
	font-weight: 400;
	letter-spacing: -0.11px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--bah-paper);
}

#modal-contact .site-modal__close {
	position: static;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 0;
	border-color: rgba(216, 198, 176, 0.6);
	color: var(--bah-border);
}

.site-modal__contacts {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-modal__contacts li {
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: 0.28px;
	color: var(--bah-paper);
}

.site-modal__contacts li:last-child {
	line-height: 1.44;
	letter-spacing: normal;
	color: rgba(255, 255, 255, 0.92);
}

.site-modal__contacts a {
	color: inherit;
	text-decoration: none;
}

#modal-contact .site-modal__eyebrow {
	margin: 0 0 6px;
	font-family: var(--bah-display);
	font-size: clamp(19px, calc(17.93px + 0.273vw), 22px);
	font-weight: 400;
	letter-spacing: -0.11px;
	line-height: 1.2;
	color: var(--bah-paper);
}

#modal-contact .site-modal__note {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 1000px) {
	#modal-contact .site-modal__body {
		height: 100dvh;
	}
}

/* --- CF7 form (shared by both modals) ------------------------------------ */

.site-modal__form form br {
	display: none;
}

.site-modal__form p {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	color: var(--bah-soft);
}

.site-modal__form .wpcf7-form-control:not([type="hidden"]):not(.wpcf7-submit) {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bah-ink);
	background: var(--bah-surface);
}

.site-modal__form textarea.wpcf7-form-control {
	min-height: 110px;
	resize: vertical;
}

.site-modal__form .wpcf7-form-control:focus-visible {
	outline: 2px solid var(--bah-accent);
	outline-offset: 1px;
}

.site-modal__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	color: #b3413a;
}

.site-modal__form .wpcf7-response-output {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

.site-modal__form .wpcf7-submit {
	width: auto;
	margin-top: 12px;
	padding: 12px 24px;
	background: var(--bah-dark);
	border: 1px solid transparent;
	color: var(--bah-on-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.site-modal__form .wpcf7-submit:hover {
	background: #3a2a25;
}

.site-modal__form .wpcf7-spinner {
	margin-left: 12px;
}

/* --- Booking form (light panel) — numbered steps -------------------------
 *
 * The 3 forms in #modal-booking (Restauração/Tours/Bem-Estar) follow the
 * same "numbered step" structure: number + label + required marker on one
 * line, then an optional supporting note, and only then the field — see
 * the "pop-up reservas restauração/Tours" and "pop-up - pedir marcação"
 * frames in Penpot. This replaces the generic `<p>` (which was only
 * enough when the label came embedded in the field's placeholder). */

#modal-booking .site-modal__step + .site-modal__step {
	margin-top: 28px;
}

#modal-booking .site-modal__stepheading {
	margin: 0 0 4px;
	font-family: var(--bah-sans);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--bah-ink);
}

#modal-booking .site-modal__badge {
	display: inline-flex;
	align-items: center;
	margin: 0 0 4px;
	padding: 6px 10px;
	background: rgba(248, 233, 218, 0.9);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-accent);
}

/* Same author-stylesheet-beats-[hidden] issue as .arc-carousel[hidden] etc. in concierge-archives.css. */
#modal-booking .site-modal__badge[hidden] {
	display: none;
}

#modal-booking .site-modal__subtitle {
	display: block;
	margin: 0 0 4px;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bah-soft);
}

#modal-booking .site-modal__form .site-modal__field {
	margin: 0 0 24px;
}

.site-modal__field-extras {
	border: 1px solid var(--bah-border);
	background-color: var(--bah-paper);
	padding: 20px;
}

.site-modal__field-extras .site-modal__field > div {
	margin-left: 32px;
}

#modal-booking .site-modal__fieldhead {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bah-ink);
}

#modal-booking .site-modal__num {
	margin-right: 6px;
	font-weight: 600;
	color: var(--bah-soft);
}

#modal-booking .site-modal__required {
	margin-right: 4px;
	font-weight: 600;
	color: var(--bah-accent);
}

#modal-booking .site-modal__hint {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bah-soft);
}

#modal-booking .site-modal__field-extras .site-modal__hint {
	margin: 0 0 8px 32px;
}

#modal-booking .site-modal__field-extras .site-modal__field p {
	margin-bottom: 0;
}

#modal-booking .site-modal__notice {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bah-soft);
}

#modal-booking .site-modal__notice strong {
	color: var(--bah-muted, var(--bah-soft));
	font-weight: 600;
}

/* Multi-option pick lists whose choices are exclusive but shown as plain
   checkboxes (meal type, experience type, session/route type, time
   slots…), rendered by CF7 as `[checkbox exclusive]`: a vertical list
   with a square box — see the
   "pop-up - pedir marcação" frame in Penpot: 18x18 box, square corners,
   1px --bah-soft border when empty, solid --bah-ink fill with a --bah-paper
   checkmark when checked. */
#modal-booking .wpcf7-form-control.wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 0;
	padding: 0;
	background: transparent;
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.site-modal__actions p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	margin: 0; 
}

.site-modal__actions .site-modal__cancel,
.site-modal__actions .wpcf7-submit {
	flex: 0 0 50%;
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox label {
	display: inline-flex;
	cursor: pointer;
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
	display: inline-flex;
	align-items: flex-start;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bah-ink);
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 12px 0 0;
	background: var(--bah-surface);
	border: 1px solid var(--bah-soft);
	box-sizing: border-box;
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
	background-color: var(--bah-ink);
	/* Checkmark, stroke hardcoded to --bah-paper's value (#EEE7DE, see
	   concierge-base.css) since a data URI can't reference a CSS variable. */
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7L9 1' stroke='%23EEE7DE' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	border-color: var(--bah-ink);
}

#modal-booking .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {
	outline: 2px solid var(--bah-accent);
	outline-offset: 2px;
}

#modal-booking .site-modal__form .wpcf7-form-control::placeholder {
	color: #757575;
	opacity: 1;
}

/* --- Actions: Cancel / Send Request (light panel) ------------------------ */

#modal-booking .site-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 32px;
}

#modal-booking .site-modal__cancel,
#modal-booking .site-modal__form .wpcf7-submit {
	flex: 0 0 calc(50% - 4px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	float: none;
}

#modal-booking .site-modal__cancel svg {
	width: 14px;
	height: 14px;
}

#modal-booking .site-modal__cancel {
	padding: 12px 24px;
	background: transparent;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-family: var(--bah-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bah-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

#modal-booking .site-modal__cancel:hover,
#modal-booking .site-modal__cancel:focus-visible {
	background: var(--bah-paper);
	border-color: var(--bah-accent);
}

#modal-booking .wpcf7-spinner {
	flex-basis: 100%;
	max-width: 24px;
	margin: 8px auto 0;
}

/* --- Contact form (dark panel) — fields with an inline label ------------ */

#modal-contact .site-modal__form {
	margin: 0;
}

#modal-contact .site-modal__form p {
	margin: 0 0 24px;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--bah-paper);
}

#modal-contact .field-label {
	flex: none;
	font-size: 16px;
	font-weight: 700;
	color: var(--bah-paper);
	margin-right: 12px;
}

#modal-contact .field-required {
	margin-left: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bah-accent);
}

#modal-contact .field--row,
#modal-contact .field-row {
	display: flex;
	align-items: baseline;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

#modal-contact .field--with-help {
	display: flex;
	flex-direction: column;
}

#modal-contact .field-help {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.21;
	color: rgba(255, 255, 255, 0.55);
}

#modal-contact .field--column {
	display: flex;
	flex-direction: column;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

#modal-contact .field--column .field-label {
	margin-bottom: 8px;
}

#modal-contact .wpcf7-form-control-wrap {
	flex: 1;
	min-width: 0;
}

#modal-contact .wpcf7-form-control:not([type="hidden"]):not(.wpcf7-submit) {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var(--bah-paper);
}

#modal-contact .wpcf7-form-control::placeholder {
	color: var(--bah-soft);
	opacity: 1;
}

#modal-contact textarea.wpcf7-form-control {
	height: 44px;
	min-height: 44px;
	resize: vertical;
}

#modal-contact .wpcf7-form-control:focus,
#modal-contact .wpcf7-form-control:focus-visible {
	outline: none;
}

#modal-contact .field--row:focus-within,
#modal-contact .field--column:focus-within {
	border-color: var(--bah-border);
}

#modal-contact .wpcf7-not-valid-tip {
	margin-top: 6px;
}

#modal-contact .wpcf7-response-output {
	margin: 16px 0 0;
	border-color: rgba(255, 255, 255, 0.32);
	color: var(--bah-paper);
}

/* --- Actions: Cancel / Send Request -------------------------------------- */

#modal-contact .site-modal__cancel,
#modal-contact .wpcf7-submit {
	flex: 0 0 calc(50% - 4px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	float: none;
	padding: 12px 20px;
	border-radius: 0;
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.83px;
	line-height: 1.2857;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#modal-contact .site-modal__cancel svg {
	width: 14px;
	height: 14px;
}

#modal-contact .site-modal__cancel {
	background: transparent;
	border: 1px solid var(--bah-border);
	color: var(--bah-border);
}

#modal-contact .site-modal__cancel:hover,
#modal-contact .site-modal__cancel:focus-visible {
	background: rgba(216, 198, 176, 0.1);
}

#modal-contact .wpcf7-submit {
	width: auto;
	background: var(--bah-border);
	border: 1px solid transparent;
	color: var(--bah-ink);
}

#modal-contact .wpcf7-submit:hover {
	background: #c4a578;
}

#modal-contact .wpcf7-spinner {
	grid-column: 1 / -1;
	justify-self: center;
	margin: 8px 0 0;
}

#modal-contact .site-modal__actions p {
	display: flex;
	gap: 8px;
	margin-bottom: 0 !important;
	flex-wrap: nowrap;
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

@media (max-width: 560px) {
	.site-modal {
		padding: 0;
	}

	.site-modal__panel--light {
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		border-width: 0;
	}

	.site-modal--panel .site-modal__panel {
		max-width: none;
	}

	.site-modal__body {
		padding: 40px 24px;
	}

	#modal-contact .site-modal__body {
		padding: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-modal__panel {
		transition-duration: 0.01ms !important;
	}
}