/* ==========================================================================
   Clayi Toastr
   Version: 1.1.2
   Description: Modern, high-contrast, standalone styles for Clayi Toastr.
   ========================================================================== */
*, ::before, ::after { box-sizing: border-box; }
.clayi-toasts { position: fixed; display: flex; flex-direction: column; font-family: inherit; top: 0; right: 0; padding: 12px; height: 0; width: 340px; max-width: 95vw; z-index: 9999999; pointer-events: none; }
.clayi-toast { pointer-events: auto; position: relative; width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.22); overflow: hidden; margin-bottom: 12px; flex-shrink: 0; animation-name: toast; }
.clayi-toast-bottom-right { top: auto; bottom: 0; flex-direction: column-reverse; }
.clayi-toast-top-left { top: 0; left: 0; right: auto; }
.clayi-toast-bottom-left { top: auto; right: auto; left: 0; bottom: 0; flex-direction: column-reverse; }
.clayi-toast-top-center { right: 50%; transform: translateX(50%); }
.clayi-toast-bottom-center { top: auto; right: 50%; bottom: 0; transform: translateX(50%); flex-direction: column-reverse; }
.clayi-toast-bottom-right .clayi-toast, .clayi-toast-bottom-left .clayi-toast { margin-top: 12px; margin-bottom: 0; }
.clayi-toast-top-left .clayi-toast, .clayi-toast-bottom-left .clayi-toast { right: auto; left: 0; animation-name: toastLeft; }
.clayi-toast-top-center .clayi-toast, .clayi-toast-bottom-center .clayi-toast { animation-name: toastCenter; }
.close-animation { right: -115% !important; opacity: 0 !important; }
.clayi-toast-top-left .close-animation, .clayi-toast-bottom-left .close-animation { right: auto !important; left: -115% !important; opacity: 0 !important; }
.clayi-toast-top-center .close-animation, .clayi-toast-bottom-center .close-animation { transform: scale(0) !important; opacity: 0 !important; }
.clayi-toast-content { display: flex; align-items: center; padding: 16px 20px; color: #ffffff !important; }
.clayi-toast-auto-close .clayi-toast-content { padding-bottom: 22px; }
.clayi-toast, .clayi-toast *, body.light-mode .clayi-toast, body.light-mode .clayi-toast * { color: #ffffff !important; }
.clayi-toast-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid #ffffff; border-radius: 50%; background-color: rgba(255, 255, 255, 0.18); background-size: 17px 17px; background-position: center; background-repeat: no-repeat; margin-inline-end: 14px; flex-shrink: 0; }
.clayi-toast-title { color: #ffffff !important; font-size: 15px; font-weight: 700; letter-spacing: 0.2px; margin: 0 0 4px 0; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.clayi-toast-text { color: #ffffff !important; font-size: 13.5px; font-weight: 500; line-height: 1.45; opacity: 0.98; margin: 0; word-break: break-word; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.clayi-toast-close { position: absolute !important; top: 10px !important; right: 10px !important; inset-inline-end: 10px !important; background: transparent !important; outline: none !important; border: 0 !important; cursor: pointer !important; width: 24px !important; height: 24px !important; background-size: 16px 16px !important; background-position: center center !important; background-repeat: no-repeat !important; opacity: 0.85 !important; transition: opacity 0.2s ease, transform 0.2s ease !important; z-index: 99 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; line-height: 1 !important; }
.clayi-toast-close:hover { opacity: 1 !important; transform: scale(1.15) !important; }
.clayi-toast-progress { position: absolute !important; bottom: 0 !important; left: 0 !important; inset-inline-start: 0 !important; height: 4px !important; width: 0; background-color: rgba(255, 255, 255, 0.65) !important; border-radius: 2px !important; z-index: 50 !important; pointer-events: none !important; }
.clayi-toast.clayi-toast-success { background: linear-gradient(135deg, #1fa84f 0%, #178a3f 100%) !important; background-color: #1fa84f !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.clayi-toast.clayi-toast-error { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; background-color: #ef4444 !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.clayi-toast.clayi-toast-info { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important; background-color: #0ea5e9 !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.clayi-toast.clayi-toast-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; background-color: #d97706 !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.clayi-toast-close-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important; }
.clayi-toast-success-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; }
.clayi-toast-error-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important; }
.clayi-toast-info-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") !important; }
.clayi-toast-warning-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E") !important; }
@keyframes toast { 0% { right: -110%; opacity: 0; } 100% { right: 0; opacity: 1; } }
@keyframes toastLeft { 0% { left: -110%; opacity: 0; } 100% { left: 0; opacity: 1; } }
@keyframes toastCenter { 0% { transform: scale(0.6) translateX(50%); opacity: 0; } 100% { transform: scale(1) translateX(50%); opacity: 1; } }