/**
 * gp/book-request-modal
 *
 * Measured off the live modal at a 1280 viewport: a 560px card on a 16px
 * radius over a 0.6 backdrop, a green header band 83px tall carrying a 36px
 * mark and a 34px close, a tinted card on a 12px radius, 50px fields on a
 * 10px radius with the two short answers sharing a row, and a full-width
 * 50px submit.
 *
 * The dialog ships hidden, which is the state a working page ends in, so
 * there is nothing for a script to correct after first paint. The inline form
 * is kept for pages without scripts, via <noscript> in render.php.
 */

.gp-book-request__honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gp-book-request__open {
	appearance: none;
	border: 0;
	border-radius: 6px;
	padding: 0.8em 1.8em;
	background: var(--wp--preset--color--brand-gold);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	cursor: pointer;
}

.gp-book-request__open:hover { background: var(--wp--preset--color--brand-amber); }

.gp-book-request__open:focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 2px;
}

.gp-book-request__dialog {
	/* The two tints below are the modal's own: a card wash and a field rule
	   that sit between the palette's border grey and its greens. */
	--gp-br-card: #e3f0e9;
	--gp-br-line: #d9e2dd;

	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 560px;
	margin-inline: auto;
	border: 0;
	border-radius: 16px;
	padding: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	/* The header band is square-cornered; the card's radius is what rounds
	   it, so the band has to be clipped to it. */
	overflow: hidden;
	text-align: start;
}

/* The dialog is hidden until opened. It used to be the other way round —
   shown inline until view.js added a class — which meant every page painted
   the whole form in the header and then dropped it once the deferred script
   ran. The no-JS fallback that inversion existed for is served by the
   <noscript> rule in render.php instead, and the unsupported-<dialog> case
   by the modifier below. */
.gp-book-request__dialog { display: none; }
.gp-book-request__dialog[open] { display: block; position: fixed; }

/* view.js sets this when the browser has no showModal to call, putting the
   plain inline form back. */
.gp-book-request--inline .gp-book-request__dialog { display: block; position: static; }
/* The header styles the trigger through .gp-header__find, two classes, from
   a sheet that loads after this one — so hiding it takes three. */
[data-gp-book-request].gp-book-request--inline .gp-book-request__open { display: none; }

.gp-book-request__dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

/* ---------- header band ---------- */

.gp-book-request__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px;
	background: linear-gradient(135deg, var(--wp--preset--color--brand-green), #053d2e);
	color: var(--wp--preset--color--surface);
}

.gp-book-request__mark {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-orange);
}

.gp-book-request__titles {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.gp-book-request__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.gp-book-request__subtitle {
	display: block;
	margin-block-start: 2px;
	font-size: 12px;
	line-height: 1.6;
	opacity: 0.82;
}

.gp-book-request__close {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	appearance: none;
	border: 0;
	border-radius: 50%;
	padding: 0;
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	cursor: pointer;
}

.gp-book-request__close:hover { background: rgba(255, 255, 255, 0.22); }

.gp-book-request__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 2px;
}

/* ---------- body ---------- */

.gp-book-request__body { padding: 20px 22px 24px; }

/* The card says what the form is for, in the shop's own words. */
.gp-book-request__card {
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--gp-br-card);
}

.gp-book-request__card-heading {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--brand-green);
}

.gp-book-request__card-icon {
	flex: none;
	display: block;
	margin-block-start: 3px;
}

.gp-book-request__card-text {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* ---------- fields ---------- */

.gp-book-request__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 18px;
}

.gp-book-request__field {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	min-inline-size: 0;
}

/* Live pairs the two short answers on one row. */
.gp-book-request__field--half { flex: 1 1 calc(50% - 6px); }

.gp-book-request__field label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

.gp-book-request__required { color: inherit; }

.gp-book-request__field input,
.gp-book-request__field textarea {
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	block-size: 50px;
	font-family: inherit;
	font-size: 14px;
	padding: 11px 12px;
	border: 1px solid var(--gp-br-line);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: inherit;
}

.gp-book-request__field textarea {
	block-size: 136px;
	resize: vertical;
	line-height: 1.6;
}

.gp-book-request__field input::placeholder,
.gp-book-request__field textarea::placeholder {
	color: rgba(4, 4, 4, 0.45);
}

.gp-book-request__field input:focus-visible,
.gp-book-request__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 1px;
}

.gp-book-request__field input:user-invalid {
	border-color: var(--wp--preset--color--sale-red);
}

/* ---------- status, promise, submit ---------- */

.gp-book-request__status:empty { display: none; }

.gp-book-request__status {
	margin-block: 16px 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--brand-green);
}

.gp-book-request__status.is-error { color: var(--wp--preset--color--sale-red); }

.gp-book-request__note {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	margin-block: 24px 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.gp-book-request__note-icon {
	flex: none;
	display: block;
	margin-block-start: 1px;
	color: var(--wp--preset--color--brand-green);
}

.gp-book-request__actions { margin-block: 16px 0; }

.gp-book-request__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 50px;
	appearance: none;
	border: 0;
	border-radius: 10px;
	padding: 13px 16px;
	background: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--surface);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.gp-book-request__submit:hover { background: var(--wp--preset--color--highlight-green); }
.gp-book-request__submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.gp-book-request__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* ---------- phone ---------- */

@media (max-width: 600px) {
	/* Left at 560 the card fills the screen edge to edge. */
	.gp-book-request__dialog { max-inline-size: calc(100vw - 32px); }

	.gp-book-request__head { padding: 16px; }
	.gp-book-request__body { padding: 16px 16px 20px; }

	/* Two 250px answers do not fit; they stack. */
	.gp-book-request__field--half { flex: 1 1 100%; }
}