/* Courier Checker Wrapper */
.courier-checker-wrapper {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-family: sans-serif;
}

/* Search Box */
#pathao_phone {
    padding: 12px;
    width: 70%; /* Adjusted width for the search box */
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    display: inline-block;
}

button {
    padding: 12px 25px;
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    display: inline-block;
    font-size: 16px;
    width: auto; /* Ensures button width fits the text */
    text-align: center; /* Ensures text inside the button is centered */
    white-space: nowrap; /* Prevents text from wrapping */
}

/* Search Box and Button Alignment */
#pathao-checker-form {
    display: flex;
    flex-direction: column;  /* Stack the elements on top of each other */
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Button Group for Status */
.status-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.status-btn {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    width: 150px;
    text-align: center;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.status-btn:hover {
    background-color: #005f8d;
}

/* Fraud Report Button */
.fraud-report {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Added margin for space between fraud report and delivery report */
}

.fraud-btn {
    padding: 8px 15px;
    background-color: #f39c12;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.fraud-btn:hover {
    background-color: #e67e22;
}

/* Courier Report Table Styling */
.courier-report {
    margin-top: 20px;  /* Added top margin to add space above the delivery report */
}

/* Courier Report Table Styling */
.courier-report-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    padding-left: 10px;  /* Added padding for left side */
    padding-right: 10px; /* Added padding for right side */
}

.courier-report-table th, .courier-report-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 14px;  /* Reduced font size for better fit */
}

.courier-report-table th {
    background-color: #0073aa;
    color: white;
    font-size: 16px;  /* Slightly larger font size for header */
}

.courier-report-table td {
    font-size: 14px;  /* Font size for content */
}

.courier-report-table .total {
    background-color: #f9f9f9;
}

.courier-report-table .delivered {
    background-color: #2ecc71;
    color: white;
}

.courier-report-table .cancelled {
    background-color: #e74c3c;
    color: white;
}

.courier-report-table .fraud, .courier-report-table .returnRate {
    background-color: #f39c12;
    color: white;
}

/* Styling for Summary Boxes */
.summary {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
}

.summary .box {
    padding: 15px 20px;
    font-size: 16px;
    color: white;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    width: 30%; /* Ensures 3 boxes have equal width */
    margin-bottom: 10px;
}

/* Pathao Box */
.summary .box.pathao {
    background-color: #3498db;
}

/* Steadfast Box */
.summary .box.steadfast {
    background-color: #2ecc71;
}

/* RedX Box */
.summary .box.redx {
    background-color: #e74c3c;
}

/* Success Rate Box */
.summary .box.successRate {
    background-color: #f39c12;
}

/* Ensuring Buttons align properly */
#pathao_phone, button {
    vertical-align: middle;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .courier-checker-wrapper {
        max-width: 90%;
    }

    .summary .box {
        width: 48%; /* Ensures each box takes almost half the width on smaller screens */
        margin-bottom: 10px;
    }

    #pathao_phone {
        width: 80%;
    }

    button {
        width: 80%; /* Makes the button align with the search box on mobile */
    }

    .status-buttons {
        flex-direction: column;
    }

    .status-btn {
        width: 100%; /* Makes buttons full-width on mobile */
    }

    /* Adjust Fraud Report Button */
    .fraud-btn {
        width: 100%;
        font-size: 12px;
        padding: 8px 15px;
    }

    /* Mobile adjustments for Courier Report Table */
    .courier-report-table th, .courier-report-table td {
        padding: 10px; /* Reduced padding to make it fit on mobile screens */
        font-size: 13px;  /* Smaller font size for mobile */
    }

    .courier-report-table {
        padding-left: 5px;  /* Reduced padding for left side on mobile */
        padding-right: 5px; /* Reduced padding for right side on mobile */
    }
}