.enfoque-bus-card{background:#fff;border:1px solid #e3d9f6;border-radius:20px;padding:16px;display:grid;gap:14px;box-shadow:0 6px 24px rgba(75,46,109,.05)}
.enfoque-bus-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.enfoque-bus-heading h2{font-size:17px;font-weight:800;margin:4px 0 0;color:#36234e}
.enfoque-bus-heading small{font-size:10px;font-weight:800;letter-spacing:.1em;color:#7554b8}
.enfoque-bus-heading button{font-size:12px;white-space:nowrap;padding:8px 10px}
.enfoque-bus-state{padding:16px;background:#f8f5fc;border-radius:12px;color:#5a486b;line-height:1.5}
.enfoque-bus-state.error{color:#9a4232;background:#fff5f0}
.enfoque-bus-state p{font-size:12px;margin:6px 0 0}
.enfoque-bus-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.enfoque-bus-pill{font-size:11px;font-weight:700;color:#63449a;background:#eee8fa;padding:7px 8px;border-radius:9px}
.enfoque-bus-arrival{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;background:#f5f0fd;border:1px solid #e2d5f8;padding:12px;border-radius:12px;align-items:center}
.enfoque-bus-arrival strong{color:#473467;font-size:13px;min-width:0}
.enfoque-bus-arrival>span{font-size:21px;font-weight:900;color:#6440a5;white-space:nowrap}
.enfoque-bus-arrival small{font-size:11px;color:#755d8e;grid-column:1/-1}
.enfoque-bus-variants{display:flex;gap:8px;overflow-x:auto;padding:3px 0 9px;margin-top:10px;scrollbar-width:thin}
.enfoque-bus-option{display:grid;gap:4px;min-width:115px;max-width:185px;text-align:left;background:#fff;border:1px solid #ddd4e7;border-radius:12px;padding:10px;color:#4f3a61;flex:1;cursor:pointer}
.enfoque-bus-option.selected{border:2px solid #7554b8;background:#f4effb;padding:9px}
.enfoque-bus-option strong{font-size:12px;word-break:break-word}
.enfoque-bus-option small{font-size:10px;color:#816d93}
.enfoque-bus-steps{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:0}
.enfoque-bus-step{display:flex;gap:10px;border-left:2px dashed #cfc2df;margin-left:13px;padding:0 0 17px 13px;position:relative}
.enfoque-bus-step:last-child{border-left-color:transparent;padding-bottom:2px}
.enfoque-bus-step-icon{position:absolute;left:-15px;top:0;font-size:15px;background:#fff;width:26px;text-align:center}
.enfoque-bus-step>div{padding-left:4px;min-width:0}
.enfoque-bus-step strong{font-size:13px;line-height:1.4;color:#3e2c53}
.enfoque-bus-step p{font-size:12px;color:#72607d;margin:5px 0 0;line-height:1.45}
.enfoque-bus-live,.enfoque-bus-scheduled{display:inline-block;font-size:9px;font-weight:800;padding:3px 6px;border-radius:6px;margin-left:7px;vertical-align:middle}
.enfoque-bus-live{color:#076f53;background:#d9f5e8}
.enfoque-bus-scheduled{color:#845b08;background:#fff0d0}
.enfoque-bus-disclaimer{font-size:11px;color:#765d85;line-height:1.5;background:#f8f6fb;border-radius:9px;padding:10px;margin:10px 0 6px}
.enfoque-bus-credit{font-size:10px;color:#8b8297;line-height:1.4;margin:0}
@media(max-width:390px){.enfoque-bus-card{padding:12px}.enfoque-bus-heading h2{font-size:15px}.enfoque-bus-heading button{padding:7px}}

/* 2026-10-22: Compact bus itinerary and fullscreen expandable next-bus ETA. */
.enfoque-bus-step{padding-bottom:11px;gap:7px}
.enfoque-bus-step-icon{font-size:14px}
.enfoque-bus-step>div{padding-left:2px}
.enfoque-bus-step strong{font-size:13px;font-weight:800}
.enfoque-bus-step p{margin:3px 0 0;font-size:11.5px;line-height:1.4}
.enfoque-bus-step-duration{font-size:11px;color:#82679c;font-weight:600}
.enfoque-bus-steps{margin-top:12px}
.enfoque-bus-variants{margin-top:6px;padding-bottom:4px}
.enfoque-bus-option{min-width:102px;padding:8px}
.enfoque-bus-option.selected{padding:7px}
.enfoque-bus-option small{line-height:1.3}
.enfoque-bus-card{gap:10px}
.enfoque-bus-arrival{padding:10px 12px}
.enfoque-bus-full-box{position:absolute;top:calc(max(12px,env(safe-area-inset-top)) + 68px);left:12px;z-index:44;width:min(398px,calc(100% - 24px));max-height:calc(100dvh - 110px);font-family:inherit;pointer-events:auto;color:#35234c}
.enfoque-bus-full-trigger{display:flex;align-items:center;gap:9px;border:1px solid #daceed;border-radius:14px;background:rgba(255,255,255,.97);color:#382555;padding:9px 11px;min-height:48px;max-width:100%;cursor:pointer;box-shadow:0 7px 19px rgba(37,29,54,.18);text-align:left;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.enfoque-bus-full-trigger[aria-expanded=true]{border-radius:14px 14px 0 0;border-bottom-color:transparent;background:#fff}
.enfoque-bus-full-icon{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#eee9fb;font-size:16px}
.enfoque-bus-full-trigger-copy{display:grid;gap:2px;min-width:0}
.enfoque-bus-full-trigger-copy strong{font-size:13px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enfoque-bus-full-trigger-copy small{font-size:10px;color:#776789;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enfoque-bus-full-chevron{font-size:19px;color:#7255a2;margin-left:9px;line-height:1}
.enfoque-bus-full-details{background:#fff;border:1px solid #daceed;border-top:0;border-radius:0 14px 14px 14px;max-height:min(59dvh,510px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:12px 13px 13px;box-shadow:0 16px 30px rgba(37,29,54,.18)}
.enfoque-bus-full-meta{display:flex;gap:6px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid #f1ecf8}
.enfoque-bus-full-meta span{font-size:10px;font-weight:800;color:#624c85;background:#f1ebfc;border-radius:7px;padding:5px 7px}
.enfoque-bus-full-alternatives{display:flex;gap:6px;overflow-x:auto;padding:10px 0 5px}
.enfoque-bus-full-alternatives button{font-size:11px;line-height:1.3;font-weight:700;color:#624c85;background:#fff;border:1px solid #ded3ef;border-radius:9px;min-height:36px;padding:6px 8px;white-space:nowrap;cursor:pointer}
.enfoque-bus-full-alternatives button.selected{background:#f1eafa;border-color:#7554b8;color:#553a89}
.enfoque-bus-full-alternatives small{font-size:10px;font-weight:500}
.enfoque-bus-full-steps{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:0}
.enfoque-bus-full-step{position:relative;display:flex;gap:9px;padding:0 0 13px 0;border-left:2px dashed #d6c8e8;margin-left:12px}
.enfoque-bus-full-step:last-child{border-left-color:transparent;padding-bottom:0}
.enfoque-bus-full-symbol{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;background:#fff;margin-left:-13px;font-size:15px}
.enfoque-bus-full-step>div{display:grid;gap:3px;min-width:0}
.enfoque-bus-full-step strong{font-size:12px;line-height:1.4;color:#3d2b52}
.enfoque-bus-full-step small{font-size:11px;color:#726382;line-height:1.4;overflow-wrap:anywhere}
.enfoque-bus-full-disclaimer{margin:11px 0 0;font-size:10px;line-height:1.4;color:#8a7a93}
.enfoque-bus-full-empty{font-size:12px;color:#665578;line-height:1.5;margin:4px 0 8px}
.enfoque-bus-full-refresh{min-height:37px;border-radius:9px;background:#f1ebfc;color:#5b3e8e;border:1px solid #daceed;font-size:12px;padding:7px 10px;font-weight:700}
.route-fullscreen-overlay:has(.enfoque-bus-full-box) .route-full-maneuver-arrow{font-size:26px}
@media(max-width:360px){.enfoque-bus-full-box{top:calc(max(9px,env(safe-area-inset-top)) + 62px);left:9px;width:calc(100% - 18px)}.enfoque-bus-full-trigger-copy strong{font-size:12px}.enfoque-bus-full-details{padding:10px}}
@media(max-height:580px){.enfoque-bus-full-details{max-height:43dvh}}

/* Real transit vehicle positions and neutral SVG action icons. */
.enfoque-ui-svg{display:inline-block;flex:none;vertical-align:-.18em;color:inherit}
.enfoque-ui-svg--ferry{color:#3694c8}
.enfoque-ui-svg--walk,.enfoque-ui-svg--wait{color:#727b85}
.enfoque-ui-svg--bus{color:#7158a2}
.enfoque-bus-step-icon{display:grid;place-items:center}
.enfoque-bus-step-icon .enfoque-ui-svg{width:17px;height:17px}
.enfoque-bus-full-symbol{display:grid;place-items:center;color:#62697e}
.enfoque-bus-full-symbol .enfoque-ui-svg{width:17px;height:17px}
.enfoque-bus-full-icon .enfoque-ui-svg{width:19px;height:19px}
.route-full-maneuver-arrow .enfoque-ui-svg{height:26px;width:26px}
.route-navigation-destination .route-number .enfoque-ui-svg{color:#fff;width:18px;height:18px}
.route-transport-options button>span .enfoque-ui-svg{width:24px;height:24px}
.delivery-orb .enfoque-ui-svg{width:23px;height:23px}
.enfoque-transit-vehicle-marker{width:34px;height:34px;display:grid;place-items:center;border-radius:999px;background:#fff;border:2px solid #7554b8;color:#7554b8;box-shadow:0 2px 8px #1f2b4270;pointer-events:auto}
.enfoque-transit-vehicle-marker .enfoque-ui-svg{width:20px;height:20px;color:#7554b8}
.enfoque-transit-vehicle-marker:hover{box-shadow:0 4px 12px #1f2b4280;transform:scale(1.05)}

/* No circular bubble around the GPS bus marker: only its actual bus SVG. */
.enfoque-transit-vehicle-marker{width:30px;height:30px;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.enfoque-transit-vehicle-marker .enfoque-ui-svg{width:28px;height:28px;color:#59438f;stroke-width:2.5}
.enfoque-transit-vehicle-marker:hover{background:transparent;border:0;box-shadow:none;transform:scale(1.1)}

/* Every bus leg has its own map color, while walking/ferry retain their own styles. */
.enfoque-bus-segment-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:8px 0 10px}
.enfoque-bus-segment-key{display:inline-flex;align-items:center;gap:6px;border:1px solid #e6e8ef;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:750;color:#3b4655;background:#fff}
.enfoque-bus-segment-key i{display:block;height:3px;width:18px;background:var(--segment-color);border-radius:4px}
.enfoque-bus-full-details .enfoque-bus-segment-legend{margin:8px 0 10px}
.enfoque-bus-full-details .enfoque-bus-segment-key{font-size:10px;padding:4px 6px}

/* Dashed line samples match the separate bus legs on the map. */
.enfoque-bus-segment-key i{background:repeating-linear-gradient(90deg,var(--segment-color) 0 9px,transparent 9px 13px)}