/* ─── Quote Modal ───────────────────────────────────────────── */

.quote-modal-overlay {
	position:        fixed;
	inset:           0;
	z-index:         400;
	background:      rgba(0, 0, 0, 0.75);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px 16px;
	overflow-y:      auto;
	opacity:         0;
	visibility:      hidden;
	transition:      opacity 0.25s, visibility 0.25s;
}

.quote-modal-overlay.is-open {
	opacity:    1;
	visibility: visible;
}

.quote-modal {
	position:         relative;
	background:       var(--color-heading);
	width:            100%;
	max-width:        680px;
	padding:          48px 48px 40px;
	flex-shrink:      0;
	transform:        translateY(20px);
	transition:       transform 0.25s;
}

.quote-modal-overlay.is-open .quote-modal {
	transform: translateY(0);
}

/* ── Close button ── */
.quote-modal__close {
	position:   absolute;
	top:        16px;
	right:      20px;
	background: none;
	border:     none;
	color:      rgba(255,255,255,0.8);
	font-size:  1.8rem;
	line-height: 1;
	cursor:     pointer;
	padding:    0;
	transition: color 0.2s;
}

.quote-modal__close:hover { color: var(--color-text-light); }

/* ── Header ── */
.quote-modal__pretitle {
	display:        block;
	font-family:    var(--font-base);
	font-variant:   small-caps;
	font-size:      0.85rem;
	letter-spacing: 0.2em;
	color:          rgba(255,255,255,0.75);
	margin-bottom:  6px;
}

.quote-modal__title {
	font-family:    var(--font-base);
	font-weight:    var(--font-weight-head);
	font-size:      2.4rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--color-text-light);
	margin:         0 0 16px;
}

.quote-modal__divider {
	border:        none;
	border-top:    1px solid rgba(255,255,255,0.4);
	margin:        0 0 32px;
}

/* Spam trap: off-screen for people, still present for bots */
.quote-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Form layout ── */
.quote-form__row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   24px;
}

.quote-form__field { margin-bottom: 28px; }

.quote-form__field label {
	display:        block;
	font-family:    var(--font-base);
	font-size:      0.72rem;
	font-weight:    var(--font-weight-head);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          rgba(255,255,255,0.7);
	margin-bottom:  6px;
}

.quote-form__field input,
.quote-form__field textarea {
	width:            100%;
	background:       transparent;
	border:           none;
	border-bottom:    1px solid rgba(255,255,255,0.5);
	color:            var(--color-text-light);
	font-family:      var(--font-base);
	font-size:        0.92rem;
	padding:          8px 0;
	outline:          none;
	transition:       border-color 0.2s;
	-webkit-appearance: none;
}

.quote-form__field input::placeholder,
.quote-form__field textarea::placeholder {
	color: rgba(255,255,255,0.4);
}

.quote-form__field input:focus,
.quote-form__field textarea:focus {
	border-bottom-color: var(--color-text-light);
}

.quote-form__field textarea {
	resize:     vertical;
	min-height: 100px;
}

/* ── Bottom row: upload left, actions right ── */
.quote-form__bottom {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-end;
	gap:             24px;
	flex-wrap:       wrap;
	margin-top:      8px;
}

/* ── File upload ── */
.quote-form__upload { flex: 1; min-width: 200px; }

.quote-form__upload-input { display: none; }

.quote-form__upload-btn {
	display:        inline-block;
	padding:        8px 20px;
	border:         1px solid rgba(255,255,255,0.6);
	color:          var(--color-text-light);
	font-family:    var(--font-base);
	font-size:      0.78rem;
	font-weight:    var(--font-weight-head);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor:         pointer;
	transition:     background 0.2s, color 0.2s;
	margin-bottom:  10px;
	white-space:    nowrap;
}

.quote-form__upload-btn:hover {
	background: rgba(255,255,255,0.15);
}

.quote-form__upload-desc {
	font-size:   0.78rem;
	color:       rgba(255,255,255,0.7);
	line-height: 1.5;
	margin:      0 0 4px;
}

.quote-form__upload-helper {
	font-size:   0.72rem;
	color:       rgba(255,255,255,0.45);
}

.quote-form__upload-name {
	font-size:  0.78rem;
	color:      rgba(255,255,255,0.8);
	margin-top: 6px;
	font-style: italic;
}

/* ── reCAPTCHA + send ── */
.quote-form__actions {
	display:        flex;
	flex-direction: column;
	align-items:    flex-end;
	gap:            16px;
}

.quote-form__send {
	display:        inline-block;
	padding:        12px 36px;
	background:     transparent;
	border:         2px solid var(--color-text-light);
	color:          var(--color-text-light);
	font-family:    var(--font-base);
	font-weight:    var(--font-weight-head);
	font-size:      0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor:         pointer;
	transition:     background 0.2s, color 0.2s;
}

.quote-form__send:hover {
	background: var(--color-text-light);
	color:      var(--color-heading);
}

/* ── Success / error messages ── */
.quote-form__message {
	display:       none;
	padding:       14px 20px;
	font-size:     0.88rem;
	margin-bottom: 20px;
}

.quote-form__message--success {
	background: rgba(255,255,255,0.2);
	color:      var(--color-text-light);
}

.quote-form__message--error {
	background: rgba(200,50,50,0.35);
	color:      var(--color-text-light);
}

.quote-form__message.is-visible { display: block; }

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.quote-modal {
		padding: 40px 24px 32px;
	}

	.quote-modal__title { font-size: 1.8rem; }

	.quote-form__row { grid-template-columns: 1fr; gap: 0; }

	.quote-form__bottom {
		flex-direction: column;
		align-items:    flex-start;
	}

	.quote-form__actions { align-items: flex-start; width: 100%; }

	.quote-form__send { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
	.quote-modal-overlay { padding: 0; align-items: flex-start; }
	.quote-modal         { min-height: 100dvh; }
}