/* Bank Rates Table Block Style */

/* Desktop styles */
.wp-block-table.is-style-bank-rates {
    width: 100%;
    overflow: hidden;
}

.wp-block-table.is-style-bank-rates table {
    width: 100%;
    border-top: 0;
    border-collapse: collapse;
    margin-bottom: 0 !important;
    border: 0;
}

.wp-block-table.is-style-bank-rates th,
.wp-block-table.is-style-bank-rates td {
    padding: 12px 16px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-primary);
    white-space: normal;
    vertical-align: top;
}

.wp-block-table.is-style-bank-rates thead {
    border-bottom: 1px solid var(--color-primary);
}

.wp-block-table.is-style-bank-rates thead th {
    border-top: 0;
}

.wp-block-table.is-style-bank-rates tbody td:nth-child(1) {
    font-weight: 500;
}

/* Hover effect - desktop only */
@media (min-width: 769px) {
    .wp-block-table.is-style-bank-rates tbody tr:hover,
    .wp-block-table.is-style-bank-rates tbody tr:hover td {
        background-color: var(--color-background);
        transition: all 0.3s ease;
    }
}

/* Mobile responsive - card layout */
@media (max-width: 768px) {

    .wp-block-table.is-style-bank-rates {
        overflow: visible;
    }

    .wp-block-table.is-style-bank-rates table,
    .wp-block-table.is-style-bank-rates thead,
    .wp-block-table.is-style-bank-rates tbody,
    .wp-block-table.is-style-bank-rates tr,
    .wp-block-table.is-style-bank-rates th,
    .wp-block-table.is-style-bank-rates td {
        display: block;
    }

    /* Hide table header */
    .wp-block-table.is-style-bank-rates thead {
        display: none;
    }

    /* Each row becomes a card */
    .wp-block-table.is-style-bank-rates tbody tr {
        margin-bottom: 20px;
        border: 1px solid var(--color-primary);
        border-radius: 8px;
        overflow: hidden;
        background-color: var(--background-alt, #fff);
    }

    /* First cell (Product name) becomes the card header */
    .wp-block-table.is-style-bank-rates tbody td:first-child {
        background-color: var(--color-primary);
        color: #fff;
        font-weight: 600;
        font-size: 1.1rem;
        text-align: center !important;
        padding: 16px;
        border-top: 0;
        border-bottom: 2px solid var(--color-primary);
        display: block;
        min-height: auto;
        justify-content: center;
    }

    /* Other cells display with labels */
    .wp-block-table.is-style-bank-rates tbody td {
        padding: 12px 16px;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        text-align: left !important;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        font-size: 0.8rem;
    }

    .wp-block-table.is-style-bank-rates tbody td:last-child {
        border-bottom: 0;
    }

    /* Add data labels before each cell (set via JS) */
    .wp-block-table.is-style-bank-rates tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 calc(50% - 24px);
        font-weight: 600;
        color: var(--color-primary);
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.4;
        font-size: 0.8rem;
    }

    /* The actual cell content */
    .wp-block-table.is-style-bank-rates tbody td[data-label] {
        /* display: flex; */
    }

    .wp-block-table.is-style-bank-rates tbody td[data-label][data-align="center"] {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: start;
    }

    .wp-block-table.is-style-bank-rates tbody td[data-label][data-align="center"] > * {
        grid-column: 2;
    }

    .wp-block-table.is-style-bank-rates tbody td[data-label][data-align="left"] {
        display: grid;
        justify-content: center;
    }

    /* Remove before content from product name */
    .wp-block-table.is-style-bank-rates tbody td:first-child::before {
        content: none;
    }
}