.order-defender-popup-error {
    /* background-color, color, and border-color are now set dynamically via inline styles */
    border-width: 2px;
    border-style: solid;
    padding: 20px 25px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    animation: orderDefenderPopupFadeIn 0.7s ease forwards;
    margin-bottom: 20px;
}

.order-defender-popup-error p {
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.5;
}

.order-defender-popup-error .order-defender-btn-group {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center;
    gap: 15px; /* Slightly reduced gap for better mobile fit */
}

.order-defender-popup-error .order-defender-btn-call,
.order-defender-popup-error .order-defender-btn-whatsapp {
    display: inline-flex; /* Use flex for better icon/text alignment */
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 700;
    color: white !important;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 140px; /* Slightly increased min-width */
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping inside button */
}

.order-defender-popup-error .order-defender-btn-call:hover,
.order-defender-popup-error .order-defender-btn-whatsapp:hover {
    transform: translateY(-2px); /* Subtle lift effect on hover */
}

/* Button background colors are now set dynamically via inline styles */

.order-defender-popup-error .order-defender-btn-call img,
.order-defender-popup-error .order-defender-btn-whatsapp img,
.order-defender-popup-error .order-defender-btn-call svg,
.order-defender-popup-error .order-defender-btn-whatsapp svg {
    height: 1.2em;
    width: 1.2em;
    margin-right: 8px;
}

/* Keyframe animation for the popup */
@keyframes orderDefenderPopupFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .order-defender-popup-error {
        padding: 15px 20px;
        font-size: 16px;
    }
    .order-defender-popup-error .order-defender-btn-group {
        flex-direction: column; /* Stack buttons vertically on small screens */
        gap: 10px;
    }
    .order-defender-popup-error .order-defender-btn-call,
    .order-defender-popup-error .order-defender-btn-whatsapp {
        width: 100%; /* Full width buttons */
        max-width: 250px; /* Max width for stacked buttons */
        margin: 0 auto; /* Center buttons */
    }
}

/* Ensure WooCommerce notices are styled consistently if they contain the custom popup */
.woocommerce-error .order-defender-popup-error,
.woocommerce-message .order-defender-popup-error,
.woocommerce-info .order-defender-popup-error {
    margin-bottom: 0; /* Remove extra margin if nested in WC notices */
    border: none; /* Remove outer border if WC notice already has one */
    background: none; /* Remove outer background if WC notice already has one */
    box-shadow: none; /* Remove outer shadow if WC notice already has one */
    padding: 0; /* Remove outer padding if WC notice already has one */
}

/* Specific styling for the WooCommerce error container itself when it contains our custom popup */
.woocommerce-error:has(.order-defender-popup-error) {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 20px; /* Restore margin for the whole container */
    list-style: none; /* Remove list styling */
    text-align: left; /* Reset text alignment */
}

.woocommerce-error:has(.order-defender-popup-error) li {
    list-style: none;
    margin: 0;
    padding: 0;
}