*{box-sizing:border-box}

:root{
    --orange:#f28c28;
    --navy:#173b6d;
    --blue:#1769aa;
    --bg:#fffaf5;
    --border:#eadfd4;
    --muted:#6f7780;
}

html,body{
    margin:0;
    padding:0
}

body{
    background:linear-gradient(180deg,#fff 0,#fffaf5 100%);
    color:#20252b;
    font-family:Arial,"Tahoma",sans-serif;
}

.trip-page{
    max-width:760px;
    margin:0 auto;
    padding:18px 14px 50px
}


/* ==============================
   Breadcrumbs - shared with articles / areas
   ============================== */

.trip-breadcrumbs{
    width:100%;
    margin:0 0 8px;
    padding:0;
    direction:rtl
}

.trip-breadcrumbs ol{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    margin:0;
    padding:0;
    list-style:none
}

.trip-breadcrumbs li{
    display:inline-flex;
    align-items:center;
    min-width:0;
    margin:0;
    padding:0;
    color:#777;
    font-size:15px;
    line-height:1.7;
    font-weight:500
}

.trip-breadcrumbs li.trip-breadcrumb-separator{
    flex:0 0 auto;
    margin:0 9px;
    color:#999;
    font-size:17px;
    line-height:1;
    font-weight:400;
    user-select:none
}

.trip-breadcrumbs a{
    display:inline;
    color:#d96f0b;
    font-size:inherit;
    font-weight:700;
    line-height:inherit;
    text-decoration:none
}

.trip-breadcrumbs a:hover{
    color:#b95d08;
    text-decoration:underline
}

.trip-breadcrumbs li[aria-current="page"]{
    color:#666;
    font-weight:600;
    overflow-wrap:anywhere;
    word-break:break-word
}


.trip-head{
    padding:8px 4px 16px
}

.brand-mark{
    display:flex;
    align-items:center;
    gap:11px
}

.brand-logo{
    width:44px;
    height:44px;
    border-radius:13px;
    background:var(--orange);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:27px;
    font-weight:800
}

.trip-head h1{
    margin:0;
    color:var(--navy);
    font-size:24px
}

.trip-head p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px
}


.planner{
    background:#fff;
    border:1px solid var(--border);
    border-radius:20px;
    padding:14px;
    box-shadow:0 8px 25px rgba(23,59,109,.06)
}

.service-tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-bottom:16px
}

.service-tab{
    border:1px solid #e6e6e6;
    background:#fafafa;
    color:#53606b;
    border-radius:12px;
    padding:10px 4px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    font-size:12px
}

.service-tab span{
    font-size:20px;
    line-height:1
}

.service-tab.is-active{
    border-color:var(--orange);
    background:#fff5ea;
    color:var(--navy)
}


.fields{
    display:grid;
    grid-template-columns:1fr 42px 1fr;
    align-items:end;
    gap:8px
}

.station-field{
    position:relative;
    z-index:1
}

.station-field:focus-within{
    z-index:30
}

.station-field label{
    display:block;
    font-weight:700;
    color:var(--navy);
    font-size:13px;
    margin:0 0 6px
}

.input-wrap{
    position:relative
}

.input-wrap input[type=text]{
    width:100%;
    height:50px;
    border:1px solid #d9dfe5;
    border-radius:13px;
    padding:0 38px 0 38px;
    font-size:17px;
    font-weight:700;
    color:#243b5a;
    outline:none;
    background:#fff
}

.input-wrap input[type=text]::placeholder{
    font-size:16px;
    font-weight:600;
    color:#8a9199;
    opacity:1
}

.input-wrap input[type=text]:focus{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(242,140,40,.12)
}

.pin{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    font-size:10px;
    color:var(--orange);
    z-index:1
}

.pin-to{
    color:var(--navy)
}

.clear-station{
    position:absolute;
    left:9px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    border:0;
    border-radius:50%;
    background:#fee2e2;
    color:#dc2626;
    font-size:21px;
    line-height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:3;
    opacity:0;
    pointer-events:none;
    transition:.15s ease
}

.station-field:focus-within .clear-station,
.input-wrap input:not(:placeholder-shown) + .clear-station{
    opacity:1;
    pointer-events:auto
}

.swap-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid #dce2e7;
    background:#fff;
    color:var(--navy);
    font-size:20px;
    cursor:pointer;
    margin-bottom:4px
}

.suggestions{
    position:absolute;
    z-index:100;
    top:calc(100% + 8px);
    right:0;
    left:0;
    max-height:min(360px,calc(100dvh - 250px));
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 12px 25px rgba(0,0,0,.10);
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    display:none
}

.suggestions.show{
    display:block
}

.suggestion{
    width:100%;
    border:0;
    border-bottom:1px solid #f1f1f1;
    background:#fff;
    text-align:right;
    padding:12px;
    cursor:pointer
}

.suggestion:last-child{
    border-bottom:0
}

.suggestion:hover{
    background:#fff7ee
}

.suggestion-main{
    display:flex;
    align-items:center;
    gap:8px
}

.suggestion-train{
    font-size:15px
}

.suggestion strong{
    display:block;
    color:var(--navy);
    font-size:14px
}

.suggestion small{
    color:#89919a;
    font-size:11px;
    display:block;
    margin-right:25px;
    margin-top:3px
}

.empty-suggestion{
    text-align:center;
    cursor:default
}


/* ==============================
   Search button
   ============================== */

.search-btn{
    width:100%;
    height:50px;
    border:0;
    border-radius:13px;
    margin-top:15px;
    background:#a95700;
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer
}

.search-btn:disabled{
    opacity:.6
}

.hint{
    font-size:11px;
    color:#8b9298;
    margin:9px 2px 0
}


.results{
    scroll-margin-top:12px;
    margin-top:16px;
    margin-bottom:18px
}

.loading,
.empty,
.error{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    text-align:center;
    color:var(--muted)
}


/* ==============================
   ROUTE RESULTS V2
   ============================== */

.route-card-v2{
    background:#fff;
    border:1px solid #e8e0d8;
    border-radius:22px;
    padding:16px;
    margin-bottom:16px;
    overflow:hidden;
    box-shadow:0 7px 22px rgba(23,59,109,.045)
}

.route-card-v2.route-shortest{
    border-top:4px solid #2e7d32
}

.route-card-v2.route-longest{
    border-top:4px solid #9aa6b2
}

.route-header-v2{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:14px;
    border-bottom:1px solid #f0ece8
}

.route-label{
    font-size:18px;
    font-weight:900;
    color:var(--navy);
    line-height:1.6
}

.route-label span{
    font-size:17px
}

.route-badge{
    display:inline-flex;
    margin-top:5px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800
}

.badge-shortest{
    background:#eaf7ee;
    color:#27723a
}

.badge-alternative{
    background:#f1f4f7;
    color:#596775
}

.route-time-big{
    font-size:13px;
    color:#8a6b4b;
    white-space:nowrap
}

.route-time-big strong{
    font-size:20px;
    color:var(--orange)
}


.route-meta-v2{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    padding:12px 0;
    border-bottom:1px solid #f0ece8
}

.meta-card{
    min-width:0;
    background:#f8fafb;
    border:1px solid #edf0f2;
    border-radius:13px;
    padding:8px 5px;
    text-align:center
}

.meta-icon{
    display:block;
    font-size:17px;
    line-height:1.1;
    margin-bottom:3px
}

.meta-card small{
    display:block;
    color:#7b858e;
    font-size:10px;
    margin-bottom:2px
}

.meta-card strong{
    display:block;
    color:#263849;
    font-size:12px;
    white-space:nowrap
}

.meta-fare{
    background:#fff8ef;
    border-color:#f9dfbf
}


.route-body-v2{
    padding-top:11px
}

.route-timeline{
    position:relative;
    padding:2px 2px 3px 0
}

.route-timeline:before{
    content:"";
    position:absolute;
    right:18px;
    top:44px;
    bottom:22px;
    width:4px;
    border-radius:8px;
    background:#e7eaed;
    z-index:0
}

.timeline-line-head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:8px;
    margin:6px 0 2px;
    padding:7px 10px;
    border-radius:10px;
    background:color-mix(in srgb,var(--line-color) 9%,white);
    color:var(--line-color);
    font-size:14px
}

.timeline-line-icon{
    font-size:17px
}

.timeline-station{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:47px;
    padding:3px 0
}

.station-marker{
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff;
    border:4px solid var(--line-color);
    color:var(--line-color);
    font-size:11px;
    font-weight:900;
    box-shadow:0 1px 5px rgba(0,0,0,.08)
}

.timeline-station.is-start .station-marker,
.timeline-station.is-end .station-marker{
    background:var(--line-color);
    color:#fff
}

.station-content{
    flex:1;
    min-width:0
}

.station-name{
    font-size:15px;
    font-weight:800;
    color:#263849;
    line-height:1.55
}

.station-notes{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:2px
}

.start-label,
.end-label{
    font-size:10px;
    font-weight:800;
    padding:2px 7px;
    border-radius:999px
}

.start-label{
    background:#eaf7ee;
    color:#27723a
}

.end-label{
    background:#fff0e0;
    color:#b55a0a
}

.facility-badge{
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:10px;
    font-weight:800;
    padding:3px 7px;
    border-radius:999px
}

.subscription-badge{
    background:#fff6d8;
    color:#8a6410;
    border:1px solid #f0df9b
}


.timeline-transfer{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:9px;
    margin:3px 0;
    padding:7px 9px;
    border:1px solid #dce7f1;
    border-radius:11px;
    background:#f7fbff
}

.transfer-marker{
    flex:0 0 32px;
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#1769aa;
    color:#fff;
    font-weight:900
}

.transfer-content{
    min-width:0;
    flex:1
}

.transfer-station{
    font-size:13px;
    font-weight:900;
    color:#24394d;
    line-height:1.3
}

.transfer-label{
    font-size:9px;
    color:#7c8994;
    margin-top:1px
}

.transfer-lines{
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
    margin-top:3px
}

.transfer-lines span{
    font-size:9px;
    font-weight:800;
    color:var(--line-color);
    background:#fff;
    border:1px solid color-mix(in srgb,var(--line-color) 30%,#fff);
    padding:2px 6px;
    border-radius:999px
}

.transfer-lines b{
    font-size:10px;
    color:#7a8792
}

.timeline-transfer .facility-badge{
    margin-top:3px
}


@media(max-width:560px){

    .trip-page{
        padding:10px 10px 35px
    }

    .trip-head h1{
        font-size:21px
    }

    .service-tabs{
        gap:5px
    }

    .service-tab{
        padding:8px 2px
    }

    .service-tab span{
        font-size:18px
    }

    .fields{
        grid-template-columns:1fr
    }

    .swap-btn{
        margin:0 auto;
        transform:rotate(90deg)
    }

    .suggestions{
        top:calc(100% + 8px);
        max-height:min(330px,calc(100dvh - 230px))
    }

    .route-card-v2{
        padding:13px;
        border-radius:19px
    }

    .route-header-v2{
        align-items:center
    }

    .route-label{
        font-size:17px
    }

    .route-time-big{
        font-size:11px
    }

    .route-time-big strong{
        font-size:18px
    }

    .route-meta-v2{
        gap:5px
    }

    .meta-card{
        padding:7px 3px
    }

    .meta-icon{
        font-size:15px
    }

    .meta-card small{
        font-size:9px
    }

    .meta-card strong{
        font-size:11px
    }

    .route-timeline:before{
        right:17px;
        top:43px
    }

    .station-marker{
        flex-basis:34px;
        width:34px;
        height:34px
    }

    .timeline-station{
        gap:10px
    }

    .station-name{
        font-size:14px
    }

    .timeline-line-head{
        font-size:13px
    }

    .timeline-transfer{
        padding:8px
    }

    .transfer-station{
        font-size:14px
    }

    .segment-count{
        display:none
    }
}


/* ==============================
   FINAL TIMELINE POLISH
   ============================== */

.timeline-transfer{
    background:#f4f9fd;
    border-color:#d7e5ef;
    border-right:4px solid var(--line-color)
}

.interchange-badge{
    background:#eef7f1;
    color:#2f6d46;
    border:1px solid #cfe7d7
}

.interchange-badge b{
    color:var(--line-color)
}

.timeline-branch{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:8px;
    margin:3px 0;
    padding:6px 9px;
    border-radius:10px;
    background:color-mix(in srgb,var(--line-color) 7%,white);
    border-right:3px solid var(--line-color)
}

.branch-marker{
    font-size:18px;
    font-weight:900;
    color:var(--line-color)
}

.branch-content{
    display:flex;
    align-items:center;
    gap:7px
}

.branch-content strong{
    font-size:12px;
    color:#263849
}

.branch-content span{
    font-size:9px;
    color:#7b858e
}


.map-retry{
    display:block;
    margin:10px auto 0;
    min-height:40px;
    padding:8px 16px;
    border:1px solid #d97706;
    border-radius:9px;
    background:#fff5e9;
    color:#8a5200;
    font-weight:800;
    cursor:pointer
}

.map-retry:hover{
    background:#fff0dc
}


/* v11: خريطة اختيار المحطة = خط واحد فقط لكل وسيلة، بدون فروع أو اتجاهات */

.map-service{
    gap:10px
}

.map-line{
    overflow:hidden
}

.map-stations{
    min-height:96px;
    padding:12px 3px 13px
}

.map-station-order{
    display:none
}

.map-station{
    min-height:72px
}


/* الخط الثالث هو الأخضر */

.map-line[data-line-id="3"]{
    --map-line-color:#009B55!important
}


/* نتائج الرحلة تظهر مباشرة بعد الحاسبة وقبل خريطة المحطات */

.results{
    scroll-margin-top:12px;
    margin-top:16px;
    margin-bottom:18px
}

.trip-result-note{
    margin:2px 2px 10px;
    color:#7b858e;
    font-size:11px;
    line-height:1.8
}