/* ============================================================
   Floating contact dock
   WhatsApp is always visible because it is where enquiries close.
   The rest stay collapsed so the dock never covers content on a
   phone, and expand on tap or hover.
   ============================================================ */

.dock{
  position:fixed; right:16px; bottom:16px; z-index:80;
  display:flex; flex-direction:column-reverse; align-items:center; gap:10px;
}
@media (min-width:600px){ .dock{ right:24px; bottom:24px; } }

.dock__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  box-shadow:0 6px 20px rgba(8,7,7,.4);
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.dock__btn svg{ width:26px; height:26px; fill:currentColor; }
.dock__btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.dock__btn--wa{ background:#1ebe5d; color:#06230f; }
.dock__btn--call{ background:var(--lagoon); color:#0c0b0b; }
.dock__btn--ig{ background:#12304f; color:#f7f5f2; }
.dock__btn--fb{ background:#1877f2; color:#fff; }

/* the collapsed stack */
.dock__more{
  display:flex; flex-direction:column-reverse; align-items:center; gap:10px;
  max-height:0; opacity:0; overflow:hidden; pointer-events:none;
  transition:max-height .3s var(--ease), opacity .25s var(--ease);
}
.dock.is-open .dock__more{
  max-height:240px; opacity:1; pointer-events:auto;
}

/* the toggle sits at the bottom, under WhatsApp */
.dock__toggle{
  order:-1;                       /* column-reverse puts this lowest */
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-2, #1c1a18); color:var(--paper);
  border:1px solid var(--line);
  transition:transform .3s var(--ease), background-color .2s;
}
.dock__toggle:hover{ background:var(--ink); }
.dock.is-open .dock__toggle{ transform:rotate(90deg); }

.dock__dots{ display:flex; flex-direction:column; gap:3px; }
.dock__dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; }

/* The dock is for visitors, not for the person managing enquiries. */
.panel .dock, body:has(.panel) .dock{ display:none; }

@media (prefers-reduced-motion:reduce){
  .dock__btn, .dock__more, .dock__toggle{ transition:none; }
}