.fca-form-widget {
	--fcaf-primary: #5B4CF0;
	--fcaf-btn-text: #FFFFFF;
	--fcaf-text: #1D2327;
	--fcaf-bg: #FFFFFF;
	--fcaf-border: #E2E2E2;
	--fcaf-radius: 10px;
	max-width: 480px;
	background: var(--fcaf-bg);
	color: var(--fcaf-text);
	padding: 24px;
	border-radius: var(--fcaf-radius);
	border: 1px solid var(--fcaf-border);
	font-family: inherit;
	box-sizing: border-box;
}
.fca-form-widget * { box-sizing: border-box; }

/* Google reCAPTCHA v3's floating badge is hidden -- per Google's Terms of Service, the required
   attribution notice ("This site is protected by reCAPTCHA...") is shown near the form instead
   (see .fcaf-recaptcha-note below), so this stays compliant without the badge visually clashing
   with the chat bubble launcher. */
.grecaptcha-badge { visibility: hidden !important; }
.fcaf-recaptcha-note {
	margin: 10px 0 0; font-size: 11px; line-height: 1.5; opacity: 0.65; color: var(--fcaf-text);
}
.fcaf-recaptcha-note a { color: inherit; text-decoration: underline; }

.fcaf-heading { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--fcaf-text); }
.fcaf-subheading { margin: 0 0 18px; font-size: 14px; opacity: 0.75; color: var(--fcaf-text); }

/* Quick Lead Form's helper text (below the button) and button icon -- the wrapper span keeps
   text+arrow centered via flex without touching .fcaf-submit's own `display` property, since
   that's independently set by the shared "Width" style control (full/auto) and a conflicting
   `display: flex` here would fight it depending on CSS load order. */
.fcaf-helper-text { margin: 20px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.75; color: var(--fcaf-text); }
.fcaf-btn-content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.fcaf-btn-arrow { flex: 0 0 auto; }

/* Quick Lead Form's own more generous defaults, matching its reference design's whitespace --
   safe to hardcode here (rather than editing FCA_Form_Style_Controls, which is shared with the
   Smart Contact and Appointment widgets) only because form_padding has no baked-in Elementor
   default: Elementor only ever emits a rule for it once someone actually sets a value in the
   Style tab, and that rule's {{WRAPPER}}-scoped selector always outbids this one on specificity
   when it exists. Until then, this is what shows. Row/field/button padding are NOT touched here
   for the same reason in reverse -- those controls DO ship a default, so Elementor always wins
   and any override here would just be dead, unreachable CSS. */
.fca-form-widget.fca-quick-lead { padding: 40px 36px; }
.fca-quick-lead .fcaf-heading { margin-bottom: 20px; }

.fcaf-status {
	padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px;
}
.fcaf-status.fcaf-status-success { background: rgba(46, 158, 91, 0.12); color: #2E9E5B; }
.fcaf-status.fcaf-status-error { background: rgba(255, 77, 79, 0.1); color: #D93025; }

.fcaf-row { margin-bottom: 14px; }
.fcaf-row label {
	display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--fcaf-text);
}
.fcaf-req { color: #D93025; }

.fcaf-grid { display: flex; flex-wrap: wrap; gap: 0 12px; }
.fcaf-grid .fcaf-half { flex: 1 1 180px; min-width: 0; }

.fca-form-widget .fcaf-form input[type="text"],
.fca-form-widget .fcaf-form input[type="email"],
.fca-form-widget .fcaf-form input[type="tel"],
.fca-form-widget .fcaf-form input[type="date"],
.fca-form-widget .fcaf-form input[type="time"],
.fca-form-widget .fcaf-form input[type="file"],
.fca-form-widget .fcaf-form select,
.fca-form-widget .fcaf-form textarea {
	width: 100%; padding: 10px 12px; border: 1.5px solid var(--fcaf-border); border-radius: calc(var(--fcaf-radius) * 0.6);
	font-size: 16px; font-family: inherit; color: var(--fcaf-text); background: #fff; outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fca-form-widget .fcaf-form input:focus, .fca-form-widget .fcaf-form select:focus, .fca-form-widget .fcaf-form textarea:focus {
	border-color: var(--fcaf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fcaf-primary) 18%, transparent);
}
.fca-form-widget .fcaf-form textarea { resize: vertical; min-height: 70px; }
.fca-form-widget .fcaf-form select { cursor: pointer; }

/* Service selector -- radio buttons styled as pill/tag buttons */
.fcaf-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.fcaf-pill {
	position: relative; display: inline-flex; align-items: center; cursor: pointer;
	padding: 9px 16px; border: 1.5px solid var(--fcaf-border); border-radius: 999px;
	font-size: 13px; font-weight: 600; color: var(--fcaf-text); background: #fff;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	user-select: none;
}
.fcaf-pill input[type="radio"] {
	position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.fcaf-pill:hover { border-color: var(--fcaf-primary); }
.fcaf-pill.fcaf-pill-selected,
.fcaf-pill:has(input:checked) {
	background: var(--fcaf-primary); border-color: var(--fcaf-primary); color: var(--fcaf-btn-text);
}
.fcaf-pill input:focus-visible ~ span { outline: 2px solid var(--fcaf-primary); outline-offset: 2px; border-radius: 999px; }

.fca-form-widget .fcaf-form .fcaf-invalid { border-color: #D93025 !important; }
.fca-form-widget .fcaf-form .fcaf-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15); }

.fca-form-widget .fcaf-submit {
	background: var(--fcaf-primary); color: var(--fcaf-btn-text); border: none; border-radius: calc(var(--fcaf-radius) * 0.6);
	padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fca-form-widget .fcaf-submit:hover, .fca-form-widget .fcaf-submit:focus { opacity: 0.9; }
.fca-form-widget .fcaf-submit:disabled { opacity: 0.6; cursor: default; }

.fcaf-upload-status { font-size: 12px; opacity: 0.7; margin-top: 4px; }

/* Appointment slot picker */
.fcaf-slot-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

/* Timezone search -- a fully custom combobox (input + JS-rendered list) instead of a native
   <datalist>, since datalist dropdowns are rendered entirely by the browser and can't be
   positioned, sized, or styled -- they were showing up detached from the field. This version is
   always anchored directly under the input, matches its width, and is scrollable. */
.fcaf-combobox { position: relative; }
.fcaf-combobox-list {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
	margin: 0; padding: 6px; list-style: none; max-height: 240px; overflow-y: auto;
	background: #fff; border: 1.5px solid var(--fcaf-border); border-radius: calc(var(--fcaf-radius) * 0.6);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.fcaf-combobox-list[hidden] { display: none; }
.fcaf-combobox-list li {
	padding: 8px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; color: var(--fcaf-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fcaf-combobox-list li:hover, .fcaf-combobox-list li.fcaf-combobox-active { background: var(--fcaf-primary); color: var(--fcaf-btn-text); }
.fcaf-slot-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fca-form-widget .fcaf-slot-pill {
	background: transparent; border: 1.5px solid var(--fcaf-primary); color: var(--fcaf-primary);
	padding: 7px 12px; border-radius: 16px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.fca-form-widget .fcaf-slot-pill:hover, .fca-form-widget .fcaf-slot-pill:focus { background: var(--fcaf-primary) !important; color: var(--fcaf-btn-text) !important; }
.fca-form-widget .fcaf-slot-pill.fcaf-slot-selected { background: var(--fcaf-primary) !important; color: var(--fcaf-btn-text) !important; font-weight: 600; }
.fcaf-slot-loading, .fcaf-slot-empty { font-size: 13px; opacity: 0.7; }

@media (max-width: 480px) {
	.fca-form-widget { padding: 18px; }
	.fcaf-grid { flex-direction: column; gap: 0; }
}