/* =========================================================
   AMBIENT MUSIC TOGGLE
   Fixed floating control — visitor opts in, no autoplay-with-sound
   ========================================================= */

.music-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(227, 213, 188, .35);
  background: rgba(28, 22, 17, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--champagne, #E3D5BC);

  transition: border-color .25s var(--ease, ease), transform .25s var(--ease, ease), background .25s var(--ease, ease);
}

.music-toggle:hover{
  border-color: var(--gold, #C9B48A);
  transform: translateY(-2px);
}

.music-toggle:active{ transform: translateY(0); }

.music-toggle svg{
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* icon swap: show one glyph depending on state */
.music-toggle .music-toggle__on{ display: none; }
.music-toggle[aria-pressed="true"] .music-toggle__off{ display: none; }
.music-toggle[aria-pressed="true"] .music-toggle__on{ display: block; }

/* gentle "now playing" pulse ring while music is on */
.music-toggle[aria-pressed="true"]::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold, #C9B48A);
  opacity: .55;
  animation: musicPulse 2.2s ease-out infinite;
}

@keyframes musicPulse{
  0%   { transform: scale(.85); opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 560px){
  .music-toggle{
    right: 12px;
    bottom: 12px;
    width: 36px;
    height: 36px;
  }
  .music-toggle svg{ width: 14px; height: 14px; }
}

/* =========================================================
   WHATSAPP FLOATING BUTTON
   Stacks above the music toggle, bottom-right
   ========================================================= */

.whatsapp-float{
  position: fixed;
  right: 16px;
  bottom: 66px;
  z-index: 60;

  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}

.whatsapp-float:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
}

.whatsapp-float:active{ transform: translateY(0); }

.whatsapp-float svg{
  width: 20px;
  height: 20px;
}

@media (max-width: 560px){
  .whatsapp-float{
    right: 12px;
    bottom: 56px;
    width: 34px;
    height: 34px;
  }
  .whatsapp-float svg{ width: 17px; height: 17px; }
}