/*
 * NGL v2 — request form pages (Figma "Lab Form" 354:8972; inc/ngl-v2/request.php): the head and the
 * Gravity Forms form, drawn here (Gravity Forms' own CSS is off on these pages): its sections as
 * titled white cards, the fields, the sample-type choices, the errors and the two buttons. The
 * breadcrumbs and the eyebrow are the shared ones (inner.css). The fields and buttons are the same as
 * the job application form's (careers.css), which also has rules for its own layout, so they are
 * repeated here rather than shared.
 *
 * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so
 * RTL (fa, ar) and LTR (en) share every rule.
 */

.nglv2-ipage--request {
	--nglv2-rtext: #1e293b;  /* tertiary-shade500: labels, typed text, choices */
	--nglv2-rline: #727985;  /* tertiary-shade300: the boxes */
	--nglv2-rtitle: #168b52; /* the sections' titles */
	--nglv2-rerror: #b3261e;
}

/* ----------------------------------------------------------------------------------------------
 * Head (354:9352): 32 under the breadcrumbs; the eyebrow, 24, the title (64 tall), 24, the lead.
 * ------------------------------------------------------------------------------------------- */

.nglv2-request__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
}

.nglv2 .nglv2-request__title {
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6; /* 64px at 40px, as drawn */
	color: var(--nglv2-ink);
}

/* The lead (354:9359): a 2px light-green rule at its start, the text 24 from it. */
.nglv2 .nglv2-request__lead {
	padding-inline-start: 24px;
	border-inline-start: 2px solid var(--nglv2-accent-30);
	font-weight: 400;
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.3334; /* 32px at 24px */
	color: var(--nglv2-muted);
}

/* ----------------------------------------------------------------------------------------------
 * The form: 32 under the head. Each section's title (20, demibold, green), its card 16 under it; the
 * next section 32 under the card; the buttons 32 under the last card.
 * ------------------------------------------------------------------------------------------- */

.nglv2-rform {
	margin-top: 32px;
}

.nglv2-rform .gform_heading,
.nglv2-rform .gform_validation_container,
.nglv2-rform .gfield--type-honeypot,
.nglv2-rform .ginput_counter,
.nglv2-rform .gfield.gform_hidden,
.nglv2-rform .gfield--type-hidden,
.nglv2-rform .gfield_visibility_hidden,
.nglv2-rform .gsection_description:empty {
	display: none !important;
}

.nglv2-rform .gform_body,
.nglv2-rform .gform_fields {
	display: block;
	margin: 0;
	padding: 0;
}

/* With .nglv2 in front: the fields' own `margin: 0` (below) must not undo these. */
.nglv2 .nglv2-rform .gform_fields > * + * {
	margin-top: 32px;
}

.nglv2 .nglv2-rform .gform_fields > .gfield--type-section + .nglv2-rform__card {
	margin-top: 16px;
}

.nglv2-rform .gfield--type-section {
	margin: 0;
	padding: 0;
	border: 0;
}

.nglv2 .nglv2-rform .gsection_title {
	margin: 0;
	padding: 0;
	font-family: var(--nglv2-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.6; /* 32px */
	letter-spacing: normal;
	color: var(--nglv2-rtitle);
}

.nglv2 .nglv2-rform .gsection_description {
	margin: 4px 0 0;
	color: var(--nglv2-muted);
	font-size: 15px;
	line-height: 1.7;
}

/* A card (354:9540): white, 24 round, 32 inside; the rows 24 apart. One field a row on phones; from
 * 768 on twelve columns, 32 apart, so a half-width field (the form editor's widths) is two a row and
 * a full one takes the row. */
.nglv2-rform__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 32px;
	padding: clamp(20px, 2.2223vw, 32px);
	border-radius: 24px;
	background: #fff;
}

.nglv2-rform .gfield {
	display: flex;
	grid-column: 1 / -1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (min-width: 768px) {
	.nglv2-rform__card {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.nglv2-rform .gfield--width-quarter {
		grid-column: span 3;
	}

	.nglv2-rform .gfield--width-third {
		grid-column: span 4;
	}

	.nglv2-rform .gfield--width-five-twelfths {
		grid-column: span 5;
	}

	.nglv2-rform .gfield--width-half {
		grid-column: span 6;
	}

	.nglv2-rform .gfield--width-seven-twelfths {
		grid-column: span 7;
	}

	.nglv2-rform .gfield--width-two-thirds {
		grid-column: span 8;
	}

	.nglv2-rform .gfield--width-three-quarter {
		grid-column: span 9;
	}
}

/* Field labels (354:9544): 16 bold, 8 above the box. */
.nglv2 .nglv2-rform .gfield_label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--nglv2-rtext);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
}

/* The design marks no field as required (the inputs say so to screen readers: aria-required). */
.nglv2 .nglv2-rform .gfield_required {
	display: none !important;
}

.nglv2-rform .ginput_container {
	margin: 0;
}

/* The boxes (354:9545): 55 tall, a 1px grey line, 4 round, the text 15 from the start. */
.nglv2 .nglv2-rform input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="date"]),
.nglv2 .nglv2-rform select,
.nglv2 .nglv2-rform textarea {
	display: block;
	width: 100%;
	height: 55px;
	margin: 0;
	padding: 0 15px;
	border: 1px solid var(--nglv2-rline);
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	color: var(--nglv2-rtext);
	font-family: var(--nglv2-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.nglv2 .nglv2-rform textarea {
	height: 119px;
	min-height: 55px;
	padding: 14px 16px;
	resize: vertical;
}

.nglv2 .nglv2-rform ::placeholder {
	color: #999;
	opacity: 1;
}

.nglv2 .nglv2-rform input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="date"]):hover,
.nglv2 .nglv2-rform select:hover,
.nglv2 .nglv2-rform textarea:hover {
	border-color: #4f5763;
}

.nglv2 .nglv2-rform input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="date"]):focus,
.nglv2 .nglv2-rform select:focus,
.nglv2 .nglv2-rform textarea:focus {
	border-color: var(--nglv2-accent);
	box-shadow: 0 0 0 3px rgba(109, 190, 69, 0.2);
	outline: none;
}

/* An email address is typed left to right; its placeholder stays on the page's side. */
.nglv2 .nglv2-rform input[type="email"] {
	direction: ltr;
	text-align: end;
}

.nglv2 .nglv2-rform input[type="email"]:placeholder-shown {
	direction: inherit;
	text-align: start;
}

/* «نوع نمونه» (354:9450): the question, 23, the choices 16 apart; a 23px ring (2px #b2b2b2), the
 * picked one with a 13px blue dot, 10 from its text. Checkboxes (none on form 7) match, square. */
/* The question is the fieldset's <legend>, which the field's flex gap skips: the whole 23 is its own. */
.nglv2 .nglv2-rform .gfield--type-choice .gfield_label {
	margin-bottom: 23px;
}

.nglv2-rform .gfield_radio,
.nglv2-rform .gfield_checkbox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.nglv2-rform .gchoice {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nglv2 .nglv2-rform input:is([type="radio"], [type="checkbox"]) {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 23px;
	width: 23px;
	height: 23px;
	margin: 0;
	padding: 0;
	border: 2px solid #b2b2b2;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s;
}

.nglv2 .nglv2-rform input[type="checkbox"] {
	border-radius: 4px;
}

.nglv2 .nglv2-rform input:is([type="radio"], [type="checkbox"]):checked {
	background: radial-gradient(circle, #0c6cc6 0 6.5px, transparent 7px);
}

.nglv2 .nglv2-rform input[type="checkbox"]:checked {
	background: #0c6cc6;
	box-shadow: inset 0 0 0 3px #fff;
}

.nglv2 .nglv2-rform input:is([type="radio"], [type="checkbox"]):hover {
	border-color: #8c8c8c;
}

.nglv2 .nglv2-rform input:is([type="radio"], [type="checkbox"]):focus-visible {
	outline: 2px solid var(--nglv2-green);
	outline-offset: 2px;
}

.nglv2 .nglv2-rform .gchoice label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--nglv2-rtext);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	cursor: pointer;
}

/* Errors: Gravity Forms' summary above the first section (the child theme's style.css hides it on
 * every page), each field's message under its box. */
.nglv2 .nglv2-rform .gform_validation_errors {
	display: block !important;
	margin: 0 0 24px;
	padding: 16px 24px;
	border-radius: 16px;
	background: #fdeceb;
	color: var(--nglv2-rerror);
}

.nglv2 .nglv2-rform .gform_validation_errors h2,
.nglv2 .nglv2-rform .gform_submission_error {
	margin: 0;
	color: inherit;
	font-family: var(--nglv2-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.7;
}

.nglv2 .nglv2-rform .gform_validation_errors ol {
	margin: 4px 0 0;
	padding-inline-start: 20px;
	list-style: decimal;
	font-size: 14px;
	line-height: 1.7;
}

.nglv2 .nglv2-rform .gform_validation_errors a {
	color: inherit;
	text-decoration: underline;
}

.nglv2 .nglv2-rform .gfield_error input:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"], [type="date"]),
.nglv2 .nglv2-rform .gfield_error select,
.nglv2 .nglv2-rform .gfield_error textarea,
.nglv2 .nglv2-rform .gfield_error input:is([type="radio"], [type="checkbox"]) {
	border-color: var(--nglv2-rerror);
}

.nglv2 .nglv2-rform .gfield_validation_message,
.nglv2 .nglv2-rform .validation_message {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nglv2-rerror);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.6;
}

.nglv2 .nglv2-rform .validation_message:empty {
	display: none;
}

/* The buttons (354:9577): «ثبت درخواست» filled, «لغو» outlined, 240 × 56, 10 round, 10 apart, at the
 * end of the row. */
.nglv2-rform .gform_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-end;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0;
}

.nglv2 .nglv2-rform .gform_button,
.nglv2 .nglv2-rform__cancel {
	display: inline-flex;
	flex: 0 1 240px;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	padding: 0 22px;
	border-radius: 10px;
	box-shadow: none;
	font-family: var(--nglv2-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
	text-transform: none;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.nglv2 .nglv2-rform .gform_button {
	width: auto;
	height: auto;
	border: 0;
	background: var(--nglv2-accent);
	color: #fff;
	cursor: pointer;
}

.nglv2 .nglv2-rform .gform_button:hover {
	background: var(--nglv2-accent-dark);
}

.nglv2 .nglv2-rform .gform_button:disabled {
	cursor: progress;
	opacity: 0.7;
}

.nglv2 .nglv2-rform__cancel {
	border: 1px solid var(--nglv2-accent);
	background: transparent;
	color: var(--nglv2-accent);
}

.nglv2 .nglv2-rform__cancel:hover {
	background: var(--nglv2-green-50);
	color: var(--nglv2-accent-dark);
}

.nglv2 .nglv2-rform .gform_button:focus-visible,
.nglv2 .nglv2-rform__cancel:focus-visible {
	outline: 2px solid var(--nglv2-ink);
	outline-offset: 2px;
}

/* Gravity Forms' spinner while the form is sent (its own CSS draws it; this is the same ring). */
.nglv2-rform .gform-loader {
	display: inline-block;
	align-self: center;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(25, 36, 49, 0.15);
	border-top-color: var(--nglv2-accent);
	border-radius: 50%;
	animation: nglv2-rspin 0.8s linear infinite;
}

@keyframes nglv2-rspin {
	to {
		transform: rotate(360deg);
	}
}

/* What replaces the form once it is sent, and the note when the page names no form. */
.nglv2 .nglv2-rform .gform_confirmation_message,
.nglv2 .nglv2-rform__missing {
	margin: 0;
	padding: clamp(20px, 2.2223vw, 32px);
	border-radius: 24px;
	background: #fff;
	color: var(--nglv2-rtext);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.75;
}

.nglv2 .nglv2-rform__missing a {
	color: var(--nglv2-icon-green);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.nglv2-rform .gform-loader {
		animation-duration: 2.4s;
	}
}