/* ============================================================
   Eco Hotel Palma Dorada — Ambient Audio Control
   Floating button injected by assets/js/ambient-audio.js
   ============================================================ */

/* ── Local tokens (mirrors site :root, fallbacks for isolation) ── */
.pd-audio-btn {
  --pd-bg:      rgba(12, 39, 27, 0.90);    /* --selva tinted */
  --pd-border:  rgba(200, 155, 60, 0.32);  /* --palma */
  --pd-gold:    #C89B3C;                   /* --palma */
  --pd-ivory:   #FAF6EC;                   /* --marfil */
  --pd-glow:    rgba(200, 155, 60, 0.22);
}

/* ── Base button ── */
.pd-audio-btn {
  position:        fixed;
  bottom:          24px;
  left:            24px;
  z-index:         88;          /* below WhatsApp float (z:90), below nav (z:100) */

  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  padding:         9px 15px 9px 11px;

  background:      var(--pd-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:          1px solid var(--pd-border);
  border-radius:   100px;
  box-shadow:      0 4px 18px rgba(0, 0, 0, 0.30);

  font-family:     'Albert Sans', sans-serif;
  font-size:       12px;
  font-weight:     500;
  letter-spacing:  0.02em;
  text-transform:  none;
  color:           rgba(250, 246, 236, 0.88);

  cursor:          pointer;
  user-select:     none;
  transition:      transform 0.22s ease, box-shadow 0.22s ease,
                   border-color 0.3s ease, color 0.2s ease;
}

.pd-audio-btn:hover {
  transform:   translateY(-2px);
  box-shadow:  0 8px 26px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(200, 155, 60, 0.52);
  color:       var(--pd-ivory);
}

.pd-audio-btn:active {
  transform: translateY(0);
}

.pd-audio-btn:focus-visible {
  outline:        2px solid var(--pd-gold);
  outline-offset: 3px;
}

/* ── Playing state — golden accent ── */
.pd-audio-btn.pd-audio--playing {
  border-color: rgba(200, 155, 60, 0.60);
  box-shadow:   0 4px 18px rgba(0, 0, 0, 0.30), 0 0 20px var(--pd-glow);
  color:        var(--pd-ivory);
}

/* ── Muted-after-start state — slightly dimmed ── */
.pd-audio-btn.pd-audio--muted {
  opacity: 0.68;
}

/* ── Icon wrapper ── */
.pd-audio-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--pd-gold);
}

/* When playing, icon pulses very softly */
.pd-audio-btn.pd-audio--playing .pd-audio-icon {
  animation: pd-icon-pulse 3.5s ease-in-out infinite;
}

@keyframes pd-icon-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ── Label ── */
.pd-audio-label {
  color: inherit;
}

/* ── Animated sound bars (visible only while playing) ── */
.pd-audio-bars {
  display:     flex;
  align-items: center;
  gap:         2px;
  margin-left: 2px;
}

.pd-audio-bars i {
  display:       block;
  width:         2px;
  border-radius: 1px;
  background:    var(--pd-gold);
  animation:     pd-bar 0.88s ease-in-out infinite;
  font-style:    normal; /* override <i> italic */
}

/* Staggered heights and delays for organic feel */
.pd-audio-bars i:nth-child(1) { height: 6px;  animation-delay: 0.00s; }
.pd-audio-bars i:nth-child(2) { height: 10px; animation-delay: 0.20s; }
.pd-audio-bars i:nth-child(3) { height: 7px;  animation-delay: 0.38s; }
.pd-audio-bars i:nth-child(4) { height: 9px;  animation-delay: 0.55s; }

@keyframes pd-bar {
  0%, 100% { transform: scaleY(0.35); opacity: 0.60; }
  50%       { transform: scaleY(1.00); opacity: 1.00; }
}

/* ── Reduced-motion: freeze all animations, keep button functional ── */
@media (prefers-reduced-motion: reduce) {
  .pd-audio-btn,
  .pd-audio-btn.pd-audio--playing .pd-audio-icon {
    animation:  none;
    transition: none;
  }
  .pd-audio-bars i {
    animation: none;
    transform: scaleY(0.7);
  }
}

/* ── Mobile: shorter label, keep the invitation readable ── */
@media (max-width: 480px) {
  .pd-audio-btn {
    max-width: calc(100vw - 100px);
    padding: 10px 14px 10px 12px;
  }
  .pd-audio-label {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}