/* Loader Widget Styles - Enhanced Multi-Animation Support with Opera Compatibility */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.95); /* Opera primary fallback */
  background: var(--loader-bg, rgba(10, 10, 10, 0.95));
  /* Opera flexbox fallbacks */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.18s ease, visibility 0.18s ease;
  -o-transition: opacity 0.18s ease, visibility 0.18s ease;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Position Classes */
.loading-overlay.position-top-left { align-items: flex-start; justify-content: flex-start; padding: 50px; }
.loading-overlay.position-top-center { align-items: flex-start; justify-content: center; padding: 50px; }
.loading-overlay.position-top-right { align-items: flex-start; justify-content: flex-end; padding: 50px; }
.loading-overlay.position-center-left { align-items: center; justify-content: flex-start; padding: 50px; }
.loading-overlay.position-center-right { align-items: center; justify-content: flex-end; padding: 50px; }
.loading-overlay.position-bottom-left { align-items: flex-end; justify-content: flex-start; padding: 50px; }
.loading-overlay.position-bottom-center { align-items: flex-end; justify-content: center; padding: 50px; }
.loading-overlay.position-bottom-right { align-items: flex-end; justify-content: flex-end; padding: 50px; }

.loading-spinner { 
  text-align: center; 
  position: relative; 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner-container {
  /* Opera flexbox fallbacks */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
}

/* Size Classes with Opera transform fallbacks */
.loading-spinner.size-small .spinner-element { 
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
.loading-spinner.size-medium .spinner-element { 
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.loading-spinner.size-large .spinner-element { 
  -webkit-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}
.loading-spinner.size-xlarge .spinner-element { 
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

/* RINGS Animation */
.spinner-rings .spinner-ring {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 0 5px;
  border: 4px solid transparent;
  border-top: 4px solid #3b82f6; /* Opera fallback */
  border-top: 4px solid var(--loader-primary, #3b82f6);
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite; /* Opera fallback */
  -o-animation: spin 1s linear infinite; /* Opera fallback */
  -webkit-animation: spin var(--loader-speed, 1s) linear infinite;
  -o-animation: spin var(--loader-speed, 1s) linear infinite;
  animation: spin var(--loader-speed, 1s) linear infinite;
}

.spinner-rings .spinner-ring:nth-child(2) {
  border-top-color: #7c3aed; /* Opera fallback */
  border-top-color: var(--loader-secondary, #7c3aed);
  -webkit-animation-delay: -0.3s;
  -o-animation-delay: -0.3s;
  animation-delay: -0.3s;
  width: 50px;
  height: 50px;
}

.spinner-rings .spinner-ring:nth-child(3) {
  border-top-color: #f59e0b; /* Opera fallback */
  border-top-color: var(--loader-tertiary, #f59e0b);
  -webkit-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
  animation-delay: -0.6s;
  width: 40px;
  height: 40px;
}

/* DOTS Animation with Opera flexbox fallbacks */
.spinner-dots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  /* Fallback for Opera without gap support */
  margin: 0 -4px;
}

.spinner-dots .dot {
  margin: 0 4px; /* Opera gap fallback */
}

.spinner-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: bounceDelay var(--loader-speed, 1.4s) infinite ease-in-out both;
  -o-animation: bounceDelay var(--loader-speed, 1.4s) infinite ease-in-out both;
  animation: bounceDelay var(--loader-speed, 1.4s) infinite ease-in-out both;
}

.spinner-dots .dot:nth-child(2) {
  background: var(--loader-secondary, #7c3aed);
  -webkit-animation-delay: -0.16s;
  -o-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.spinner-dots .dot:nth-child(3) {
  background: var(--loader-tertiary, #f59e0b);
  -webkit-animation-delay: -0.32s;
  -o-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

/* BARS Animation */
.spinner-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.spinner-bars .bar {
  width: 6px;
  height: 30px;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: scaleY var(--loader-speed, 1s) infinite ease-in-out;
  -o-animation: scaleY var(--loader-speed, 1s) infinite ease-in-out;
  animation: scaleY var(--loader-speed, 1s) infinite ease-in-out;
}

.spinner-bars .bar:nth-child(2) {
  background: var(--loader-secondary, #7c3aed);
  -webkit-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner-bars .bar:nth-child(3) {
  background: var(--loader-tertiary, #f59e0b);
  -webkit-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.spinner-bars .bar:nth-child(4) {
  background: var(--loader-primary, #3b82f6);
  -webkit-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.spinner-bars .bar:nth-child(5) {
  background: var(--loader-secondary, #7c3aed);
  -webkit-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

/* PULSE Animation */
.spinner-pulse .pulse-circle {
  width: 40px;
  height: 40px;
  background: var(--loader-primary, #3b82f6);
  border-radius: 50%;
  -webkit-animation: pulseScale var(--loader-speed, 1s) infinite ease-in-out;
  -o-animation: pulseScale var(--loader-speed, 1s) infinite ease-in-out;
  animation: pulseScale var(--loader-speed, 1s) infinite ease-in-out;
}

/* WAVE Animation */
.spinner-wave {
  display: flex;
  gap: 3px;
  align-items: center;
}

.spinner-wave .wave-bar {
  width: 4px;
  height: 20px;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: wave var(--loader-speed, 1.2s) infinite ease-in-out;
  -o-animation: wave var(--loader-speed, 1.2s) infinite ease-in-out;
  animation: wave var(--loader-speed, 1.2s) infinite ease-in-out;
}

.spinner-wave .wave-bar:nth-child(2) { -webkit-animation-delay: -1.1s; -o-animation-delay: -1.1s; animation-delay: -1.1s; background: var(--loader-secondary, #7c3aed); }
.spinner-wave .wave-bar:nth-child(3) { -webkit-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s; background: var(--loader-tertiary, #f59e0b); }
.spinner-wave .wave-bar:nth-child(4) { -webkit-animation-delay: -0.9s; -o-animation-delay: -0.9s; animation-delay: -0.9s; background: var(--loader-primary, #3b82f6); }
.spinner-wave .wave-bar:nth-child(5) { -webkit-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s; background: var(--loader-secondary, #7c3aed); }
.spinner-wave .wave-bar:nth-child(6) { -webkit-animation-delay: -0.7s; -o-animation-delay: -0.7s; animation-delay: -0.7s; background: var(--loader-tertiary, #f59e0b); }
.spinner-wave .wave-bar:nth-child(7) { -webkit-animation-delay: -0.6s; -o-animation-delay: -0.6s; animation-delay: -0.6s; background: var(--loader-primary, #3b82f6); }

/* ORBIT Animation */
.spinner-orbit {
  width: 50px;
  height: 50px;
  position: relative;
}

.spinner-orbit .orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: orbit var(--loader-speed, 2s) infinite linear;
  -o-animation: orbit var(--loader-speed, 2s) infinite linear;
  animation: orbit var(--loader-speed, 2s) infinite linear;
}

.spinner-orbit .orbit-dot:nth-child(2) {
  background: var(--loader-secondary, #7c3aed);
  animation-delay: -0.5s;
}

.spinner-orbit .orbit-dot:nth-child(3) {
  background: var(--loader-tertiary, #f59e0b);
  animation-delay: -1s;
}

/* RIPPLE Animation */
.spinner-ripple {
  position: relative;
  width: 60px;
  height: 60px;
}

.spinner-ripple .ripple-ring {
  position: absolute;
  border: 3px solid var(--loader-primary, #3b82f6);
  border-radius: 50%;
  -webkit-animation: ripple var(--loader-speed, 1.2s) infinite ease-out;
  -o-animation: ripple var(--loader-speed, 1.2s) infinite ease-out;
  animation: ripple var(--loader-speed, 1.2s) infinite ease-out;
  opacity: 1;
}

.spinner-ripple .ripple-ring:nth-child(2) {
  border-color: var(--loader-secondary, #7c3aed);
  animation-delay: -0.5s;
}

/* BOUNCE Animation */
.spinner-bounce .bounce-ball {
  width: 20px;
  height: 20px;
  background: var(--loader-primary, #3b82f6);
  border-radius: 50%;
  -webkit-animation: bounce var(--loader-speed, 1.4s) infinite ease-in-out;
  -o-animation: bounce var(--loader-speed, 1.4s) infinite ease-in-out;
  animation: bounce var(--loader-speed, 1.4s) infinite ease-in-out;
}

/* SPIRAL Animation */
.spinner-spiral {
  width: 50px;
  height: 50px;
  position: relative;
}

.spinner-spiral .spiral-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: spiral var(--loader-speed, 2s) infinite linear;
  -o-animation: spiral var(--loader-speed, 2s) infinite linear;
  animation: spiral var(--loader-speed, 2s) infinite linear;
}

.spinner-spiral .spiral-dot:nth-child(2) { background: var(--loader-secondary, #7c3aed); -webkit-animation-delay: -0.2s; -o-animation-delay: -0.2s; animation-delay: -0.2s; }
.spinner-spiral .spiral-dot:nth-child(3) { background: var(--loader-tertiary, #f59e0b); -webkit-animation-delay: -0.4s; -o-animation-delay: -0.4s; animation-delay: -0.4s; }
.spinner-spiral .spiral-dot:nth-child(4) { background: var(--loader-primary, #3b82f6); -webkit-animation-delay: -0.6s; -o-animation-delay: -0.6s; animation-delay: -0.6s; }
.spinner-spiral .spiral-dot:nth-child(5) { background: var(--loader-secondary, #7c3aed); -webkit-animation-delay: -0.8s; -o-animation-delay: -0.8s; animation-delay: -0.8s; }

/* CUBE Animation */
.spinner-cube {
  width: 40px;
  height: 40px;
  background: var(--loader-primary, #3b82f6);
  -webkit-animation: cubeRotate var(--loader-speed, 2s) infinite ease-in-out;
  -o-animation: cubeRotate var(--loader-speed, 2s) infinite ease-in-out;
  animation: cubeRotate var(--loader-speed, 2s) infinite ease-in-out;
}

.loading-text {
  margin-top: 20px;
  color: var(--light-text, #e5e7eb);
  font-size: 1.1rem;
  font-weight: 600;
  -webkit-animation: textPulse 1.5s ease-in-out infinite;
  -o-animation: textPulse 1.5s ease-in-out infinite;
  animation: textPulse 1.5s ease-in-out infinite;
  text-align: center;
}

.loading-text.hidden {
  display: none;
}

/* Animation Keyframes with Opera Compatibility */
@-webkit-keyframes spin { 
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}
@-o-keyframes spin { 
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); } 
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); } 
}
@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

@-webkit-keyframes bounceDelay {
  0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1); transform: scale(1); }
}
@-o-keyframes bounceDelay {
  0%, 80%, 100% { -o-transform: scale(0); transform: scale(0); }
  40% { -o-transform: scale(1); transform: scale(1); }
}
@keyframes bounceDelay {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

@-webkit-keyframes scaleY {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); }
  20% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@-o-keyframes scaleY {
  0%, 40%, 100% { -o-transform: scaleY(0.4); transform: scaleY(0.4); }
  20% { -o-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes scaleY {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}

@-webkit-keyframes pulseScale {
  0%, 100% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; }
  50% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.7; }
}
@-o-keyframes pulseScale {
  0%, 100% { -o-transform: scale(0); transform: scale(0); opacity: 1; }
  50% { -o-transform: scale(1); transform: scale(1); opacity: 0.7; }
}
@keyframes pulseScale {
  0%, 100% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1); opacity: 0.7; }
}

@-webkit-keyframes wave {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); }
  20% { -webkit-transform: scaleY(1); transform: scaleY(1); }
}
@-o-keyframes wave {
  0%, 40%, 100% { -o-transform: scaleY(0.4); transform: scaleY(0.4); }
  20% { -o-transform: scaleY(1); transform: scaleY(1); }
}
@keyframes wave {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}

@-webkit-keyframes orbit {
  0% { -webkit-transform: rotate(0deg) translateX(25px) rotate(0deg); transform: rotate(0deg) translateX(25px) rotate(0deg); }
  100% { -webkit-transform: rotate(360deg) translateX(25px) rotate(-360deg); transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
@-o-keyframes orbit {
  0% { -o-transform: rotate(0deg) translateX(25px) rotate(0deg); transform: rotate(0deg) translateX(25px) rotate(0deg); }
  100% { -o-transform: rotate(360deg) translateX(25px) rotate(-360deg); transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(25px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}

@-webkit-keyframes ripple {
  0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
  100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}
@-o-keyframes ripple {
  0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
  100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}
@keyframes ripple {
  0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; }
  100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; }
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-o-keyframes bounce {
  0%, 100% { -o-transform: translateY(0); transform: translateY(0); }
  50% { -o-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@-webkit-keyframes spiral {
  0% { -webkit-transform: rotate(0deg) translateX(20px) rotate(0deg); transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg); transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@-o-keyframes spiral {
  0% { -o-transform: rotate(0deg) translateX(20px) rotate(0deg); transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { -o-transform: rotate(360deg) translateX(20px) rotate(-360deg); transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
@keyframes spiral {
  0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@-webkit-keyframes cubeRotate {
  0%, 70%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  35% { -webkit-transform: scale3d(0, 0, 1) rotateZ(45deg); transform: scale3d(0, 0, 1) rotateZ(45deg); }
}
@-o-keyframes cubeRotate {
  0%, 70%, 100% { -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
  35% { -o-transform: scale3d(0, 0, 1) rotateZ(45deg); transform: scale3d(0, 0, 1) rotateZ(45deg); }
}
@keyframes cubeRotate {
  0%, 70%, 100% { transform: scale3d(1, 1, 1); }
  35% { transform: scale3d(0, 0, 1) rotateZ(45deg); }
}

@-webkit-keyframes textPulse { 
  0%, 100% { opacity: 0.7; } 
  50% { opacity: 1; } 
}
@-o-keyframes textPulse { 
  0%, 100% { opacity: 0.7; } 
  50% { opacity: 1; } 
}
@keyframes textPulse { 
  0%, 100% { opacity: 0.7; } 
  50% { opacity: 1; } 
}

/* Loader Animation Fixes - Ensure all animations are visible */

/* Force CSS variables with fallbacks */
:root {
    --loader-primary: #3b82f6;
    --loader-secondary: #7c3aed; 
    --loader-tertiary: #f59e0b;
    --loader-speed: 1s;
    --loader-bg: rgba(10, 10, 10, 0.95);
    --loader-blur: 10px;
}

/* Ensure base elements are visible */
.spinner-element {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    min-width: 40px !important;
}

/* DOTS - Fix potential visibility issues */
.spinner-dots {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.spinner-dots .dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: bounceDelay 1.4s infinite ease-in-out both !important;
}

.spinner-dots .dot:nth-child(2) {
    background: var(--loader-secondary, #7c3aed) !important;
    animation-delay: -0.16s !important;
}

.spinner-dots .dot:nth-child(3) {
    background: var(--loader-tertiary, #f59e0b) !important;
    animation-delay: -0.32s !important;
}

/* BARS - Fix potential visibility issues */
.spinner-bars {
    display: flex !important;
    gap: 4px !important;
    align-items: flex-end !important;
    height: 40px !important;
}

.spinner-bars .bar {
    width: 6px !important;
    height: 30px !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: scaleY 1s infinite ease-in-out !important;
}

.spinner-bars .bar:nth-child(2) {
    background: var(--loader-secondary, #7c3aed) !important;
    animation-delay: -0.9s !important;
}

.spinner-bars .bar:nth-child(3) {
    background: var(--loader-tertiary, #f59e0b) !important;
    animation-delay: -0.8s !important;
}

.spinner-bars .bar:nth-child(4) {
    background: var(--loader-primary, #3b82f6) !important;
    animation-delay: -0.7s !important;
}

.spinner-bars .bar:nth-child(5) {
    background: var(--loader-secondary, #7c3aed) !important;
    animation-delay: -0.6s !important;
}

/* PULSE - Fix potential visibility issues */
.spinner-pulse {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.spinner-pulse .pulse-circle {
    width: 40px !important;
    height: 40px !important;
    background: var(--loader-primary, #3b82f6) !important;
    border-radius: 50% !important;
    animation: pulseScale 1s infinite ease-in-out !important;
}

/* WAVE - Fix potential visibility issues */
.spinner-wave {
    display: flex !important;
    gap: 3px !important;
    align-items: center !important;
    height: 40px !important;
}

.spinner-wave .wave-bar {
    width: 4px !important;
    height: 20px !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: wave 1.2s infinite ease-in-out !important;
}

.spinner-wave .wave-bar:nth-child(2) { 
    animation-delay: -1.1s !important; 
    background: var(--loader-secondary, #7c3aed) !important; 
}
.spinner-wave .wave-bar:nth-child(3) { 
    animation-delay: -1s !important; 
    background: var(--loader-tertiary, #f59e0b) !important; 
}
.spinner-wave .wave-bar:nth-child(4) { 
    animation-delay: -0.9s !important; 
    background: var(--loader-primary, #3b82f6) !important; 
}
.spinner-wave .wave-bar:nth-child(5) { 
    animation-delay: -0.8s !important; 
    background: var(--loader-secondary, #7c3aed) !important; 
}
.spinner-wave .wave-bar:nth-child(6) { 
    animation-delay: -0.7s !important; 
    background: var(--loader-tertiary, #f59e0b) !important; 
}
.spinner-wave .wave-bar:nth-child(7) { 
    animation-delay: -0.6s !important; 
    background: var(--loader-primary, #3b82f6) !important; 
}

/* ORBIT - Fix potential visibility issues */
.spinner-orbit {
    width: 50px !important;
    height: 50px !important;
    position: relative !important;
}

.spinner-orbit .orbit-dot {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: orbit 2s infinite linear !important;
}

.spinner-orbit .orbit-dot:nth-child(2) {
    background: var(--loader-secondary, #7c3aed) !important;
    animation-delay: -0.5s !important;
}

.spinner-orbit .orbit-dot:nth-child(3) {
    background: var(--loader-tertiary, #f59e0b) !important;
    animation-delay: -1s !important;
}

/* RIPPLE - Fix potential visibility issues */
.spinner-ripple {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
}

.spinner-ripple .ripple-ring {
    position: absolute !important;
    border: 3px solid var(--loader-primary, #3b82f6) !important;
    border-radius: 50% !important;
    animation: ripple 1.2s infinite ease-out !important;
    opacity: 1 !important;
}

.spinner-ripple .ripple-ring:nth-child(2) {
    border-color: var(--loader-secondary, #7c3aed) !important;
    animation-delay: -0.5s !important;
}

/* BOUNCE - Fix potential visibility issues */
.spinner-bounce {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.spinner-bounce .bounce-ball {
    width: 20px !important;
    height: 20px !important;
    background: var(--loader-primary, #3b82f6) !important;
    border-radius: 50% !important;
    animation: bounce 1.4s infinite ease-in-out !important;
}

/* SPIRAL - Fix potential visibility issues */
.spinner-spiral {
    width: 50px !important;
    height: 50px !important;
    position: relative !important;
}

.spinner-spiral .spiral-dot {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: spiral 2s infinite linear !important;
}

.spinner-spiral .spiral-dot:nth-child(2) { 
    background: var(--loader-secondary, #7c3aed) !important; 
    animation-delay: -0.2s !important; 
}
.spinner-spiral .spiral-dot:nth-child(3) { 
    background: var(--loader-tertiary, #f59e0b) !important; 
    animation-delay: -0.4s !important; 
}
.spinner-spiral .spiral-dot:nth-child(4) { 
    background: var(--loader-primary, #3b82f6) !important; 
    animation-delay: -0.6s !important; 
}
.spinner-spiral .spiral-dot:nth-child(5) { 
    background: var(--loader-secondary, #7c3aed) !important; 
    animation-delay: -0.8s !important; 
}

/* CUBE - Fix potential visibility issues */
.spinner-cube {
    width: 40px !important;
    height: 40px !important;
    background: var(--loader-primary, #3b82f6) !important;
    animation: cubeRotate 2s infinite ease-in-out !important;
}

/* Ensure all keyframes are present */
@keyframes bounceDelay {
    0%, 80%, 100% { 
        transform: scale(0);
        opacity: 1;
    }
    40% { 
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scaleY {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
    }
    20% { 
        transform: scaleY(1);
    }
}

@keyframes pulseScale {
    0%, 100% { 
        transform: scale(0); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1); 
        opacity: 0.7; 
    }
}

@keyframes wave {
    0%, 40%, 100% { 
        transform: scaleY(0.4);
    }
    20% { 
        transform: scaleY(1);
    }
}

@keyframes orbit {
    0% { 
        transform: rotate(0deg) translateX(25px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(25px) rotate(-360deg);
    }
}

@keyframes ripple {
    0% { 
        top: 28px; 
        left: 28px; 
        width: 0; 
        height: 0; 
        opacity: 1;
    }
    100% { 
        top: -1px; 
        left: -1px; 
        width: 58px; 
        height: 58px; 
        opacity: 0;
    }
}

@keyframes bounce {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-20px);
    }
}

@keyframes spiral {
    0% { 
        transform: rotate(0deg) translateX(20px) rotate(0deg);
    }
    100% { 
        transform: rotate(360deg) translateX(20px) rotate(-360deg);
    }
}

@keyframes cubeRotate {
    0%, 70%, 100% { 
        transform: scale3d(1, 1, 1);
    }
    35% { 
        transform: scale3d(0, 0, 1) rotateZ(45deg);
    }
}

/* === COMPREHENSIVE CSS FIXES FOR ALL CONTEXTS === */

/* Force visibility and display for all animation elements */
.loading-spinner *, 
.spinner-element *, 
.loading-container *,
#modal-preview *,
.modal *,
.preview-container * {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Ensure flex containers work in all contexts */
.spinner-dots,
.spinner-bars,
.spinner-wave {
    display: flex !important;
}

/* Force CSS variable fallbacks for all animation elements */
.spinner-rings .spinner-ring {
    border-top-color: var(--loader-primary, #3b82f6) !important;
    border-color: transparent var(--loader-secondary, #7c3aed) transparent transparent !important;
}

.spinner-dots .dot {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-bars .bar {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-pulse .pulse-circle {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-wave .wave-bar {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-orbit .orbit-dot {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-ripple .ripple-ring {
    border-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-bounce .bounce-ball {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-spiral .spiral-dot {
    background-color: var(--loader-primary, #3b82f6) !important;
}

.spinner-cube {
    background-color: var(--loader-primary, #3b82f6) !important;
}

/* Force animations to run */
.spinner-rings .spinner-ring {
    animation: spin var(--loader-speed, 1s) linear infinite !important;
}

.spinner-dots .dot {
    animation: bounceDelay var(--loader-speed, 1.4s) infinite ease-in-out both !important;
}

.spinner-bars .bar {
    animation: scaleY var(--loader-speed, 1s) infinite ease-in-out !important;
}

.spinner-pulse .pulse-circle {
    animation: pulseScale var(--loader-speed, 1s) infinite ease-in-out !important;
}

.spinner-wave .wave-bar {
    animation: wave var(--loader-speed, 1.2s) infinite ease-in-out !important;
}

.spinner-orbit .orbit-dot {
    animation: orbit var(--loader-speed, 2s) infinite linear !important;
}

.spinner-ripple .ripple-ring {
    animation: ripple var(--loader-speed, 1.2s) infinite ease-out !important;
}

.spinner-bounce .bounce-ball {
    animation: bounce var(--loader-speed, 1.4s) infinite ease-in-out !important;
}

.spinner-spiral .spiral-dot {
    animation: spiral var(--loader-speed, 2s) infinite linear !important;
}

.spinner-cube {
    animation: cubeRotate var(--loader-speed, 2s) infinite ease-in-out !important;
}

/* Modal-specific fixes */
.modal .loading-spinner,
#modal-preview .loading-spinner,
.preview-container .loading-spinner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

/* Ensure elements are properly sized in modal context */
.modal .spinner-element,
#modal-preview .spinner-element,
.preview-container .spinner-element {
    width: auto !important;
    height: auto !important;
    min-width: 50px !important;
    min-height: 50px !important;
}

/* Force color visibility with explicit fallbacks */
* {
    --loader-primary: #3b82f6 !important;
    --loader-secondary: #7c3aed !important;
    --loader-tertiary: #f59e0b !important;
    --loader-speed: 1s !important;
}

/* Opera-Specific Comprehensive Fixes */
@media all and (-o-min-device-pixel-ratio: 10000), not all and (-o-min-device-pixel-ratio: 0) {
    /* Opera-specific overrides */
    .loading-overlay {
        background: rgba(10, 10, 10, 0.95) !important;
        display: -o-flexbox !important;
        -o-flex-align: center !important;
        -o-flex-pack: center !important;
    }
    
    .spinner-container {
        display: -o-flexbox !important;
        -o-flex-align: center !important;
        -o-flex-pack: center !important;
    }
    
    /* Force inline colors for Opera without CSS custom property support */
    .spinner-ring { border-top-color: #3b82f6 !important; }
    .dot, .spiral-dot, .orbit-dot { background: #3b82f6 !important; }
    .bar, .wave-bar { background: #3b82f6 !important; }
    .pulse-circle, .bounce-ball { background: #3b82f6 !important; }
    .spinner-cube { background: #3b82f6 !important; }
    .ripple-ring { border-color: #3b82f6 !important; }
    
    /* Force animation timings */
    * { 
        -o-animation-duration: 1s !important; 
        -o-animation-timing-function: linear !important;
    }
}

/* ORIGINAL HALF-RINGS Animation (from navigator-original.php) */
.spinner-half-rings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.spinner-half-rings .spinner-ring {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: 4px solid transparent;
  border-top: 4px solid #3b82f6; /* Primary color - exact original */
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
  -o-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.spinner-half-rings .spinner-ring:nth-child(2) {
  border-top-color: rgba(124, 58, 237, 1); /* Exact original secondary color */
  -webkit-animation-delay: -0.3s;
  -o-animation-delay: -0.3s;
  animation-delay: -0.3s;
  width: 50px;
  height: 50px;
}

.spinner-half-rings .spinner-ring:nth-child(3) {
  border-top-color: rgba(245, 158, 11, 1); /* Exact original tertiary color */
  -webkit-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
  animation-delay: -0.6s;
  width: 40px;
  height: 40px;
}