/* ==========================================================================
   GlansToast — Ultra Premium Luxury Edition
   Inspired by high-end enterprise & luxury brand UI systems
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

   :root {
     /* Brand Colors — Rich & Saturated */
     --toast-success: #059669;
     --toast-error:   #dc2626;
     --toast-warning: #b45309;
     --toast-info:    #1d4ed8;
     --toast-confirm: #6d28d9;
   
     /* Subtle Tinted Backgrounds */
     --toast-success-bg:     #ecfdf5;
     --toast-error-bg:       #fef2f2;
     --toast-warning-bg:     #fffbeb;
     --toast-info-bg:        #eff6ff;
     --toast-confirm-bg:     #f5f3ff;
   
     /* Crisp Borders */
     --toast-success-border: #a7f3d0;
     --toast-error-border:   #fecaca;
     --toast-warning-border: #fde68a;
     --toast-info-border:    #bfdbfe;
     --toast-confirm-border: #ddd6fe;
   
     /* Typography */
     --toast-title-color: #0f172a;
     --toast-msg-color:   #475569;
   
     /* Shared */
     --toast-radius: 16px;
     --toast-shadow:
       0 0 0 1px rgba(0,0,0,0.04),
       0 2px 4px rgba(0,0,0,0.04),
       0 8px 16px rgba(0,0,0,0.06),
       0 24px 48px rgba(0,0,0,0.08);
     --toast-shadow-hover:
       0 0 0 1px rgba(0,0,0,0.06),
       0 4px 8px rgba(0,0,0,0.06),
       0 16px 32px rgba(0,0,0,0.10),
       0 32px 64px rgba(0,0,0,0.10);
   }
   
   /* ── Container ──────────────────────────────────────────────── */
   #toast-container {
     position: fixed;
     top: 24px;
     right: 24px;
     z-index: 99999;
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 380px;
     max-width: calc(100vw - 48px);
     pointer-events: none;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
   }
   
   /* ── Base Toast ─────────────────────────────────────────────── */
   .custom-toast {
     position: relative;
     pointer-events: auto;
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 18px 18px 18px 18px;
     border-radius: var(--toast-radius);
     overflow: hidden;
     background: #ffffff;
     border: 1px solid rgba(0,0,0,0.08);
     box-shadow: var(--toast-shadow);
     animation: toastIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
     transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                 box-shadow 0.3s ease;
     /* Subtle top shimmer line */
     background-image: linear-gradient(
       180deg,
       rgba(255,255,255,1) 0%,
       rgba(250,251,252,1) 100%
     );
   }
   
   .custom-toast:hover {
     transform: translateY(-2px) scale(1.008);
     box-shadow: var(--toast-shadow-hover);
   }
   
   .custom-toast.hide {
     animation: toastOut 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
   }
   
   /* ── Top accent line (full width, ultra thin) ───────────────── */
   .custom-toast::after {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0;
     height: 2px;
     border-radius: var(--toast-radius) var(--toast-radius) 0 0;
   }
   .toast-success::after { background: linear-gradient(90deg, #34d399, var(--toast-success), #34d399); background-size: 200%; animation: shimmerLine 2.5s linear infinite; }
   .toast-error::after   { background: linear-gradient(90deg, #f87171, var(--toast-error),   #f87171); background-size: 200%; animation: shimmerLine 2.5s linear infinite; }
   .toast-warning::after { background: linear-gradient(90deg, #fbbf24, var(--toast-warning), #fbbf24); background-size: 200%; animation: shimmerLine 2.5s linear infinite; }
   .toast-info::after    { background: linear-gradient(90deg, #60a5fa, var(--toast-info),    #60a5fa); background-size: 200%; animation: shimmerLine 2.5s linear infinite; }
   .toast-confirm::after { background: linear-gradient(90deg, #a78bfa, var(--toast-confirm), #a78bfa); background-size: 200%; animation: shimmerLine 2.5s linear infinite; }
   
   /* ── Per-type tinted background ─────────────────────────────── */
   .toast-success { background-image: linear-gradient(160deg, var(--toast-success-bg) 0%, #ffffff 60%); border-color: var(--toast-success-border); }
   .toast-error   { background-image: linear-gradient(160deg, var(--toast-error-bg)   0%, #ffffff 60%); border-color: var(--toast-error-border); }
   .toast-warning { background-image: linear-gradient(160deg, var(--toast-warning-bg) 0%, #ffffff 60%); border-color: var(--toast-warning-border); }
   .toast-info    { background-image: linear-gradient(160deg, var(--toast-info-bg)    0%, #ffffff 60%); border-color: var(--toast-info-border); }
   .toast-confirm { background-image: linear-gradient(160deg, var(--toast-confirm-bg) 0%, #ffffff 60%); border-color: var(--toast-confirm-border); }
   
   /* ── Icon — Circular Premium Badge ──────────────────────────── */
   .toast-icon-orb {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.05rem;
     flex-shrink: 0;
     margin-top: 1px;
     position: relative;
   }
   
   /* Ring around icon */
   .toast-icon-orb::before {
     content: '';
     position: absolute;
     inset: -2px;
     border-radius: 50%;
     padding: 2px;
     opacity: 0.3;
   }
   
   .toast-success .toast-icon-orb {
     background: linear-gradient(135deg, #d1fae5, #a7f3d0);
     color: var(--toast-success);
     box-shadow: 0 0 0 4px rgba(5,150,105,0.08), 0 2px 8px rgba(5,150,105,0.2);
     animation: orbPop 0.55s cubic-bezier(0.34,1.56,0.64,1);
   }
   .toast-error .toast-icon-orb {
     background: linear-gradient(135deg, #fee2e2, #fecaca);
     color: var(--toast-error);
     box-shadow: 0 0 0 4px rgba(220,38,38,0.08), 0 2px 8px rgba(220,38,38,0.2);
     animation: orbShake 0.5s cubic-bezier(0.36,0.07,0.19,0.97);
   }
   .toast-warning .toast-icon-orb {
     background: linear-gradient(135deg, #fef3c7, #fde68a);
     color: var(--toast-warning);
     box-shadow: 0 0 0 4px rgba(180,83,9,0.08), 0 2px 8px rgba(180,83,9,0.2);
     animation: orbPop 0.55s cubic-bezier(0.34,1.56,0.64,1);
   }
   .toast-info .toast-icon-orb {
     background: linear-gradient(135deg, #dbeafe, #bfdbfe);
     color: var(--toast-info);
     box-shadow: 0 0 0 4px rgba(29,78,216,0.08), 0 2px 8px rgba(29,78,216,0.2);
     animation: orbBounce 0.55s ease;
   }
   .toast-confirm .toast-icon-orb {
     background: linear-gradient(135deg, #ede9fe, #ddd6fe);
     color: var(--toast-confirm);
     box-shadow: 0 0 0 4px rgba(109,40,217,0.08), 0 2px 8px rgba(109,40,217,0.2);
     animation: orbPop 0.55s cubic-bezier(0.34,1.56,0.64,1);
   }
   
   /* ── Toast Body ─────────────────────────────────────────────── */
   .toast-body {
     flex: 1 1 0%;
     min-width: 0;
     display: flex;
     flex-direction: column;
     padding-top: 1px;
   }
   
   .toast-title {
     font-weight: 700;
     font-size: 0.875rem;
     color: var(--toast-title-color);
     margin: 0 0 4px 0;
     line-height: 1.25;
     letter-spacing: -0.02em;
   }
   
   .toast-message {
     font-size: 0.8rem;
     font-weight: 400;
     color: var(--toast-msg-color);
     line-height: 1.6;
     margin: 0;
     padding: 0;
     display: block;
     word-break: break-word;
     white-space: normal;
     flex-shrink: 0;
     letter-spacing: 0.01em;
   }
   
   /* ── Confirm Buttons — Premium Pill Style ───────────────────── */
   .toast-actions {
     display: flex;
     gap: 8px;
     margin-top: 14px;
     flex-shrink: 0;
   }
   
   .toast-btn {
     flex: 1;
     padding: 8px 16px;
     border-radius: 50px;
     font-family: 'Inter', sans-serif;
     font-size: 0.775rem;
     font-weight: 600;
     border: none;
     cursor: pointer;
     transition: all 0.2s cubic-bezier(0.22,1,0.36,1);
     letter-spacing: 0.02em;
     text-transform: uppercase;
   }
   
   .toast-btn-ok {
     background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
     color: #fff;
     box-shadow: 0 2px 8px rgba(109,40,217,0.30), 0 1px 2px rgba(109,40,217,0.20);
   }
   .toast-btn-ok:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(109,40,217,0.40), 0 2px 4px rgba(109,40,217,0.25);
   }
   .toast-btn-ok:active { transform: translateY(0); }
   
   .toast-btn-cancel {
     background: #f8fafc;
     color: #64748b;
     border: 1px solid #e2e8f0;
   }
   .toast-btn-cancel:hover {
     background: #f1f5f9;
     color: #334155;
     border-color: #cbd5e1;
   }
   
   /* ── Close Button ───────────────────────────────────────────── */
   .toast-close-btn {
     background: none;
     border: none;
     color: #94a3b8;
     cursor: pointer;
     font-size: 0.8rem;
     width: 26px;
     height: 26px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 0;
     transition: all 0.15s ease;
   }
   .toast-close-btn:hover {
     color: #1e293b;
     background: rgba(15,23,42,0.07);
   }
   
   /* ── Progress Bar — Thin Elegant Line ───────────────────────── */
   .toast-progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 2px;
     width: 100%;
     transform-origin: left;
     border-radius: 0 0 var(--toast-radius) var(--toast-radius);
   }
   .toast-success .toast-progress { background: linear-gradient(90deg, #a7f3d0, var(--toast-success)); }
   .toast-error   .toast-progress { background: linear-gradient(90deg, #fca5a5, var(--toast-error)); }
   .toast-warning .toast-progress { background: linear-gradient(90deg, #fcd34d, var(--toast-warning)); }
   .toast-info    .toast-progress { background: linear-gradient(90deg, #93c5fd, var(--toast-info)); }
   
   /* ==========================================================================
      Keyframe Animations
      ========================================================================== */
   
   /* Main slide-in — smooth deceleration (Apple/Google style) */
   @keyframes toastIn {
     0%   { opacity: 0; transform: translateX(100%) scale(0.92) translateY(-4px); }
     50%  { opacity: 1; }
     100% { opacity: 1; transform: translateX(0) scale(1) translateY(0); }
   }
   
   /* Slide-out — fast, clean */
   @keyframes toastOut {
     0%   { opacity: 1; transform: translateX(0) scale(1); }
     15%  { transform: translateX(-6px) scale(1.01); }
     100% { opacity: 0; transform: translateX(110%) scale(0.94); }
   }
   
   /* Shimmer on top accent line */
   @keyframes shimmerLine {
     0%   { background-position: 200% center; }
     100% { background-position: -200% center; }
   }
   
   /* Icon animations */
   @keyframes orbPop {
     0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
     60%  { transform: scale(1.18) rotate(3deg); opacity: 1; }
     80%  { transform: scale(0.95) rotate(-1deg); }
     100% { transform: scale(1) rotate(0deg); opacity: 1; }
   }
   
   @keyframes orbShake {
     0%,100% { transform: translateX(0) rotate(0deg); }
     15%     { transform: translateX(-6px) rotate(-12deg); }
     30%     { transform: translateX(6px)  rotate(12deg); }
     45%     { transform: translateX(-4px) rotate(-6deg); }
     60%     { transform: translateX(4px)  rotate(6deg); }
     75%     { transform: translateX(-2px) rotate(-2deg); }
   }
   /* //css */
   @keyframes orbBounce {
     0%   { transform: translateY(12px) scale(0.7); opacity: 0; }
     55%  { transform: translateY(-6px) scale(1.1); opacity: 1; }
     75%  { transform: translateY(2px) scale(0.97); }
     100% { transform: translateY(0) scale(1); opacity: 1; }
   }