/*
 * Sissi Creative Lab Core — standalone form styles.
 * Self-contained so the application form stays usable even if the site
 * switches away from the sissi-creative-lab theme. Falls back to the
 * brand palette when the theme variables are absent.
 */

.scl-form {
	--_ink: var(--scl-ink, #FAF8F4);
	--_navy: var(--scl-navy, #FFFFFF);
	--_gold: var(--scl-gold, #A4325E);
	--_ivory: var(--scl-ivory, #262420);
	--_muted: var(--scl-muted, #6B675F);
	--_success: var(--scl-success, #2E7D4F);
	--_warning: var(--scl-warning, #8A6414);
	--_error: var(--scl-error, #B3403C);
	--_line: var(--scl-line, rgba(38, 36, 32, 0.16));
	max-width: 720px;
	font-size: 1rem;
}

.scl-form fieldset {
	border: 1px solid var(--_line);
	border-radius: 2px;
	padding: 24px;
	margin: 0 0 24px;
}

.scl-form legend {
	padding: 0 8px;
	font-weight: 600;
}

.scl-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.scl-form .scl-field {
	margin-bottom: 20px;
}

.scl-form .scl-desc {
	color: var(--_muted);
	font-size: 0.875rem;
	margin: 4px 0 8px;
}

.scl-form input[type="text"],
.scl-form input[type="email"],
.scl-form input[type="tel"],
.scl-form select,
.scl-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	background: var(--_navy);
	color: var(--_ivory);
	border: 1px solid var(--_line);
	border-radius: 2px;
	font-size: 1.0625rem;
}

.scl-form textarea {
	min-height: 120px;
}

.scl-form input:focus-visible,
.scl-form select:focus-visible,
.scl-form textarea:focus-visible,
.scl-form button:focus-visible {
	outline: 2px solid var(--_gold);
	outline-offset: 2px;
}

.scl-form .scl-radio-group label,
.scl-form .scl-check-group label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	min-height: 44px;
	padding: 8px 0;
	cursor: pointer;
}

.scl-form input[type="radio"],
.scl-form input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-top: 4px;
	accent-color: var(--_gold);
	flex-shrink: 0;
}

.scl-form .is-invalid {
	border-color: var(--_error);
}

.scl-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.scl-notice {
	border: 1px solid var(--scl-line, rgba(38, 36, 32, 0.16));
	border-left-width: 3px;
	border-radius: 2px;
	padding: 16px 20px;
	margin: 16px 0;
	background: var(--scl-navy, #FFFFFF);
	color: var(--scl-ivory, #262420);
}

.scl-notice--success { border-left-color: var(--scl-success, #2E7D4F); }
.scl-notice--warning { border-left-color: var(--scl-warning, #8A6414); }
.scl-notice--error { border-left-color: var(--scl-error, #B3403C); }
.scl-notice--info { border-left-color: var(--scl-gold, #A4325E); }

.scl-notice .scl-notice-title {
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

.scl-error-summary ul {
	margin: 8px 0 0 20px;
}

.scl-error-summary a {
	color: var(--scl-error, #B3403C);
}

.scl-field-error {
	color: var(--scl-error, #B3403C);
	font-size: 0.875rem;
	margin-top: 6px;
}

.scl-amelia-fallback {
	border: 1px solid var(--scl-line, rgba(38, 36, 32, 0.16));
	border-radius: 2px;
	padding: 24px;
	background: var(--scl-navy, #FFFFFF);
	color: var(--scl-ivory, #262420);
}

@media (prefers-reduced-motion: reduce) {
	.scl-form *,
	.scl-notice {
		transition: none !important;
		animation: none !important;
	}
}