/* ═══════════════════════════════════════════════════════
   TRENDY TAILS BY TOMI — Shared Stylesheet (entry)
   Boutique Dog-Grooming Salon · trendytails.ch

   Split for maintainability (was a 1160-line monolith):
     base.css       — fonts, structural tokens, reset, document chrome
     layout.css     — container, sections, nav, hero
     components.css — buttons, cards, forms, bento, footer, pages
     themes.css     — GENERATED colour/font/radius tokens (Admin > Brand)
   Pages keep linking only style.css + themes.css.
   ═══════════════════════════════════════════════════════ */

@import url("base.css");
@import url("layout.css");
@import url("components.css");

/* ── Floating WhatsApp contact button ─────────────────────────────
   Fixed bottom-right FAB; sits above the cookie notice banner. */
.wa-fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.wa-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45),
              0 3px 8px rgba(0, 0, 0, 0.2);
}
.wa-fab:active { transform: translateY(-1px) scale(0.98); }
.wa-fab svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}