/* ========== REGOLE GENERALI ========== */
/* NIENTE regole su html, body */
/* immagini fluide */
img {
    max-width: 100%;
    height: auto;
}

/* ========== FINO A 1024px (tablet / notebook piccoli) ========== */
@media screen and (max-width: 1024px) {

    /* wrapper principali */
    #bodycontent,
    #corpohome,
    #corpounico,
    #content,
    #contentmenu,
    #colonnacentraleunica,
    #colonnacentrale {
        width: 100% !important;
        float: none !important;
        border-right: none !important;
    }

    /* slider full width */
    #slide,
    #slideimg,
    #slideombra {
        width: 100% !important;
    }

    #slide {
        height: auto !important;
    }

    #slideimg img {
        width: 100% !important;
        height: auto !important;
    }

    /* home: cerca dominio e box */
    #hometrovadominioform {
        padding: 10px;
    }

    #homeservizi ul {
        float: none;
        width: 100%;
    }

    #homeservizi ul li {
        width: 49%;
        margin-right: 1%;
        margin-bottom: 10px;
        float: left;
    }

    #homeservizi ul li:nth-child(2n) {
        margin-right: 0;
    }

    /* tabelle area clienti */
    .area-clienti table {
        width: 100% !important;
        font-size: 13px;
    }
}

/* ========== FINO A 768px (smartphone & tablet verticali) ========== */
@media screen and (max-width: 768px) {

    /* Layout mobile più pulito: tolgo i bordi "a cornice" */

    /* contenitori principali */
    #bodycontent,
    #corpohome,
    #corpounico,
    #content,
    #contentmenu,
    #colonnacentraleunica,
    #colonnacentrale {
        width: 100% !important;
        float: none !important;
        margin: 0;
        border-left: none !important;
        border-right: none !important;
    }

    /* bodycontent senza margine laterale */
    #bodycontent {
        margin: 0;
        padding: 0;
    }

    /* header: logo centrato */
    #head {
        width: 100% !important;
        margin: 0 auto;
    }

    #header {
        height: auto !important;
        border-left: none !important;
        border-right: none !important;
    }

    #header-content {
        height: auto !important;
        margin: 0;
        padding: 10px 0;
        border-left: none !important;
        border-right: none !important;
    }

    #logo {
        position: static !important;
        margin: 10px auto 5px;
        text-align: center;
        width: auto !important;
    }

    #logo img {
        max-width: 80%;
        height: auto;
    }

    /* pulsanti Carrello / Login / Supporto / Contatti centrati */
    #linktop {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        text-align: center;
        margin: 10px auto 0;
        font-size: 14px;
    }

    #linktop ul {
        float: none !important;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #linktop ul li {
        float: none !important;
        display: inline-block;
        margin: 0 3px 5px;
    }

    #linktop a.txt {
        width: auto !important;
        padding: 3px 8px;
    }

    #logdata {
        position: static !important;
        padding: 5px 10px;
        text-align: center;
    }

    /* MENÙ PRINCIPALE: VERTICALE, SEMPRE VISIBILE */

    #menutop {
        border-right: none !important;
    }

    #menutop-content {
        margin: 0;
        border-right: none !important;
        border-top-width: 3px;
    }

    /* ul sempre visibile, 100% */
    #menutop ul {
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #f5f5f5;
        display: block; /* niente toggle */
    }

    #menutop ul li {
        float: none !important;
        display: block;
        border-bottom: 1px solid #ddd;
    }

    #menutop a {
        display: block;
        padding: 10px 12px !important;
        line-height: 20px !important;
        font-size: 14px !important;
        border-right: none !important;
        text-decoration: none;
        background: transparent;
    }

    #menutop li.attivo a {
        background: #ffcf00;
    }

    .menutopgrey {
        display: none !important; /* barra grigia inutile su mobile */
    }

    /* CONTENUTO PRINCIPALE */

    #corpohome,
    #corpounico {
        padding-bottom: 0;
        background-position: left top;
    }

    #content {
        margin: 0;
        border-right: none !important;
        border-left: none !important;
    }

    #contentmenu {
        margin: 0;
        border-right: none !important;
        border-left: none !important;
        background: #f5f5f5;
    }

    #colonnacentraleunica,
    #colonnacentrale {
        width: 100% !important;
    }

    #contentcentrale {
        padding: 10px;
    }

    #contentcentrale p {
        text-align: left;
    }

    /* slider */

    #slide {
        margin: 0;
        border: none;
    }

    #slide,
    #slideimg,
    #slideombra {
        width: 100% !important;
        height: auto !important;
    }

    #slideimg img {
        width: 100% !important;
        height: auto !important;
    }

    /* box testo dello slider sotto l'immagine invece che di fianco */
    #slidetxt {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    /* HOME: cerca dominio */

    #hometrovadominio {
        margin: 10px 0;
    }

    #hometrovadominioform {
        padding: 10px;
    }

    #hometrovadominioform label,
    #hometrovadominioform input,
    #hometrovadominioform select {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 8px;
    }

    #hometrovadominioform input.button {
        width: 100% !important;
    }

    /* HOME: box servizi 1 per riga */

    #homeservizi ul li {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
    }

    #homeservizi ul li .hsimg img {
        margin-top: 5px;
    }

    /* tabelle area clienti: scroll orizzontale */
    .area-clienti table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }

    /* AREA CLIENTI: layout mobile */

    /* menu sinistro a tutta larghezza, sopra al contenuto */
    #menusxcli {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    #menusxcli ul {
        font-size: 14px;
    }

    #menusxcli ul li {
        padding-bottom: 2px;
    }

    #menusxcli ul li a {
        display: block;
        padding: 8px 10px;
    }

    /* contenuto area clienti a tutta larghezza, senza margin-left */
    .area-clienti {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .area-clienti div.titolo {
        padding: 8px 10px;
        box-sizing: border-box;
    }

    /* MAPPA CONTATTI */
    #mappa {
        width: 100% !important;
        height: auto;
    }

    /* FOOTER - versione mobile più pulita */

    #footer {
        font-size: 11px;
        line-height: 15px;
        padding: 10px;
        text-align: center;
        border: none !important;              /* niente cornice nera/gialla */
        background-color: #f5f5f5 !important; /* sfondo neutro */
        background-image: none !important;
    }

    /* tolgo cornici e sfondi gialli dai blocchi interni */
    #footercontent,
    #footertit,
    #footermenu,
    #footercopy {
        border: none !important;
        background: none !important;
    }

    /* testo copy su sfondo neutro, senza riga nera sopra/sotto */
    #footercopy {
        background-color: #f5f5f5 !important;
        border-top: none !important;
        border-bottom: none !important;
    }

    #footer table {
        width: 100% !important;
    }

    /* nasconde le icone social nel footer su mobile */
    #footersocial {
        display: none !important;
    }
}

/* ========== FINO A 480px (smartphone piccoli) ========== */
@media screen and (max-width: 480px) {

    body {
        font-size: 13px;
    }

    #titolopage {
        font-size: 20px;
        padding: 5px 8px;
    }

    #sottotitolopage {
        font-size: 14px;
    }

    #contentcentrale {
        padding: 8px;
    }

    #linktop img {
        width: 26px;
        height: auto;
    }
}

/* === TWEAK PAGINE INTERNE (immagine + testo) === */
@media screen and (max-width: 768px) {

    /* immagine in alto nelle pagine (es. Hosting Low Cost / SSD / Pro) */
    #imgprinc,
    #imgprincunica,
    #imgprinc img,
    #imgprincunica img {
        width: 100% !important;
        height: auto !important;
        float: none !important;
    }

    /* contenuto centrale a tutta larghezza */
    #contentcentrale {
        width: 100% !important;
        float: none !important;             /* niente colonne affiancate */
        margin: 0;
        padding: 10px 10px 20px 10px;       /* un po' di respiro in basso */
        box-sizing: border-box;
    }

    #contentcentrale p {
        text-align: left;
    }
}

/* === TWEAK SLIDER HOME === */
@media screen and (max-width: 768px) {

    #slide,
    #slideimg,
    #slideombra {
        width: 100% !important;
        height: auto !important;
    }

    #slideimg img {
        width: 100% !important;
        height: auto !important;
    }

    /* box testo dello slider sotto l'immagine invece che di fianco */
    #slidetxt {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0;
        padding: 8px 10px;
        box-sizing: border-box;
    }
}

/* === TWEAK TABELLE PIANI HOSTING (LISTA PIANI) === */
@media screen and (max-width: 768px) {

    /* contenitore piani hosting */
    #hostingplans {
        width: 100% !important;
        margin: 15px 0 20px 0;
        padding: 0 10px;
        box-sizing: border-box;
        overflow-x: visible;                /* niente scroll orizzontale di default */
    }

    /* tabella piani: un po' più stretta e centrata */
    #hostingplans table,
    #hostingplans table.plan {
        width: 90% !important;
        min-width: 0 !important;           /* togliamo il 600px fisso */
        margin: 0 auto 20px auto;          /* centrata */
        display: table;
    }

    /* colonna del bottone più compatta */
    #hostingplans .acquista {
        width: 60px;
        text-align: center;
    }

    /* SOLO mobile: trasformo "Acquista" in icona carrello */
    #hostingplans .acquista a.button {
        position: relative;
        padding: 3px 6px;
        font-size: 0;                      /* nasconde il testo "Acquista" */
    }

    #hostingplans .acquista a.button::before {
        content: "\f07a";                  /* codice icona carrello */
        font-family: "FontAwesome";
        font-size: 18px;
        line-height: 1;
    }
}

/* === RIFINITURA TESTO PAGINE HOSTING (INTRO) === */
@media screen and (max-width: 768px) {

    /* immagini dentro il testo iniziale delle pagine (Hosting Lowcost/SSD/Pro) */
    #testopage img {
        float: none !important;
        display: block;
        max-width: 100%;
        height: auto;
        margin: 0 auto 10px;
    }

    /* blocco testo + eventuale tabella a tutta larghezza */
    #testopage {
        width: 100% !important;
        float: none !important;
        margin: 0;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* eventuale tabella iniziale (immagine + testo) responsive */
    #testopage table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    #testopage table td {
        display: block;
        width: auto !important;
        padding-bottom: 10px;
    }

    #testopage p {
        text-align: left;
        line-height: 1.4;
        font-size: 14px;
    }
}

/* === SCHEDE HOSTING: BOX SELEZIONE + SERVIZI AGGIUNTIVI (MOBILE, SOLO CSS) === */
@media screen and (max-width: 768px) {

    /* nascondo la riga di intestazioni */
    form#hosting #hostingplans > div:first-child {
        display: none !important;
    }

    /* ===== BOX GIALLO - Hosting selezionato ===== */
    form#hosting #hostingplans > div:nth-child(2) {
        margin: 15px 0 10px 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
        background-color: #ffcf00 !important;
        border: 0 !important;
        text-align: left !important;
    }

    /* Rimuovo TUTTI i bordi/background interni */
    form#hosting #hostingplans > div:nth-child(2) * {
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Valori nel box giallo */
    form#hosting #hostingplans > div:nth-child(2) .detail {
        display: block !important;
        float: none !important;
        width: auto !important;
        font-size: 13px !important;
        font-family: inherit !important;
        line-height: 1.5 !important;
        padding: 2px 0 !important;
        color: #000 !important;
        font-weight: normal !important;
        text-align: left !important;
    }

    /* Etichette in grassetto */
    form#hosting #hostingplans > div:nth-child(2) .detail:nth-child(1)::before {
        content: "Hosting selezionato: ";
        font-weight: bold;
    }

    form#hosting #hostingplans > div:nth-child(2) .detail:nth-child(2)::before {
        content: "Spazio: ";
        font-weight: bold;
    }

    form#hosting #hostingplans > div:nth-child(2) .detail:nth-child(3)::before {
        content: "Traffico: ";
        font-weight: bold;
    }

    form#hosting #hostingplans > div:nth-child(2) .detail:nth-child(4)::before {
        content: "Canone annuale: ";
        font-weight: bold;
    }

    /* ===== FONT SERVIZI AGGIUNTIVI ===== */
    form#hosting #hostingplans > div:nth-child(n+3) .detail,
    form#hosting #hostingplans > div:nth-child(n+3) .price {
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: normal !important;
        font-family: inherit !important;
    }

    form#hosting #hostingplans > div:nth-child(n+3) {
        padding: 0 8px;
        box-sizing: border-box;
    }
}
/* MOBILE: rimuovo i bordi laterali del layout principale */
@media screen and (max-width: 768px) {

    #bodycontent,
    #corpo,
    #corpohome,
    #corpounico,
    #content,
    #contentmenu,
    #colonnacentraleunica,
    #colonnacentrale {
        border-left: none !important;
        border-right: none !important;
    }
}
/* MOBILE: sistemazione definitiva "Servizi Aggiuntivi" nelle schede hosting */
@media screen and (max-width: 768px) {

    /* Intestazione "Servizi Aggiuntivi" – niente larghezze strane */
    form[name="hosting"]#hosting div#hostingplans div.intestazione1 {
        float: none !important;        /* sovrascrive style="float:right" se c'è */
        width: 100% !important;        /* sovrascrive style="width:100%; ..." */
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-weight: bold;
        text-align: center !important;
        margin: 8px 0 4px 0;
    }

    /* Riga descrizione servizio (testo) */
    form#hosting #hostingplans .detail {
        float: none !important;        /* sovrascrive style="float:right" */
        width: 100% !important;        /* sovrascrive style="width:660px" */
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: left !important;
    }

    /* Colonna prezzo – la lasciamo a destra ma senza esagerare */
    form#hosting #hostingplans .price {
        float: right !important;
        width: auto !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: right !important;
    }
}

/* === MOBILE: pulizia bordi gialli/neri nel footer e contenitore === */
@media screen and (max-width: 768px) {

    /* niente cornici laterali o in basso */
    #bodycontent,
    #corpohome,
    #corpounico,
    #content,
    #contentmenu,
    #colonnacentraleunica,
    #colonnacentrale {
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
    }

    /* footer senza cornici gialle/nere */
    #footer,
    #footercontent,
    #footertit,
    #footermenu,
    #footercopy {
        border: none !important;
        background-image: none !important;
    }

    /* box grigio del footer senza bordo giallo a sinistra */
    #footercontent {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* --- Fix finale checkbox e bordi mobile --- */
@media screen and (max-width: 768px) {

    /* Checkbox dei SERVIZI AGGIUNTIVI: restano a sinistra */
    form#hosting #hostingplans .detail input[type="checkbox"] {
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0.15em 6px 0 0 !important;  /* puoi alzare/abbassare cambiando 0.15em */
    }

    /* Testo dei servizi aggiuntivi rientrato rispetto al checkbox */
    form#hosting #hostingplans .detail {
        padding-left: 0 !important;
    }

    /* Checkbox nel testo "Il prodotto/servizio che hai scelto..." (dentro <p>):
       torna allineato come prima, NON a sinistra come i servizi aggiuntivi */
    form#hosting p input[type="checkbox"] {
        float: none !important;
        margin: 0 0 0 4px !important;
    }

    /* Pulizia bordi gialli/neri del contenitore centrale e del footer su mobile */
    #corpohome,
    #content,
    #contentcentrale,
    #contentcentrale .contentmain {
        border: 0 !important;
    }
}
/* === MOBILE: elimina i bordi, ma senza toccare l'altezza del menù === */
@media screen and (max-width: 768px) {

    #bodycontent,
    #corpo,
    #corpohome,
    #corpounico,
    #content,
    #contentmenu,
    #colonnacentraleunica,
    #colonnacentrale {
        border: none !important;
    }

    /* niente riga nera/gialla sotto il menu, ma lasciamo altezza/margini */
    #menutop,
    #menutop-content {
        border: none !important;
        background-image: none !important;
    }

    /* barra grigia già nascosta sopra, nessun bordo aggiuntivo */
    #menutop .menutopgrey {
        border: none !important;
        background: transparent !important;
    }
}
/* === MOBILE: respiro sopra al bottone CERCA nella scheda hosting === */
@media screen and (max-width: 768px) {

    /* il bottone CERCA del form della scheda hosting */
    form#hosting input.button {
        margin-top: 6px !important;      /* un po' di spazio sopra */
    }
}
/* === MOBILE: allineamento definitivo checkbox servizi aggiuntivi === */
@media screen and (max-width: 768px) {

    /* il blocco di testo del singolo servizio */
    form#hosting #hostingplans .detail {
        position: relative !important;
        padding-left: 22px !important;   /* spazio per il checkbox a sinistra */
    }

    /* il checkbox del singolo servizio */
    form#hosting #hostingplans .detail input[type="checkbox"] {
        position: absolute !important;
        left: 0;
        top: 0.2em;                      /* alza/abbassa il checkbox se serve */
        margin: 0 !important;
        float: none !important;
        display: inline-block !important;
    }
}
/* MOBILE: un po' di spazio sopra al bottone CERCA nella scheda hosting */
@media screen and (max-width: 768px) {

    /* bottone CERCA del form hosting (quello accanto al campo dominio) */
    form#hosting input.button {
        margin-top: 6px !important;      /* aumenta / diminuisci il valore a piacere */
    }
}
/* MOBILE: allinea a destra Totale + bottone ACQUISTA nella scheda hosting */
@media screen and (max-width: 768px) {

    /* riga del Totale (il div.detail che contiene "Totale ...") */
    form#hosting #hostingplans div.detail strong {
        display: inline-block;
        width: 100%;
        text-align: right !important;
    }

    /* riga del bottone ACQUISTA (il div.detail subito sotto) */
    form#hosting #hostingplans div.detail input.button {
        display: inline-block;
        float: right;
        margin-top: 4px !important;   /* spazio tra "Totale" e "Acquista" */
    }
}
/* Spazio intorno al bottone CERCA – solo mobile */
@media screen and (max-width: 1024px) {

    /* bottone CERCA dentro il form hosting */
    form[name="hosting"] input[type="submit"],
    form[name="hosting"] input[type="button"] {
        margin-top: 8px !important;   /* spazio sopra */
        margin-left: 6px !important;  /* piccolo spazio dal menu a tendina */
    }
}
/* MOBILE: spazio attorno al bottone CERCA nella scheda hosting */
@media screen and (max-width: 768px) {

    /* bottone CERCA dentro il blocco #new del form hosting */
    form#hosting #new a.button {
        display: inline-block !important;  /* così il margin-top funziona */
        margin-top: 10px !important;       /* spazio sopra il bottone */
        margin-left: 6px !important;       /* piccolo distacco dal select */
    }
}
@media screen and (max-width: 768px) {
    table[style*="width: 678px; height: 320px;"] {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {

    /* Paragrafo avviso scadenze: da 1.10em a 1em solo su mobile */
    p[style*="font-size: 1.10em"] {
        font-size: 1em !important;
    }

}
/* ===== DOMINI – mobile: Estensione + Prezzo + Durata ===== */
@media screen and (max-width: 768px) {

    #infodom {
        overflow-x: visible; /* niente scroll orizzontale */
    }

    #infodom table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* Nascondo SOLO:
       - Rinnovo (3ª colonna)
       - Trasferimento (4ª colonna)
       Mantengo:
       1) Estensione
       2) Registrazione (usata come prezzo)
       5) Durata minima
    */
    #infodom table th:nth-child(3),
    #infodom table td:nth-child(3),
    #infodom table th:nth-child(4),
    #infodom table td:nth-child(4) {
        display: none;
    }

    /* Celle più compatte */
    #infodom table th,
    #infodom table td {
        font-size: 11px;
        padding: 3px 4px;
        white-space: nowrap;
    }

    /* Estensione a sinistra */
    #infodom table th:nth-child(1),
    #infodom table td:nth-child(1) {
        text-align: left;
        width: 40%;
    }

    /* Prezzo al centro / destra */
    #infodom table th:nth-child(2),
    #infodom table td:nth-child(2) {
        text-align: right;
        width: 35%;
    }

    /* Durata minima a destra */
    #infodom table th:nth-child(5),
    #infodom table td:nth-child(5) {
        text-align: right;
        width: 25%;
    }

    /* Intestazione colonna prezzo su due righe */
    #infodom table th:nth-child(2) {
        position: relative;
        color: transparent;      /* nasconde il testo HTML "Registrazione" */
    }
    #infodom table th:nth-child(2)::after {
        content: "Prezzo\A(registrazione/trasferimento)";
        white-space: pre;        /* abilita il \A = a capo */
        color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);  /* centrato in entrambe le direzioni */
        text-align: center;
        line-height: 1.2;
        font-weight: normal;
    }
    /* Domini – centra TLD, Prezzo e Durata */
    #infodom table th,
    #infodom table td {
        text-align: center !important;
    }
}
/* ===== SERVER DEDICATI – semplifica tabella solo su mobile ===== */
@media screen and (max-width: 768px) {

    /* Limita la larghezza, così non va oltre lo schermo */
    #contentcentrale table.plan {
        width: 100% !important;
        table-layout: fixed;
    }

    /* Nasconde SOLO le colonne "Traffico" (4) e "Setup" (7) */
    #contentcentrale table.plan tr > *:nth-child(4),
    #contentcentrale table.plan tr > *:nth-child(7) {
        display: none;
    }
}
/* =========================
   SCHEDA SERVER DEDICATI - MOBILE
   (Caratteristiche Hardware + Servizi Aggiuntivi)
   ========================== */
@media screen and (max-width: 768px) {

    /* --- CARATTERISTICHE HARDWARE --- */

    /* nascondo la riga delle intestazioni (CPU / RAM / ...) */
    form#hosting #serverplans > div:first-child {
        display: none !important;
    }

    /* riga con i valori -> box giallo pulito */
    form#hosting #serverplans > div:nth-child(2) {
        margin: 15px 0 10px 0 !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
        background-color: #ffcf00 !important;
        border: 0 !important;
    }

    /* elimino tutti i bordi/sfondi interni (via le righe bianche) */
    form#hosting #serverplans > div:nth-child(2) * {
        border: 0 !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ogni valore va a capo, font coerente col resto */
    form#hosting #serverplans > div:nth-child(2) .detail {
        display: block !important;
        float: none !important;
        width: auto !important;
        font-size: 13px !important;
        font-family: inherit !important;
        line-height: 1.5 !important;
        color: #000 !important;
    }

    /* Etichette in grassetto davanti ai valori */
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(1)::before {
        content: "CPU: ";
        font-weight: bold;
    }
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(2)::before {
        content: "RAM: ";
        font-weight: bold;
    }
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(3)::before {
        content: "Hard Disk: ";
        font-weight: bold;
    }
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(4)::before {
        content: "RAID: ";
        font-weight: bold;
    }
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(5)::before {
        content: "Traffico: ";
        font-weight: bold;
    }
    form#hosting #serverplans > div:nth-child(2) .detail:nth-child(6)::before {
        content: "Uplink: ";
        font-weight: bold;
    }

    /* ================================================================
       SERVIZI AGGIUNTIVI - SERVER DEDICATI E HOSTING
       ================================================================
       
       IMPORTANTE: Il titolo "Servizi Aggiuntivi" ha font-size 12px
       e font-weight normal (non bold) su mobile.
       
       Il selettore [style] è FONDAMENTALE perché distingue:
       - Intestazioni CPU/RAM/etc: NON hanno attributo style
       - "Servizi Aggiuntivi": HA style="width:100%; margin-top:10px;"
       
       Layout con checkbox a SINISTRA (mobile-friendly).
       ================================================================ */

    /* Titolo "Servizi Aggiuntivi" - font piccolo e normale (non bold) */
    #serverplans .intestazione1[style] {
        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: normal !important;
        text-align: center !important;
        width: 100% !important;
        /* Disabilita auto-ingrandimento iOS Safari */
        -webkit-text-size-adjust: 100% !important;
        -moz-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* Testo + prezzo di ogni servizio aggiuntivo */
    form#hosting #serverplans > div:nth-child(n+4) .detail,
    form#hosting #serverplans > div:nth-child(n+4) .price {
        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: normal !important;
        font-family: inherit !important;
    }
    
    /* ================================================================
       LAYOUT SERVIZI AGGIUNTIVI - CHECKBOX A SINISTRA
       ================================================================
       
       IMPORTANTE: Checkbox posizionati a SINISTRA (come negli hosting).
       Il layout con checkbox a DESTRA causava problemi con l'applicazione
       del font-size su iOS Safari.
       
       Soluzione: absolute positioning per i checkbox + padding-left per il testo.
       ================================================================ */
    
    /* Rimuovi float:right dai .detail e .price su mobile */
    form#hosting #serverplans > div:nth-child(n+4) .detail {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        position: relative !important;
        padding-left: 30px !important;  /* spazio per il checkbox a sinistra */
        box-sizing: border-box !important;
    }
    
    form#hosting #serverplans > div:nth-child(n+4) .price {
        float: none !important;
        width: 100% !important;
        text-align: right !important;
        margin-bottom: 5px !important;
    }
    
    /* Posiziona il checkbox a SINISTRA come negli hosting */
    form#hosting #serverplans .detail input[type="checkbox"] {
        position: absolute !important;
        left: 0 !important;
        top: 0.2em !important;
        margin: 0 !important;
        float: none !important;
        display: inline-block !important;
    }
    
    /* Select e altri elementi dentro .detail */
    form#hosting #serverplans .detail select {
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* ================================================================
       TOTALE E BOTTONE ACQUISTA - ALLINEAMENTO A DESTRA
       ================================================================
       
       Le ultime due righe (Totale e Acquista) sono allineate a destra
       per mantenere coerenza con il layout degli hosting.
       ================================================================ */
    
    /* Riga del Totale - allinea a destra */
    form#hosting #serverplans > div:last-child,
    form#hosting #serverplans > div:nth-last-child(2) {
        text-align: right !important;
    }
    
    form#hosting #serverplans > div:last-child .detail,
    form#hosting #serverplans > div:nth-last-child(2) .detail {
        float: none !important;
        width: 100% !important;
        text-align: right !important;
        padding-left: 0 !important;
    }
    
    /* Bottone Acquista - allineato a destra */
    form#hosting #serverplans > div:last-child .detail input.button {
        display: inline-block !important;
        margin-top: 8px !important;
    }
}
/* =========================================================
   R1SOFT BACKUP (mobile) - fix configuratore + lista dedicati
   Pagina: /r1soft-backup/
   ========================================================= */

@media screen and (max-width: 768px) {

  /* ---------- 1) CONFIGURATORE R1Soft BASE (tabella con slider) ---------- */

  /* Trasforma la tabella in righe "a blocchi" (niente colonne strette) */
  form#hosting #serverplans table,
  form#hosting #serverplans tbody,
  form#hosting #serverplans tr,
  form#hosting #serverplans th,
  form#hosting #serverplans td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  form#hosting #serverplans table {
    border-collapse: collapse;
  }

  form#hosting #serverplans tr {
    padding: 10px 10px 8px 10px;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }

  /* titolo riga (Hard Disk / Agent / ecc.) */
  form#hosting #serverplans th.intestazione1 {
    margin: 0 0 6px 0;
    padding: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
  }

  /* slider a tutta larghezza */
  form#hosting #serverplans td.slide {
    padding: 2px 0 8px 0;
  }
  form#hosting #serverplans td.slide .ui-slider,
  form#hosting #serverplans td.slide > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* valori e prezzi allineati bene */
  form#hosting #serverplans td {
    padding: 0;
    margin: 0 0 6px 0;
    text-align: left;
  }
  form#hosting #serverplans td:nth-child(3),
  form#hosting #serverplans td:nth-child(4) {
    text-align: right;
  }

  /* righe riepilogo con float:right -> tornano in blocco a destra */
  form#hosting #serverplans > div[style*="float:right"] {
    float: none !important;
    width: 100% !important;
    text-align: right !important;
    margin: 8px 0 0 0 !important;
  }

  /* select mesi più “touch-friendly” */
  form#hosting #serverplans select#months {
    max-width: 100% !important;
    font-size: 14px;
  }

  /* bottone acquista più comodo */
  form#hosting #serverplans input.button {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    margin-top: 10px !important;
  }

  /* "Maggiori Informazioni" full width su mobile */
  a.button.fancyframe[style*="float:right"] {
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center !important;
  }

  /* ---------- 2) SERVER DEDICATI R1SOFT (tabellone a colonne -> card) ---------- */

  /* Nascondo la colonna etichette (CPU/RAM/...) e trasformo ogni piano in “card” */
  #hostingplans #base .intestazione {
    display: none !important;
  }

  #hostingplans #base .hover {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 12px 0 !important;
    padding: 12px 12px 10px 12px !important;
    background: #f1f1f1 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
  }

  #hostingplans #base .hover p {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }

  #hostingplans #base .hover p.titolo {
    font-weight: bold !important;
    font-size: 16px !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
  }

  /* righe valore: label a sinistra, valore a destra */
  #hostingplans #base .hover p:not(.titolo):not(.acquista) {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  #hostingplans #base .hover p:not(.titolo):not(.acquista)::before {
    font-weight: bold !important;
    flex: 0 0 42%;
  }

  /* Mappatura label -> ordine dei <p> dentro .hover */
  #hostingplans #base .hover p:nth-child(2)::before  { content: "CPU:"; }
  #hostingplans #base .hover p:nth-child(3)::before  { content: "RAM:"; }
  #hostingplans #base .hover p:nth-child(4)::before  { content: "Hard Disk:"; }
  #hostingplans #base .hover p:nth-child(5)::before  { content: "RAID:"; }
  #hostingplans #base .hover p:nth-child(6)::before  { content: "Traffico:"; }
  #hostingplans #base .hover p:nth-child(7)::before  { content: "Uplink:"; }
  #hostingplans #base .hover p:nth-child(8)::before  { content: "Situato in:"; }
  #hostingplans #base .hover p:nth-child(9)::before  { content: "Setup:"; }
  #hostingplans #base .hover p:nth-child(10)::before { content: "Costo Mensile:"; }

  /* Bottone “Configura” */
  #hostingplans #base .hover p.acquista {
    margin-top: 10px !important;
    text-align: right !important;
  }
  #hostingplans #base .hover p.acquista a.button {
    display: inline-block !important;
  }
}
@media (max-width: 768px) {

  /* --- Slider con bottoni -/+ --- */
  #serverplans td.slide { padding: 8px 0 !important; }

  #serverplans .cn-slider-wrap{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #serverplans .cn-slider-btn{
    width: 40px !important;
    height: 40px !important;
    line-height: 38px !important;
    text-align: center !important;
    border: 1px solid #cfcfcf !important;
    background: #f5f5f5 !important;
    border-radius: 8px !important;
    font-size: 22px !important;
    font-weight: bold !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }

  /* lo slider in mezzo “si allunga” */
  #serverplans .cn-slider-wrap .ui-slider{
    flex: 1 !important;
    margin: 0 !important;
  }

  /* handle più “touch-friendly” */
  #serverplans .ui-slider { height: 12px !important; }
  #serverplans .ui-slider .ui-slider-handle{
    width: 26px !important;
    height: 26px !important;
    top: -8px !important;
  }
}
@media (max-width: 768px) {

  /* Acquista: centrato e con gap */
  form#hosting #serverplans .detail input.button{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 12px auto 14px !important; /* spazio sotto */
    text-align: center !important;
  }

  /* Maggiori Informazioni: override del float inline + allineato ad Acquista */
  a.button.fancyframe{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 18px !important;
    text-align: center !important;
  }
}
@media (max-width: 768px) {
  #hostingplans #base .hover p.acquista{
    text-align: center !important;
  }
  #hostingplans #base .hover p.acquista a.button{
    float: none !important;
    display: inline-block !important;
  }
}
/* =========================================================
   HOTFIX R1SOFT BACKUP (mobile) - FINAL OVERRIDE
   - Centra davvero: Totale + Acquista + Maggiori informazioni
   - Carrello/Configura: a destra nelle card server
   IMPORTANT: questo blocco deve stare ALLA FINE del file.
   ========================================================= */
@media screen and (max-width: 768px){

  /* --- Totale + Acquista: annulla qualsiasi allineamento a destra precedente --- */
  form#hosting #serverplans > div:last-child,
  form#hosting #serverplans > div:nth-last-child(2){
    text-align: center !important;
  }

  /* il .detail qui ha style="float:right" inline nella pagina */
  form#hosting #serverplans .detail[style*="float:right"]{
    float: none !important;
    clear: both !important;
    width: 100% !important;
    text-align: center !important;
    padding-left: 0 !important;
    margin: 0 !important;
  }

  /* forza il bottone Acquista "in colonna" e centrato */
  form#hosting #serverplans .detail[style*="float:right"] input.button,
  form#hosting #serverplans input.button{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 12px auto 18px auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Maggiori Informazioni: sotto e centrato, con spazio */
  #contentcentrale a.button.fancyframe[style*="float:right"],
  #contentcentrale a.button.fancyframe{
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 26px auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* --- Server dedicati: carrello/configura a destra --- */
  #hostingplans #base .hover p.acquista{
    text-align: right !important;
  }
  #hostingplans #base .hover p.acquista a.button{
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
  }
}
/* =========================================================
   R1SOFT BACKUP - OVERRIDE ULTRA (mobile)
   Motivo: il link "Maggiori Informazioni" in questa pagina non sempre ha classi
           e alcune regole legacy riallineano a destra Totale/Acquista.
   Questo blocco è volutamente SUPER specifico.
   ========================================================= */
@media screen and (max-width: 768px){

  /* Totale / Acquista: colpisce esattamente la struttura:
     #serverplans > div > div.detail[style*="float:right"] */
  form#hosting #serverplans > div > div.detail[style*="float:right"]{
    float: none !important;
    clear: both !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  form#hosting #serverplans > div > div.detail[style*="float:right"] strong{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  form#hosting #serverplans > div > div.detail[style*="float:right"] input.button{
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 12px auto 18px auto !important;
    box-sizing: border-box !important;
  }

  /* Maggiori Informazioni: nella pagina è subito dopo </form> + <div class="clear"> */
  form#hosting #serverplans + div.clear + a[href*="maggiori-informazioni"]{
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 26px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 768px){

  /* + / -: forza colore (override super) */
  form#hosting #serverplans button.cn-slider-btn,
  form#hosting #serverplans .cn-slider-btn{
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffcf00 !important;
    background-image: none !important;
    border: 1px solid #d2a500 !important;
    color: #000 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  form#hosting #serverplans button.cn-slider-btn:hover,
  form#hosting #serverplans button.cn-slider-btn:focus{
    background: #ffcf00 !important;
    color: #000 !important;
    outline: none !important;
  }

  form#hosting #serverplans button.cn-slider-btn:active{
    background: #f0bf00 !important;
  }
}
/* R1Soft - server dedicati: carrello/configura appiccicato a destra (mobile) */
@media (max-width: 768px){
  #hostingplans #base .hover p.acquista{
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  #hostingplans #base .hover p.acquista a.button{
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
  }
}
/* Area Clienti > scheda hosting: allinea i 3 bottoni finali (mobile) */
@media (max-width: 768px){
  #contentcentrale .area-clienti > a.button{
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 10px auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}