/* ========================================================================== EXCLUSIVE BESPOKE JQUERY TOAST NOTIFICATION SYSTEM Ultra-modern floating glassmorphism, dynamic glowing gradients, crisp vector SVG badges, and smooth spring physics. ========================================================================== */ .jq-toast-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; position: fixed !important; max-width: 94vw !important; min-width: 320px !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; letter-spacing: normal !important; z-index: 99999999 !important; } .jq-toast-wrap * { box-sizing: border-box !important; } /* Centered Top Placement (Mobile & Desktop) */ .jq-toast-wrap, .jq-toast-wrap.top-right, .jq-toast-wrap.top-left { top: 20px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } .jq-toast-wrap.bottom-right, .jq-toast-wrap.bottom-left { bottom: 20px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } /* Base Toast Card */ .jq-toast-single { display: block !important; position: relative !important; pointer-events: all !important; overflow: hidden !important; width: auto !important; min-width: 320px !important; max-width: 480px !important; margin: 0 0 12px 0 !important; padding: 16px 22px 16px 68px !important; border-radius: 18px !important; font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; color: #FFFFFF !important; opacity: 1 !important; background-position: 18px center !important; background-repeat: no-repeat !important; background-size: 38px 38px !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important; animation: jqToastSpringIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; } @keyframes jqToastSpringIn { 0% { opacity: 0; transform: translateY(-24px) scale(0.92); } 60% { opacity: 1; transform: translateY(3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .jq-toast-single:hover { transform: translateY(-2px) scale(1.01) !important; } /* Glass Specular Shine */ .jq-toast-single::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 48% !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 100%) !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; pointer-events: none !important; } .jq-toast-single h2 { font-family: 'Hind Siliguri', 'Inter', -apple-system, sans-serif !important; font-size: 14.5px !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.2px !important; margin: 0 0 2px 0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important; position: relative !important; z-index: 2 !important; } .jq-toast-single { font-size: 14px !important; font-weight: 600 !important; line-height: 1.5 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important; } .jq-toast-single a { color: #ffffff !important; text-decoration: underline !important; font-weight: 700 !important; } /* Modern Close Button */ .close-jq-toast-single { position: absolute !important; top: 12px !important; right: 12px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.16) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; opacity: 0.8 !important; text-shadow: none !important; cursor: pointer !important; transition: all 0.2s ease !important; z-index: 3 !important; } .close-jq-toast-single:hover { background: rgba(255, 255, 255, 0.35) !important; opacity: 1 !important; transform: rotate(90deg) scale(1.08) !important; } /* Glowing Progress Bar */ .jq-toast-loader { display: block !important; position: absolute !important; bottom: 0 !important; top: auto !important; left: 0 !important; height: 3.5px !important; border-radius: 0 0 18px 18px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%) !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important; z-index: 3 !important; } /* ========================================================================== VARIANTS ========================================================================== */ /* 1. ERROR */ .jq-icon-error { background-color: transparent !important; background-image: url('data:image/svg+xml;utf8,'), linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%) !important; border: 1px solid rgba(254, 202, 202, 0.35) !important; box-shadow: 0 16px 36px -6px rgba(220, 38, 38, 0.48), 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .jq-icon-error:hover { box-shadow: 0 22px 46px -6px rgba(220, 38, 38, 0.58), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } /* 2. SUCCESS */ .jq-icon-success { background-color: transparent !important; background-image: url('data:image/svg+xml;utf8,'), linear-gradient(135deg, #10b981 0%, #059669 50%, #065f46 100%) !important; border: 1px solid rgba(167, 243, 208, 0.35) !important; box-shadow: 0 16px 36px -6px rgba(16, 185, 129, 0.48), 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .jq-icon-success:hover { box-shadow: 0 22px 46px -6px rgba(16, 185, 129, 0.58), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } /* 3. WARNING */ .jq-icon-warning { background-color: transparent !important; background-image: url('data:image/svg+xml;utf8,'), linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%) !important; border: 1px solid rgba(253, 230, 138, 0.35) !important; box-shadow: 0 16px 36px -6px rgba(217, 119, 6, 0.48), 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .jq-icon-warning:hover { box-shadow: 0 22px 46px -6px rgba(217, 119, 6, 0.58), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } /* 4. INFO */ .jq-icon-info { background-color: transparent !important; background-image: url('data:image/svg+xml;utf8,'), linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%) !important; border: 1px solid rgba(191, 219, 254, 0.35) !important; box-shadow: 0 16px 36px -6px rgba(37, 99, 235, 0.48), 0 6px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; } .jq-icon-info:hover { box-shadow: 0 22px 46px -6px rgba(37, 99, 235, 0.58), 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important; } @media all and (max-width: 480px) { .jq-toast-wrap { top: 14px !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } .jq-toast-single { width: 100% !important; min-width: unset !important; padding: 14px 18px 14px 62px !important; border-radius: 16px !important; background-position: 14px center !important; background-size: 34px 34px !important; font-size: 13.5px !important; } }