.lumi-referral-sponsor {
  position: fixed;
  right: clamp(16px, 2.5vw, 34px);
  bottom: clamp(16px, 2.5vw, 30px);
  z-index: 2147483000;
  width: min(340px, calc(100vw - 32px));
  padding: 17px 19px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  border: 1px solid rgba(208, 145, 95, 0.72);
  border-radius: 15px;
  color: #f6f0e8;
  background: linear-gradient(145deg, rgba(3, 28, 39, 0.94), rgba(1, 16, 25, 0.96));
  box-shadow: 0 18px 48px rgba(0, 8, 14, 0.42), inset 0 1px rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-family: Inter, Arial, sans-serif;
  isolation: isolate;
}

.lumi-referral-sponsor__avatar {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(226, 173, 128, 0.75);
  border-radius: 50%;
  color: #07141b;
  background: linear-gradient(135deg, #f4d0b4, #b77650);
  font: 600 15px/1 Georgia, serif;
  letter-spacing: 0.04em;
}

.lumi-referral-sponsor__copy { min-width: 0; }
.lumi-referral-sponsor__copy small {
  display: block;
  margin-bottom: 4px;
  color: #d59b78;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}

.lumi-referral-sponsor__copy strong {
  display: block;
  overflow: hidden;
  color: #f8f2eb;
  font: 400 21px/1.15 Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lumi-referral-sponsor__copy span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #a9bdc2;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lumi-referral-sponsor {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 24px);
    padding: 14px 16px;
  }

  /* Keep the attribution visible without covering whichever Lumi navigation
     owns the bottom edge in this part of the buying journey. */
  body:has(.lumi-mobile-bottom) .lumi-referral-sponsor {
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  }

  body:has(.lumi-react-mobile-bottom) .lumi-referral-sponsor {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body:has([data-lumi-member-shell="true"]) .lumi-referral-sponsor {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lumi-referral-sponsor { animation: lumi-referral-sponsor-in 280ms ease-out both; }
  @keyframes lumi-referral-sponsor-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}