*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#162033;background:#fff}.container{width:min(1120px,calc(100% - 32px));margin:auto}.site-header{height:72px;background:#fff;border-bottom:1px solid #edf0f5;position:relative;z-index:10}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;color:#152033;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#152033;color:#fff;font-weight:800}.brand small{display:block;color:#7b8495;font-size:11px;margin-top:1px}.top-nav{display:flex;gap:22px}.top-nav a{font-size:13px;color:#697386;text-decoration:none}.hero{padding:70px 0 86px;background:radial-gradient(circle at 80% 20%,#e8f1ff 0,rgba(232,241,255,0) 35%),linear-gradient(180deg,#f7faff,#fff)}.hero-copy{text-align:center;max-width:700px;margin:0 auto 34px}.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#53709e;margin-bottom:12px}.eyebrow.dark{color:#71809a}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.045em;margin:0;color:#111b2c}.hero h1 span{color:#3767d6}.hero-copy p{margin:18px 0 0;color:#68758b;font-size:17px}.planner-card{width:min(760px,100%);margin:auto;background:#fff;border:1px solid #e6ebf3;border-radius:24px;padding:22px;box-shadow:0 22px 60px rgba(26,49,89,.10)}.search-stack{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:10px}.field-wrap{position:relative}.field-wrap label{display:block;font-size:10px;font-weight:800;color:#8791a2;letter-spacing:.1em;margin:0 0 7px 14px}.input-row{height:62px;border:1px solid #dfe5ef;border-radius:16px;display:flex;align-items:center;padding:0 10px 0 15px;background:#fff;transition:.2s}.input-row:focus-within{border-color:#4775df;box-shadow:0 0 0 4px rgba(71,117,223,.09)}.input-row input{border:0;outline:0;flex:1;font-size:16px;min-width:0;color:#182235;background:transparent}.input-row input::placeholder{color:#a0a8b6}.pin{width:12px;height:12px;border-radius:50%;margin-right:12px;position:relative}.from-pin{background:#3d6fdd}.to-pin{background:#ef4d61}.clear-btn{border:0;background:transparent;color:#a5adba;font-size:24px;cursor:pointer;line-height:1}.swap-btn{width:42px;height:42px;border-radius:50%;border:1px solid #dfe5ef;background:#fff;color:#5273ba;font-size:20px;cursor:pointer;box-shadow:0 5px 15px rgba(20,40,70,.06)}.autocomplete{position:absolute;left:0;right:0;top:90px;background:#fff;border:1px solid #e2e7ef;border-radius:14px;box-shadow:0 15px 35px rgba(26,49,89,.13);overflow:hidden;z-index:20;display:none}.autocomplete.show{display:block}.suggestion{width:100%;border:0;background:#fff;text-align:left;padding:13px 15px;display:flex;align-items:center;gap:11px;cursor:pointer}.suggestion:hover{background:#f5f8fd}.suggestion-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}.suggestion strong{display:block;font-size:14px;color:#172236}.suggestion small{display:block;margin-top:3px;color:#7c8799;font-size:11px}.primary-btn{width:100%;height:56px;margin-top:18px;border:0;border-radius:15px;background:#1d57cf;color:#fff;font-size:15px;font-weight:800;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:12px;box-shadow:0 9px 22px rgba(29,87,207,.20)}.primary-btn:hover{background:#164dbd}.primary-btn .arrow{font-size:20px}.planner-hint{text-align:center;color:#7d8798;font-size:11px;margin-top:13px}.planner-hint span{color:#2d9b66;font-weight:900}.section{padding:65px 0}.section.soft{background:#f7f9fc}.section-heading{margin-bottom:22px}.section h2{font-size:30px;letter-spacing:-.03em;margin:0 0 8px}.section p{color:#778195;margin:0;max-width:650px;line-height:1.6}.popular-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.route-chip{border:1px solid #e4e9f1;background:#fff;border-radius:14px;padding:17px 18px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;color:#263249}.route-chip b{color:#8490a4;margin-left:auto}.route-chip span:first-child{font-weight:700}.route-chip span:last-child{color:#657188}.network-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.network-card{background:#fff;border:1px solid #e4e9f1;border-radius:17px;padding:19px;min-height:125px}.line-dot{display:block;width:12px;height:12px;border-radius:50%;margin-bottom:18px}.network-card strong{display:block;font-size:15px}.network-card small{display:block;color:#7a8495;line-height:1.5;margin-top:6px;font-size:11px}.footer{border-top:1px solid #edf0f5;padding:24px 0;color:#7a8495;font-size:12px}.footer .container{display:flex;justify-content:space-between}.footer strong{color:#2a3448}.search-empty,.search-error{padding:15px;color:#7c8799;font-size:13px;background:#fff}.search-error{color:#b44}.primary-btn:disabled{opacity:.65;cursor:wait}.route-result{width:min(760px,calc(100% - 32px));margin:30px auto 0;background:#fff;border:1px solid #e4e9f1;border-radius:24px;padding:24px;box-shadow:0 15px 45px rgba(26,49,89,.08);scroll-margin-top:20px}.result-head{display:flex;justify-content:space-between;gap:15px}.result-head h2{margin:0;font-size:24px;letter-spacing:-.025em}.result-head h2 span{color:#7f8a9d}.result-close{border:0;background:#f3f5f8;border-radius:50%;width:34px;height:34px;font-size:23px;color:#697386;cursor:pointer}.journey-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 12px;border:1px solid #e8ecf2;border-radius:15px;overflow:hidden}.journey-stats div{padding:15px;text-align:center;border-right:1px solid #e8ecf2}.journey-stats div:last-child{border-right:0}.journey-stats strong{display:block;font-size:20px;color:#172236}.journey-stats small{display:block;color:#8791a2;font-size:10px;margin-top:3px}.route-note{background:#f7f9fc;border-radius:10px;padding:10px 12px;color:#7b8494;font-size:11px}.route-visual{margin-top:24px}.route-line-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}.route-line-head small{margin-left:auto;color:#8a94a4}.line-badge{width:11px;height:11px;border-radius:50%}.route-stations{margin-left:5px}.route-station{display:flex;align-items:center;gap:12px;min-height:34px;font-size:14px;font-weight:600}.route-dot{width:12px;height:12px;border:3px solid;border-radius:50%;background:#fff;flex:0 0 12px}.route-line{height:18px;width:3px;margin-left:4px}.transfer-marker{display:flex;align-items:center;gap:7px;margin:13px 0 13px 1px;padding:8px 12px;border-radius:10px;background:#fff6e8;color:#9a691c;font-size:12px;font-weight:700}.transfer-marker span{font-weight:600}@media(max-width:720px){.container{width:min(100% - 20px,1120px)}.site-header{height:64px}.top-nav{display:none}.hero{padding:44px 0 55px}.hero-copy{margin-bottom:23px}.hero h1{font-size:42px}.hero-copy p{font-size:15px}.planner-card{padding:16px;border-radius:20px}.search-stack{grid-template-columns:1fr;gap:7px}.swap-btn{position:absolute;right:34px;margin-top:0;transform:translateY(1px);z-index:4}.field-wrap label{margin-left:10px}.input-row{height:58px}.autocomplete{top:85px}.popular-grid,.network-cards{grid-template-columns:1fr}.section{padding:48px 0}.section h2{font-size:26px}.footer .container{display:block}.footer span{display:block;margin-top:5px}.route-result{width:calc(100% - 20px);padding:17px;border-radius:20px}.result-head h2{font-size:19px}.journey-stats{grid-template-columns:repeat(2,1fr)}.journey-stats div:nth-child(2){border-right:0}.journey-stats div:nth-child(-n+2){border-bottom:1px solid #e8ecf2}.route-station{font-size:13px}}/* =========================================================
   FARE BREAKDOWN
   ========================================================= */

.fare-breakdown {
    margin: 0 0 24px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.fare-breakdown-title {
    margin: 0 0 14px;
    color: #172033;
    font-size: 17px;
    font-weight: 700;
}

.fare-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fare-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 46px;
    padding: 10px 14px;

    background: #ffffff;
    border-radius: 9px;
}

.fare-breakdown-line {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.fare-line-dot {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.fare-line-name {
    color: #172033;
    font-size: 15px;
    line-height: 1.3;
}

.fare-line-amount {
    flex: 0 0 auto;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
}

.fare-breakdown-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 14px;
    padding: 15px 14px 0;

    border-top: 1px solid #dbe3ec;

    color: #172033;
    font-size: 16px;
    font-weight: 600;
}

.fare-breakdown-total strong {
    font-size: 17px;
    font-weight: 700;
}


/* =========================================================
   FARE STATUS
   ========================================================= */

.fare-note-verified {
    background: #ecfdf3 !important;
    color: #167044 !important;
    border: 1px solid #c9f0d9;
}

.fare-note-pending {
    background: #fff7ed !important;
    color: #9a5a08 !important;
    border: 1px solid #fed7aa;
}


/* =========================================================
   MOBILE FARE BREAKDOWN
   ========================================================= */

@media (max-width: 640px) {

    .fare-breakdown {
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 13px;
    }

    .fare-breakdown-title {
        font-size: 16px;
        margin-bottom: 11px;
    }

    .fare-breakdown-row {
        min-height: 44px;
        padding: 9px 11px;
    }

    .fare-line-name,
    .fare-line-amount {
        font-size: 14px;
    }

    .fare-breakdown-total {
        padding: 13px 11px 0;
    }

}
/* =========================================================
   ROUTE CARDS + JOURNEY SUMMARY
   ========================================================= */
.route-option{margin-top:18px;padding:20px;border:1px solid #e4e9f1;border-radius:18px;background:#fff}
.route-option-recommended{border-color:#d7e2f7;box-shadow:0 8px 24px rgba(26,49,89,.05)}
.route-option-alternative{background:#fbfcfe}
.route-option-head{display:flex;align-items:flex-start;gap:12px}
.route-option-title{min-width:0;flex:1}
.route-option-head h3{margin:2px 0 0;font-size:18px;line-height:1.35;letter-spacing:-.02em;word-break:break-word}
.route-option-head h3 span{color:#7f8a9d;padding:0 4px}
.alternative-number{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#eef3fb;color:#4165a4;display:grid;place-items:center;font-weight:800;font-size:13px}

.journey-summary{margin:18px 0 20px;padding:14px 15px;background:#f8fafc;border:1px solid #e4e9f1;border-radius:14px}
.journey-summary-title{font-size:10px;font-weight:800;letter-spacing:.1em;color:#8791a2;text-transform:uppercase;margin-bottom:9px}
.journey-summary-lines{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.journey-summary-item{display:flex;align-items:center;gap:6px;min-width:0}
.journey-summary-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.journey-summary-name{font-size:12px;font-weight:700;color:#263249}
.journey-summary-stops{font-size:11px;color:#7b8494}
.journey-summary-arrow{color:#a1aaba;font-size:14px}
.journey-summary-meta{margin-top:8px;font-size:11px;color:#7b8494}

/* =========================================================
   ALTERNATIVES
   ========================================================= */
.route-alternatives{margin-top:28px;padding-top:6px}
.alternatives-heading{display:flex;gap:12px;align-items:flex-start;margin:0 0 13px}
.alternatives-heading-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:#eef3fb;color:#4165a4;display:grid;place-items:center;font-weight:800}
.alternatives-heading h3{margin:0;font-size:17px;line-height:1.3}
.alternatives-heading p{margin:3px 0 0;color:#7b8494;font-size:12px;line-height:1.5}
.alternative-line-summary{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 16px;padding:11px 13px;background:#fff;border:1px solid #e7ebf1;border-radius:11px}
.alternative-line-item{display:flex;align-items:center;gap:6px;min-width:0}
.alternative-line-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.alternative-line-info{font-size:11px;color:#39465d;font-weight:700}
.alternative-line-arrow{color:#a0a8b6;font-size:12px}
.alternatives-tip{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:12px 13px;background:#f7f9fc;border-radius:11px;color:#71809a;font-size:11px;line-height:1.5}
.alternatives-tip-icon{flex:0 0 auto}

/* =========================================================
   TRANSFER MARKERS
   ========================================================= */
.transfer-marker{display:flex;align-items:center;gap:10px;margin:11px 0;padding:11px 13px;background:#fff7e8;border-radius:11px;color:#9a691c;font-size:12px;font-weight:700}
.transfer-marker span{font-weight:600}
.route-final-transfer{margin-top:2px}
.route-destination-note{margin:3px 0 0 23px;color:#7b8494;font-size:10px;line-height:1.4}

/* =========================================================
   DISTANCE STAT
   ========================================================= */
.journey-stats strong{white-space:nowrap}

/* =========================================================
   MOBILE ROUTE RESULTS
   ========================================================= */
@media (max-width:720px){
    .route-option{padding:16px;border-radius:16px}
    .route-option-head h3{font-size:16px}
    .journey-stats{grid-template-columns:repeat(2,1fr)}
    .journey-stats div:nth-child(2),
    .journey-stats div:nth-child(4){border-right:0}
    .journey-stats div:nth-child(-n+2){border-bottom:1px solid #e8ecf2}
    .journey-stats div:nth-child(3),
    .journey-stats div:nth-child(4){border-bottom:0}
    .journey-stats strong{font-size:17px}
    .journey-stats small{font-size:9px}
    .fare-breakdown-row{gap:10px}
    .fare-line-name{font-size:13px}
    .fare-line-amount{font-size:13px}
    .journey-summary{padding:12px}
    .journey-summary-lines{gap:6px}
    .journey-summary-name{font-size:11px}
    .journey-summary-stops{font-size:10px}
    .alternative-line-summary{gap:6px}
    .alternative-line-info{font-size:10px}
    .transfer-marker{padding:10px 11px;font-size:11px}
}

@media (max-width:430px){
    .route-result{width:calc(100% - 12px);padding:13px;border-radius:17px}
    .route-option{padding:14px}
    .result-head{gap:8px}
    .result-head h2{font-size:17px;line-height:1.35}
    .journey-stats{margin-top:16px}
    .journey-stats div{padding:12px 7px}
    .journey-stats strong{font-size:15px}
    .journey-stats small{font-size:8px}
    .journey-summary-meta{font-size:10px}
    .route-station{font-size:12px;gap:10px}
    .route-line-head{gap:7px}
    .route-line-head strong{font-size:13px}
    .route-line-head small{font-size:10px}
    .fare-breakdown{padding:12px}
    .fare-breakdown-title{font-size:15px}
}

/* Five compact journey stats on desktop: time, stations, changes, distance, fare. */
.journey-stats{grid-template-columns:repeat(5,1fr)}
.journey-stats div{border-right:1px solid #e8ecf2}
.journey-stats div:last-child{border-right:0}

@media (max-width:720px){
    .journey-stats{grid-template-columns:repeat(2,1fr)}
    .journey-stats div:nth-child(2),
    .journey-stats div:nth-child(4){border-right:0}
    .journey-stats div:nth-child(-n+2){border-bottom:1px solid #e8ecf2}
}

/* =========================================================
   CLEAR TRANSFER / CHANGE MARKERS
   ========================================================= */
.transfer-marker.transfer-marker-strong{
    display:flex;
    align-items:center;
    gap:11px;
    margin:14px 0;
    padding:13px 14px;
    background:#fff7e8;
    border:1px solid #f2d59d;
    border-left:4px solid #d99a24;
    border-radius:12px;
    color:#7b5515;
}
.transfer-marker.transfer-marker-strong .transfer-marker-icon{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#d99a24;
    color:#fff;
    font-size:17px;
    font-weight:900;
}
.transfer-marker-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.transfer-marker-content strong{
    color:#8a5b0a;
    font-size:11px;
    letter-spacing:.08em;
}
.transfer-marker-station{
    color:#352b1d;
    font-size:14px;
    font-weight:800;
    line-height:1.3;
}
.transfer-marker-detail{
    color:#8b7654;
    font-size:10px;
    font-weight:600;
    line-height:1.4;
}
.transfer-next-line-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:50%;
    margin-left:auto;
}
.transfer-cross-station{
    background:#fff4e6 !important;
}

@media (max-width:720px){
    .transfer-marker.transfer-marker-strong{
        gap:9px;
        margin:13px 0;
        padding:11px 10px;
    }
    .transfer-marker.transfer-marker-strong .transfer-marker-icon{
        width:28px;
        height:28px;
        flex-basis:28px;
        font-size:15px;
    }
    .transfer-marker-station{font-size:13px}
    .transfer-marker-detail{font-size:9px}
}
/* Phase 1 station-search improvements
   Append this block to /metro/assets/css/metro.css */

.autocomplete {
    max-height: min(420px, 60vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.suggestion {
    min-height: 58px;
    padding: 12px 15px;
    touch-action: manipulation;
}

.suggestion-text {
    min-width: 0;
    flex: 1;
}

.suggestion strong {
    line-height: 1.3;
}

.suggestion small {
    line-height: 1.35;
}

.suggestion.is-active,
.suggestion:focus-visible {
    background: #f1f5fb;
    outline: none;
}

.search-empty,
.search-error {
    padding: 15px;
    font-size: 13px;
    color: #6f7b8d;
}

@media (max-width: 700px) {
    .autocomplete {
        top: calc(100% + 7px);
        border-radius: 13px;
        max-height: 52vh;
    }

    .suggestion {
        min-height: 62px;
        padding: 13px 14px;
    }

    .suggestion strong {
        font-size: 14px;
    }

    .suggestion small {
        font-size: 11px;
    }
}
/* Share route button */
.route-share-wrap {
    margin: 12px 0 16px;
}

.share-route-btn {
    width: 100%;
    min-height: 46px;
    border: 1px solid #dbe3ee;
    border-radius: 11px;
    background: #fff;
    color: #172236;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.share-route-btn:hover {
    background: #f5f8fd;
    border-color: #cbd6e5;
}

.share-route-btn:active {
    transform: translateY(1px);
}