/* ===== Floating Action Button – SUNRROUND ===== */
:root{
  /* Ajuste as cores para a identidade da SUNRROUND */
  --sr-primary:#0c5e8f;         /* azul institucional */
  --sr-accent:#78c84b;          /* verde sustentabilidade */
  --sr-bg: linear-gradient(135deg, var(--sr-primary), var(--sr-accent));
  --sr-text:#ffffff;
  --sr-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  --sr-shadow-hover: 0 10px 30px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.16);
  --sr-size: 56px;              /* tamanho do botão */
  --sr-gap: 20px;               /* distância da borda */
  --sr-radius: 999px;
  --sr-z: 9999;
}

/* Botão flutuante */
.sr-float{
  position: fixed;
  left: max(var(--sr-gap), calc(env(safe-area-inset-right) + 12px));
  bottom: max(var(--sr-gap), calc(env(safe-area-inset-bottom) + 12px));
  width: var(--sr-size);
  height: var(--sr-size);
  display: grid;
  place-items: center;
  border-radius: var(--sr-radius);
  background: var(--sr-bg);
  color: var(--sr-text);
  box-shadow: var(--sr-shadow);
  text-decoration: none;
  z-index: var(--sr-z);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  isolation: isolate; /* garante sombra correta sobre outros elementos */
}

/* Ícone */
.sr-float__icon{
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* Tooltip (label) */
.sr-float__label{
  position: absolute;
  right: calc(100% + 10px);
  bottom: 50%;
  transform: translateY(50%);
  background: rgba(10, 26, 36, .9);
  color: #fff;
  font: 500 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* Setinha do tooltip */
.sr-float__label::after{
  content:"";
  position:absolute;
  left:100%;
  top:50%;
  transform: translateY(-50%);
  border:6px solid transparent;
  border-left-color: rgba(10, 26, 36, .9);
}

/* Hover/Focus */
.sr-float:hover,
.sr-float:focus{
  transform: translateY(-2px);
  box-shadow: var(--sr-shadow-hover);
  outline: none;
}
.sr-float:hover .sr-float__label,
.sr-float:focus .sr-float__label{
  opacity: 1;
  transform: translate(2px, 50%);
}

/* Anel de foco acessível */
.sr-float:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 0 6px rgba(120,200,75,.6), var(--sr-shadow);
}

/* Pulso suave para chamar atenção (desligado em prefers-reduced-motion) */
.sr-float::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--sr-radius);
  background: radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%);
  opacity:.0;
  transition: opacity .18s ease;
}
.sr-float:hover::before{ opacity:.15; }

@media (prefers-reduced-motion: no-preference){
  .sr-float::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius: var(--sr-radius);
    animation: sr-pulse 2.4s ease-out infinite;
    background: radial-gradient(circle, rgba(120,200,75,.28), transparent 60%);
    z-index:-1;
  }
  @keyframes sr-pulse{
    0%{ opacity:.4; transform: scale(.9); }
    70%{ opacity:0; transform: scale(1.2); }
    100%{ opacity:0; transform: scale(1.25); }
  }
}

/* Mobile: esconde o tooltip para evitar sobreposição */
@media (max-width: 640px){
  .sr-float__label{ display:none; }
}

/* Variações rápidas de posição (caso precise) */
.sr-float.is-left{ right:auto; left: var(--sr-gap); }
.sr-float.is-top{ bottom:auto; top: var(--sr-gap); }