/* Desktop Services menu: one narrow vertical card under the Services button, with the service names only.
   Overrides the wide grid in public/css/navbar.css (that file is left untouched). */
.rs-nav .rs-menu {
  left: var(--menu-x, 50%);
  width: 280px;
  padding: 10px;
}
.rs-nav .rs-menu::before {
  left: 50%;
}
.rs-nav .rs-menu__grid {
  grid-template-columns: 1fr;
  gap: 2px;
}
.rs-menu__card {
  padding: 12px 14px;
}
.rs-menu__card-title {
  font-weight: 500;
}
/* The small floating button that reopens the quiz (loaded with the page; the quiz card itself loads on demand). */
.qz-fab {
  --qz-black: var(--primitive-black, #0a0a0a);
  --qz-white: var(--primitive-white, #fff);
  font-family: inherit;
  box-sizing: border-box;
}
.qz-fab {
  position: fixed;
  z-index: 940;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 2px solid var(--qz-black);
  border-radius: 999px;
  background: var(--qz-black);
  color: var(--qz-white);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  transition:
    background-color 0.2s,
    color 0.2s;
  animation: qz-in 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
.qz-fab:hover {
  background: var(--qz-white);
  color: var(--qz-black);
}

.qz-fab:focus-visible {
  outline: 2px solid var(--qz-black);
  outline-offset: 2px;
}
@keyframes qz-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 743px) {
  .qz-fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }
}
@media (prefers-reduced-motion: reduce) {
  .qz-fab {
    animation: none;
  }
}
/* Floating Our Story button: same column as the WhatsApp button (.wa-fab), one button height plus a gap above it.
   The bottom offset is the WhatsApp button's (it already rises above the quiz via --qz-stack) + its height + 12px. */
.os-fab {
  position: fixed;
  z-index: 930;
  right: 16px;
  bottom: calc(max(16px, var(--qz-stack, 0px)) + 56px + 12px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primitive-black, #0a0a0a);
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition:
    bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 0.2s;
}
.os-fab:hover {
  transform: translateY(-2px);
}
.os-fab:focus-visible {
  outline: 2px solid var(--primitive-black, #0a0a0a);
  outline-offset: 3px;
}
/* label that slides out to the left on hover or keyboard focus (the link has its own aria-label) */
.os-fab__tip {
  position: absolute;
  right: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--primitive-black, #0a0a0a);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.os-fab:hover .os-fab__tip,
.os-fab:focus-visible .os-fab__tip {
  opacity: 1;
}
@media (max-width: 743px) {
  .os-fab {
    right: 12px;
    bottom: calc(max(calc(12px + env(safe-area-inset-bottom, 0px)), var(--qz-stack, 0px)) + 52px + 12px);
    width: 52px;
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .os-fab,
  .os-fab__tip {
    transition: none;
  }
}
@media print {
  .os-fab {
    display: none;
  }
}
/* Floating WhatsApp button: bottom-right, in WhatsApp's own green. It sits above the quiz: above the "Find my service" button, and when the
   quiz card is open it moves up above the card (QuizLauncher sets --qz-stack to the distance from the bottom of the screen to the top of whatever the quiz occupies, plus a small gap). */
.wa-fab {
  position: fixed;
  z-index: 930;
  right: 16px;
  bottom: max(16px, var(--qz-stack, 0px));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition:
    bottom 0.35s cubic-bezier(0.165, 0.84, 0.44, 1),
    background-color 0.2s,
    transform 0.2s;
}
.wa-fab:hover {
  background: #1fb855;
  transform: translateY(-2px);
}
.wa-fab:focus-visible {
  outline: 2px solid var(--primitive-black, #0a0a0a);
  outline-offset: 3px;
}
@media (max-width: 743px) {
  .wa-fab {
    right: 12px;
    bottom: max(calc(12px + env(safe-area-inset-bottom, 0px)), var(--qz-stack, 0px));
    width: 52px;
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab {
    transition: none;
  }
}
@media print {
  .wa-fab {
    display: none;
  }
}