/**
 * WooCommerce notices (success, info, error) on the whole site: a label stitched on, the sewing motif of the
 * account's «costura» and the 404's dashed sock. Loaded on every page by inc/woocommerce/notices.php.
 *
 * "html:not(#twf-notice)" counts as an id, so these rules sit above Rey's notice styles, the old overrides in
 * style.css and account.css without !important.
 */

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    --twf-n-color: #5F5E5A;
    --twf-n-bg: #F2F1EE;
    --twf-n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 10.6v6.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.4' r='1.15'/%3E%3C/svg%3E");
    position: relative;
    box-sizing: border-box;
    display: block;
    width: auto;
    min-height: 0;
    margin: 0 0 24px;
    padding: 18px 26px 18px 62px;
    color: #22262A;
    background: var(--twf-n-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    list-style: none;
}

html:not(#twf-notice) .woocommerce-message {
    --twf-n-color: #8E7348;
    --twf-n-bg: #F6F1E8;
    --twf-n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M7.6 12.4l3 3 5.9-6.3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html:not(#twf-notice) .woocommerce-error {
    --twf-n-color: #B3261E;
    --twf-n-bg: #FBF0EF;
    --twf-n-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 6.9v6.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.9' r='1.15'/%3E%3C/svg%3E");
}

/* The stitch: a dashed seam just inside the edge */
html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px dashed var(--twf-n-color);
    opacity: 0.5;
    pointer-events: none;
}

/* The icon (replaces Rey's WooCommerce font glyph) */
html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    width: 22px;
    height: 22px;
    margin: -11px 0 0;
    background: var(--twf-n-color);
    -webkit-mask: var(--twf-n-icon) center / contain no-repeat;
    mask: var(--twf-n-icon) center / contain no-repeat;
    font-size: 0;
    line-height: 0;
}

/* Several errors at once: one per line, the icon at the first one */
html:not(#twf-notice) .woocommerce-error:has(li + li)::before {
    top: 18px;
    margin-top: 0;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li + li {
    margin-top: 4px !important;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) strong {
    font-weight: 700;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) p:last-child {
    margin-bottom: 0;
}

/* Links in the text */
html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button):hover {
    color: #8E7348;
}

/* Buttons («Ver carrinho»…): the site's buttons, at the right of the text line. WooCommerce prints them before
   the text, so a float keeps the words together (a flex row split the text from its links). */
html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    float: right;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: -9px 0 -9px 24px;
    padding: 9px 18px;
    color: #fff;
    background: #22262A;
    border: 1px solid #22262A;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* With a button the label is taller, so the button keeps clear of the seam and the words stay centred on it */
html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> .button) {
    padding-top: 27px;
    padding-right: 32px;
    padding-bottom: 27px;
}

html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button:hover {
    color: #fff;
    background: #AD8D5C;
    border-color: #AD8D5C;
}

.woocommerce-notices-wrapper:empty {
    display: none;
}

@media (max-width: 767px) {
    html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
        padding: 16px 18px 16px 50px;
        font-size: 14px;
        line-height: 21px;
    }

    html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
        left: 17px;
        width: 20px;
        height: 20px;
        margin-top: -10px;
    }

    /* the button under the words (WooCommerce prints it first) */
    html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> .button) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 18px 22px 50px;
    }

    html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
        order: 2;
        float: none;
        display: flex;
        width: fit-content;
        margin: 0;
    }

    html:not(#twf-notice) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):has(> .button)::before {
        top: 28px;
    }
}