.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: flex;
    justify-content: space-evenly;
    gap: 16px;
    height: 550px;
}

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

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

.quadros-container, .movel-container {
    display: flex;
    justify-content: center;
    max-width: 400px;
}
.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 button.active, #bt-sugerir, #toggleSimulador {
    background-color: #fddf5e;
    color: #3a2a00;
    font-weight: bold;
    border: solid #f6d341;
    }
#toggleSimulador {
    padding: 15px;
    border-radius: 13px;
    text-transform: uppercase;
    font-weight: 800;
    z-index: 1000;
    position: relative;
    margin: 20px 0;
    background: linear-gradient(90deg, #ffc92d 0%, #fddf5e 45%, #ffc92d 100%);
    border: 0;
    }
    
#toggleSimulador.ativo {
    background: #ddd;
}
.opcoes {
    margin-bottom: 25px;
}
.opcoes button, #bt-sugerir {
    margin: 3px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 10px;
    border: inherit;
    font-size: 1.1em;}

.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: 215px;
    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 {
    flex-direction: column;
    padding: 20px;
    height: inherit;}
    
    /*#sugerir {
    position: absolute;
    bottom: -3%;
    left: 50%;
    transform: translateX(-50%);}*/
    
    #simuladorv1 .line-cat {
    border-bottom: 1px solid #ddd;}
    
    .controls {
        width: inherit;
    }
}
    
.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;}



.block-envios {
    display: flex;
    align-items: center;
    padding: 15px 5px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
/* Container: mantém tudo numa linha */
.flash-envios {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  background: #f2f2f2;
  white-space: nowrap; /* força uma linha só */
  overflow: hidden;
  transform: translateZ(0); /* performance */
  width: 100%;
  justify-content: space-between;
}

/* Ícone do raio com 'pulse + tilt' */
.flash-envios .bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
  box-shadow: 0 4px 14px rgba(255,200,0,0.25);
  color: #ff9800;
  animation: boltPulse 1.8s infinite ease-in-out, boltTilt 3.6s infinite linear;
  transform-origin: 50% 50%;
}

@keyframes boltPulse {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,200,0,0)); }
  50%  { transform: scale(1.12); filter: drop-shadow(0 6px 18px rgba(255,180,0,0.45)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,200,0,0)); }
}
@keyframes boltTilt {
  0%   { rotate: 0deg; }
  50%  { rotate: -6deg; }
  100% { rotate: 0deg; }
}

/* Texto: mantém tudo junto, anima pequena entrada do segundo trecho */
.flash-envios .flash-text {
  /* gap: 0.6rem; */
}
.flash-envios .f-title {
font-weight: 700;
margin-left: 5px;
}
.flash-envios .f-sub {
  margin-left: 0.4rem;
  font-weight: 500;
  color: #3a2a00;
  position: relative;
  overflow: visible;
  animation: f-subSlide 2.4s ease forwards;
  opacity: 0;
  transform: translateX(8px) scale(0.98);
  font-size: 1.4rem;
}
@keyframes f-subSlide {
  0%   { opacity: 0; transform: translateX(8px) scale(0.98); }
  60%  { opacity: 1; transform: translateX(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* small accessible hidden text (screen readers) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* responsive scaling (keeps one line) */
@media (max-width: 1024px) {
  .flash-envios {flex-wrap: wrap;}
  .flash-envios .bolt { width: 1.35rem; height: 1.35rem; font-size: 0.95rem; }
}