/**
 * WH4U Domains - Frontend Styles
 *
 * Theme-agnostic: all visual values use CSS custom properties with
 * --wp--preset--* fallbacks so the block adapts to any theme.
 *
 * All selectors scoped under .wh4u-domains to prevent collisions.
 */

/* ──────────────────────────────────────────────────────────────
   Design Tokens (override via --wh4u-* on .wh4u-domains)
   ────────────────────────────────────────────────────────────── */
.wh4u-domains {
	/* Accent / primary action color - theme can override */
	--wh4u-accent: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #3b82f6));
	--wh4u-accent-hover: color-mix(in srgb, var(--wh4u-accent) 85%, #000);
	--wh4u-accent-light: color-mix(in srgb, var(--wh4u-accent) 8%, transparent);
	--wh4u-accent-soft: color-mix(in srgb, var(--wh4u-accent) 14%, transparent);

	/* Text */
	--wh4u-text: var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #1e293b));
	--wh4u-text-secondary: color-mix(in srgb, var(--wh4u-text) 60%, transparent);
	--wh4u-text-muted: color-mix(in srgb, var(--wh4u-text) 40%, transparent);

	/* Surfaces */
	--wh4u-bg: var(--wp--preset--color--base, var(--wp--preset--color--background, #ffffff));
	--wh4u-surface: var(--wh4u-bg);
	--wh4u-surface-raised: var(--wh4u-bg);
	--wh4u-border: color-mix(in srgb, var(--wh4u-text) 12%, transparent);
	--wh4u-border-focus: var(--wh4u-accent);

	/* Spacing */
	--wh4u-gap: var(--wp--preset--spacing--30, 1rem);
	--wh4u-gap-lg: var(--wp--preset--spacing--40, 1.5rem);

	/* Radius - uses theme custom.border.radius when available */
	--wh4u-radius: var(--wp--custom--border--radius, 12px);

	/* Transitions */
	--wh4u-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--wh4u-duration: 200ms;

	/* Status */
	--wh4u-available: #059669;
	--wh4u-unavailable: #dc2626;

	/* Layout */
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--system-font, var(--wp--preset--font-family--body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif));
	color: var(--wh4u-text);
	box-sizing: border-box;
	line-height: 1.5;
}

.wh4u-domains *,
.wh4u-domains *::before,
.wh4u-domains *::after {
	box-sizing: inherit;
}

/* ──────────────────────────────────────────────────────────────
   Style Variants
   ────────────────────────────────────────────────────────────── */
.wh4u-domains--elevated .wh4u-domains__search-section,
.wh4u-domains--elevated .wh4u-domains__form-section {
	box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
	border-radius: var(--wh4u-radius);
	background: var(--wh4u-surface);
	padding: var(--wh4u-gap-lg);
}

.wh4u-domains--flat .wh4u-domains__search-section,
.wh4u-domains--flat .wh4u-domains__form-section {
	background: var(--wh4u-surface);
	border-radius: var(--wh4u-radius);
	padding: var(--wh4u-gap-lg);
}

.wh4u-domains--bordered .wh4u-domains__search-section,
.wh4u-domains--bordered .wh4u-domains__form-section {
	border: 1px solid var(--wh4u-border);
	border-radius: var(--wh4u-radius);
	background: var(--wh4u-surface);
	padding: var(--wh4u-gap-lg);
}

.wh4u-domains--minimal .wh4u-domains__search-section,
.wh4u-domains--minimal .wh4u-domains__form-section {
	padding: var(--wh4u-gap) 0;
}

/* ──────────────────────────────────────────────────────────────
   Search Form
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__form {
	margin: 0;
}

.wh4u-domains__input-wrap {
	display: flex;
	align-items: center;
	background: var(--wh4u-surface);
	border: 2px solid var(--wh4u-border);
	border-radius: calc(var(--wh4u-radius) - 2px);
	transition: border-color var(--wh4u-duration) var(--wh4u-ease), box-shadow var(--wh4u-duration) var(--wh4u-ease);
	overflow: hidden;
}

.wh4u-domains__input-wrap:focus-within {
	border-color: var(--wh4u-border-focus);
	box-shadow: 0 0 0 3px var(--wh4u-accent-light);
}

.wh4u-domains__search-icon {
	display: flex;
	align-items: center;
	padding: 0 0 0 16px;
	color: var(--wh4u-text-muted);
	flex-shrink: 0;
}

.wh4u-domains__input {
	flex: 1;
	padding: 14px 12px;
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	border: none;
	outline: none;
	background: transparent;
	color: var(--wh4u-text);
	min-width: 0;
}

.wh4u-domains__input::placeholder {
	color: var(--wh4u-text-muted);
}

.wh4u-domains__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--wh4u-accent);
	border: none;
	border-radius: calc(var(--wh4u-radius) - 4px);
	margin: 4px;
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease), transform 100ms var(--wh4u-ease);
	white-space: nowrap;
	line-height: 1.5;
}

.wh4u-domains__btn:hover {
	background: var(--wh4u-accent-hover);
}

.wh4u-domains__btn:active {
	transform: scale(0.98);
}

.wh4u-domains__btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.wh4u-domains__btn-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wh4u-spin 0.6s linear infinite;
}

.wh4u-domains__btn:disabled .wh4u-domains__btn-spinner {
	display: inline-block;
}

.wh4u-domains__btn:disabled .wh4u-domains__btn-text {
	display: none;
}

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

/* ──────────────────────────────────────────────────────────────
   Loading Bar
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__loading {
	height: 3px;
	background: var(--wh4u-accent-light);
	border-radius: 2px;
	overflow: hidden;
	margin-top: var(--wh4u-gap);
}

.wh4u-domains__loading-bar {
	height: 100%;
	background: var(--wh4u-accent);
	border-radius: 2px;
	animation: wh4u-loading 1.5s var(--wh4u-ease) infinite;
}

@keyframes wh4u-loading {
	0% { width: 0; margin-left: 0; }
	50% { width: 60%; margin-left: 20%; }
	100% { width: 0; margin-left: 100%; }
}

/* ──────────────────────────────────────────────────────────────
   Error
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__error {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: calc(var(--wh4u-radius) - 4px);
	padding: 12px 16px;
	color: #991b1b;
	margin-top: var(--wh4u-gap);
	font-size: 0.875rem;
}

.wh4u-domains__error svg {
	flex-shrink: 0;
}

.wh4u-domains__error p {
	margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   Results - Card Layout
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__results {
	margin-top: var(--wh4u-gap-lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wh4u-domains__result-card {
	display: flex;
	align-items: center;
	gap: var(--wh4u-gap);
	padding: 16px 20px;
	border: 1px solid var(--wh4u-border);
	border-radius: calc(var(--wh4u-radius) - 4px);
	background: var(--wh4u-surface);
	transition: border-color var(--wh4u-duration) var(--wh4u-ease), box-shadow var(--wh4u-duration) var(--wh4u-ease);
	animation: wh4u-fadeIn 0.3s var(--wh4u-ease) both;
}

.wh4u-domains__result-card:hover {
	border-color: var(--wh4u-accent-soft);
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06);
}

.wh4u-domains__result-card--available {
	border-left: 3px solid var(--wh4u-available);
}

.wh4u-domains__result-card--unavailable {
	border-left: 3px solid var(--wh4u-border);
	opacity: 0.7;
}

.wh4u-domains__result-domain {
	flex: 1;
	min-width: 0;
}

.wh4u-domains__result-domain-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--wh4u-text);
	word-break: break-all;
}

.wh4u-domains__result-tld {
	color: var(--wh4u-text-secondary);
	font-weight: 400;
}

.wh4u-domains__result-status {
	font-size: 0.8125rem;
	font-weight: 500;
	padding: 2px 10px;
	border-radius: 9999px;
	white-space: nowrap;
}

.wh4u-domains__result-status--available {
	color: var(--wh4u-available);
	background: color-mix(in srgb, var(--wh4u-available) 10%, transparent);
}

.wh4u-domains__result-status--unavailable {
	color: var(--wh4u-text-muted);
	background: color-mix(in srgb, var(--wh4u-text) 6%, transparent);
}

.wh4u-domains__result-action {
	flex-shrink: 0;
}

.wh4u-domains__register-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--wh4u-accent);
	border: none;
	border-radius: calc(var(--wh4u-radius) - 4px);
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease), transform 100ms var(--wh4u-ease);
	text-decoration: none;
	line-height: 1.5;
}

.wh4u-domains__register-btn:hover {
	background: var(--wh4u-accent-hover);
	color: #fff;
	text-decoration: none;
}

.wh4u-domains__register-btn:active {
	transform: scale(0.97);
}

.wh4u-domains__transfer-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--wh4u-accent, #2271b1);
	background: transparent;
	border: 2px solid var(--wh4u-accent, #2271b1);
	border-radius: calc(var(--wh4u-radius) - 4px);
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease), color var(--wh4u-duration) var(--wh4u-ease), transform 100ms var(--wh4u-ease);
	text-decoration: none;
	line-height: 1.5;
}

.wh4u-domains__transfer-btn:hover {
	background: var(--wh4u-accent, #2271b1);
	color: #fff;
	text-decoration: none;
}

.wh4u-domains__transfer-btn:active {
	transform: scale(0.97);
}

.wh4u-domains__field--eppcode {
	margin-bottom: var(--wh4u-gap, 1rem);
	padding-bottom: var(--wh4u-gap, 1rem);
	border-bottom: 1px solid var(--wh4u-border, #dcdcde);
}

.wh4u-domains__no-results {
	text-align: center;
	padding: var(--wh4u-gap-lg);
	color: var(--wh4u-text-muted);
	font-size: 0.9375rem;
}

@keyframes wh4u-fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────────
   Registration Form
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__form-section {
	margin-top: var(--wh4u-gap-lg);
	animation: wh4u-slideUp 0.4s var(--wh4u-ease) both;
}

@keyframes wh4u-slideUp {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

.wh4u-domains__form-header {
	text-align: center;
	margin-bottom: var(--wh4u-gap-lg);
}

.wh4u-domains__form-domain-badge {
	display: inline-block;
	padding: 6px 16px;
	background: var(--wh4u-accent-light);
	color: var(--wh4u-accent);
	font-weight: 700;
	font-size: 0.9375rem;
	border-radius: 9999px;
	margin-bottom: 12px;
}

.wh4u-domains__form-title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--wh4u-text);
	margin: 0 0 6px;
	line-height: 1.3;
}

.wh4u-domains__form-desc {
	color: var(--wh4u-text-secondary);
	margin: 0;
	font-size: 0.9375rem;
}

.wh4u-domains__register-form {
	margin: 0;
}

.wh4u-domains__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wh4u-gap);
}

.wh4u-domains__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wh4u-domains__field--full {
	grid-column: 1 / -1;
}

.wh4u-domains__field--period {
	margin-top: var(--wh4u-gap);
}

.wh4u-domains__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wh4u-text);
	letter-spacing: 0.01em;
}

.wh4u-domains__field label abbr {
	color: var(--wh4u-unavailable);
	text-decoration: none;
}

.wh4u-domains__field input,
.wh4u-domains__field select {
	padding: 10px 14px;
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--wh4u-text);
	background: var(--wh4u-surface);
	border: 1.5px solid var(--wh4u-border);
	border-radius: calc(var(--wh4u-radius) - 6px);
	outline: none;
	transition: border-color var(--wh4u-duration) var(--wh4u-ease), box-shadow var(--wh4u-duration) var(--wh4u-ease);
	line-height: 1.5;
}

.wh4u-domains__field input:focus,
.wh4u-domains__field select:focus {
	border-color: var(--wh4u-border-focus);
	box-shadow: 0 0 0 3px var(--wh4u-accent-light);
}

.wh4u-domains__field input.wh4u-domains__field-error {
	border-color: var(--wh4u-unavailable);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wh4u-unavailable) 10%, transparent);
}

.wh4u-domains__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

/* Turnstile */
.wh4u-domains__turnstile {
	margin-top: var(--wh4u-gap);
	display: flex;
	justify-content: center;
}

/* Form Actions */
.wh4u-domains__form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: var(--wh4u-gap-lg);
	padding-top: var(--wh4u-gap);
	border-top: 1px solid var(--wh4u-border);
}

.wh4u-domains__btn-secondary {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--wh4u-text-secondary);
	background: transparent;
	border: 1.5px solid var(--wh4u-border);
	border-radius: calc(var(--wh4u-radius) - 4px);
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease), color var(--wh4u-duration) var(--wh4u-ease);
	line-height: 1.5;
}

.wh4u-domains__btn-secondary:hover {
	background: var(--wh4u-accent-light);
	color: var(--wh4u-text);
}

.wh4u-domains__btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--wh4u-accent);
	border: none;
	border-radius: calc(var(--wh4u-radius) - 4px);
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease), transform 100ms var(--wh4u-ease);
	line-height: 1.5;
}

.wh4u-domains__btn-primary:hover {
	background: var(--wh4u-accent-hover);
}

.wh4u-domains__btn-primary:active {
	transform: scale(0.98);
}

.wh4u-domains__btn-primary:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.wh4u-domains__btn-primary:disabled .wh4u-domains__btn-spinner {
	display: inline-block;
}

.wh4u-domains__btn-primary:disabled .wh4u-domains__btn-text {
	display: none;
}

/* ──────────────────────────────────────────────────────────────
   Success State
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__success {
	text-align: center;
	padding: var(--wh4u-gap-lg) var(--wh4u-gap-lg) var(--wh4u-gap);
	margin-top: var(--wh4u-gap-lg);
	animation: wh4u-fadeIn 0.4s var(--wh4u-ease) both;
}

.wh4u-domains__success svg {
	color: var(--wh4u-available);
	margin-bottom: 12px;
}

.wh4u-domains__success h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wh4u-text);
	margin: 0 0 8px;
}

.wh4u-domains__success p {
	color: var(--wh4u-text-secondary);
	margin: 0 0 var(--wh4u-gap-lg);
	font-size: 0.9375rem;
}

.wh4u-domains__success-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 24px;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	color: var(--wh4u-accent);
	background: var(--wh4u-accent-light);
	border: none;
	border-radius: calc(var(--wh4u-radius) - 4px);
	cursor: pointer;
	transition: background var(--wh4u-duration) var(--wh4u-ease);
	line-height: 1.5;
}

.wh4u-domains__success-cta:hover {
	background: var(--wh4u-accent-soft);
}

/* ──────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.wh4u-domains__input-wrap {
		flex-direction: column;
		border-radius: var(--wh4u-radius);
	}

	.wh4u-domains__search-icon {
		display: none;
	}

	.wh4u-domains__input {
		width: 100%;
		padding: 14px 16px;
	}

	.wh4u-domains__btn {
		width: calc(100% - 8px);
		margin: 0 4px 4px;
		justify-content: center;
	}

	.wh4u-domains__result-card {
		flex-wrap: wrap;
		gap: 8px;
		padding: 14px 16px;
	}

	.wh4u-domains__result-domain {
		flex-basis: 100%;
	}

	.wh4u-domains__result-action {
		flex-basis: 100%;
	}

	.wh4u-domains__register-btn,
	.wh4u-domains__transfer-btn {
		width: 100%;
		justify-content: center;
	}

	.wh4u-domains__form-grid {
		grid-template-columns: 1fr;
	}

	.wh4u-domains__form-actions {
		flex-direction: column-reverse;
	}

	.wh4u-domains__btn-primary,
	.wh4u-domains__btn-secondary {
		width: 100%;
		justify-content: center;
	}

	.wh4u-domains__skeleton-card {
		padding: 14px 16px;
	}

	.wh4u-domains__tld-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.wh4u-domains__tld-chips::-webkit-scrollbar {
		display: none;
	}

	.wh4u-domains__result-price {
		flex-basis: 100%;
	}
}

/* ──────────────────────────────────────────────────────────────
   Skeleton Loading Cards
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__skeleton-card {
	display: flex;
	align-items: center;
	gap: var(--wh4u-gap);
	padding: 20px;
	border: 1px solid var(--wh4u-border);
	border-radius: calc(var(--wh4u-radius) - 4px);
	background: var(--wh4u-surface);
	animation: wh4u-fadeIn 0.3s var(--wh4u-ease) both;
}

.wh4u-domains__skeleton-line {
	height: 16px;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		var(--wh4u-border) 25%,
		color-mix(in srgb, var(--wh4u-text) 6%, transparent) 50%,
		var(--wh4u-border) 75%
	);
	background-size: 200% 100%;
	animation: wh4u-shimmer 1.5s infinite linear;
}

.wh4u-domains__skeleton-line--wide {
	flex: 1;
	min-width: 0;
	height: 18px;
}

.wh4u-domains__skeleton-line--pill {
	width: 70px;
	height: 24px;
	border-radius: 9999px;
	flex-shrink: 0;
}

.wh4u-domains__skeleton-line--btn {
	width: 90px;
	height: 34px;
	border-radius: calc(var(--wh4u-radius) - 4px);
	flex-shrink: 0;
}

@keyframes wh4u-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────
   TLD Chips
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__tld-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding: 0 2px;
}

.wh4u-domains__tld-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	font-size: 0.8125rem;
	font-weight: 500;
	font-family: inherit;
	color: var(--wh4u-text-secondary);
	background: transparent;
	border: 1.5px solid var(--wh4u-border);
	border-radius: 9999px;
	cursor: pointer;
	transition:
		border-color var(--wh4u-duration) var(--wh4u-ease),
		color var(--wh4u-duration) var(--wh4u-ease),
		background var(--wh4u-duration) var(--wh4u-ease);
	white-space: nowrap;
	line-height: 1.5;
}

.wh4u-domains__tld-chip:hover {
	border-color: var(--wh4u-accent);
	color: var(--wh4u-accent);
	background: var(--wh4u-accent-light);
}

.wh4u-domains__tld-chip:active {
	transform: scale(0.96);
}


/* ──────────────────────────────────────────────────────────────
   Pricing Display
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__result-price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wh4u-text-secondary);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   Animated Status Icons
   ────────────────────────────────────────────────────────────── */
.wh4u-domains__status-icon {
	display: inline-block;
	vertical-align: -2px;
	margin-right: 4px;
	animation: wh4u-statusPop 0.35s var(--wh4u-ease) both;
}

@keyframes wh4u-statusPop {
	0% { transform: scale(0.5); opacity: 0; }
	70% { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}


/* ──────────────────────────────────────────────────────────────
   Fallback for browsers without color-mix()
   ────────────────────────────────────────────────────────────── */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.wh4u-domains {
		--wh4u-accent-hover: #2563eb;
		--wh4u-accent-light: rgba(59, 130, 246, 0.08);
		--wh4u-accent-soft: rgba(59, 130, 246, 0.14);
		--wh4u-text-secondary: #64748b;
		--wh4u-text-muted: #94a3b8;
		--wh4u-border: #e2e8f0;
	}

	.wh4u-domains__result-status--available {
		background: rgba(5, 150, 105, 0.1);
	}

	.wh4u-domains__result-status--unavailable {
		background: rgba(0, 0, 0, 0.04);
	}

	.wh4u-domains__skeleton-line {
		background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
		background-size: 200% 100%;
		animation: wh4u-shimmer 1.5s infinite linear;
	}
}

/* ──────────────────────────────────────────────────────────────
   Dark Mode (prefers-color-scheme)
   Inline style="--wh4u-*" overrides from Appearance tab win over
   these defaults since inline custom properties have higher priority.
   ────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.wh4u-domains {
		--wh4u-text: #e2e8f0;
		--wh4u-bg: #0f172a;
		--wh4u-surface: #1e293b;
		--wh4u-surface-raised: #1e293b;
		--wh4u-border: rgba(255, 255, 255, 0.1);
		--wh4u-border-focus: var(--wh4u-accent);
		--wh4u-accent-hover: color-mix(in srgb, var(--wh4u-accent) 80%, #fff);
		--wh4u-accent-light: color-mix(in srgb, var(--wh4u-accent) 12%, transparent);
		--wh4u-accent-soft: color-mix(in srgb, var(--wh4u-accent) 18%, transparent);
		--wh4u-available: #34d399;
		--wh4u-unavailable: #f87171;
	}

	.wh4u-domains__error {
		background: rgba(239, 68, 68, 0.1);
		border-color: rgba(239, 68, 68, 0.25);
		color: #fca5a5;
	}

	.wh4u-domains__skeleton-line {
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.06) 25%,
			rgba(255, 255, 255, 0.1) 50%,
			rgba(255, 255, 255, 0.06) 75%
		);
		background-size: 200% 100%;
	}

	.wh4u-domains__tld-chip {
		border-color: rgba(255, 255, 255, 0.12);
		color: #94a3b8;
	}

	.wh4u-domains__result-card {
		background: var(--wh4u-surface);
	}
}

@media (prefers-color-scheme: dark) {
	@supports not (color: color-mix(in srgb, red 50%, blue)) {
		.wh4u-domains {
			--wh4u-accent-hover: #60a5fa;
			--wh4u-accent-light: rgba(59, 130, 246, 0.12);
			--wh4u-accent-soft: rgba(59, 130, 246, 0.18);
			--wh4u-border: rgba(255, 255, 255, 0.1);
		}
	}
}