/* @author [Webdojo] - Stili custom attributi a box e prezzo */

/* Nascondiamo la label della tendina standard, se necessario, e la tendina stessa */
table.variations select {
    display: none !important;
}

/* Container degli swatches creati via JS */
.webdojo-swatches-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

/* Stile del singolo Box Attributo */
.webdojo-swatch-btn {
    padding: 8px 16px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px; /* Rendi i bordi più squadrati o arrotondati a piacimento */
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

/* Hover state */
.webdojo-swatch-btn:hover {
    background-color: #e2e2e2;
    border-color: #ccc;
}

/* Active/Selected state */
.webdojo-swatch-btn.is-active {
    background-color: #f59100; /* Colore arancione preso dal tuo screenshot */
    border-color: #f59100;
    color: #fff;
}

/* Disabled state (gestito nativamente da Woo) */
.webdojo-swatch-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* @author [Webdojo] - Stile per il nuovo contenitore del prezzo sotto al titolo */
.webdojo-price-highlight {
    font-size: 28px; 
    font-weight: 700;
    margin-bottom: 20px;
    min-height: 40px; 
}

/* Applichiamo il colore arancione in modo specifico ai tag generati da WooCommerce */
.webdojo-price-highlight,
.webdojo-price-highlight .woocommerce-Price-amount,
.webdojo-price-highlight ins .woocommerce-Price-amount,
.webdojo-price-highlight bdi {
    color: #f59100 !important; 
}

/* Assicuriamoci che un eventuale prezzo barrato (in saldo) mantenga un aspetto corretto */
.webdojo-price-highlight del .woocommerce-Price-amount,
.webdojo-price-highlight del bdi {
    color: #999 !important;
    font-size: 20px;
    font-weight: 400;
    margin-right: 8px;
}

/* Nascondiamo il prezzo della variazione standard generato in basso da Elementor */
.woocommerce-variation-price {
    display: none !important;
}

/* Centriamo verticalmente le label (Misura, Stampa) rispetto ai bottoni */
table.variations th.label {
    vertical-align: middle;
    padding-right: 20px;
    padding-bottom: 15px; /* Spazio in linea con il margin-bottom degli swatches */
}

table.variations td.value {
    position: relative; /* Necessario per posizionare il tasto svuota */
    vertical-align: middle;
}

/* Contenitore globale posizionato sotto la tabella degli attributi */
.webdojo-reset-wrapper {
    display: flex;
    justify-content: flex-end; /* Allinea a destra per bilanciare il layout, puoi mettere flex-start per tenerlo a sinistra */
    margin-top: -10px;
    margin-bottom: 25px;
    min-height: 25px; /* Previene salti visivi quando il tasto appare/scompare */
}

/* Stile del tasto Svuota */
a.reset_variations {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 12px;
    background-color: #f1f1f1;
    color: #666 !important;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    visibility: hidden; /* Gestito da Woo */
    pointer-events: none; /* Claude Fix: Previene click a vuoto quando nascosto */
}

/* Claude Fix: Riattiva gli eventi del mouse quando Woo rende visibile il tasto */
a.reset_variations[style*="visibility: visible"] {
    pointer-events: auto;
}

/* Effetto Hover per far capire che è un'azione distruttiva (Reset) */
a.reset_variations:hover {
    background-color: #e53935; /* Rosso di avviso */
    color: #ffffff !important;
}
/* Opzionale: se Elementor aggiunge margini indesiderati ai container interni */
.elementor-widget-wl-product-add-to-cart table.variations {
    margin-bottom: 25px;
}


/* @author [Webdojo] - Stile descrizione categoria nel singolo prodotto */
.webdojo-single-cat-desc {
    font-size: 16px;
    color: #333;
    font-family: 'Montserrat';
    line-height: 1.6;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eeeeee; /* Una linea di separazione opzionale per dividere la zona del prezzo da quella degli SKU/Attributi */
}

/* Rimuoviamo il margine dai paragrafi nativi di WordPress per mantenere gli spazi puliti */
.webdojo-single-cat-desc p:last-child {
    margin-bottom: 0;
}