/**
 * CF7 RDW Auto Data - Frontend Styles
 */

.cf7-rdw-field-wrapper { position: relative; display: inline-block; width: 100%; }

.cf7-rdw-spinner {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px;
	border: 2px solid #f3f3f3; border-top: 2px solid var(--vin-fe-cf7-primary, var(--vin-fe-primary, #3498db));
	border-radius: 50%;
	animation: cf7-rdw-spin 1s linear infinite;
	display: none;
}
.cf7-rdw-spinner.active { display: block; }
@keyframes cf7-rdw-spin {
	0% { transform: translateY(-50%) rotate(0deg); }
	100% { transform: translateY(-50%) rotate(360deg); }
}

/* Collapsed by default (max-height:0, zero footprint) so the JS-inserted
   container reserves NO space on load — preserves the zero on-load layout
   shift. On a lookup it expands/collapses SMOOTHLY instead of snapping the
   fields below it up and down (the reported "layout change for a few sec"). */
.cf7-rdw-message {
	max-height: 0;
	overflow: hidden;
	padding: 0 15px;
	margin: 0;
	border: 0 solid transparent;
	border-radius: 4px;
	font-size: 14px;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease, margin 0.25s ease;
}
.cf7-rdw-message.active { max-height: 6em; padding: 10px 15px; margin: 10px 0; border-width: 1px; opacity: 1; }
.cf7-rdw-message.error { background-color: #fef2f2; border: 1px solid #fecaca; color: var(--vin-fe-cf7-status-error, var(--vin-fe-status-error, #dc2626)); }
.cf7-rdw-message.success { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: var(--vin-fe-cf7-status-success, var(--vin-fe-status-success, #16a34a)); }
.cf7-rdw-message.info { background-color: #eff6ff; border: 1px solid #bfdbfe; color: var(--vin-fe-cf7-status-info, var(--vin-fe-status-info, #2563eb)); }

/* Non-destructive status cues: an outline ring (box-shadow) instead of
   overriding the field's own background/border. This preserves a branded
   license-plate look (e.g. the yellow Dutch kenteken styling) rather than
   washing it grey/green/red for a few seconds, and a box-shadow never reflows
   surrounding content. The spinner already signals loading. */
.cf7-rdw-field-loading { cursor: wait; }
.cf7-rdw-field-success { box-shadow: 0 0 0 2px var(--vin-fe-cf7-status-success, var(--vin-fe-status-success, #16a34a)) !important; }
.cf7-rdw-field-error { box-shadow: 0 0 0 2px var(--vin-fe-cf7-status-error, var(--vin-fe-status-error, #dc2626)) !important; }

.cf7-rdw-autofilled { background-color: #fefce8 !important; border-color: #fde047 !important; transition: background-color 0.3s ease, border-color 0.3s ease; }
.cf7-rdw-autofilled.fade { background-color: inherit !important; border-color: inherit !important; }

.cf7-rdw-inline-error { color: var(--vin-fe-cf7-status-error, var(--vin-fe-status-error, #dc2626)); font-size: 12px; margin-top: 4px; display: none; }
.cf7-rdw-inline-error.active { display: block; }

.cf7-rdw-license-plate-input { text-transform: uppercase; font-family: monospace; letter-spacing: 1px; }

@media (prefers-reduced-motion: reduce) {
	.cf7-rdw-message,
	.cf7-rdw-autofilled { transition: none; }
}