/*
 * Field base styling is intentionally NOT here -- it's inherited straight
 * from the theme's own .contact-form .form-group rules
 * (assets/css/celtic-theme.css). This file only ever holds chrome the
 * theme has no equivalent for: popup modal, multi-step progress bar,
 * validation states. Populated in later phases.
 */

/* Honeypot: invisible to sighted users and screen readers, but present in
   the DOM for bots that blindly fill every field to find. Off-screen
   rather than display:none -- some bots skip display:none fields. */
.bla-forms-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Each field block stores its Width choice as data-bla-width on the
   input/select/textarea itself; :has() lets the wrapping .form-group
   (which the theme's own CSS otherwise stacks full-width) lay two
   half-width fields side by side. Browsers without :has() support simply
   keep the full-width stacked fallback -- never a broken layout. */
.bla-form .form-group:has([data-bla-width="half"]) {
	display: inline-block;
	width: 48%;
	vertical-align: top;
	margin-right: 2%;
}

.bla-form-message {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.95rem;
}
.bla-form-message-success {
	background: rgba(30, 92, 30, 0.15);
	border-left: 3px solid #1e5c1e;
}
.bla-form-message-error {
	background: rgba(192, 57, 43, 0.1);
	border-left: 3px solid #c0392b;
}

/* Popup chrome -- the theme has no equivalent, so this is genuinely new
   CSS rather than something to inherit. Uses the theme's own custom
   properties (with fallbacks, in case this plugin is ever activated on a
   different theme) so it stays on-brand and tracks live Customizer color
   changes the same way the site itself does. */
.bla-forms-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(7, 8, 15, 0.75);
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bla-forms-popup-inner {
	position: relative;
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	background: var(--bg-card, #0a0c1c);
	border: 1px solid var(--border-gold, rgba(201, 168, 76, 0.4));
	border-radius: var(--radius, 6px);
	padding: 32px 28px;
}
.bla-forms-popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-muted, #b0a890);
	padding: 8px;
}
.bla-forms-popup-close:hover {
	color: var(--text-light, #f0ede8);
}

/* Multi-step progress indicator. */
.bla-forms-progress {
	font-family: var(--font-sub, inherit);
	font-size: 0.85rem;
	color: var(--text-muted, #888);
	margin-bottom: 12px;
}
.bla-forms-nav {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/* Per-field validation states. Scoped to .bla-forms-validated (a class JS
   adds on the first submit/Next attempt) rather than a bare :invalid
   selector -- browsers apply :invalid to untouched required fields
   immediately on page load, which would show every required field as an
   error before the visitor has done anything. Same :has() progressive-
   enhancement approach as the half-width layout: browsers without :has()
   support just fall back to the browser's own native validation styling,
   never a broken layout. */
.bla-forms-validated .form-group:has(:invalid) {
	border-left: 3px solid #c0392b;
	padding-left: 10px;
	background: rgba(192, 57, 43, 0.06);
}
.bla-forms-validated .form-group:has(:valid) {
	border-left: 3px solid var(--green, #1e5c1e);
}
.bla-forms-field-error {
	display: block;
	color: #e57373;
	font-size: 0.85rem;
	margin-top: 4px;
}