/* ─────────────────────────────────────────────────────────
 * Everrow Bellhop FAB — styles
 * Drop-in stylesheet for the floating bellhop button.
 *
 * Class scope: .bellhop, .bell-*, .bh-*, .bellhop-backdrop
 * ───────────────────────────────────────────────────────── */

/* Variables — prefixed to avoid collisions */
:root {
  --bh-paper: #FAF7F2;
  --bh-navy: #1E2A3A;
  --bh-forest: #213126;      /* matches .everrow-footer__newsletter background */
  --bh-brass: #B5895D;
  --bh-brass-dark: #8E6A47;
  --bh-brass-light: #D4A77E;
}

/* ─── Backdrop ─── */
.bellhop-backdrop {
  position: fixed; inset: 0;
  background: rgba(14, 20, 28, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 998;
}
.bellhop.open ~ .bellhop-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ─── FAB container ─── */
.bellhop {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 1000;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 880px) {
  .bellhop { bottom: 32px; right: 32px; gap: 16px; }
}

/* ─── Menu items ─── */
.bellhop-items {
  display: flex; flex-direction: column;
  gap: 10px; align-items: flex-end;
  pointer-events: none;
}
@media (min-width: 880px) {
  .bellhop-items { gap: 12px; }
}

.bh-item {
  display: flex; align-items: center; gap: 11px;
  transform: translateY(16px) scale(0.7);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition:
    transform 260ms cubic-bezier(0.34, 1.6, 0.5, 1),
    opacity 180ms ease;
}
.bellhop.open .bh-item {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Bottom-up stagger: Call appears first (closest to bell) */
.bellhop.open .bh-item:nth-child(4) { transition-delay: 20ms; }
.bellhop.open .bh-item:nth-child(3) { transition-delay: 55ms; }
.bellhop.open .bh-item:nth-child(2) { transition-delay: 90ms; }
.bellhop.open .bh-item:nth-child(1) { transition-delay: 125ms; }

.bh-label {
  background: var(--bh-paper);
  color: var(--bh-navy);
  font-family: 'Playfair Display', serif;
  font-size: 13px; font-weight: 500;
  padding: 9px 14px;
  border-radius: 0;
  box-shadow:
    0 8px 20px -8px rgba(14, 20, 28, 0.42),
    0 2px 4px -1px rgba(14, 20, 28, 0.18);
  white-space: nowrap;
  letter-spacing: 0.005em;
  transition: background 200ms, color 200ms;
}
@media (min-width: 880px) {
  .bh-label { font-size: 14px; padding: 10px 16px; }
}

.bh-icon {
  width: 46px; height: 46px;
  border-radius: 0;
  background: var(--bh-paper);
  color: var(--bh-navy);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 8px 22px -6px rgba(14, 20, 28, 0.45),
    0 2px 4px -1px rgba(14, 20, 28, 0.2);
  transition:
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 200ms;
}
.bh-item:hover .bh-icon { transform: scale(1.06); background: var(--bh-brass-light); }
.bh-item:active .bh-icon { transform: scale(0.92); }
.bh-icon svg { width: 19px; height: 19px; }
@media (min-width: 880px) {
  .bh-icon { width: 50px; height: 50px; }
  .bh-icon svg { width: 20px; height: 20px; }
}

/* ─── Bell host (positioning context for rings + button) ─── */
.bell-host {
  position: relative;
  width: 60px; height: 60px;
}
@media (min-width: 880px) {
  .bell-host { width: 66px; height: 66px; }
}

/* ─── Sound-wave rings (emanate on ding) ─── */
.bell-rings {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bell-rings span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--bh-brass);
  opacity: 0;
  transform-origin: center;
}
.bellhop.dinging .bell-rings span:nth-child(1) {
  animation: bh-ring 540ms cubic-bezier(0.15, 0.7, 0.25, 1) forwards;
}
.bellhop.dinging .bell-rings span:nth-child(2) {
  animation: bh-ring 640ms cubic-bezier(0.15, 0.7, 0.25, 1) 90ms forwards;
}
@keyframes bh-ring {
  0%   { transform: scale(1);   opacity: 0.65; border-width: 2.5px; }
  60%  {                        opacity: 0.25; }
  100% { transform: scale(2.4); opacity: 0;    border-width: 0.5px; }
}

/* ─── Bell button ─── */
.bell-btn {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50%;             /* only round element on the page */
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: white;
  background: var(--bh-brass);    /* flat — no gradient */
  box-shadow:
    0 10px 24px -8px rgba(14, 20, 28, 0.32),
    0 4px 8px -2px rgba(14, 20, 28, 0.2);
  outline: none;
  transition: background 200ms ease, box-shadow 280ms ease;
}
.bell-btn:hover {
  background: var(--bh-brass-dark);
  box-shadow:
    0 12px 28px -8px rgba(14, 20, 28, 0.4),
    0 6px 10px -2px rgba(14, 20, 28, 0.25);
}
.bell-btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--bh-paper),
    0 0 0 5px var(--bh-brass),
    0 10px 24px -8px rgba(14, 20, 28, 0.32);
}

/* Squash on ding — snappy spring */
.bellhop.dinging .bell-btn {
  animation: bh-press 380ms cubic-bezier(0.34, 1.5, 0.4, 1);
}
@keyframes bh-press {
  0%   { transform: scale(1, 1); }
  18%  { transform: scale(1.06, 0.86); }
  42%  { transform: scale(0.96, 1.05); }
  68%  { transform: scale(1.02, 0.98); }
  100% { transform: scale(1, 1); }
}

/* Open state — brass → forest green */
.bellhop.open .bell-btn {
  background: var(--bh-forest);
  box-shadow:
    0 10px 24px -8px rgba(14, 20, 28, 0.45),
    0 4px 8px -2px rgba(14, 20, 28, 0.25);
}

/* Icon cross-fade (bell ↔ X) */
.bell-icon, .close-icon {
  position: absolute;
  transition:
    opacity 200ms ease,
    transform 320ms cubic-bezier(0.5, 1.6, 0.4, 1);
  color: white;
}
.bell-icon  { opacity: 1; transform: scale(1)   rotate(0); }
.close-icon { opacity: 0; transform: scale(0.4) rotate(-90deg); }
.bellhop.open .bell-icon  { opacity: 0; transform: scale(0.4) rotate(90deg); }
.bellhop.open .close-icon { opacity: 1; transform: scale(1)   rotate(0); }

.bell-icon  { width: 26px; height: 26px; }
.close-icon { width: 22px; height: 22px; }
@media (min-width: 880px) {
  .bell-icon  { width: 28px; height: 28px; }
  .close-icon { width: 24px; height: 24px; }
}

/* Hide parent-theme back-to-top — Bellhop occupies the same corner */
.to-top { display: none !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bellhop.dinging .bell-btn,
  .bellhop.dinging .bell-rings span,
  .bh-item, .bell-icon, .close-icon,
  .bellhop-backdrop {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}