/**
 * Wordpress Contact Architect - v1.0.0
 * Frontend Stylesheet
 *
 * @description Defines the structural, visual, and behavioral styles for the frontend form output.
 */

/**
 * Global Design Tokens and Light Theme Variables
 */
:root {
	--wpca-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wpca-bg-primary: #ffffff;
	--wpca-bg-secondary: #f9fafb;
	--wpca-bg-hover: #f3f4f6;
	--wpca-bg-active: #eff6ff;
	--wpca-text-main: #1f2937;
	--wpca-text-muted: #6b7280;
	--wpca-text-inverted: #ffffff;
	--wpca-border: #d1d5db;
	--wpca-border-hover: #9ca3af;
	--wpca-shadow: rgba(0, 0, 0, 0.05);
	--wpca-primary: #3b82f6;
	--wpca-primary-hover: #2563eb;
	--wpca-primary-light: rgba(59, 130, 246, 0.15);
	--wpca-error: #ef4444;
	--wpca-error-bg: #fef2f2;
	--wpca-error-border: #fca5a5;
	--wpca-success: #10b981;
	--wpca-success-bg: #ecfdf5;
	--wpca-radius: 8px;
	--wpca-spacing: 20px;
	--wpca-control-pad-y: 12px;
	--wpca-control-pad-x: 16px;
	--wpca-control-font: 15px;
	--wpca-control-line: 1.5;
	--wpca-shadow-sm: 0 1px 2px var(--wpca-shadow);
	--wpca-shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
	--wpca-focus-ring: 0 0 0 3px var(--wpca-primary-light);
	--wpca-transition-fast: 0.15s;
	--wpca-transition: 0.2s;
	--wpca-transition-slow: 0.3s;
	--wpca-z-dropdown: 100;
	--wpca-z-open: 90;
	--wpca-opt-pad-y: 10px;
	--wpca-opt-pad-x: 12px;
	--wpca-opt-radius: 6px;
}

/**
 * Dark Theme Variables Override
 */
.wpca-form[data-current-theme="dark"] {
	--wpca-bg-primary: #171717;
	--wpca-bg-secondary: #262626;
	--wpca-bg-hover: #404040;
	--wpca-bg-active: #525252;
	--wpca-text-main: #e5e5e5;
	--wpca-text-muted: #a3a3a3;
	--wpca-border: #404040;
	--wpca-border-hover: #737373;
	--wpca-shadow: rgba(0, 0, 0, 0.5);
	--wpca-error: #f87171;
	--wpca-error-bg: #450a0a;
	--wpca-error-border: #7f1d1d;
	--wpca-success: #34d399;
	--wpca-success-bg: #064e3b;
}

/**
 * Base Container Resets
 */
.wpca-form {
	width: 100%;
	margin: 0 auto;
	font-family: var(--wpca-font);
	color: var(--wpca-text-main);
	box-sizing: border-box;
}

.wpca-form * {
	box-sizing: border-box;
}

.wpca-form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--wpca-spacing);
}

.wpca-field-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wpca-field-wrapper:focus-within,
.wpca-field-wrapper:hover {
	z-index: 99;
}

.wpca-field-wrapper:has(.wpca-custom-select-wrapper.is-open) {
	z-index: 999 !important;
}

/**
 * Utility Alignments
 */
.wpca-align-start {
	align-items: flex-start;
	text-align: left;
}

.wpca-align-center {
	align-items: center;
	text-align: center;
}

.wpca-align-end {
	align-items: flex-end;
	text-align: right;
}

.wpca-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--wpca-text-main);
	font-size: 14px;
	text-align: inherit;
}

.wpca-req {
	color: var(--wpca-error);
	margin-left: 2px;
}

/**
 * Standard Form Inputs
 */
.wpca-input,
.wpca-textarea,
.wpca-select {
	width: 100%;
	padding: var(--wpca-control-pad-y) var(--wpca-control-pad-x);
	border: 1px solid var(--wpca-border);
	border-radius: var(--wpca-radius);
	background: var(--wpca-bg-primary);
	font-size: var(--wpca-control-font);
	color: var(--wpca-text-main);
	line-height: var(--wpca-control-line);
	transition: border-color var(--wpca-transition) ease,
		box-shadow var(--wpca-transition) ease,
		background-color var(--wpca-transition) ease,
		color var(--wpca-transition) ease;
	box-shadow: var(--wpca-shadow-sm);
}

.wpca-input::placeholder,
.wpca-textarea::placeholder {
	color: var(--wpca-text-muted);
}

.wpca-input:focus,
.wpca-textarea:focus,
.wpca-select:focus {
	border-color: var(--wpca-primary);
	outline: none;
	box-shadow: var(--wpca-focus-ring);
}

.wpca-textarea {
	resize: vertical;
	min-height: 100px;
}

.wpca-input:focus:not(:focus-visible),
.wpca-textarea:focus:not(:focus-visible),
.wpca-select:focus:not(:focus-visible) {
	box-shadow: var(--wpca-shadow-sm);
}

.wpca-form input[type="date"],
.wpca-form input[type="time"],
.wpca-form input[type="datetime-local"],
.wpca-form input[type="month"],
.wpca-form input[type="week"] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	width: 100%;
	display: block;
	min-height: 48px;
}

/**
 * Grid Layout Structures
 */
.wpca-row {
	display: grid;
	grid-template-columns: repeat(var(--wpca-cols, 1), 1fr);
	gap: var(--wpca-spacing);
	width: 100%;
	margin-bottom: 0;
}

.wpca-column {
	display: flex;
	flex-direction: column;
	gap: var(--wpca-spacing);
	min-width: 0;
	justify-content: center;
}

@media (max-width: 768px) {
	.wpca-row {
		grid-template-columns: 1fr !important;
		gap: 15px;
	}
}

.wpca-empty-cell {
	visibility: hidden;
}

@media (max-width: 768px) {
	.wpca-empty-cell {
		display: none !important;
	}
}

/**
 * Floating Dropdown Component Bases
 */
.wpca-custom-select-options,
.wpca-datalist-options {
	background: var(--wpca-bg-primary);
	border: 1px solid var(--wpca-border);
	border-radius: var(--wpca-radius);
	box-shadow: var(--wpca-shadow-popover);
	max-height: 250px;
	overflow-y: auto;
	padding: 4px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: opacity var(--wpca-transition) ease,
		visibility var(--wpca-transition) ease,
		transform var(--wpca-transition) cubic-bezier(0.16, 1, 0.3, 1);
}

.wpca-custom-select-options li,
.wpca-datalist-options li {
	padding: var(--wpca-opt-pad-y) var(--wpca-opt-pad-x);
	font-size: 14px;
	color: var(--wpca-text-main);
	border-radius: var(--wpca-opt-radius);
	cursor: pointer;
	margin-bottom: 1px;
	transition: background var(--wpca-transition-fast) ease,
		color var(--wpca-transition-fast) ease;
}

.wpca-custom-select-options li:hover,
.wpca-datalist-options li:hover {
	background-color: var(--wpca-bg-hover);
	color: var(--wpca-primary);
}

/**
 * Custom Styled Select Component
 */
.wpca-custom-select-wrapper {
	position: relative;
	user-select: none;
	width: 100%;
}

.wpca-custom-select-trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--wpca-control-pad-y) var(--wpca-control-pad-x);
	font-size: var(--wpca-control-font);
	line-height: var(--wpca-control-line);
	background-color: var(--wpca-bg-primary);
	border: 1px solid var(--wpca-border);
	border-radius: var(--wpca-radius);
	cursor: pointer;
	color: var(--wpca-text-main);
	box-shadow: var(--wpca-shadow-sm);
	transition: border-color var(--wpca-transition) ease,
		box-shadow var(--wpca-transition) ease,
		background-color var(--wpca-transition) ease,
		color var(--wpca-transition) ease;
}

.wpca-custom-arrow {
	display: flex;
	align-items: center;
	color: var(--wpca-text-muted);
	transition: transform var(--wpca-transition-slow) ease, color var(--wpca-transition) ease;
}

.wpca-custom-select-wrapper:hover .wpca-custom-select-trigger {
	border-color: var(--wpca-border-hover);
}

.wpca-custom-select-wrapper.is-open {
	z-index: var(--wpca-z-open);
}

.wpca-custom-select-wrapper.is-open .wpca-custom-select-trigger {
	border-color: var(--wpca-primary);
	box-shadow: var(--wpca-focus-ring);
}

.wpca-custom-select-wrapper.is-open .wpca-custom-arrow {
	transform: rotate(180deg);
	color: var(--wpca-primary);
}

.wpca-custom-select-wrapper .wpca-custom-arrow svg {
	width: 24px;
	height: 24px;
}

.wpca-custom-select-options {
	position: absolute;
	top: 100%;
	margin-top: 4px;
	left: 0;
	right: 0;
	z-index: var(--wpca-z-dropdown);
}

.wpca-custom-select-wrapper.is-open .wpca-custom-select-options {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wpca-custom-select-options li.selected {
	background-color: var(--wpca-bg-active);
	color: var(--wpca-text-main);
	font-weight: 600;
}

/**
 * Custom Datalist Component
 */
.wpca-datalist-wrapper {
	position: relative;
	width: 100%;
}

.wpca-datalist-wrapper.is-open {
	z-index: var(--wpca-z-dropdown);
}

.wpca-datalist-input {
	padding-right: 40px;
	cursor: text;
}

.wpca-datalist-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wpca-text-muted);
	pointer-events: none;
	display: flex;
	align-items: center;
	transition: transform var(--wpca-transition-slow) ease, color var(--wpca-transition) ease;
}

.wpca-datalist-wrapper.is-open .wpca-datalist-icon {
	transform: translateY(-50%) rotate(180deg);
	color: var(--wpca-primary);
}

.wpca-datalist-icon svg {
	width: 24px;
	height: 24px;
}

.wpca-datalist-options {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	margin: 0;
	z-index: var(--wpca-z-dropdown);
}

.wpca-datalist-wrapper.is-open .wpca-datalist-options {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/**
 * File Upload Input Masking
 */
.wpca-file-upload-group {
	position: relative;
	width: 100%;
}

.wpca-file-input {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.wpca-file-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	padding: var(--wpca-control-pad-y) var(--wpca-control-pad-x);
	font-size: var(--wpca-control-font);
	font-weight: 500;
	line-height: var(--wpca-control-line);
	color: var(--wpca-text-muted);
	background-color: var(--wpca-bg-secondary);
	border: 1px dashed var(--wpca-border);
	border-radius: var(--wpca-radius);
	cursor: pointer;
	transition: border-color var(--wpca-transition) ease,
		background-color var(--wpca-transition) ease,
		color var(--wpca-transition) ease;
	text-align: center;
}

.wpca-file-icon {
	display: flex;
	justify-content: center;
}

.wpca-file-icon svg {
	stroke: var(--wpca-text-muted);
	transition: stroke var(--wpca-transition) ease;
	width: 24px;
	height: 24px;
}

.wpca-file-trigger:hover {
	background-color: var(--wpca-bg-primary);
	border-color: var(--wpca-primary);
	color: var(--wpca-primary);
}

.wpca-file-trigger:hover .wpca-file-icon svg {
	stroke: var(--wpca-primary);
}

.wpca-file-trigger.has-file {
	background-color: var(--wpca-bg-active);
	border-color: var(--wpca-primary);
	border-style: solid;
	color: var(--wpca-primary);
}

.wpca-file-trigger.has-file .wpca-file-icon svg {
	stroke: var(--wpca-primary);
}

.wpca-file-types-hint {
	display: block;
	width: 100%;
	font-size: 11px;
	color: var(--wpca-text-muted);
	margin-top: -4px;
	font-weight: normal;
	opacity: 0.8;
}

/**
 * Range Slider Custom Styling
 */
.wpca-range-container {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
}

.wpca-range {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
	cursor: pointer;
	margin: 0;
}

.wpca-range:focus {
	outline: none;
}

.wpca-range::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	background: var(--wpca-border);
	border-radius: 4px;
}

.wpca-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 22px;
	width: 22px;
	border-radius: 50%;
	background: var(--wpca-primary);
	margin-top: -7px;
	box-shadow: 0 2px 4px var(--wpca-shadow);
	border: 2px solid var(--wpca-bg-primary);
	transition: transform var(--wpca-transition-fast) ease;
}

.wpca-range::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}

.wpca-range::-moz-range-track {
	width: 100%;
	height: 8px;
	background: var(--wpca-border);
	border-radius: 4px;
}

.wpca-range::-moz-range-thumb {
	height: 22px;
	width: 22px;
	border: 2px solid var(--wpca-bg-primary);
	border-radius: 50%;
	background: var(--wpca-primary);
	cursor: pointer;
}

.wpca-range-value {
	display: inline-block;
	min-width: 50px;
	padding: 4px 8px;
	background-color: var(--wpca-bg-secondary);
	border: 1px solid var(--wpca-border);
	color: var(--wpca-text-main);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	border-radius: 6px;
}

/**
 * Color Picker Customization
 */
.wpca-color-group {
	position: relative;
	width: 100%;
}

.wpca-color-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.wpca-color-trigger {
	display: inline-flex;
	align-items: center;
	width: 100%;
	padding: 10px 12px;
	background-color: var(--wpca-bg-primary);
	border: 1px solid var(--wpca-border);
	border-radius: var(--wpca-radius);
	cursor: pointer;
	transition: border-color var(--wpca-transition) ease,
		box-shadow var(--wpca-transition) ease,
		background-color var(--wpca-transition) ease;
}

.wpca-color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--wpca-border);
	margin-right: 12px;
	flex-shrink: 0;
}

.wpca-color-hex {
	font-family: monospace;
	font-size: 14px;
	color: var(--wpca-text-main);
	font-weight: 600;
	flex: 1;
	text-transform: uppercase;
}

.wpca-color-icon {
	color: var(--wpca-text-muted);
	display: flex;
	align-items: center;
}

.wpca-color-icon svg {
	width: 24px;
	height: 24px;
}

.wpca-color-input:focus + .wpca-color-trigger {
	border-color: var(--wpca-primary);
	box-shadow: var(--wpca-focus-ring);
}

/**
 * Radio & Checkbox Recreations
 */
.wpca-radio-group,
.wpca-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 5px;
}

.wpca-radio-item,
.wpca-checkbox-item {
	position: relative;
	display: flex;
	align-items: center;
}

.wpca-radio-item input,
.wpca-checkbox-item input {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

.wpca-radio-item label,
.wpca-checkbox-item label {
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	color: var(--wpca-text-main);
	cursor: pointer;
	user-select: none;
	line-height: 22px;
}

.wpca-checkbox-item label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wpca-border);
	border-radius: 4px;
	background: var(--wpca-bg-primary);
	transition: background-color var(--wpca-transition) ease,
		border-color var(--wpca-transition) ease,
		transform var(--wpca-transition-fast) ease;
}

.wpca-checkbox-item label::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--wpca-text-inverted);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--wpca-transition) ease;
}

.wpca-checkbox-item input:checked + label::before {
	background-color: var(--wpca-primary);
	border-color: var(--wpca-primary);
}

.wpca-checkbox-item input:checked + label::after {
	transform: rotate(45deg) scale(1);
}

.wpca-radio-item label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid var(--wpca-border);
	border-radius: 50%;
	background: var(--wpca-bg-primary);
	transition: background-color var(--wpca-transition) ease,
		border-color var(--wpca-transition) ease;
}

.wpca-radio-item label::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wpca-bg-primary);
	transform: scale(0);
	transition: transform var(--wpca-transition) ease, background-color var(--wpca-transition) ease;
}

.wpca-radio-item input:checked + label::before {
	border-color: var(--wpca-primary);
	background-color: var(--wpca-primary);
}

.wpca-radio-item input:checked + label::after {
	transform: scale(1);
	background-color: var(--wpca-text-inverted);
}

/**
 * Consent Agreement Component
 */
.wpca-consent-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 0;
	position: relative;
	margin: 0;
}

.wpca-consent-wrapper input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	z-index: -1;
	appearance: none;
	border: none;
	outline: none;
	box-shadow: none;
}

.wpca-consent-label {
	position: relative;
	padding-left: 30px;
	font-size: 15px;
	color: var(--wpca-text-main);
	cursor: pointer;
	user-select: none;
	line-height: 22px;
}

.wpca-consent-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border: 2px solid var(--wpca-border);
	border-radius: 4px;
	background: var(--wpca-bg-primary);
	transition: background-color var(--wpca-transition) ease, border-color var(--wpca-transition) ease, transform var(--wpca-transition-fast) ease;
}

.wpca-consent-label::after {
	content: '';
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid var(--wpca-text-inverted);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--wpca-transition) ease;
}

.wpca-consent-wrapper input:checked + .wpca-consent-label::before {
	background-color: var(--wpca-primary);
	border-color: var(--wpca-primary);
}

.wpca-consent-wrapper input:checked + .wpca-consent-label::after {
	transform: rotate(45deg) scale(1);
}

.wpca-consent-label a {
	color: var(--wpca-primary);
	text-decoration: underline;
	font-weight: 500;
	position: relative;
	z-index: 2;
}

.wpca-consent-label a:hover {
	text-decoration: none;
}

.wpca-has-error .wpca-consent-wrapper {
	border-color: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.wpca-has-error .wpca-consent-label {
	color: var(--wpca-error);
}

.wpca-has-error .wpca-consent-label::before {
	border-color: var(--wpca-error);
	background-color: var(--wpca-error-bg);
}

/**
 * Fieldset Structural Styling
 */
.wpca-fieldset {
	border: 1px solid var(--wpca-border) !important;
	border-radius: var(--wpca-radius) !important;
	padding: 24px !important;
	background: var(--wpca-bg-secondary) !important;
	margin: 0 0 20px 0 !important;
	min-width: 0 !important;
	box-shadow: none !important;
	display: flex;
	flex-direction: column;
	gap: var(--wpca-spacing);
}

.wpca-legend {
	font-weight: 700 !important;
	padding: 0 10px !important;
	color: var(--wpca-text-main) !important;
	font-size: 15px !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	width: auto !important;
	float: none !important;
}

/**
 * Step Transition Animations
 */
.wpca-step {
	animation: wpca-fade-in 0.3s ease;
}

.wpca-step-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

@keyframes wpca-fade-in {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/**
 * Interactive Buttons
 */
.wpca-submit-btn,
.wpca-btn,
.wpca-reset-btn {
	border: none !important;
	padding: 14px 28px !important;
	border-radius: var(--wpca-radius) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	line-height: normal !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background-color var(--wpca-transition) ease,
		transform var(--wpca-transition-fast) ease,
		color var(--wpca-transition) ease,
		box-shadow var(--wpca-transition) ease !important;
}

.wpca-submit-btn {
	background-color: var(--wpca-primary) !important;
	background-image: none !important;
	color: var(--wpca-text-inverted) !important;
}

.wpca-submit-btn:hover {
	background-color: var(--wpca-primary-hover) !important;
}

.wpca-submit-btn:active {
	transform: translateY(1px) !important;
}

.wpca-reset-btn {
	background-color: var(--wpca-bg-hover) !important;
	background-image: none !important;
	color: var(--wpca-text-main) !important;
}

.wpca-reset-btn:hover {
	background-color: var(--wpca-border) !important;
}

/**
 * Feedback Notices
 */
.wpca-alert-box {
	padding: 12px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	color: #92400e;
	border-radius: var(--wpca-radius);
	font-size: 14px;
	text-align: center;
}

.wpca-recaptcha-notice {
	font-size: 12px;
	color: var(--wpca-text-muted);
	margin-top: 8px;
}

/**
 * Challenge / Q&A Verification Layout
 */
.wpca-type-challenge .wpca-challenge-group {
	display: grid !important;
	grid-template-columns: repeat(var(--wpca-challenge-cols, 1), 1fr) !important;
	gap: 20px !important;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.wpca-type-challenge .wpca-challenge-group {
		grid-template-columns: 1fr !important;
	}
}

.wpca-challenge-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	min-width: 0;
}

.wpca-challenge-question {
	font-weight: 600;
	font-size: 14px;
	color: var(--wpca-text-main);
	display: flex;
	align-items: center;
	line-height: 1.4;
}

.wpca-challenge-question::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	background: var(--wpca-primary);
	border-radius: 50%;
	margin-right: 10px;
	flex-shrink: 0;
}

.wpca-align-center .wpca-challenge-question {
	justify-content: center;
}

.wpca-align-center .wpca-challenge-question::before {
	margin-right: 8px;
	margin-left: 0;
}

.wpca-align-end .wpca-challenge-question {
	justify-content: flex-end;
}

.wpca-align-end .wpca-challenge-question::before {
	order: 2;
	margin-right: 0;
	margin-left: 10px;
}

/**
 * Validation Error States
 */
@keyframes wpca-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

.wpca-animate-shake {
	animation: wpca-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

.wpca-has-error .wpca-input,
.wpca-has-error .wpca-textarea,
.wpca-has-error .wpca-custom-select-trigger,
.wpca-has-error .wpca-file-trigger,
.wpca-has-error .wpca-color-trigger,
.wpca-has-error .wpca-consent-wrapper {
	border-color: var(--wpca-error);
	background-color: var(--wpca-error-bg);
	box-shadow: 0 0 0 1px var(--wpca-error);
}

.wpca-has-error .wpca-label,
.wpca-has-error .wpca-checkbox-item label,
.wpca-has-error .wpca-radio-item label,
.wpca-has-error .wpca-consent-label {
	color: var(--wpca-error) !important;
}

.wpca-has-error .wpca-checkbox-item label::before,
.wpca-has-error .wpca-radio-item label::before,
.wpca-has-error .wpca-consent-wrapper input[type="checkbox"] {
	border-color: var(--wpca-error) !important;
	background-color: var(--wpca-error-bg) !important;
}

/**
 * Form Submission States & Feedback
 */
.wpca-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.6);
	border-top-color: #fff;
	border-radius: 50%;
	margin-left: 10px;
	animation: wpca-spin 0.8s linear infinite;
}

.wpca-submit-btn.loading .wpca-spinner {
	display: inline-block;
}

@keyframes wpca-spin {
	to {
		transform: rotate(360deg);
	}
}

.wpca-response-message {
	display: none;
	padding: 15px 20px;
	margin-bottom: 25px;
	border-radius: var(--wpca-radius);
	font-size: 15px;
	line-height: 1.5;
	position: relative;
	padding-left: 50px;
	animation: wpca-slide-down 0.4s ease-out;
}

@keyframes wpca-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wpca-response-message.wpca-success {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #15803d;
}

.wpca-response-message.wpca-success svg {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
}

.wpca-response-message.wpca-error {
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.wpca-response-message.wpca-error svg {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
}

/**
 * Accessibility Media Queries
 */
@media (prefers-reduced-motion: reduce) {
	.wpca-step,
	.wpca-animate-shake,
	.wpca-response-message {
		animation: none !important;
	}
	
	.wpca-custom-select-options,
	.wpca-datalist-options,
	.wpca-custom-arrow,
	.wpca-datalist-icon,
	.wpca-submit-btn,
	.wpca-btn,
	.wpca-reset-btn {
		transition: none !important;
	}
}