.micuba-fomo {
  position: fixed;
  z-index: 99990;
  bottom: 22px;
  width: min(410px, calc(100vw - 32px));
  border: 1px solid rgba(30, 25, 18, .09);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(33, 24, 18, .16);
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, 18px, 0);
  transition: opacity .26s ease, transform .26s ease;
  font-family: PolySans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.micuba-fomo--left { left: 22px; }
.micuba-fomo--right { right: 22px; }
.micuba-fomo.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.micuba-fomo.is-leaving { opacity: 0; transform: translate3d(0, 10px, 0); }
.micuba-fomo.is-visible.is-hovered { transform: translate3d(0, -5px, 0) scale(1.012); box-shadow: 0 22px 50px rgba(33, 24, 18, .2); }

.micuba-fomo__link {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 98px;
  padding: 13px 42px 13px 13px;
  color: #171717;
  text-decoration: none;
}

.micuba-fomo__image {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 11px;
  object-fit: cover;
  background: #f4f1ed;
}

.micuba-fomo__content { display: block; min-width: 0; }
.micuba-fomo__person { display: block; overflow: hidden; color: #171717; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.micuba-fomo__purchase { display: block; overflow: hidden; margin-top: 2px; color: #171717; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.micuba-fomo__purchase b { color: #ef4d16; font-weight: 500; }
.micuba-fomo small { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #837b74; font-size: 12px; line-height: 1.25; }
.micuba-fomo__verified { display: inline-grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #15803d; color: #fff; font-size: 10px; font-weight: 700; }

.micuba-fomo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8d857d;
  font: 400 21px/1 system-ui, sans-serif;
  cursor: pointer;
}

.micuba-fomo__close:hover,
.micuba-fomo__close:focus-visible { background: #f5f2ee; color: #171717; outline: none; }

@media (max-width: 600px) {
  .micuba-fomo { right: 16px; bottom: 16px; left: 16px; width: auto; border-radius: 14px; }
  .micuba-fomo__link { min-height: 88px; padding: 11px 38px 11px 11px; }
  .micuba-fomo__image { width: 64px; height: 64px; flex-basis: 64px; }
  .micuba-fomo strong { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .micuba-fomo { transition: opacity .01ms linear; transform: none; }
  .micuba-fomo.is-visible { transform: none; }
}
