body{

font-family:Arial,sans-serif;

background:#f5f5f5;

margin:0;

}

.tracking{

padding:80px 20px;

}

.tracking-container{

max-width:650px;

margin:auto;

background:white;

padding:40px;

border-radius:15px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}

h1{

text-align:center;

color:#b8860b;

margin-bottom:10px;

}

.tracking p{

text-align:center;

color:#666;

margin-bottom:30px;

}

label{

display:block;

margin:15px 0 8px;

font-weight:bold;

}

input{

width:100%;

padding:14px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

}

button{

width:100%;

margin-top:25px;

padding:16px;

background:#b8860b;

color:white;

border:none;

border-radius:8px;

font-size:18px;

cursor:pointer;

}

button:hover{

background:#9a7008;

}

#trackingResult{

margin-top:30px;

}

.result-card{

margin-top:20px;

background:white;

padding:25px;

border-left:6px solid #b8860b;

border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.result-card h2{

color:#0b7a3e;

margin-bottom:20px;

}

.result-card p{

margin:10px 0;

text-align:left;

}

.error{

margin-top:20px;

background:#ffe5e5;

padding:15px;

border-radius:8px;

color:red;

font-weight:bold;

text-align:center;

}

.status-badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    color:#fff;

}

.pending{

    background:#ff9800;

}

.confirmed{

    background:#28a745;

}

.rejected{

    background:#dc3545;

}

.paid{

    background:#007bff;

}

.unpaid{

    background:#6c757d;

}

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

@media (max-width: 992px) {

    .tracking {

        padding: 70px 30px;

    }

    .tracking-container {

        max-width: 90%;

        padding: 35px;

    }

    h1 {

        font-size: 32px;

    }

    .tracking p {

        font-size: 16px;

    }

    input {

        padding: 15px;

        font-size: 16px;

    }

    button {

        padding: 16px;

        font-size: 17px;

    }

    

}

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

@media (max-width: 768px) {

    .tracking {

        padding: 50px 20px;

    }

    .tracking-container {

        width: 100%;

        padding: 25px;

        border-radius: 12px;

    }

    h1 {

        font-size: 28px;

    }

    .tracking p {

        font-size: 15px;

        line-height: 1.7;

    }

    label {

        font-size: 15px;

    }

    input {

        padding: 14px;

        font-size: 15px;

    }

    button {

        width: 100%;

        padding: 15px;

        font-size: 16px;

    }

    .result-card {

        padding: 20px;

    }

    .result-card h2 {

        font-size: 22px;

    }

    .result-card p {

        font-size: 15px;

        line-height: 1.7;

        word-break: break-word;

    }

}

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

@media (max-width: 480px) {

    .tracking {

        padding: 35px 15px;

    }

    .tracking-container {

        padding: 18px;

        border-radius: 10px;

    }

    h1 {

        font-size: 24px;

    }

    .tracking p {

        font-size: 14px;

    }

    label {

        font-size: 14px;

    }

    input {

        padding: 13px;

        font-size: 14px;

    }

    button {

        padding: 14px;

        font-size: 15px;

    }

    .result-card {

        padding: 15px;

    }

    .result-card h2 {

        font-size: 20px;

    }

    .result-card p {

        font-size: 14px;

    }

}