/* ============================================================
   configuratore_v3.asp — MOBILE
   File:  /css/mobile-configuratore_v3.css
   Scope: @media (max-width: 991.98px)  — desktop invariato

   Barra dot unica a 5 posizioni:  [Descrizione] [1] [2] [3] [4]
   - dot 1..4     -> step del configuratore (tab jQuery UI)
   - dot Descrizione -> vista con .page-header + .product-faq (accordion)
                        (data-mobview="header" su #content)
   ============================================================ */

/* Dots mai visibili su desktop */
#mobstep-dots { display: none; }

@media (max-width: 991.98px) and (pointer: coarse) {

    /* ---- barra step numerata desktop nascosta ---- */
    #processTabs > ul.process-steps { display: none !important; }

    /* ---- barra dots compatta ---- */
    #mobstep-dots {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 10px 0 14px;
        margin: 0;
    }
    #mobstep-dots .mob-dots-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    #mobstep-dots .mob-step-dot {
        position: relative;
        width: 9px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #d0d0d0;
        cursor: pointer;
        transition: background .15s ease, transform .15s ease;
    }
    /* area tap ~25px senza ingrandire il pallino */
    #mobstep-dots .mob-step-dot::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
    #mobstep-dots .mob-step-dot.active {
        background: #009fe3;
        transform: scale(1.35);
    }
    /* dot Descrizione: quadratino per distinguerlo dagli step */
    #mobstep-dots .mob-step-dot.edge   { border-radius: 3px; }

    #mobstep-dots .mob-step-caption {
        margin: 0;
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
        line-height: 1.2;
        color: #333;
        text-align: center;
    }
    #mobstep-dots .mob-step-caption b { color: #009fe3; }

    /* ---- vista Descrizione (page-header + faq) ---- */
    /* header e faq nascosti di default: visibili solo nella vista header */
    #content .page-header,
    #content .product-faq { display: none; }

    #content[data-mobview="header"] .page-header,
    #content[data-mobview="header"] .product-faq { display: block; }

    /* nella vista header il corpo dei tab si nasconde */
    #content[data-mobview="header"] .mob-tabsbody { display: none; }

    /* ---- FAQ come accordion ---- */
    /* la lista-link ridondante in cima viene nascosta (le domande
        sono gia' le intestazioni dell'accordion) */
    #content .product-faq ul.faqlist { display: none; }

    #content .product-faq { padding: 0 12px 20px; }

    #content .product-faq .mob-faq-item {
        border-bottom: 1px solid #e3e3e3;
    }
    #content .product-faq .mob-faq-item > h3 {
        position: relative;
        margin: 0;
        padding: 12px 30px 12px 0;
        font-size: 15px;
        line-height: 1.35;
        cursor: pointer;
    }
    #content .product-faq .mob-faq-item > h3::after {
        content: "+";
        position: absolute;
        right: 6px;
        top: 10px;
        font-weight: 700;
        color: #009fe3;
    }
    #content .product-faq .mob-faq-item.open > h3::after { content: "\2212"; } /* minus */

    #content .product-faq .mob-faq-item .faq-answer { display: none; padding: 0 0 12px; }
    #content .product-faq .mob-faq-item.open .faq-answer { display: block; }
	/* ------------------------------------------------------------------
	   Step 3 "Concludo": l'iframe del disegno ha un'altezza fissa
	   (780px, pensata per desktop) impostata via attributo HTML.
	   Il fallback qui sotto evita il vuoto enorme finche' il JS non
	   la adatta al contenuto reale (vedi fitDrawingIframe in .js).
	   ------------------------------------------------------------------ */

	#rowPDF {
		border: none !important;
		padding: 0 !important;
	}

	#quotePDF {
		width: 100% !important;
		height: 420px !important;
		max-height: 75vh;
	}
}

@media (max-width: 991.98px) and (pointer: coarse) {
    #content .section.white-section:has(#ptab2[aria-hidden="false"]) .page-header {
        display: none !important;
    }
     .title-block {
        padding: 2px 0 3px 10px;
        border-left: 0px;
        margin-bottom: 5px;
    }
     #rowAction .divider {
        display: none !important;
    }
    #rowAction a {
        width:100% !important;
        margin:0 0 0 0  !important;
    }
    #content p {
        line-height: 1.0 !important;
    }
}