/**
 * EstimatIQ — Estimate Request Form
 * Frontend CSS (style-index.css / style.scss)
 *
 * Uses CSS custom properties so the form inherits the site's
 * color scheme. Override variables in your theme's CSS for
 * custom branding.
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
.esq-form-wrapper {
	--esq-color-bg:         #ffffff;
	--esq-color-border:     #d1d5db;
	--esq-color-text:       #111827;
	--esq-color-label:      #374151;
	--esq-color-muted:      #6b7280;
	--esq-color-primary:    #2563eb;
	--esq-color-primary-fg: #ffffff;
	--esq-color-error:      #b91c1c;
	--esq-color-error-bg:   #fef2f2;
	--esq-color-success:    #166534;
	--esq-color-success-bg: #f0fdf4;
	--esq-radius:           0.5rem;
	--esq-gap:              1rem;

	box-sizing: border-box;
	max-width: 640px;
	margin-left:  auto;
	margin-right: auto;
	font-family: inherit;
	color: var(--esq-color-text);
}

/* ── Titles ─────────────────────────────────────────────────────────────────── */
.esq-form-title {
	font-size:   1.5rem;
	font-weight: 700;
	line-height: 1.25;
	margin:      0 0 0.5rem;
}

.esq-form-subtitle {
	color:         var(--esq-color-muted);
	margin:        0 0 1.5rem;
}

/* ── Fields ─────────────────────────────────────────────────────────────────── */
.esq-form {
	display:        flex;
	flex-direction: column;
	gap:            var(--esq-gap);
}

.esq-field-row {
	display: grid;
	gap:     var(--esq-gap);
	grid-template-columns: 1fr;
}

@media ( min-width: 540px ) {
	.esq-field-row {
		grid-template-columns: 1fr 1fr;
	}
}

.esq-field {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

.esq-field label {
	font-size:   0.875rem;
	font-weight: 500;
	color:       var(--esq-color-label);
}

.esq-field label span[aria-hidden] {
	color: var(--esq-color-error);
	margin-left: 2px;
}

.esq-field input,
.esq-field select,
.esq-field textarea {
	width:         100%;
	padding:       0.625rem 0.75rem;
	font-size:     1rem;
	font-family:   inherit;
	line-height:   1.5;
	border:        1px solid var(--esq-color-border);
	border-radius: var(--esq-radius);
	background:    var(--esq-color-bg);
	color:         var(--esq-color-text);
	box-sizing:    border-box;
	transition:    border-color 0.15s, box-shadow 0.15s;
}

.esq-field input:focus,
.esq-field select:focus,
.esq-field textarea:focus {
	outline:      none;
	border-color: var(--esq-color-primary);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--esq-color-primary) 20%, transparent);
}

.esq-field input::placeholder,
.esq-field textarea::placeholder {
	color: var(--esq-color-muted);
}

.esq-field textarea {
	resize:   vertical;
	min-height: 100px;
}

/* ── Honeypot (visually hidden but accessible) ──────────────────────────────── */
.esq-hp {
	position:   absolute;
	left:       -9999px;
	width:      1px;
	height:     1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* ── Submit button ──────────────────────────────────────────────────────────── */
.esq-submit {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            100%;
	padding:          0.75rem 1.5rem;
	font-size:        1rem;
	font-weight:      600;
	font-family:      inherit;
	border:           none;
	border-radius:    var(--esq-radius);
	background:       var(--esq-color-primary);
	color:            var(--esq-color-primary-fg);
	cursor:           pointer;
	transition:       background 0.15s, opacity 0.15s, transform 0.1s;
}

.esq-submit:hover:not(:disabled) {
	background: color-mix(in srgb, var(--esq-color-primary) 85%, #000);
}

.esq-submit:active:not(:disabled) {
	transform: scale(0.98);
}

.esq-submit:disabled {
	opacity: 0.65;
	cursor:  not-allowed;
}

/* ── Error message ──────────────────────────────────────────────────────────── */
.esq-error-msg {
	padding:          0.75rem 1rem;
	border-radius:    var(--esq-radius);
	background:       var(--esq-color-error-bg);
	color:            var(--esq-color-error);
	font-size:        0.875rem;
	border:           1px solid color-mix(in srgb, var(--esq-color-error) 30%, transparent);
}

/* ── Success message ────────────────────────────────────────────────────────── */
.esq-success {
	padding:       1.5rem;
	border-radius: var(--esq-radius);
	background:    var(--esq-color-success-bg);
	color:         var(--esq-color-success);
	text-align:    center;
	font-weight:   500;
	border:        1px solid color-mix(in srgb, var(--esq-color-success) 30%, transparent);
}

/* ── Mapbox address autocomplete dropdown ────────────────────────────────────── */

/* The .esq-field wrapping the address input needs relative positioning
   so the absolutely-positioned dropdown aligns under the input. */
.esq-field:has( #esq_address ) {
	position: relative;
}

/* Fallback for browsers without :has() */
.esq-field--address {
	position: relative;
}

.esq-address-dropdown {
	display:          none; /* shown by JS when results arrive */
	position:         absolute;
	top:              calc(100% + 4px);
	left:             0;
	right:            0;
	z-index:          9999;
	margin:           0;
	padding:          0.375rem 0;
	list-style:       none;
	background:       #ffffff;
	border:           1px solid var(--esq-color-border);
	border-radius:    var(--esq-radius);
	box-shadow:       0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
	max-height:       260px;
	overflow-y:       auto;
	overscroll-behavior: contain;
}

.esq-address-option {
	display:    flex;
	flex-direction: column;
	gap:        0.125rem;
	padding:    0.5rem 0.875rem;
	cursor:     pointer;
	transition: background 0.1s;
	user-select: none;
}

.esq-address-option:hover,
.esq-address-option--active {
	background: color-mix(in srgb, var(--esq-color-primary) 8%, transparent);
}

.esq-address-main {
	font-size:   0.9375rem;
	font-weight: 500;
	color:       var(--esq-color-text);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.esq-address-context {
	font-size: 0.8125rem;
	color:     var(--esq-color-muted);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}