.card {
   /* border: none;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}

.card-header {
    background: linear-gradient(135deg, #043565, #004d98f7);
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.btn-success,
.btn-secondary,
.btn-primary {
    border: none;
    padding: 10px 20px;
    font-size: 0.85rem;
    border-radius: 8px; /* Reduced excessive rounding */
}

.btn-success {
    background-color: #28a745;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-primary {
    background-color: #3498db;
}

.table th, .table td {
    vertical-align: middle;
}

.list-group-item {
    border: none;
    padding: 15px 10px;
    background-color: #eceeef2b;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .table-responsive-mobile {
        display: none;
    }

    .account-list-mobile {
        display: block;
    }

    /* Stack buttons vertically inside payment options */
    .payment-option .btn-group {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .payment-option .btn {
        width: 100%; /* Ensures full width but prevents clipping */
        text-align: center;
    }

    /* Add space above "Total Balance Owed" on mobile */
    .total-balance-card {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .list-group-item {
        padding: 10px 15px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .container, .row, .col-md-12 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mobile-card-body {
        display: none;
    }
    .account-table-min {
        min-height: 0px !important;
    }
}

@media (min-width: 769px) {
    .table-responsive-mobile {
        display: table;
    }

    .account-list-mobile {
        display: none;
    }
}

.table {
    width: 100%; /* Make table take full container width */
}

/* Payment Options - Ensuring no clipping & proper alignment */
.payment-option {
    border: 1px solid #e3e3e3;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Prevents button overflow */
}

    .payment-option.full-payment {
        border: 2px solid #28a745;
        background-color: #eaf7ea;
    }

    .payment-option h5 {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .payment-option p {
        margin-bottom: 10px;
        font-size: 0.9rem;
        color: #333;
    }

    .payment-option .amount {
        font-weight: bold;
        font-size: 1.1rem;
        color: #333;
    }

    /* Button Group - Proper Alignment */
    .payment-option .btn-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .payment-option .btn {
        border-radius: 6px; /* Balanced border radius */
        width: auto; /* Prevents full-width buttons */
        padding: 8px 16px;
        text-align: center;
    }

    /* Adjusts input field to align properly */
    .payment-option input {
        width: 150px;
        padding: 5px;
        margin-left: 0px; /* Removed extra left margin */
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 0.9rem;
    }

/* Adjust Full Payment Button */
.btn-full-payment {
    background-color: #28a745;
    border-color: #28a745;
    font-size: 1.1em;
    padding: 10px 20px;
    border-radius: 6px;
}

    .btn-full-payment:hover {
        background-color: #218838;
    }

/* Subdued styling for total balance section */
.total-balance-card {
    background: linear-gradient(358deg, #043565, #004d98f7);
    color: white;
    border: 1px solid #0435652b;
}

    .total-balance-card h3 {
        font-size: 1.8rem;
        margin: 0;
    }

/* Styling for installment notice */
.installment-notice {
    font-size: 0.85rem;
    color: #666;
}

/* Dropdown button styling */
.dropdown-menu {
    width: 100%;
    border-radius: 6px;
}

/* Fixing Button Clipping on Mobile */
@media (max-width: 768px) {
    /* Ensure flexbox is used for the row */
    .row {
        display: flex;
        flex-direction: column;
    }

    /* Account Overview should appear first */
    .account-overview-section {
        order: -1; /* Moves it to the top on mobile */
    }

    /* Consumer Balance should appear second */
    .consumer-balance-section {
        order: 1;
    }

    /* Ensure buttons do not clip on mobile */
    .payment-option .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .payment-option .btn {
        width: 100%; /* Ensures full width */
        text-align: center;
    }
}

.account-table-min {
    min-height: 232px;
}
@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
        width: 100%;
    }

        .btn-group input[type="number"] {
            width: 100%; /* Full width on mobile */
            box-sizing: border-box; /* Ensures padding does not exceed parent width */
            margin-bottom: 10px; /* Adds space between input and button */
        }

        .btn-group input[type="submit"] {
            width: 100%; /* Make the button full width as well */
        }
}
/* EasyPay button styling */
.btn-easypay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #34a853, #0f9d58);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.8rem 1.6rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease-in-out;
    font-size: 1.1rem;
    font-weight: 600;
}

    .btn-easypay:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
        background: linear-gradient(90deg, #2d974b, #0b864a);
        color: #fff;
        border: solid 1px;
    }

.btn-easypay-content {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-easypay .icons img {
    height: 20px;
    width: auto;
    
    margin-left: 6px;
}

.btn-easypay .text {
    font-size: 1rem;
    white-space: nowrap;
}
.icons-cc-img {
    height: 20px !important;
    filter: brightness(0) invert(1);
}
.btn-easypay-inverse {
    background: linear-gradient(90deg, #f8f8f8, #ffffff) !important;
    color: #1da156 !important;
    border: solid 1px;
}
.icons-cc-img-reveres {
    height: 20px !important;
    
}