/* ============================================================
   WOOCOMMERCE NOTICES (added to cart / info / error)
   File: assets/css/notices.css
   Minimal style to match the Signatures Art theme:
   light grey strip, thin black accent on the left, black button
   ============================================================ */

body .woocommerce-notices-wrapper {
    width: 100%;
}

/* ---------- base strip (success / info / error) ---------- */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body.woocommerce-js .woocommerce-message,
body.woocommerce-js .woocommerce-info,
body.woocommerce-js .woocommerce-error,
body .wc-block-components-notice-banner {
    position: relative;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    width: 100%;
    margin: 0 0 30px !important;
    padding: 18px 24px !important;
    box-sizing: border-box;
    font-family: 'Afacad', sans-serif !important;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #222 !important;
    background: #f7f7f7 !important;
    border: none !important;
    border-left: 3px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
}

/* remove the default round blue icon */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before,
body.woocommerce-js .woocommerce-message::before,
body.woocommerce-js .woocommerce-info::before,
body.woocommerce-js .woocommerce-error::before {
    display: none !important;
    content: none !important;
}

/* ---------- accent colours ---------- */
body .woocommerce-info,
body.woocommerce-js .woocommerce-info {
    border-left-color: #777 !important;
}

body .woocommerce-error,
body.woocommerce-js .woocommerce-error {
    border-left-color: #b3261e !important;
}

/* ---------- links inside the message ---------- */
body .woocommerce-message a:not(.button),
body .woocommerce-info a:not(.button),
body .woocommerce-error a:not(.button) {
    color: #000;
    text-decoration: underline;
}

/* ---------- button ("View cart", "Undo" ...) goes to the right ---------- */
body .woocommerce-message .button,
body .woocommerce-info .button,
body .woocommerce-error .button,
body.woocommerce-js .woocommerce-message .button,
body.woocommerce-js .woocommerce-info .button {
    order: 3;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    padding: 10px 26px !important;
    font-family: 'Afacad', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: #fff !important;
    background-color: #000 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

body .woocommerce-message .button:hover,
body .woocommerce-info .button:hover {
    opacity: 0.8;
    color: #fff !important;
    background-color: #000 !important;
}

/* ---------- error list ---------- */
body .woocommerce-error {
    list-style: none;
}

body .woocommerce-error li {
    flex: 1 1 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-family: 'Afacad', sans-serif !important;
}

/* ---------- WooCommerce blocks notice (cart / checkout blocks) ---------- */
body .wc-block-components-notice-banner {
    display: flex;
    align-items: center;
    background: #f7f7f7 !important;
}

body .wc-block-components-notice-banner svg {
    fill: #000;
    background: none;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {

    body .woocommerce-message,
    body .woocommerce-info,
    body .woocommerce-error,
    body.woocommerce-js .woocommerce-message,
    body.woocommerce-js .woocommerce-info,
    body.woocommerce-js .woocommerce-error {
        padding: 16px 18px !important;
        font-size: 16px;
    }
}

@media (max-width: 520px) {

    body .woocommerce-message,
    body .woocommerce-info,
    body.woocommerce-js .woocommerce-message,
    body.woocommerce-js .woocommerce-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    body .woocommerce-message .button,
    body .woocommerce-info .button,
    body.woocommerce-js .woocommerce-message .button,
    body.woocommerce-js .woocommerce-info .button {
        order: 2;
        width: 100%;
        margin: 0 !important;
        text-align: center;
    }
}