/* ==========================================================================
   mobile-configuratore_v2.css
   Dots stepper per il wizard "Composizione guidata codice" (configuratore_v2.asp)
   ========================================================================== */

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

	/* Il vecchio stepper a icone numerate (desktop) resta nascosto su mobile:
	   il contesto (testo "Creo codice"/"Opzioni"/"Concludo" + Precedente/
	   Successivo) basta ad orientarsi, niente indicatore a 3 dot separato
	   (rimosso: il suo touch-target invisibile intercettava i tap sui
	   sub-dots appena sotto). */
	.process-steps {
		display: none !important;
	}

	/* pcd-slide-intro non e' piu' una sua slide separata (swipe) su questa
	   pagina, e .tstep1 non resta piu' visibile per tutto lo step 1:
	   entrambi i testi vengono clonati dentro il primo sub-dot (vedi .js)
	   e mostrati solo mentre si sceglie il TIPO. */
	#productlist .pcd-slide-intro,
	.tstep1 {
		display: none !important;
	}

	/* #productlist diventa un carosello orizzontale (swipe) via CSS
	   condivisa con altre pagine (mobile-product-style.css): qui pero'
	   contiene anche una ventina di <p id="msgXXX"> (template dei
	   tooltip/notifiche) come figli diretti, che diventano slide vuote
	   extra a destra dopo l'ultima vera. Le togliamo dal flusso flex. */
	#productlist > p {
		display: none !important;
	}

	/* ------------------------------------------------------------------
	   Sub-dots dello step "Creo codice": un pallino per ogni TH/TD reale
	   della tabella #codice_articolo (varia in base al tipo selezionato).
	   La riga di intestazione larga (thead) viene sostituita da questi.
	   ------------------------------------------------------------------ */

	#codice_articolo thead,
	#codice_articolo tbody {
		display: none;
	}

	#mobsubstep-dots {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: 2px 0 14px;
	}

	#mobsubstep-dots:empty {
		display: none;
	}

	#mobsubstep-dots .mobsubstep-intro {
		width: 100%;
		text-align: center;
		margin-bottom: 16px;
	}

	#mobsubstep-dots .mobsubstep-intro h1 {
		font-size: 1.05rem;
		font-weight: 700;
		margin: 0 0 6px;
	}

	#mobsubstep-dots .mobsubstep-intro span {
		display: block;
		font-size: 18px;
		line-height: 1.2;
		color: #555;
	}

	#mobsubstep-dots .mobsubstep-intro .mobsubstep-tstep1 {
		margin-top: 8px;
		font-weight: 600;
		color: #333;
	}

	#mobsubstep-dots .mobsubstep-label {
		display: block;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .02em;
		text-transform: uppercase;
		color: #666;
		margin-bottom: 6px;
		text-align: center;
		min-height: 14px;
	}

	#mobsubstep-dots .mobsubstep-track {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 7px;
		max-width: 100%;
	}

	#mobsubstep-dots .mobsubstep-dot {
		position: relative;
		display: inline-block !important;
		box-sizing: border-box !important;
		width: 7px !important;
		height: 7px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: 7px !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
		border-radius: 50% !important;
		background: #d8d8d8 !important;
		background-image: none !important;
		box-shadow: none !important;
		outline: none;
		line-height: 0;
		font-size: 0;
		cursor: pointer;
		transition: background .15s, transform .15s;
		-webkit-tap-highlight-color: transparent;
	}

	#mobsubstep-dots .mobsubstep-dot::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 26px;
		height: 26px;
		transform: translate(-50%, -50%);
	}

	#mobsubstep-dots .mobsubstep-dot.done {
		background: #009fe3 !important;
	}

	#mobsubstep-dots .mobsubstep-dot.active {
		background: #009fe3 !important;
		transform: scale(1.5);
	}

	#mobsubstep-dots .mobsubstep-dot[aria-disabled="true"] {
		background: #ececec !important;
		pointer-events: none;
	}

	/* ------------------------------------------------------------------
	   Opzioni nel tfoot (ANCORAGGIO, ESTR.STELO, ...): usano colspan
	   pensati per la tabella larga desktop. Su schermi stretti le celle
	   vengono compresse proporzionalmente e le anteprime immagine
	   (ANCORAGGIO/ESTR.STELO) si riducono a una sliver invisibile.
	   Convertiamo ogni riga in flex-row: il colspan smette di contare
	   per il layout, ogni cella prende lo spazio che le serve davvero.
	   ------------------------------------------------------------------ */

	#codice_articolo tfoot tr {
		display: flex !important;
		align-items: stretch;
		width: 100%;
	}

	/* stretch sulla riga + flex sulla singola cella: le 3 celle (valore,
	   immagine, descrizione) finiscono tutte alte quanto la piu' alta
	   (l'immagine), col contenuto di ciascuna centrato verticalmente */
	#codice_articolo tfoot tr > th,
	#codice_articolo tfoot tr > td {
		display: flex !important;
		align-items: center;
		width: auto !important;
		flex: 0 0 auto;
	}

	/* celle vuote "codici_titoli_null" (spaziatori per il colspan
	   desktop): su mobile non devono occupare spazio */
	#codice_articolo tfoot tr > .codici_titoli_null:empty {
		display: none !important;
	}

	#codice_articolo tfoot tr > .codici_valori {
		flex: 0 0 44px;
		justify-content: center;
		text-align: center;
	}

	#codice_articolo tfoot tr > .descrizione_codici {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* cella con l'anteprima immagine (ancoraggio / estremita stelo):
	   larghezza fissa, mai schiacciata dal colspan */
	#codice_articolo tfoot tr > .descrizione_codici:has(img) {
		flex: 0 0 72px;
		justify-content: center;
		text-align: center;
	}

	#codice_articolo tfoot tr img {
		max-width: 100%;
		max-height: 64px;
		height: auto;
		width: auto;
	}

	/* ------------------------------------------------------------------
	   Riepilogo valori scelti finora: ricostruito a parte (non e' la
	   #val_row originale, che resta nascosta) cosi' da poter abbinare
	   ad ogni valore la sua etichetta, rivelati uno alla volta man mano
	   che l'utente compila i campi.
	   ------------------------------------------------------------------ */

	#mobsubstep-dots .mobsubstep-values {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: left;
		gap: 6px;
		width: 100%;
		margin-top: 12px;
		padding-left: 5px;
		padding-right: 5px;
	}
	#fstep2 {
		float: right !important;
		right: 0 !important;
	}
	#mobsubstep-dots .mfv-item {
		display: flex;
		flex-direction: column;
		min-width: 32px;
	}

	#mobsubstep-dots .mfv-label {
		display: block;
		background: #939393;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		text-align: center;
		padding: 3px 4px;
		white-space: nowrap;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#mobsubstep-dots .mfv-label:active {
		background: #7a7a7a;
	}

	#mobsubstep-dots .mfv-value {
		background: #009fe3;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		text-align: center;
		padding: 4px 4px;
	}

	#mobsubstep-dots .mfv-sep {
		align-self: flex-end;
		padding: 0 1px 6px;
		color: #333;
		font-weight: 700;
	}

	/* ------------------------------------------------------------------
	   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;
    }

}