/* ==========================================================================
   Form pages — contact, IELTS registration, seminar registration.
   Field styles in components.css.
   ========================================================================== */

.form-card {
	display: grid;
	gap: var(--s-5);
	padding: clamp(24px, 4vw, 40px);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

.form-card h2 {
	margin: 0;
	font-size: var(--fs-2xl);
}

.form-card > .muted {
	margin: -12px 0 0;
}

.form-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 900px) {
	.form-layout { grid-template-columns: 1fr; }
}

.info-card {
	padding: var(--s-6);
	border-radius: var(--r-xl);
	background: var(--color-surface-2);
}

.info-card h2 {
	font-size: var(--fs-xl);
}

.info-list {
	display: grid;
	gap: var(--s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.info-list li {
	display: flex;
	gap: 14px;
}

.info-list .icon-wrap {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--color-surface);
	color: var(--color-primary-text);
	box-shadow: var(--shadow-sm);
}

.info-list strong {
	display: block;
	color: var(--color-heading);
}

.info-list p {
	margin: 2px 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.notice {
	display: flex;
	gap: 10px;
	margin-top: var(--s-5);
	padding: 14px 16px;
	border-radius: var(--r-md);
	background: var(--color-amber-soft);
	color: var(--color-amber-text);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.notice .icon {
	flex: none;
	margin-top: 2px;
}

/* File input */
.file-drop {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 24px;
	border: 2px dashed var(--color-border);
	border-radius: var(--r-lg);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	text-align: center;
	transition: border-color var(--dur), background-color var(--dur);
}

.file-drop:hover,
.file-drop:focus-within {
	border-color: var(--dli-green-500);
	background: var(--color-primary-soft);
}

.file-drop input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.file-drop strong {
	color: var(--color-heading);
}

.radio-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 10px;
}

.radio-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 14px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-md);
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--dur-fast), background-color var(--dur-fast);
}

.radio-card:has(input:checked) {
	border-color: var(--dli-green-500);
	background: var(--color-primary-soft);
}

.radio-card input {
	accent-color: var(--dli-green-600);
	width: 18px;
	height: 18px;
}