/**
 * CUTIS Theme — Global sticky "Book Appointment" button.
 * Renders on every page (template-parts/global/sticky-cta.php, called from
 * footer.php), unlike the single-service section styles which only load on
 * is_singular('service') pages - so this file is enqueued unconditionally
 * in functions.php, the same way header.css/footer.css are.
 *
 * .sticky-cta__button's declarations are a deliberate DUPLICATE of
 * .btn-cutis (base, assets/css/single-service-doctor-video.css) +
 * .btn-cutis-primary (color variant, assets/css/single-service-final-
 * cta.css) rather than reusing those classes directly - both of those
 * files are only enqueued on service pages, and loading either one
 * site-wide just for this one button would pull in a lot of unrelated
 * doctor-video/final-cta-specific CSS. Built from the same --cutis-button-*
 * tokens those rules use, so it stays visually identical and in sync
 * automatically if the tokens change in Theme Settings. If .btn-cutis /
 * .btn-cutis-primary's own declarations (not just their token values) are
 * ever edited directly in those files, mirror the change here too.
 */

.sticky-cta {
  position: fixed;
  right: max(var(--cutis-space-md), env(safe-area-inset-right));
  bottom: max(var(--cutis-space-md), env(safe-area-inset-bottom));
  z-index: 500;
}

.sticky-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--cutis-button-radius);
  font-family: var(--cutis-font-body);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  background: var(--cutis-button-bg);
  color: var(--cutis-button-text);
  border-color: var(--cutis-button-bg);
  box-shadow: 0 8px 20px rgba(15, 43, 61, 0.18);
}

.sticky-cta__button:hover {
  background: var(--cutis-button-bg-hover);
  border-color: var(--cutis-button-bg-hover);
}

/* Tighter edge offset on narrow phones so the button doesn't crowd the
   viewport edge or a screen's rounded corners; still comfortably clear of
   any future floating widget (e.g. a WhatsApp chat bubble) added on the
   opposite or same corner later, since this stays a compact bottom-right
   pill rather than a full-width bar. */
@media (max-width: 480px) {
  .sticky-cta {
    right: max(var(--cutis-space-sm), env(safe-area-inset-right));
    bottom: max(var(--cutis-space-sm), env(safe-area-inset-bottom));
  }

  .sticky-cta__button {
    padding: 10px 18px;
    font-size: 14px;
  }
}