.cq-app {
    --cq-ink: #1C1C1C;
    --cq-ink-soft: #6B6B68;
    --cq-bg: #FFFFFF;
    --cq-panel: #FFFFFF;
    --cq-border: #d0d2d299;
    --cq-accent: #1C1C1C;
    --cq-accent-soft: #F5F5F5;
    --cq-accent-border: #1C1C1C;
    --cq-hover: #F3F3F3;
    --cq-radius: 0px;
    --cq-radius-sm: 8px;
    --cq-font: "Manrope", sans-serif;
    font-family: var(--cq-font);
    color: var(--cq-ink);
    background: var(--cq-bg);
    border: none;
    border-radius: 0;
    max-width: none;
    margin: 0;
    overflow: visible;
    display: flex;
    padding: 20px;
	background-color: var(--cq-accent-soft);
	position: relative;
}

header, footer {
	display: none !important;
}

.cq-sidebar {
    width: 250px;
    padding-right: 25px;
	position: relative;
	transition: all ease .3s;
}

.cq-panel-area {
    width: calc(100% - 250px);
    border: 1px solid var(--cq-border);
    border-radius: 8px;
    overflow: hidden;
}

.cq-brand-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--cq-border);
    padding-bottom: 10px;
}

.cq-brand-header .logo {
	display: block;
    width: 160px;
	margin: auto;
}

.cq-brand-header .logo img {
	width: 100%;
}

.cq-brand-badge {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--cq-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cq-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.cq-brand-name {
	font-size: 14px;
	font-weight: 700;
}

.cq-sidebar .menu ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
	gap: 4px;
	margin-top: 4px;
}

.cq-sidebar .menu ul li.menu-item a {
	color: var(--cq-ink);
	font-size: 14px;
    line-height: 21px;
    font-weight: 700;
    display: flex;
    align-items: center;
	padding: 8px 14px;
    border-radius: 8px;
	transition: all ease .3s;
}

.cq-sidebar .menu ul li.menu-item a i {
    font-size: 18px;
    width: 30px;
}

.cq-sidebar .menu ul li.menu-item a:hover,
.cq-sidebar .menu ul li.menu-item.current-menu-item a {
    background-color: var(--cq-accent);
    color: #fff;
}

.cq-sidebar .menu ul li.menu-item.current-menu-item a {
    font-weight: 800;
}

.cq-brand-sub {
	font-size: 12px;
	color: var(--cq-ink-soft);
}

.cq-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 28px;
	border-bottom: 1px solid var(--cq-border);
	background: var(--cq-panel);
	font-size: 13px;
	height: 44px;
}

.cq-breadcrumb svg,
.cq-sidebar svg {
	display: none !important;
	width: 18px;
	height: 18px;
	margin: -1px 5px 0 0;
	cursor: pointer;
}

.cq-crumb {
	color: #A8A6A1;
}

.cq-crumb:not(:last-child)::after {
	content: '\203A';
	margin-left: 6px;
	color: #B4B2A9;
	font-weight: 600;
}

.cq-crumb.is-active {
	color: var(--cq-ink);
	font-weight: 600;
}

.cq-crumb.is-done {
	color: var(--cq-ink-soft);
}

.cq-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.cq-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	background-color: #fff;
}

@media (max-width: 880px) {
	.cq-body {
		display: flex;
		flex-direction: column-reverse;
	}
}

.cq-panel {
    padding: 20px 28px 90px;
    background: var(--cq-bg);
    position: relative;
    height: calc(100vh - 86px);
    overflow: auto;
	scrollbar-width: thin;
    scrollbar-color: var(--cq-hover) transparent;
}

.cq-panel[data-step="done"] {
    height: calc(100vh - 42px);
}

.cq-panel::-webkit-scrollbar {
    width: 6px;
}

.cq-panel::-webkit-scrollbar-track {
    background: transparent;
}

.cq-panel::-webkit-scrollbar-thumb {
    background: var(--cq-hover);
    border-radius: 10px;
	opacity: 0.8 !important;
}

.cq-panel::-webkit-scrollbar-thumb:hover {
    background: var(--cq-hover);
}

.cq-panel::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.cq-page-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.cq-stops-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 16px;
}

.cq-stop-card {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all ease .3s;
    position: relative;
    margin-bottom: 16px;
}

.cq-stop-card::after {
    content: '';
    position: absolute;
    left: 39px;
    top: 93%;
    width: 2px;
    height: 40px;
    background-color: var(--cq-ink);
}

.cq-stop-card:last-child::after {
    height: 20px;
}

.cq-stop-card.is-dragging {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	border-color: var(--cq-ink-soft);
	opacity: 0.85;
}

.cq-stop-card.is-drop-target {
	border-color: var(--cq-ink);
}

.cq-drag-handle {
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    width: 20px;
    height: 20px;
	margin-top: 15px;
}

.cq-drag-handle:active {
	cursor: grabbing;
}

.cq-stop-badge {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--cq-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 15px;
}

.cq-stop-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cq-stop-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cq-ink-soft);
}

.cq-stop-input {
    font-family: var(--cq-font);
    font-size: 15px;
    font-weight: 600;
    outline: none;
    background: transparent;
    color: var(--cq-ink);
    padding: 8px 12px !important;
    width: 100% !important;
    border-radius: 4px !important;
}

.cq-stop-card:hover .cq-stop-input {
	background-color: var(--cq-hover);
}

.cq-stop-input::placeholder {
	color: #B4B2A9;
	font-weight: 400;
}

.cq-stop-remove {
    background: none !important;
    border: none;
    color: #B4B2A9;
    font-size: 20px;
    cursor: pointer !important;
    flex-shrink: 0;
    line-height: 1;
    transition: color 0.15s ease;
    padding: 0;
    margin-top: 15px;
}

.cq-stop-remove:hover {
	color: #CC0000;
}

.cq-stop-card.cq-field-error,
.cq-input.cq-field-error {
	border-color: #D64545 !important;
	background: #FCEEEE;
}

input[type="date"].cq-input {
    padding-right: 10px !important;
    cursor: pointer;
}

.iti {
    width: 100%;
}
.iti__flag-container {
    border-right: 1px solid var(--cq-border);
}
.iti__selected-dial-code {
    font-family: var(--cq-font);
    font-size: 14px;
    color: var(--cq-ink);
}

select.cq-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
    cursor: pointer;
}

.cq-add-stop {
    font-family: var(--cq-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--cq-ink) !important;
    cursor: pointer !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    left: 30px;
    top: -10px;
    background-color: transparent !important;
}

.cq-add-stop .cq-stop-badge {
    margin: 0;
}

.cq-add-stop:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.cq-add-stop-row {
    position: relative;
}
.cq-tooltip-wrap {
    position: absolute;
    display: inline-flex;
    top: -9px;
}
.cq-tooltip-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #1C1C1C;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}
.cq-tooltip-text {
    display: none;
    position: absolute;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    background: #1C1C1C;
    color: #fff;
    font-size: 12px;
	font-weight: 800;
    padding: 7px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}
.cq-tooltip-wrap:hover .cq-tooltip-text {
    display: block;
}

.cq-stops-fineprint {
	text-align: left;
	margin-top: 8px;
	margin-bottom: 20px;
}

.cq-toast-wrap {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 320px;
}

.cq-toast {
	background: var(--cq-ink);
	color: #fff;
	border-radius: 8px;
	padding: 10px 16px;
	font-family: var(--cq-font);
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	opacity: 1;
	transform: translateY(8px);
	transition: all ease .3s;
}

.cq-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cq-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
}

.cq-card {
	background: var(--cq-panel);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-sm);
	padding: 20px 22px;
	margin-bottom: 16px;
}

.cq-card.cq-handling-card {
    margin-top: 20px;
}

.cq-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
}

.cq-card.cq-handling-card .cq-card-title {
    margin-bottom: 5px;
}

.cq-card-subtitle {
	font-size: 13px;
	color: var(--cq-ink-soft);
	margin: 0 0 16px;
}

.cq-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--cq-border);
	cursor: pointer;
}

.cq-toggle-row-tight {
	border-bottom: none;
	padding-top: 16px;
}

.cq-toggle-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cq-toggle-text strong {
	font-size: 14px;
	font-weight: 600;
}

.cq-toggle-text small {
	font-size: 12px;
	color: var(--cq-ink-soft);
}

.cq-switch {
	position: relative;
	width: 40px;
	height: 24px;
	flex-shrink: 0;
}

.cq-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.cq-switch-track {
	position: absolute;
	inset: 0;
	background: #D3D1C7;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.cq-switch-track::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.cq-switch input:checked+.cq-switch-track {
	background: var(--cq-ink);
}

.cq-switch input:checked+.cq-switch-track::before {
	transform: translateX(16px);
}

.cq-segment-group {
	padding-top: 14px;
	border-top: 1px solid var(--cq-border);
}

.cq-label-static {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}

.cq-segment-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (max-width: 767px) {
	.cq-segment-row {
		grid-template-columns: 1fr;
	}
}

.cq-segment {
	font-family: var(--cq-font);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 12px;
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-sm);
	background: var(--cq-panel);
	color: var(--cq-ink) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cq-segment:hover {
	background: var(--cq-hover);
}

.cq-segment.is-active {
    border-color: var(--cq-ink);
    background: var(--cq-ink);
    color: #fff !important;
	font-weight: 800;
}

.cq-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
	.cq-vehicle-grid {
		grid-template-columns: 1fr;
	}
}

.cq-vehicle-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--cq-panel);
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius-sm);
    cursor: pointer;
    text-align: left;
    transition: all ease .3s;
    position: relative;
    box-sizing: border-box;
}

.cq-vehicle-card:hover {
	background: var(--cq-hover);
}

.cq-vehicle-card.is-selected {
	border-color: var(--cq-ink);
	background: var(--cq-panel);
}

.cq-vehicle-icon-wrap {
    width: 80px;
    height: 60px;
}

.cq-vehicle-icon-wrap .cq-vehicle-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cq-vehicle-name {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 2px;
	color: var(--cq-ink) !important;
}

.cq-vehicle-desc {
	font-size: 10px;
	color: var(--cq-ink-soft);
	white-space: normal;
	margin-bottom: 2px;
	line-height: 1.4;
}

.cq-vehicle-max {
	font-size: 10px;
	font-weight: 600;
	color: #A8A6A1;
	margin-bottom: 0;
}

.cq-fineprint {
	font-size: 12px;
	color: var(--cq-ink-soft);
	text-align: center;
	line-height: 1.5;
}

.cq-timing-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cq-timing-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--cq-panel);
    border: 1px solid var(--cq-border);
    cursor: pointer;
    text-align: left;
    font-family: var(--cq-font);
    width: 100%;
    transition: background 0.15s ease;
    border-radius: 8px;
}

.cq-timing-row:hover {
	background: var(--cq-hover);
}

.cq-timing-row.is-active {
    background: var(--cq-accent);
    border-color: transparent;
}

.cq-timing-row.is-active .cq-timing-row-title,
.cq-timing-row.is-active .cq-timing-row-desc {
	color: #fff;
}

.cq-timing-row.is-active .cq-timing-row-title {
	font-weight: 800;
}

.cq-timing-row.is-active .cq-timing-row-desc {
	font-weight: 600;
}

.cq-timing-icon {
	font-size: 18px;
	flex-shrink: 0;
}

.cq-timing-row-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cq-timing-row-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--cq-ink);
}

.cq-timing-row-desc {
	font-size: 12px;
	color: var(--cq-ink-soft);
}

.cq-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

@media (max-width: 520px) {
	.cq-field-row {
		grid-template-columns: 1fr;
	}
}

.cq-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cq-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--cq-ink-soft);
	margin-bottom: 4px;
}

.cq-input {
    font-family: var(--cq-font);
    font-size: 14px;
    padding: 10px 12px !important;
    border: 1px solid var(--cq-border) !important;
    border-radius: var(--cq-radius-sm) !important;
    background: var(--cq-accent-soft) !important;
    color: var(--cq-ink);
    transition: all ease .3s !important;
}

.cq-input:hover {
	background-color: var(--cq-hover) !important;
}

.cq-input:focus {
	outline: none;
	border-color: var(--cq-ink) !important;
	background: var(--cq-panel) !important;
}

.cq-textarea {
	resize: vertical;
	min-height: 70px;
}

.cq-checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-size: 13px;
	cursor: pointer;
}

.cq-checkbox-row input {
	width: 16px;
	height: 16px;
	accent-color: var(--cq-ink);
}

.cq-phone-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--cq-border);
    border-radius: var(--cq-radius-sm);
    background: var(--cq-accent-soft);
    overflow: hidden;
    transition: all ease .3s;
}
.cq-phone-wrap:focus-within {
    border-color: var(--cq-ink);
    background: var(--cq-panel);
}
.cq-phone-flag {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    border-right: 1px solid var(--cq-border);
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
}
.cq-phone-input {
    border: none !important;
    background: transparent !important;
    flex: 1;
}
.cq-phone-input:focus {
    border: none !important;
    outline: none;
}

.cq-review-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.cq-review-item {
	background: var(--cq-panel);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-sm);
	padding: 14px 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.cq-review-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cq-review-item-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cq-ink-soft);
}

.cq-review-item-value {
	font-size: 14px;
}

.cq-review-edit {
    font-size: 14px;
    font-weight: 600;
    color: var(--cq-ink) !important;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

.cq-notice {
	background: var(--cq-accent-soft);
	border: 1px solid var(--cq-border);
	border-radius: var(--cq-radius-sm);
	padding: 14px 18px;
	font-size: 13px;
	line-height: 1.5;
}

.cq-confirmation {
	align-items: center;
	text-align: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.cq-confirm-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cq-accent-soft);
	color: var(--cq-ink);
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.cq-confirm-text {
	color: var(--cq-ink-soft);
	max-width: 360px;
	line-height: 1.5;
	font-size: 14px;
	margin-bottom: 20px;
}

.cq-confirm-restart {
	border: 1px solid var(--cq-ink) !important;
}

.cq-confirm-restart:hover {
    color: var(--cq-ink) !important;
	border-color: var(--cq-border) !important;
}

.cq-map-wrap {
	position: relative;
	background: var(--cq-accent-soft);
	min-height: 320px;
}

.cq-map {
	position: absolute;
	inset: 0;
}

.cq-map-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 245, 245, 0.92);
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.cq-map-overlay.is-hidden {
	opacity: 0;
}

.cq-map-overlay-text {
	font-size: 13px;
	color: var(--cq-ink-soft);
	max-width: 200px;
	text-align: center;
}

@media (max-width: 880px) {
	.cq-map-wrap {
		min-height: 220px;
	}
}

.cq-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--cq-border);
    background: var(--cq-panel);
    position: absolute;
    left: 28px;
    bottom: 0;
    width: calc(50% - 56px);
}

.cq-summary-stats {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
}

.cq-summary-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.cq-summary-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cq-ink-soft);
}

.cq-summary-value {
	font-size: 13px;
	font-weight: 700;
}

.cq-summary-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cq-btn {
	font-family: var(--cq-font);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: var(--cq-radius-sm);
	border: none;
	cursor: pointer;
	transition: all ease .3s;
}

.cq-btn:hover {
	background-color: var(--cq-hover) !important;
}



.cq-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cq-btn-primary {
	background: var(--cq-ink) !important;
	color: #fff !important;
}
#cqNext {
	border: 1px solid var(--cq-ink);
}
#cqNext:hover {
	color: var(--cq-ink) !important;
	border-color: var(--cq-border) !important;
}

.cq-btn-ghost {
	background: transparent;
	color: var(--cq-ink) !important;
	border: 1px solid var(--cq-border);
}

.cq-btn-ghost:hover {
	background: var(--cq-hover);
}

.cq-btn-outline {
	background: var(--cq-panel);
	color: var(--cq-ink) !important;
	border: 1px solid var(--cq-border);
	font-size: 13px;
	padding: 9px 16px;
}

.cq-btn-outline:hover {
	background: var(--cq-hover);
}

#cqRestartTop {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 15px;
}

@media (max-width: 767px) {
	.cq-summary-actions {
		justify-content: flex-end;
		width: 100%;
	}
	.cq-sidebar {
		transform: translateX(-100%);
		position: absolute;
		z-index: 99999;
		width: 100%;
		background-color: #F5F5F5;
		height: 100vh;
		padding: 20px 0;
		visibility: hidden;
		opacity: 0;
	}
	.cq-sidebar.active {
		transform: translateX(0);
		visibility: visible;
		opacity: 1;
	}
	.cq-breadcrumb svg {
		display: block !important;
	}
	.cq-sidebar svg {
		display: block !important;
		position: absolute;
		top: 20px;
		right: 20px;
		width: 24px;
		height: 24px;
	}
	.cq-app {
		padding: 0 0 20px;
		background-color: var(--cq-bg);
		overflow: hidden;
	}
	.cq-panel-area {
		width: 100%;
		border: none;
		border-radius: 0;
	}
	.cq-panel {
		padding: 0 20px 100px;
		height: calc(100vh - 282px);
		overflow: auto;
		z-index: 9;
		width: 100%;
		margin-top: 260px;
	}
	.cq-map-wrap {
		width: 90%;
		margin: auto;
		border-radius: 8px;
		overflow: hidden;
		position: fixed;
		top: 65px;
		z-index: 999;
		left: 20px;
		min-height: 170px !important;
	}
	.cq-page-title {
		font-size: 20px;
	}
	.cq-summary-stats {
		width: 100%;
		justify-content: space-around;
	}
	.cq-panel[data-step="done"] {
		height: fit-content;
	}
	.cq-summary-bar {
		position: fixed;
		left: 20px;
		bottom: 0;
		width: 90.4%;
		flex-wrap: wrap;
		height: 122px;
		z-index: 99;
	}
	.cq-breadcrumb {
		padding: 12px 20px;
		font-size: 12px;
		height: 40px;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99;
	}
	.cq-brand-header .logo {
		width: 170px;
		margin: 0;
	}
	.cq-brand-header {
		padding: 0 20px 10px;
	}
	.cq-sidebar .menu ul li.menu-item a {
		line-height: 21px;
		padding: 10px 20px;
		border-radius: 0;
	}
}

/* --------------------------------------------------------------------------
   Vehicle add-on options (liftgate)
   The panel is a sibling of .cq-vehicle-card inside .cq-vehicle-cell, styled to
   read as the lower half of the card. Kept outside the <button> so the checkbox
   stays valid markup and its clicks don't re-trigger card selection.
   -------------------------------------------------------------------------- */

.cq-vehicle-grid {
	align-items: start;
}

.cq-vehicle-cell {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cq-vehicle-cell .cq-vehicle-card {
	width: 100%;
}

.cq-vehicle-cell.has-extra-open .cq-vehicle-card {
	border-color: var(--cq-ink);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.cq-vehicle-extra {
	border: 1px solid var(--cq-ink);
	border-top: 0;
	border-radius: 0 0 var(--cq-radius-sm) var(--cq-radius-sm);
	background: var(--cq-accent-soft);
	padding: 0 10px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	transition: max-height .3s ease, opacity .2s ease, padding .3s ease, visibility 0s linear .3s;
}

.cq-vehicle-cell.has-extra-open .cq-vehicle-extra {
	max-height: 160px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding: 0 10px 12px;
	transition: max-height .3s ease, opacity .2s ease .05s, padding .3s ease, visibility 0s;
}

.cq-vehicle-extra .cq-liftgate-row {
	padding: 12px 0 0;
	border-bottom: none;
	border-top: none;
	gap: 12px;
}

.cq-vehicle-extra .cq-toggle-text {
	gap: 4px;
}

.cq-vehicle-extra .cq-toggle-text strong {
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--cq-ink);
}

.cq-vehicle-extra .cq-toggle-text strong i {
	font-size: 13px;
	color: var(--cq-ink-soft);
}

.cq-vehicle-extra .cq-toggle-text small {
	font-size: 11px;
	line-height: 1.45;
}


/* --------------------------------------------------------------------------
   Mobile form fixes (21 Aug 2026)

   1. iOS Safari zooms the whole page whenever a focused field's font-size is
      below 16px, which pushed the wizard off screen. Raising the controls to
      16px on small screens stops the zoom at source, without resorting to
      maximum-scale=1 (which would also kill legitimate pinch-zoom).

   2. .cq-input carried no width or box-sizing, so date inputs rendered at
      their intrinsic width — wider than the grid track and wider than the
      adjacent window <select>. These make every control fill its field.
   -------------------------------------------------------------------------- */

.cq-field {
	min-width: 0;
}

.cq-input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

input[type="date"].cq-input {
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 767px) {

	.cq-input,
	select.cq-input,
	textarea.cq-input,
	.cq-stop-input {
		font-size: 16px;
	}
}

@media (max-width: 767px) {

	/* An empty date input has no text to give it height, so it collapsed to a
	   thin bar next to the filled fields. Pin a consistent control height. */
	.cq-input {
		min-height: 44px;
	}
}

/* .cq-panel is the scroll container for the wizard. Browser scroll anchoring
   restores the previous offset when a step's content height changes, which
   undid the per-step scroll reset and hid each section's title. */
.cq-panel {
	overflow-anchor: none;
}

@media (max-width: 767px) {

	/* The wrapper only had min-height, so once a route is drawn the embed can
	   render taller and creep down over the panel. Pin it so the offset the
	   panel is given stays valid. */
	.cq-map-wrap {
		height: 170px !important;
	}

	.cq-map-wrap .cq-map,
	.cq-map-wrap > div {
		height: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile wizard layout — flex column, nothing position:fixed.

   The breadcrumb, map and summary bar were each position:fixed, with the
   panel given a hardcoded margin-top to dodge them. That can't be made
   reliable: the map's height varies, and when the keyboard opens the visual
   viewport shrinks while fixed elements stay pinned, so the browser scrolls
   the focused input underneath them.

   Laying the whole wizard out as a flex column in normal flow removes the
   problem instead of compensating for it. The panel is the only scrollable
   region, it clips its own content, and 100dvh lets the browser shrink the
   whole thing when the keyboard appears.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.cq-app {
		height: 100vh;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 0;
	}

	.cq-panel-area {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.cq-breadcrumb {
		position: static;
		flex: 0 0 auto;
		width: auto;
	}

	.cq-body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	.cq-map-wrap {
		/* Must stay a containing block: .cq-map inside is position:absolute and
		   escapes to .cq-body if this is static, stretching over the whole form. */
		position: relative;
		order: 1;
		flex: 0 0 auto;
		width: auto;
		left: auto;
		top: auto;
		margin: 10px 20px 0;
		height: 170px !important;
	}

	.cq-panel {
		position: static;
		order: 2;
		flex: 1 1 auto;
		min-height: 0;
		width: auto;
		margin-top: 0 !important;
		height: auto !important;
		overflow-y: auto;
		padding: 12px 20px 16px;
	}

	.cq-summary-bar {
		position: static;
		order: 3;
		flex: 0 0 auto;
		width: auto;
		left: auto;
		bottom: auto;
		margin: 0 20px;
		height: auto;
	}
}

/* When the keyboard is open the viewport gets short and the map would squeeze
   the form down to a sliver. Drop the map while typing — the customer needs
   the field and its address suggestions, not the route preview. */
@media (max-width: 767px) and (max-height: 560px) {

	.cq-map-wrap {
		display: none;
	}
}

/* Hard cap on the map. In a flex column `flex-basis` with no grow/shrink is
   the only thing that can't be defeated by a stray min-height elsewhere in
   the stylesheet (there is a `min-height: 220px` rule at <=880px), so state
   the size four ways and let the panel take everything that's left. */
@media (max-width: 767px) {

	.cq-map-wrap {
		flex: 0 0 170px !important;
		height: 170px !important;
		min-height: 170px !important;
		max-height: 170px !important;
	}

	.cq-panel {
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Confirmation screen. Once the request is submitted the map, breadcrumb and
   summary bar are gone, so give the whole area to the confirmation and let it
   centre properly instead of sitting under a leftover map with a dead gap.
   -------------------------------------------------------------------------- */

.cq-app[data-step="done"] .cq-map-wrap {
	display: none;
}

.cq-app[data-step="done"] .cq-panel {
	height: auto;
}

@media (max-width: 767px) {

	.cq-app[data-step="done"] .cq-panel {
		flex: 1 1 auto !important;
		height: auto !important;
		padding: 20px;
	}
}

.cq-confirmation .cq-confirm-restart {
	margin-top: 12px;
}

/* Six crumbs plus separators don't fit 375px at 12px, so the row wrapped and
   overflowed its fixed 40px height — "Review" dropped onto a second line and
   sat over the map. Keep it on one line and let it scroll sideways instead. */
@media (max-width: 767px) {

	.cq-breadcrumb {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cq-breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.cq-breadcrumb .cq-crumb {
		flex: 0 0 auto;
	}

	/* nowrap let the menu icon shrink to zero width */
	.cq-breadcrumb > svg {
		flex: 0 0 18px;
		width: 18px;
		height: 18px;
	}
}