/**
 * AMA India Twenty-Six — Formidable Forms theming
 * Scoped to .frm_forms so it never touches non-Formidable markup.
 * Uses the AMA design tokens (style.css :root). A few !important rules are
 * needed to override Formidable's own generated "Style" CSS.
 */

/* Layout / spacing */
.frm_forms .frm_form_field { margin-bottom: 18px; }
.frm_forms .frm_form_fields fieldset { border: 0; padding: 0; margin: 0; }

/* Labels */
.frm_forms .frm_primary_label,
.frm_forms .frm_label_with_image,
.frm_forms label {
	font-family: var(--font-sans, sans-serif) !important;
	font-weight: 700 !important;
	font-size: 0.875rem !important;
	color: var(--blue-deep, #0d2160) !important;
	margin-bottom: 6px !important;
	display: block;
}
.frm_forms .frm_required { color: var(--red-deep, #a82720) !important; }
.frm_forms .frm_description,
.frm_forms .frm_form_field .frm_description {
	color: var(--ink-soft, #4a5474);
	font-size: 0.8125rem;
}

/* Inputs / selects / textareas
   NOTE the two exclusions on this rule — both were real bugs:
   1. `.frm_opt_container input` used to be in this list, which painted every
      RADIO and CHECKBOX as a 48px rounded white box. The reset that followed
      only undid width/min-height, so the !important border/padding/radius stuck.
   2. Formidable Pro's phone field (intl-tel-input) sets `style.paddingLeft`
      INLINE, sized to the country-flag container. A stylesheet `!important`
      beats a non-important inline style, so our padding hid the number behind
      the flag. The .iti input therefore gets its own rule below with no
      !important on padding-left. */
.frm_forms input[type="text"]:not(.iti__tel-input),
.frm_forms input[type="email"],
.frm_forms input[type="url"],
.frm_forms input[type="tel"]:not(.iti__tel-input),
.frm_forms input[type="number"],
.frm_forms input[type="password"],
.frm_forms input[type="date"],
.frm_forms input[type="search"],
.frm_forms select,
.frm_forms textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;                       /* WCAG 2.5.8 target size */
	padding: 10px 14px !important;
	border: 1px solid var(--rule, #d4c8b0) !important;
	border-radius: 6px !important;
	background: var(--white, #fff) !important;
	color: var(--ink, #1a1f33) !important;
	font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif) !important;
	font-size: 1rem !important;             /* ≥16px prevents iOS zoom-on-focus */
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.frm_forms textarea { min-height: 120px; }

/* ── Phone field (Formidable Pro → intl-tel-input) ──────────────────────────
   Same look as every other input, but padding-left is deliberately NOT set
   here: intl-tel-input writes it inline to clear the flag/dial-code, and its
   width changes with the selected country. Never add !important to it. */
.frm_forms .iti { display: block; width: 100%; }
.frm_forms .iti input.iti__tel-input,
.frm_forms .iti input.iti__tel-input[type="text"],
.frm_forms .iti input.iti__tel-input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding-top: 10px !important;
	padding-right: 14px !important;
	padding-bottom: 10px !important;
	border: 1px solid var(--rule, #d4c8b0) !important;
	border-radius: 6px !important;
	background: var(--white, #fff) !important;
	color: var(--ink, #1a1f33) !important;
	font-family: var(--font-body, 'Atkinson Hyperlegible', Arial, sans-serif) !important;
	font-size: 1rem !important;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Fallback only for when JS hasn't run yet (inline padding not applied). */
.frm_forms .iti input.iti__tel-input:not([style*="padding-left"]) { padding-left: 52px; }
/* The flag button must sit above the input's own stacking context. */
.frm_forms .iti__country-container { z-index: 2; }

/* ── Radio / checkbox controls ──────────────────────────────────────────────
   Explicitly undo the !important box styling that the blanket rule (or the
   Elementor Kit's global input styles) would otherwise apply. */
/* Custom-drawn checkbox/radio.
   `accent-color` on a native control was fighting the Elementor Kit, which
   overrides the :checked state at higher specificity (.elementor-kit-N
   input:checked) with appearance:none + an off-centre background dot. So we own
   the whole control instead: appearance:none, our own ring, and a dot/tick drawn
   dead-centre. Scoped under .frm_opt_container AND covering :checked so the
   specificity (0,0,4,1) beats the Kit's (0,0,3,1). */
.frm_forms .frm_opt_container input[type="checkbox"],
.frm_forms .frm_opt_container input[type="radio"],
.frm_forms input[type="checkbox"],
.frm_forms input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 0 !important;
	flex: 0 0 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--rule, #d4c8b0) !important;
	background: #fff !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none !important;
	cursor: pointer;
	vertical-align: middle;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.frm_forms .frm_opt_container input[type="radio"],
.frm_forms input[type="radio"] { border-radius: 50% !important; }
.frm_forms .frm_opt_container input[type="checkbox"],
.frm_forms input[type="checkbox"] { border-radius: 4px !important; }

/* Selected radio → a centred navy dot (radial-gradient centred at 50% 50%). */
.frm_forms .frm_opt_container input[type="radio"]:checked,
.frm_forms input[type="radio"]:checked {
	border-color: var(--blue-deep, #0d2160) !important;
	background-image: radial-gradient(circle at 50% 50%, var(--blue-deep, #0d2160) 0 4.5px, #fff 5px) !important;
}
/* Selected checkbox → filled navy box with a centred white tick. */
.frm_forms .frm_opt_container input[type="checkbox"]:checked,
.frm_forms input[type="checkbox"]:checked {
	border-color: var(--blue-deep, #0d2160) !important;
	background-color: var(--blue-deep, #0d2160) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5 3 8l1.2-1.2 2.3 2.3L11.8 4 13 5.2z' fill='%23fff'/%3E%3C/svg%3E") !important;
	background-size: 12px 12px !important;
}

/* Focus — visible ring (WCAG 2.4.7).
   Excludes checkbox/radio: a border+box-shadow ring on a native control looks
   broken. They get a real outline instead, below. */
.frm_forms input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.frm_forms select:focus,
.frm_forms textarea:focus {
	outline: none;
	border-color: var(--blue-deep, #0d2160) !important;
	box-shadow: 0 0 0 4px rgba(13, 33, 96, .15) !important;
}
.frm_forms input[type="checkbox"]:focus-visible,
.frm_forms input[type="radio"]:focus-visible {
	outline: 3px solid var(--blue-deep, #0d2160) !important;
	outline-offset: 2px;
}

/* Radio / checkbox option rows */
.frm_forms .frm_opt_container .frm_checkbox,
.frm_forms .frm_opt_container .frm_radio {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	min-height: 44px;
}
.frm_forms .frm_opt_container label { font-weight: 400 !important; color: var(--ink, #1a1f33) !important; margin: 0 !important; }

/* Submit button */
.frm_forms .frm_submit { margin-top: 8px; }
.frm_forms .frm_button_submit,
.frm_forms button[type="submit"],
.frm_forms input[type="submit"],
.frm_forms .frm_save_draft {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 26px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--blue-deep, #0d2160) !important;
	color: var(--cream, #faf6ee) !important;
	font-family: var(--font-sans, sans-serif) !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	cursor: pointer;
	transition: background .15s ease;
}
.frm_forms .frm_button_submit:hover,
.frm_forms button[type="submit"]:hover,
.frm_forms input[type="submit"]:hover {
	background: var(--red-deep, #a82720) !important;
}
.frm_forms .frm_button_submit:focus-visible,
.frm_forms button[type="submit"]:focus-visible {
	outline: 3px solid var(--blue-deep, #0d2160);
	outline-offset: 3px;
}
/* Secondary "Save Draft" button → outline style */
.frm_forms .frm_save_draft {
	background: transparent !important;
	color: var(--blue-deep, #0d2160) !important;
	border: 2px solid var(--blue-deep, #0d2160) !important;
}
.frm_forms .frm_save_draft:hover { background: var(--blue-soft, #e6ebf7) !important; }

/* Validation + messages */
.frm_forms .frm_error,
.frm_forms .frm_error_style {
	color: var(--red-deep, #a82720) !important;
	font-size: 0.8125rem;
	background: var(--red-soft, #fbe8e6);
	border: 1px solid var(--red-deep, #a82720);
	border-radius: 6px;
	padding: 10px 14px;
}
.frm_forms .frm_blank_field input,
.frm_forms .frm_blank_field textarea,
.frm_forms .frm_blank_field select { border-color: var(--red-deep, #a82720) !important; }

.frm_message,
.frm_forms .frm_message {
	background: var(--blue-soft, #e6ebf7) !important;
	border-left: 4px solid var(--blue-deep, #0d2160) !important;
	color: var(--ink, #1a1f33) !important;
	padding: 14px 18px;
	border-radius: 6px;
}

/* Multi-column field rows stack on small screens */
@media (max-width: 600px) {
	.frm_forms .frm_form_field[class*="frm_half"],
	.frm_forms .frm_form_field[class*="frm_third"],
	.frm_forms .frm_form_field[class*="frm_two_thirds"],
	.frm_forms .frm_form_field[class*="frm_fourth"] {
		width: 100% !important;
		margin-left: 0 !important;
		clear: both;
	}
}