/* ==========================================================================
   Á CHÂU ELECTRIC — BRAND DESIGN SYSTEM
   10 · FLOATING CONTACT (Zalo + phone)
   --------------------------------------------------------------------------
   Always-available contact stack, rendered by
   inc/achau-components.php → achau_render_floating_contact() on every page.

   Design rules honoured here:
     · light-first: the pills are white with a hairline border and a soft shadow,
       so they read as a tool on the white page instead of a neon badge;
     · Zalo is recognisable through icon + the visible "Zalo" label + the number;
     · touch targets are 48 px (≥ 44 px requirement) on every breakpoint;
     · the stack sits above content but BELOW the sticky header (900) and BELOW
       the mobile drawer (1000), and it never covers the cookie/notice area —
       there is no overlay rule that could trap it;
     · the back-to-top control was moved to the bottom-left (06-footer.css) so
       the two never overlap.
   ========================================================================== */

.ae-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--ae-z-float);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.ae-float__btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ae-line-strong);
  background: var(--ae-tone-0);
  color: var(--ae-text);
  font-family: var(--ae-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--ae-shadow-2);
  transition: background-color var(--ae-transition), color var(--ae-transition), border-color var(--ae-transition),
    transform var(--ae-transition);
}
.ae-float__btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.ae-float__btn:hover,
.ae-float__btn:focus-visible {
  transform: translateY(-2px);
}
.ae-float__btn--zalo {
  color: var(--ae-blue);
  border-color: rgba(4, 76, 252, 0.32);
  background: var(--ae-tone-0);
}
.ae-float__btn--zalo:hover,
.ae-float__btn--zalo:focus-visible {
  background: var(--ae-blue);
  color: var(--ae-on-blue);
  border-color: var(--ae-blue);
}
.ae-float__btn--call {
  background: var(--ae-orange);
  border-color: var(--ae-orange);
  color: var(--ae-on-orange);
}
.ae-float__btn--call:hover,
.ae-float__btn--call:focus-visible {
  background: var(--ae-gold);
  border-color: var(--ae-gold);
  color: var(--ae-on-gold);
}

/* Pointer-coarse devices (phones/tablets): slightly larger pills, still compact
   enough not to cover content at 390 px. */
@media (max-width: 767px) {
  .ae-float {
    right: 12px;
    bottom: 12px;
    gap: 8px;
  }
  .ae-float__btn {
    min-height: 48px;
    padding: 0 14px 0 10px;
    font-size: 0.75rem;
  }
  .ae-float__btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Very narrow phones: keep the label (recognition matters more than compactness)
   but tighten the paddings, and keep both pills inside 44 px targets. */
@media (max-width: 359px) {
  .ae-float__btn {
    min-height: 46px;
    padding: 0 12px 0 8px;
    font-size: 0.6875rem;
    gap: 6px;
  }
}

/* Respect reduced-motion preferences (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .ae-float__btn {
    transition: none !important;
  }
  .ae-float__btn:hover,
  .ae-float__btn:focus-visible {
    transform: none;
  }
}