/**
 * 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 ---------- */

/* The status line now carries errors only — successes get the panel below —
   so it is drawn as an alert rather than as a line of coloured text that was
   easy to read straight past. */
.gp-book-request__status:empty { display: none; }

.gp-book-request__status {
	margin-block: 16px 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(231, 0, 11, 0.07);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--sale-red);
}

/* ---------- confirmation ---------- */

.gp-book-request__done { display: none; }

.gp-book-request--done .gp-book-request__body { display: none; }

.gp-book-request--done .gp-book-request__done {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 36px 24px 32px;
	text-align: center;
}

.gp-book-request__done-mark {
	display: grid;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	margin-block-end: 4px;
	border-radius: 50%;
	background: rgba(6, 78, 59, 0.1);
	color: var(--wp--preset--color--brand-green);
}

.gp-book-request__done-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--brand-green);
}

.gp-book-request__done-text {
	margin: 0;
	max-inline-size: 34ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* The book they asked for, quoted back, so the confirmation is about their
   request and not a generic success message. */
.gp-book-request__done-book {
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.05);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

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

.gp-book-request__done-note {
	margin: 4px 0 0;
	max-inline-size: 38ch;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.6);
}

.gp-book-request__done-close {
	margin-block-start: 12px;
	padding: 12px 32px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--brand-green);
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.gp-book-request__done-close:hover { background: var(--wp--preset--color--brand-deep); }

.gp-book-request__done-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

.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%; }
}