/* =========================================================
   GLOBAL FLOATING ACTION POSITION
   Shared vertical alignment for WhatsApp + Contribute
   ========================================================= */

:root {
  --floating-action-bottom-offset: 5rem;
}


/* =========================================================
   FLOATING CONTRIBUTE BUTTON
   Bottom-right
   ========================================================= */

.contribute-float {
  position: fixed;

  right: clamp(1rem, 3vw, 2rem);
  left: auto;

  bottom: calc(
    var(--floating-action-bottom-offset) +
    env(safe-area-inset-bottom)
  );

  z-index: 950;

  min-height: 54px;

  display: inline-flex;
  align-items: center;

  /* padding: 0 0 0 19px; */
  padding: 0 0 0 15px;

  color: #ffffff;
  background: #c90000;

  border-radius: 999px;

  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.3);

  isolation: isolate;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   HOVER / FOCUS
   ========================================================= */

.contribute-float:hover,
.contribute-float:focus-visible {
  color: #ffffff;

  background: #b50000;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.35);

  transform: translateY(-3px);

  text-decoration: none;
}


.contribute-float:focus {
  color: #ffffff;
  text-decoration: none;
}


.contribute-float:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}


/* =========================================================
   LABEL
   ========================================================= */

.contribute-float__label {
  padding-right: 14px;

  color: #ffffff;

  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  white-space: nowrap;

  font-family: Tahoma, Verdana, sans-serif;
}


/* =========================================================
   HEART ICON AREA
   ========================================================= */

.contribute-float__icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;

  border-radius: 50%;
}


/* ---------------------------------------------------------
   Inline SVG or external transparent SVG image
   --------------------------------------------------------- */

.contribute-float__icon svg,
.contribute-float__icon img {
  display: block;

  width: 31px;
  height: 31px;

  object-fit: contain;
}


.contribute-float__icon svg {
  fill: #c90000;

  transition:
    fill 0.2s ease,
    transform 0.2s ease;
}


.contribute-float:hover
.contribute-float__icon svg {
  fill: #b50000;

  transform: scale(1.05);
}


.contribute-float:hover
.contribute-float__icon img {
  transform: scale(1.05);
}


/* =========================================================
   ACTIVE STATE
   ========================================================= */

.contribute-float:active {
  transform: translateY(0);

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   PERIODIC ATTENTION RING
   ========================================================= */

.contribute-float::after {
  content: "";

  position: absolute;

  inset: -6px;

  z-index: -1;

  border:
    2px solid rgba(201, 0, 0, 0.75);

  border-radius: inherit;

  opacity: 0;

  pointer-events: none;

  animation:
    contribute-attention-ring
    0.9s
    ease-out
    infinite;
}


@keyframes contribute-attention-ring {

  0%,
  70%,
  100% {
    opacity: 0;
    transform: scale(0.94);
  }

  76% {
    opacity: 0.8;
    transform: scale(1);
  }

  92% {
    opacity: 0;
    transform: scale(1.18);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  :root {
    --floating-action-bottom-offset: 4.5rem;
  }


  .contribute-float {
    right: 1rem;
    left: auto;

    min-height: 48px;

    padding-left: 15px;
  }


  .contribute-float__label {
    padding-right: 11px;

    font-size: 0.78rem;
  }


  .contribute-float__icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;
  }


  .contribute-float__icon svg,
  .contribute-float__icon img {
    width: 27px;
    height: 27px;
  }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 380px) {

  .contribute-float {
    right: 10px;

    min-height: 44px;

    padding-left: 13px;
  }


  .contribute-float__label {
    padding-right: 9px;

    font-size: 0.72rem;

    letter-spacing: 0.015em;
  }


  .contribute-float__icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;
  }


  .contribute-float__icon svg,
  .contribute-float__icon img {
    width: 24px;
    height: 24px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contribute-float,
  .contribute-float__icon svg,
  .contribute-float__icon img {
    transition: none;
  }


  .contribute-float::after {
    animation: none;
  }

}