/* Font del sito novellini.it, applicato a tutto il configuratore mobile (caricato via
   Google Fonts in _LayoutProductGuest.cshtml). Bootstrap Icons/bootstrap-icons restano sulla
   propria icon-font, non sono toccati da questa regola. */
body {
    font-family: "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Header Stile Novellini --- */
.novellini-header {
    height: 56px;
    background-color: #1a1a1a !important;
    z-index: 1050;
}

.brand-logo-img {
    height: 28px; /* solo l'altezza è fissa: la larghezza segue in automatico per non deformare il logo */
    width: auto;
}

/* DESKTOP (>= 992 px): lingua a sinistra, logo Novellini al centro, logo Novellini Store a destra (tre colonne, quella centrale
   sempre al centro della pagina). Su mobile restano lingua a sinistra e logo a destra. */
@media (min-width: 992px) {
    .novellini-header {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
    }

    .novellini-header .brand-logo {
        justify-self: center;
    }

    .novellini-header .brand-store {
        justify-self: end;
        gap: 0.6rem;
    }

    /* "Novellini Store" + carrello, come il link nell'header di www.novellini.it */
    .brand-store-text {
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0.2px;
    }

    .brand-store-icon {
        font-size: 1.5rem;
        line-height: 1;
    }

    .brand-store:hover {
        opacity: 0.8;
    }
}

.product-title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: #1a1a1a;
}

.product-specs {
    font-size: 0.85rem;
    color: #666666;
}

/* --- Tipografia Step --- */
.step-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #222222;
    margin-bottom: 12px;
}

.sub-group-title {
    font-size: 0.9rem;
    color: #666666;
    margin-top: 10px;
    margin-bottom: 8px;
    font-weight: 400;
}

/* --- Card Grandi Rettangolari --- */
.option-card-large-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-card-large {
    border: 1px solid #dcdcdc;
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    background-color: #ffffff;
    color: #222222;
    transition: all 0.2s ease;
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

    /* Stato selezionato per le card grandi: Sfondo Grigio e Testo Bianco */
    .option-card-large.selected,
    .option-card-large:has(input:checked) {
        background-color: #61666c !important;
        border-color: #61666c !important;
        color: #ffffff !important;
    }

        .option-card-large.selected .text-muted-custom,
        .option-card-large:has(input:checked) .text-muted-custom {
            color: #e0e0e0 !important;
        }

.text-muted-custom {
    color: #6c757d;
}

/* --- Card Quadrati / Cerchi (Swatch) --- */
.swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swatch-card {
    border: 1px solid #dcdcdc;
    border-radius: 16px;
    width: 82px;
    height: 98px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: #ffffff;
    color: #222222;
    transition: all 0.2s ease;
}

.swatch-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-top: 2px;
    background-color: #e9ecef; /* se l'immagine manca resta un cerchio neutro */
}

/* DESKTOP (>= 992 px): 4 miniature per riga (su mobile il flex con a capo ne mette gia' 4 nella larghezza dello schermo) */
@media (min-width: 992px) {
    .swatch-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .swatch-grid .swatch-card {
        width: 100%;
        height: 128px;
        padding: 10px 6px;
    }

    .swatch-grid .swatch-circle {
        width: 60px;
        height: 60px;
    }

    .swatch-grid .swatch-label {
        font-size: 0.8rem;
    }
}

/* Gruppi con optFlags diverso da 1 (es. "Tipo vasca"): DESKTOP come la pagina Product, con l'immagine di ogni opzione; il test su
   optFlags vale SOLO su mobile (< 992 px), dove il gruppo e' una colonna di schede di testo (come .option-card-large) o, per le
   vasche per categoria (optType 9), un cerchio a colore pieno. Un unico markup (_Option_Thumb) per i due casi. */
@media (max-width: 991.98px) {
    .swatch-circle.swatch-circle-desktop-img {
        background-image: none !important;
        background-color: #4a3b32;
    }

    .swatch-grid.option-dual-group {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .swatch-card.swatch-text-mobile {
        width: auto;
        height: auto;
        padding: 16px 18px;
        border-radius: 12px;
        display: block;
        text-align: left;
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .swatch-text-mobile .swatch-circle,
    .swatch-text-mobile .check-icon {
        display: none !important;
    }

    .swatch-text-mobile .swatch-label {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        text-align: left;
    }
}

.swatch-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.1;
}

/* Icona ℹ accanto al nome di un'opzione con testo descrittivo (Options_descr.optNameText): il testo e' il tooltip (Index.cshtml) */
.opt-info {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.15rem;
    color: #6c757d;
    cursor: help;
    font-size: 0.95em;
    line-height: 1;
    vertical-align: middle;
}

.opt-info:hover,
.opt-info:focus {
    color: #212529;
    outline: none;
}

.opt-info-tooltip .tooltip-inner {
    max-width: 280px;
    padding: 0.5rem 0.7rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
}

.check-icon {
    display: none;
    font-size: 0.7rem;
    margin-top: -2px;
}

/* Stato selezionato Swatch */
.swatch-card.selected,
.swatch-card:has(input:checked) {
    background-color: #61666c !important;
    border-color: #61666c !important;
    color: #ffffff !important;
}

    .swatch-card.selected .check-icon,
    .swatch-card:has(input:checked) .check-icon {
        display: inline-block;
    }

/* --- Bottone Finale Conferma --- */
.btn-confirm-selection {
    background-color: #cfb897;
    border-color: #cfb897;
    color: #222222;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

    .btn-confirm-selection:hover,
    .btn-confirm-selection:active {
        background-color: #c2a884;
        border-color: #c2a884;
        color: #111111;
    }

/* Posizionamento Sticky sotto l'Header principale */
#stickyProductHeader {
    top: 56px; /* Ajusta questo valore in base all'altezza della tua novellini-header */
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}

.extra-small {
    font-size: 0.75rem;
}

/* Transizione icona collapse */
#collapseIcon {
    transition: transform 0.2s ease-in-out;
}

/* Quando il collapse è chiuso, ruota la freccetta */
#btnToggleCollapse.collapsed #collapseIcon {
    transform: rotate(180deg);
}

/* Badge nell'header con il valore selezionato */
.selected-option-badge {
    font-size: 0.85rem;
    background-color: #d8c2a7;
    color: #333;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    margin-left: auto; /* Lo spinge a destra nell'header */
    transition: all 0.2s ease;
}

/* Stile dell'header quando il gruppo è completato/selezionato */
.card-option-group.is-selected {
    border-color: #d8c2a7 !important;
}

    .card-option-group.is-selected .card-header {
        background-color: #f8f5f1 !important;
    }

/* Stile visuale per la radio/opzione selezionata */
.jOption:checked + label,
.jOption-label.active {
    border-color: #333 !important;
    background-color: #f3ece4 !important;
    font-weight: 600;
}

/* ==========================================================================
   Layout desktop/mobile
   - mobile (< 992px): anteprima 3D/2D sopra (header sticky) e configurazione sotto, come prima;
   - desktop (>= 992px): anteprima 3D a sinistra (sempre visibile) e configurazione a destra.
   .product2-preview ha display: contents su mobile cosi' lo sticky di #stickyProductHeader
   continua a riferirsi alla pagina intera.
   ========================================================================== */
.product2-layout {
    display: block;
}

.product2-preview {
    display: contents;
}

/* mobile: visualizzatore 3D ridotto del 15% (prima 320px, fissati inline in _Image_Or_3D.cshtml): 320 x 0,85 = 272px */
@media (max-width: 991.98px) {
    #render-3D {
        height: 272px !important;
    }
}

@media (min-width: 992px) {
    .product2-layout {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        /* a tutta larghezza (non "boxed"): solo un po' di respiro ai lati */
        padding: 1rem 1.5rem 0;
    }

    /* colonna sinistra: anteprima, resta ferma mentre la configurazione scorre */
    .product2-preview {
        display: block;
        flex: 0 0 56%;
        min-width: 0; /* senza, le thumb della galleria (larghe) allargherebbero la colonna e schiaccerebbero la configurazione */
        position: sticky;
        top: 72px; /* altezza dell'header principale + margine */
    }

    .product2-preview #stickyProductHeader {
        position: static;
        border: 0;
        border-radius: 1rem;
    }

    /* su desktop l'anteprima e' sempre aperta: niente tasto per chiuderla */
    #btnToggleCollapse {
        display: none;
    }

    /* il visualizzatore 3D occupa l'altezza disponibile (prima fisso a 320px) */
    #render-3D {
        height: calc(100vh - 230px) !important;
        min-height: 420px;
    }

    /* colonna destra: configurazione e riepilogo */
    .product2-config {
        flex: 1 1 0;
        min-width: 0;
    }

    .product2-config #configuratorForm {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   Blocchi portati dalla pagina desktop (Product.cshtml)
   ========================================================================== */

/* MOBILE: riepilogo mostrato (summary-mode, aggiunto da Index.cshtml dopo "CONFERMA SELEZIONE" solo sotto i 992 px): l'anteprima
   sparisce perche' il riepilogo ha la sua immagine; "Modifica la configurazione" toglie la classe e la riporta.
   Su desktop summary-mode non viene usata: il risultato e' una riga sotto le due colonne, che restano com'erano. */
@media (max-width: 991.98px) {
    .product2-layout.summary-mode #stickyProductHeader {
        display: none;
    }
}

/* caratteristiche e dotazioni */
.product-chars strong {
    color: #222;
}

.dotazioni-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.dotazione-item img {
    max-width: 93px;
    min-width: 50px;
    border: 1px solid #808080;
}

.dotazione-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #777777;
    margin-top: 0.25rem;
    word-break: break-word;
}

@media (min-width: 576px) {
    .dotazioni-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* badge Pronta consegna sulle opzioni (colonna "Pronta consegna" delle tabelle misure del desktop) */
.pronta-consegna-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #004e70;
    white-space: nowrap;
}

.pronta-consegna-badge .bi {
    font-size: 0.55rem;
}

/* tab informativi (materiali, materiale informativo, dati tecnici) */
.product2-info .nav-tabs .nav-link {
    color: #444;
}

.product2-info .nav-tabs .nav-link.active {
    color: #000;
    border-bottom-color: #fff;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 0.75rem;
}

.material-item img {
    border: 1px solid #dee2e6;
}

.material-name {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #777777;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* download: stile della pagina Product (h4 su fondo grigio centrato, elenco numerato con cerchietti blu, link blu) */
.download-title {
    background-color: #e8e8e8;
    color: #212529;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 0.35rem 0.5rem;
    margin-bottom: 0.75rem;
}

.download-list {
    counter-reset: download-counter;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.download-list li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 0.5rem;
    min-height: 26px;
    line-height: 26px;
}

.download-list li::before {
    content: counter(download-counter);
    counter-increment: download-counter;
    position: absolute;
    top: 0;
    left: 6px;
    min-width: 26px;
    height: 26px;
    line-height: 24px;
    border: 1px solid #1c5fa8;
    border-radius: 100%;
    color: #1c5fa8;
    font-weight: 700;
    text-align: center;
}

.download-list a {
    color: #1c5fa8;
    text-decoration: none;
    word-break: break-all;
}

.download-list a:hover {
    text-decoration: underline;
}

.tech-sheet-frame {
    width: 100%;
    height: 70vh;
    border: 0;
}

/* collegamenti social in fondo alla pagina */
.p2-social-footer a {
    color: #6c757d;
    font-size: 1.25rem;
    margin: 0 0.6rem;
}

.p2-social-footer a:hover {
    color: #1a1a1a;
}

/* download: una colonna su mobile, tre affiancate su desktop (come col-md-4 della pagina Product); i tab seguono
   la stesso respiro laterale delle due colonne di .product2-layout (tutto a larghezza piena) */
.download-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.5rem;
}

@media (min-width: 992px) {
    .download-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* i tab seguono lo stesso respiro laterale delle due colonne */
    .product2-info {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* ...ma stanno nella PRIMA colonna (come la pagina Product, dove sono in una colonna e non a tutta larghezza): stessa larghezza
       della colonna dell'anteprima (.product2-preview, 56%) */
    .product2-info .product-info {
        width: 56%;
    }
}


/* miniatura dell'opzione scelta nell'intestazione del gruppo */
.selected-option-thumb {
    width: 38px;
    height: 38px;
    margin-right: 0.5rem;
    object-fit: contain;
    border: 1px solid #808080;
    background-color: #ffffff;
}

/* con la miniatura il badge non deve piu' spingere a destra da solo */
.selected-option-thumb:not(.d-none) + .selected-option-badge {
    margin-left: 0 !important;
}

/* Intestazione del gruppo con la miniatura scelta: su schermi stretti titolo e freccia restano sulla prima riga,
   miniatura e nome scelto vanno sulla seconda (con nomi lunghi non si schiacciano a vicenda). Senza miniatura
   (es. le misure) l'intestazione resta com'era. */
@media (max-width: 575.98px) {
    .card-option-group .group-header:has(.selected-option-thumb:not(.d-none)) {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .card-option-group .group-header:has(.selected-option-thumb:not(.d-none)) > div:first-child {
        /* base quasi piena: miniatura e nome non ci stanno piu' sulla stessa riga e vanno a capo */
        flex: 1 1 calc(100% - 36px);
        min-width: 0;
    }

    .card-option-group .group-header:has(.selected-option-thumb:not(.d-none)) .toggle-icon {
        order: 1;
    }

    .card-option-group .group-header:has(.selected-option-thumb:not(.d-none)) .selected-option-thumb {
        order: 2;
        margin-left: 0 !important;
    }

    .card-option-group .group-header:has(.selected-option-thumb:not(.d-none)) .selected-option-badge {
        order: 3;
        flex: 1 1 0;
        margin: 0 !important;
        text-align: left;
    }
}

/* ==========================================================================
   Galleria del prodotto (miniature sotto il visualizzatore, come la pagina desktop)
   ========================================================================== */
.gallery-thumbs-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.gallery-thumbs {
    display: flex;
    min-width: 0;
    max-width: 100%;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.gallery-thumb {
    /* thumb larghe, proporzioni 16:10 come la galleria della pagina desktop: 180 px su telefono, 260 px da 576 px */
    flex: 0 0 180px;
    aspect-ratio: 8 / 5;
    padding: 0;
    border: 1px solid #808080;
    background: #ffffff;
    scroll-snap-align: start;
    cursor: pointer;
}

.gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 576px) {
    .gallery-thumb {
        flex-basis: 260px;
    }
}

.gallery-thumb.active {
    border-color: #004e70;
    box-shadow: 0 0 0 2px #004e70;
}

/* pulsante "Modello 3D": compare solo quando la galleria mostra una foto al posto del 3D */
.gallery-3d-btn {
    display: none;
    align-self: flex-start;
}

/* modalita' foto: con il 3D disponibile si nasconde il visualizzatore e si mostra il carosello 2D
   (piu' specifico della regola che di norma nasconde il carosello quando c'e' il 3D) */
.thumb-gallery-wrapper.gallery-2d-mode #render-3D {
    display: none !important;
}

.thumb-gallery-wrapper.gallery-2d-mode #render-2D {
    display: block !important;
}

.thumb-gallery-wrapper.gallery-2d-mode .gallery-3d-btn {
    display: inline-flex;
}

#render-2D .carousel-item img {
    cursor: zoom-in;
}

/* DESKTOP: le foto della galleria hanno proporzioni diverse e il carosello e' a dissolvenza: durante il passaggio le due foto si sovrapponevano e
   l'altezza del riquadro cambiava, lasciando visibile una striscia della foto precedente sotto quella nuova. Il riquadro ha ora proporzione fissa
   (3:2, come le immagini 1280x867 della pagina Product) e ogni foto lo riempie (object-fit: cover), cosi' non cambia altezza e non c'e' sovrapposizione. */
@media (min-width: 992px) {
    #render-2D .carousel-inner {
        aspect-ratio: 3 / 2;
        background-color: #f1f3f5;
    }

    #render-2D .carousel-item {
        height: 100%;
    }

    #render-2D .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.gallery-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    touch-action: pinch-zoom;
}

/* ==========================================================================
   Barra di conferma (sempre visibile) e Riconfigura (solo desktop)
   ========================================================================== */
/* mobile (< 992 px): card in fondo al form, SEMPRE visibile come su desktop (se manca una scelta il click porta alla prima
   scelta mancante, vedi Index.cshtml). La classe .config-complete la mette ancora validateConfiguration ma non cambia piu' nulla. */
.confirm-bar {
    display: block;
    margin: 1.5rem 0 3rem;
    padding: 1.5rem;
    border-radius: 1rem;
}

/* desktop (>= 992 px): sempre visibile, agganciata al fondo dello schermo finche' il form e' in vista */
@media (min-width: 992px) {
    .confirm-bar {
        display: block;
        position: sticky;
        bottom: 0;
        z-index: 1030;
        margin: 1.5rem -1rem 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-radius: 0;
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid #e5e5e5;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }
}

.btn-restart-config {
    background-color: #ffffff;
    border: 1px solid #adb5bd;
    color: #333333;
    border-radius: 16px;
}

.btn-restart-config:hover {
    background-color: #f1f3f5;
    border-color: #6c757d;
    color: #111111;
}

/* DESKTOP (>= 992 px): "Conferma selezione" e "Riconfigura" con la grafica della pagina Product (b2b): pulsanti rettangolari (nessun
   arrotondamento), centrati e non a tutta larghezza, prima la conferma (grigio scuro, il "quaternary" del tema) poi Riconfigura
   (bianco con bordo grigio chiaro e icona blu), 14px semi-bold senza maiuscolo, padding 12px 24px. Mobile invariato. */
@media (min-width: 992px) {
    .confirm-bar > .d-flex {
        justify-content: center;
        gap: 0.5rem !important;
    }

    .confirm-bar #btnCheckPrice {
        order: -1;
        flex: 0 0 auto !important;
        padding: 12px 24px !important;
        border: 1px solid #383f48 !important;
        border-radius: 0;
        background-color: #383f48;
        color: #ffffff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none !important;
        box-shadow: none;
        transform: none;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }

    .confirm-bar #btnCheckPrice:hover,
    .confirm-bar #btnCheckPrice:focus {
        background-color: #49525e;
        border-color: #4e5865 !important;
        color: #ffffff;
        box-shadow: none;
        transform: none;
    }

    .confirm-bar #btnCheckPrice:active {
        background-color: #272c32 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .confirm-bar #btnRestartConfig {
        padding: 12px 24px;
        border: 1px solid #d9d9d9;
        border-radius: 0;
        background-color: transparent;
        color: #212529;
        font-size: 14px;
        font-weight: 600;
        text-transform: none;
    }

    .confirm-bar #btnRestartConfig:hover,
    .confirm-bar #btnRestartConfig:focus {
        background-color: #f2f2f2;
        border-color: #e6e5e5;
        color: #212529;
    }

    .confirm-bar #btnRestartConfig .bi {
        color: #004e70;
    }
}

/* il gruppo mancante lampeggia brevemente quando la conferma ci porta li' */
.config-missing-highlight {
    outline: 2px solid rgba(255, 193, 7, 0.65);
    border-radius: 16px;
    animation: configMissingPulse 1s ease-out 2;
}

@keyframes configMissingPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.35); }
    60% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* Riga del titolo (solo desktop): a tutta larghezza sopra le due colonne, con lo stesso respiro laterale */
.product2-title-row {
    padding: 1.25rem 1.5rem 0;
}

/* ==========================================================================
   Tabella delle misure (come _Misura_Porta / _Misura_Fisso della pagina desktop)
   ========================================================================== */
.measures-table {
    font-size: 0.9rem;
}

/* righe alterne ben visibili: la classe .row-alt va a una riga VISIBILE su due (la mette il markup e la ricalcola restripeMeasures() in
   Index.cshtml quando le incompatibilita' nascondono delle righe: l'alternanza per posizione di Bootstrap si romperebbe) */
.measures-table tbody tr.row-alt > td {
    box-shadow: inset 0 0 0 9999px #eceff1;
}

.measures-table thead th {
    font-weight: 700;
    white-space: nowrap;
    background-color: #e8e8e8;
}

.measures-table .measure-col-check {
    width: 56px;
}

/* riga dei codici (A, *) della misura porta: rosso grassetto come il desktop (.th-red) */
.measures-codes th {
    color: #c00000;
    font-weight: 700;
    text-align: center;
}

.measure-help {
    color: orange;
    font-size: 1.1rem;
    vertical-align: middle;
    margin-left: 0.25rem;
}

.measure-row {
    cursor: pointer;
}

.measure-check {
    display: inline-block;
    cursor: pointer;
}

.measure-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #6c757d;
    border-radius: 3px;
    background: #ffffff;
    color: transparent;
}

.measure-row:has(input:checked) > td {
    background-color: #e3edf2 !important;
}

.measure-row:has(input:checked) .measure-box {
    border-color: #004e70;
    background-color: #004e70;
    color: #ffffff;
}

/* ==========================================================================
   Riepilogo dopo "CONFERMA SELEZIONE" (_Config_Summary.cshtml e Summary/*)
   Mobile: blocchi in colonna, articoli a scheda senza intestazione, pulsanti grigi a tutta larghezza.
   Desktop (>= 992 px): come "La tua scelta" della pagina Product: titolo, tabella ARTICOLO (/ PREZZO solo nei paesi
   abilitati) a sinistra, barra verde con i pulsanti a destra; il form di contatto si apre in una modale.
   ========================================================================== */
.summary-items-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.summary-items-table {
    width: 100%;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.summary-items-table thead {
    display: none;
}

.summary-items-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #dee2e6;
    vertical-align: top;
}

.summary-items-table tbody tr:last-child td {
    border-bottom: 0;
}

.summary-item-code {
    font-size: 0.875rem;
    font-weight: 600;
}

.summary-item-desc {
    font-size: 0.75rem;
    color: #6c757d;
}

.summary-item-price {
    font-size: 0.875rem;
    font-weight: 600;
}

.summary-items {
    margin-bottom: 1rem;
}

.summary-actions {
    display: grid;
    gap: 1rem;
    margin-bottom: 3rem;
}

.btn-action-dark {
    background-color: #6c7175;
    border-radius: 12px;
}

/* "Richiedi un preventivo": mobile beige e arrotondato (stile prima inline, ora qui con gli stati hover/focus); su desktop prende lo
   stesso stile degli altri pulsanti della barra (vedi piu' sotto, ".summary-quote") */
.btn-request-quote {
    background-color: #d8c2a7;
    color: #333333;
    border-radius: 16px;
    letter-spacing: 0.5px;
}

.btn.btn-request-quote:hover,
.btn.btn-request-quote:focus,
.btn.btn-request-quote:focus-visible,
.btn.btn-request-quote:active {
    background-color: #cbb08f;
    color: #333333;
}

/* stati hover/focus/attivo: senza, vince il :hover di Bootstrap (sfondo trasparente) e il testo bianco resta su bianco.
   Il selettore doppio (.btn.btn-action-dark) ha la precedenza su ".btn:hover" di Bootstrap. */
.btn.btn-action-dark,
.btn.btn-action-dark:hover,
.btn.btn-action-dark:focus,
.btn.btn-action-dark:focus-visible,
.btn.btn-action-dark:active {
    color: #ffffff;
}

.btn.btn-action-dark:hover,
.btn.btn-action-dark:focus,
.btn.btn-action-dark:focus-visible,
.btn.btn-action-dark:active {
    background-color: #565b5f;
}

@media (min-width: 992px) {
    .summary-container {
        --summary-head-h: 32px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto 1fr;
        grid-template-areas:
            "heading heading"
            "items   bar"
            "items   actions"
            "items   quote"
            "items   .";
        column-gap: 0;
        padding-top: 1rem !important;
    }

    /* riga sotto le due colonne: stesso respiro laterale delle colonne e dei tab; titolo prodotto, immagine e riepilogo della
       configurazione non servono (sono gia' sopra e nella configurazione) */
    #summaryViewContainer .summary-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .summary-title,
    .product-summary-image,
    .summary-recap {
        display: none;
    }

    /* il riquadro grigio non esiste su desktop: articoli e richiesta diventano elementi della griglia */
    .summary-price-box {
        display: contents;
    }
    /* (su mobile, senza prezzo totale ne' richiesta di preventivo, il riquadro e' nascosto: vedi la regola sotto i 992 px) */

    .summary-items-title { grid-area: heading; text-transform: none; font-size: 1.25rem; margin-bottom: 0.75rem; }
    .summary-items { grid-area: items; margin-bottom: 0; }
    .summary-side-head { grid-area: bar; }
    .summary-actions { grid-area: actions; }
    .summary-quote { grid-area: quote; }

    /* tabella: intestazione verde scuro come la pagina desktop, descrizione maiuscola grigia.
       Niente bordo esterno della tabella (l'intestazione verde arriva al bordo e la barra di destra deve combaciare
       al pixel): il contorno chiaro lo disegnano le celle del corpo. */
    .summary-items-table {
        border: 0;
        border-radius: 0;
    }

    .summary-items-table thead {
        display: table-header-group;
    }

    .summary-items-table th {
        /* altezza fissa uguale a .summary-side-head: le due barre verdi restano allineate anche se il testo e' lungo */
        height: var(--summary-head-h);
        padding: 0 1rem;
        background: #004e70;
        color: #ffffff;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .summary-items-table tbody td:first-child {
        border-left: 1px solid #dee2e6;
    }

    .summary-items-table tbody td:last-child {
        border-right: 1px solid #dee2e6;
    }

    .summary-items-table tbody tr:last-child td {
        border-bottom: 1px solid #dee2e6;
    }

    .summary-item-desc {
        text-transform: uppercase;
        color: #9a9a9a;
    }

    /* barra verde a destra, alta ESATTAMENTE come l'intestazione della tabella (stessa variabile), con i pulsanti sotto */
    .summary-side-head {
        height: var(--summary-head-h);
        background: #004e70;
    }

    .summary-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin: 0.75rem 1rem 0;
    }

    .summary-actions .btn-action-dark {
        min-width: 130px;
        height: 38px;
        padding: 0 1rem !important;
        border-radius: 0;
        background-color: #383f48;
        font-size: 0.8rem;
        font-weight: 600 !important;
        text-align: center !important;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .summary-actions #linkpdf {
        background-color: #2baab1;
    }

    /* hover desktop: scuro piu' chiaro come btn-quaternary, verde acqua piu' chiaro come btn-tertiary */
    .summary-actions .btn.btn-action-dark:hover,
    .summary-actions .btn.btn-action-dark:focus,
    .summary-actions .btn.btn-action-dark:focus-visible,
    .summary-actions .btn.btn-action-dark:active {
        background-color: #49525e;
    }

    .summary-actions .btn#linkpdf:hover,
    .summary-actions .btn#linkpdf:focus,
    .summary-actions .btn#linkpdf:focus-visible,
    .summary-actions .btn#linkpdf:active {
        background-color: #34c6ce;
    }

    /* sotto i pulsanti, centrato, con la stessa forma, altezza e carattere di "Scarica PDF" e "Trova un rivenditore" */
    .summary-quote {
        margin: 0.5rem 1rem 0;
        text-align: center;
    }

    .summary-quote .btn.btn-request-quote {
        width: auto !important;
        min-width: 130px;
        height: 38px;
        padding: 0 1rem !important;
        border-radius: 0;
        background-color: #383f48;
        color: #ffffff;
        font-size: 0.8rem;
        font-weight: 600 !important;
        letter-spacing: normal;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .summary-quote .btn.btn-request-quote:hover,
    .summary-quote .btn.btn-request-quote:focus,
    .summary-quote .btn.btn-request-quote:focus-visible,
    .summary-quote .btn.btn-request-quote:active {
        background-color: #49525e;
        color: #ffffff;
    }
}

/* MOBILE (< 992 px): riquadro grigio del riepilogo senza contenuto (paese senza prezzi e senza richiesta di preventivo): non va mostrato */
@media (max-width: 991.98px) {
    .summary-price-box.summary-price-box-empty {
        display: none;
    }
}