/*==========================================================
    TRACKING SYSTEM
    responsive.css
==========================================================*/

/*==========================================================
    1400px
==========================================================*/

@media (max-width:1400px){

    .container,
    .tracking-container,
    nav,
    .footer-container{

        width:min(1200px,94%);

    }

}


/*==========================================================
    1200px
==========================================================*/

@media (max-width:1200px){

    h1{

        font-size:3.4rem;

    }

    h2{

        font-size:2rem;

    }

    .tracking-card{

        grid-template-columns:1fr;

    }

    .tracking-right{

        order:-1;

    }

    .hero-info{

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

    }

    .footer-container{

        grid-template-columns:1fr 1fr;

    }

    .package-details{

        grid-template-columns:1fr;

    }

}


/*==========================================================
    992px
==========================================================*/

@media (max-width:992px){

    header{

        position:relative;

    }

    nav{

        flex-wrap:wrap;

        height:auto;

        padding:20px 0;

        gap:20px;

    }

    nav ul{

        width:100%;

        justify-content:center;

        flex-wrap:wrap;

        gap:20px;

    }

    .hero{

        min-height:auto;

        padding:80px 20px;

    }

    .hero-info{

        grid-template-columns:1fr;

    }

    .tracking-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .status-box{

        align-items:flex-start;

    }

    .package-grid{

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

    }

    .steps{

        flex-wrap:wrap;

    }

    .step{

        min-width:180px;

    }

}


/*==========================================================
    768px
==========================================================*/

@media (max-width:768px){

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.4rem;

    }

    .hero{

        text-align:center;

    }

    .hero p{

        font-size:1rem;

    }

    .search{

        flex-direction:column;

        border-radius:24px;

        padding:20px;

        gap:15px;

    }

    .search input{

        width:100%;

        text-align:center;

        padding:16px;

    }

    .search button{

        width:100%;

    }

    .tracking-left{

        padding:30px;

    }

    .tracking-right{

        padding:30px;

    }

    .package-grid{

        grid-template-columns:1fr;

    }

    .history-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        display:flex;

        justify-content:center;

    }

}


/*==========================================================
    576px
==========================================================*/

@media (max-width:576px){

    body{

        font-size:15px;

    }

    .container{

        width:94%;

    }

    nav{

        justify-content:center;

    }

    .logo{

        flex-direction:column;

        gap:8px;

    }

    .logo img{

        height:50px;

    }

    .hero{

        padding:60px 15px;

    }

    .tracking-page{

        padding:30px 0;

    }

    .tracking-card{

        border-radius:18px;

    }

    .tracking-left{

        padding:22px;

    }

    .tracking-right{

        padding:22px;

    }

    .card{

        padding:22px;

    }

    .package-item{

        padding:18px;

    }

    .info-box{

        padding:18px;

    }

    .detail{

        flex-direction:column;

        gap:8px;

        align-items:flex-start;

    }

    .summary-item{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .timeline{

        padding-left:5px;

    }

    .timeline::before{

        left:13px;

    }

    .timeline-item{

        gap:15px;

    }

    .timeline-icon{

        width:30px;

        height:30px;

        min-width:30px;

        font-size:13px;

    }

    .event-card{

        flex-direction:column;

        align-items:flex-start;

    }

    .event-date{

        text-align:left;

    }

    .map{

        height:250px;

    }

}


/*==========================================================
    420px
==========================================================*/

@media (max-width:420px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.5rem;

    }

    .hero{

        padding:45px 10px;

    }

    .search{

        padding:15px;

    }

    .search input{

        font-size:14px;

    }

    .search button{

        font-size:14px;

        padding:14px;

    }

    .tracking-title h2{

        font-size:24px;

    }

    .tracking-number{

        font-size:14px;

    }

    .status-pill{

        width:100%;

        text-align:center;

    }

    .badge{

        font-size:11px;

    }

    .btn{

        width:100%;

    }

}


/*==========================================================
    LANDSCAPE
==========================================================*/

@media (max-height:600px){

    .hero{

        min-height:auto;

        padding:50px 20px;

    }

}


/*==========================================================
    REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==========================================================
    DARK MODE (Preparado)
==========================================================*/

@media (prefers-color-scheme:dark){

    body.dark-auto{

        background:#0f172a;

        color:#f8fafc;

    }

}