.kpccs-toast-region { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 999999; display: grid; width: min(390px, calc(100vw - 44px)); pointer-events: none; } .kpccs-toast { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 12px; min-width: 0; padding: 14px 13px 14px 15px; color: #681c32; background: #f1e4b2; border: 1px solid #681c32; border-radius: 16px; box-shadow: 0 18px 48px rgba(104, 28, 50, .18); font-family: "aktiv-grotesk", "Aktiv Grotesk", sans-serif; font-size: 15px; line-height: 1.4; opacity: 0; pointer-events: auto; transform: translate3d(0, 16px, 0) scale(.98); transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1); } .kpccs-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .kpccs-toast.is-leaving { opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); } .kpccs-toast__icon { width: 34px; height: 34px; display: grid; place-items: center; color: #f1e4b2; background: #681c32; border-radius: 50%; font-size: 17px; font-weight: 800; } .kpccs-toast__message { min-width: 0; margin: 0; overflow-wrap: break-word; font-weight: 650; } .kpccs-toast__close { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #681c32; background: transparent; border: 0; border-radius: 50%; font: inherit; font-size: 23px; line-height: 1; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } .kpccs-toast__close:hover { color: #681c32; background: rgba(104, 28, 50, .1); } .kpccs-toast__close:focus-visible { outline: 2px solid #681c32; outline-offset: 2px; } @media (max-width: 600px) { .kpccs-toast-region { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right))); } .kpccs-toast { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 10px; padding: 13px 11px 13px 13px; border-radius: 14px; } .kpccs-toast__icon, .kpccs-toast__close { width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .kpccs-toast, .kpccs-toast__close { transition: none; } }