/* 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);
}

.alovesinh-form-label {
	--alv-badge-text: var(--alv-c-ink);
	--alv-badge-bg: var(--alv-c-accent-wash);
	margin-bottom: var(--alv-sp-2);
	letter-spacing: var(--alv-tr-label-sm);
}

.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 below the tablet-extra breakpoint, 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: 100%;
	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,
.alovesinh-form-choice-set legend {
	font-size: var(--alv-fs-2);
	font-weight: var(--alv-fw-bold);
	letter-spacing: var(--alv-tr-tag);
	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 the tablet breakpoint, not the grid's tablet-extra one;
	stacked below it, 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: 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-ink);
}

/* 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: var(--alv-sp-2a) var(--alv-sp-2b);
	border: var(--alv-bd-medium) 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;
}

/* 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;
	padding: 0;
	border: 0;
}

.alovesinh-form-choice-set legend {
	padding: 0;
}

/* 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(2, 1fr);
	gap: var(--alv-sp-1);
	margin-top: var(--alv-sp-2);
}

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

/* Laid over its chip at zero opacity: the core screen-reader-text it wears unclips on focus, which is meant
	for a skip link, and would pop the bare radio up at the chip's corner. */
.alovesinh-form-choice input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.alovesinh-form-choice-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--alv-sp-1);
	padding: var(--alv-sp-1c);
	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: var(--alv-c-brand-wash);
}

.alovesinh-form-submit {
	--alv-btn-icon: var(--alv-fs-4a);
	justify-content: center;
	width: 100%;
	margin-top: var(--alv-sp-1);
	padding: var(--alv-sp-2b);
}

.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: var(--alv-sp-2);
	height: var(--alv-sp-2);
	font-size: var(--alv-fs-1a);
	line-height: 1;
}

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

.alovesinh-form-sent > :not(.alovesinh-form-success) {
	display: none;
}

.alovesinh-form-success {
	padding: var(--alv-sp-2c) 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;
}

.alovesinh-form-success-icon {
	--alv-icon-color: var(--alv-c-ink);
	--alv-icon-size: var(--alv-sp-4a);
	width: var(--alv-sp-6b);
	height: var(--alv-sp-6b);
	margin: 0 auto var(--alv-sp-2c);
	border-radius: var(--alv-r-circle);
	background: var(--alv-c-success-wash);
}

.alovesinh-form-success-title {
	margin: 0 0 var(--alv-sp-1a);
	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: var(--alv-sp-3);
}

.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-description {
	font-size: var(--alv-fs-3a);
}

.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: var(--alv-sp-2d);
}

.alovesinh-dat-lich-day-du .alovesinh-form-success-icon {
	--alv-icon-size: var(--alv-sp-4f);
}

.alovesinh-dat-lich-day-du .alovesinh-form-success-title {
	margin-bottom: var(--alv-sp-1c);
}

.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-ink);
}

/* 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 var(--alv-sp-4) var(--alv-sp-6) calc(-1 * var(--alv-sp-3)) var(--alv-c-black-veil);
}

.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(var(--alv-w-field-inline), 100%);
}

.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 var(--alv-sp-0d) var(--alv-c-brand-tint-strong);
}

/* 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: var(--alv-c-glass-border);
	color: var(--alv-c-white);
	background: var(--alv-c-glass-rule);
}

.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 var(--alv-sp-3b) var(--alv-sp-5) calc(-1 * var(--alv-sp-2c))
		var(--alv-c-brand-deepest-glow);
}

.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. */
.alovesinh-tang-tai-lieu .alovesinh-form {
	padding: var(--alv-sp-3d) var(--alv-sp-3a);
}

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

.alovesinh-dat-lich-day-du .alovesinh-form {
	padding: var(--alv-sp-3d) var(--alv-sp-3a);
}

@media (min-width: 821px) {
	.alovesinh-dat-lich-nhanh .alovesinh-form-fields {
		--alv-grid-cols-md: var(--alv-grid-cols);
	}

	.alovesinh-dat-lich-nhanh .alovesinh-form-field:first-child {
		margin-bottom: 0;
	}

	.alovesinh-tang-tai-lieu .alovesinh-form {
		padding: var(--alv-sp-4);
	}
}

@media (min-width: 981px) {
	.alovesinh-dat-lich-day-du .alovesinh-form {
		padding: var(--alv-sp-4);
	}
}