/*
 * Warshet El Banat — WooCommerce Notifications v4
 * Place at: your-child-theme/assets/css/wtb-notices.css
 *
 * Actual WC HTML (confirmed from source):
 *   <div class="woocommerce-notices-wrapper">
 *     <div class="woocommerce-message" role="alert">text</div>
 *   </div>
 *
 * No <ul><li> — plain div with text node directly inside.
 */

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Montserrat:wght@500&display=swap');

/* ════════════════════════════════════════
   WRAPPER
════════════════════════════════════════ */
.woocommerce-notices-wrapper {
    max-width  : 900px;
    margin     : 0 auto 20px !important;
    padding    : 0 !important;
    background : none !important;
    border     : none !important;
    box-shadow : none !important;
}

/* ════════════════════════════════════════
   KILL every WC / theme default on the
   notice divs before we apply our styles
════════════════════════════════════════ */
div.woocommerce-message,
div.woocommerce-error,
div.woocommerce-info,
ul.woocommerce-message,
ul.woocommerce-error,
ul.woocommerce-info {
    /* wipe WC defaults */
    background    : none   !important;
    border        : none   !important;
    border-top    : none   !important;
    border-bottom : none   !important;
    border-left   : none   !important;
    border-right  : none   !important;
    outline       : none   !important;
    box-shadow    : none   !important;
    margin        : 0 0 12px !important;
    padding       : 0      !important;
    border-radius : 0      !important;
    float         : none   !important;
    list-style    : none   !important;
    /* kill WC's ::before left-bar */
}
div.woocommerce-message::before,
div.woocommerce-error::before,
div.woocommerce-info::before,
ul.woocommerce-message::before,
ul.woocommerce-error::before,
ul.woocommerce-info::before {
    display : none  !important;
    content : none  !important;
}

/* ════════════════════════════════════════
   OUR NOTICE STYLE
   Flex row: [icon 26px] [text 1fr]
════════════════════════════════════════ */
body div.woocommerce-message,
body div.woocommerce-error,
body div.woocommerce-info,
body ul.woocommerce-message,
body ul.woocommerce-error,
body ul.woocommerce-info {
    display       : flex         !important;
    flex-direction: row          !important;
    align-items   : center       !important;
    flex-wrap     : nowrap       !important;
    gap           : 12px         !important;
    padding       : 15px 50px   !important;
    border-radius : 16px         !important;
    font-family   : 'Montserrat', sans-serif !important;
    font-size     : 15px         !important;
    font-weight   : 500          !important;
    line-height   : 1.5          !important;
    margin        : 0 0 12px    !important;
    box-sizing    : border-box   !important;
    list-style    : none         !important;
}

/* Icon — inline SVG via ::before, sized explicitly so it never grows */
body div.woocommerce-message::before,
body div.woocommerce-error::before,
body div.woocommerce-info::before,
body ul.woocommerce-message::before,
body ul.woocommerce-error::before,
body ul.woocommerce-info::before {
    content     : ''    !important;
    display     : block !important;
    flex        : 0 0 22px !important;
    width       : 22px  !important;
    height      : 22px  !important;
    min-width   : 22px  !important;
    align-self  : center !important;
    background  : center / 22px 22px no-repeat !important;
}

/* ── li inside ul notices (edge case) ── */
body ul.woocommerce-message li,
body ul.woocommerce-error li,
body ul.woocommerce-info li {
    list-style  : none !important;
    padding     : 0    !important;
    margin      : 0    !important;
}
body ul.woocommerce-message li::before,
body ul.woocommerce-error li::before,
body ul.woocommerce-info li::before {
    display : none !important;
    content : none !important;
}

/* ════════════════════════════════════════
   SUCCESS  — soft red tint + red border
════════════════════════════════════════ */
body div.woocommerce-message,
body ul.woocommerce-message {
    background : rgba(117,5,5,.06) !important;
    border     : 1.5px solid #750505 !important;
    color      : #3a2b26 !important;
}
body div.woocommerce-message::before,
body ul.woocommerce-message::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23750505' opacity='.15'/%3E%3Cpath d='M6.5 11.5l3 3 6-6' stroke='%23750505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ════════════════════════════════════════
   ERROR — stronger red tint
════════════════════════════════════════ */
body div.woocommerce-error,
body ul.woocommerce-error {
    background : rgba(117,5,5,.09) !important;
    border     : 1.5px solid #750505 !important;
    color      : #750505 !important;
}
body div.woocommerce-error::before,
body ul.woocommerce-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23750505' opacity='.15'/%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' stroke='%23750505' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* ════════════════════════════════════════
   INFO — lightest tint
════════════════════════════════════════ */
body div.woocommerce-info,
body ul.woocommerce-info {
    background : rgba(117,5,5,.04) !important;
    border     : 1.5px solid #750505 !important;
    color      : #3a2b26 !important;
}
body div.woocommerce-info::before,
body ul.woocommerce-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23750505' opacity='.15'/%3E%3Cpath d='M11 10v5' stroke='%23750505' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='7' r='1.2' fill='%23750505'/%3E%3C/svg%3E") !important;
}

/* ════════════════════════════════════════
   LINKS inside notices
════════════════════════════════════════ */
.woocommerce-notices-wrapper a,
div.woocommerce-message a,
div.woocommerce-error   a,
div.woocommerce-info    a {
    color          : #750505 !important;
    font-family    : 'Lilita One', cursive !important;
    text-decoration: underline !important;
}
.woocommerce-notices-wrapper a:hover,
div.woocommerce-message a:hover,
div.woocommerce-error   a:hover,
div.woocommerce-info    a:hover { opacity: .75 !important; }

/* ════════════════════════════════════════
   BUTTONS inside notices ("View cart" etc.)
════════════════════════════════════════ */
div.woocommerce-message .button,
div.woocommerce-error   .button,
div.woocommerce-info    .button {
    display        : inline-flex !important;
    align-items    : center      !important;
    padding        : 8px 20px   !important;
    background     : #750505    !important;
    color          : #fff       !important;
    border         : none       !important;
    border-radius  : 9999px     !important;
    font-family    : 'Lilita One', cursive !important;
    font-size      : 14px       !important;
    text-decoration: none       !important;
    margin-left    : auto       !important;
    flex-shrink    : 0          !important;
    white-space    : nowrap;
    cursor         : pointer;
    transition     : opacity .18s;
}
div.woocommerce-message .button:hover,
div.woocommerce-error   .button:hover,
div.woocommerce-info    .button:hover {
    opacity: .85 !important;
    color  : #fff !important;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 640px) {
    body div.woocommerce-message,
    body div.woocommerce-error,
    body div.woocommerce-info,
    body ul.woocommerce-message,
    body ul.woocommerce-error,
    body ul.woocommerce-info {
        font-size    : 14px !important;
        padding      : 13px 50px !important;
        border-radius: 12px !important;
        width: 90%!important;
    }
}