.tamanho-wrapper {
    position: relative; 
    display: inline-block;
    margin: 2px;}

.info-icon {
position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; background-color: #f6d341; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; cursor: help;z-index: 10;}

.hidden {display: none;  }

.tooltip-text {visibility: hidden; opacity: 0; width: 220px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 20; bottom: 125%;left: 50%;transform: translateX(-50%);transition: opacity 0.3s;font-size: 12px;}
.info-icon {
    pointer-events: auto;
    user-select: none;}
.info-icon + .tooltip-text {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.18s ease;}
.info-icon:hover + .tooltip-text, .info-icon:focus + .tooltip-text,.info-icon:focus-visible + .tooltip-text { visibility: visible; opacity: 1;}

#simuladorv1 {
    border-radius: 10px;
    box-shadow: 0px 1px 10px -5px rgb(0 0 0 / 84%);
    padding: 25px;
    display: inline-flex;
    gap: 16px;}

#simuladorv1 .line-cat {
    border-left: 1px solid #ddd;}
    
.controls {
    padding: 25px}
    
.preview {
    position: relative;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px;
    justify-content: flex-end;}

#imgQuadro, #imgMovel {
    height: auto;
    max-height: 200px;
    width: auto;
    object-fit: contain;
    display: block;
    max-width: 100%;}

.quadros-container, .movel-container {
    display: flex;
    justify-content: center;}
.quadro {
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding-bottom: 5%;}
.quadro:hover,#bt-sugerir:hover {
    transform: scale(1.03);
    opacity: 0.95;  }

.opcoes { 
    margin: 10px 0; }
.opcoes button, #bt-sugerir {
    margin: 3px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 10px;
    border: inherit;
    font-size: 1.1em;}
.opcoes button.active, #bt-sugerir, #toggleSimulador.ativo {
    background-color: #fddf5e;
    color: #2d2d2d;
    font-weight: bold;
    border: solid #f6d341;}
.opcoes button.disabled { 
    opacity: .45; 
    cursor: not-allowed; 
pointer-events: none; }
    .opcoes span {
    font-weight: bold; }
.note { 
    color: #b8b8b8; 
    font-size: 0.9em; 
    margin-top: 8px;
    max-width: 400px;}

#bt-sugerir {
    position: relative;
    padding: 10px 25px;
    margin-top: 25px;
    border-radius: 20px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

#sugerir {
    display: flex;
    justify-content: center;}

.seffect {
    cursor: pointer;
    position: absolute;
    content: url(/assets/img/brilhin.gif);
    z-index: 1;
    height: 74px;
    margin-left: 205px;
    filter: drop-shadow(1px 1px 1px #a66939);}

.banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: #333;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 9999;
    font-size: 14px;
    pointer-events: none;}
.banner.show {opacity: 1; transform: translateX(-50%) translateY(0);}
.banner-ok { background: #4CAF50; }
.banner-erro { background: #E74C3C; }
.banner-alerta { background: #F6D341; color: #2d2d2d; }
.banner-info { background: #3498DB; }

.linha-medida {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    position: relative;}
.linha-medida::before,.linha-medida::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ccc;
    position: relative;}
.linha-medida::before {
    margin-right: 10px;}
.linha-medida::after {
    margin-left: 10px;}
.linha-medida span {
    white-space: nowrap;
    font-size: 16px;
    color: #666;
    position: relative;}
.linha-medida::before {
    background-image: linear-gradient(to left, #ccc 90%, transparent 90%);
    background-size: 10px 1px;
    background-repeat: no-repeat;
    background-position: left center;}
.linha-medida::after {
    background-image: linear-gradient(to right, #ccc 90%, transparent 90%);
    background-size: 10px 1px;
    background-repeat: no-repeat;
    background-position: right center;}
    
    
@media (max-width: 991px) {
    #simuladorv1 {
    display: flex;
    flex-direction: column;
    padding:5px;}
    
    #sugerir {
    position: absolute;
    bottom: -3%;
    left: 50%;
    transform: translateX(-50%);}
    
    #simuladorv1 .line-cat {
    border-bottom: 1px solid #ddd;}}
    
.simulador-container {
  max-height: 0;
  opacity: 0;  
  overflow: hidden;
  transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, padding 0.7s ease-in-out;
  padding: 0 20px; }

.simulador-container.visivel {
  opacity: 1;
  max-height: 2000px; 
  padding: 20px;}


#toggleSimulador {
    padding: 20px;
    border-radius: 13px;
    text-transform: uppercase;
    font-weight: bold;
    border: solid #ccc;
    background-color: #ddd;
}