/*
 * Form styles: Gravity Forms and WordPress core forms, matched to the design's
 * .fgrid / .field / .chips-in forms in main.css. Gravity Forms' own CSS is
 * switched off in inc/gravity-forms.php, so everything it needs is here.
 */

/* ---------- Gravity Forms: layout ---------- */
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_heading,
.gform_wrapper .gform_required_legend { display: none; }

.gform_wrapper .gform_fields {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.gform_wrapper .gfield { grid-column: 1 / -1; }

@media (min-width: 640px) {
	.gform_wrapper .gform_fields { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.gform_wrapper .gfield--width-quarter { grid-column: span 3; }
	.gform_wrapper .gfield--width-third { grid-column: span 4; }
	.gform_wrapper .gfield--width-five-twelfths { grid-column: span 5; }
	.gform_wrapper .gfield--width-half { grid-column: span 6; }
	.gform_wrapper .gfield--width-seven-twelfths { grid-column: span 7; }
	.gform_wrapper .gfield--width-two-thirds { grid-column: span 8; }
	.gform_wrapper .gfield--width-three-quarter { grid-column: span 9; }
	.gform_wrapper .gfield--width-full { grid-column: 1 / -1; }

	/*
	 * Fields that share a row line up their inputs even when one label wraps
	 * onto two lines: each one is a 3-row subgrid (label, input, help text).
	 * The 16px gap between rows becomes 6px row gap + 10px bottom margin, so
	 * subgrid rows keep the 6px label/input spacing.
	 */
	.gform_wrapper .gform_fields { row-gap: 6px; }
	.gform_wrapper .gform_fields > .gfield { margin-bottom: 10px; }

	.gform_wrapper .gfield:not(.gfield--width-full) {
		grid-row: span 3;
		grid-template-rows: subgrid;
	}

	.gform_wrapper .gfield--has-description:not(.gfield--width-full)::after { display: none; }
	.gform_wrapper .gfield--has-description:not(.gfield--width-full) .gfield_description { margin-bottom: 6px; }
}

/* ---------- Gravity Forms: one field (.field) ---------- */
.gform_wrapper .gfield {
	display: grid;
	gap: 6px;
	align-content: start; /* keep label and input together when a row neighbour is taller */
	min-width: 0;
	margin: 0;
}

/* The design reserves an (empty) error line under every input; this keeps the same rhythm. */
.gform_wrapper .gfield::after {
	content: "";
}

.gform_wrapper .gfield--type-html::after,
.gform_wrapper .gfield_error::after {
	display: none;
}

.gform_wrapper fieldset.gfield {
	border: 0;
	padding: 0;
}

/* A legend sits outside the fieldset grid, so it needs its own gap. */
.gform_wrapper fieldset.gfield > legend {
	margin-bottom: 6px;
}

.gform_wrapper .gfield_label {
	display: block;
	padding: 0;
	font-weight: 600;
	font-size: .92rem;
}

/* Required fields carry no marker; optional ones say so, as in the design. */
.gform_wrapper .gfield_required { display: none; }

.gform_wrapper .gfield:not(.gfield_contains_required):not(.gfield--type-html):not(.gfield--type-section):not(.gfield--type-consent) > .gfield_label::after {
	content: " (optional)";
	font-weight: 400;
	font-size: .83em;
	color: var(--muted);
}

.gform_wrapper .hidden_label > .gfield_label,
.gform_wrapper .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	min-height: 50px;
	border-radius: 12px;
	border: 2px solid var(--line);
	background: var(--white);
	color: var(--ink);
	padding: 12px 14px;
	font: 500 1rem var(--body);
	transition: border-color .15s;
	display: block;
}

.gform_wrapper textarea {
	height: 110px;
	min-height: 110px;
	resize: vertical;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--indigo-ink);
}

.gform_wrapper .ginput_container { min-width: 0; }

/* Multi-input fields (name, address). */
.gform_wrapper .ginput_complex {
	display: grid;
	gap: 12px;
}

@media (min-width: 640px) {
	.gform_wrapper .ginput_complex { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.gform_wrapper .ginput_complex > span { display: grid; gap: 4px; }
.gform_wrapper .ginput_complex label { font-size: .8rem; color: var(--muted); }

/* Help text under a field (.field__why). */
.gform_wrapper .gfield_description:not(.validation_message),
.gform_wrapper .charleft {
	color: var(--muted);
	font-size: .8rem;
	padding: 0;
}

/* ---------- Gravity Forms: errors (.has-err / .field__err) ---------- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--rani-ink); }

.gform_wrapper .validation_message,
.gform_wrapper .gfield_validation_message {
	color: var(--rani-ink);
	font-size: .82rem;
	padding: 0;
	background: none;
	border: 0;
}

.gform_wrapper .gform_validation_errors {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tint-rani);
	color: var(--rani-ink);
	font-weight: 600;
	font-size: .9rem;
}

.gform_wrapper .gform_validation_errors h2 {
	font: inherit;
	margin: 0;
}

.gform_wrapper .gform-icon { display: none; }

/* ---------- Gravity Forms: radio and checkbox chips (.chips-in) ---------- */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gform_wrapper .gchoice { position: relative; }

.gform_wrapper .gchoice input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gform_wrapper .gchoice label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 2px solid var(--line);
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.gform_wrapper .gchoice input:checked + label {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.gform_wrapper .gchoice input:focus-visible + label {
	outline: 3px solid var(--indigo-ink);
	outline-offset: 2px;
}

.gform_wrapper .gfield_error .gchoice label { border-color: var(--rani-ink); }

/* ---------- Gravity Forms: HTML blocks, consent, footer ---------- */
.gform_wrapper .gfield--type-html,
.gform_wrapper .consent {
	font-size: .85rem;
	color: var(--muted);
}

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	padding: 0;
}

/* The last field's 10px bottom margin (see the subgrid rules) already adds space. */
@media (min-width: 640px) {
	.gform_wrapper .gform_footer,
	.gform_wrapper .gform_page_footer { margin-top: 6px; }
}

.gform_wrapper .gform_ajax_spinner {
	width: 20px;
	height: 20px;
}

/* Spam honeypot and hidden fields must never show. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-hidden,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

/* ---------- Mobile number OTP (assets/js/phone-otp.js) ---------- */

/* .btn sets display, which would otherwise override the hidden attribute. */
.gform_wrapper [hidden] { display: none !important; }

/*
 * One line: [ mobile number ][ 6-digit code ][ Send OTP | Verify | ✓ Verified ].
 * On narrow screens the code box and its button wrap under the number.
 */
.otp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: stretch;
}

.gform_wrapper .otp-row > input:first-child {
	flex: 1 1 180px;
	min-width: 0;
}

.gform_wrapper .otp-row > .otp-code__input {
	flex: 1 1 130px;
	min-width: 120px;
}

.otp-row .btn {
	flex: none;
	min-height: 50px;
	padding: 12px 18px;
	border-radius: 12px;
	font-size: .95rem;
}

.otp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 0 16px;
	border-radius: 12px;
	background: var(--tint-leaf);
	color: var(--leaf-ink);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
}

.gform_wrapper .is-otp-verified .otp-row > input:first-child {
	border-color: var(--leaf-ink);
	background: var(--paper);
}

/* Spaced-out digits once typed; the placeholder keeps normal spacing. */
.gform_wrapper .otp-code__input:not(:placeholder-shown) {
	letter-spacing: .3em;
	font-variant-numeric: tabular-nums;
}

/* "Code sent to … · Resend in 30s" / "Change number" under the row. */
.otp-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: 6px;
}

.otp-meta:not(:has(> :not([hidden]):not(:empty))) { display: none; }

.otp-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--indigo-ink);
	font: 600 .82rem var(--body);
	text-decoration: underline;
	cursor: pointer;
}

.otp-link:disabled {
	color: var(--muted);
	text-decoration: none;
	cursor: default;
}

.otp-msg {
	font-size: .82rem;
	color: var(--leaf-ink);
}

.otp-msg:empty { display: none; }
.otp-msg.is-error { color: var(--rani-ink); }

.otp-note {
	font-size: .85rem;
	color: var(--muted);
}

.gform_wrapper [type="submit"]:disabled {
	opacity: .5;
	box-shadow: none;
	cursor: not-allowed;
}

/* ---------- Gravity Forms: confirmation (.fdone) ---------- */
.gform_confirmation_message {
	display: grid;
	gap: 10px;
	padding: 18px;
	border-radius: 14px;
	background: var(--tint-leaf);
	color: var(--leaf-ink);
}

.gform_confirmation_message b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--ink);
}

.gform_confirmation_message p { color: var(--ink-2); }

/* ---------- WordPress core forms (search, comments, protected pages) ---------- */
.search-form,
.post-password-form p {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.comment-form {
	display: grid;
	gap: 16px;
}

.comment-form p { display: grid; gap: 6px; }

.search-form label,
.comment-form label,
.post-password-form label {
	display: grid;
	gap: 6px;
	flex: 1 1 240px;
	font-weight: 600;
	font-size: .92rem;
}

.search-form .search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.post-password-form input[type="password"] {
	width: 100%;
	min-height: 50px;
	border-radius: 12px;
	border: 2px solid var(--line);
	background: var(--white);
	color: var(--ink);
	padding: 12px 14px;
	font: 500 1rem var(--body);
	transition: border-color .15s;
}

.comment-form textarea {
	min-height: 110px;
	resize: vertical;
}

.search-form .search-field:focus,
.comment-form input:focus,
.comment-form textarea:focus,
.post-password-form input:focus {
	outline: none;
	border-color: var(--indigo-ink);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .85rem;
	color: var(--muted);
}

.search-form .search-submit,
.comment-form .submit,
.post-password-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 2px solid transparent;
	background: var(--saffron);
	color: var(--white);
	font: 600 1rem/1 var(--body);
	cursor: pointer;
	box-shadow: 0 6px 18px rgb(94 58 122 / .28);
	transition: background-color .15s ease-out;
}

.search-form .search-submit:hover,
.comment-form .submit:hover,
.post-password-form input[type="submit"]:hover {
	background: #4A2D61;
}