/**
 * ─────────────────────────────────────────────────────────────────────────────
 * FILE: assets/css/booking-form.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Styles for the "Get A Moving Quote" Elementor widget.
 *
 * Design notes:
 *  - Mirrors the clean, card-based design shown in the reference screenshot.
 *  - Uses CSS custom properties (variables) so colours can be overridden
 *    easily by a child theme or via Elementor's Style controls.
 *  - Selectors are prefixed with .bi- to avoid clashes with theme styles.
 *  - No !important is used; specificity is kept intentionally low.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── CSS Custom Properties (design tokens) ──────────────────────────────── */
.bi-booking-wrapper {
	--bi-primary:        #9e8671;   /* Warm taupe — the CTA button colour      */
	--bi-primary-hover:  #7d6a57;   /* Slightly darker on hover                */
	--bi-text:           #2d2d2d;   /* Main text colour                        */
	--bi-label:          #444444;   /* Field label colour                      */
	--bi-border:         #d9d9d9;   /* Input/select border colour              */
	--bi-border-focus:   #9e8671;   /* Focus ring colour (matches primary)     */
	--bi-bg-field:       #ffffff;   /* Input background                        */
	--bi-bg-card:        #ffffff;   /* Card background                         */
	--bi-placeholder:    #aaaaaa;   /* Placeholder text                        */
	--bi-pin-color:      #555555;   /* Address pin icon colour                 */
	--bi-radius:         6px;       /* Border radius for inputs & selects      */
	--bi-radius-card:    12px;      /* Border radius for the form card         */
	--bi-font:           inherit;   /* Inherits the active theme's font        */
	--bi-shadow:         0 4px 24px rgba(0,0,0,0.10);
	--bi-error-color:    #d0021b;
	--bi-success-color:  #2e7d32;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.bi-booking-wrapper {
	font-family: var(--bi-font);
	color:        var(--bi-text);
	box-sizing:   border-box;
}

/* All descendant elements use border-box so padding doesn't break layouts */
.bi-booking-wrapper *,
.bi-booking-wrapper *::before,
.bi-booking-wrapper *::after {
	box-sizing: inherit;
}

/* ── Form Card ────────────────────────────────────────────────────────────── */
.bi-form-card {
	background:    var(--bi-bg-card);
	border-radius: var(--bi-radius-card);
	box-shadow:    var(--bi-shadow);
	padding:       32px 28px 28px;
	max-width:     560px;       /* Matches the reference screenshot width      */
	margin:        0 auto;      /* Centre horizontally when narrower than page */
}

/* ── Form Heading ─────────────────────────────────────────────────────────── */
.bi-form-heading {
	font-size:   1.3rem;
	font-weight: 700;
	color:       var(--bi-text);
	margin:      0 0 22px;
	padding:     0;
	line-height: 1.3;
}

/* ── Field Group (label + input/select stack) ─────────────────────────────── */
.bi-field-group {
	margin-bottom: 16px;
}

/* Remove bottom margin from the last group before the button */
.bi-field-group:last-of-type {
	margin-bottom: 0;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
.bi-label {
	display:       block;
	font-size:     0.82rem;
	font-weight:   500;
	color:         var(--bi-label);
	margin-bottom: 6px;
	letter-spacing: 0.01em;
}

/* ── Text Inputs ──────────────────────────────────────────────────────────── */
.bi-input {
	width:         100%;
	height:        44px;
	padding:       0 14px;
	border:        1px solid var(--bi-border);
	border-radius: var(--bi-radius);
	background:    var(--bi-bg-field);
	color:         var(--bi-text);
	font-size:     0.92rem;
	font-family:   var(--bi-font);
	outline:       none;
	transition:    border-color 0.18s ease, box-shadow 0.18s ease;
	appearance:    none;
	-webkit-appearance: none;
}

.bi-input::placeholder {
	color:   var(--bi-placeholder);
	opacity: 1; /* Firefox sets this to 0.54 by default */
}

.bi-input:focus {
	border-color: var(--bi-border-focus);
	box-shadow:   0 0 0 3px rgba(158, 134, 113, 0.18);
}

/* Input with left padding for an icon (pin or calendar) */
.bi-input-padded {
	padding-left: 40px; /* Makes room for the icon positioned absolutely */
}

/* ── Select Dropdowns ─────────────────────────────────────────────────────── */
.bi-select-wrap {
	position: relative; /* Positions the custom chevron icon */
}

.bi-select {
	width:         100%;
	height:        44px;
	padding:       0 38px 0 14px; /* Right padding keeps text clear of chevron */
	border:        1px solid var(--bi-border);
	border-radius: var(--bi-radius);
	background:    var(--bi-bg-field);
	color:         var(--bi-text);
	font-size:     0.92rem;
	font-family:   var(--bi-font);
	outline:       none;
	cursor:        pointer;
	appearance:    none;        /* Remove native browser arrow */
	-webkit-appearance: none;
	transition:    border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Style for the default "Select" option so it looks like a placeholder */
.bi-select option[value=""] {
	color: var(--bi-placeholder);
}

.bi-select:focus {
	border-color: var(--bi-border-focus);
	box-shadow:   0 0 0 3px rgba(158, 134, 113, 0.18);
}

/* Custom chevron icon positioned inside the select */
.bi-select-chevron {
	position:       absolute;
	right:          12px;
	top:            50%;
	transform:      translateY(-50%);
	pointer-events: none; /* Clicks pass through to the select element */
	color:          #888;
	display:        flex;
	align-items:    center;
}

/* ── Two-column Row (Phone Number + Phone Type) ───────────────────────────── */
.bi-field-row {
	display:   flex;
	gap:       12px;
	margin-bottom: 16px;
}

/* Phone Number takes all remaining space */
.bi-field-grow {
	flex:       1 1 auto;
	margin-bottom: 0; /* Row handles the bottom margin */
}

/* Phone Type has a fixed min-width so it doesn't shrink too much */
.bi-field-fixed {
	flex:       0 0 160px;
	margin-bottom: 0;
}

/* Responsive: stack the two-column row on narrow viewports */
@media (max-width: 480px) {
	.bi-field-row {
		flex-direction: column;
	}
	.bi-field-fixed {
		flex: 1 1 auto;
	}
}

/* ── Address Fields (with pin icon) ──────────────────────────────────────── */
.bi-input-wrap {
	position: relative;
}

/* Pin icon sits inside the input on the left */
.bi-pin-icon {
	position:       absolute;
	left:           12px;
	top:            50%;
	transform:      translateY(-50%);
	color:          var(--bi-pin-color);
	pointer-events: none;
	display:        flex;
	align-items:    center;
}

/* ── Date field calendar icon ─────────────────────────────────────────────── */
.bi-date-wrap .bi-input {
	/* Leave right padding for the icon and also ensure native icon doesn't clash */
	padding-right: 42px;
}

.bi-date-icon {
	position:       absolute;
	right:          12px;
	top:            50%;
	transform:      translateY(-50%);
	color:          #888;
	pointer-events: none;
	display:        flex;
	align-items:    center;
}

/* ── Error Highlighting ───────────────────────────────────────────────────── */
.bi-input.bi-error,
.bi-select.bi-error {
	border-color: var(--bi-error-color);
	box-shadow:   0 0 0 3px rgba(208, 2, 27, 0.12);
}

/* ── Message area (error / success) ──────────────────────────────────────── */
.bi-message {
	padding:       12px 16px;
	border-radius: var(--bi-radius);
	font-size:     0.88rem;
	line-height:   1.5;
	margin:        16px 0 0;
}

.bi-message.bi-message--error {
	background: #fff0f0;
	color:      var(--bi-error-color);
	border:     1px solid #ffb3b3;
}

.bi-message.bi-message--success {
	background: #f0fff4;
	color:      var(--bi-success-color);
	border:     1px solid #a3d9a5;
}

/* ── Submit Button ────────────────────────────────────────────────────────── */
.bi-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	width:           100%;
	height:          52px;
	margin-top:      22px;
	padding:         0 24px;
	background:      var(--bi-primary);
	color:           #ffffff;
	font-size:       1rem;
	font-weight:     600;
	font-family:     var(--bi-font);
	letter-spacing:  0.02em;
	border:          none;
	border-radius:   var(--bi-radius);
	cursor:          pointer;
	transition:      background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.bi-submit-btn:hover {
	background:  var(--bi-primary-hover);
	box-shadow:  0 4px 12px rgba(158, 134, 113, 0.35);
}

.bi-submit-btn:active {
	transform: translateY(1px);
}

/* Disabled state while the AJAX request is in flight */
.bi-submit-btn:disabled {
	opacity: 0.72;
	cursor:  not-allowed;
}

/* ── Loading Spinner (CSS-only) ───────────────────────────────────────────── */
.bi-btn-spinner {
	width:        18px;
	height:       18px;
	border:       2px solid rgba(255,255,255,0.4);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation:    bi-spin 0.7s linear infinite;
}

@keyframes bi-spin {
	to { transform: rotate(360deg); }
}

/* ── Success state: hide the form, show a full-card success message ───────── */
.bi-form-card.bi-submitted .bi-booking-form {
	display: none;
}

.bi-success-card {
	text-align: center;
	padding:    20px 0 10px;
}

.bi-success-card .bi-success-icon {
	font-size:     3rem;
	margin-bottom: 12px;
	display:       block;
}

.bi-success-card p {
	font-size:   1rem;
	color:       var(--bi-success-color);
	line-height: 1.6;
}