.configuratore-ui {
    display: flex;
    justify-content:center;
    margin:0 auto;
    max-width:1200px;
    flex-wrap: wrap;
    gap: 12px;
    overflow-x: hidden;
    padding: 15px;
    
    width:fit-content;
    box-sizing: border-box;
}

.config-col {
    display:flex;
    flex-direction:column;

    gap:8px;

    flex:1;

    min-width:140px;

    max-width:180px;
}

.config-col select {
    width: 100%; /* 🔥 IMPORTANTISSIMO */
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    font-size: 13px;
    cursor: pointer;
}
#configuratore-3d {
    margin-bottom: 20px;
}

/* AMBIENTE */
.gruppo-ambiente .config-title {
    background: #6f8598; /* blu attuale */
}

/* SEDUTA */
.gruppo-seduta .config-title {
    background: #7a9e7e; /* verde soft */
}

/* TAVOLO */
.gruppo-tavolo .config-title {
    background: #a88b6b; /* beige caldo */
}

.config-title {
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.configuratore-ui {
    scrollbar-width: thin;
}


/* ================= OVERLAY (FIX DEFINITIVO) ================= */
#start-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;

display: flex;
align-items: center;
justify-content: center;

background: rgba(255,255,255,0.95);

z-index: 999999;

text-align: center;
cursor: pointer;

transition: opacity 0.3s ease;

pointer-events: all;

}

/* blocca scroll quando overlay attivo */
body.overlay-active {
overflow: hidden;
}

/* testo loader */
#loader-text {
font-size: 20px;
font-weight: 600;
}

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

body .configuratore-ui {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
    gap: 10px !important;
    padding: 10px !important;
}

body .configuratore-ui .config-col {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    min-width: unset !important;
}

/* 🔥 container 3D mobile */
#configuratore-3d {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}

/* testo leggermente più piccolo */
#loader-text {
    font-size: 16px;
}

/* bottone mobile fix */
.configuratore-actions {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
}


#btn-export-pdf {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;

    background: #1c1c1c; /* nero elegante */
    color: white;

    padding: 14px;
    font-size: 15px;

    border-radius: 10px;
}

#btn-export-pdf:active {
    transform: scale(0.98);
}


}

.configuratore-actions {
    display: flex;
    justify-content: center;
    margin: 20px 0 30px;
}

#btn-export-pdf {
    background: #1c1c1c; /* 🔥 nero elegante */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#btn-export-pdf:hover {
    background: #000000;
    transform: translateY(-2px);
}

/* =========================
   CARD CONFIGURATORE
========================= */

.config-cards{
display:flex;
flex-direction:column;

gap:6px;

max-height:85px;

overflow-y:auto;
overflow-x:hidden;

width:100%;

padding:4px;

box-sizing:border-box;

scrollbar-width:thin;
}

.config-card{
width:100%;
flex:0 0 auto;
border-radius:14px;
overflow:hidden;
background:#ffffff;
cursor:pointer;
transition:all .25s ease;
border:2px solid transparent;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.config-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(0,0,0,0.16);
}

.config-card.active{
border-color:#b89b72;
box-shadow:0 10px 26px rgba(184,155,114,0.35);
}

.config-card-image{
width:100%;
height:50px;

overflow:hidden;

background:#f4f4f4;

display:flex;
align-items:center;
justify-content:center;

border-bottom:1px solid rgba(0,0,0,0.05);
}

.config-card-image img{
width:100%;
height:100%;
object-fit:contain;
padding:4px;
box-sizing:border-box;
display:block;
}

.config-card-title{
padding:6px;
font-size:11px;
font-weight:600;
text-align:center;
color:#333;
background:#fff;
line-height:1.2;
}

/* MOBILE */

@media(max-width:768px){

.config-card{
width:92px;
}

.config-card-image{
height:68px;
}

.config-card-title{
font-size:12px;
padding:8px;
}

}

#configuratore-3d{
position:relative;
left:3px;
}

.piano-card{
cursor:pointer;
transition:all .25s ease;
border:2px solid transparent;
}

.piano-card:hover{
transform:translateY(-2px);
}

.piano-card.active{

border:2px solid #b8956a;

box-shadow:
0 10px 30px rgba(184,149,106,.25);

transform:translateY(-3px);

}

@media (max-width:768px){

/* ================= CONTAINER ORIZZONTALI ================= */

#cards-piano,
#cards-seduta,
#cards-base,
#cards-telaio,
#cards-base-tavolo{

display:flex !important;

flex-direction:row !important;

overflow-x:auto;

overflow-y:hidden;

flex-wrap:nowrap;

-webkit-overflow-scrolling:touch;

scrollbar-width:none;

gap:12px;

width:0;

min-width:100%;

max-width:100%;

touch-action:pan-x;

}

/* ================= NASCONDI SCROLLBAR ================= */

#cards-piano::-webkit-scrollbar,
#cards-seduta::-webkit-scrollbar,
#cards-base::-webkit-scrollbar,
#cards-telaio::-webkit-scrollbar,
#cards-base-tavolo::-webkit-scrollbar{

display:none;

}

/* ================= CARD SIZE ================= */

#cards-piano .piano-card,
#cards-seduta .seduta-card,
#cards-base .base-card,
#cards-telaio .telaio-card,
#cards-base-tavolo .base-tavolo-card{

flex:0 0 120px;

min-width:120px;

max-width:120px;

width:120px;

}

}

/* ================= TEXTURE CARDS ================= */

.texture-cards{

display:none;

grid-template-columns:repeat(3, 40px);

justify-content:center;

align-content:start;

/* 🔥 PIÙ RESPIRO TRA PALLINI */
gap:7px;

width:100%;

max-width:100%;

/* 🔥 ALTEZZA MINIMA UGUALE PER TUTTI */
min-height:240px;

/* 🔥 PIÙ DISTACCO DALLA CARD SOPRA */
margin-top:7px;

/* 🔥 PIÙ RESPIRO INTERNO */
padding:10px 20px;

box-sizing:border-box;

/* 🔥 SFONDO PIÙ PRESENTE */
background:rgba(0,0,0,0.08);

/* 🔥 LOOK PIÙ PREMIUM */
border-radius:12px;

/* 🔥 EVITA TAGLI */
overflow:visible;

}
.texture-card{

width:40px;
height:40px;

border-radius:50%;

overflow:hidden;

cursor:pointer;

border:2px solid transparent;

transition:all .2s ease;

background:#f3f3f3;

flex:0 0 auto;

}

.texture-card img{

width:100%;
height:100%;

object-fit:cover;

display:block;

}

.texture-card:hover{

transform:scale(1.08);

}

.texture-card.active{

border-color:#b8956a;

box-shadow:
0 0 0 3px rgba(184,149,106,.2);

}

/* 🔥 NASCONDI SELECT ORIGINALI */

#texture-seduta,
#texture-base,
#texture-piano,
#texture-telaio,
#texture-base-tavolo{

display:none;

}

/* MOBILE */

@media(max-width:768px){

.texture-cards{

display:none;

grid-template-columns:repeat(3, 1fr);

gap:6px;

overflow:visible;

padding-bottom:0;

justify-items:center;

}

.texture-card{

width:42px;
height:42px;

}

}

.texture-cards::-webkit-scrollbar{
display:none;
}

/* ================= MOBILE ACTIVE ================= */

.config-col.textures-open .texture-cards{

display:grid;

}

/* ================= TEXTURE APERTA SOLO SE ATTIVA ================= */

.config-col.textures-open .texture-cards{

display:grid;

}