/* --- App-Style UI (Inspired by uploaded reference) --- */

.irp-table-container {
    max-width: 100%;
    margin: 30px 0;
    /* Forces a clean, rounded sans-serif to match the app style */
    font-family: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Search & Top Header --- */
.irp-table-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 15px;
}

#irp-search-input {
    width: 100%;
    max-width: 320px;
    padding: 14px 20px; /* Thicker padding for that touch-friendly app feel */
    background-color: #ffffff;
    border: 1px solid #D1D5DB; /* The subtle gray outline from the reference inputs */
    border-radius: 50px; /* Full pill-shape */
    font-size: 14px;
    color: #1C2A53; /* Deep App Navy */
    font-weight: 500;
    transition: border-color 0.2s ease;
}

#irp-search-input:focus {
    border-color: #1C2A53; /* Highlights in Navy when typing */
    outline: none;
}

#irp-search-input::placeholder {
    color: #9CA3AF;
    font-weight: 400;
}

.irp-last-updated-general {
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
}

/* --- Core Table Styling (Desktop) --- */
.irp-rates-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border-radius: 16px; /* Matches the rounded card in the first reference screen */
    border: 1px solid #F3F4F6; /* Very faint outer border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* Extremely soft, almost invisible shadow */
    overflow: hidden;
}

/* App-style Headers */
.irp-rates-table thead {
    background-color: #ffffff;
}

.irp-rates-table th {
    padding: 20px 24px;
    text-align: left;
    font-size: 13px;
    font-weight: 700; /* Bold headers matching the reference */
    color: #1C2A53; /* Deep App Navy */
    border-bottom: 2px solid #F3F4F6;
}

/* Clean Rows */
.irp-rates-table td {
    padding: 20px 24px;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
    background-color: #ffffff;
}

.irp-rates-table tbody tr:last-child td {
    border-bottom: none;
}

.irp-rates-table tbody tr:hover td {
    background-color: #F9FAFB; /* Very gentle touch feedback */
}

/* --- Columns: Bank & Rate --- */
.irp-bank-col {
    display: flex;
    align-items: center;
    gap: 16px;
}

.irp-bank-logo {
    width: 130px; 
    height: 36px; 
    object-fit: contain; 
    object-position: left center; 
    flex-shrink: 0; 
    border-radius: 4px;
    background-color: transparent;
}

.irp-bank-name {
    font-weight: 600; /* Bolder to match the app's list items */
    font-size: 15px;
    color: #1C2A53; /* Deep App Navy */
}

.irp-rate-col strong {
    font-size: 18px; /* Slightly larger, prominent numbers */
    font-weight: 700;
    color: #1C2A53; /* Deep App Navy */
}

/* --- Mobile View (App-like List Cards) --- */
@media screen and (max-width: 768px) {
    .irp-table-header {
        flex-direction: column;
        align-items: stretch; /* Makes search bar full width on mobile */
    }

    #irp-search-input {
        max-width: 100%;
    }

    .irp-rates-table {
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    .irp-rates-table thead {
        display: none;
    }

    .irp-rates-table, 
    .irp-rates-table tbody, 
    .irp-rates-table tr, 
    .irp-rates-table td {
        display: block;
        width: 100%;
    }

    /* Individual Mobile Cards */
    .irp-rates-table tr {
        margin-bottom: 12px;
        background: #ffffff;
        border: 1px solid #E5E7EB; /* Distinct border matching the reference app inputs */
        border-radius: 16px; /* Heavy app-style rounding */
        padding: 16px 20px;
    }

    .irp-rates-table td {
        padding: 0;
        border-bottom: none;
    }

    .irp-bank-col {
        flex-direction: row; /* Keep logo and text inline on mobile for this app style */
        align-items: center;
        gap: 16px;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px dashed #E5E7EB; /* Dashed line for a coupon/receipt app feel */
    }

    .irp-bank-logo {
        width: 100px; /* Slightly smaller logo for mobile row */
        height: 30px;
    }

    .irp-rate-col {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .irp-rate-col::before {
        content: "Interest Rate";
        font-size: 13px;
        color: #6B7280;
        font-weight: 500;
    }
}

/* --- Mobile View (App-like Dual-Tone Cards) --- */
@media screen and (max-width: 768px) {
    /* 1. Header Adjustments */
    .irp-table-header {
        flex-direction: column;
        align-items: center; 
        gap: 12px;
        margin-bottom: 20px;
    }

    #irp-search-input {
        max-width: 100%;
        text-align: center; 
        border-radius: 50px;
    }

    .irp-last-updated-general {
        text-align: center;
        font-size: 13px;
        margin-bottom: 0;
    }

    /* 2. Strip table defaults completely */
    .irp-rates-table {
        border: none;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    .irp-rates-table thead {
        display: none;
    }

    .irp-rates-table, 
    .irp-rates-table tbody, 
    .irp-rates-table tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. The Main Card Container */
    .irp-rates-table tr {
        margin-bottom: 16px;
        background: #ffffff !important; 
        border: 1px solid #E5E7EB;
        border-radius: 16px;
        overflow: hidden; /* Keeps the gray bottom row safely inside the rounded corners */
        padding: 0 !important; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }

    /* 4. Row 1: Logo (Left) and Bank Name (Right) */
    .irp-rates-table td.irp-bank-col {
        display: flex;
        flex-direction: row;
        justify-content: space-between; 
        align-items: center;
        padding: 16px 20px;
        background-color: #ffffff !important; 
        border: none !important;
        width: 100%;
        box-sizing: border-box;
        gap: 15px; /* Creates a hard buffer so they never touch */
    }

    /* Fixes the Overlap: Locks logo to the left, prevents shrinking */
    .irp-bank-logo {
        flex: 0 0 110px; 
        width: 110px; 
        height: 35px;
        object-fit: contain;
        object-position: left center;
    }

    /* Forces text to the right */
    .irp-bank-name {
        flex: 1; 
        font-size: 15px;
        font-weight: 700;
        color: #111827; 
        text-align: right; 
        word-wrap: break-word;
        line-height: 1.2;
    }

    /* 5. Row 2: Light Gray Background, Divider Line, Text (Left), Rate (Right) */
    .irp-rates-table td.irp-rate-col {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        background-color: #F4F5F8 !important; 
        border: none !important;
        border-top: 1px solid #E5E7EB !important; /* The Divider Line */
        width: 100%;
        box-sizing: border-box;
    }

    /* Hardcodes the label to fix the text bug */
    .irp-rate-col::before {
        content: "Interest Rate" !important; 
        font-size: 14px;
        color: #6B7280; 
        font-weight: 500;
    }

    .irp-rate-col strong {
        font-size: 18px;
        color: #111827;
        font-weight: 700;
    }
}