/*
 * Avvisi WooCommerce, una sola scatola (CEO 9/10: «non è possibile che ci siano legacy così»).
 *
 * Flatsome stampa .woocommerce-message > .message-container: 49 regole sparse nei CSS
 * davano bordo verde da 2 px al contenitore esterno e uno sfondo bianco a quello interno
 * (scatola dentro scatola). Qui: la scatola è il contenitore esterno, quello interno è testo.
 *
 * Dentro @layer tbp-appearance perché il tema scuro colora gli avvisi con !important in quel
 * layer, e un !important in un layer batte ogni !important fuori. Le tre :not(#…) danno la
 * specificità di tre id: le regole vecchie arrivano al massimo a due.
 */
@layer tbp-appearance {
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #EEF6F1;
    --tbp-avv-linea: rgba(8, 72, 40, .16);
    --tbp-avv-testo: #0B3B24;
    --tbp-avv-segno: #084828;
    --tbp-avv-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 720px !important;
    min-height: 0 !important;
    margin: 16px auto !important;
    padding: 14px 18px 14px 50px !important;
    list-style: none !important;
    border: 1px solid var(--tbp-avv-linea) !important;
    border-radius: 14px !important;
    background: var(--tbp-avv-fondo) !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--tbp-avv-testo) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }
  html body .woocommerce-info:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #F3F6F4;
    --tbp-avv-linea: rgba(8, 72, 40, .12);
    --tbp-avv-testo: #24372D;
    --tbp-avv-segno: #3D5A4B;
    --tbp-avv-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 10v6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='6.6' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
  }
  html body .woocommerce-error:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #FCF1EF;
    --tbp-avv-linea: rgba(164, 38, 24, .2);
    --tbp-avv-testo: #7A2116;
    --tbp-avv-segno: #B3261E;
    --tbp-avv-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 5.5v7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='16' r='1.4' fill='%23fff'/%3E%3C/svg%3E");
  }
  html[data-tbp-theme="dark"] body .woocommerce-message:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #16261D; --tbp-avv-linea: #2C5A3E; --tbp-avv-testo: #E6F0EA; --tbp-avv-segno: #2F8A57;
  }
  html[data-tbp-theme="dark"] body .woocommerce-info:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #18201C; --tbp-avv-linea: #2B3530; --tbp-avv-testo: #E3E9E5; --tbp-avv-segno: #5C7A6A;
  }
  html[data-tbp-theme="dark"] body .woocommerce-error:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) {
    --tbp-avv-fondo: #2A1714; --tbp-avv-linea: #5A2A22; --tbp-avv-testo: #F5DCD7; --tbp-avv-segno: #C2463A;
  }

  /* Il segno: un tondo pieno con il simbolo bianco, al posto delle icone di Flatsome. */
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *)::before {
    content: "" !important;
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    right: auto !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--tbp-avv-icona) center / 22px 22px no-repeat, var(--tbp-avv-segno) !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: none !important;
  }
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) :is(i[class^="icon-"], i[class*=" icon-"], .message-icon) {
    display: none !important;
  }

  /* Il contenitore interno di Flatsome diventa solo testo. */
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) :is(.message-container, li) {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left !important;
    list-style: none !important;
  }
  html body .woocommerce-error:not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) li + li {
    margin-top: 6px !important;
  }
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) li::before {
    content: none !important;
  }
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) a:not(.button) {
    color: inherit !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *) a.button {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin: 0 0 0 10px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--tbp-avv-segno) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    vertical-align: middle !important;
  }
  /* 13/10 (CEO: l'avviso «Your password has been reset successfully.» con due cornici). WooCommerce, mezzo secondo
     dopo il caricamento, dà il fuoco da solo al primo avviso della pagina (tabindex="-1", per chi usa un lettore di
     schermo): il contorno del fuoco usciva a ogni pagina con un avviso, e intorno al bordo della scatola faceva
     una seconda cornice. Un avviso con tabindex="-1" non si raggiunge con la tastiera: il contorno resta solo per
     un avviso che qualcuno rende davvero raggiungibile (tabindex="0"). */
  html body :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):not(#tbp-avv-1):not(#tbp-avv-2):not(#tbp-avv-3):not(.cart-empty):not(.wc-empty-cart-message *):not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--tbp-avv-segno) !important;
    outline-offset: 3px !important;
  }
}