/**
 * The searchable pickup state and city.
 *
 * selectWoo renders its own markup in place of the control it replaces, so without
 * this the two trip forms would each show a third field style beside their own. Each
 * block below takes the appearance of the form it sits in.
 *
 * The two radii are deliberate and are recorded in CLAUDE.md as the agreed exceptions
 * to the site's square-field rule: the hero glass form at 12px and the header quote
 * modal at 10px. No new radius is introduced here and --wd-form-brd-radius is not
 * touched — these are the two forms that do not read it.
 */

/*
 * Scoped by the owning form rather than by a class on the container.
 * selectWoo's `containerCssClass` lands on .select2-selection--single, not on
 * .select2-container — measured, after the first version of this file matched
 * nothing at all and the modal's controls kept selectWoo's default 4px corners.
 */

/* Shared: selectWoo's own chrome, which suits neither form as it ships. */
.select2-selection--single.cri-quote-field {
	height: auto;
	border: 0;
	background: transparent;
	outline: none;
}

.select2-selection--single.cri-quote-field .select2-selection__rendered {
	padding: 0;
	line-height: inherit;
	color: inherit;
}

.select2-selection--single.cri-quote-field .select2-selection__arrow {
	height: 100%;
}

.cri-quote-dropdown .select2-results__option {
	padding: 8px 12px;
}

/* The dropdown must clear the header modal's overlay. */
.cri-quote-dropdown.select2-dropdown {
	z-index: 100000;
}

/*
 * The hero glass form.
 *
 * Its fields are a wrapper (.field) holding an icon, a label and the control, so the
 * replaced control keeps the wrapper's own border and background and contributes only
 * its text. Full width, because the wrapper already sets the field's size.
 */
.ahn-glass-booking-form .select2-container {
	width: 100% !important;
	min-width: 0;
}

.ahn-glass-booking-form .field .select2-selection--single {
	height: auto;
	padding: 0;
	border-radius: 12px;
}

.ahn-glass-booking-form .field .select2-selection__rendered {
	font: inherit;
	color: inherit;
}

/*
 * The header quote modal.
 *
 * Its fields are bordered controls in their own right rather than a styled wrapper, so
 * here the replaced control carries the border, the background and the height.
 */
.rcli-quote-modal .crifrmflds .select2-container {
	width: 100% !important;
}

.rcli-quote-modal .crifrmflds .select2-selection--single {
	height: 44px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
}

.rcli-quote-modal .crifrmflds .select2-container--focus .select2-selection--single,
.rcli-quote-modal .crifrmflds .select2-container--open .select2-selection--single {
	border-color: #0d6efd;
}

.rcli-quote-modal .crifrmflds .select2-selection__arrow {
	right: 8px;
}

/* The search box inside either dropdown, so typing looks like the form it came from. */
.cri-quote-dropdown .select2-search--dropdown .select2-search__field {
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 8px;
}

/*
 * Trip dates are chosen from the calendar, never typed — quote-form.js refuses the
 * keys — so the field should not invite typing. The caret is hidden and the whole
 * field reads as something to click, which is also the larger target the click
 * handler makes available.
 */
.ahn-glass-booking-form input[type="date"],
.rcli-quote-modal input[type="date"] {
	cursor: pointer;
	caret-color: transparent;
}

.ahn-glass-booking-form .field:has(input[type="date"]),
.rcli-quote-modal .crifrmflds:has(input[type="date"]) label {
	cursor: pointer;
}

/*
 * The city control while its state's cities are being fetched.
 *
 * Defined once for both forms: the field chrome differs between them deliberately
 * (12px in the hero form, 10px in the modal) but a spinner has no reason to.
 *
 * The spinner is absolutely positioned, so showing it cannot change the field's
 * height and shift the rows below it.
 */
.ahn-glass-booking-form .select2-container.is-busy .select2-selection--single,
.rcli-quote-modal .select2-container.is-busy .select2-selection--single {
	position: relative;
	opacity: 0.65;
	cursor: progress;
}

/*
 * Keep the text out from under the spinner. Without this the rendered text box runs
 * to the control's right edge and overlaps the spinner's 16px — invisible with a
 * short message, not with a long city name still showing behind it.
 */
.ahn-glass-booking-form .select2-container.is-busy .select2-selection__rendered,
.rcli-quote-modal .select2-container.is-busy .select2-selection__rendered {
	padding-right: 34px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* selectWoo's arrow would sit under the spinner. */
.ahn-glass-booking-form .select2-container.is-busy .select2-selection__arrow,
.rcli-quote-modal .select2-container.is-busy .select2-selection__arrow {
	visibility: hidden;
}

.ahn-glass-booking-form .select2-container.is-busy .select2-selection--single::after,
.rcli-quote-modal .select2-container.is-busy .select2-selection--single::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.7;
	animation: cri-quote-spin 0.6s linear infinite;
}

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

/*
 * Asked for reduced motion: the indication stays, the spinning stops. A dashed ring
 * still reads as "working" without moving.
 */
@media (prefers-reduced-motion: reduce) {
	.ahn-glass-booking-form .select2-container.is-busy .select2-selection--single::after,
	.rcli-quote-modal .select2-container.is-busy .select2-selection--single::after {
		animation: none;
		border-style: dashed;
		border-top-color: currentColor;
	}
}