/**
 * Coach Hire Quote — front-end styles.
 * Self-contained so the form looks right in any theme, but it picks up the
 * host theme's brand colours automatically when they define --cl-brand.
 */
.chq {
	--chq-brand: var(--cl-brand, #0f3d3e);
	--chq-accent: var(--cl-accent, #c8d92a);
	--chq-ink: var(--cl-ink, #16202a);
	--chq-body: var(--cl-body, #4a5763);
	--chq-line: var(--cl-line, #e2e7ec);
	--chq-bg: #ffffff;
	--chq-radius: 10px;
	--chq-error: #c0392b;

	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.55;
	color: var(--chq-body);
}

.chq *, .chq *::before, .chq *::after { box-sizing: border-box; }

.chq__form {
	background: var(--chq-bg);
	border: 1px solid var(--chq-line);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 30px);
	margin: 0;
}

.chq--inline .chq__form { border-radius: 14px; }

.chq__head { margin-bottom: 20px; }
.chq__title { margin: 0 0 6px; font-size: 1.5rem; line-height: 1.2; color: var(--chq-ink); }
.chq__intro { margin: 0; font-size: .96rem; }

/* Journey type toggle */
.chq__toggle { border: 0; padding: 0; margin: 0 0 18px; }
.chq__toggle legend { padding: 0; }
.chq__toggle-group {
	display: inline-flex;
	padding: 4px;
	background: #f1f5f6;
	border-radius: 100px;
	gap: 4px;
}
.chq__toggle-option { position: relative; }
.chq__toggle-option input {
	position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%;
}
.chq__toggle-option span {
	display: block;
	padding: 9px 22px;
	border-radius: 100px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--chq-body);
	transition: background .18s ease, color .18s ease;
}
.chq__toggle-option input:checked + span { background: var(--chq-brand); color: #fff; }
.chq__toggle-option input:focus-visible + span { outline: 3px solid var(--chq-accent); outline-offset: 2px; }

/* Fields
   A four column grid, so one row holds either two wide fields (pick up and
   destination) or four narrow ones (the two dates and their times). */
.chq__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.chq__field { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; }
.chq__field--half { grid-column: span 2; }
.chq__field--quarter { grid-column: span 1; }

/* A field's own display rule beats the browser default for [hidden], so the
   return date and time need this to disappear on a one way journey. */
.chq .chq__field[hidden] { display: none; }

.chq__label {
	font-size: .87rem;
	font-weight: 600;
	color: var(--chq-ink);
	padding: 0;
}
.chq__req { color: var(--chq-error); }
.chq__help { font-size: .8rem; color: #7c8b96; }

.chq input[type="text"],
.chq input[type="email"],
.chq input[type="tel"],
.chq input[type="number"],
.chq input[type="date"],
.chq input[type="time"],
.chq select,
.chq textarea {
	width: 100%;
	font: inherit;
	font-size: .95rem;
	color: var(--chq-ink);
	background: #fff;
	padding: 12px 14px;
	border: 1px solid var(--chq-line);
	border-radius: var(--chq-radius);
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
	min-height: 46px;
}
.chq input[type="date"], .chq input[type="time"] { -webkit-appearance: none; }
.chq textarea { min-height: 100px; resize: vertical; }

.chq select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a5763' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.chq input:focus, .chq select:focus, .chq textarea:focus {
	outline: none;
	border-color: var(--chq-brand);
	box-shadow: 0 0 0 3px rgba(15, 61, 62, .12);
}

.chq .chq__field--error input,
.chq .chq__field--error select,
.chq .chq__field--error textarea { border-color: var(--chq-error); }

.chq__field-error { font-size: .8rem; color: var(--chq-error); font-weight: 600; }

/* Location suggestions
   The wrapper is added by the script, so a field without JS keeps its plain
   input and nothing here applies. */
.chq__ac { position: relative; }

.chq__ac-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--chq-line);
	border-radius: var(--chq-radius);
	box-shadow: 0 12px 28px rgba(16, 32, 42, .14);
}
.chq .chq__ac-list[hidden] { display: none; }

.chq__ac-item {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	margin: 0;
	border-radius: 6px;
	font-size: .92rem;
	line-height: 1.35;
	color: var(--chq-ink);
	cursor: pointer;
}
.chq__ac-item.is-active,
.chq__ac-item:hover { background: #f1f5f6; }

.chq__ac-main { font-weight: 600; }
.chq__ac-sub { font-size: .84rem; color: #7c8b96; }

.chq__ac-credit {
	padding: 6px 12px 4px;
	font-size: .72rem;
	color: #9aa7b1;
	text-align: right;
	cursor: default;
}

/* Consent checkbox */
.chq__check { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; cursor: pointer; }
.chq__check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--chq-brand); }

/* Actions */
.chq__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

.chq__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 14px 28px;
	border: 2px solid var(--chq-brand);
	border-radius: 100px;
	background: var(--chq-brand);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.chq__btn:hover { background: #092828; border-color: #092828; color: #fff; transform: translateY(-1px); }
.chq__btn--ghost { background: transparent; color: var(--chq-brand); }
.chq__btn--ghost:hover { background: var(--chq-brand); color: #fff; }
.chq__btn[disabled] { opacity: .6; cursor: progress; transform: none; }

.chq__smallprint { margin: 14px 0 0; font-size: .8rem; color: #7c8b96; }

/* Notices */
.chq__notice {
	border-radius: var(--chq-radius);
	padding: 14px 16px;
	margin-bottom: 18px;
	font-size: .9rem;
}
.chq__notice[hidden] { display: none; }
.chq__notice--error { background: #fdecea; color: #8f2018; border: 1px solid #f5c6c1; }
.chq__notice--warn { background: #fff8e5; color: #7a5c12; border: 1px dashed #e0c268; }
.chq__notice ul { margin: 0; padding-left: 18px; }
.chq__notice li { margin: 2px 0; }

.chq__success {
	background: #eef7ef;
	border: 1px solid #cfe6d4;
	border-radius: 16px;
	padding: 28px;
	text-align: center;
	margin-bottom: 18px;
}
.chq__success h3 { margin: 0 0 8px; color: var(--chq-ink); font-size: 1.35rem; }
.chq__success p { margin: 0 0 6px; }
.chq__success-icon {
	width: 52px; height: 52px; margin: 0 auto 14px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--chq-brand); color: #fff; font-size: 26px; line-height: 1;
}
.chq__ref { font-size: .92rem; }

/* Steps: only active once JS marks the form */
.chq__step { display: block; }
.chq--js .chq__step { display: none; }
.chq--js .chq__step.is-active { display: block; }

.chq__progress { display: flex; gap: 8px; margin-bottom: 18px; }
.chq__progress span {
	flex: 1; height: 4px; border-radius: 100px; background: var(--chq-line);
}
.chq__progress span.is-done { background: var(--chq-brand); }

/* Honeypot: hidden from people, present for bots */
.chq__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

/* Inline layout — the compact band under a homepage banner. Same grid, but the
   full width fields halve so the whole band stays one or two rows deep. */
.chq--inline .chq__field { grid-column: span 2; }
.chq--inline .chq__field--half { grid-column: span 2; }
.chq--inline .chq__field--quarter { grid-column: span 1; }
.chq--inline .chq__title { font-size: 1.3rem; }
.chq--inline .chq__actions { justify-content: flex-end; }

/* Banner overlap — the card lifted onto the banner above it. The wrapper needs
   to be the first thing in the section that follows the banner. */
.chq--overlap { position: relative; z-index: 3; margin-top: var(--chq-overlap, -250px); }
.chq--overlap .chq__form {
	border-color: transparent;
	box-shadow: 0 18px 45px rgba(16, 32, 42, .18);
}

/* Tablet: two columns. Wide fields pair up, the dates and times stay in twos. */
@media (max-width: 900px) {
	.chq__grid, .chq--inline .chq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chq__field, .chq--inline .chq__field { grid-column: 1 / -1; }
	.chq__field--half, .chq--inline .chq__field--half { grid-column: span 1; }
	.chq__field--quarter, .chq--inline .chq__field--quarter { grid-column: span 1; }
}

@media (max-width: 760px) {
	.chq--overlap { margin-top: 0; }
	.chq--overlap .chq__form { box-shadow: none; border-color: var(--chq-line); }
}

/* Phone: one field per row, except the dates and times which stay side by side
   — they are narrow enough, and stacking four of them buries the button. */
@media (max-width: 560px) {
	.chq__field, .chq__field--half,
	.chq--inline .chq__field, .chq--inline .chq__field--half { grid-column: 1 / -1; }
	.chq__actions { flex-direction: column-reverse; align-items: stretch; }
	.chq__btn { width: 100%; }
	.chq__toggle-group { display: flex; width: 100%; }
	.chq__toggle-option { flex: 1; }
	.chq__toggle-option span { text-align: center; padding: 11px 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.chq * { transition: none !important; }
}

/* -------------------------------------------------------------------------
   Free trial form
   ---------------------------------------------------------------------- */
.chq__section {
	margin: 26px 0 14px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--chq-ink);
}
.chq__section:first-child { margin-top: 0; }

/* The grid that follows a section heading starts flush against it. */
.chq__section + .chq__grid { margin-top: 0; }

.chq__field--captcha { margin-top: 4px; }
/* Google sizes the widget itself; let it shrink rather than overflow. */
.chq__field--captcha .g-recaptcha { max-width: 100%; overflow: hidden; }

.chq--trial .chq__check { font-size: .9rem; }
.chq--trial .chq__check a { color: var(--chq-brand); text-decoration: underline; }
.chq__note { margin: -6px 0 16px; font-size: .86rem; color: #7c8b96; }