/*
 * Styles for the Energy Cost Calculator Extension
 */

#ecc-cost-calculator-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f8ff; /* A nice light blue (AliceBlue) */
    border: 2px solid #b3d7ff;
    border-radius: 5px;
    text-align: center;
}

#ecc-cost-calculator-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #000;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.ecc-input-group {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ecc-input-group label {
    font-weight: bold;
    color: #000;
}

#ecc-cost-select {
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    min-width: 150px;
}


/* === NEW, MORE FORCEFUL STYLING START === */
/*
 * This rule makes the Daily and Monthly cost rows look identical and forces
 * the colors to ensure they are visible, overriding any aggressive theme styles.
*/
#ecc-total-cost-display h4
{
    color: #111 !important;              /* A very dark gray text color */
    background-color: #f1f1f1 !important; /* A light gray background for high contrast */
    margin: 8px 0;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
#ecc-total-cost-display h5 {
    color: #111 !important;              /* A very dark gray text color */
    background-color: #f1f1f1 !important; /* A light gray background for high contrast */
    margin: 8px 0;
    padding: 12px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
/* === NEW, MORE FORCEFUL STYLING END === */


#ecc-monthly-kwh {
    font-weight: bold;
    color: #000;
    background-color: #fcf8e3; /* Light yellow background */
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #fbeed5;
}

/* The SPAN with the cost value now sits on top of the h4/h5's new background */
#ecc-daily-cost,
#ecc-monthly-cost {
    font-weight: bold;
    color: #000;
    background-color: #ffffff; /* A clean white background for the value itself */
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-left: 8px; /* Adds a little space between the label and the value */
}

#ecc-rate-display {
    font-weight: normal;
    color: #000;
    font-size: 0.9em;
}