/*
 * Azul Booking, the windows over the flow: the question dialog
 * (src/Question.php, question.js) and the "send your stay summary by
 * email" dialog (src/Share.php, share.js). Their Gravity Forms forms are drawn
 * by the blocks module (gform.css, on the class azul-gform set on the box
 * around them by booking-flow/render.php); this sheet holds the windows
 * and what is particular to each form.
 */

/* The box around both windows only carries the classes of the form dressing. */
.azul-bk-windows {
	display: contents;
}

/* ---------- Question before booking ---------- */

/* The dialog (shell, title and close button: booking-core.css) opens near
   the top of the window, where it stays readable above a phone keyboard. */
.azul-bkq {
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	margin-top: 24px;
	overscroll-behavior: contain;
}

.azul-bkq__box {
	position: relative;
	padding: 30px 30px 26px;
}

.azul-bkq__title {
	margin: 0 40px 8px 0;
}

.azul-bkq__lead {
	margin: 0 0 18px;
	color: var(--azul-ink-soft);
	line-height: 1.5;
}

.azul-bkq__stay {
	margin: 0 0 20px;
	padding: 14px 16px 2px;
	border: 1px solid var(--azul-line);
	border-radius: var(--azul-radius);
	background: var(--azul-sand);
}

.azul-bkq__stay .azul-bk-kv {
	gap: 8px;
	margin-bottom: 12px;
}

.azul-bkq__stay .azul-bk-kv li.is-total {
	padding-top: 8px;
	border-top: 1px solid var(--azul-line);
	font-size: 1rem;
}

.azul-bkq__form {
	--gform-gap: 14px;
	--gform-textarea-h: 130px;
	--gform-button-pad: 22px;
}

.azul-bkq__form .gform_footer {
	margin-top: 18px;
}

/* Name and email side by side from tablet width (gform.css lays the
   fields on a 12-column grid). */
@media (min-width: 641px) {
	.azul-bkq__form .gfield.bkq-name,
	.azul-bkq__form .gfield.bkq-email {
		grid-column: span 6;
	}
}

.azul-bkq-done .button .icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
}

.azul-bkq-done__title {
	margin: 0 0 8px;
	font-family: var(--azul-font-display);
	font-size: 1.25rem;
}

.azul-bkq-done p {
	margin: 0 0 18px;
	line-height: 1.5;
}

@media (max-width: 559px) {
	.azul-bkq {
		width: calc(100vw - 16px);
		max-height: calc(100dvh - 16px);
	}

	.azul-bkq__box {
		padding: 24px 18px 18px;
	}

	.azul-bkq__form .gform_wrapper .gform_button,
	.azul-bkq-done .button {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- "Send your stay summary by email" dialog (shell, backdrop
   and close button: booking-core.css) ---------- */

.azul-bks {
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100dvh - 32px);
	overscroll-behavior: contain;
}

.azul-bks__box {
	position: relative;
	padding: 28px 28px 24px;
}

.azul-bks__title {
	margin: 0 40px 6px 0;
	font-family: var(--azul-font-display);
	font-size: 1.4rem;
	line-height: 1.2;
}

.azul-bks__lead {
	margin: 0 0 18px;
	color: var(--azul-ink-soft);
	line-height: 1.5;
}

.azul-bks__close {
	--bk-close-inset: 14px;
}

/* The rules of this form name the dialog too: they hold against the theme
   of Gravity Forms whichever sheet prints first. */
.azul-bks__form {
	--gform-gap: 10px;
	--gform-button-h: 46px;
}

.azul-bks .azul-bks__form .gform_wrapper {
	margin: 0;
}

.azul-bks .azul-bks__form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	border: 1.5px solid var(--azul-line);
	border-radius: var(--azul-radius-s);
	background: var(--azul-surface);
	color: var(--azul-ink);
	font: inherit;
	font-size: 1rem;
}

.azul-bks .azul-bks__form .gfield_error input[type="email"] {
	border-color: var(--azul-coral);
	background: var(--azul-coral-tint);
}

.azul-bks .azul-bks__form .bks-reminder .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.azul-bks .azul-bks__form .bks-reminder input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border-radius: var(--azul-radius-xs);
	accent-color: var(--azul-cta);
}

.azul-bks .azul-bks__form .gform_wrapper .bks-reminder .gchoice label {
	max-width: none;
	margin: 0;
	padding: 0;
	color: var(--azul-ink-soft);
	font-size: var(--azul-text-sm);
	line-height: 1.4;
}

.azul-bks .azul-bks__form .gform_footer {
	margin: 14px 0 0;
	padding: 0;
}

/* The field's own message says what went wrong: no summary box. */
.azul-bks .azul-bks__form .gform_validation_errors {
	display: none;
}

.azul-bks .azul-bks__form .gfield_validation_message {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--azul-coral);
	font-size: var(--azul-text-sm);
}

/* One field and one checkbox: the legend of the checkbox and the label of
   the email field (its placeholder says it) stay for screen readers only. */
.azul-bks .azul-bks__form .bks-reminder > legend {
	display: none;
}

.azul-bks .azul-bks__form .bks-email .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.azul-bks .azul-bks__form .gform_wrapper .gform_footer .gform_button {
	justify-content: center;
	width: 100%;
}

/* The other people of the trip: one field each, shown one by one. */
.azul-bks .azul-bks__form [class*="bks-email"][hidden] {
	display: none;
}

.azul-bks .azul-bks__form [class*="bks-email"] .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.azul-bks__add,
.azul-bk-sharelink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--azul-cta-dark);
	font: inherit;
	font-size: var(--azul-text-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Among the fields of the form (share.js puts it under the last address):
   named with the form so it stays a link whatever dresses the form's buttons. */
.azul-bks .azul-bks__form .gform_wrapper .azul-bks__add {
	display: inline-flex;
	grid-column: 1 / -1;
	justify-self: start;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--azul-cta-dark);
	font-size: var(--azul-text-sm);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.azul-bks .azul-bks__form .gform_wrapper .azul-bks__add[hidden] {
	display: none;
}

.azul-bks__add[hidden],
.azul-bk-sharelink[hidden] {
	display: none;
}

.azul-bks__add .icon,
.azul-bk-sharelink .icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

/* In the summary of the flow, above its reassurance lines. */
.azul-bk-sharelink {
	margin: 14px 0 0;
}

.azul-bks__link {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--azul-line);
}

.azul-bks__or {
	margin: 0 0 8px;
	color: var(--azul-ink-soft);
	font-size: var(--azul-text-sm);
}

.azul-bks__copy {
	justify-content: center;
	width: 100%;
	min-height: 46px;
}

.azul-bks__copy .icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
}

.azul-bks__url {
	margin: 8px 0 0;
}

.azul-bks__url input {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1.5px solid var(--azul-line);
	border-radius: var(--azul-radius-s);
	background: var(--azul-surface);
	color: var(--azul-ink);
	font: inherit;
	font-size: var(--azul-text-sm);
}

.azul-bks__status {
	margin: 6px 0 0;
	color: var(--azul-ink-soft);
	font-size: var(--azul-text-sm);
}

.azul-bks__status:empty {
	display: none;
}

/* Sent: the link stays, the form and the "add a person" button are gone. */
.azul-bks:has([data-bks-done]) .azul-bks__lead {
	display: none;
}

.azul-bks-done__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-weight: 700;
}

.azul-bks-done__title .icon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	color: var(--azul-cta);
}

.azul-bks-done p {
	margin: 0;
	line-height: 1.45;
}

.azul-bks-done p + p {
	color: var(--azul-ink-soft);
	font-size: var(--azul-text-sm);
}

@media (max-width: 559px) {
	.azul-bks {
		width: calc(100vw - 16px);
		max-height: calc(100dvh - 16px);
	}

	.azul-bks__box {
		padding: 24px 18px 18px;
	}

	.azul-bks__title {
		font-size: 1.2rem;
	}
}