/*
 * front-styles.css
 * Styles for WC Pay Later plugin's front-end elements.
 *
 * IMPORTANT: All selectors should be prefixed with a unique class
 * (e.g., .wc-pay-later-wrapper) to avoid conflicts with your theme.
 * Do NOT add general styles like 'div', 'img', 'h2', 'button' without these specific prefixes.
 */

/* Example: Styles for the "Pay Later Balance" section on the My Account page */
.wc-pay-later-wrapper {
    /* These styles are specifically for the <div> with class "wc-pay-later-wrapper"
       which wraps your plugin's balance display on the My Account page. */
    background-color: #222; /* Example: Dark background to match your theme */
    border: 1px solid #444; /* Example: Dark border */
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    color: #eee; /* Example: Light text for dark background */
}

.wc-pay-later-wrapper h2 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    color: #fff; /* Ensure heading is visible */
}

.wc-pay-later-wrapper p {
    margin-bottom: 5px;
    line-height: 1.5;
}

/* Styles for the "Pay Pending Bill" section if it's within a specific wrapper */
.wc-pay-later-pay-button {
    background-color: #333; /* Slightly lighter dark background */
    border: 1px solid #555;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    color: #eee;
}

.wc-pay-later-pay-button h3 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
    color: #fff;
}

.wc-pay-later-pay-button input[type="number"] {
    background-color: #444;
    border: 1px solid #666;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    width: 150px; /* Adjust as needed */
}

.wc-pay-later-pay-button button {
    background-color: #0073aa; /* WordPress blue for buttons */
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.wc-pay-later-pay-button button:hover {
    background-color: #005177;
}

/* Message div for frontend feedback */
#wc-pay-later-message {
    padding: 10px;
    margin-top: 15px;
    border-radius: 4px;
    font-weight: bold;
    display: none; /* Hidden by default, shown by JS */
}

#wc-pay-later-message.success {
    background-color: #dff0d8; /* Light green */
    color: #3c763d; /* Dark green text */
    border: 1px solid #d6e9c6;
}

#wc-pay-later-message.error {
    background-color: #f2dede; /* Light red */
    color: #a94442; /* Dark red text */
    border: 1px solid #ebccd1;
}

/* IMPORTANT: The code below is COMMENTED OUT by default because it's a common cause of conflicts.
   WooCommerce usually styles its notices. Only uncomment and add VERY specific styles here
   if WooCommerce's default notices are not styled correctly by your theme AFTER these changes. */
/*
.woocommerce-error.wc-pay-later-notice,
.woocommerce-message.wc-pay-later-notice,
.woocommerce-info.wc-pay-later-notice {
    // Example: This would target an error notice specifically from your plugin, if you added a class 'wc-pay-later-notice'
    // background-color: #fcebeb;
    // border-top-color: #cc0000;
    // color: #cc0000;
}
*/