/*
 * GFE Lite Forms.
 *
 * Tokens default to the GFE palette (gfe-branding v2.4) and are scoped to
 * .gfe-lf, so another site (KDD, diamondsforeveryone.in) can restyle a form
 * by redefining the --gfe-lf-* properties in its theme.
 *
 * Labels and help text inherit the surrounding text colour, so the form reads
 * on a light page and in a dark footer alike; every message that carries a
 * colour sits on its own tinted panel for the same reason.
 *
 * Focus stays inside each control's own border and fill: no outer outline or
 * ring (Harshal, 2026-10-02).
 *
 * Control rules are written as `.gfe-lf .gfe-lf__x` on purpose: Flatsome styles
 * fields with `input[type="text"]` (0,1,1), which beats a single class and set
 * a #ddd border (1.36:1), 15.5px text and an inset shadow on staging.
 */
.gfe-lf {
	--gfe-lf-navy: #14213d;
	--gfe-lf-navy-hover: #1e3a6e;
	--gfe-lf-field-bg: #fff;
	--gfe-lf-text: #111;
	--gfe-lf-border: #828997;
	--gfe-lf-alert: #a63d40;
	--gfe-lf-alert-bg: #fae8e8;
	--gfe-lf-alert-border: #f1aeb0;
	--gfe-lf-success: #0c6e4c;
	--gfe-lf-success-bg: #e6f4ea;
	--gfe-lf-radius: 4px;

	box-sizing: border-box;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.5;
}

.gfe-lf *,
.gfe-lf *::before,
.gfe-lf *::after {
	box-sizing: inherit;
}

.gfe-lf__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.gfe-lf__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.gfe-lf__label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: inherit;
}

.gfe-lf .gfe-lf__input {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--gfe-lf-border);
	border-radius: var(--gfe-lf-radius);
	background-color: var(--gfe-lf-field-bg);
	color: var(--gfe-lf-text);
	font: inherit;
	font-size: 16px;
	box-shadow: none;
	outline: none;
	transition: border-color 0.15s ease;
}

.gfe-lf .gfe-lf__textarea {
	height: 128px;
	min-height: 128px;
	resize: vertical;
}

/* Focus and error thicken the control's own border to 2px; padding drops by 1px so nothing moves. */
.gfe-lf .gfe-lf__input:focus,
.gfe-lf .gfe-lf__input:focus-visible {
	padding: 9px 11px;
	background-color: var(--gfe-lf-field-bg);
	box-shadow: none;
	border-width: 2px;
	border-color: var(--gfe-lf-navy);
	outline: none;
}

.gfe-lf .gfe-lf__input[aria-invalid="true"] {
	padding: 9px 11px;
	border-width: 2px;
	border-color: var(--gfe-lf-alert);
}

/* A field already in error shows focus through its fill instead. */
.gfe-lf .gfe-lf__input[aria-invalid="true"]:focus {
	background-color: var(--gfe-lf-alert-bg);
}

.gfe-lf__field--check {
	gap: 4px;
}

/* The whole row is the target: the box sits inside its label, at least 44px tall. */
.gfe-lf .gfe-lf__check-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 11px 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	color: inherit;
	cursor: pointer;
}

.gfe-lf .gfe-lf__check {
	flex: none;
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--gfe-lf-navy);
	outline: none;
}

.gfe-lf .gfe-lf__check:focus-visible {
	outline: none;
}

.gfe-lf .gfe-lf__check:focus-visible + .gfe-lf__check-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gfe-lf__help {
	margin: 0;
	font-size: 14px;
	color: inherit;
}

.gfe-lf__error:not([hidden]),
.gfe-lf__notice:not([hidden]) {
	display: block;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--gfe-lf-alert-border);
	border-radius: var(--gfe-lf-radius);
	background: var(--gfe-lf-alert-bg);
	color: var(--gfe-lf-alert);
	font-size: 14px;
	font-weight: 500;
}

.gfe-lf__notice:not([hidden]) {
	padding: 10px 12px;
	font-size: 15px;
}

.gfe-lf .gfe-lf__submit {
	align-self: flex-start;
	text-transform: none;
	letter-spacing: normal;
	min-height: 48px;
	min-width: 44px;
	margin: 0;
	padding: 12px 24px;
	border: 1px solid var(--gfe-lf-navy);
	border-radius: var(--gfe-lf-radius);
	background: var(--gfe-lf-navy);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	transition: background-color 0.15s ease;
}

.gfe-lf__submit:hover,
.gfe-lf__submit:focus-visible {
	border-color: var(--gfe-lf-navy-hover);
	background: var(--gfe-lf-navy-hover);
	outline: none;
}

.gfe-lf__submit:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gfe-lf__submit:active {
	opacity: 0.9;
}

.gfe-lf__submit[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.75;
}

/*
 * Mobile number: [+91 / Other] [code, only for Other] [digits].
 * The code box appears by CSS alone when "Other" is the chosen option; a
 * browser without :has() shows it all the time, which still works.
 */
.gfe-lf__phone-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.gfe-lf .gfe-lf__cc {
	flex: 0 0 auto;
	width: 96px;
	padding-right: 28px;
	cursor: pointer;
}

/* Some themes remove the native arrow without drawing one; draw our own then. */
@supports (appearance: none) {
	.gfe-lf .gfe-lf__cc {
		appearance: none;
		background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
		background-position: right 14px center, right 9px center;
		background-size: 5px 5px, 5px 5px;
		background-repeat: no-repeat;
	}
}

.gfe-lf__cc-other {
	position: relative;
	flex: 0 0 96px;
}

.gfe-lf .gfe-lf__cc-code {
	width: 100%;
	padding-left: 24px;
}

.gfe-lf .gfe-lf__cc-code:focus,
.gfe-lf .gfe-lf__cc-code[aria-invalid="true"] {
	padding-left: 23px;
}

.gfe-lf__cc-plus {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--gfe-lf-text);
	pointer-events: none;
}

.gfe-lf .gfe-lf__number {
	flex: 1 1 auto;
	min-width: 0;
}

/* No script: the code box appears beside the dropdown when "Other" is chosen. */
@supports selector(:has(a)) {
	.gfe-lf__cc-other {
		display: none;
	}

	.gfe-lf__phone-row:not(.is-enhanced):has(option[value="other"]:checked) .gfe-lf__cc-other {
		display: block;
	}
}

/* With the script: one box. "Other" turns the dropdown into the code box in the same place. */
.gfe-lf__phone-row.is-enhanced .gfe-lf__cc-other {
	display: none;
}

.gfe-lf__phone-row.is-enhanced.is-other .gfe-lf__cc {
	display: none;
}

.gfe-lf__phone-row.is-enhanced.is-other .gfe-lf__cc-other {
	display: block;
}

.gfe-lf .gfe-lf__cc-back:not([hidden]) {
	align-self: flex-start;
	text-transform: none;
	letter-spacing: normal;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gfe-lf .gfe-lf__cc-back:focus-visible {
	outline: none;
	text-decoration-thickness: 2px;
}

/* Visible to screen readers only. */
.gfe-lf__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Honeypot: out of sight and out of the tab order, but still in the form. */
.gfe-lf__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Results. Without JavaScript the endpoint redirects to #gfe-lf-<form>-<n>-<status>
 * and :target reveals that line; the inline script uses .is-shown instead.
 */
.gfe-lf__status {
	display: none;
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--gfe-lf-radius);
	background: var(--gfe-lf-alert-bg);
	color: var(--gfe-lf-alert);
	font-size: 16px;
	font-weight: 500;
	outline: none;
}

.gfe-lf__status--ok {
	background: var(--gfe-lf-success-bg);
	color: var(--gfe-lf-success);
}

.gfe-lf__status:target,
.gfe-lf__status.is-shown {
	display: block;
}

.gfe-lf__status--ok:target ~ .gfe-lf__form,
.gfe-lf__status--ok.is-shown ~ .gfe-lf__form {
	display: none;
}

@media (min-width: 768px) {
	.gfe-lf--newsletter .gfe-lf__submit {
		min-width: 160px;
	}
}

/*
 * Contact form inquiry type: real radio buttons drawn as bordered tiles, two to a row when the form
 * has the room (as the CF7 form showed them), one per row below that. Focus shows as an underline on
 * the tile's text and a navy border; no outer ring.
 */
.gfe-lf--contact {
	container-type: inline-size;
}

.gfe-lf .gfe-lf__field--choices {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Flatsome draws legends in capitals with letter-spacing; this one reads like the other labels. */
.gfe-lf .gfe-lf__field--choices legend {
	float: left;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	color: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.gfe-lf__choices {
	clear: both;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

@container (min-width: 480px) {
	.gfe-lf__choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gfe-lf .gfe-lf__choice {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--gfe-lf-border);
	border-radius: var(--gfe-lf-radius);
	background: var(--gfe-lf-field-bg);
	color: var(--gfe-lf-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
}

.gfe-lf .gfe-lf__choice-input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--gfe-lf-navy);
	cursor: pointer;
	outline: none;
	box-shadow: none;
}

.gfe-lf .gfe-lf__choice:has(.gfe-lf__choice-input:checked) {
	border: 2px solid var(--gfe-lf-navy);
	padding: 9px 11px;
	background: #f2f8fd;
	font-weight: 600;
}

.gfe-lf .gfe-lf__choice:has(.gfe-lf__choice-input:focus-visible) {
	border-color: var(--gfe-lf-navy);
}

.gfe-lf__choice-input:focus-visible + .gfe-lf__choice-text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gfe-lf .gfe-lf__field--choices.is-invalid .gfe-lf__choice {
	border-color: var(--gfe-lf-alert);
}

/*
 * In a Flatsome lightbox (the Bespoke and Experts pages) on a phone or tablet, the child theme's
 * floating Call Expert / WhatsApp bar (about 80px, fixed to the bottom, above the lightbox) covers the
 * last thing in the popup. Room under the form lets Send scroll clear of it.
 */
@media (max-width: 1023px) {
	.mfp-content .gfe-lf--contact {
		padding-bottom: 104px;
	}
}

/*
 * Newsletter: email, WhatsApp and the button side by side wherever the form has the room, as the
 * footer's CF7 form did (Harshal, 6 October 2026); one below the other when it does not. The consent
 * line and any notice run full width under the row. Measured on the form's own width, so a narrow
 * column on a wide screen still stacks.
 */
.gfe-lf--newsletter {
	container-type: inline-size;
}

@container (max-width: 719px) {
	.gfe-lf--newsletter .gfe-lf__submit {
		align-self: stretch;
	}
}

@container (min-width: 720px) {
	.gfe-lf--newsletter .gfe-lf__form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: start;
		gap: 12px 16px;
	}

	.gfe-lf--newsletter .gfe-lf__field[data-gfe-lf-field="email"] {
		grid-column: 1;
		grid-row: 1;
	}

	.gfe-lf--newsletter .gfe-lf__field[data-gfe-lf-field="whatsapp"] {
		grid-column: 2;
		grid-row: 1;
	}

	/* Level with the boxes: below the 14px label (21px line) and its 4px gap. */
	.gfe-lf--newsletter .gfe-lf__submit {
		grid-column: 3;
		grid-row: 1;
		margin-top: 25px;
	}

	.gfe-lf--newsletter .gfe-lf__field--check {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.gfe-lf--newsletter .gfe-lf__notice {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/*
 * Extra forms set to "one row" (2.0.0): short fields side by side when the form is at least 720px
 * wide; tick boxes, choices and message boxes keep the full width; the button sits at the end.
 */
.gfe-lf--row {
	container-type: inline-size;
}

@container (min-width: 720px) {
	.gfe-lf--row .gfe-lf__form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px 16px;
	}

	.gfe-lf--row .gfe-lf__field {
		flex: 1 1 200px;
		min-width: 0;
	}

	.gfe-lf--row .gfe-lf__field--check,
	.gfe-lf--row .gfe-lf__field--choices,
	.gfe-lf--row .gfe-lf__field:has(.gfe-lf__textarea),
	.gfe-lf--row .gfe-lf__notice {
		flex-basis: 100%;
	}

	.gfe-lf--row .gfe-lf__submit {
		margin-top: 25px;
	}
}

/* A dropdown looks like the other boxes. */
.gfe-lf .gfe-lf__select {
	appearance: auto;
	cursor: pointer;
}

/* Labels and help line up on the left, even inside a centre-aligned page column (Look tab). */
.gfe-lf--align-left,
.gfe-lf--align-left .gfe-lf__label,
.gfe-lf--align-left .gfe-lf__help,
.gfe-lf--align-left .gfe-lf__error,
.gfe-lf--align-left .gfe-lf__status,
.gfe-lf--align-left .gfe-lf__check-text {
	text-align: left;
}

@media (prefers-reduced-motion: reduce) {
	.gfe-lf .gfe-lf__input,
	.gfe-lf__submit {
		transition: none;
	}
}

@media (forced-colors: active) {
	.gfe-lf .gfe-lf__input:focus,
	.gfe-lf .gfe-lf__input:focus-visible,
	.gfe-lf__submit:focus-visible {
		border-color: Highlight;
	}
}