/* =========================================
   1. PULIZIA ESTREMA E RESET
   ========================================= */
.elementor-widget-woocommerce-product-images, 
.elementor-widget-woocommerce-product-title,
.elementor-widget-woocommerce-product-add-to-cart,
.elementor-widget-woocommerce-product-meta,
.elementor-widget-woocommerce-product-content,
.elementor-top-section .elementor-widget-heading:has(.tiered-pricing-dynamic-price-wrapper),
.elementor-top-section .elementor-widget-heading:has(.amount) {
    display: none !important;
}

.woocommerce-tabs, .related.products, .up-sells.upsells,
.elementor-section:not(.elementor-top-section) { 
    display: block !important; clear: both;
}

/* Nasconde i <br> inutili che rompono l'allineamento verticale */
.cnc-col-right br { display: none; }

/* =========================================
   2. WRAPPER PRINCIPALE
   ========================================= */
#cnc-app-wrapper { 
    background: #fff; 
    margin: 20px auto 80px auto; 
    padding: 0 15px; 
    width: 100%; 
    max-width: 1600px; 
    font-family: 'Inter', sans-serif; 
    box-sizing: border-box;
}

/* Regola Universale: Box Model Corretto per TUTTO dentro il wrapper */
#cnc-app-wrapper *, 
#cnc-app-wrapper *::before, 
#cnc-app-wrapper *::after {
    box-sizing: border-box;
}

#cnc-app-wrapper h1 {
    font-weight: 800; 
    color: #1a1a1a; 
    margin-bottom: 60px; 
    font-size: 2.5em; 
    text-align: center;
    letter-spacing: -0.5px;
}

/* =========================================
   3. SISTEMA A GRIGLIA SIMMETRICA
   ========================================= */
/* Questa è la chiave: definisce la geometria ESATTA per sopra e sotto */
.cnc-grid, .preview-section-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; /* Due colonne identiche (50% - 50%) */
    gap: 35px; /* Il "Canale" centrale vuoto è largo 50px ovunque */
    align-items: start;
    width: 100%;
}

@media (max-width: 1024px) {
    .cnc-grid, .preview-section-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --- BLOCCO SUPERIORE --- */
.cnc-grid {
    margin-bottom: 0; 
    padding-bottom: 50px; /* Spazio vuoto PRIMA della linea divisoria */
}

/* Colonna Sinistra (3D) */
.cnc-col-left { 
    position: sticky; 
    top: 20px; 
    width: 100%; 
}

#preview-3d { 
    width: 100%; 
    height: 500px; 
    background: #f5f5f5; 
    position: relative; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    overflow: hidden;
    display: block;
}

#loading-msg { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    font-weight: 600; color: #777;
    background: rgba(255,255,255,0.9); padding: 10px 20px; 
    border-radius: 4px;
}

/* Colonna Destra (Controlli) */
.cnc-col-right { 
    padding: 0; 
    width: 100%;
    /* Flexbox per distribuire gli elementi verticalmente se necessario */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#base-price-display {
    font-size: 3em; 
    font-weight: 900; 
    color: #00285a; 
    margin-bottom: 30px; 
    text-align: left; 
    line-height: 1;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; 
}

/* =========================================
   4. WIZARD UI
   ========================================= */
.wizard-step { display: none; width: 100%; }
.wizard-step.active { display: block; }

.step-header {
    font-size: 1.1em; 
    font-weight: 700; 
    text-transform: uppercase; 
    color: #444;
    margin-bottom: 25px; 
    letter-spacing: 1px; 
    border-left: 4px solid #00285a;
    padding-left: 15px;
    display: block;
}

/* Opzioni */
.option-group { margin-bottom: 30px; }
.option-label { display: block; font-weight: 700; margin-bottom: 10px; color: #333; font-size: 0.95em; }

.option-button { 
    display: inline-block; 
    padding: 12px 20px; 
    border: 1px solid #ccc; 
    background: #fff; 
    margin: 0 8px 10px 0; 
    cursor: pointer; 
    font-weight: 600; 
    color: #555; 
    transition: all 0.2s;
    min-width: 80px; 
    text-align: center;
    border-radius: 6px;
}
.option-button:hover { border-color: #00285a; color: #00285a; background: #f0f4f8; }
.option-button.selected { 
    background-color: #00285a; 
    color: white; 
    border-color: #00285a; 
    box-shadow: 0 4px 6px rgba(0,40,90,0.2);
}

/* =========================================
   5. TOOLBOX INPUT (Step 2)
   ========================================= */
.tool-box { background: #fff; width: 100%; }

.input-group { margin-bottom: 25px; width: 100%; }
.input-label { font-weight: 700; display: block; margin-bottom: 8px; color: #333; font-size: 0.9em; }

/* Input standardizzati */
#text-input, #font-selector { 
    width: 100%; 
    padding: 0 12px; 
    border: 1px solid #ccc; 
    font-size: 15px; 
    outline: none; 
    border-radius: 4px;
    height: 50px; /* Altezza fissa */
    background: #fff;
    line-height: normal;
}
#text-input:focus, #font-selector:focus { border-color: #00285a; }

.color-picker-input {
    height: 50px !important; 
    width: 60px !important; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    padding: 3px; 
    cursor: pointer;
    background: #fff;
}

.btn-add { 
    background: #00285a; color: white; width: 50px; height: 50px;
    font-size: 24px; padding: 0; cursor: pointer; border:none;
    margin-left: 10px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    padding-bottom: 3px;
}
.btn-add:hover { background: #001f4d; }

.btn-danger { 
    background: #fff; color: #d9534f; border: 1px solid #d9534f; 
    font-size: 0.85em; padding: 12px; width: 100%; 
    font-weight: 700; cursor: pointer; transition: 0.2s;
    margin-top: 20px; text-transform: uppercase; border-radius: 4px;
}
.btn-danger:hover { background: #d9534f; color: white; }

/* =========================================
   6. BLOCCO INFERIORE (Tabella + Anteprima)
   ========================================= */
.preview-section-grid {
    margin-top: 0;
    padding-top: 50px; /* Spazio vuoto DOPO la linea divisoria (SIMMETRICO con sopra) */
    border-top: 1px solid #e5e5e5;
}

.pricing-col, .canvas-col { width: 100%; padding: 0; margin: 0; }

/* TITOLI ALLINEATI AL PIXEL */
.pricing-col h5, .preview-2d-label { 
    margin: 0 0 25px 0; /* Spazio sotto il titolo */
    padding-bottom: 15px; /* Spazio interno */
    border-bottom: 1px solid #eee; 
    color: #333; 
    font-size: 0.9em; 
    text-transform: uppercase; 
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    display: block;
    width: 100%;
}

/* Tabella */
.tiered-pricing-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    font-size: 0.95em; 
    color: #444; 
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.tiered-pricing-table th { 
    text-align: left; padding: 15px; 
    background: #f8f9fa; color: #333; 
    text-transform: uppercase; font-size: 0.8em; font-weight: 700;
    border-bottom: 1px solid #ddd;
}
.tiered-pricing-table td { 
    padding: 12px 15px; border-bottom: 1px solid #eee; 
}
.tiered-pricing-table tbody tr:last-child td { border-bottom: none; }
.tiered-pricing-table tbody tr:hover { background-color: #f0f4f8; }
.tiered-pricing-table tr.active-tier td { 
    background-color: #00285a; color: #fff; font-weight: 600; 
}

/* Input Quantità */
.qty-control { 
    margin-top: 25px; 
    background: #f9f9f9; 
    padding: 20px; 
    border: 1px solid #eee; 
    border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.qty-control label { margin: 0; font-weight: 700; color: #333; }
#cnc-qty-input { 
    width: 100px; padding: 8px; text-align: center; font-size: 1.4em; 
    border: 1px solid #ccc; background: #fff; border-radius: 4px;
    color: #333; font-weight: 700; 
}

/* Canvas */
#editor-canvas { 
    border: 2px dashed #ccc; 
    background: #fff; 
    cursor: crosshair; 
    width: 100% !important; 
    height: auto; 
    display: block; 
    border-radius: 4px;
    margin-bottom: 30px; /* Spazio garantito prima dei bottoni */
}
#editor-canvas:hover { border-color: #00285a; }

/* =========================================
   7. AZIONI (Bottoni)
   ========================================= */
.action-bar { 
    margin-top: 30px; 
    display: flex; 
    justify-content: space-between; 
    gap: 20px; 
    align-items: center; 
    width: 100%;
}

.action-btn { 
    padding: 0 24px; 
    font-weight: 700; 
    cursor: pointer; 
    border: none; 
    font-size: 1em; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    height: 56px; /* Altezza generosa e fissa */
    display: flex; align-items: center; justify-content: center;
}

/* Colori */
.btn-primary, .btn-success { 
    background: #00285a; color: white; box-shadow: 0 4px 6px rgba(0,40,90,0.2);
}
.btn-primary:hover, .btn-success:hover { 
    background: #001f4d; box-shadow: 0 6px 8px rgba(0,40,90,0.3);
}

.btn-primary { width: 100%; margin-top: 20px; } /* Spazio sopra il bottone "Vai al Design" */
.btn-success { flex-grow: 1; }

.btn-back { 
    background: transparent; color: #666; 
    border: 2px solid #ddd; 
    padding: 0 30px; 
    box-sizing: border-box;
}
.btn-back:hover { border-color: #bbb; color: #333; background: #f5f5f5; }

/* Utility */
.flex-row { display: flex; gap: 15px; align-items: center; width: 100%; } 
.flex-grow { flex-grow: 1; }

/* Fix Elementor Larghezza */
#cnc-app-wrapper + .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1600px;
    padding:0 15px;
}

/* Prezzo Principale (Classe condivisa) */
#base-price-display, .cnc-price-display { /* Aggiunto il selettore di classe */
    font-size: 3em; 
    font-weight: 900; 
    color: #00285a; 
    margin-bottom: 30px; 
    text-align: left; 
    line-height: 1;
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px;
}
/* Rimuovi il vecchio selettore #base-price-display se presente */

.qty-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qty-input-wrapper input {
    flex: 1;
    max-width: 120px;
}

.qty-min-notice {
    font-weight: 500;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.qty-control {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.qty-min-notice {
    white-space: nowrap;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@media only screen and (max-width: 992px) {
  .outer-di-stampa {overflow: scroll;}
  .canvas-col { overflow: auto; }

  .preview-section-grid .pricing-col {order: 2;}
  .preview-section-grid .canvas-col {order: 1;}
}


/* =========================================
   SELETTORE COLORI (PALLINI)
   ========================================= */

/* Contenitore flessibile per allineare i pallini */
#color-options {
    display: flex;
    flex-wrap: wrap; /* Va a capo se ci sono troppi colori */
    gap: 12px;       /* Spazio tra i pallini */
    margin-top: 8px;
    margin-bottom: 20px;
    align-items: center;
}

/* Stile base del pallino */
.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Lo rende perfettamente rotondo */
    cursor: pointer;
    
    /* Ombra leggera per dare profondità */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    
    /* Transizioni fluide per hover e click */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Bordo trasparente di base per evitare "salti" quando viene selezionato */
    border: 2px solid transparent; 
    box-sizing: border-box;
}

/* Effetto al passaggio del mouse */
.color-dot:hover {
    transform: scale(1.15); /* Si ingrandisce leggermente */
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

/* STATO SELEZIONATO */
.color-dot.selected {
    transform: scale(1.2); /* Rimane ingrandito */
    
    /* Bordo blu primario (o il colore del tuo tema) */
    border:1px solid #00285a !important; 
    
    /* Trucco CSS: crea un "anello" bianco interno tra il colore e il bordo blu */
    box-shadow: 0 0 0 2px #fff inset; 
}

/* =========================================
   MIGLIORAMENTO STILE MATERIALI (Opzionale)
   ========================================= */
/* Per rendere i bottoni dei materiali uniformi se i nomi sono lunghi */
.option-button.mat-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    padding: 5px 15px;
    font-size: 14px;
}
.option-button.mat-btn strong {
    font-weight: 700;
    margin-right: 4px; /* Spazio dopo la parola in grassetto */
}

/* Stile per opzioni disabilitate/non compatibili */
.option-button.disabled {
    opacity: 0.3;
    pointer-events: none; /* Impedisce il click */
    background-color: #eee;
    border-color: #ddd;
    color: #aaa;
    text-decoration: line-through; /* Opzionale: barra il testo */
}

/* Assicuriamoci che il contenitore delle lunghezze sia visibile */
#length-options {
    display: block !important; /* Forza la visualizzazione se era nascosto */
    margin-bottom: 20px;
}