/* Status Feedback Components: Loading Overlay & Notification Toast */
/* =====================================================================
   Provides: 
   - Fullscreen loading overlay (glass + spinner + message)
   - Notification toast (stack-ready, semantic states)
   Accessibility: ARIA roles, reduced motion support, focus outlines
   Theme: Adapts to .marketplace-professional-theme.dark + prefers-color-scheme
   ===================================================================== */
:root {
  --sf-accent: #6366f1;
  --sf-accent-grad: linear-gradient(135deg,#6366f1,#4f46e5);
  --sf-danger: #dc2626;
  --sf-success: #16a34a;
  --sf-warning: #d97706;
  --sf-info: #0ea5e9;
  --sf-bg-surface: rgba(255,255,255,0.85);
  --sf-bg-glass: linear-gradient(120deg,rgba(255,255,255,0.85),rgba(255,255,255,0.55));
  --sf-border: rgba(0,0,0,0.08);
  --sf-text: #1e293b;
  --sf-text-dim: #475569;
  --sf-radius: 20px;
  --sf-shadow: 0 12px 34px -10px rgba(0,0,0,0.35),0 4px 14px -4px rgba(0,0,0,0.18);
  --sf-focus: 0 0 0 3px rgba(99,102,241,0.4);
}
body.marketplace-professional-theme.dark {
  --sf-bg-surface: rgba(31,34,45,0.9);
  --sf-bg-glass: linear-gradient(140deg,rgba(31,34,45,0.92),rgba(31,34,45,0.7));
  --sf-border: rgba(255,255,255,0.08);
  --sf-text: var(--z-text);
  --sf-text-dim: var(--z-text-sec);
  --sf-shadow: 0 14px 40px -10px rgba(0,0,0,0.7),0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* ================= Loading Overlay ================= */
#marketplace-loading-overlay { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 30% 30%,var(--z-overlay),var(--z-overlay-heavy)); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); opacity:0; visibility:hidden; transition:opacity .45s ease,visibility .45s ease; }
#marketplace-loading-overlay.active { opacity:1; visibility:visible; }
#marketplace-loading-content { position:relative; padding:2.25rem 2.5rem 2.2rem; border-radius:var(--sf-radius); background:var(--sf-bg-glass); border:1px solid var(--sf-border); box-shadow:var(--sf-shadow); display:flex; flex-direction:column; align-items:center; gap:1.25rem; min-width:260px; max-width:360px; text-align:center; }
body.marketplace-professional-theme.dark #marketplace-loading-content { background:var(--sf-bg-glass); }
#marketplace-loading-content::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--sf-accent),transparent 70%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.65; pointer-events:none; }

/* Spinner */
#marketplace-loading-spinner { width:74px; height:74px; position:relative; }
#marketplace-spinner { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--sf-accent) 0deg, var(--sf-accent) 120deg, transparent 150deg 360deg); animation:sfSpinOuter 1.2s linear infinite; filter:drop-shadow(0 4px 10px rgba(99,102,241,0.4)); }
#marketplace-spinner::before,#marketplace-spinner::after { content:""; position:absolute; inset:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.95),rgba(255,255,255,0.4)); animation:sfPulse 2.2s ease-in-out infinite; }
#marketplace-spinner::after { inset:18px; background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent)); filter:blur(16px) opacity(.35); animation:sfGlow 2.4s ease-in-out infinite; }
body.marketplace-professional-theme.dark #marketplace-spinner::before { background:radial-gradient(circle at 30% 30%,rgba(31,34,45,0.95),rgba(31,34,45,0.5)); }
#marketplace-loading-text { font:600 .95rem 'Inter',system-ui,sans-serif; letter-spacing:.5px; color:var(--sf-text); position:relative; }
#marketplace-loading-text::after { content:""; position:absolute; left:50%; bottom:-6px; width:60%; height:3px; border-radius:3px; transform:translateX(-50%); background:linear-gradient(90deg,var(--sf-accent),transparent); animation:sfBarSlide 2.2s ease-in-out infinite; opacity:.6; }

@keyframes sfSpinOuter { to { transform:rotate(360deg); } }
@keyframes sfPulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(.92); opacity:.75;} }
@keyframes sfGlow { 0%,100%{ opacity:.3} 50%{ opacity:.55} }
@keyframes sfBarSlide { 0%,100%{ transform:translate(-50%,0) scaleX(.7);} 50%{ transform:translate(-50%,0) scaleX(1);} }

/* Reduced / High Contrast */
@media (prefers-reduced-motion:reduce){ #marketplace-loading-overlay,*{ animation:none!important; transition:none!important; filter:none!important; } }
@media (prefers-contrast:high){ #marketplace-loading-overlay{ background:#000!important; } #marketplace-loading-content{ box-shadow:0 0 0 3px #000; } }

/* ================= Notification Toast ================= */
#marketplace-notification-toast { position:fixed; right:clamp(.75rem,2vw,1.25rem); bottom:clamp(.75rem,2vw,1.25rem); z-index:1300; min-width:300px; max-width:390px; pointer-events:none; opacity:0; transform:translateY(16px) scale(.96); transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
#marketplace-notification-toast.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#marketplace-toast-content { background:var(--sf-bg-glass); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border:1px solid var(--sf-border); border-radius:18px; padding:1rem 1.15rem 1.1rem; position:relative; display:flex; gap:.9rem; align-items:flex-start; box-shadow:var(--sf-shadow); overflow:hidden; }
#marketplace-toast-content::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(135deg,var(--sf-accent),transparent 70%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; pointer-events:none; }
body.marketplace-professional-theme.dark #marketplace-toast-content { background:var(--sf-bg-glass); }

/* State Accent Bar */
#marketplace-notification-toast::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:6px 0 0 6px; background:var(--sf-accent-grad); opacity:.9; }
#marketplace-notification-toast.success::before { background:linear-gradient(135deg,var(--sf-success),#15803d); }
#marketplace-notification-toast.error::before { background:linear-gradient(135deg,var(--sf-danger),#b91c1c); }
#marketplace-notification-toast.info::before { background:linear-gradient(135deg,var(--sf-info),#0284c7); }
#marketplace-notification-toast.warning::before { background:linear-gradient(135deg,var(--sf-warning),#b45309); }

/* Icon */
#marketplace-toast-icon { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(99,102,241,0.05)); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
#marketplace-toast-icon i { font-size:1.1rem; color:var(--sf-accent); filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
#marketplace-notification-toast.success #marketplace-toast-icon i { color:var(--sf-success); }
#marketplace-notification-toast.error #marketplace-toast-icon i { color:var(--sf-danger); }
#marketplace-notification-toast.info #marketplace-toast-icon i { color:var(--sf-info); }
#marketplace-notification-toast.warning #marketplace-toast-icon i { color:var(--sf-warning); }

/* Message */
#marketplace-toast-message { flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
#marketplace-toast-title { font:600 .85rem 'Inter',system-ui,sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--sf-text-dim); }
#marketplace-toast-text { font:500 .85rem/1.35 'Inter',system-ui,sans-serif; color:var(--sf-text); }

/* Close Button */
#marketplace-toast-close { all:unset; cursor:pointer; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:12px; color:var(--sf-text-dim); position:relative; transition:.3s; pointer-events:auto; }
#marketplace-toast-close::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(135deg,var(--sf-accent),transparent); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; }
#marketplace-toast-close:hover { color:var(--sf-text); background:linear-gradient(145deg,rgba(0,0,0,0.05),rgba(0,0,0,0.02)); }
#marketplace-toast-close:active { transform:translateY(1px); }

/* Animations */
@keyframes sfToastPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(99,102,241,0.35);} 50%{ box-shadow:0 0 0 6px rgba(99,102,241,0); } }
#marketplace-notification-toast.success.show #marketplace-toast-icon { animation:sfToastPulse 2.6s ease infinite; }
#marketplace-notification-toast.error.show #marketplace-toast-icon { animation:sfToastPulse 2.6s ease infinite; }

/* High Contrast & Reduced Motion */
@media (prefers-contrast:high){ #marketplace-toast-content{ box-shadow:0 0 0 3px #000; } }
@media (prefers-reduced-motion:reduce){ #marketplace-notification-toast,*{ animation:none!important; transition:none!important; } }

/* Focus states */
#marketplace-notification-toast :focus-visible, #marketplace-loading-overlay :focus-visible { outline:none; box-shadow:var(--sf-focus); }

/* Responsive Adjust */
@media (max-width:520px){ #marketplace-notification-toast{ left:clamp(.75rem,2vw,1rem); right:clamp(.75rem,2vw,1rem); max-width:unset; } #marketplace-toast-content{ padding:0.9rem 1rem 1rem; } }