/*
 * Fagora Piscinas — floating contact bubble (see quick-contact.js)
 *
 * Loaded by every public page, including legal.html, which defines only a
 * few of the site's custom properties - so every token here carries its
 * fallback value.
 */
/* A phone bubble pinned bottom right. Opening it fans out two options from
   its centre: Call rises above it, WhatsApp slides out to its left. Each
   option keeps its icon nearest the bubble and its label reaching outward,
   so both read as coming out of it. */
.quick-contact {
  --bubble: 3.75rem;
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 35;
  transition: bottom 0.3s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.quick-contact-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--bubble);
  height: var(--bubble);
  border-radius: 50%;
  background: var(--ink, #0b314a);
  color: var(--white, #fff);
  /* The white ring keeps the navy bubble visible over dark sections too. */
  box-shadow:
    0 0 0 3px var(--white, #fff),
    0 10px 24px -8px rgba(11, 49, 74, 0.55);
  transition:
    background-color 0.2s,
    transform 0.2s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.quick-contact-toggle:hover {
  background: var(--teal, #005765);
}
.quick-contact-toggle:active {
  transform: scale(0.94);
}
.quick-contact-icon {
  grid-area: 1 / 1;
  display: grid;
  transition:
    opacity 0.2s,
    transform 0.3s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}
.quick-contact-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}
.quick-contact-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
.quick-contact.is-open .quick-contact-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}
.quick-contact.is-open .quick-contact-close {
  opacity: 1;
  transform: none;
}
.quick-contact.is-open .quick-contact-toggle {
  background: var(--teal, #005765);
}

.quick-option {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border-radius: 2rem;
  background: var(--white, #fff);
  color: var(--ink, #0b314a);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(11, 49, 74, 0.45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform 0.32s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    visibility 0s linear 0.32s;
}
.quick-option:hover {
  box-shadow:
    0 10px 24px -10px rgba(11, 49, 74, 0.45),
    inset 0 0 0 1px var(--aqua, #3cc3c6);
}
.quick-option-icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
}
.quick-option-icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}
/* Call: directly above the bubble, its icon centred over the bubble's. */
.quick-option-call {
  right: calc((var(--bubble) - 3rem) / 2);
  bottom: calc(100% + 0.75rem);
  transform: translateY(1.25rem) scale(0.6);
  transform-origin: right bottom;
}
.quick-option-call .quick-option-icon {
  background: var(--pale, #ddf4f4);
  color: var(--teal, #005765);
}
/* WhatsApp: to the left of the bubble, on the same centre line. */
.quick-option-whatsapp {
  right: calc(100% + 0.75rem);
  bottom: calc((var(--bubble) - 3rem) / 2);
  transform: translateX(1.25rem) scale(0.6);
  transform-origin: right center;
}
.quick-option-whatsapp .quick-option-icon {
  background: #25d366;
  color: var(--white, #fff);
}
.quick-contact.is-open .quick-option {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.22s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    transform 0.32s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)),
    visibility 0s;
}
.quick-contact.is-open .quick-option-whatsapp {
  transition-delay: 0.05s;
}
.quick-contact[hidden] {
  display: none;
}
.quick-contact :is(button, a) {
  font: inherit;
  border: 0;
  cursor: pointer;
}
.quick-contact .icon {
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.quick-contact .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.quick-contact :focus-visible {
  outline: 3px solid var(--ink, #0b314a);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .quick-contact,
  .quick-contact * {
    transition: none !important;
  }
}
html[data-motion="reduced"] .quick-contact,
html[data-motion="reduced"] .quick-contact * {
  transition: none !important;
}
@media print {
  .quick-contact {
    display: none;
  }
}