/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 *
 * Levertijdmelding bij nabestelling. Eén opmaak voor twee plekken:
 * de productpagina (.aw-levertijd--lang) en de winkelwagen
 * (p.backorder_notification, uit WooCommerce/AWCC zelf).
 */

.aw-levertijd,
p.backorder_notification {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 5px 10px;
    border: 1px solid #F3D19A;
    border-radius: 10px;
    background-color: #FFF7E8;
    color: #8A5300 !important;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;

    &::before {
        content: "";
        flex: 0 0 auto;
        width: 1.15em;
        height: 1.15em;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* Op de productpagina over de volle breedte, met iets rustiger tekst. */
.aw-levertijd--lang {
    display: flex;
    align-items: flex-start;
    font-size: 0.9em;
    font-weight: 500;

    &::before {
        margin-top: 0.1em;
    }
}

/*
 * WooCommerce zet de melding in <p class="stock available-on-backorder">. Die alinea
 * krijgt uit de algemene stijl een lichtblauwe kleur mee; de melding houdt haar eigen
 * opmaak en de alinea zelf blijft kleurloos.
 */
.woocommerce div.product p.stock.available-on-backorder {
    display: block;
    padding: 0;
    background: none;
    border: 0;
}

/* De winkelwagen zet de melding onder de productnaam. */
p.backorder_notification {
    margin: 6px 0 0;
}