/*
 * Styles for the Live Gold Rates PK plugin.
 *
 * These classes loosely replicate the look and feel of the UrduPoint gold rate table as seen in the user’s screenshot:
 * a dark header bar, neutral alternating row colours and coloured numbers for the prices.
 * Feel free to tweak the colours here to better match your theme.
 */

.lgrpk-table-wrapper {
    max-width: 650px;
    margin: 20px auto;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    background: #ffffff;
}

.lgrpk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 1rem;
}

/* Table header styling */
.lgrpk-table thead th {
    background-color: #0a2540; /* dark navy blue reminiscent of the reference */
    color: #ffffff;
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
}

/* Body cells */
.lgrpk-table tbody td {
    padding: 10px;
    border-bottom: 1px solid #eaeaea;
    vertical-align: middle;
}

/* Zebra striping for better readability */
.lgrpk-table tbody tr:nth-child(even) {
    background-color: #f7f9fc;
}

/* Colour classes for price columns */
.lgrpk-blue {
    color: #004080; /* deep blue for Per Tola column */
    font-weight: 600;
}

.lgrpk-red {
    color: #b30000; /* deep red for Per 10 Gram column */
    font-weight: 600;
}

/* Error message styling */
.lgrpk-error {
    color: #b30000;
    font-weight: 600;
    text-align: center;
    margin: 20px 0;
}