/* ============================================================
   ll/native-inquiry — the native quote-request form.
   Uses the theme's design tokens (--wp--preset--*) so it reads as
   part of the site, matching the Stage-1 prototype's .quote-form.

   LW-32 overhaul: a segmented "What are you planning?" choice gates
   the form; a unified field-cell model aligns bordered choice groups
   with plain inputs; the Turnstile widget renders light in the card.
   ============================================================ */

.ll-inquiry-wrap {
	--ll-hairline: 1.5px solid rgba(74, 53, 94, 0.2);
	--ll-radius-sm: 12px;
	--ll-radius-lg: 22px;
}

.ll-inquiry {
	background: var(--wp--preset--color--white);
	border-radius: var(--ll-radius-lg);
	box-shadow: 0 6px 30px rgba(74, 53, 94, 0.08);
	padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
/* Predictable sizing so bordered boxes and plain inputs share a height. */
.ll-inquiry * {
	box-sizing: border-box;
}

.ll-inquiry__title {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 600;
	color: var(--wp--preset--color--plum);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	margin: 0 0 0.4rem;
}
.ll-inquiry__intro {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	margin: 0 0 1.5rem;
}

/* ---- Progressive-enhancement gate --------------------------------------
   Without JS the whole form is visible + usable. With JS, the body is hidden
   until a path is chosen (the .ll-js-gated class is added during parse, so
   there is no flash of the full form), then revealed and never re-hidden. */
.ll-inquiry.ll-js-gated .ll-inquiry__body {
	display: none;
}
.ll-inquiry.ll-js-gated.ll-is-revealed .ll-inquiry__body {
	display: block;
}
/* Elements JS hides per path (via the `hidden` attribute) must actually hide,
   even when they carry a display-setting class like .ll-form-row (grid). */
.ll-inquiry [hidden] {
	display: none !important;
}

/* ---- Rows + fields ----------------------------------------------------- */
/* Two-up rows collapse to one column on narrow screens. Cells align on their
   top so a bordered choice box and a plain input share a baseline. */
.ll-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: start;
}
@media (max-width: 640px) {
	.ll-form-row {
		grid-template-columns: 1fr;
	}
}
/* Bottom-align a two-column row's controls onto a shared baseline. Used where a
   bordered choice group (Preferred contact) sits beside a plain input: the legend
   and the label can differ slightly in height, so pinning the cells' bottoms
   keeps the 48px input and the 48px boxed group on the same line. */
.ll-form-row--align-end {
	align-items: end;
}
/* Date + time row. The Bridal branch's "What time does the bride need to be
   ready?" wraps to two lines while "Wedding date" is one, which used to drop the
   time input below the date input. Instead of reserving a guessed label height,
   each field group is display:contents so its label and input join THIS grid: the
   two labels share grid row 1 and the two inputs share row 2. A taller (wrapped)
   label grows row 1 and pushes BOTH inputs down together, so the inputs keep a
   shared top baseline in either branch. Labels bottom-align to sit against their
   input; inputs top-align (a native time input renders a hair taller than a date
   input, so aligning tops — not bottoms — keeps their baseline shared). Below
   641px the row is a single column and the groups stack normally. */
.ll-datetime-row {
	display: grid;
	/* minmax(0, …) not 1fr (LW-49): a 1fr track won't shrink below its content's
	   min-content width, and iOS gives native date/time inputs a wide intrinsic
	   minimum, which pushed them past the card edge in mobile Safari. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}
@media (min-width: 641px) {
	.ll-datetime-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 1rem;
		row-gap: 0;
		align-items: end;
	}
	.ll-datetime-row > .ll-field {
		display: contents;
	}
	.ll-datetime-row > .ll-field:first-child > * {
		grid-column: 1;
	}
	.ll-datetime-row > .ll-field:last-child > * {
		grid-column: 2;
	}
	.ll-datetime-row label {
		grid-row: 1;
		align-self: end;
	}
	.ll-datetime-row input {
		grid-row: 2;
		align-self: start;
	}
	.ll-datetime-row .ll-hint {
		grid-row: 3;
		align-self: start;
	}
}
/* Paired label+input row (LW-43). Same fix as .ll-datetime-row above, kept as a
   modifier because these rows are otherwise ordinary .ll-form-rows. Used by the
   two headcount rows, whose labels are long enough that ONE of them wraps first
   at intermediate two-column widths ("How many people need hairstyling?" wraps
   while "…makeup?" is still one line), which dropped that input below its
   neighbour. Reserving a label height would only guess; instead each field group
   is display:contents so its label and input join THIS grid — the two labels
   share grid row 1 and the two inputs share row 2, so a wrapped label grows row 1
   and pushes BOTH inputs down together at every width. Labels bottom-align
   against their input, inputs top-align, exactly as the date/time row.
   Only applies where the row is actually two columns; at 640px and below
   .ll-form-row is a single column and the groups stack untouched. */
@media (min-width: 641px) {
	.ll-form-row--paired {
		row-gap: 0;
		align-items: end;
		/* display:contents drops each .ll-field's box — and with it the 1rem bottom
		   margin that used to space this row from what follows. Restore it as
		   PADDING, not margin: those field margins sat INSIDE the row's box, and a
		   margin here would instead collapse with the next sibling's (the .ll-rule
		   below the Special-Event row has a larger one, which swallowed it whole and
		   tightened that gap by 16px). Padding never collapses, so this reproduces
		   the previous spacing exactly. */
		padding-bottom: 1rem;
	}
	.ll-form-row--paired > .ll-field {
		display: contents;
	}
	.ll-form-row--paired > .ll-field:first-child > * {
		grid-column: 1;
	}
	.ll-form-row--paired > .ll-field:last-child > * {
		grid-column: 2;
	}
	.ll-form-row--paired label {
		grid-row: 1;
		align-self: end;
	}
	.ll-form-row--paired input {
		grid-row: 2;
		align-self: start;
	}
}

.ll-field {
	margin-bottom: 1rem;
	min-width: 0;
}
/* Fieldsets are reset to behave like a plain .ll-field: the legend reads like a
   label and the control sits below it, so groups line up with inputs. */
fieldset.ll-field {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
	min-inline-size: 0;
}
.ll-field label,
.ll-field legend {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--ink);
	padding: 0;
}
.ll-hint {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0.15rem;
}
.ll-field legend + .ll-hint {
	margin-top: -0.15rem;
	margin-bottom: 0.5rem;
}
.ll-req {
	color: var(--wp--preset--color--violet);
}

.ll-inquiry input[type="text"],
.ll-inquiry input[type="email"],
.ll-inquiry input[type="tel"],
.ll-inquiry input[type="date"],
.ll-inquiry input[type="time"],
.ll-inquiry input[type="number"],
.ll-inquiry select,
.ll-inquiry textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ivory);
	border: var(--ll-hairline);
	border-radius: var(--ll-radius-sm);
	padding: 0.75rem 0.9rem;
	min-height: 48px;
	transition: border-color 0.2s, background 0.2s;
}
.ll-inquiry input[type="date"],
.ll-inquiry input[type="time"] {
	min-width: 0;
}
/* iOS Safari only (LW-49): the native date/time control has an intrinsic
   minimum width that ignores width:100%, pushing the input past the card edge.
   Dropping the native chrome makes it honour the width; the tap-to-open picker
   still works (checked in the iOS Simulator). Left-align the value like the
   text fields. Scoped to iOS so desktop browsers keep their picker affordances. */
@supports (-webkit-touch-callout: none) {
	.ll-inquiry input[type="date"],
	.ll-inquiry input[type="time"] {
		-webkit-appearance: none;
		appearance: none;
	}
	.ll-inquiry input[type="date"]::-webkit-date-and-time-value,
	.ll-inquiry input[type="time"]::-webkit-date-and-time-value {
		text-align: left;
	}
}
.ll-inquiry textarea {
	min-height: 120px;
	resize: vertical;
}
.ll-inquiry input:focus,
.ll-inquiry select:focus,
.ll-inquiry textarea:focus {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 1px;
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--violet);
}
.ll-inquiry input[aria-invalid="true"],
.ll-inquiry select[aria-invalid="true"],
.ll-inquiry textarea[aria-invalid="true"] {
	border-color: #b3261e;
	background: #fbeaea;
}
/* Inline required-field message (LW-48): iOS Safari shows no native bubble. */
.ll-field-error {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #8a2b2b;
}
.ll-choice-cards:has(input[aria-invalid="true"]) .ll-choice-card {
	border-color: #b3261e;
}
@media (min-width: 641px) {
	.ll-datetime-row .ll-field-error {
		grid-row: 4;
	}
}

/* Section header + divider between identity and event details. */
.ll-rule {
	border: 0;
	border-top: var(--ll-hairline);
	margin: 1.6rem 0;
}
.ll-section-head {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

/* ---- "What are you planning?" segmented cards --------------------------
   These are NAMESPACED as .ll-choice-card (not .ll-card) on purpose. The theme
   (theme.css) has its own generic content-card component named .ll-card — white
   fill, an 18px radius, a soft shadow and overflow:hidden — used for the home
   page's service cards. When these choice cards also used .ll-card they inherited
   all of that: the theme's overflow:hidden clipped this card's body to the theme's
   rounder 18px corner, slicing the body's tighter 12px corners and exposing the
   white backing — the "squared / notched corners" bug. The selected card's solid
   plum border masked it; the near-borderless card showed it. Renaming to
   .ll-choice-card ends the collision, so the body below paints the whole card. */
.ll-field--cards {
	margin-bottom: 1.6rem;
}
.ll-choice-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
}
@media (max-width: 640px) {
	.ll-choice-cards {
		grid-template-columns: 1fr;
	}
}
.ll-choice-card {
	position: relative;
	display: block;
	cursor: pointer;
}
/* The radio stays in the DOM (semantic radio-group, guaranteed inquiry_type)
   but is visually hidden — focusable, not display:none. */
.ll-choice-card__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}
.ll-choice-card__body {
	display: block;
	border: 2px solid rgba(74, 53, 94, 0.25);
	border-radius: var(--ll-radius-sm);
	/* Fill, border and radius all live on this one element, so the card is a single
	   rounded shape. overflow:hidden clips the fill to that radius; the wrapper no
	   longer carries any theme fill/clip to fight it (see the note above). The
	   selected glow (outset box-shadow) and focus outline are not clipped by
	   overflow, so both survive. */
	overflow: hidden;
	background: var(--wp--preset--color--ivory);
	padding: 1rem 1.2rem;
	min-height: 44px;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ll-choice-card__title {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--plum);
	font-size: var(--wp--preset--font-size--medium);
}
.ll-choice-card__desc {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-soft);
}
.ll-choice-card:hover .ll-choice-card__body {
	border-color: var(--wp--preset--color--plum);
}
.ll-choice-card__input:checked + .ll-choice-card__body {
	border-color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--lavender);
	box-shadow: 0 4px 18px rgba(74, 53, 94, 0.12);
}
.ll-choice-card__input:focus-visible + .ll-choice-card__body {
	outline: 2px solid var(--wp--preset--color--violet);
	outline-offset: 2px;
}

/* ---- Radio / checkbox groups ------------------------------------------ */
.ll-choice {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	cursor: pointer;
	min-height: 44px;
}
.ll-choice input {
	width: 1.25rem;
	height: 1.25rem;
	accent-color: var(--wp--preset--color--plum);
	flex: none;
}
/* Every .ll-choice option label lives inside a .ll-field (a fieldset or a field
   div), so the broad `.ll-field label` rule far above (display:block, a 0.35rem
   bottom margin, font-weight:600) out-specifies a bare `.ll-choice` and wins —
   which flattened the flex row and left a stray margin under the control. In the
   boxed Preferred-contact group that read as radios pinned to the top with empty
   space below ("top-heavy"). `.ll-field label.ll-choice` out-specifies it back so
   the flex layout, normal weight and zero label margin hold. align-items is left
   to `.ll-choice` / `.ll-choice--block` so the block consent rows keep flex-start. */
.ll-field label.ll-choice {
	display: flex;
	margin-bottom: 0;
	font-weight: 400;
}
.ll-choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.6rem;
}
/* Boxed inline choice group (e.g. Preferred contact) reads like an input so it
   lines up with the plain field beside it in a two-column row. align-content
   centers the choice line within the box's min-height (align-items alone only
   centers items within their flex line), so the radios sit centered, not high. */
.ll-choice-row--boxed {
	border: var(--ll-hairline);
	border-radius: var(--ll-radius-sm);
	background: var(--wp--preset--color--ivory);
	padding: 0 0.9rem;
	min-height: 48px;
	align-items: center;
	align-content: center;
}
.ll-choice--block {
	align-items: flex-start;
	padding: 0.2rem 0;
}
.ll-choice--block span a {
	color: var(--wp--preset--color--violet);
}

/* ---- Bridal getting-ready address group ------------------------------- */
.ll-loc__group {
	margin-top: 0.6rem;
	padding: 1rem 1.1rem 0.2rem;
	border: var(--ll-hairline);
	border-radius: var(--ll-radius-lg);
	background: rgba(74, 53, 94, 0.02);
}
.ll-loc__group .ll-form-row {
	gap: 1rem;
}

/* ---- Places autocomplete ---------------------------------------------- */
.ll-places {
	position: relative;
}
.ll-places__list {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 0.25rem 0 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid rgba(74, 53, 94, 0.18);
	border-radius: var(--ll-radius-sm);
	box-shadow: 0 14px 44px rgba(74, 53, 94, 0.14);
	max-height: 16rem;
	overflow-y: auto;
}
.ll-places__list li {
	padding: 0.6rem 0.7rem;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.ll-places__list li:hover,
.ll-places__list li[aria-selected="true"] {
	background: var(--wp--preset--color--lavender);
}

/* ---- Submit button — matches the theme's plum primary button. --------- */
.ll-inquiry__submit {
	width: 100%;
	margin-top: 0.5rem;
	padding: 1rem 2.4rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--plum);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	min-height: 48px;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ll-inquiry__submit:hover:not(:disabled) {
	background: var(--wp--preset--color--plum-deep);
	transform: translateY(-1px);
	box-shadow: 0 14px 44px rgba(74, 53, 94, 0.14);
}
.ll-inquiry__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---- Status / thank-you / error line ---------------------------------- */
.ll-inquiry__status {
	display: none;
	margin-top: 1rem;
	border-radius: var(--ll-radius-sm);
	padding: 1rem 1.2rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.ll-inquiry__status.is-shown {
	display: block;
}
.ll-inquiry__status.is-success {
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--plum);
}
.ll-inquiry__status.is-error {
	background: #fbeaea;
	color: #8a2b2b;
}

/* Honeypot: off-screen but focusable so bots fill it; humans never see it. */
.ll-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Cloudflare Turnstile widget (light theme). It carries .ll-field for spacing;
   reserve the managed widget's height so it doesn't shift the submit button
   when the iframe loads in. */
.ll-turnstile {
	min-height: 65px;
}

/* The submitted state replaces the fields, without changing error/retry UI. */
.ll-inquiry.is-done > *:not(.ll-inquiry__confirmation),
.ll-inquiry__confirmation[hidden],
.ll-inquiry-complete-intro[hidden] {
	display: none !important;
}
.ll-inquiry.is-done {
	box-shadow: none;
	padding: clamp(1.25rem, 3vw, 2rem) 0;
}
.ll-contact-form--complete {
	padding-block: 0 !important;
}
.ll-inquiry-complete-section {
	margin-block-start: 0 !important;
	padding-block: clamp(1.5rem, 4vw, 3rem) !important;
}
.ll-inquiry__confirmation {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
	color: var(--wp--preset--color--ink-soft);
}
.ll-inquiry__confirmation h1 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	font-weight: 500;
	line-height: 1.08;
	text-wrap: balance;
	color: var(--wp--preset--color--plum);
	margin: 0 0 1.2rem;
	scroll-margin-top: 7rem;
}
.ll-inquiry__confirmation p {
	max-width: 60ch;
	margin: 0 auto;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
}
.ll-inquiry__confirmation .ll-inquiry__browse {
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--small);
}
.ll-inquiry__photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.5rem, 2vw, 1rem);
	margin: 1.2rem 0;
}
.ll-inquiry__photos img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: 10px;
}
.ll-inquiry__portfolio {
	display: inline-flex;
	gap: 0.35em;
	align-items: center;
	min-height: 48px;
	color: var(--wp--preset--color--plum);
	font-weight: 600;
	text-underline-offset: 0.25em;
}

/* Keep the face in the right-hand third photo inside its portrait preview. */
.ll-inquiry__photos img:last-child {
	object-position: 100% 15%;
}