/*==================================================
RAHBAN TIR
TRACKING PAGE
Part 1
==================================================*/


/*==================================================
ROOT
==================================================*/

:root{

    --rt-primary:#0B1F3A;

    --rt-secondary:#C1121F;

    --rt-bg:#F5F7FA;

    --rt-white:#FFFFFF;

    --rt-border:#E5E7EB;

    --rt-text:#1F2937;

    --rt-text-light:#6B7280;

    --rt-shadow:0 10px 30px rgba(0,0,0,.08);

    --rt-radius:20px;

}


/*==================================================
PAGE
==================================================*/

.rt-tracking-page{

    background:var(--rt-bg);

    padding:60px 0 80px;

    min-height:100vh;

}


/*==================================================
CONTAINER
==================================================*/

.rt-container{

    width:min(1280px,92%);

    margin:auto;

}


/*==================================================
SEARCH BOX
==================================================*/

.search-box{

    background:var(--rt-white);

    border-radius:24px;

    box-shadow:var(--rt-shadow);

    padding:42px;

    margin-bottom:40px;

}


/*==================================================
TITLE
==================================================*/

.search-box h2{

    margin:0;

    font-size:32px;

    font-weight:800;

    color:var(--rt-primary);

    text-align:center;

}


/*==================================================
DESCRIPTION
==================================================*/

.search-box p{

    margin:18px 0 32px;

    color:var(--rt-text-light);

    font-size:15px;

    text-align:center;

    line-height:1.9;

}


/*==================================================
SEARCH ROW
==================================================*/

.search-row{

    display:flex;

    align-items:center;

    gap:16px;

}


/*==================================================
INPUT
==================================================*/

.search-row input{

    flex:1;

    height:58px;

    border:2px solid var(--rt-border);

    border-radius:16px;

    padding:0 22px;

    font-size:16px;

    font-family:Vazirmatn,sans-serif;

    background:#fff;

    transition:.35s;

}


.search-row input:focus{

    outline:none;

    border-color:var(--rt-secondary);

    box-shadow:0 0 0 4px rgba(193,18,31,.08);

}


.search-row input::placeholder{

    color:#9CA3AF;

}


/*==================================================
BUTTON
==================================================*/

.search-row button{

    min-width:170px;

    height:58px;

    border:none;

    border-radius:16px;

    background:var(--rt-secondary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}


.search-row button:hover{

    background:var(--rt-primary);

    transform:translateY(-2px);

}


.search-row button:active{

    transform:scale(.98);

}


/*==================================================
LOADING
==================================================*/

.loading-panel{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--rt-shadow);

    padding:40px;

    text-align:center;

}


.loading-step{

    padding:10px 0;

    color:var(--rt-primary);

    font-weight:600;

}

/*==================================================
DASHBOARD
==================================================*/

.dashboard{

    margin-bottom:40px;

}


/*==================================================
SECTION TITLE
==================================================*/

.section-title{

    margin:0 0 28px;

    font-size:28px;

    font-weight:800;

    color:var(--rt-primary);

}


/*==================================================
GRID
==================================================*/

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}


/*==================================================
INFO CARD
==================================================*/

.info-card{

    background:var(--rt-white);

    border-radius:20px;

    box-shadow:var(--rt-shadow);

    padding:24px;

    border:1px solid rgba(11,31,58,.05);

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:110px;

}


/*==================================================
CARD HOVER
==================================================*/

.info-card:hover{

    transform:translateY(-4px);

    border-color:rgba(193,18,31,.15);

    box-shadow:0 14px 36px rgba(0,0,0,.10);

}


/*==================================================
LABEL
==================================================*/

.info-card .label{

    display:block;

    font-size:14px;

    font-weight:600;

    color:var(--rt-text-light);

    margin-bottom:12px;

}


/*==================================================
VALUE
==================================================*/

.info-card .value{

    display:block;

    font-size:22px;

    font-weight:800;

    color:var(--rt-primary);

    line-height:1.6;

    word-break:break-word;

}


/*==================================================
STATUS COLORS
==================================================*/

.status-success{

    color:#16A34A !important;

}

.status-warning{

    color:#D97706 !important;

}

.status-danger{

    color:#DC2626 !important;

}

.status-info{

    color:#2563EB !important;

}


/*==================================================
EMPTY VALUE
==================================================*/

.info-card .value:empty::before{

    content:"—";

    color:#B8BEC7;

}


/*==================================================
TABLET
==================================================*/

@media(max-width:992px){

    .dashboard-grid{

        gap:18px;

    }

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

    .dashboard-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:24px;

    }

    .info-card{

        min-height:95px;

        padding:20px;

    }

    .info-card .value{

        font-size:18px;

    }

}


/*==================================================
SMALL MOBILE
==================================================*/

@media(max-width:480px){

    .section-title{

        font-size:21px;

    }

    .info-card{

        padding:18px;

    }

}

/*==================================================
MAP + TIMELINE LAYOUT
==================================================*/

.map-section,
.timeline-section{

    background:var(--rt-white);

    border-radius:24px;

    box-shadow:var(--rt-shadow);

    border:1px solid rgba(11,31,58,.05);

    overflow:hidden;

    margin-bottom:32px;

}


/*==================================================
MAP
==================================================*/



#map{

    width:100%;

    height:500px;

    background:#EEF2F7;

}

/*==================================================
LEAFLET
==================================================*/

.leaflet-container{

    width:100%;

    height:100%;

    font-family:Vazirmatn,sans-serif;

}


.leaflet-popup-content{

    direction:rtl;

    text-align:right;

    font-family:Vazirmatn,sans-serif;

}


.leaflet-control-zoom{

    border-radius:12px !important;

    overflow:hidden;

}


/*==================================================
TIMELINE HEADER
==================================================*/

.timeline-header{

    padding:24px 28px 18px;

    border-bottom:1px solid var(--rt-border);

}


.timeline-header .section-title{

    margin:0;

}


.timeline-note{

    display:block;

    margin-top:8px;

    font-size:13px;

    color:var(--rt-text-light);

}


/*==================================================
TIMELINE WRAPPER
==================================================*/

.timeline-wrapper{

    height:500px;

    overflow-y:auto;

    padding:24px;

}


/*==================================================
SCROLLBAR
==================================================*/

.timeline-wrapper::-webkit-scrollbar{

    width:8px;

}

.timeline-wrapper::-webkit-scrollbar-track{

    background:#EEF2F7;

    border-radius:20px;

}

.timeline-wrapper::-webkit-scrollbar-thumb{

    background:var(--rt-primary);

    border-radius:20px;

}

.timeline-wrapper::-webkit-scrollbar-thumb:hover{

    background:var(--rt-secondary);

}


/*==================================================
TIMELINE ROOT
==================================================*/

.timeline{

    position:relative;

}


/*==================================================
TIMELINE ITEM
==================================================*/

.timeline-item{

    position:relative;

    padding-right:42px;

    padding-bottom:34px;

}

.timeline-item:last-child{

    padding-bottom:0;

}


/*==================================================
LINE
==================================================*/

.timeline-item::before{

    content:"";

    position:absolute;

    right:8px;

    top:18px;

    width:2px;

    height:100%;

    background:#D9DDE3;

}

.timeline-item:last-child::before{

    display:none;

}


/*==================================================
DOT
==================================================*/

.timeline-item::after{

    content:"";

    position:absolute;

    right:0;

    top:2px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--rt-secondary);

    border:4px solid rgba(193,18,31,.18);

}


/*==================================================
EVENT TITLE
==================================================*/

.timeline-item h4{

    margin:0 0 6px;

    font-size:16px;

    font-weight:700;

    color:var(--rt-primary);

}


/*==================================================
EVENT DATE
==================================================*/

.timeline-item .date{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    color:var(--rt-text-light);

}


/*==================================================
EVENT TEXT
==================================================*/

.timeline-item p{

    margin:0;

    font-size:14px;

    line-height:1.9;

    color:var(--rt-text);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .map{

        height:340px;

    }

    .timeline-wrapper{

        height:340px;

    }

}