/* WooCommerce notices, site-wide: options page _redesign/notices/notices-variants.html, variant 01
   "white card". Same language as the other cards of the site: white, thin border, 18px corners;
   only the round icon carries the status colour. Loaded after customizer.min.css (functions.php)
   and overrides its older notice rules (green card, red card, yellow account info) and the navy
   "removed + Undo" bar of oil-cart.css. The order-received page keeps its own notice styles. */

body:not(.woocommerce-order-received) .woocommerce-message,
body:not(.woocommerce-order-received) .woocommerce-info,
body:not(.woocommerce-order-received) .woocommerce-error {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 14px;
    width: 100%;
    min-height: 0;
    margin: 0 0 20px !important;
    padding: 14px 16px 14px 18px !important;
    border: 1px solid #D9DEE6 !important;
    border-top-width: 1px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #001630 !important;
    font: 400 15px/1.5 'Open Sans', sans-serif !important;
    list-style: none;
    text-align: left;
}

/* icon: 34px circle, status tint + stroke glyph */
body:not(.woocommerce-order-received) .woocommerce-message::before,
body:not(.woocommerce-order-received) .woocommerce-info::before,
body:not(.woocommerce-order-received) .woocommerce-error::before {
    display: block !important;
    position: static !important;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 50%;
    content: "" !important;
    font-size: 0 !important;
    transform: none;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
}
body:not(.woocommerce-order-received) .woocommerce-message::before {
    background-color: #E6F4EE !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") !important;
}
body:not(.woocommerce-order-received) .woocommerce-info::before {
    background-color: #EAF0FA !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4FA8' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 10.5v7M12 6.5v.01'/%3E%3C/svg%3E") !important;
}

/* errors: a <ul> of one or more <li>, so the icon sits absolutely and the list stacks */
body:not(.woocommerce-order-received) .woocommerce-error {
    display: block !important;
    padding-left: 66px !important;
    border-color: #F2C4C4 !important;
}
body:not(.woocommerce-order-received) .woocommerce-error::before {
    position: absolute !important;
    top: 14px;
    left: 18px;
    background-color: #FDECEC !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.01'/%3E%3C/svg%3E") !important;
}
body:not(.woocommerce-order-received) .woocommerce-error li {
    margin: 0 !important;
    padding: 2px 0 !important;
    list-style: none !important;
}
body:not(.woocommerce-order-received) .woocommerce-error li:first-child { padding-top: 6px !important; }
body:not(.woocommerce-order-received) .woocommerce-error li:last-child { padding-bottom: 6px !important; }
body:not(.woocommerce-order-received) .woocommerce-error strong,
body:not(.woocommerce-order-received) .woocommerce-error b { color: #001630; font-weight: 700; }

/* links inside the text */
body:not(.woocommerce-order-received) .woocommerce-message a:not(.button):not(.restore-item),
body:not(.woocommerce-order-received) .woocommerce-info a:not(.button),
body:not(.woocommerce-order-received) .woocommerce-error a:not(.button) {
    color: #001630 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* action button: navy outline pill, pushed to the right */
body:not(.woocommerce-order-received) .woocommerce-message.woocommerce-message .button,
body:not(.woocommerce-order-received) .woocommerce-info.woocommerce-info .button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    order: 2;
    width: auto !important;
    min-height: 40px;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1.5px #001630 !important;
    color: #001630 !important;
    font: 700 14px/1 'Roboto', sans-serif !important;
    text-decoration: none !important;
    text-transform: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}
body:not(.woocommerce-order-received) .woocommerce-message.woocommerce-message .button::after,
body:not(.woocommerce-order-received) .woocommerce-info.woocommerce-info .button::after {
    content: "";
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001630' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body:not(.woocommerce-order-received) .woocommerce-message.woocommerce-message .button:hover,
body:not(.woocommerce-order-received) .woocommerce-message.woocommerce-message .button:focus-visible,
body:not(.woocommerce-order-received) .woocommerce-info.woocommerce-info .button:hover,
body:not(.woocommerce-order-received) .woocommerce-info.woocommerce-info .button:focus-visible {
    background: #F3F5F8 !important;
    color: #001630 !important;
}

/* "... removed. Undo?" on the cart: same white card, yellow Undo pill (was a navy bar, oil-cart.css) */
body.woocommerce-cart .woocommerce-message:has(.restore-item) {
    max-width: 980px;
    margin: 0 auto 20px !important;
    padding: 14px 16px 14px 18px !important;
    border: 1px solid #D9DEE6 !important;
    background: #fff !important;
    color: #001630 !important;
}
body.woocommerce-cart .woocommerce-message:has(.restore-item)::before { display: block !important; }
body.woocommerce-cart .woocommerce-message .restore-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 2;
    min-height: 40px;
    margin-left: auto;
    padding: 0 18px;
    border-radius: 999px;
    background: #FBBD00;
    color: #001630 !important;
    font: 700 14px/1 'Roboto', sans-serif;
    text-decoration: none !important;
}
body.woocommerce-cart .woocommerce-message .restore-item:hover { background: #FFC811; }

/* "... has been added to your cart." shown on the cart itself (an add-to-cart link opened on a page
   that prints no notices): its "View cart" button would point at the page already open. */
body.woocommerce-cart .woocommerce-message a.wc-forward { display: none !important; }

@media (max-width: 575px) {
    /* phones: the icon sits absolutely at the left, text and button stack in one column beside it */
    body:not(.woocommerce-order-received) .woocommerce-message,
    body:not(.woocommerce-order-received) .woocommerce-info {
        display: block !important;
        padding: 12px 14px 12px 62px !important;
        font-size: 14.5px !important;
    }
    body:not(.woocommerce-order-received) .woocommerce-message::before,
    body:not(.woocommerce-order-received) .woocommerce-info::before {
        position: absolute !important;
        top: 12px;
        left: 14px;
    }
    body:not(.woocommerce-order-received) .woocommerce-message:not(:has(.button, .restore-item)),
    body:not(.woocommerce-order-received) .woocommerce-info:not(:has(.button)) {
        display: flex !important;
        align-items: center;
        min-height: 60px;
    }
    body:not(.woocommerce-order-received) .woocommerce-message.woocommerce-message .button,
    body:not(.woocommerce-order-received) .woocommerce-info.woocommerce-info .button,
    body.woocommerce-cart .woocommerce-message .restore-item {
        display: flex !important;
        width: fit-content !important;
        margin: 10px 0 2px !important;
    }
    body.woocommerce-cart .woocommerce-message:has(.restore-item) {
        display: block !important;
        padding: 12px 14px 12px 62px !important;
    }
    body:not(.woocommerce-order-received) .woocommerce-error {
        padding: 12px 14px 12px 62px !important;
        font-size: 14.5px !important;
    }
    body:not(.woocommerce-order-received) .woocommerce-error::before { top: 12px; left: 14px; }
}