/* Calzada planner: route options, terminal choice, transfer prompt, stop labels (v1.4.0). Flat: no gradients, no shadows. */

.czt-options { margin: 4px 0 16px; }
.czt-options[hidden] { display: none !important; }

.czt-hd { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.czt-hd-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; color: #0E2A47; }

.czt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.czt-chip {
    height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid #E2E8F0; background: #FFFFFF;
    font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 600; color: #475569; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.czt-chip.is-on { background: #0E2A47; border-color: #0E2A47; color: #FFFFFF; }
.czt-chip:focus-visible, .czt-opt:focus-visible { outline: 2px solid #2272C3; outline-offset: 2px; }

.czt-list { display: flex; flex-direction: column; gap: 10px; }
.czt-opt {
    display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: #0E2A47;
    border: 1px solid #E2E8F0; border-radius: 16px; background: #FFFFFF; padding: 14px;
    -webkit-tap-highlight-color: transparent; transition: border-color .15s ease;
}
.czt-opt:hover { border-color: #B9D3F0; }
.czt-opt.is-selected { border: 1.5px solid #2272C3; background: #FAFCFF; padding: 13.5px; }

.czt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.czt-tag { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; line-height: 1.2; }
.czt-tag--rec { background: #2272C3; color: #FFFFFF; }
.czt-tag--cheap { background: #E8F6EE; color: #15803D; }
.czt-tag--fast { background: #FFF4E5; color: #B45309; }

.czt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.czt-time { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.3px; line-height: 1.2; }
.czt-fare { text-align: right; flex-shrink: 0; }
.czt-fare-reg { display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; color: #2272C3; line-height: 1.2; }
.czt-fare-disc { display: block; font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 12px; color: #5A6A7F; margin-top: 2px; }

.czt-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.czt-pill {
    display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 9px; border-radius: 8px;
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2;
}
.czt-pill--jeep { background: #EAF2FC; color: #1D5FA3; }
.czt-pill--jeep img {
    width: 15px; height: 15px; object-fit: contain; flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(28%) sepia(60%) saturate(1500%) hue-rotate(195deg);
}
.czt-walk { display: inline-flex; align-items: center; gap: 4px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; color: #475569; }
.czt-walk-ic { display: inline-flex; color: #5A6A7F; }
.czt-chev { color: #94A3B8; font-size: 13px; }

.czt-meta { font-family: 'Outfit', sans-serif; font-size: 13.5px; color: #5A6A7F; margin-top: 9px; line-height: 1.45; }
.czt-meta b { color: #0E2A47; font-weight: 600; }
.czt-note { font-family: 'Outfit', sans-serif; font-size: 13px; color: #5A6A7F; margin: 10px 2px 0; line-height: 1.4; }

/* Itinerary additions */
.timeline-headsign { font-family: 'Outfit', sans-serif; font-size: 13px; color: #475569; margin-top: 4px; }
.timeline-via { font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #5A6A7F; margin-top: 2px; }

/* Transfer prompt */
.czt-xfer {
    position: fixed; z-index: 1300; width: min(360px, calc(100vw - 24px)); left: 12px;
    background: #FFFFFF; border: 1.5px solid #2272C3; border-radius: 16px; padding: 12px 14px 10px;
    font-family: 'Outfit', sans-serif; color: #0E2A47;
}
.czt-xfer[hidden] { display: none !important; }
.czt-xfer.is-phone { left: 12px; right: 12px; width: auto; }
.czt-xfer-row { display: flex; gap: 12px; align-items: center; }
.czt-xfer-ic { width: 40px; height: 40px; border-radius: 12px; background: #EAF2FC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.czt-xfer-txt { flex: 1; min-width: 0; }
.czt-xfer-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; }
.czt-xfer-sub { font-size: 13px; color: #5A6A7F; margin-top: 2px; line-height: 1.35; }
.czt-xfer-go {
    display: flex; width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: 12px; background: #2272C3; color: #FFFFFF;
    font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; align-items: center; justify-content: center; cursor: pointer;
}
.czt-xfer-later {
    display: block; width: 100%; height: 34px; margin-top: 4px; border: 0; background: transparent; color: #5A6A7F;
    font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.czt-xfer-mini {
    display: none; flex-shrink: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #2272C3; color: #FFFFFF;
    font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.czt-xfer.is-compact { padding: 10px 12px; }
.czt-xfer.is-compact .czt-xfer-go,
.czt-xfer.is-compact .czt-xfer-later { display: none; }
.czt-xfer.is-compact .czt-xfer-mini { display: inline-flex; align-items: center; }
.czt-xfer.is-compact .czt-xfer-ic { width: 34px; height: 34px; border-radius: 10px; }
.czt-xfer-go:focus-visible, .czt-xfer-later:focus-visible, .czt-xfer-mini:focus-visible { outline: 2px solid #0E2A47; outline-offset: 2px; }

/* Labelled stops on the map */
.czt-stop { display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; pointer-events: none; }
.czt-stop-dot { width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0; background: #FFFFFF; border: 3.5px solid #378ADD; }
.czt-stop--board .czt-stop-dot { background: #378ADD; border: 3px solid #FFFFFF; outline: 1.5px solid #378ADD; }
.czt-stop--next .czt-stop-dot { border-color: #8DB8E8; }
.czt-stop--change .czt-stop-dot { background: #0E2A47; border: 3px solid #FFFFFF; outline: 1.5px solid #0E2A47; }
.czt-stop-chip {
    max-width: 190px; width: max-content; text-align: center; white-space: normal; overflow-wrap: anywhere;
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 3px 8px;
    font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: #475569; line-height: 1.3;
}
.czt-stop-chip b { font-weight: 700; color: #0E2A47; }
@media (max-width: 768px) { .czt-stop-chip { max-width: 170px; font-size: 12px; } }

/* Terminal choice: "Saan ka sasakay?" (destinations in Real / Halang). Compact rows, so the
   choice, the summary and the start of the legs fit in one view of the sheet. */
.czt-terms { margin: 2px 0 14px; }
.czt-terms[hidden] { display: none !important; }
.czt-term-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.czt-term-title { margin: 0; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; color: #0E2A47; line-height: 1.3; }
.czt-term-count { font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #5A6A7F; white-space: nowrap; }
.czt-terms .czt-list { gap: 6px; }
.czt-term {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; text-align: left; cursor: pointer;
    font: inherit; color: #0E2A47; border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; padding: 8px 12px;
    -webkit-tap-highlight-color: transparent; transition: border-color .15s ease;
}
.czt-term:hover { border-color: #B9D3F0; }
.czt-term.is-selected { border: 1.5px solid #2272C3; background: #FAFCFF; padding: 7.5px 11.5px; }
.czt-term:focus-visible { outline: 2px solid #2272C3; outline-offset: 2px; }
.czt-radio {
    width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0;
    border: 2px solid #94A3B8; display: flex; align-items: center; justify-content: center;
}
.czt-term.is-selected .czt-radio { border-color: #2272C3; }
.czt-term.is-selected .czt-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #2272C3; }
.czt-term-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.czt-term-top { display: flex; align-items: baseline; gap: 8px; }
.czt-term-name {
    flex: 1; min-width: 0; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #0E2A47;
    overflow-wrap: anywhere;
}
.czt-term-time { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; color: #0E2A47; }
.czt-term-fare { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13.5px; color: #2272C3; white-space: nowrap; min-width: 34px; text-align: right; }
.czt-term-sub {
    font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #5A6A7F; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.czt-term-rec { color: #2272C3; font-weight: 600; }

/* Switched terminal: status card, no buttons */
.czt-auto-row { align-items: flex-start; }
.czt-auto-ic { display: inline-flex; color: #2272C3; flex-shrink: 0; margin-top: 1px; }
.czt-auto-body { color: #475569; font-size: 13.5px; line-height: 1.45; }
.czt-auto-before { font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #5A6A7F; margin-top: 4px; }

/* Terminal pins on the map (tablet / desktop): a click picks that terminal */
.czt-tpin {
    position: relative; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.czt-tpin-dot {
    position: absolute; inset: 0; border-radius: 50%; box-sizing: border-box;
    background: #FFFFFF; border: 3px solid #2272C3;
}
.czt-tpin-chip {
    position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 8px; padding: 4px 9px;
    font-family: 'Outfit', sans-serif; font-size: 12.5px; color: #0E2A47; line-height: 1.3;
}
.czt-tpin-chip b { font-weight: 700; }
.czt-tpin-rec { font-size: 11.5px; font-weight: 600; border-radius: 5px; padding: 1px 6px; background: #2272C3; color: #FFFFFF; }
.czt-tpin.is-on .czt-tpin-dot { background: #2272C3; border-color: #FFFFFF; outline: 1.5px solid #2272C3; }
.czt-tpin.is-on .czt-tpin-chip { background: #2272C3; border-color: #2272C3; color: #FFFFFF; }
.czt-tpin.is-on .czt-tpin-rec { background: #FFFFFF; color: #2272C3; }
.czt-tpin:focus-visible { outline: 2px solid #0E2A47; outline-offset: 3px; border-radius: 50%; }
.czt-tpin.is-old { cursor: default; opacity: 0.6; }
.czt-tpin.is-old .czt-tpin-dot { border-color: #94A3B8; }
.czt-tpin.is-old .czt-tpin-chip { color: #5A6A7F; text-decoration: line-through; }