/* ============================================================
   NOTIFICHE WooCommerce — Hornoi Core

   Copre le due famiglie di avvisi che WooCommerce può stampare:

   1) Notice "classiche" (shop, scheda prodotto, account, mini-cart AJAX):
      .woocommerce-message / .woocommerce-error / .woocommerce-info,
      emesse da woocommerce_output_all_notices dentro
      .woocommerce-notices-wrapper (o, sulla scheda prodotto, dentro
      .product-single__notices).
   2) Notice dei blocchi Gutenberg (carrello e checkout):
      .wc-block-components-notice-banner.is-success|is-error|is-info|is-warning.

   Il linguaggio visivo è quello del resto del sito: card bianca appena
   tinta, raggio 14px, ombra morbida (come --cart-shadow), barra d'accento a
   sinistra, icona in SVG inline e bottone nero maiuscolo come nel minicart.

   Nota sui selettori: le regole dei blocchi partono sempre dalla coppia
   classe base + modificatore (.wc-block-components-notice-banner.is-error →
   specificità 0,2,0) perché il bundle di WooCommerce Blocks può essere
   stampato DOPO questo foglio; con la sola classe base vincerebbe lui.
   Sulle notice classiche basta l'ordine di caricamento (enqueue a priorità
   20, dopo woocommerce-general).
   ============================================================ */

:root {
    --notice-radius: 14px;
    --notice-shadow: 0 6px 20px rgba(0, 0, 0, .07);
    --notice-success: #22a447;
    --notice-error:   #c23b3b;
    --notice-info:    #f5a623;
}

/* Il wrapper resta nel DOM anche senza avvisi: senza questo lascerebbe un
   margine fantasma sopra la griglia prodotti. */
.woocommerce-notices-wrapper:empty,
.product-single__notices:empty {
    display: none;
}

/* ============================================================
   CARD — base condivisa
   ============================================================ */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 18px;
    padding: 15px 20px 15px 56px;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--notice-accent) 20%, #fff);
    border-left: 4px solid var(--notice-accent);
    border-radius: var(--notice-radius);
    background: color-mix(in srgb, var(--notice-accent) 6%, #fff);
    box-shadow: var(--notice-shadow);
    color: var(--site-text-color, #111);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    animation: hornoi-notice-in .35s cubic-bezier(.22, .61, .36, 1) both;
}

/* Icona: pastiglia SVG colorata con l'accento della notice. `mask` invece di
   `background-image` così un solo file serve tutte e tre le varianti. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.wc-block-components-notice-banner.is-success::before,
.wc-block-components-notice-banner.is-error::before,
.wc-block-components-notice-banner.is-info::before,
.wc-block-components-notice-banner.is-warning::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    background: var(--notice-accent);
    -webkit-mask: var(--notice-icon) no-repeat center / 22px 22px;
    mask: var(--notice-icon) no-repeat center / 22px 22px;
}

/* L'ultima notice del gruppo non deve staccare dal contenuto che segue. */
.woocommerce-notices-wrapper > :last-child,
.product-single__notices > :last-child {
    margin-bottom: 24px;
}

/* ============================================================
   VARIANTI
   ============================================================ */

/* Successo — spunta */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
    --notice-accent: var(--notice-success);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6'/%3E%3C/svg%3E");
}

/* Errore — punto esclamativo */
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    --notice-accent: var(--notice-error);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
}

/* Info e avviso — "i" (l'arancio è lo stesso accento della scheda prodotto) */
.woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    --notice-accent: var(--notice-info);
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.2v5.3'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E");
}

/* ============================================================
   CONTENUTO
   ============================================================ */

/* .woocommerce-error è una <ul>: gli <li> tornano righe semplici e, se sono
   più d'uno, si impilano occupando tutta la card. */
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button),
.wc-block-components-notice-banner a {
    color: inherit;
    font-weight: 700;
    text-underline-offset: 3px;
}

.wc-block-components-notice-banner__content {
    flex: 1 1 auto;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
    margin-bottom: 4px;
    font-weight: 700;
}

/* L'icona nativa del banner a blocchi è sostituita dalla nostra pastiglia.
   Solo figlia diretta: la <svg> del pulsante di chiusura resta al suo posto. */
.wc-block-components-notice-banner > svg {
    display: none;
}

/* ============================================================
   BOTTONE ("Visualizza carrello", "Torna al negozio", …)

   Nel markup di Woo il bottone PRECEDE il testo: `order` lo rimanda in coda
   e `margin-left:auto` lo spinge a destra. Woo lo fa flottare: qui il float
   va azzerato o esce dal flusso flex.
   ============================================================ */

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    order: 9;
    float: none;
    margin: 0 0 0 auto;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--btn-radius);
    background: var(--btn-gradient);
    background-size: var(--btn-gradient-size);
    color: var(--btn-color);
    font-size: 12px;
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    box-shadow: var(--btn-shadow);
    transition: var(--btn-transition);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-position: var(--btn-gradient-pos-hover);
    color: var(--btn-color);
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(-1px);
}

/* ============================================================
   CHIUSURA (solo notice a blocchi)
   ============================================================ */

.wc-block-components-notice-banner__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--site-text-color, #111) 55%, transparent);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.wc-block-components-notice-banner__dismiss:hover {
    background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
    color: var(--site-text-color, #111);
}

/* ============================================================
   AVVISO DEL NEGOZIO (demo store notice)
   Di serie è una barra fucsia: qui diventa la barra nera del tema.
   ============================================================ */

.woocommerce-store-notice,
p.demo_store {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 20px;
    background: var(--primary-color, #000);
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
}

.woocommerce-store-notice a,
p.demo_store a {
    color: #fff;
    text-underline-offset: 3px;
}

/* ============================================================
   INGRESSO
   ============================================================ */

@keyframes hornoi-notice-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning {
        animation: none;
    }

    .woocommerce-message .button:hover,
    .woocommerce-error .button:hover,
    .woocommerce-info .button:hover {
        transform: none;
    }
}

/* ============================================================
   MOBILE — il bottone va a capo a tutta larghezza
   ============================================================ */

@media (max-width: 575px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .wc-block-components-notice-banner.is-success,
    .wc-block-components-notice-banner.is-error,
    .wc-block-components-notice-banner.is-info,
    .wc-block-components-notice-banner.is-warning {
        padding: 14px 16px 14px 50px;
        font-size: 14px;
    }

    .woocommerce-message::before,
    .woocommerce-error::before,
    .woocommerce-info::before,
    .wc-block-components-notice-banner.is-success::before,
    .wc-block-components-notice-banner.is-error::before,
    .wc-block-components-notice-banner.is-info::before,
    .wc-block-components-notice-banner.is-warning::before {
        left: 15px;
        width: 20px;
        height: 20px;
        -webkit-mask-size: 20px 20px;
        mask-size: 20px 20px;
    }

    .woocommerce-message .button,
    .woocommerce-error .button,
    .woocommerce-info .button {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}