/* =========================================
   STICKY CTA
   ========================================= */

.mb-sticky-cta {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 12000;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 8px;

  border:
    1px solid rgba(219, 178, 99, 0.48);

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 40% 0%,
      rgba(156, 30, 45, 0.42),
      transparent 55%
    ),
    rgba(57, 5, 12, 0.95);

  box-shadow:
    0 18px 55px rgba(21, 4, 7, 0.34);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;

  transform:
    translateY(18px)
    scale(0.97);

  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(.2,.75,.25,1),
    visibility 220ms ease;
}


.mb-sticky-cta.is-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  visibility: visible;
  pointer-events: auto;
}


/* Маленькая подпись на десктопе */

.mb-sticky-cta__text {
  padding-left: 11px;

  color: rgba(242, 220, 176, 0.78);

  font-family: var(--mb-sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;

  letter-spacing: 0.14em;
  text-transform: uppercase;

  white-space: nowrap;
}


.mb-sticky-cta__button {
  position: relative;

  min-height: 54px;

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

  padding:
    0
    27px;

  border:
    1px solid rgba(244, 216, 155, 0.80);

  border-radius: 5px;

  color: #2a170d;

  background:
    linear-gradient(
      135deg,
      #f3dda6 0%,
      #d0a354 48%,
      #efd394 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 8px 24px rgba(181, 132, 55, 0.16);

  font-family: var(--mb-sans);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.10em;
  text-transform: uppercase;

  cursor: pointer;

  overflow: hidden;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


.mb-sticky-cta__button::before {
  content: "";

  position: absolute;
  inset: 1px;

  border:
    1px solid rgba(255,255,255,0.18);

  border-radius: 4px;

  pointer-events: none;
}


.mb-sticky-cta__button:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 12px 30px rgba(181, 132, 55, 0.22);
}


.mb-sticky-cta__button:active {
  transform: translateY(0);
}


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

@media (max-width: 700px) {

  .mb-sticky-cta {
    left: 10px;
    right: 10px;

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );

    width: auto;

    padding: 6px;

    border-radius: 9px;

    transform:
      translateY(22px)
      scale(0.985);
  }


  .mb-sticky-cta.is-visible {
    transform:
      translateY(0)
      scale(1);
  }


  .mb-sticky-cta__text {
    display: none;
  }


  .mb-sticky-cta__button {
    width: 100%;

    min-height: 55px;

    padding:
      0
      18px;

    font-size: 12px;
    letter-spacing: 0.105em;
  }

}


/* Очень узкие телефоны */

@media (max-width: 380px) {

  .mb-sticky-cta {
    left: 7px;
    right: 7px;
    bottom: 7px;
  }


  .mb-sticky-cta__button {
    min-height: 52px;

    font-size: 11px;
  }

}


/* Accessibility */

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

  .mb-sticky-cta,
  .mb-sticky-cta__button {
    transition: none;
  }

}