/* ==============================
   Loading & Preloader Styles
   ============================== */

/* -----------------------------------------------
   CSS custom property fallback for transition timing
   (defined here in case the theme CSS doesn't set it)
   ----------------------------------------------- */
:root {
  --transition-default: 0.4s ease;
}

/* -----------------------------------------------
   Site Preloader — server-rendered in app/layout.js
   Covers the page on first paint before JS hydrates.
   ClientLayout adds .site-preloader-hide to trigger
   the CSS fade-out, then removes the element from DOM.
   ----------------------------------------------- */
#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  opacity: 1;
  transition: opacity 0.4s ease;
  /* GPU-accelerated layer to prevent any repaint during fade */
  will-change: opacity;
}

#site-preloader.site-preloader-hide {
  opacity: 0;
  pointer-events: none;
}

/* Spinner inside the site preloader — same visual style as .loading-spinner */
.site-preloader-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-preloader-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--color-primary-1, #c9a84c);
  border-right-color: var(--color-primary-2, #a07c30);
  animation: loading-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
}

.site-preloader-ring:nth-child(1) { width: 60px; height: 60px; animation-delay: -0.45s; }
.site-preloader-ring:nth-child(2) { width: 46px; height: 46px; animation-delay: -0.3s;  }
.site-preloader-ring:nth-child(3) { width: 32px; height: 32px; animation-delay: -0.15s; }

/* -----------------------------------------------
   Loading Component Styles (.loading-*)
   ----------------------------------------------- */

/* Base loading styles */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-global);
  direction: rtl;
  text-align: right;
  opacity: 1;
  visibility: visible;
}

/* Full page loader */
.loading-fullpage {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10000 !important;
  /* Match body gradient background with transparency and backdrop-filter */
  /* Use solid fallback color first, then gradient overlay */
  background-color: rgba(255, 255, 255, 0.80) !important;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(224, 224, 224, 0.75) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  /* Backdrop filter for blur effect - must be on same element as background */
  backdrop-filter: blur(10px) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(10px) brightness(1.1) !important;
  /* Ensure it's always on top and creates new stacking context */
  isolation: isolate !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.loading-fullpage .loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* Overlay loader */
.loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1000 !important;
  /* Match body gradient background with transparency and backdrop-filter */
  /* Use solid fallback color first, then gradient overlay */
  background-color: rgba(255, 255, 255, 0.75) !important;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.70) 0%, rgba(224, 224, 224, 0.70) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  /* Backdrop filter for blur effect - must be on same element as background */
  backdrop-filter: blur(8px) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(8px) brightness(1.08) !important;
  /* Ensure it's always on top and creates new stacking context */
  isolation: isolate !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.loading-overlay .loading-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 100%;
}

/* Inline loader */
.loading-inline {
  padding: 48px 24px;
  width: 100%;
  min-height: 200px;
}

.loading-inline .loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* Button loader */
.loading-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-inline-end: 8px;
}

/* Loading spinner - gradient rotating rings */
.loading-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  will-change: transform;
}

.loading-spinner-ring {
  position: absolute;
  border-radius: 50%;
  /* Using border approach for better browser compatibility */
  border: 3px solid transparent;
  border-top-color: var(--color-primary-1);
  border-right-color: var(--color-primary-2);
  animation: loading-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  will-change: transform;
  /* Fallback: ensure visibility */
  opacity: 1;
  visibility: visible;
}

.loading-spinner-ring:nth-child(1) {
  width: 60px;
  height: 60px;
  animation-delay: -0.45s;
  border-width: 3px;
  border-top-color: var(--color-primary-1);
  border-right-color: var(--color-primary-2);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.loading-spinner-ring:nth-child(2) {
  width: 48px;
  height: 48px;
  animation-delay: -0.3s;
  border-width: 3px;
  border-top-color: var(--color-primary-2);
  border-right-color: var(--color-primary-1);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.loading-spinner-ring:nth-child(3) {
  width: 36px;
  height: 36px;
  animation-delay: -0.15s;
  border-width: 3px;
  border-top-color: var(--color-primary-1);
  border-right-color: var(--color-primary-2);
  border-bottom-color: transparent;
  border-left-color: transparent;
}

/* Button spinner - dots */
.loading-spinner-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.loading-spinner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-2);
  animation: loading-pulse 1.4s ease-in-out infinite both;
  will-change: transform, opacity;
}

.loading-spinner-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-spinner-dot:nth-child(3) {
  animation-delay: 0s;
}

/* Loading text */
.loading-text {
  margin: 0;
  color: var(--color-primary-1);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.7;
  animation: loading-fade 2s ease-in-out infinite;
  opacity: 1;
  visibility: visible;
}

/* Size variants */
.loading-small .loading-spinner {
  width: 40px;
  height: 40px;
}

.loading-small .loading-spinner-ring:nth-child(1) {
  width: 40px;
  height: 40px;
  border-width: 2px;
}

.loading-small .loading-spinner-ring:nth-child(2) {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.loading-small .loading-spinner-ring:nth-child(3) {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.loading-small .loading-text {
  font-size: 16px;
}

.loading-large .loading-spinner {
  width: 80px;
  height: 80px;
}

.loading-large .loading-spinner-ring:nth-child(1) {
  width: 80px;
  height: 80px;
  border-width: 4px;
}

.loading-large .loading-spinner-ring:nth-child(2) {
  width: 64px;
  height: 64px;
  border-width: 4px;
}

.loading-large .loading-spinner-ring:nth-child(3) {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.loading-large .loading-text {
  font-size: 20px;
}

/* Animations */
@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.75);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes loading-fade {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

/* Fade in/out transitions */
@keyframes loading-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loading-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Fade out class for smooth exit */
.loading.loading-fade-out {
  animation: loading-fade-out var(--transition-default) forwards;
  pointer-events: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .loading {
    animation: none;
    opacity: 1;
  }
  
  .loading-spinner-ring,
  .loading-spinner-dot,
  .loading-text {
    animation: none;
  }
  
  .loading-spinner-ring {
    animation: loading-spin 2s linear infinite;
  }
  
  .loading-spinner-dot {
    opacity: 0.7;
  }
  
  .loading-text {
    opacity: 1;
  }
}

/* Performance: Mobile adjustments */
@media (max-width: 768px) {
  .loading-fullpage {
    backdrop-filter: blur(6px) brightness(1.05) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) brightness(1.05) saturate(1.05);
  }
  
  .loading-overlay {
    backdrop-filter: blur(4px) brightness(1.03) saturate(1.03);
    -webkit-backdrop-filter: blur(4px) brightness(1.03) saturate(1.03);
  }
  
  .loading-inline {
    padding: 40px 20px;
    min-height: 160px;
  }
  
  .loading-text {
    font-size: 16px;
  }
  
  .loading-fullpage .loading-content,
  .loading-overlay .loading-content {
    gap: 24px;
  }
  
  .loading-inline .loading-content {
    gap: 20px;
  }
}

/* Dark mode support - disabled to always use light background */
/* @media (prefers-color-scheme: dark) {
  .loading-fullpage {
    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%) !important;
  }
  
  .loading-overlay {
    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%) !important;
  }
} */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .loading-text {
    color: var(--color-primary-1);
    font-weight: 500;
  }
  
  .loading-spinner-ring {
    opacity: 1;
  }
  
  .loading-spinner-dot {
    opacity: 1;
  }
}

/* Focus styles for accessibility */
.loading:focus-visible {
  outline: 2px solid var(--color-primary-1);
  outline-offset: 4px;
}

/* Print styles - hide loading indicators */
@media print {
  .loading {
    display: none !important;
  }
}