/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0f0f10;color:#fff;overflow:hidden}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Layout */
main{display:flex;min-height:100vh}

/* Preview */
.preview-section{
  --thumb-size: 50px;       /* altura das miniaturas */
  --thumb-gap: 16px;        /* distância ao fundo */
  flex:1; position:relative;
  background:url('imagens/sofa1.jpg') center/cover no-repeat;
  overflow:hidden;
}

/* Safe-zone (mantém o texto acima do sofá) */
.preview-section[data-scene="sofa"] .safe-top{
  position:absolute; left:0; right:0; bottom:0;
  height:28%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(15,15,16,0) 0%, rgba(15,15,16,0.3) 60%, rgba(15,15,16,0.5) 100%);
}

.preview-content{
  position:absolute; left:50%; transform:translateX(-50%);
  top:10%; width:86%; max-width:1100px; max-height:62%;
  display:flex; align-items:flex-start; justify-content:center; text-align:center; overflow:visible;
}

/* Neon */
.neon-text{
  position:relative; display:inline-block;
  font-size:8rem; line-height:1.2; color:#fff; --neon-color:#ffffff;
  text-shadow:
    0 0 1px #fff, 0 0 6px #fff,
    0 0 10px var(--neon-color), 0 0 20px var(--neon-color),
    0 0 40px var(--neon-color), 0 0 80px var(--neon-color);
  filter:saturate(1.1) brightness(1.05);
  transition: font-size .2s ease, line-height .12s ease, letter-spacing .12s ease;
  word-break:break-word;
}
.neon-text::after{
  content:attr(data-text); position:absolute; left:0; top:0;
  filter:blur(10px); opacity:.55; pointer-events:none; color:var(--neon-color);
  text-shadow:0 0 10px var(--neon-color),0 0 24px var(--neon-color),0 0 48px var(--neon-color);
}

/* Miniaturas ambiente */
.background-controls{
  position:absolute; bottom:var(--thumb-gap); left:16px; display:flex; gap:10px; z-index:10
}
.background-thumbnail{
  width:var(--thumb-size); height:var(--thumb-size);
  border:2px solid #3a3a3a; border-radius:8px; cursor:pointer;
  background-size:cover; background-position:center; transition:all .2s ease
}
.background-thumbnail.active{border-color:#25D366; transform:scale(1.06)}
.background-thumbnail[data-bg="sofa1.jpg"]{background-image:url('imagens/sofa1.jpg')!important}
.background-thumbnail[data-bg="parede1.jpg"]{background-image:url('imagens/parede1.jpg')!important}
.background-thumbnail[data-bg="jardim1.jpg"]{background-image:url('imagens/jardim1.jpg')!important}

.background-controls{
  /*position:absolute; bottom:var(--thumb-gap); left:16px; display:flex; gap:10px; z-index:10*/
  position:absolute; 
  bottom: 70px; 
  left:50%;
  right:50%;
  display:flex; gap:10px; z-index:10*/
}
.background-thumbnail{
  width:var(--thumb-size); height:var(--thumb-size);
  border:2px solid #3a3a3a; border-radius:8px; cursor:pointer;
  background-size:cover; background-position:center; transition:all .2s ease
}
.background-thumbnail.active{border-color:#25D366; transform:scale(1.06)}
.background-thumbnail[data-bg="sofa1.jpg"]{background-image:url('imagens/sofa1.jpg')!important}
.background-thumbnail[data-bg="parede1.jpg"]{background-image:url('imagens/parede1.jpg')!important}
.background-thumbnail[data-bg="jardim1.jpg"]{background-image:url('imagens/jardim1.jpg')!important}


/* Faixa dentro do preview, alinhada ao TOPO das miniaturas */
#global-pricebar{
  position:absolute; 
  left:50%; 
  transform:translateX(-50%);
  /* top da faixa alinhado com top das miniaturas: bottom = thumbs height + gap */
  bottom: calc(var(--thumb-size) + var(--thumb-gap));
  z-index:15; 
  width:auto; 
  margin:0; 
  padding:0; 
  pointer-events:none;
}
/* Barra mais esticada */
#global-pricebar .pb-inner{
    display: inline-grid;
    grid-template-columns: 1fr 1fr auto; /* dá mais espaço ao preço */
    gap: 10px;
    align-items: center;
  
    pointer-events: auto;
    /*width: min(96%, 1200px);*/   /* <- estava 92% e 880px 
    min-width: 320px;*/
  
    background: linear-gradient(180deg, rgba(15,15,16,.65), rgba(15,15,16,.95));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;       /* ligeiramente mais “flat” */
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  
#global-pricebar .pb-dims{ color:#ddd; font-weight:600; font-size:.9rem }
#global-pricebar .pb-price{ color:#fff; font-weight:800; font-size:.98rem }
#global-pricebar .pb-cta{
  background:linear-gradient(45deg,#39ff88,#25D366);
  color:#0c1a12; font-weight:900; border:none; border-radius:10px;
  padding:8px 12px; cursor:pointer; transition:transform .12s ease, filter .2s ease;
}
#global-pricebar .pb-cta:hover{ transform:translateY(-1px); filter:brightness(1.04) }
#global-pricebar .pb-cta .icon{ margin-left:6px }

/* Painel de controlos */
.controls-section{
  width:460px; background:#18191b; padding:18px 18px 24px;
  height:100vh; overflow:auto; border-left:1px solid rgba(255,255,255,.06)
}
.panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 12px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08)
}
.brand{font-weight:800; letter-spacing:.3px}
.brand img {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.lang-select{background:#2b2c2f;color:#fff;border:1px solid #3a3a3a;border-radius:10px;padding:6px 10px}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.call-to-action{text-align:center;margin:8px 0 10px;font-size:1rem;color:#25D366}
.progress-bar{width:100%;height:8px;background:#2a2a2a;border-radius:5px;margin:6px 0 10px}
.progress{height:100%;background:#25D366;border-radius:5px;width:0;transition:width .3s ease}

.card{
  background:rgba(34,35,38,.85); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px; margin:10px 0; backdrop-filter:blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card-title{margin-bottom:8px;font-size:1rem}

textarea{
  width:100%; padding:14px; border:1px solid #3a3a3a; border-radius:12px;
  background:#232428; color:#fff; resize:vertical; max-height:60px; font-size:1rem
}
.char-counter{ margin-top:6px; opacity:.9 }

.size-blocks,.font-blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.size-block,.font-block{
  padding:12px; border:1px solid #3a3a3a; border-radius:12px; text-align:center; cursor:pointer;
  background:#232428; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease
}
.size-block:hover,.font-block:hover{transform:translateY(-2px)}
.size-block.selected,.font-block.selected{border-color:#25D366; box-shadow:0 0 0 2px rgba(37,211,102,.18) inset}

.color-circles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.color-circle{width:44px;height:44px;border:2px solid #3a3a3a;border-radius:50%;cursor:pointer;transition:all .2s ease}
.color-circle.selected{border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.color-circle[data-color="Branco"]{background:#ffffff}
.color-circle[data-color="Vermelho"]{background:#ff0000}
.color-circle[data-color="Verde"]{background:#00ff00}
.color-circle[data-color="Azul"]{background:#0000ff}
.color-circle[data-color="Rosa"]{background:#ff00ff}
.color-circle[data-color="Amarelo"]{background:#ffff00}
.color-circle[data-color="Laranja"]{background:#ff8000}
.color-circle[data-color="Ciano"]{background:#00ffff}

.small-text{font-size:.9rem;color:#9aa;margin-top:6px}

/* Réguas (labels) */
.preview-section .ruler{
  position:absolute; pointer-events:none; color:#fff; font-size:.8rem; opacity:.95;
  background:rgba(0,0,0,.45); padding:2px 6px; border-radius:6px; border:1px solid rgba(255,255,255,.25)
}
.ruler.h{ top: 10px; left:50%; transform:translateX(-50%) }
.ruler.v{ right:auto; top:50%; transform:none }

/* Linhas de medição + setas */
.measure-line{ position:absolute; pointer-events:none; background:#fff; opacity:.95; z-index:5; box-shadow:0 0 1px rgba(255,255,255,.7)}
.hline{ height:2px }
.vline{ width:2px }
.hline::before,.hline::after,.vline::before,.vline::after{
  content:""; position:absolute; width:0; height:0; border:6px solid transparent; filter:drop-shadow(0 0 1px rgba(255,255,255,.6));
}
.hline::before{ left:-2px; top:50%; transform:translate(-100%,-50%); border-right-color:#fff }
.hline::after{ right:-2px; top:50%; transform:translate(100%,-50%); border-left-color:#fff }
.vline::before{ top:-2px; left:50%; transform:translate(-50%,-100%); border-bottom-color:#fff }
.vline::after{ bottom:-2px; left:50%; transform:translate(-50%,100%); border-top-color:#fff }

@media (max-width:768px){
  	main{flex-direction:column}
  .preview-section{height:46vh}
  .preview-content{top:8%; width:92%; max-height:58%}
  .controls-section{width:100%; height:54vh; padding-bottom:24px}
  .color-circles{grid-template-columns:repeat(4,1fr)}
  .size-blocks,.font-blocks{grid-template-columns:repeat(2,1fr)}
  #global-pricebar .pb-inner{ grid-template-columns:1fr; width:min(100%,880px); text-align:center }
  #global-pricebar .pb-cta{ width:100% }

.background-controls{
  /*position:absolute; bottom:var(--thumb-gap); left:16px; display:flex; gap:10px; z-index:10*/
  position:absolute; 
  bottom: 70px; 
  left:33.3%;
  right:33.3%;
  display:flex; gap:10px; z-index:10*/
}


}
/* === BARRA ALINHADA ÀS MINIATURAS (mesma altura) === */
/* as miniaturas já definem estas variáveis na .preview-section */
.preview-section{ --thumb-size: 50px; --thumb-gap: 16px; }

/* posiciona a barra exatamente na mesma “pista” das miniaturas */
#global-pricebar{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--thumb-gap);           /* mesma distância ao fundo que os thumbs */
  z-index: 15;
  width: auto;
  margin: 0; padding: 0;
  pointer-events: none;               /* só o conteúdo recebe cliques */
}

/* dá à barra a MESMA ALTURA dos thumbs e layout “comprido” */
#global-pricebar .pb-inner{
  pointer-events: auto;

  /* altura igual aos thumbs */
  height: var(--thumb-size);

  /* alongada e centrada */
  width: min(96%, 1200px);
  min-width: 360px;

  /* grid: [Dimensões] [Preço] [Botão] */
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 12px;

  /* espaço à esquerda para NÃO ficar por baixo das miniaturas */
  padding: 0 14px 0 calc(14px + var(--thumb-size) + 16px);

  background: linear-gradient(180deg, rgba(15,15,16,.65), rgba(15,15,16,.95));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* tipografia dentro da barra — verticalmente centrada */
#global-pricebar .pb-dims{ color:#ddd; font-weight:600; font-size:.95rem; line-height:1 }
#global-pricebar .pb-price{ color:#fff; font-weight:800; font-size:1.05rem; line-height:1 }

/* botão com a MESMA ALTURA da barra */
#global-pricebar .pb-cta{
  height: calc(var(--thumb-size) - 8px);   /* 8px para respirar dentro do container */
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;

  padding: 0 16px;
  background: linear-gradient(45deg,#39ff88,#25D366);
  color:#0c1a12; font-weight:900; border:none; border-radius:8px;
  cursor:pointer; transition: transform .12s ease, filter .2s ease;
}
#global-pricebar .pb-cta:hover{ transform: translateY(-1px); filter: brightness(1.04) }
#global-pricebar .pb-cta .icon{ margin-left:8px }

/* as miniaturas ficam por cima (para cliques) e continuam visíveis */
.background-controls{ z-index: 16; }

/* responsivo */
@media (max-width: 768px){
  #global-pricebar .pb-inner{
    width: min(98%, 1200px);
    grid-template-columns: 1fr auto;     /* agrupa dim+preço e o botão */
    gap: 10px;
    padding: 0 10px 0 calc(10px + var(--thumb-size) + 12px);
  }
  #global-pricebar .pb-dims{ font-size:.9rem }
  #global-pricebar .pb-price{ font-size:1rem }
  #global-pricebar .pb-cta{ height: calc(var(--thumb-size) - 10px); padding: 0 14px }
}
/* === força layout horizontal dentro da barra === */
#global-pricebar .pb-inner{
    display: block !important;         /* o grid fica na .pb-row */
    height: var(--thumb-size) !important;
    width: min(96%, 1200px) !important;
    min-width: 360px !important;
    padding: 0 14px 0 calc(14px + var(--thumb-size) + 16px) !important;
  }
  
  #global-pricebar .pb-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important; /* Dimensões | Preço | Botão */
    align-items: center !important;
    gap: 12px !important;
    height: 100% !important;
  }
  
  #global-pricebar .pb-dims{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  #global-pricebar .pb-price{ text-align: left; }
  
  /* botão com mesma “altura visual” da barra */
  #global-pricebar .pb-cta{
    height: calc(var(--thumb-size) - 8px) !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: 0 16px !important;
  }
  
  /* mobile: emparelha dim+preço e botão ao lado, se couber */
  @media (max-width:768px){
    #global-pricebar .pb-row{
      grid-template-columns: 1fr auto !important;   /* (dim+preço) | botão */
      gap: 10px !important;
    }
    #global-pricebar .pb-dims, #global-pricebar .pb-price{
      font-size: .95rem;
    }
    #global-pricebar .pb-cta{
      height: calc(var(--thumb-size) - 10px) !important;
      padding: 0 14px !important;
    }
  }
/* ========= BARRA ESTICADA, ALINHADA ÀS MINIATURAS ========= */
/* podes afinar estes valores */
.preview-section{
    --thumb-size: 50px;       /* altura dos thumbs */
    --thumb-gap: 16px;        /* distância dos thumbs ao fundo */
    --edge-margin: 16px;      /* margem direita da barra para não encostar */
    --thumbs-to-bar-gap: 70px;/* distância horizontal e
	ntre thumbs e barra */
  }
  
  /* barra ocupa de (thumbs + folga) até ao lado direito, sem invadir controlos */
  #global-pricebar{
    position: absolute !important;
    left: calc(16px + var(--thumb-size) + var(--thumbs-to-bar-gap)) !important; /* 16px = margem esquerda dos thumbs */
    right: var(--edge-margin) !important;
    bottom: var(--thumb-gap) !important;
    transform: none !important;
    z-index: 15 !important;
    pointer-events: none !important; /* só o conteúdo recebe clique */
  }
  
  /* container da barra: 100% da largura entre left/right e altura igual aos thumbs */
  #global-pricebar .pb-inner{
    width: 100% !important;
    height: var(--thumb-size) !important;
    min-width: 360px !important;
  
    background: linear-gradient(180deg, rgba(15,15,16,.65), rgba(15,15,16,.95)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  
    padding: 0 14px !important;
    pointer-events: auto !important;
  }
  
  /* layout HORIZONTAL dos itens (Dimensões | Preço | Botão) */
  #global-pricebar .pb-row{
    display: grid !important;
    grid-template-columns: 1.3fr 1fr auto !important; /* dá mais espaço às dimensões */
    align-items: center !important;
    gap: 12px !important;
    height: 100% !important;
  }
  
  /* texto dentro da barra */
  #global-pricebar .pb-dims{
    color:#ddd; font-weight:600; font-size:.98rem; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  #global-pricebar .pb-price{
    color:#fff; font-weight:800; font-size:1.05rem; line-height:1; white-space:nowrap;
  }
  
  /* botão com a MESMA altura visual da barra */
  #global-pricebar .pb-cta{
    height: calc(var(--thumb-size) - 8px) !important; /* folga vertical interna */
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 0 16px !important;
    background: linear-gradient(45deg,#39ff88,#25D366);
    color:#0c1a12; font-weight:900; border:none; border-radius:8px;
    cursor:pointer; transition: transform .12s ease, filter .2s ease;
  }
  #global-pricebar .pb-cta:hover{ transform: translateY(-1px); filter: brightness(1.04) }
  #global-pricebar .pb-cta .icon{ margin-left:8px }
  
  /* garante que os thumbs ficam clicáveis e visíveis por cima se sobrepuserem */
  .background-controls{ z-index: 16 !important; }
  
  /* responsivo: mantém tudo em linha se couber; caso contrário, deixa quebrar com elegância */
  @media (max-width: 768px){
    #global-pricebar{
      /*left: calc(12px + var(--thumb-size) + 10px) !important;
      right: 12px !important;
      bottom: var(--thumb-gap) !important;*/
    }
    #global-pricebar .pb-inner{ height: calc(var(--thumb-size) - 2px) !important; padding: 0 10px !important }
    #global-pricebar .pb-row{ grid-template-columns: 1fr auto !important; gap: 10px !important }
    #global-pricebar .pb-dims{ font-size:.92rem }
    #global-pricebar .pb-price{ font-size:.98rem }
    #global-pricebar .pb-cta{ height: calc(var(--thumb-size) - 10px) !important; padding: 0 14px !important }
  }