/* No shadow of its own: the form sits inside a card that already casts one, and a second shadow
	under the same edge reads as a seam. */
.alovesinh-form {
	position: relative;
	padding: var( --alv-sp-4 );
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-white );
}

/* Filled accent, not the shared badge tint: this one sits at the top of a white form card where
	the pale badge would read as a disabled chip rather than as the form's own tag. */
.alovesinh-form-label {
	--alv-badge-text: var( --alv-c-white );
	--alv-badge-bg: var( --alv-c-accent );
	margin-bottom: var( --alv-sp-2 );
	letter-spacing: 0.08em;
}

.alovesinh-form-title {
	margin: 0 0 var( --alv-sp-1 );
	font-size: var( --alv-fs-5 );
	color: var( --alv-card-title );
}

.alovesinh-form-description {
	margin: 0 0 var( --alv-sp-3 );
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-muted );
}

/* The narrow count is fixed at one and is not the buyer's to choose: the shared grid falls back to
	TWO columns under 980, so a form left without this gains a column as the screen narrows, which
	is the opposite of what the source design does with its paired fields. */
.alovesinh-form-fields {
	--alv-grid-cols: 1;
	--alv-grid-cols-md: 1;
	--alv-grid-gap: var( --alv-sp-2 );
	--alv-grid-width: none;
	margin-bottom: var( --alv-sp-2 );
}

.alovesinh-form-field {
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-1 );
	margin: 0;
}

/* Direct child only: a choice set puts a label around every chip, and the uppercase of a field
	name would run down into the wording of each chip. */
.alovesinh-form-field > label {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --alv-c-ink );
}

.alovesinh-form-field-wide {
	grid-column: 1 / -1;
}

/* The full booking form: its name and phone sit side by side at every width,
	and the three boxes below carry the wide class that spans them back across both columns. */
.alovesinh-dat-lich-day-du .alovesinh-form-fields {
	--alv-grid-cols: 2;
	--alv-grid-cols-md: 2;
	--alv-grid-cols-sm: 2;
}

/* The quick form keeps its pair down to 821, not the grid's 980; stacked at 820, the source design
	sets the name and phone twice as far apart as the fields under them. */
.alovesinh-dat-lich-nhanh .alovesinh-form-fields {
	--alv-grid-cols-md: var( --alv-grid-cols );
}

@media ( max-width: 820px ) {

	.alovesinh-dat-lich-nhanh .alovesinh-form-fields {
		--alv-grid-cols-md: 1;
	}

	.alovesinh-dat-lich-nhanh .alovesinh-form-field:first-child {
		margin-bottom: var( --alv-sp-2 );
	}
}

.alovesinh-form-required {
	font-style: normal;
	color: var( --alv-c-accent );
}

/* The inline form's field joins this rule rather than restating it: the source design gives the
	stacked form and the search box one and the same input, and two copies drift. */
.alovesinh-form-field input,
.alovesinh-form-field select,
.alovesinh-form-field textarea,
.alovesinh-form-inline-field {
	width: 100%;
	padding: 13px 14px;
	border: 1.5px solid var( --alv-c-border );
	border-radius: var( --alv-r-1 );
	font-family: inherit;
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
	transition: border-color var( --alv-dur-2 ) ease, box-shadow var( --alv-dur-2 ) ease;
}

.alovesinh-form-field input:focus,
.alovesinh-form-field select:focus,
.alovesinh-form-field textarea:focus,
.alovesinh-form-inline-field:focus {
	border-color: var( --alv-c-brand );
	box-shadow: 0 0 0 4px color-mix( in srgb, var( --alv-c-brand ) 12%, transparent );
}

/* A choice set is a fieldset, so it carries no border or padding of its own and lays its legend
	out like every other field label. */
.alovesinh-form-choice-set {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.alovesinh-form-choice-set legend {
	padding: 0;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --alv-c-ink );
}

/* A legend stands further from its chips than a label from its box: the source design gives the
	choice set 12px where every single field gets 6. */
.alovesinh-form-choice-list {
	display: grid;
	grid-template-columns: repeat( var( --alv-choice-cols, 2 ), 1fr );
	gap: var( --alv-sp-1 );
	margin-top: var( --alv-sp-2 );
}

.alovesinh-form-choice {
	position: relative;
	display: block;
	cursor: pointer;
}

.alovesinh-form-choice-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --alv-sp-1 );
	padding: 10px;
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-1 );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-2 );
	transition:
		border-color var( --alv-dur-1 ) ease,
		background var( --alv-dur-1 ) ease,
		color var( --alv-dur-1 ) ease;
}

.alovesinh-form-choice:hover .alovesinh-form-choice-label,
.alovesinh-form-choice input:focus + .alovesinh-form-choice-label {
	border-color: var( --alv-c-brand );
}

.alovesinh-form-choice input:checked + .alovesinh-form-choice-label {
	border-color: var( --alv-c-brand );
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 6%, transparent );
}

.alovesinh-form-submit {
	--alv-btn-icon: 20px;
	justify-content: center;
	width: 100%;
	margin-top: var( --alv-sp-1 );
	padding: 14px;
	font-size: var( --alv-fs-3 );
}

.alovesinh-form-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --alv-sp-1 );
	margin-top: var( --alv-sp-2 );
	font-size: var( --alv-fs-1 );
	color: var( --alv-c-text-muted );
}

.alovesinh-form-note svg,
.alovesinh-form-note i {
	width: 12px;
	height: 12px;
	font-size: 12px;
	line-height: 1;
	stroke-width: 2;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.alovesinh-form-error {
	margin: var( --alv-sp-2 ) 0 0;
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-danger-dark );
}

.alovesinh-form-error:empty {
	display: none;
}

/* The :not() is what outranks the field grid's doubled class, whose display would otherwise keep
	the fields on screen behind the thanks. */
.alovesinh-form.alovesinh-form-sent > :not( .alovesinh-form-success ) {
	display: none;
}

/* No gap: the source design spaces the tick, the heading and the line under it by three different
	amounts, so each child carries its own margin. */
.alovesinh-form-success {
	gap: 0;
	padding: 16px 0;
	text-align: center;
}

/* The root also carries .alovesinh-center, whose display: grid would keep the block on screen even
	while the hidden attribute is set. */
.alovesinh-form-success[hidden] {
	display: none;
}

/* The darker stop is a literal because no token carries it: the source design declares it on the
	form itself and uses it for this one gradient. */
.alovesinh-form-success-icon {
	--alv-icon-color: var( --alv-c-white );
	--alv-icon-size: 36px;
	--alv-form-success-deep: #059669;
	width: 72px;
	height: 72px;
	margin: 0 auto 16px;
	border-radius: var( --alv-r-circle );
	background: linear-gradient( 135deg, var( --alv-c-success ), var( --alv-form-success-deep ) );
}

.alovesinh-form-success-icon svg {
	stroke-width: 2.5;
}

.alovesinh-form-success-title {
	margin: 0 0 8px;
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-card-title );
}

.alovesinh-form-success-description {
	margin: 0;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-muted );
}

.alovesinh-form-success-button {
	margin-top: 20px;
}

/* The quick form answers on a card of its own in the source design: a hairline and a lift the form
	does not wear while it is being filled, and a pale tick where the other two forms fill theirs. */
.alovesinh-dat-lich-nhanh .alovesinh-form-sent {
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	box-shadow: var( --alv-sh-1 );
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success {
	padding: 0;
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success-icon {
	--alv-icon-color: var( --alv-c-success );
	background: color-mix( in srgb, var( --alv-c-success ) 12%, transparent );
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success-icon svg {
	stroke-width: 2.4;
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success-description {
	font-size: 1rem;
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success-description strong {
	color: var( --alv-c-brand-deep );
}

.alovesinh-dat-lich-nhanh .alovesinh-form-success-button {
	margin-top: 18px;
}

.alovesinh-dat-lich-day-du .alovesinh-form-success-icon {
	--alv-icon-size: 42px;
}

.alovesinh-dat-lich-day-du .alovesinh-form-success-title {
	margin-bottom: 10px;
}

.alovesinh-dat-lich-day-du .alovesinh-form-description strong,
.alovesinh-dat-lich-day-du .alovesinh-form-success-description strong {
	font-weight: var( --alv-fw-extrabold );
	color: var( --alv-c-accent );
}

/* The card stays white on a dark block and lifts off it with a shadow instead — that is how the
	source design sets the long booking form, and a translucent card there would swallow the very
	boxes a reader has to type into. */
.alovesinh-dark .alovesinh-form {
	--alv-card-title: var( --alv-c-ink );
	box-shadow: 0 32px 64px -20px color-mix( in srgb, var( --alv-c-black ) 40%, transparent );
}

.alovesinh-form-inline {
	--alv-row-wrap: wrap;
	justify-content: center;
}

/* Wider than a column field but never wider than the band it sits in, because the row centres
	itself and a full-width box would push the button onto its own line at every size. */
.alovesinh-form-inline-field {
	width: min( 420px, 100% );
}

/* The sign-up band is the one place this form sits on the deep ground, where a white box reads
	as a hole punched in the section. */
.alovesinh-dark .alovesinh-form-inline-field {
	border-color: color-mix( in srgb, var( --alv-c-white ) 16%, transparent );
	color: var( --alv-c-white );
	background: color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
}

.alovesinh-dark .alovesinh-form-inline-field::placeholder {
	color: var( --alv-c-on-dark-muted );
}

.alovesinh-form-bordered,
.alovesinh-tang-tai-lieu .alovesinh-form {
	border: var( --alv-bd-hairline ) solid var( --alv-c-brand );
}

.alovesinh-form-shadowed,
.alovesinh-tang-tai-lieu .alovesinh-form {
	box-shadow: 0 24px 48px -16px color-mix( in srgb, var( --alv-c-brand-deepest ) 18%, transparent );
}

.alovesinh-tang-tai-lieu .alovesinh-form-label {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}

.alovesinh-tang-tai-lieu .alovesinh-form-title,
.alovesinh-tang-tai-lieu .alovesinh-form-description {
	text-align: center;
}

/* The download card sits beside a column of copy, and at the shared 32px its fields lose the width that keeps
	each label on one line. */
@media ( max-width: 820px ) {

	.alovesinh-tang-tai-lieu .alovesinh-form {
		padding: 28px 22px;
	}
}

.alovesinh-bang-lien-he .alovesinh-form-inline {
	margin-bottom: var( --alv-sp-2 );
}

.alovesinh-dat-lich-nhanh .alovesinh-form-field > label {
	margin-bottom: var( --alv-sp-1 );
}

.alovesinh-dat-lich-day-du .alovesinh-form-title {
	font-weight: var( --alv-fw-extrabold );
}

@media ( max-width: 980px ) {

	.alovesinh-dat-lich-day-du .alovesinh-form {
		padding: 28px 22px;
	}
}