/*
 * forms.css -- shared chrome for the classic organizer/submit forms.
 *
 * Used by:
 *   - page-submit-series.php  (/submit-series)
 *   - page-claim.php          (/claim)
 *   - page-cover-series.php   (/cover-series)
 *   - page-submit-event.php   (/submit-event, layers submit-event.css)
 *
 * Mobile-first. Relies on tokens.css for custom properties and
 * event-instance.css for .ce-btn variants (must load before this file).
 *
 * @package car-events
 * @since   1.11.0
 */

/* -- Page shell ─────────────────────────────────────────────────────────── */

.ce-form-page {
	min-height: 100vh;
	padding: var(--density-pad);
}

.ce-form-page__inner {
	max-width: 520px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: calc( var(--density-gap) * 1.5 );
}

/* -- Page header ────────────────────────────────────────────────────────── */

.ce-form-page__header {
	padding-top: calc( var(--density-pad) * 0.5 );
}

.ce-form-page__title {
	font-family: var(--font-display);
	font-size: clamp( 32px, 6vw, 52px );
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 0.95;
	margin: 10px 0 0 0;
	color: var(--fg);
}

.ce-form-page__subcopy {
	font-size: 16px;
	line-height: 1.55;
	color: var(--fg-2);
	margin: 14px 0 0 0;
}

/* -- Error alert ────────────────────────────────────────────────────────── */

.ce-form-alert {
	padding: 12px 16px;
	background: color-mix( in oklab, oklch( 62% 0.18 20 ) 10%, var(--bg-2) );
	border: 1px solid oklch( 62% 0.18 20 );
	border-radius: 8px;
	font-size: 14px;
	color: oklch( 72% 0.14 20 );
	line-height: 1.5;
}

/* -- Success state ──────────────────────────────────────────────────────── */

.ce-form-success {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 12px;
}

.ce-form-success__icon {
	color: var(--accent);
}

.ce-form-success__heading {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--fg);
}

.ce-form-success__body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--fg-2);
	margin: 0;
}

/* -- Form ───────────────────────────────────────────────────────────────── */

.ce-form {
	display: flex;
	flex-direction: column;
	gap: var(--density-gap);
}

.ce-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ce-form__label {
	color: var(--fg-4);
	font-size: 11px;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ce-form__req {
	color: var(--accent);
	font-size: 13px;
	line-height: 1;
}

.ce-form__optional {
	color: var(--fg-4);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: none;
	font-weight: 400;
}

.ce-form__hint {
	color: var(--fg-4);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.5;
	margin: 0;
}

/* -- Series echo (pre-filled state on /claim and /cover-series) ─────────── */

.ce-form__series-echo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ce-form__series-name {
	font-size: 18px;
	font-weight: 600;
	color: var(--fg);
	font-family: var(--font-display);
}

/* -- Text inputs / textareas / selects ──────────────────────────────────── */

.ce-form__input,
.ce-form__textarea,
.ce-form__select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--bg-2);
	border: 1px solid var(--line-2);
	border-radius: 8px;
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px; /* 16px prevents iOS zoom on focus */
	padding: 12px 14px;
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	transition: border-color 120ms;
}

.ce-form__textarea {
	resize: vertical;
	min-height: 88px;
}

.ce-form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.ce-form__input:focus,
.ce-form__textarea:focus,
.ce-form__select:focus {
	outline: none;
	border-color: var(--accent);
}

.ce-form__input:user-invalid,
.ce-form__input.is-touched:invalid {
	border-color: oklch( 62% 0.18 20 );
}

/* -- Radio fieldset (used on /claim) ────────────────────────────────────── */

.ce-form__fieldset {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ce-form__radio-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--fg);
	cursor: pointer;
}

.ce-form__radio-label input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
	flex-shrink: 0;
}

/* -- Divider (used on /submit-series between event details and contact) ── */

.ce-form__divider {
	border: none;
	border-top: 1px solid var(--line);
	margin: 4px 0;
}

/* -- Required note ──────────────────────────────────────────────────────── */

.ce-form__req-note {
	color: var(--fg-4);
	font-size: 10px;
	margin: 0;
}

/* -- Form actions ───────────────────────────────────────────────────────── */

.ce-form__actions {
	display: flex;
	justify-content: flex-start;
	margin-top: 4px;
}

.ce-form__submit {
	padding: 13px 26px;
	font-size: 15px;
	min-height: 48px;
	width: 100%;
}

/* -- Honeypot (off-screen, NOT display:none so bots see it) ─────────────── */

.ce-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- Responsive ─────────────────────────────────────────────────────────── */

@media ( min-width: 640px ) {
	.ce-form-page {
		padding: calc( var(--density-pad) * 1.5 ) var(--density-pad);
	}

	.ce-form__submit {
		width: auto;
	}
}

@media ( min-width: 1024px ) {
	.ce-form-page {
		padding: 56px var(--density-pad);
	}
}