/* Route picking, route options, active route, and route overlay styles. */

#useMyLocationNearbyOptions:not(.d-none),
#alongRoutePanel:not(.d-none) {
    display: flex;
}

.map-header-route-status {
    white-space: nowrap;
}

figcaption[data-type="route"] {
    color: var(--route-callout-orange, #f97316) !important;
}

div[data-route-email-preview-start] {
    color: #189245 !important;
}

div[data-route-email-preview-end] {
    color: #C82527 !important;
}

.route-picker-cursor-bubble {
		position: fixed;
		z-index: 2100;
		top: 0;
		left: 0;
		transform: translate3d(18px, 18px, 0);
		pointer-events: none;
		padding: .55rem .75rem;
		border-radius: .75rem;
		background: rgba(17, 24, 39, .94);
		color: #fff;
		box-shadow: 0 12px 32px rgba(15, 23, 42, .28);
		font-size: .875rem;
		font-weight: 700;
		line-height: 1.2;
		max-width: min(320px, calc(100vw - 32px));
		transition: opacity .12s ease;
	}

.route-picker-cursor-bubble[hidden] {
			display: none;
		}

.route-picker-status {
		align-items: center;
		min-height: 32px;
		padding: .35rem .7rem;
		border-radius: .75rem;
		background: rgba(37, 99, 235, .1);
		color: #1d4ed8;
		font-size: .875rem;
		font-weight: 700;
	}

.route-picker-status:not(.d-none) {
			display: inline-flex;
		}

.map-header-active-route {
		align-items: center;
		flex: 0 1 auto;
		flex-wrap: nowrap;
		gap: .6rem;
		min-width: 0;
		max-width: 100%;
	}

.map-header-active-route:not(.d-none) {
			display: flex;
		}

.map-header-active-route__summary {
		display: inline-flex;
		align-items: baseline;
		gap: .45rem;
		flex: 0 1 auto;
		width: fit-content;
		max-width: min(44rem, calc(100vw - 18rem));
		min-width: 0;
		padding: .42rem .75rem;
		border-radius: .75rem;
		background: rgba(15, 23, 42, .06);
		color: #111827;
		font-size: .9rem;
		font-weight: 700;
	}

.map-header-active-route__summary span:last-child {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

.map-header-active-route__label {
		color: #64748b;
		font-size: .75rem;
		font-weight: 800;
		text-transform: uppercase;
	}

.map-header-active-route__options-btn {
		flex: 0 0 auto;
		border-radius: 999px;
		white-space: nowrap;
	}

.map-header-route-options-popover {
		position: fixed;
		z-index: 1085;
		top: var(--route-options-popover-top, 5.75rem);
		right: auto;
		left: var(--route-options-popover-left, 1rem);
		width: min(21rem, calc(100vw - 2rem));
		padding: .9rem;
		border: 1px solid rgba(15, 23, 42, .12);
		border-radius: .9rem;
		background: #fff;
		box-shadow: 0 18px 48px rgba(15, 23, 42, .2);
	}

#alongRoutePanel.map-header-route-options-popover:not(.d-none) {
			display: grid !important;
			align-items: stretch;
			justify-content: stretch;
			gap: .85rem;
		}

.map-header-route-options-popover__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: .75rem;
	}

.map-header-route-options-popover__title {
		color: #111827;
		font-size: .9rem;
		font-weight: 800;
		line-height: 1.2;
	}

.map-header-route-options-popover__summary {
		margin-top: .18rem;
		color: #64748b;
		font-size: .78rem;
		line-height: 1.35;
	}

.map-header-route-options-popover__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border: 0;
		border-radius: 999px;
		background: rgba(15, 23, 42, .06);
		color: #334155;
	}

.map-header-route-options-popover__controls {
		display: grid;
		gap: .8rem;
	}

.map-header-route-options-popover__field {
		display: grid;
		gap: .35rem;
		margin: 0;
	}

.map-header-route-options-popover__actions-slot {
		display: contents;
	}

.map-header-route-options-popover__field > span {
			display: block;
			margin: 0;
			font-size: .72rem;
			font-weight: 800;
			line-height: 1;
			text-transform: uppercase;
		}

.map-header-route-options-popover__field .form-select-sm {
			width: 100%;
			min-width: 0;
			min-height: 2.2rem;
	}

.map-header-route-choice-group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .45rem;
	}

.map-header-route-choice-group .btn {
			min-height: 2.15rem;
			border-radius: .65rem;
			font-weight: 800;
		}

.active-route-floating-actions {
		position: absolute;
		z-index: 7;
		right: 1rem;
		bottom: 1rem;
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		padding: .35rem;
		border: 1px solid rgba(15, 23, 42, .1);
		border-radius: 999px;
		background: rgba(255, 255, 255, .96);
		box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
	}

.active-route-floating-actions.d-none {
			display: none;
		}

.active-route-floating-actions__primary,
	.active-route-floating-actions__secondary {
		border-radius: 999px;
		font-weight: 700;
	}

.active-route-floating-actions__primary {
		background: #2563eb;
		border-color: #2563eb;
		color: #fff;
	}

.active-route-floating-actions__secondary {
		background: #fff;
		border-color: rgba(15, 23, 42, .18);
		color: #334155;
	}

.route-mode-map-overlay {
		display: none;
	}

@media (max-width: 991.98px) {
.map-header-route-options-popover {
			top: auto;
			right: .75rem;
			bottom: calc(env(safe-area-inset-bottom) + .85rem);
			left: .75rem;
			width: auto;
			max-height: min(70vh, 32rem);
			overflow: auto;
			border-radius: 1rem;
		}

.map-header-route-options-popover__controls {
			gap: .8rem;
		}

.map-header-route-options-popover .map-header-inline-field {
			display: grid;
			gap: .35rem;
			width: 100%;
		}

.map-header-active-route__summary {
			max-width: min(68vw, 26rem);
		}

.map-header-route-options-popover .form-select-sm {
			width: 100%;
			min-width: 0;
		}

.route-mode-map-overlay:not(.d-none) {
			position: absolute;
			z-index: 7;
			top: auto;
			right: auto;
			bottom: .65rem;
			left: .65rem;
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			align-items: center;
			gap: .5rem;
			width: min(27rem, calc(100vw - 5.25rem));
			padding: .45rem;
			border: 1px solid rgba(15, 23, 42, .12);
			border-radius: .85rem;
			background: rgba(255, 255, 255, .96);
			box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
		}

body.is-mobile-route-panel-open .route-mode-map-overlay:not(.d-none) {
			display: none;
		}

.route-mode-map-overlay__summary {
			display: inline-flex;
			align-items: baseline;
			gap: .4rem;
			flex: 1 1 auto;
			grid-column: 1;
			min-width: 0;
			color: #111827;
			font-size: .82rem;
			font-weight: 800;
		}

.route-mode-map-overlay__summary span:last-child {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

.route-mode-map-overlay__label {
			color: #64748b;
			font-size: .68rem;
			font-weight: 800;
			text-transform: uppercase;
		}

.route-mode-map-overlay__meta {
			display: none;
		}

.route-mode-map-overlay__options {
			grid-column: 2;
			grid-row: 1;
			flex: 0 0 auto;
			min-height: 2.1rem;
			padding: .35rem .55rem;
			border: 1px solid rgba(15, 23, 42, .16);
			border-radius: 999px;
			background: #fff;
			color: #334155;
			font-size: .74rem;
			font-weight: 800;
		}

.active-route-floating-actions {
			position: static;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			width: 100%;
			max-width: none;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: transparent;
			box-shadow: none;
		}

#alongRoutePanel.map-header-route-options-popover.is-mobile-route-panel:not(.d-none) {
			top: auto;
			right: .65rem;
			bottom: calc(env(safe-area-inset-bottom) + .75rem);
			left: .65rem;
			display: grid !important;
			width: auto;
			max-height: min(48vh, 24rem);
			padding: .8rem;
			gap: .7rem;
			border-radius: 1rem;
			overflow: auto;
		}

#alongRoutePanel.is-mobile-route-panel .map-header-route-options-popover__close {
			display: inline-flex;
		}

#alongRoutePanel.is-mobile-route-panel .map-header-route-options-popover__summary {
			color: #047857;
			font-size: .82rem;
			font-weight: 850;
		}

#alongRoutePanel.is-mobile-route-panel .map-header-route-options-popover__actions-slot {
			display: block;
		}
}