/* General Styles */
body {
    background-color: #f9fafc; /* Light background for contrast */
    font-family: Arial, sans-serif;
    color: #333;
}

.order-tracking {
    max-width: 800px;
    height:auto;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* White background for the container */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft 3D effect */
    border: 1px solid #e3e6f0; /* Subtle border for contrast */
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

    .order-tracking:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
        transform: translateY(-5px); /* Slight lift effect */
    }

    .order-tracking h1 {
        font-size: 2rem;
        color: #007bff; /* Primary blue color */
        margin-bottom: 15px;
        text-align: center;
        font-weight:bold;
    }

    .order-tracking p {
        font-size: 1rem;
        text-align: center;
        color: #666;
        margin-bottom: 25px;
    }

/* Form Styles */
#orderTrackingForm {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Add spacing between form elements */
}

    #orderTrackingForm .form-group {
        position: relative;
    }

    #orderTrackingForm label {
        font-size: 1rem;
        color: #333;
        margin-bottom: 5px;
    }

    #orderTrackingForm input {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 1rem;
        transition: border 0.3s ease, box-shadow 0.3s ease;
        outline: none;
    }

        #orderTrackingForm input:focus {
            border-color: #007bff; /* Blue outline on focus */
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Glow effect */
        }

    #orderTrackingForm button {
        padding: 10px 15px;
        background-color: #007bff;
        border: none;
        border-radius: 8px;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

        #orderTrackingForm button:hover {
            background-color: #0056b3; /* Darker blue on hover */
            transform: translateY(-2px); /* Slight lift effect */
        }

/* Order Results */
#orderResults {
    margin-top: 30px;
}

    #orderResults h2 {
        font-size: 1.5rem;
        color: #007bff;
        margin-bottom: 20px;
    }

.order-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-item {
    background-color: #f8f9fa;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

    .order-item:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
        transform: translateY(-3px); /* Slight lift effect */
    }

    .order-item strong {
        color: #333;
    }

    .order-item a {
        color: #007bff;
        text-decoration: none;
        font-weight: bold;
    }

        .order-item a:hover {
            color: #0056b3; /* Darker blue on hover */
            text-decoration: underline;
        }