/* Offer page social proof toasts: bottom left, one at a time (offer-toasts.js) */
.offer-toasts {
  position: fixed; left: 20px; bottom: var(--offer-toasts-bottom, 20px); z-index: 1040; /* over the sticky Osta bar, under modals */
  width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
.offer-toast {
  position: relative; display: flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 12px 40px 14px 12px; border-radius: 18px; pointer-events: auto;
  background: rgba(255, 255, 255, .92); color: #1d2420; font-size: 14.5px; line-height: 1.35;
  border: 1px solid rgba(16, 24, 18, .08);
  box-shadow: 0 18px 44px rgba(16, 24, 18, .18), 0 3px 10px rgba(16, 24, 18, .08);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transform: translate3d(-24px, 14px, 0) scale(.96); opacity: 0;
  transition: transform .5s cubic-bezier(.2, 1.3, .3, 1), opacity .35s ease;
}
.offer-toast[hidden] { display: none; }
.offer-toast.is-in { transform: none; opacity: 1; }
.offer-toast.is-out { transform: translate3d(-16px, 0, 0) scale(.97); opacity: 0; transition: transform .3s ease-in, opacity .3s ease-in; }
.offer-toast__tx strong { font-weight: 800; }
.offer-toast__ico {
  position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: #fff; font-size: 20px; background: linear-gradient(135deg, #18AE00 0%, #4CD964 100%);
}
/* a soft ring pulses once out of the icon as the toast lands */
.offer-toast__ico::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 currentColor; opacity: 0;
}
.offer-toast.is-in .offer-toast__ico::after { animation: offer-toast-ring 1.1s .25s ease-out 2; }
@keyframes offer-toast-ring {
  0% { box-shadow: 0 0 0 0 var(--ring); opacity: .55; }
  100% { box-shadow: 0 0 0 12px var(--ring); opacity: 0; }
}
.offer-toast.is-in .offer-toast__ico i { animation: offer-toast-pop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes offer-toast-pop { 0% { transform: scale(.4) rotate(-18deg); } 100% { transform: none; } }
.offer-toast--green .offer-toast__ico { --ring: rgba(24, 174, 0, .55); }
.offer-toast--orange .offer-toast__ico { --ring: rgba(255, 122, 0, .55); background: linear-gradient(135deg, #FF5E00 0%, #FFB000 100%); }
.offer-toast--red .offer-toast__ico { --ring: rgba(220, 37, 30, .55); background: linear-gradient(135deg, #DC251E 0%, #FF6A3D 100%); }
.offer-toast--blue .offer-toast__ico { --ring: rgba(10, 132, 255, .5); background: linear-gradient(135deg, #0A84FF 0%, #5AC8FA 100%); }
.offer-toast__x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: transparent; color: rgba(29, 36, 32, .45); font-size: 12px;
}
.offer-toast__x:hover, .offer-toast__x:focus-visible { background: rgba(16, 24, 18, .07); color: #1d2420; outline: 0; }
/* time left on this toast */
.offer-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #18AE00 0%, #4CD964 100%); transform: scaleX(0);
}
.offer-toast.is-in .offer-toast__bar { animation: offer-toast-bar var(--toast-ms, 6000ms) linear both; }
.offer-toast:hover .offer-toast__bar { animation-play-state: paused; }
@keyframes offer-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
[data-bs-theme="dark"] .offer-toast { background: rgba(32, 36, 34, .9); color: #f1f4f2; border-color: rgba(255, 255, 255, .08); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .offer-toast__x { color: rgba(241, 244, 242, .5); }
[data-bs-theme="dark"] .offer-toast__x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* phones: full width above the bottom bar (offer-toasts.js sets the height), a bit more compact */
@media (max-width: 767.98px) {
  .offer-toasts { left: 12px; right: 12px; width: auto; }
  .offer-toast { padding: 10px 38px 12px 10px; font-size: 14px; border-radius: 16px; }
  .offer-toast__ico { width: 38px; height: 38px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .offer-toast, .offer-toast.is-out { transition: opacity .2s; transform: none; }
  .offer-toast.is-in .offer-toast__ico::after, .offer-toast.is-in .offer-toast__ico i { animation: none; }
}