/* A1 Tools — Web Form. */

.a1tools-web-form-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* 2.5.21 — 12-column CSS grid. Each field cell carries its desktop /
   tablet / mobile column span via the `--cw-cols-d`, `--cw-cols-t`,
   `--cw-cols-m` custom properties set inline by the widget renderer.
   Tablet inherits desktop via the `var()` fallback; mobile inherits
   tablet (which itself inherits desktop). Direct children that
   aren't field cells (title, subtitle, consent block, anti-bot,
   actions, feedback) span the full row by default. */
.a1tools-web-form {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 14px;
	row-gap: 14px;
}
.a1tools-web-form > * {
	grid-column: 1 / -1;
	min-width: 0;
}
.a1tools-web-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: span var(--cw-cols-d, 12);
}
@media (max-width: 1024px) {
	.a1tools-web-form__field {
		grid-column: span var(--cw-cols-t, var(--cw-cols-d, 12));
	}
}
@media (max-width: 767px) {
	.a1tools-web-form__field {
		grid-column: span var(--cw-cols-m, var(--cw-cols-t, var(--cw-cols-d, 12)));
	}
}

.a1tools-web-form__title { margin: 0; font-size: 22px; font-weight: 700; }
.a1tools-web-form__subtitle { margin: 0 0 4px; font-size: 14px; color: #6b7280; line-height: 1.45; }

/* Legacy row layout from 2.5.0/2.5.1 — kept so any pages built
   against the old widget render don't suddenly look stacked when
   the user updates. The 2.5.2 widget renders each field in its own
   wrapper so these only apply if the markup still contains them. */
.a1tools-web-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	grid-column: 1 / -1;
}
.a1tools-web-form__row--three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
	.a1tools-web-form__row,
	.a1tools-web-form__row--three { grid-template-columns: 1fr; }
}
.a1tools-web-form__label {
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	letter-spacing: 0.01em;
}
/* Required asterisk — restylable via the Elementor "Required asterisk"
   style section. Default is bold red so it reads at a glance. */
.a1tools-web-form__required {
	color: #dc2626;
	font-weight: 700;
	margin-left: 1px;
}
.a1tools-web-form__help {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
}
.a1tools-web-form__input,
.a1tools-web-form__select,
.a1tools-web-form__textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	background: #f8f9fa;
	border-radius: 6px;
	font: inherit;
	color: #111;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.a1tools-web-form__textarea {
	resize: vertical;
	min-height: 96px;
}
.a1tools-web-form__input:focus,
.a1tools-web-form__select:focus,
.a1tools-web-form__textarea:focus {
	outline: none;
	border-color: #f49320;
	box-shadow: 0 0 0 3px rgba(244,147,32,0.2);
}
.a1tools-web-form__input::placeholder,
.a1tools-web-form__textarea::placeholder {
	color: #9ca3af;
	opacity: 1;
}

.a1tools-web-form__radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}
.a1tools-web-form__radio-label,
.a1tools-web-form__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
}
.a1tools-web-form__radio-label input,
.a1tools-web-form__checkbox-label input { margin: 0; accent-color: #f49320; }

/* SMS Consent block — multi-line readable text alongside the
   checkbox. Wraps at narrow widths so the text stays readable. */
.a1tools-web-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
	color: #4b5563;
	line-height: 1.5;
	margin-top: 4px;
}
.a1tools-web-form__consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #f49320;
}
.a1tools-web-form__consent-text { display: inline; }
.a1tools-web-form__consent a {
	color: #f49320;
	text-decoration: underline;
}
.a1tools-web-form__consent a:hover { text-decoration: none; }

/* Anti-bot ("I'm not a robot") block — same shape as the consent
   block but smaller font and a single-line layout. */
.a1tools-web-form__antibot {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #374151;
	margin-top: 2px;
	cursor: pointer;
}
.a1tools-web-form__antibot input[type="checkbox"] {
	margin: 0;
	accent-color: #f49320;
}

/* Honeypot — visually hidden but available to bots. */
.a1tools-web-form__honeypot {
	position: absolute !important;
	left: -10000px !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* 2.5.22 — alignment now flows through CSS variables emitted by
   Elementor on the `__actions` wrapper. `--submit-justify` controls
   the flex `justify-content` (left/center/right); `--submit-width`
   controls the button's own width (`100%` when "Full width" is
   selected, `auto` otherwise). Replaces the previous data-align
   attribute selectors which (a) used an invalid `justify-content:
   stretch` for full-width, and (b) didn't re-render in Elementor's
   live editor preview because the HTML attribute only refreshes on
   save+reload, while CSS variables refresh immediately. */
.a1tools-web-form__actions {
	display: flex;
	justify-content: var(--submit-justify, flex-start);
	margin-top: 4px;
}
.a1tools-web-form__actions[data-align="left"]   { --submit-justify: flex-start; --submit-width: auto; }
.a1tools-web-form__actions[data-align="center"] { --submit-justify: center;     --submit-width: auto; }
.a1tools-web-form__actions[data-align="right"]  { --submit-justify: flex-end;   --submit-width: auto; }
.a1tools-web-form__actions[data-align="full"]   { --submit-justify: stretch;    --submit-width: 100%; }

.a1tools-web-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	background: #f49320;
	color: #fff;
	padding: 14px 24px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	transition: background-color 140ms ease, transform 80ms ease;
	/* 2.5.22 — width responds to `--submit-width` from the parent
	   `__actions` wrapper. Defaults to `auto` (content width). When
	   Submit alignment is set to "Full width", the parent emits
	   `--submit-width: 100%` and the button stretches edge-to-edge. */
	width: var(--submit-width, auto);
}
.a1tools-web-form__submit:hover { background: #d67d10; }
.a1tools-web-form__submit:disabled { opacity: 0.7; cursor: progress; }
.a1tools-web-form__submit-spinner { display: none; }
.a1tools-web-form--submitting .a1tools-web-form__submit-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: a1tools-web-form-spin 0.7s linear infinite;
}
@keyframes a1tools-web-form-spin { to { transform: rotate(360deg); } }

.a1tools-web-form__feedback {
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	display: none;
}
.a1tools-web-form__feedback--success {
	display: block;
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #d1fae5;
}
.a1tools-web-form__feedback--error {
	display: block;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}