.payment-methods {
    background-color: var(--background-color-gray);
}

.payment-methods h1 {
    margin-bottom: 3rem;
    color: var(--background-color-dark);
}

.table-container {
    display: flex;
    flex-direction: column;
    gap: 8px;  
}

.table-row {
    display: flex;
    gap: 8px; 
    background: none; 
    overflow: visible; 
}

.table-row:first-child {
    border-radius: 16px 16px 0 0;
}

.table-row:last-child {
    border-radius: 0 0 16px 16px;
}

.table-cell {
    flex: 1;
    padding: 16px 32px; 
    display: flex;
    align-items: start;
    background: white; 
    border-radius: 0; 
}

.table-cell:first-child {
    flex: 2; 
    font-weight: 500;  
}

.table-row:first-child .table-cell:first-child {
    border-top-left-radius: 16px;
}

.table-row:first-child .table-cell:last-child {
    border-top-right-radius: 16px;
}

.table-row:last-child .table-cell:first-child {
    border-bottom-left-radius: 16px;
}

.table-row:last-child .table-cell:last-child {
    border-bottom-right-radius: 16px;
}

.payment-icon {
    justify-content: flex-start; 
    gap: 8px;  
    display: flex;
}

.payment-icon img {
    width: 32px; 
    height: 24px;  
    object-fit: contain;
} 

@media (max-width: 768px) {
    .payment-methods {
        padding: 60px 0;
    }

    .payment-methods h1 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

    .table-cell {
        width: 100%;
        padding: 5px;
        font-size: 0.875rem;
        justify-content: center; 
        text-align: center;
    }
        .table-cell:first-child {
            padding-top: 15px;
        }
        .table-cell:last-child {
            padding-bottom: 15px;
        }

    .table-row {
        flex-direction: column;
        gap: 0;  
    }

    .payment-icon {
        justify-content: center; 
        gap: 16px;
        width: 100%; 
    }

    .payment-icon img {
        width: 40px; 
        height: 30px;
    }

    .table-row:first-child .table-cell:first-child {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .table-row:first-child .table-cell:last-child {
        border-top-right-radius: 0px;
    }
    .table-row:last-child .table-cell:first-child {
        border-bottom-left-radius: 0px;
    }

    .table-row:last-child .table-cell:last-child {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
}

