/* Back To Top - Premium floating button (glassmorphism) */
:root{
  --btt-aqua: #7ee7d9; /* aquamarine */
  --btt-size: clamp(44px, 4.2vw, 56px);
  --btt-glow: 0 10px 30px rgba(126,231,217,0.16);
  --btt-shadow: 0 6px 18px rgba(8,20,30,0.12);
  --btt-accent: rgba(126,231,217,0.18);
}

.btt-button{
  position:fixed;
  /* Sit just left of the WhatsApp + Call floater column so they don't overlap. */
  right:calc(clamp(16px, 3.2vw, 28px) + clamp(52px, 6.2vw, 60px) + 14px);
  bottom:var(--btt-bottom, 28px);
  width:var(--btt-size);
  height:var(--btt-size);
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--btt-aqua);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow:var(--btt-shadow), var(--btt-glow);
  cursor:pointer;
  transform:translateY(8px) scale(0.96);
  transition:opacity 320ms cubic-bezier(.2,.9,.2,1), transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease, right 200ms ease;
  opacity:0;
  visibility:hidden;
  z-index:9999;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.btt-button:focus{
  outline:none;
  box-shadow:0 0 0 6px rgba(126,231,217,0.10), var(--btt-shadow);
}

.btt-button .btt-icon{
  font-size:clamp(18px, 2.6vw, 22px);
  line-height:1;
  transform:translateY(-1px);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

.btt-button.btt-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.btt-button:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 14px 40px rgba(12,28,36,0.18), 0 6px 22px rgba(126,231,217,0.12);
}

.btt-button:active{
  transform:translateY(-2px) scale(.98);
}

/* Small indicator glow behind the button for premium look */
.btt-button::before{
  content:"";
  position:absolute;
  inset:auto auto 8px 8px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%, var(--btt-accent), transparent 40%);
  filter:blur(14px);
  opacity:0.9;
  pointer-events:none;
}

/* When footer is near, JS will set --btt-bottom so the button floats above it */

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .btt-button, .btt-button *{transition:none !important; animation:none !important}
}

/* Responsive tweaks */
@media (max-width:520px){
  .btt-button{
    width:48px;
    height:48px;
    right:calc(14px + 52px + 10px);
  }
  .btt-button .btt-icon{font-size:18px}
}