/* MW Store Forms — modern card forms (design doc 2026-07-06).
   Self-contained. Every design token is a --mwsf-* custom property whose
   fallback IS the Most Wanted scheme, so with no scheme CSS emitted the
   original look is unchanged. Scheme values come from includes/schemes.php
   via an inline style block on .mwsf-card. */

.mwsf-card {
	max-width: 720px;
	margin: 24px auto;
	padding: 28px 28px 32px;
	background: var(--mwsf-card-bg, #fff);
	border: var(--mwsf-card-border-w, 1px) solid var(--mwsf-card-border, #e2e8dc);
	border-radius: var(--mwsf-card-radius, 14px);
	box-shadow: var(--mwsf-card-shadow, 0 2px 12px rgba(30, 45, 20, 0.06));
	font-size: 15px;
	line-height: 1.5;
	color: var(--mwsf-text, #24301f);
}

.mwsf-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 18px;
}

.mwsf-field { display: flex; flex-direction: column; }
.mwsf-field.mwsf-wide { grid-column: 1 / -1; }

.mwsf-field label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--mwsf-label, #33402b);
}

.mwsf-req { color: var(--mwsf-req, #b3400f); }

.mwsf-field input,
.mwsf-field select,
.mwsf-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid var(--mwsf-input-border, #ccd6c4);
	border-radius: var(--mwsf-field-radius, 9px);
	background: var(--mwsf-input-bg, #fbfdf9);
	font: inherit;
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mwsf-field input[type="file"] { padding: 9px; background: var(--mwsf-input-bg-file, #f4f8f0); }

.mwsf-field input:focus,
.mwsf-field select:focus,
.mwsf-field textarea:focus {
	outline: none;
	border-color: var(--mwsf-accent, #4f7a2b);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mwsf-accent, #4f7a2b) 20%, transparent);
	background: var(--mwsf-input-focus-bg, #fff);
}

.mwsf-has-error input,
.mwsf-has-error select,
.mwsf-has-error textarea { border-color: var(--mwsf-error, #c0392b); }

.mwsf-error {
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--mwsf-error, #b3261e);
}

.mwsf-submit {
	margin-top: 22px;
	padding: 12px 34px;
	background: var(--mwsf-btn-bg, #4f7a2b);
	color: var(--mwsf-btn-text, #fff);
	font-family: var(--mwsf-font-display, inherit);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 0;
	border-radius: var(--mwsf-btn-radius, 9px);
	cursor: pointer;
	transition: background 0.15s, transform 0.12s ease, box-shadow 0.12s ease;
}

.mwsf-submit:hover {
	background: var(--mwsf-btn-hover-bg, #3f6222);
	box-shadow: var(--mwsf-btn-hover-shadow, none);
	transform: var(--mwsf-btn-hover-transform, none);
}
.mwsf-submit:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
	.mwsf-submit { transition: background 0.15s; }
	.mwsf-submit:hover { transform: none; }
}

.mwsf-banner {
	padding: 12px 16px;
	border-radius: var(--mwsf-field-radius, 9px);
	margin-bottom: 18px;
	font-size: 14px;
}

.mwsf-banner-error {
	background: var(--mwsf-banner-err-bg, #fbeae8);
	border: 1px solid var(--mwsf-banner-err-border, #e5b6b0);
	color: var(--mwsf-banner-err-text, #8c2f24);
}

.mwsf-success { text-align: center; }
.mwsf-success h3 {
	margin: 4px 0 8px;
	font-size: 22px;
	font-family: var(--mwsf-font-display, inherit);
	color: var(--mwsf-success, #33511d);
}
.mwsf-again { color: var(--mwsf-accent-text, #4f7a2b); font-weight: 600; }

/* Honeypot — visually gone, still in the DOM for bots. */
.mwsf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 640px) {
	.mwsf-card { padding: 20px 16px 24px; margin: 12px auto; }
	.mwsf-grid { grid-template-columns: 1fr; gap: 14px; }
}