/**
 * File: assets/css/pages/quote/form.css
 * Description: Quote page form styles for Magida Creative Co.
 *
 * MAGIDA QUOTE PAGE PASS 12:
 * - Styles the secure Quote form, status notices, and mobile form layout.
 * - Keeps form controls scoped to the Quote page only.
 *
 * MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1:
 * - Tightens the bottom rhythm after the Quote form so the footer does not feel detached.
 *
 * MAGIDA INNER PAGE ATMOSPHERE FIX PASS 13.1:
 * - Replaces older color variable names with the current theme tokens.
 */

.magida-template--quote + .site-footer {
	/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Removes the global footer top gap only on the Quote page. */
	margin-top: 0;
}

.magida-quote-form-section {
	/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Overrides the generic quote-section spacing to remove the large empty area before the footer. */
	padding-top: clamp(76px, 8vw, 118px);
	padding-bottom: clamp(56px, 6vw, 84px);
	background:
		radial-gradient(
			circle at 20% 20%,
			rgba(0, 221, 255, 0.1),
			transparent 32%
		),
		radial-gradient(
			circle at 84% 70%,
			rgba(132, 94, 247, 0.12),
			transparent 32%
		),
		rgba(3, 6, 14, 0.58);
}

.magida-quote-form-layout {
	display: grid;
	grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(30px, 5vw, 76px);
}

.magida-quote-form-intro {
	position: sticky;
	top: 128px;
}

.magida-quote-form-intro .magida-button {
	margin-top: 34px;
}

.magida-quote-form-card {
	position: relative;
	padding: clamp(24px, 3vw, 42px);
	border: 1px solid rgba(185, 189, 229, 0.13);
	border-radius: 34px;
	background:
		linear-gradient(145deg, rgba(9, 13, 28, 0.94), rgba(4, 7, 16, 0.94)),
		radial-gradient(
			circle at 100% 0%,
			rgba(0, 221, 255, 0.12),
			transparent 34%
		);
	box-shadow: 0 28px 110px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.magida-quote-form-card::before {
	/* MAGIDA QUOTE PAGE PASS 12: Quiet glow frame for the form container. */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(
		135deg,
		rgba(0, 221, 255, 0.12),
		transparent 35%,
		rgba(132, 94, 247, 0.1)
	);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	padding: 1px;
	mask-composite: exclude;
	-webkit-mask-composite: xor;
}

.magida-quote-notice {
	position: relative;
	z-index: 1;
	margin-bottom: 26px;
	padding: 18px 20px;
	border-radius: 20px;
	background: rgba(8, 13, 27, 0.78);
}

.magida-quote-notice--success {
	border: 1px solid rgba(0, 221, 255, 0.32);
}

.magida-quote-notice--error {
	border: 1px solid rgba(255, 92, 122, 0.38);
}

.magida-quote-notice strong {
	display: block;
	color: var(--magida-text);
	font-family: var(--magida-font-heading);
	font-weight: 900;
	letter-spacing: -0.02em;
}

.magida-quote-notice p {
	margin: 6px 0 0;
	color: var(--magida-text-soft);
	line-height: 1.6;
}

.magida-quote-form {
	position: relative;
	z-index: 1;
}

.magida-quote-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.magida-quote-field {
	margin: 0;
}

.magida-quote-field--full {
	margin-top: 18px;
}

.magida-quote-field label,
.magida-quote-consent {
	color: var(--magida-text-soft);
	font-family: var(--magida-font-heading);
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.magida-quote-field label {
	display: block;
	margin-bottom: 10px;
}

.magida-quote-field label span {
	color: var(--magida-cyan);
}

.magida-quote-field input,
.magida-quote-field select,
.magida-quote-field textarea {
	width: 100%;
	min-height: 56px;
	padding: 15px 16px;
	border: 1px solid rgba(185, 189, 229, 0.16);
	border-radius: 18px;
	background: rgba(4, 7, 16, 0.72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	color: var(--magida-text);
	font: inherit;
	transition:
		border-color 0.22s ease,
		box-shadow 0.22s ease,
		background 0.22s ease;
}

.magida-quote-field textarea {
	min-height: 180px;
	resize: vertical;
}

.magida-quote-field select {
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--magida-cyan) 50%),
		linear-gradient(135deg, var(--magida-cyan) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) 50%,
		calc(100% - 14px) 50%;
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
}

.magida-quote-field input:focus,
.magida-quote-field select:focus,
.magida-quote-field textarea:focus {
	outline: none;
	border-color: rgba(0, 221, 255, 0.58);
	background: rgba(6, 11, 24, 0.9);
	box-shadow: 0 0 0 4px rgba(0, 221, 255, 0.1);
}

.magida-quote-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	line-height: 1.55;
	letter-spacing: 0.07em;
	text-transform: none;
}

.magida-quote-consent input {
	width: 18px;
	min-width: 18px;
	height: 18px;
	margin-top: 3px;
	accent-color: var(--magida-cyan);
}

.magida-quote-form__submit {
	margin-top: 28px;
}

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

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

	.magida-quote-form-intro {
		position: relative;
		top: auto;
	}
}

@media (max-width: 720px) {
	.magida-quote-form-section {
		/* MAGIDA QUOTE VISUAL RESTORE PASS 12.1.1: Keeps the mobile form-to-footer spacing tighter as well. */
		padding-top: 64px;
		padding-bottom: 56px;
	}

	.magida-quote-form__grid {
		grid-template-columns: 1fr;
	}

	.magida-quote-form-card {
		border-radius: 28px;
	}

	.magida-quote-form__submit {
		width: 100%;
		justify-content: center;
	}
}

/* MAGIDA PASS 24.1.42 — Quote Process Line, Media Scale, and Form Rhythm Polish
   Pulls the conversion form closer to the supporting process image without touching global page spacing. */
.magida-quote-form-section {
	padding-top: clamp(46px, 5vw, 72px);
}

@media (max-width: 760px) {
	.magida-quote-form-section {
		padding-top: 42px;
	}
}