/* ========================================= */
/* == Stili Scoped per Configuratore Cloud == */
/* ========================================= */

/* --- Contenitore Principale e Sfondo --- */
.configurator { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #343a40; background-color: #f8f9fa; padding: 20px; }
.configurator-inner { max-width: 900px; margin: 30px auto; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; z-index: 1; border: none; padding: 30px; background: linear-gradient(90deg, #096574 0, #00acc8 50%) !important; }

/* --- Tipografia Globale --- */
.configurator h1 { font-size: 1.8em; color: white; text-align: center; margin: 0 0 30px 0; padding: 0; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.configurator .header-icon { margin-right: 12px; font-size: 1.1em; vertical-align: -0.1em; color: white; }

/* --- Layout Sezioni e Item --- */
.configurator .config-section { padding: 20px 25px; margin-bottom: 20px; border: 1px solid #dee2e6; border-radius: 8px; position: relative; background-color: #ffffff; box-shadow: 0 3px 8px rgba(0,0,0,0.05); }
.configurator .config-section:last-of-type { margin-bottom: 0; }
.configurator .config-section > h2 { margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; width: 100%; display: flex; align-items: center; font-size: 1.4em; color: #0056b3; font-weight: 500;}
.configurator .config-section > h2 .section-icon { margin-right: 10px; font-size: 1em; color: #007AB4; width: 1.25em; text-align: center; }
.configurator .section-description { font-size: 0.9em; color: #555; margin-top: -10px; margin-bottom: 20px; line-height: 1.5; }
.configurator .sub-section { margin-bottom: 0; padding-bottom: 0; }
.configurator .storage-group .config-item,
.configurator .network-group .config-item { border-bottom: 1px dashed #d0d5dd; padding: 20px 0; margin-bottom: 0; }
.configurator .storage-group .sub-section:last-of-type .config-item,
.configurator .network-group .config-item:last-of-type { border-bottom: none; padding-bottom: 0; }
.configurator .config-item { padding: 15px 0 0 0; }
.configurator .config-section > h2 + .config-item,
.configurator .config-section > .section-description + .config-item { padding-top: 0; }
.configurator .storage-group > .sub-section:first-of-type > .config-item,
.configurator .network-group > .config-item:first-of-type { padding-top: 0; }

/* Header dell'Item */
.configurator .item-header { margin-bottom: 15px; }
.configurator .item-title-line { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; min-height: 24px; }
.configurator .item-title-line h2,
.configurator .item-title-line h3 { font-size: 1.1em; color: #343a40; font-weight: 600; margin: 0; padding: 0; border-bottom: none; display: inline-flex; align-items: baseline; flex-grow: 1; }
.configurator .item-title-line h3 { font-size: 1.05em; }
.configurator .item-title-line .section-icon { margin-right: 8px; font-size: 0.9em; color: #007AB4; width: 1.25em; text-align: center; }
.configurator .item-header p.description { font-size: 0.85em; color: #6c757d; margin: 0; line-height: 1.4; max-width: 100%; padding-left: 0px; }

/* Stili Toggle Switch */
.configurator .toggle-label { font-size: 0.7em; font-weight: bold; text-transform: uppercase; color: #adb5bd; cursor: default; transition: color 0.4s ease; user-select: none; }
.configurator .switch { position: relative; display: inline-block; width: 50px; height: 24px; flex-shrink: 0; }
.configurator .switch input { opacity: 0; width: 0; height: 0; }
.configurator .switch .switch-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #adb5bd; transition: .4s; border-radius: 24px; }
.configurator .switch .switch-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.configurator .switch input:checked + .switch-slider { background-color: #007AB4; }
.configurator .switch input:focus + .switch-slider { box-shadow: 0 0 1px #007AB4; }
.configurator .switch input:checked + .switch-slider:before { transform: translateX(26px); }
.configurator .switch input:checked ~ .toggle-label-on { color: #007AB4; }
.configurator .switch input:not(:checked) ~ .toggle-label-off { color: #6c757d; }

/* Riga Interattiva e Controlli */
.configurator .item-controls-row { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.configurator .item-select-row { margin-top: 10px; } /* Riga per la select */

.configurator .slider-wrapper { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 150px; }
.configurator .slider-limit { font-size: 0.75em; color: #007AB4; flex-shrink: 0; min-width: 25px; text-align: center; }
.configurator .slider-limit.slider-min { text-align: left; }
.configurator .slider-limit.slider-max { text-align: right; }
.configurator .slider { flex-grow: 1; width: auto; height: 8px; cursor: pointer; appearance: none; background: #dee2e6; border-radius: 5px; outline: none; transition: background-color .2s, opacity .2s; margin-top: 0; }
.configurator .slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #007AB4; border-radius: 50%; cursor: pointer; transition: background-color 0.2s; }
.configurator .slider::-moz-range-thumb { width: 20px; height: 20px; background: #007AB4; border-radius: 50%; cursor: pointer; border: none; transition: background-color 0.2s; }

/* Stile per la Select della Banda */
.configurator .select-wrapper { /* Wrapper per la select se usasse layout a colonne */
    flex: 1; min-width: 150px; display: flex; }
.configurator .config-select { /* Stile per la select stessa */
    width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.95em; background-color: #fff; box-sizing: border-box; cursor: pointer; appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.65em auto; padding-right: 2.5rem; }
.configurator .config-select:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }


/* Area Valore (Prezzo + Input/Bottoni) - a destra */
.configurator .value-area { display: flex; flex-direction: column; align-items: flex-end; min-width: 155px; flex-shrink: 0; justify-content: center; }
.configurator .item-price { display: block; text-align: right; font-size: 0.8em; color: #555; margin-bottom: 4px; font-weight: 500; min-height: 1.1em; }
/* NUOVO: Stile per prezzo inline accanto a descrizione */
.configurator .select-price-inline {
    display: inline-block; /* Per stare sulla stessa riga */
    margin-left: 8px; /* Spazio dalla descrizione */
    font-weight: 600; /* Leggermente bold */
    color: #333;
    font-size: 0.9em; /* Dimensione simile alla desc */
    white-space: nowrap; /* Evita che vada a capo */
    float:right;
}

/* Assicura altezza minima value-area per Banda */
.configurator .network-group .config-item:first-of-type .value-area {
    min-height: 40px;
}


.configurator .value-input-controls { display: flex; align-items: center; gap: 5px; }
.configurator .value-display { width: 55px; text-align: center; padding: 3px 8px; border: 1px solid #ced4da; border-radius: 4px; background-color: #ffffff; font-weight: 500; color: #343a40; font-size: 0.9em; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); transition: background-color .2s, opacity .2s; }
.configurator .value-display:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.configurator .btn { padding: 4px 9px; font-size: 1.0em; font-weight: bold; cursor: pointer; border: none; background-color: #007AB4; color: #ffffff; border-radius: 4px; min-width: 28px; text-align: center; transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease; }
.configurator .btn:hover { background-color: #0056b3; }
.configurator .btn:active { background-color: #004085; transform: scale(0.97); }

/* Stili Elementi Disabilitati */
.configurator .slider:disabled { opacity: 0.5; cursor: not-allowed; background: #e9ecef; }
.configurator .slider:disabled::-webkit-slider-thumb { background: #adb5bd; cursor: not-allowed; }
.configurator .slider:disabled::-moz-range-thumb { background: #adb5bd; cursor: not-allowed; }
.configurator .slider:disabled ~ .slider-limit { opacity: 0.5; }
.configurator .value-display:disabled { background-color: #e9ecef; cursor: not-allowed; opacity: 0.7; }
.configurator .btn:disabled { background-color: #adb5bd; cursor: not-allowed; opacity: 0.65; }
.configurator .value-area .item-price.disabled { opacity: 0.5; }


/* --- Sezione Note --- */
.configurator .notes-section h2 { font-size: 1.2em; margin-bottom: 10px; border-bottom: none; color: #0056b3; display: block; width: 100%; }
.configurator .notes-textarea { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-family: inherit; font-size: 0.9em; min-height: 80px; resize: vertical; box-sizing: border-box;}
.configurator .notes-textarea:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

/* --- Stili Sezione Form Contatto (Layout Centrato) --- */
.configurator .contact-form-section {
    background-color: #ffffff; /* Changed from #f8f9fa to white */
    margin-top: 30px;
    padding: 2rem 1rem; /* Aggiunto padding laterale */
    display: flex; /* Abilita flex per centrare */
    flex-direction: column; /* Impila gli elementi */
    align-items: center; /* Centra gli elementi orizzontalmente */
}

.configurator .contact-form-section .form-title {
    font-size: 1.3em;
    color: var(--primary-blue, #0056b3); /* Usa variabile blu */
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    margin-bottom: 25px; /* Aumentato spazio sotto il titolo */
    display: block;
    width: 100%;
    max-width: 500px; /* Larghezza massima titolo */
    text-align: center; /* Centra testo titolo */
}

.configurator .contact-form-section #quote-form {
    width: 100%;
    max-width: 500px; /* Larghezza massima del form (circa metà contenitore largo) */
}

/* --- Stile Campi Form (Centrati, Icone interne, colori blu) --- */
.configurator .contact-form-section .form-group {
    margin-bottom: 1.2rem; /* Spazio tra i campi impilati */
    position: relative; /* Necessario per posizionare l'icona */
}

.configurator .contact-form-section .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-blue, #0056b3); /* Colore icona blu */
    font-size: 1.1em;
    pointer-events: none;
    z-index: 2;
}

.configurator .contact-form-section .input-with-icon input[type="text"],
.configurator .contact-form-section .input-with-icon input[type="email"],
.configurator .contact-form-section .input-with-icon input[type="tel"] {
    width: 100%; /* Occupa tutta la larghezza del form (che è max 500px) */
    /* Padding ridotto di 0.1rem (circa 1.6px, simile a 2pt) */
    padding: 0.8rem 0.8rem 0.8rem 45px; /* Padding: top right bottom left (spazio per icona) */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Stile al focus */
.configurator .contact-form-section .input-with-icon input:focus {
    border-color: var(--primary-blue, #0056b3); /* Bordo blu al focus */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25); /* Ombra esterna blu */
    outline: none;
}

.configurator .contact-form-section .input-with-icon input::placeholder {
    color: #888;
    opacity: 1;
}

/* --- Stile Bottone (Blu, Larghezza come Input) --- */
.configurator .contact-form-section .btn-submit {
    padding: 0.8rem 1.8rem; /* Padding verticale come input */
    background-color: var(--primary-blue, #0056b3); /* Sfondo blu */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: block; /* Cambiato in block */
    width: 100%; /* Larghezza 100% del contenitore form */
    margin-top: 1rem; /* Aumentato spazio sopra il bottone */
    box-sizing: border-box; /* Include padding nel width */
}

.configurator .contact-form-section .btn-submit:hover {
    background-color: var(--darker-blue, #004494); /* Blu più scuro all'hover */
}
.configurator .contact-form-section .btn-submit:active {
    transform: scale(0.98); /* Effetto pressione */
}

/* --- Messaggio di Risposta --- */
.configurator .contact-form-section .form-response-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    border-radius: 4px;
    text-align: center;
    width: 100%; /* Occupa larghezza form */
    max-width: 500px; /* Stessa larghezza massima del form */
    box-sizing: border-box;
}


/* --- Stili Popup Cattura Parziale --- */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.popup-overlay.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.popup-content { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-width: 450px; width: 90%; position: relative; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; }
.popup-overlay.visible .popup-content { transform: scale(1); }
.popup-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2em; line-height: 1; color: #aaa; cursor: pointer; padding: 0; }
.popup-close-btn:hover { color: #333; }
.popup-content h3 { margin-top: 0; margin-bottom: 15px; color: #0056b3; }
.popup-content p { margin-bottom: 20px; font-size: 0.95em; color: #555; }
/* Stili per il form nel popup (se usi le stesse classi del form principale, potrebbero ereditare stili) */
.popup-content .form-group { margin-bottom: 15px; text-align: left; } /* Allinea label a sinistra */
.popup-content .form-group label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 0.9em; color: #495057; }
.popup-content .form-group input[type="text"],
.popup-content .form-group input[type="email"],
.popup-content .form-group input[type="tel"] { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 0.95em; box-sizing: border-box; }
.popup-content .form-group input:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.popup-content .btn-submit-partial { width: 100%; padding: 10px; font-size: 1em; background-color: var(--primary-blue, #0056b3); color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
.popup-content .btn-submit-partial:hover { background-color: var(--darker-blue, #004494); }
.popup-privacy { font-size: 0.75em !important; color: #888 !important; margin-top: 15px !important; }

 
/* --- Sezione Prezzo Totale --- */
.configurator .total-price { margin: 0; padding: 25px 25px; border-top: 1px solid #dee2e6; text-align: right; font-size: 1.3em; font-weight: 600; color: #343a40; background-color: #ffffff; border-radius: 8px; }
.configurator #total-price-value { color: #007AB4; margin-left: 15px; font-size: 1.4em; font-weight: 700; }

/* --- Media Query per Schermi Piccoli --- */
@media (max-width: 650px) {
    .configurator { padding: 0; background-color: #fff; }
    .configurator-inner { padding: 15px; border: none; box-shadow: none; margin: 0; border-radius: 0; background: transparent !important; }
    .configurator h1 { padding: 15px 0; font-size: 1.5em; color: #212529; border-bottom: none; background-color: transparent;}
    .configurator .header-icon { color: #007AB4; }
    .configurator .config-section { padding: 15px; border-radius: 6px; border: 1px solid #eee; margin-bottom: 15px; box-shadow: none; }
    .configurator .config-section:last-of-type { margin-bottom: 0; border-bottom: none;}
    .configurator .contact-form-section { margin-top: 20px; padding: 1.5rem 1rem; } /* Riduci padding su mobile */
    .configurator .total-price { margin-bottom: 15px;}

    .configurator .storage-group { padding: 15px; }
     .configurator .sub-section .config-item { padding-bottom: 15px; margin-bottom: 15px; }

    .configurator .item-header { gap: 5px 10px; }
    .configurator .item-title-line { flex-wrap: wrap; }
    .configurator .item-header .switch { margin-left: 0; }

    /* Rimuovi regola flex-direction per queste righe su mobile */
    .configurator .item-controls-row,
    .configurator .item-select-row { flex-direction: row; /* Mantieni side-by-side se possibile */ flex-wrap: wrap; /* Permetti wrap se non c'è spazio */ }

     .configurator .slider-wrapper { gap: 8px; min-width: 0; flex-basis: 60%; /* Adatta base */ }
     .configurator .select-wrapper { min-width: unset; flex-basis: 100%; } /* Select prende tutta la riga */

     .configurator .slider-limit { min-width: 15px; font-size: 0.7em; }
     .configurator .slider { min-width: unset; width: 100%; }

    .configurator .value-area { min-width: unset; width: auto; align-items: flex-end; flex-basis: 35%; /* Adatta base */}
    .configurator .item-price { text-align: right; }
     .configurator .value-input-controls { justify-content: flex-end; width: auto; }

     /* Caso specifico Banda su mobile */
     .configurator .network-group .config-item:first-of-type .item-controls-row { flex-direction: column; align-items: stretch;}
     .configurator .network-group .config-item:first-of-type .value-area { align-items: flex-start; margin-top: -10px;} /* Allinea prezzo banda a sinistra */
     .configurator .network-group .config-item:first-of-type .item-price { text-align: left; }

    .configurator .item-header h2,
    .configurator .item-header h3 { font-size: 1.1em; }
    .configurator .item-header .description { font-size: 0.8em;}
     .configurator .item-header p.description .select-price-inline { display: block; margin-left: 0; margin-top: 5px; } /* Prezzo banda sotto desc su mobile */


    .configurator .contact-form-section .form-title { font-size: 1.2em;}
    .configurator .notes-section h2 {font-size: 1.1em;}

    /* Form Contatto su mobile: rimuovi max-width per usare più spazio */
    .configurator .contact-form-section .form-title,
    .configurator .contact-form-section #quote-form,
    .configurator .contact-form-section .form-response-message {
        max-width: 100%;
    }

     .configurator .total-price { padding: 20px 15px; font-size: 1.2em; border-radius: 0; margin: 0 -15px -15px -15px;}
     .configurator #total-price-value { font-size: 1.3em; }

     .popup-content { padding: 20px; }
     .popup-content h3 { font-size: 1.2em; }
}


/* ======================================== */
/* == Fine Stili Configuratore Cloud     == */
/* ======================================== */


/* --- Stili Popup Cattura Parziale --- */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.popup-overlay.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.popup-content { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-width: 450px; width: 90%; position: relative; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; }
.popup-overlay.visible .popup-content { transform: scale(1); }
.popup-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 2em; line-height: 1; color: #aaa; cursor: pointer; padding: 0; }
.popup-close-btn:hover { color: #333; }
.popup-content h3 { margin-top: 0; margin-bottom: 15px; color: #0056b3; }
.popup-content p { margin-bottom: 20px; font-size: 0.95em; color: #555; }

/* Stili per il form nel popup - Aggiornati */
.popup-content #partial-form {
    width: 100%; /* Form occupa tutta la larghezza del popup-content */
    max-width: 350px; /* Limita larghezza form nel popup (aggiusta se serve) */
    margin: 0 auto; /* Centra il form se popup-content è più largo */
}

.popup-content .form-group {
    margin-bottom: 1.2rem; /* Spazio tra i campi */
    position: relative; /* Per icona */
    text-align: left; /* Mantiene allineamento per eventuali errori */
}

/* Rimuovi stile label specifico */
/* .popup-content .form-group label { ... } */

/* Icona nel popup */
.popup-content .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-blue, #0056b3); /* Colore icona blu */
    font-size: 1.1em;
    pointer-events: none;
    z-index: 2;
}

/* Input nel popup */
.popup-content .input-with-icon input[type="email"],
.popup-content .input-with-icon input[type="tel"] {
    width: 100%;
    padding: 0.8rem 0.8rem 0.8rem 45px; /* Padding come form principale */
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 1rem; /* Dimensione font come form principale */
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus Input nel popup */
.popup-content .input-with-icon input:focus {
    border-color: var(--primary-blue, #0056b3); /* Bordo blu al focus */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25); /* Ombra esterna blu */
    outline: none;
}

/* Placeholder Input nel popup */
.popup-content .input-with-icon input::placeholder {
    color: #888;
    opacity: 1;
}

/* Bottone nel popup */
.popup-content .btn-submit-partial {
    padding: 0.8rem 1.8rem; /* Padding come form principale */
    background-color: var(--primary-blue, #0056b3); /* Sfondo blu */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem; /* Dimensione font come form principale */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    display: block; /* Block per occupare larghezza */
    width: 100%; /* Larghezza 100% del contenitore form */
    margin-top: 1rem; /* Spazio sopra */
    box-sizing: border-box;
}

.popup-content .btn-submit-partial:hover {
    background-color: var(--darker-blue, #004494); /* Blu più scuro all'hover */
}
.popup-content .btn-submit-partial:active {
    transform: scale(0.98); /* Effetto pressione */
}

.popup-privacy { font-size: 0.75em !important; color: #888 !important; margin-top: 15px !important; }
/* ========================================= */
/* == Stili Aggiuntivi/Modificati        == */
/* ========================================= */

/* --- Testo Introduttivo --- */
.configurator-intro {
    color: white;
    text-align: left;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
    padding: 0 15px; /* Aggiungi padding laterale */
}

/* --- Tooltip Valore Slider --- */
.configurator .slider-wrapper {
    position: relative; /* Necessary for tooltip positioning */
    padding-top: 25px; /* Space above the slider for the tooltip */
    margin-top: 5px; /* Slight additional space */
}

.configurator .slider-value-tooltip {
    position: absolute;
    top: 0; /* Position above the slider */
    left: 50%; /* Start at the center (adjusted dynamically by JS) */
    transform: translateX(-50%); /* Center horizontally */
    background-color: #ffffff; /* White background */
    color: #0056b3; /* Dark blue text */
    border: 1px solid #0056b3; /* Blue border for visibility */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* Prevent interference with slider clicks */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease; /* Smooth transition for visibility */
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Show tooltip when the class is added dynamically by JS */
.configurator .slider-value-tooltip.visible {
    opacity: 1;
}

/* --- Nota Campi Obbligatori --- */
.configurator .required-fields-note {
    font-size: 0.8em;
    color: #6c757d;
    text-align: left;
    margin-top: -10px; /* Avvicina al campo precedente */
    margin-bottom: 15px; /* Spazio prima del bottone */
    width: 100%;
    max-width: 500px; /* Allinea con larghezza form */
    padding-left: 5px; /* Leggero rientro */
}

/* --- Sezione CTA (Call to Action) --- */
.cta-section {
    background-color: #ffffff; /* Sfondo bianco */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.cta-icon {
    max-height: 60px; /* Altezza massima icona */
    width: auto;
    opacity: 0.8;
}
.cta-text {
    color: #343a40; /* Colore testo scuro */
}
.cta-link {
    /* Stile bottone Bootstrap primario (già presente) */
    padding: 10px 25px;
    font-weight: 500;
}
.cta-link i {
    vertical-align: -0.1em; /* Allinea icona nel bottone */
}


/* --- Aggiustamenti Mobile Specifici --- */
@media (max-width: 650px) {
    .configurator-intro {
        font-size: 0.9em;
        padding: 0 5px;
    }
    .configurator .slider-wrapper {
        padding-top: 20px; /* Riduci spazio per tooltip su mobile */
    }
    .configurator .slider-value-tooltip {
        padding: 2px 6px;
        font-size: 0.7em;
    }
    .cta-section {
        padding: 30px 15px; /* Riduci padding verticale e orizzontale */
    }
    .cta-icon {
        max-height: 50px;
    }
    .cta-text {
        font-size: 1rem; /* Leggermente più piccolo */
    }
    .cta-link {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
}

/* ======================================== */
/* == Fine Stili Aggiuntivi/Modificati   == */
/* ======================================== */

/* File: virtual_private_cloud/style2.css */
/* ... (tutti gli stili precedenti) ... */


/* ========================================= */
/* == Stili Aggiuntivi/Modificati        == */
/* ========================================= */

/* --- Testo Introduttivo --- */
.configurator-intro {
    color: white;
    text-align: center;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
    padding: 0 15px; /* Aggiungi padding laterale */
}

/* --- Tooltip Valore Slider (CORRETTO) --- */
.configurator .slider-wrapper {
    position: relative; /* Necessario per posizionare il tooltip */
    padding-top: 25px; /* Spazio sopra lo slider per il tooltip */
    margin-top: 5px; /* Leggero spazio aggiuntivo */
}

.configurator .slider-value-tooltip {
    position: absolute;
    top: 0; /* Posiziona sopra lo slider */
    left: 50%; /* Inizia al centro (verrà aggiustato da JS) */
    transform: translateX(-50%); /* Centra orizzontalmente rispetto al punto 'left' */
    /* Stile richiesto: sfondo bianco, testo blu */
    background-color: #ffffff; /* Sfondo bianco */
    color: #0056b3; /* Blu scuro (o #007AB4 se preferisci quello più chiaro) */
    border: 1px solid #0056b3; /* Bordo blu per visibilità su bianco */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* Non interferisce con il click sullo slider */
    opacity: 0; /* Nascosto di default */
    transition: opacity 0.2s ease; /* Transizione solo per opacità */
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Leggera ombra */
}

/* Rimuovi le regole CSS che tentavano di mostrare il tooltip con :hover, :active, :focus */
/*
.configurator .slider-wrapper:hover .slider-value-tooltip,
.configurator .slider:active + .slider-value-tooltip,
.configurator .slider:focus + .slider-value-tooltip {
    opacity: 1;
}
*/

/* Classe per mostrare tooltip (aggiunta/rimossa da JS) */
.configurator .slider-value-tooltip.visible {
    opacity: 1 !important;
}


/* --- Nota Campi Obbligatori --- */
.configurator .required-fields-note {
    font-size: 0.8em;
    color: #6c757d;
    text-align: left;
    margin-top: -10px; /* Avvicina al campo precedente */
    margin-bottom: 15px; /* Spazio prima del bottone */
    width: 100%;
    max-width: 500px; /* Allinea con larghezza form */
    padding-left: 5px; /* Leggero rientro */
}

/* --- Sezione CTA (Call to Action) --- */
.cta-section {
    background-color: #ffffff; /* Sfondo bianco */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.cta-icon {
    max-height: 60px; /* Altezza massima icona */
    width: auto;
    opacity: 0.8;
}
.cta-text {
    color: #343a40; /* Colore testo scuro */
}
.cta-link {
    /* Stile bottone Bootstrap primario (già presente) */
    padding: 10px 25px;
    font-weight: 500;
}
.cta-link i {
    vertical-align: -0.1em; /* Allinea icona nel bottone */
}


/* --- Aggiustamenti Mobile Specifici --- */
@media (max-width: 650px) {
    .configurator-intro {
        font-size: 0.9em;
        padding: 0 5px;
    }
    .configurator .slider-wrapper {
        padding-top: 20px; /* Riduci spazio per tooltip su mobile */
    }
    .configurator .slider-value-tooltip {
        padding: 2px 6px;
        font-size: 0.7em;
    }
    .cta-section {
        padding: 30px 15px; /* Riduci padding verticale e orizzontale */
    }
    .cta-icon {
        max-height: 50px;
    }
    .cta-text {
        font-size: 1rem; /* Leggermente più piccolo */
    }
    .cta-link {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
}

/* ======================================== */
/* == Fine Stili Aggiuntivi/Modificati   == */
/* ======================================== */

/* ... (resto degli stili CSS) ... */


/* File: virtual_private_cloud/style2.css */
/* ... (tutti gli stili precedenti) ... */


/* ========================================= */
/* == Stili Aggiuntivi/Modificati        == */
/* ========================================= */

/* --- Testo Introduttivo --- */
.configurator-intro {
    color: white;
    text-align: left; /* Modificato come da file index.php fornito */
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
    padding: 0 15px; /* Aggiungi padding laterale */
}

/* --- Tooltip Valore Slider (CORRETTO v2) --- */
.configurator .slider-wrapper {
    position: relative; /* Necessario per posizionare il tooltip */
    padding-top: 25px; /* Spazio sopra lo slider per il tooltip */
    margin-top: 5px; /* Leggero spazio aggiuntivo */
}

.configurator .slider-value-tooltip {
    position: absolute;
    top: 0; /* Posiziona sopra lo slider */
    left: 0; /* Inizia a sinistra (la posizione esatta verrà impostata da JS in pixel) */
    /* RIMOSSO transform: translateX(-50%); */
    /* Stile richiesto: sfondo bianco, testo blu */
    background-color: #ffffff; /* Sfondo bianco */
    color: #0056b3; /* Blu scuro (o #007AB4 se preferisci quello più chiaro) */
    border: 1px solid #0056b3; /* Bordo blu per visibilità su bianco */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* Non interferisce con il click sullo slider */
    opacity: 0; /* Nascosto di default */
    transition: opacity 0.2s ease; /* Transizione solo per opacità */
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Leggera ombra */
}

/* Classe per mostrare tooltip (aggiunta/rimossa da JS) */
.configurator .slider-value-tooltip.visible {
    opacity: 1; /* Mostra il tooltip quando la classe è presente */
}


/* --- Nota Campi Obbligatori --- */
.configurator .required-fields-note {
    font-size: 0.8em;
    color: #6c757d;
    text-align: left;
    margin-top: -10px; /* Avvicina al campo precedente */
    margin-bottom: 15px; /* Spazio prima del bottone */
    width: 100%;
    max-width: 500px; /* Allinea con larghezza form */
    padding-left: 5px; /* Leggero rientro */
}

/* --- Sezione CTA (Call to Action) --- */
.cta-section {
    background-color: #ffffff; /* Sfondo bianco */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.cta-icon {
    max-height: 60px; /* Altezza massima icona */
    width: auto;
    opacity: 0.8;
}
.cta-text {
    color: #343a40; /* Colore testo scuro */
}
.cta-link {
    /* Stile bottone Bootstrap primario (già presente) */
    padding: 10px 25px;
    font-weight: 500;
}
.cta-link i {
    vertical-align: -0.1em; /* Allinea icona nel bottone */
}


/* --- Aggiustamenti Mobile Specifici --- */
@media (max-width: 650px) {
    .configurator-intro {
        font-size: 0.9em;
        padding: 0 5px;
    }
    .configurator .slider-wrapper {
        padding-top: 20px; /* Riduci spazio per tooltip su mobile */
    }
    .configurator .slider-value-tooltip {
        padding: 2px 6px;
        font-size: 0.7em;
    }
    .cta-section {
        padding: 30px 15px; /* Riduci padding verticale e orizzontale */
    }
    .cta-icon {
        max-height: 50px;
    }
    .cta-text {
        font-size: 1rem; /* Leggermente più piccolo */
    }
    .cta-link {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
}

/* ======================================== */
/* == Fine Stili Aggiuntivi/Modificati   == */
/* ======================================== */

/* ... (resto degli stili CSS) ... */
*

/* File: virtual_private_cloud/style2.css */
/* ... (tutti gli stili precedenti) ... */


/* ========================================= */ 
/* == Stili Aggiuntivi/Modificati        == */
/* ========================================= */ 
 
/* --- Testo Introduttivo (MODIFICATO) --- */
.configurator-intro {
    /* color: white; */ /* Rimosso perché ora è su sfondo chiaro */
    color: #343a40; /* Cambiato in colore scuro per leggibilità su bg-light */
    text-align: left; /* Mantenuto come da stile inline originale */
    /* margin-bottom: 25px; */ /* Sostituito da margin auto */
    font-size: 0.95em;
    line-height: 1.5;
    padding: 0 15px; /* Mantiene padding laterale interno */
    max-width: 900px; /* Aggiunto per allineare con configurator-inner */
    margin: 0 auto 25px auto; /* Aggiunto per centrare il blocco e mantenere margine inferiore */
}
 
/* --- Tooltip Valore Slider (CORRETTO v2) --- */
/* ... (stile tooltip invariato) ... */
.configurator .slider-wrapper {
    position: relative; /* Necessario per posizionare il tooltip */
    padding-top: 25px; /* Spazio sopra lo slider per il tooltip */
    margin-top: 5px; /* Leggero spazio aggiuntivo */
}

.configurator .slider-value-tooltip {
    position: absolute;
    top: 0; /* Posiziona sopra lo slider */
    left: 0; /* Inizia a sinistra (la posizione esatta verrà impostata da JS in pixel) */
    /* RIMOSSO transform: translateX(-50%); */
    /* Stile richiesto: sfondo bianco, testo blu */
    background-color: #ffffff; /* Sfondo bianco */
    color: #0056b3; /* Blu scuro (o #007AB4 se preferisci quello più chiaro) */
    border: 1px solid #0056b3; /* Bordo blu per visibilità su bianco */
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none; /* Non interferisce con il click sullo slider */
    opacity: 0; /* Nascosto di default */
    transition: opacity 0.2s ease; /* Transizione solo per opacità */
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Leggera ombra */
}

/* Classe per mostrare tooltip (aggiunta/rimossa da JS) */
.configurator .slider-value-tooltip.visible {
    opacity: 1; /* Mostra il tooltip quando la classe è presente */
}


/* --- Nota Campi Obbligatori --- */
/* ... (stile nota invariato) ... */
.configurator .required-fields-note {
    font-size: 0.8em;
    color: #6c757d;
    text-align: left;
    margin-top: -10px; /* Avvicina al campo precedente */
    margin-bottom: 15px; /* Spazio prima del bottone */
    width: 100%;
    max-width: 500px; /* Allinea con larghezza form */
    padding-left: 5px; /* Leggero rientro */
}

/* --- Sezione CTA (Call to Action) --- */
/* ... (stile CTA invariato) ... */
.cta-section {
    background-color: #ffffff; /* Sfondo bianco */
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.cta-icon {
    max-height: 60px; /* Altezza massima icona */
    width: auto;
    opacity: 0.8;
}
.cta-text {
    color: #343a40; /* Colore testo scuro */
}
.cta-link {
    /* Stile bottone Bootstrap primario (già presente) */
    padding: 10px 25px;
    font-weight: 500;
}
.cta-link i {
    vertical-align: -0.1em; /* Allinea icona nel bottone */
}


/* --- Aggiustamenti Mobile Specifici --- */
@media (max-width: 650px) {
    .configurator-intro { /* Nessuna modifica necessaria qui, eredita il colore scuro e max-width si adatta */
        font-size: 0.9em;
        padding: 0 5px; /* Padding mobile mantenuto */
        /* max-width e margin: auto funzionano bene su mobile */
    }
    /* ... (altri stili mobile invariati) ... */
    .configurator .slider-wrapper {
        padding-top: 20px; /* Riduci spazio per tooltip su mobile */
    }
    .configurator .slider-value-tooltip {
        padding: 2px 6px;
        font-size: 0.7em;
    }
    .cta-section {
        padding: 30px 15px; /* Riduci padding verticale e orizzontale */
    }
    .cta-icon {
        max-height: 50px;
    }
    .cta-text {
        font-size: 1rem; /* Leggermente più piccolo */
    }
    .cta-link {
        padding: 8px 20px;
        font-size: 0.95rem;
    }
}

/* ======================================== */
/* == Fine Stili Aggiuntivi/Modificati   == */
/* ======================================== */

/* ... (resto degli stili CSS) ... */


/* File: virtual_private_cloud/style2.css */
/* ... (stili precedenti) ... */

/* --- Sezione CTA (Call to Action) --- MODIFICATA --- */
.cta-section {
    /* background-color: #ffffff; */ /* Rimosso sfondo bianco */
    /* border-top: 1px solid #dee2e6; */ /* Rimosso bordo superiore */
    /* border-bottom: 1px solid #dee2e6; */ /* Rimosso bordo inferiore */
    background: linear-gradient(90deg, #096574 0, #00acc8 50%); /* Applica gradiente simile all'header */
    color: #ffffff; /* Colore testo di default bianco per contrasto */
    padding-top: 4rem; /* Aumenta padding verticale (Bootstrap py-5 è 3rem) */
    padding-bottom: 4rem;
    position: relative; /* Per eventuali pseudo-elementi futuri */
    overflow: hidden; /* Per sicurezza con gradienti/elementi posizionati */
}

.cta-icon {
    max-height: 150px; /* Leggermente più grande */
    width: auto;
    opacity: 1; /* Piena opacità */
    margin-bottom: 1.5rem !important; /* Più spazio sotto l'icona (usa !important se Bootstrap mb-3 interferisce) */
   
}

.cta-text {
    color: #ffffff; /* Assicura colore testo bianco */
    font-size: 1.25rem; /* Usa Bootstrap fs-5 o specifica qui */
    margin-bottom: 2rem !important; /* Più spazio sotto il testo */
    font-weight: 300; /* Testo leggermente più leggero */
    max-width: 600px; /* Limita larghezza testo per leggibilità */
    margin-left: auto;
    margin-right: auto;
}

/* Stile Bottone CTA Personalizzato */
.cta-link.btn.btn-primary { /* Aumenta specificità per sovrascrivere Bootstrap */
    background-color: #ffffff; /* Sfondo bianco */
    color: #0056b3; /* Testo blu scuro (dal tema) */
    border-color: #ffffff; /* Bordo bianco */
    padding: 12px 30px; /* Padding leggermente aumentato */
    font-weight: 600; /* Font più bold */
    border-radius: 30px; /* Bottone più arrotondato */
    transition: all 0.3s ease; /* Transizione più completa */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Leggera ombra */
}

.cta-link.btn.btn-primary:hover,
.cta-link.btn.btn-primary:focus {
    background-color: #f8f9fa; /* Sfondo leggermente grigio su hover */
    color: #004085; /* Blu più scuro su hover */
    border-color: #f8f9fa;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Ombra più pronunciata */
    transform: translateY(-2px); /* Leggero effetto sollevamento */
}

.cta-link.btn.btn-primary i {
    color: #0056b3; /* Colore icona interno al bottone */
    vertical-align: -0.1em; /* Mantiene allineamento */
    margin-right: 8px !important; /* Aumenta spazio icona (usa !important se Bootstrap me-2 interferisce) */
}


/* --- Aggiustamenti Mobile Specifici --- MODIFICATI --- */
@media (max-width: 650px) {
    /* ... (altri stili mobile invariati) ... */

    .cta-section {
        padding: 3rem 15px; /* Riduci padding verticale su mobile */
    }
    .cta-icon {
        max-height: 55px; /* Riduci icona su mobile */
        margin-bottom: 1rem !important;
    }
    .cta-text {
        font-size: 1.1rem; /* Riduci testo su mobile */
        margin-bottom: 1.5rem !important;
    }
    .cta-link.btn.btn-primary {
        padding: 10px 25px; /* Riduci padding bottone */
        font-size: 0.95rem;
    }
    .cta-link.btn.btn-primary i {
         margin-right: 6px !important;
    }
}

/* File: virtual_private_cloud/style2.css */
/* ... (tutti gli stili precedenti) ... */

/* ========================================= */
/* == Stili per Proxmox Nested Cards     == */
/* ========================================= */

.configurator .proxmox-nested-section {
    /* Eredita già stili da .config-section, come background-color: #ffffff; */
    /* Puoi aggiungere altri stili specifici per la sezione qui se necessario */
}

.configurator .proxmox-nested-section .card {
    border: 1px solid #007AB4; /* Blu desiderato per il bordo */
    border-radius: 8px;
    overflow: hidden;
    /* shadow-sm è già applicato via classe Bootstrap nell'HTML */
}

.configurator .proxmox-nested-section .card-header {
    background-color: #007AB4; /* Blu desiderato per lo sfondo dell'header */
    color: white;              /* Testo bianco per il titolo del prodotto */
    font-size: 1.2em;
    font-weight: 600;
    padding: 15px;
    border-bottom: none; /* Rimuove il bordo di default se presente */
}

.configurator .proxmox-nested-section .card-header h5 {
    color: white !important; /* Assicura che il testo dell'h5 sia bianco */
}

.configurator .proxmox-nested-section .card-body {
    padding: 20px;
}

.configurator .proxmox-nested-section .card-body ul {
    list-style: none;
    padding: 0;
    margin: 0; /* Rimosso mb-4 dalla ul nell'HTML, gestito qui o dal d-flex */
}

.configurator .proxmox-nested-section .card-body li {
    margin-bottom: 15px;
    font-size: 1em;
    
    color: #343a40; /* Colore testo scuro per le caratteristiche */
}
.configurator .proxmox-nested-section .card-body li:last-child {
    margin-bottom: 0;
}
.configurator .proxmox-nested-section .card-body li .fa-check {
    color: #28a745; /* Colore verde per l'icona check (Bootstrap text-success) */
    margin-right: 0.5rem; /* Bootstrap me-2 */
}
.configurator .proxmox-nested-section .card-body li strong {
     color: black; /* Blu più scuro per i valori, o #007AB4 se preferisci */
     font-weight:normal;
}

.configurator .proxmox-nested-section .card-footer {
    background-color: #f8f9fa; /* Sfondo leggero per il footer */
    padding: 15px;
    border-top: 1px solid #dee2e6; /* Bordo superiore leggero */
}

/* Stile per il prezzo nelle card Proxmox (come #total-price-value) */
/* Stile per il prezzo nelle card Proxmox (come #total-price-value) */
.configurator .proxmox-nested-section .proxmox-card-price strong {
    color: #007AB4;       /* Blu desiderato, come #total-price-value */
    font-size: 1.4em;     /* Come #total-price-value */
    font-weight: 700;     /* Come #total-price-value */
    margin-bottom: 15px !important; /* Spazio sotto il prezzo, mb-3 è 1rem (16px), simile */
    text-align: right !important;   /* Mantenuto dall'HTML */
    /* line-height: 1.2; */     /* Rimosso per ereditare il line-height del preventivatore (1.6) */
}

.configurator .proxmox-nested-section .proxmox-card-price small {
    font-size: 0.65em; /* Adatta la dimensione di "/ mese" se necessario */
    font-weight: 500;
    color: #495057; /* Grigio scuro per "/ mese" */
}


.configurator .proxmox-nested-section .card-footer .btn-primary {
    /* Il bottone dovrebbe già ereditare lo stile .btn.btn-primary del sito.
       Se #007AB4 è il colore primario del tuo tema Bootstrap, non serve altro.
       Altrimenti, puoi forzarlo:
    */
    /*
    background-color: #007AB4;
    border-color: #007AB4;
    */
    /* w-100 è già nell'HTML e va bene */
}

/* Aggiustamenti per mobile */
@media (max-width: 650px) {
    .configurator .proxmox-nested-section .card-header {
        font-size: 1.1em;
        padding: 12px 10px;
    }
    .configurator .proxmox-nested-section .card-body {
        padding: 15px;
    }
    .configurator .proxmox-nested-section .card-body li {
        font-size: 0.95em;
        margin-bottom: 8px;
    }
    .configurator .proxmox-nested-section .card-footer {
        padding: 12px 10px;
    }
    .configurator .proxmox-nested-section .proxmox-card-price {
        font-size: 1.3em; /* Leggermente più piccolo su mobile */
        margin-bottom: 10px !important;
    }
}

/* ========================================= */
/* == Fine Stili per Proxmox Nested Cards == */
/* ========================================= */

/* ... (resto degli stili CSS) ... */