/**
 * theme-modern.css
 *
 * Theme 1: Modern — Clean card with subtle shadow, centered layout,
 * gradient button, rounded corners.
 *
 * All colors are driven by CSS custom properties (variables) injected
 * by AV_Shortcode::inject_dynamic_css() so the admin color settings
 * take full effect on every element of this theme.
 */

.av-theme-modern .av-verify-form {
	background: var(--av-form-bg, #ffffff);
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.04);
}

.av-theme-modern .av-form-title {
	text-align: center;
	font-size: 22px;
	color: var(--av-text-color, #333);
}

.av-theme-modern .av-form-description {
	text-align: center;
	color: var(--av-text-color, #333);
	opacity: 0.85;
}

.av-theme-modern .av-code-input {
	border-radius: 12px;
	border: 2px solid var(--av-input-border, #e8e8e8);
	background: var(--av-input-bg, #fafafa);
	color: var(--av-text-color, #333);
}

.av-theme-modern .av-code-input:focus {
	border-color: var(--av-input-focus, #007cba);
	background: var(--av-input-bg, #fff);
	box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.12);
}

.av-theme-modern .av-verify-btn {
	border-radius: 12px;
	background: var(--av-button-color, #007cba);
	color: var(--av-button-text-color, #fff);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 14px 24px;
}

.av-theme-modern .av-verify-btn:hover {
	background: var(--av-button-color, #007cba);
	color: var(--av-button-text-color, #fff);
	opacity: 0.9;
	box-shadow: 0 6px 20px rgba(0, 124, 186, 0.35);
}

.av-theme-modern .av-result {
	border-radius: 12px;
	border-left: 4px solid;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	background: var(--av-result-bg, #f9f9f9);
}