/* Container for the entire layout */
.ifpaTableContainer {
    max-width: 1140px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Ensures content stays within rounded corners */
}

/* Flexbox row for each row of data */
.ifpaFlex-row {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping on desktop */
    border-bottom: 1px solid #e5e7eb;
    /* Distributes the items with space between them */
    justify-content: space-between;
}

/* The header row styling */
.ifpaFlex-row.ifpaHeader {
    background-color: #00635F;
    color: #fff;            
}

/* The cells within each row */
.ifpaFlex-cell {
    flex: 1; /* All cells share space equally */
    padding: 1rem;
    border-right: 1px solid #e5e7eb;
    overflow-wrap: break-word; /* Prevents overflow of long strings */

    /* Typography matching freshproduce.com paragraph styles */
    font-family: Poppins, sans-serif;
    font-size: max(1rem, min(calc(.95598rem + .1878vw), 1.125rem));
    font-weight: 400;
    line-height: 2rem;
}

/* Specific styles for the last column to left-align the text */
.ifpaFlex-cell:last-child {
    border-right: none;
    text-align: left;
}

/* Remove the right border for the first cell's last-child if there are only 2 cells */
.ifpaFlex-cell:first-child:last-child {
    border-right: none;
}

/* Media query for mobile-first approach */
@media (max-width: 640px) {
    .ifpaTableContainer {
        padding: 0;
    }

    .ifpaFlex-row {
        flex-direction: column; /* Stack cells vertically on small screens */
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
    }

    /* Light background tint for every second card */
    .ifpaFlex-row:nth-child(even) {
        background-color: #f9fafb;
    }

    .ifpaHeader {
        display: none; /* Hide standard headers on mobile */
    }

    .ifpaFlex-cell {
        border-right: none;
        border-bottom: 1px solid #e5e7eb; /* Add bottom border for separation */
        flex: 1 1 100%; /* Take full width on mobile */
        padding: 1rem; /* Adjust padding for better spacing */
    }

    /* Add a label to each cell using its data-label attribute */
    .ifpaFlex-cell::before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 0.5rem;
        display: block;              
    }
}