.coast-trip-planner {
	color: #26323e;
	min-width: 0;
	background: #f8fafb;
}

.coast-trip-planner .ctp-heading {
	margin: 0;
	min-height: 60px;
	padding: 14px 20px;
	background: #083e78;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.coast-trip-planner .ctp-heading img { width: 28px; height: 28px; object-fit: contain; }
.coast-trip-planner .ctp-layout { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr); grid-template-areas: "left map" "details map"; align-items: start; gap: 0 24px; padding: 24px; }
.coast-trip-planner .ctp-left { grid-area: left; min-width: 0; }
.coast-trip-planner .ctp-form { position: relative; display: grid; gap: 13px; padding: 0; margin: 0; }
.coast-trip-planner .ctp-form label { display: block; margin: 0 0 5px; color: #143d64; font-size: 14px; font-weight: 700; }
.coast-trip-planner .ctp-form :is(input, select), .coast-trip-planner .ctp-place-slot gmp-place-autocomplete { box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin: 0; border: 1px solid #aab7c2; border-radius: 4px; background: #fff; color: #26323e; font-size: 16px; padding: 8px 10px; }
.coast-trip-planner .ctp-place-slot { min-width: 0; }
.coast-trip-planner .ctp-place-slot gmp-place-autocomplete { padding: 0; }
.coast-trip-planner .ctp-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.coast-trip-planner .ctp-when > div:first-child { grid-column: 1 / -1; }
.coast-trip-planner .ctp-when > div { min-width: 0; }
.coast-trip-planner .ctp-form :is(.ctp-current-location, .ctp-swap) { border: 0; background: transparent; color: #07586b; min-height: 32px; padding: 2px 0; text-transform: none; font-size: 14px; font-weight: 700; cursor: pointer; justify-self: start; }
.coast-trip-planner .ctp-form .ctp-current-location { margin: 0; grid-column: 1; grid-row: 2; max-width: calc(100% - 52px); text-align: left; }
.coast-trip-planner .ctp-form .ctp-swap { position: static; grid-column: 1; grid-row: 2; justify-self: end; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 8px; border-radius: 4px; color: #004780; line-height: 1; }
.coast-trip-planner .ctp-swap-icon { display: block; width: 28px; height: 28px; flex: 0 0 28px; pointer-events: none; }
.coast-trip-planner .ctp-form .ctp-swap:hover { background: #e5f4f7; color: #004780; }
.coast-trip-planner .ctp-form .ctp-swap:focus-visible { outline: 3px solid #004780; outline-offset: 2px; }
.coast-trip-planner .ctp-form .ctp-search { justify-self: start; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 5px; background: #008ba4; color: #fff; font-size: 15px; font-weight: 700; text-transform: none; cursor: pointer; }
.coast-trip-planner .ctp-form .ctp-search:hover:not(:disabled) { background: #006f83; }
.coast-trip-planner .ctp-form .ctp-search:disabled { background: #70838d; cursor: not-allowed; }
.coast-trip-planner .ctp-status { min-height: 1.4em; margin: 0; color: #415263; font-size: 14px; }
.coast-trip-planner .ctp-status[data-error="true"] { color: #a22c23; font-weight: 700; }
.coast-trip-planner .ctp-map-wrap { grid-area: map; position: relative; min-width: 0; min-height: 480px; background: #e8f0f2; border: 1px solid #bdcdd3; }
.coast-trip-planner .ctp-map { width: 100%; min-height: 480px; }
.coast-trip-planner .ctp-map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: #46616c; text-align: center; pointer-events: none; }
.coast-trip-planner .ctp-map-wrap[data-loaded="true"] .ctp-map-placeholder { display: none; }
.coast-trip-planner .ctp-suggestions, .coast-trip-planner .ctp-details { min-width: 0; margin-top: 22px; }
.coast-trip-planner .ctp-suggestions h3, .coast-trip-planner .ctp-details h3 { margin: 0 0 10px; color: #083e78; font-size: 18px; }
.coast-trip-planner .ctp-route-list { display: grid; gap: 8px; }
.coast-trip-planner .ctp-route-choice { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid #becbd4; border-radius: 4px; background: #fff; color: #26323e; text-align: left; cursor: pointer; display: grid; gap: 3px; }
.coast-trip-planner .ctp-route-choice[aria-pressed="true"] { border: 2px solid #008ba4; background: #eefaff; }
.coast-trip-planner .ctp-route-choice strong { color: #083e78; font-size: 15px; }
.coast-trip-planner .ctp-route-choice span { font-size: 13px; }
.coast-trip-planner .ctp-details { grid-area: details; padding-top: 10px; border-top: 1px solid #d5dfe4; }
.coast-trip-planner .ctp-detail-body > p { margin: 0 0 10px; }
.coast-trip-planner .ctp-steps { margin: 0; padding-left: 22px; }
.coast-trip-planner .ctp-steps li { margin: 0 0 10px; line-height: 1.4; }
.coast-trip-planner .ctp-steps small { display: block; color: #53616e; }
.coast-trip-planner :focus-visible { outline: 3px solid #008ba4; outline-offset: 2px; }
.coast-trip-planner [hidden] { display: none !important; }
.coast-trip-planner:not(.ctp-ready) .ctp-layout { display: block; }
.coast-trip-planner:not(.ctp-ready) .ctp-map-wrap { display: none; }

.coast-route-template .crt-notes-planner--interactive { display: block; }
.coast-route-template .crt-notes-planner--interactive > .crt-outlined { margin-bottom: 28px; }
.coast-route-template .coast-trip-planner .ctp-layout { padding: 24px; }
.coast-route-template .coast-trip-planner .ctp-form :is(input, select) { width: 100%; height: 44px; margin: 0; font-size: 16px; border-radius: 4px; }
.coast-route-template .coast-trip-planner .ctp-form :is(label, button) { font-size: 14px; }
.coast-route-template .coast-trip-planner .ctp-form .ctp-swap { font-size: 25px; }
.coast-route-template .coast-trip-planner .ctp-form .ctp-search { min-height: 44px; background: #008ba4; color: #fff; }
.coast-schedules-map-planner--trip-planner > .coast-trip-planner { align-self: start; background: #f7f7f8; }
.coast-schedules-map-planner--trip-planner .ctp-heading { background: #004780; font-size: 22px; }
.coast-schedules-map-planner--trip-planner .ctp-layout { display: block; padding: 22px; }
.coast-schedules-map-planner--trip-planner .ctp-form { gap: 12px; }
.coast-schedules-map-planner--trip-planner .ctp-location > label,
.coast-schedules-map-planner--trip-planner .ctp-when > div:not(:first-child) > label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.coast-schedules-map-planner--trip-planner .ctp-when > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.coast-schedules-map-planner--trip-planner .ctp-when > div:first-child > label { margin: 0; font-weight: 400; }
.coast-schedules-map-planner--trip-planner .ctp-form .ctp-search { background: #004780; }
.coast-schedules-map-planner--trip-planner .ctp-form .ctp-search:hover:not(:disabled) { background: #00acc4; }
.coast-schedules-map-planner--trip-planner :is(.ctp-status, .ctp-selected-fare):empty { display: none; }
.coast-schedules-map-planner--trip-planner .ctp-system-map-host { position: relative; align-self: stretch; min-height: 440px; }
.coast-schedules-map-planner--trip-planner .ctp-system-map-host > img { display: none; }
.coast-schedules-map-planner--trip-planner .ctp-map-wrap { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; background: #e8f0f2; }
.coast-schedules-map-planner--trip-planner .ctp-map { width: 100%; height: 100%; min-height: 0; }
.coast-schedules-map-planner--trip-planner .ctp-map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; pointer-events: none; }
.coast-schedules-map-planner--trip-planner .ctp-map-wrap[data-loaded="true"] .ctp-map-placeholder { display: none; }
.coast-schedules-map-planner--trip-planner .ctp-all-routes { position: absolute; top: 10px; left: 10px; z-index: 1; min-height: 44px; padding: 8px 14px; border: 2px solid #004780; border-radius: 4px; background: #fff; color: #004780; font-size: 14px; font-weight: 700; cursor: pointer; }
.coast-schedules-map-planner--trip-planner .ctp-all-routes:hover { background: #e5f4f7; }
.coast-schedules-map-planner--trip-planner .ctp-system-map-status { position: absolute; bottom: 28px; left: 10px; right: 10px; margin: 0; padding: 8px; background: #fff; color: #26323e; font-size: 14px; }
.coast-schedules-map-planner--trip-planner .ctp-schedules-details { grid-column: 1 / -1; width: 100%; margin-top: 0; padding-top: 24px; border-top: 1px solid #d5dfe4; color: #26323e; }
.coast-schedules-map-planner--trip-planner .ctp-schedules-details h3 { color: #004780; font-size: 22px; }
.coast-schedules-map-planner--trip-planner .ctp-detail-body img { display: inline-block; max-width: none; vertical-align: middle; }
.coast-schedules-map-planner--trip-planner .adp table { margin-bottom: 0; width: 100%; }
.coast-schedules-map-planner--trip-planner :focus-visible { outline: 3px solid #004780; outline-offset: 2px; }
.coast-schedules-map-planner--trip-planner [hidden] { display: none !important; }
@media (max-width: 767px) {
	.coast-schedules-map-planner--trip-planner .ctp-system-map-host { height: 320px; min-height: 320px; }
	.coast-schedules-map-planner--trip-planner .ctp-layout { padding: 20px; }
}

@media (max-width: 850px) {
	.coast-trip-planner .ctp-layout { display: flex; flex-direction: column; gap: 0; }
	.coast-trip-planner .ctp-left, .coast-trip-planner .ctp-map-wrap, .coast-trip-planner .ctp-details { width: 100%; }
	.coast-trip-planner .ctp-map-wrap { margin-top: 20px; min-height: 360px; }
	.coast-trip-planner .ctp-map { min-height: 360px; }
}

@media (max-width: 520px) {
	.coast-trip-planner .ctp-layout, .coast-route-template .coast-trip-planner .ctp-layout { padding: 18px; }
	.coast-trip-planner .ctp-map-wrap, .coast-trip-planner .ctp-map { min-height: 320px; }
}

/* Google directions retain their native inline icons and compact tables. */
.coast-trip-planner .ctp-detail-body img { display:inline-block; max-width:none; vertical-align:middle; }
.coast-trip-planner .adp table { margin-bottom:0; width:100%; }
.coast-trip-planner .ctp-selected-fare { font-weight:700; margin:16px 0 0; }
.coast-trip-planner .ctp-details { max-height:650px; overflow:auto; }
.coast-trip-planner .ctp-map-wrap { position:sticky; top:42px; }
.coast-trip-planner.ctp-home-form .ctp-layout { display:block; max-width:640px; margin:auto; }
.coast-trip-planner.ctp-home-form .ctp-map-wrap, .coast-trip-planner.ctp-home-form .ctp-details, .coast-trip-planner.ctp-home-form .ctp-selected-fare { display:none!important; }
.coast-service-empty:has(.ctp-home-form:not([hidden])) { min-height:0; padding:24px; }
@media(max-width:850px) { .coast-trip-planner .ctp-map-wrap { position:relative; top:auto; } .coast-trip-planner .ctp-details { max-height:none; overflow:visible; } }

.coast-service-grid[hidden], .coast-service-empty[hidden] { display:none!important; }

/* Keep address widgets and native date controls inside narrow forms. */
.coast-trip-planner .ctp-form { grid-template-columns:minmax(0,1fr); }
.coast-trip-planner .ctp-form > div { min-width:0; }

/* Preserve the native directions layout with visible keyboard focus and dates. */
:is(.coast-trip-planner, .coast-schedules-map-planner) .ctp-detail-body .ctp-route-option { cursor:pointer; min-height:44px; box-sizing:border-box; }
:is(.coast-trip-planner, .coast-schedules-map-planner) .ctp-detail-body .ctp-route-option:focus-visible { outline:3px solid #083e78; outline-offset:-3px; }
:is(.coast-trip-planner, .coast-schedules-map-planner) .ctp-detail-body .ctp-route-day { margin-top:4px; font-size:14px; line-height:1.4; font-weight:600; color:#143d64; }