/* ==========================================================
   SOKOLATI TRACKING
   PART 1
   Foundation
========================================================== */

:root{

    --st-primary:#ef6c00;
    --st-primary-dark:#d95d00;
    --st-primary-soft:#fff4eb;

    --st-success:#16a34a;
    --st-warning:#f59e0b;
    --st-danger:#dc2626;
    --st-info:#2563eb;

    --st-text:#111827;
    --st-text-light:#6b7280;

    --st-bg:#f7f8fb;
    --st-card:#ffffff;

    --st-border:#e5e7eb;

    --st-radius:20px;
    --st-radius-sm:14px;

    --st-shadow:
        0 12px 35px rgba(15,23,42,.06);

    --st-shadow-hover:
        0 18px 45px rgba(15,23,42,.12);

}

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

.sokolati-tracking{

    max-width:980px;

    margin:50px auto;

    padding:0 16px;

    color:var(--st-text);

    font-family:Inter,system-ui,-apple-system,sans-serif;

}

.st-website{

    display:flex;

    flex-direction:column;

    gap:28px;

}


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

.st-card{

    background:var(--st-card);

    border-radius:24px;

    padding:38px;

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

}

.st-title{

    font-size:34px;

    font-weight:800;

    margin-bottom:30px;

    letter-spacing:-.5px;

}


/*==========================================================
FORM
==========================================================*/

#sokolati-tracking-form{

    display:grid;

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

    gap:22px;

}

.st-group{

    display:flex;

    flex-direction:column;

}

.st-group label{

    font-size:14px;

    font-weight:700;

    margin-bottom:10px;

}

.st-group input,
.st-group select{

    width:100%;

    height:58px;

    padding:0 18px;

    border:1px solid var(--st-border);

    border-radius:16px;

    background:#fff;

    font-size:15px;

    transition:.25s;

}

.st-group input:hover,
.st-group select:hover{

    border-color:#d1d5db;

}

.st-group input:focus,
.st-group select:focus{

    outline:none;

    border-color:var(--st-primary);

    box-shadow:

        0 0 0 5px rgba(239,108,0,.12);

}

.st-group:last-of-type{

    grid-column:span 2;

}


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

.st-button{

    grid-column:span 2;

    height:60px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:#fff;

    font-size:16px;

    font-weight:700;

    background:

        linear-gradient(

            135deg,

            #ef6c00,

            #ff9800

        );

    transition:.3s;

}

.st-button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 15px 35px rgba(239,108,0,.28);

}

.st-button:active{

    transform:scale(.98);

}

.st-button:disabled{

    opacity:.7;

    cursor:not-allowed;

}


/*==========================================================
RESULT
==========================================================*/

#st-result{

    margin-top:35px;

    animation:stFade .35s;

}


/*==========================================================
HERO
==========================================================*/

.st-hero{

    background:#fff;

    border-radius:24px;

    padding:34px;

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

}

.st-hero-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    padding-bottom:25px;

    border-bottom:1px solid #eef2f7;

}

.st-courier{

    color:var(--st-primary);

    text-transform:uppercase;

    letter-spacing:1px;

    font-size:15px;

    font-weight:700;

}

.st-waybill-big{

    margin-top:10px;

    font-size:34px;

    font-weight:800;

    letter-spacing:-1px;

    word-break:break-word;

}

.st-service-small{

    margin-top:8px;

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

}

.st-hero-info{

    display:grid;

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

    gap:18px;

    margin-top:28px;

}

.st-hero-item{

    padding:18px;

    background:#fafafa;

    border:1px solid var(--st-border);

    border-radius:16px;

    transition:.25s;

}

.st-hero-item:hover{

    transform:translateY(-4px);

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

}

.st-hero-item span{

    display:block;

    margin-bottom:8px;

    font-size:13px;

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

}

.st-hero-item strong{

    display:block;

    font-size:17px;

    font-weight:700;

}


/*==========================================================
BADGE
==========================================================*/

.st-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    color:#fff;

    font-size:13px;

    font-weight:700;

}

.st-success{

    background:#16a34a;

}

.st-warning{

    background:#f59e0b;

}

.st-danger{

    background:#dc2626;

}

.st-info{

    background:#2563eb;

}


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

.st-section-title{

    margin:40px 0 20px;

    font-size:24px;

    font-weight:800;

}


/*==========================================================
ANIMATION
==========================================================*/

@keyframes stFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ==========================================================
   SOKOLATI TRACKING
   PART 2
   Components
========================================================== */


/*==========================================================
ACTION BAR
==========================================================*/

.st-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin:30px 0;

}

.st-action-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:125px;

    height:52px;

    padding:0 22px;

    background:#fff;

    border:1px solid var(--st-border);

    border-radius:16px;

    cursor:pointer;

    color:var(--st-text);

    font-size:14px;

    font-weight:700;

    transition:.25s;

}

.st-action-btn:hover{

    color:var(--st-primary);

    border-color:var(--st-primary);

    transform:translateY(-3px);

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

}

.st-action-btn:active{

    transform:scale(.97);

}


/*==========================================================
HISTORY
==========================================================*/

.st-history{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:30px 0;

}

.st-history h3{

    width:100%;

    margin-bottom:4px;

    font-size:18px;

    font-weight:700;

}

.st-history-item{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:15px 18px;

    background:#fff;

    border:1px solid var(--st-border);

    border-radius:16px;

    cursor:pointer;

    transition:.25s;

}

.st-history-item:hover{

    background:var(--st-primary-soft);

    border-color:var(--st-primary);

    transform:translateY(-3px);

}

.st-history-item strong{

    font-size:15px;

}

.st-history-item small{

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

}


/*==========================================================
PROGRESS
==========================================================*/

.st-progress{

    position:relative;

    display:flex;

    justify-content:space-between;

    margin:45px 0;

}

.st-progress::before{

    content:"";

    position:absolute;

    top:28px;

    left:8%;

    right:8%;

    height:4px;

    border-radius:50px;

    background:#e5e7eb;

}

.st-step{

    position:relative;

    flex:1;

    text-align:center;

    z-index:2;

}

.st-circle{

    width:58px;

    height:58px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

    border:3px solid #d1d5db;

    font-size:22px;

    transition:.3s;

}

.st-step.active .st-circle{

    background:var(--st-success);

    border-color:var(--st-success);

    color:#fff;

}

.st-step.current .st-circle{

    transform:scale(1.12);

    box-shadow:0 0 0 8px rgba(22,163,74,.12);

}

.st-step span{

    display:block;

    margin-top:14px;

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

    font-size:13px;

    font-weight:600;

}

.st-step.active span{

    color:var(--st-text);

}


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

.st-details{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}

.st-item{

    background:#fff;

    border:1px solid var(--st-border);

    border-radius:18px;

    padding:22px;

    transition:.25s;

}

.st-item:hover{

    transform:translateY(-5px);

    border-color:rgba(239,108,0,.35);

    box-shadow:var(--st-shadow-hover);

}

.st-item-icon{

    margin-bottom:18px;

    font-size:28px;

}

.st-item-title{

    margin-bottom:8px;

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

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.st-item-value{

    font-size:18px;

    font-weight:700;

    line-height:1.6;

    word-break:break-word;

}


/*==========================================================
ERROR
==========================================================*/

.st-error{

    display:flex;

    align-items:flex-start;

    gap:14px;

    padding:18px 20px;

    background:#fef2f2;

    border:1px solid #fecaca;

    border-radius:16px;

    color:#991b1b;

}

/* ==========================================================
   SOKOLATI TRACKING
   PART 3
   Timeline • Skeleton • Responsive
==========================================================*/


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

.st-timeline{

    margin-top:40px;

    padding:30px;

    background:#fff;

    border-radius:24px;

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

}

.st-timeline h3{

    margin-bottom:28px;

    font-size:24px;

    font-weight:800;

}

.st-timeline-list{

    position:relative;

    padding-left:34px;

}

.st-timeline-list::before{

    content:"";

    position:absolute;

    left:11px;

    top:8px;

    bottom:8px;

    width:3px;

    background:#e5e7eb;

    border-radius:50px;

}

.st-event{

    position:relative;

    margin-bottom:24px;

    padding:22px 24px;

    background:#fff;

    border:1px solid var(--st-border);

    border-radius:18px;

    transition:.25s;

}

.st-event:last-child{

    margin-bottom:0;

}

.st-event:hover{

    transform:translateX(6px);

    box-shadow:var(--st-shadow-hover);

}

.st-event.latest{

    background:linear-gradient(
        135deg,
        #fffaf5,
        #ffffff
    );

    border:2px solid rgba(239,108,0,.25);

}

.st-event-dot{

    position:absolute;

    left:-35px;

    top:30px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#cbd5e1;

    border:4px solid #fff;

    box-shadow:0 0 0 2px #cbd5e1;

}

.st-event.latest .st-event-dot{

    background:var(--st-primary);

    box-shadow:0 0 0 6px rgba(239,108,0,.18);

}

.st-event-city{

    font-size:18px;

    font-weight:700;

    margin-bottom:8px;

}

.st-event-date{

    margin-bottom:14px;

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

    font-size:13px;

}

.st-event-description{

    line-height:1.8;

    color:#374151;

}


/*==========================================================
EMPTY STATE
==========================================================*/

.st-empty{

    padding:55px 30px;

    text-align:center;

    border:2px dashed var(--st-border);

    border-radius:18px;

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

    background:#fff;

}


/*==========================================================
SKELETON
==========================================================*/

.st-skeleton{

    animation:stFade .3s;

}

.st-skeleton-summary,
.st-skeleton-actions,
.st-skeleton-progress,
.st-skeleton-grid div,
.st-skeleton-timeline div{

    border-radius:18px;

    background:linear-gradient(
        90deg,
        #f3f4f6 25%,
        #e5e7eb 50%,
        #f3f4f6 75%
    );

    background-size:400% 100%;

    animation:stLoading 1.2s linear infinite;

}

.st-skeleton-summary{

    height:180px;

    margin-bottom:24px;

}

.st-skeleton-actions{

    height:56px;

    margin-bottom:24px;

}

.st-skeleton-progress{

    height:100px;

    margin-bottom:24px;

}

.st-skeleton-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

    margin-bottom:24px;

}

.st-skeleton-grid div{

    height:120px;

}

.st-skeleton-timeline{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.st-skeleton-timeline div{

    height:90px;

}

@keyframes stLoading{

    from{

        background-position:100% 0;

    }

    to{

        background-position:-100% 0;

    }

}


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

@media (max-width:768px){

    .st-card{

    padding:18px;

    border-radius:18px;

    }
    
    .st-actions{
    
        gap:10px;
    
    }

    .st-title{

        font-size:28px;

    }

    #sokolati-tracking-form{

        grid-template-columns:1fr;

    }

    .st-group:last-of-type,
    .st-button{

        grid-column:span 1;

    }

    .st-hero{

         padding:18px;

    border-radius:18px;

    }

    .st-hero-top{

        flex-direction:column;

        gap:20px;

    }

    .st-waybill-big{

        font-size:26px;

    }

    .st-hero-info{

        grid-template-columns:1fr;

    }

    .st-details{

        grid-template-columns:1fr;

    }

    .st-progress{

        flex-direction:column;

        gap:22px;

    }

    .st-progress::before{

        display:none;

    }
    
    .st-item{

    padding:18px;

}

    .st-step{

        display:flex;

        align-items:center;

        gap:18px;

        text-align:left;

    }

    .st-circle{

        margin:0;

        flex-shrink:0;

    }

    .st-step span{

        margin:0;

    }

    .st-actions{

        display:grid;

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

    }

    .st-action-btn{

        width:100%;

        min-width:unset;

    }

    .st-history{

        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:8px;

        -webkit-overflow-scrolling:touch;

    }

    .st-history-item{

        min-width:220px;

        flex:0 0 auto;

    }

    .st-timeline{

         padding:18px;

    border-radius:18px;

    }
    
    /*==========================================================
EXTRA SMALL DEVICE
==========================================================*/

@media (max-width:480px){

    .sokolati-tracking{

        padding:0 12px;

    }

    .st-title{

        font-size:24px;

        text-align:center;

    }

    .st-actions{

        grid-template-columns:1fr;

    }

    .st-action-btn{

        width:100%;

        justify-content:center;

    }

    .st-waybill-big{

        font-size:22px;

        line-height:1.35;

        word-break:break-all;

    }

    .st-hero-info{

        gap:12px;

    }

    .st-item{

        padding:16px;

    }

    .st-item-value{

        font-size:16px;

    }

    .st-circle{

        width:48px;

        height:48px;

        font-size:18px;

    }

    .st-step{

        gap:14px;

    }

    .st-step span{

        font-size:12px;

    }

    .st-history-item{

        min-width:180px;

    }

}

}

/* ==========================================================
   SOKOLATI TRACKING
   PART 4
   PDF
==========================================================*/


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

.st-pdf{

    width:210mm;

    padding:10mm;

    background:#fff;

    color:#111827;

    font-family:Arial,Helvetica,sans-serif;

    box-sizing:border-box;

}


/*==========================================================
PDF HEADER
==========================================================*/

.st-pdf-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    margin-bottom:28px;

    padding-bottom:18px;

    border-bottom:3px solid var(--st-primary);

    page-break-after:avoid;

}

.st-pdf-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.st-pdf-brand img{

    width:64px;

    height:auto;

}

.st-pdf-brand h1{

    margin:0;

    font-size:24px;

    font-weight:700;

}

.st-pdf-brand p{

    margin-top:6px;

    font-size:13px;

    color:#6b7280;

}


/*==========================================================
PDF SUMMARY
==========================================================*/

.st-pdf-summary{

    display:grid;

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

    gap:18px;

    margin-bottom:28px;

}

.st-pdf-summary-item{

    padding:14px 16px;

    border:1px solid #d1d5db;

    border-radius:10px;

}

.st-pdf-summary-item span{

    display:block;

    margin-bottom:6px;

    font-size:11px;

    text-transform:uppercase;

    color:#6b7280;

}

.st-pdf-summary-item strong{

    font-size:15px;

    font-weight:700;

}


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

.st-pdf h2{

    margin:28px 0 14px;

    font-size:18px;

    font-weight:700;

    page-break-after:avoid;

}


/*==========================================================
TABLE
==========================================================*/

.st-pdf-table{

    width:100%;

    margin-bottom:26px;

    border-collapse:collapse;

    font-size:13px;

    page-break-inside:avoid;

}

.st-pdf-table th{

    width:180px;

    padding:10px 12px;

    text-align:left;

    vertical-align:top;

    background:#f8fafc;

    border:1px solid #d1d5db;

    font-weight:700;

}

.st-pdf-table td{

    padding:10px 12px;

    vertical-align:top;

    border:1px solid #d1d5db;

}


/*==========================================================
TIMELINE TABLE
==========================================================*/

.st-pdf-history{

    width:100%;

    border-collapse:collapse;

    font-size:12px;

    page-break-inside:auto;

}

.st-pdf-history thead{

    background:var(--st-primary);

    color:#fff;

}

.st-pdf-history th{

    padding:10px;

    text-align:left;

    border:1px solid #d1d5db;

}

.st-pdf-history td{

    padding:10px;

    border:1px solid #d1d5db;

    vertical-align:top;

    line-height:1.5;

}

.st-pdf-history tr{

    page-break-inside:avoid;

}


/*==========================================================
PDF BADGE
==========================================================*/

.st-pdf-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    color:#fff;

}

.st-pdf-badge.st-success{

    background:#16a34a;

}

.st-pdf-badge.st-warning{

    background:#f59e0b;

}

.st-pdf-badge.st-danger{

    background:#dc2626;

}

.st-pdf-badge.st-info{

    background:#2563eb;

}


/*==========================================================
FOOTER
==========================================================*/

.st-pdf-footer{

    margin-top:30px;

    padding-top:16px;

    border-top:1px solid #d1d5db;

    text-align:center;

    font-size:11px;

    color:#6b7280;

    page-break-before:avoid;

}


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

.st-pdf-header,
.st-pdf-summary,
.st-pdf-table{

    break-inside:avoid;

}

.st-pdf-history tr{

    break-inside:avoid;

}


/*==========================================================
PRINT
==========================================================*/

@media print{

    body{

        background:#fff;

    }

    .st-pdf{

        width:100%;

        min-height:auto;

        padding:0;

        margin:0;

        box-shadow:none;

    }

}