/*
 * VGCC Forms — field styling.
 *
 * Outlined/boxed fields with a notched floating label and a soft focus ring
 * (design brief 2026-09-02 — take the field look + focus only, not the fields).
 * Keeps the Formidable class hooks (frm_fields_container / frm12 / frm6 /
 * frm_first / frm_primary_label / frm_button_submit …) so the theme's submit-
 * button block in style.css and custom-css/rtl.css keep binding untouched.
 *
 * The green CTA submit button comes from the THEME (style.css) — not here.
 */

/* ---- container + 12-col grid ------------------------------------------------ */
.vgcc-form,
.vgcc-form.with_frm_style {
	width: 100%;
	text-align: left;
}
.vgcc-form .frm_fields_container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 24px;
	row-gap: 26px;
	align-items: start;
	padding-top: 8px; /* headroom so the first row's floating labels aren't clipped */
}
.vgcc-form .frm12 { grid-column: span 12; }
.vgcc-form .frm6  { grid-column: span 6; }
.vgcc-form .frm_form_field { position: relative; margin: 0; min-width: 0; }
.vgcc-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---- notched floating label ---------------------------------------------- */
.vgcc-form .frm_primary_label {
	position: absolute;
	top: -8px;
	left: 14px;
	z-index: 1;
	padding: 0 6px;
	background: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: #667085;
	pointer-events: none;
	transition: color .15s ease;
}
.vgcc-form .frm_required { color: #20928a; font-weight: 700; }
.vgcc-form .frm_form_field:focus-within > .frm_primary_label { color: #20928a; }

/* ---- boxed inputs ------------------------------------------------------------ */
.vgcc-form input[type="text"],
.vgcc-form input[type="email"],
.vgcc-form input[type="tel"],
.vgcc-form textarea,
.vgcc-form select {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	padding: 15px 16px;
	min-height: 54px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: #1d2939;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Own caret instead of the native one — a native <select> adds its own
   internal text inset, which pushed the value in vs the text inputs (worst on
   /ar/). appearance:none (inherited from the rule above) + SVG chevron keeps
   the padding identical to the other fields. */
.vgcc-form select {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%20fill='none'%20stroke='%23667085'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-inline-end: 42px; /* clear the caret; start side stays 16px like the text inputs */
}
body.vgcc-rtl .vgcc-form select {
	background-position: left 16px center;
}
.vgcc-form textarea {
	min-height: 130px;
	resize: vertical;
}
.vgcc-form input::placeholder,
.vgcc-form textarea::placeholder { color: #98a2b3; opacity: 1; }

/* ---- combobox dropdown (long lists, e.g. Country) ---------------------------- */
.vgcc-form .vgcc-combo__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 30;
	max-height: 264px;      /* THE fix: capped height + its own scrollbar */
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(16, 24, 40, 0.14);
}
.vgcc-form .vgcc-combo__list--up { top: auto; bottom: calc(100% + 4px); }
.vgcc-form .vgcc-combo__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 16px;
	font-size: 14px;
	line-height: 1.3;
	color: #1d2939;
	cursor: pointer;
}
.vgcc-form .vgcc-combo__list li .vgcc-combo__sub { color: #98a2b3; font-size: 12px; flex: 0 0 auto; }
.vgcc-form .vgcc-combo__list li:hover,
.vgcc-form .vgcc-combo__list li.is-active { background: #f0f7f6; }
.vgcc-form .vgcc-combo__list li[aria-selected="true"] { font-weight: 600; }
.vgcc-form .vgcc-combo__empty { padding: 9px 16px; color: #98a2b3; font-size: 14px; }

/* ---- focus --------------------------------------------------------------- */
.vgcc-form input:focus,
.vgcc-form textarea:focus,
.vgcc-form select:focus {
	outline: none;
	border-color: #20928a;
	box-shadow: 0 0 0 3px rgba(32, 146, 138, 0.15);
}

/* ---- error state ---------------------------------------------------------- */
.vgcc-form .frm_blank_field input,
.vgcc-form .frm_blank_field textarea,
.vgcc-form .frm_blank_field select { border-color: #f04438; }
.vgcc-form .frm_blank_field input:focus,
.vgcc-form .frm_blank_field textarea:focus,
.vgcc-form .frm_blank_field select:focus { box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.15); }
.vgcc-form .frm_blank_field > .frm_primary_label { color: #f04438; }

.vgcc-form .frm_error {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #f04438;
}

/* ---- name (first / last) ----------------------------------------------------- */
.vgcc-form .frm_name { display: flex; gap: 16px; }
.vgcc-form .frm_form_subfield { flex: 1 1 0; min-width: 0; }

/* ---- checkbox / radio ------------------------------------------------------- */
.vgcc-form .frm_checkbox label,
.vgcc-form .frm_radio label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: #344054;
	cursor: pointer;
}
.vgcc-form .frm_checkbox input[type="checkbox"],
.vgcc-form .frm_radio input {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.vgcc-form .frm_radio input { border-radius: 50%; }
.vgcc-form .frm_checkbox input[type="checkbox"]:checked,
.vgcc-form .frm_radio input:checked {
	border-color: #20928a;
	background-color: #20928a;
}
/* SVG tick (no rotate/transform anywhere in the form) */
.vgcc-form .frm_checkbox input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13'%20height='10'%20viewBox='0%200%2013%2010'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M1%205%204.5%208.5%2012%201'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 10px;
}
.vgcc-form .frm_checkbox input[type="checkbox"]:focus-visible,
.vgcc-form .frm_radio input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(32, 146, 138, 0.2);
}

/* ---- file drop zone ---------------------------------------------------------- */
.vgcc-form .vgcc-drop-field { width: 100%; }

.vgcc-form .vgcc-drop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 20px;
	padding-inline-end: 56px; /* room for the trailing-side icon */
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	background: #fff;
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.vgcc-form .vgcc-drop.is-over,
.vgcc-form .vgcc-drop:focus-within {
	border-color: #20928a;
	box-shadow: 0 0 0 3px rgba(32, 146, 138, 0.15);
	background: #f6fbfa;
}
.vgcc-form .vgcc-drop.vgcc-drop--invalid {
	border-color: #f04438;
	box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.15);
	background: #fff;
}
/* the real input, transparent, covering the box — native drop lands here */
.vgcc-form .vgcc-drop__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.vgcc-form .vgcc-drop__inner {
	font-size: 14px;
	line-height: 1.5;
	color: #667085;
	pointer-events: none;
}
.vgcc-form .vgcc-drop__text strong { color: #344054; font-weight: 600; }
.vgcc-form .vgcc-drop__link { color: #20928a; text-decoration: underline; }
.vgcc-form .vgcc-drop__icon {
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: #98a2b3;
}

.vgcc-form .vgcc-drop__list { margin: 12px 0 0; padding: 0; list-style: none; }
.vgcc-form .vgcc-drop__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: #344054;
}
.vgcc-form .vgcc-drop__list li + li { margin-top: 6px; }
.vgcc-form .vgcc-drop__list .vgcc-drop__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vgcc-form .vgcc-drop__list .vgcc-drop__size { color: #98a2b3; flex: 0 0 auto; }
.vgcc-form .vgcc-drop__list .vgcc-drop__x {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f4f7;
	color: #667085;
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}
.vgcc-form .vgcc-drop__list .vgcc-drop__x:hover { background: #fee4e2; color: #f04438; }

.vgcc-form .vgcc-drop__warn {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #f04438;
}

/* ---- descriptions, consent note ------------------------------------------- */
.vgcc-form .frm_description {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #667085;
}
.vgcc-form .vgcc-form__consent-note { margin-top: 10px; }
.vgcc-form .vgcc-form__consent-note p { margin: 0 0 8px; }
.vgcc-form .vgcc-form__consent-note p:last-child { margin-bottom: 0; }
.vgcc-form .vgcc-form__consent-note a,
.vgcc-form .green-link { color: #20928a; }

/* ---- form-level banners ------------------------------------------------------ */
.vgcc-form .frm_error_style,
.vgcc-form .frm_message {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.45;
}
.vgcc-form .frm_error_style { background: #fee4e2; border: 1px solid #f5b8aa; color: #f04438; }
.vgcc-form .frm_message     { background: #dff0d8; border: 1px solid #d6e9c6; color: #468847; }

/* ---- submit spacing (button skin = theme) ---------------------------------- */
.vgcc-form .frm_submit { margin-top: 28px; }

/* ---- captcha slot ----------------------------------------------------------- */
.vgcc-form .vgcc-form__captcha { margin-top: 4px; }

/* ---- honeypot: hidden from humans, still in layout (bots skip display:none) --
   NB: do NOT use `left: -9999px`. On an RTL page (`dir="rtl"`) a huge negative
   offset on an element whose containing block is the initial viewport (which
   happens the moment no positioned/transformed ancestor exists — e.g. when the
   theme's scroll-reveal drops `transform` off `.form-wrapper`) pushes the ICB
   ~9999px and Chrome scrolls the whole page off-screen -> blank /ar/. The
   clip-rect pattern hides it with zero offset, so it's transform- and RTL-safe. */
.vgcc-form .vgcc-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ---- sr-only helper (in case the theme lacks it) --------------------------- */
.vgcc-form .frm_screen_reader {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- RTL: flip the notch to the start (right) edge ------------------------- */
body.vgcc-rtl .vgcc-form .frm_primary_label {
	left: auto;
	right: 14px;
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 600px) {
	.vgcc-form .frm_fields_container { column-gap: 0; }
	.vgcc-form .frm6 { grid-column: span 12; }
	.vgcc-form .frm_name { flex-direction: column; gap: 20px; }
}