/* Container for messages */
#commonname {
    margin: 15px 0;
    padding: 12px 18px;
    border-radius: 5px;
    font-weight: 500;
    display: none; /* Hidden until triggered */
}

/* Show when it has content */
#commonname:not(:empty) {
    display: block;
}

/* Waiting State: Yellow/Blue for "Check your phone" */
.waiting_success {
    background-color: #fff4ce;
    color: #856404;
    border: 1px solid #ffeeba;
    border-left: 5px solid #ffcc00; /* MTN Yellow */
}

/* Success State: Green */
.final_success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-left: 5px solid #28a745;
}

/* Error State: Red */
.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-left: 5px solid #dc3545;
}

/* Button Styling for Checkout */
#pay_btn, #complete_btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 10px;
    transition: background 0.3s ease;
}

#pay_btn {
    background-color: #ffcc00; /* MTN Color */
    color: #000;
}

#pay_btn:hover { background-color: #e6b800; }
#pay_btn:disabled { background-color: #cccccc; cursor: not-allowed; }

#complete_btn {
    background-color: #000;
    color: #fff;
}

#complete_btn:hover { background-color: #333; }