/* ==========================================================================
   Unified Kheldwar Loader Styles (Admin & Website)
   Matches Kheldwar Palette: #1A5DB7 (Royal Blue) & #F9581D (Vibrant Orange)
   ========================================================================== */

/* Fullscreen Overlay Container */
.kd-global-loader,
.save_loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* Always flex so when display: block/flex is toggled, children center properly */
  display: none;
  align-items: center !important;
  justify-content: center !important;
}

/* Semi-transparent Backdrop with Subtle Blur */
.kd-loader-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Centered Box */
.kd-loader-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1000000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 32px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(26, 93, 183, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(26, 93, 183, 0.1) !important;
  min-width: 110px !important;
}

/* Dual Ring Kheldwar Spinner */
.kd-spinner-brand {
  position: relative;
  width: 52px;
  height: 52px;
}

/* Outer Blue Ring */
.kd-spinner-ring.kd-ring-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  border: 3.5px solid transparent;
  border-top-color: #1A5DB7;
  border-right-color: #1A5DB7;
  border-radius: 50%;
  animation: kd-spin-outer 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

/* Inner Orange Ring */
.kd-spinner-ring.kd-ring-inner {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 36px;
  height: 36px;
  border: 3px solid transparent;
  border-bottom-color: #F9581D;
  border-left-color: #F9581D;
  border-radius: 50%;
  animation: kd-spin-inner 0.8s linear infinite;
}

/* Center Glow Dot */
.kd-spinner-dot {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 8px;
  height: 8px;
  background: #F9581D;
  border-radius: 50%;
  animation: kd-pulse 1.2s ease-in-out infinite alternate;
}

/* Optional Caption text under the spinner */
.kd-loader-text {
  margin: 12px 0 0 0 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1A5DB7 !important;
  letter-spacing: 0.02em !important;
}

/* In-Page / Inline Section Spinner (e.g. infinite scroll pagination) */
.kd-inline-spinner-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px 0 !important;
  width: 100% !important;
}

.kd-spinner-sm {
  width: 36px !important;
  height: 36px !important;
}
.kd-spinner-sm .kd-ring-outer {
  width: 36px !important;
  height: 36px !important;
  border-width: 2.5px !important;
}
.kd-spinner-sm .kd-ring-inner {
  top: 6px !important;
  left: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-width: 2px !important;
}
.kd-spinner-sm .kd-spinner-dot {
  top: 15px !important;
  left: 15px !important;
  width: 6px !important;
  height: 6px !important;
}

@keyframes kd-spin-outer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes kd-spin-inner {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes kd-pulse {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* DataTable-scoped loader (admin listings)
   Overlays only the table's rows/header cell during AJAX search/filter/sort/paging,
   so the page header, sidebar, search box and pagination stay visible and usable.
   Markup is injected by the datatable() helper in resources/js/admin/common.js. */
.kd-dt-has-loader {
  position: relative !important;
}

.kd-dt-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: inherit;
  pointer-events: all;
}

.kd-dt-loading > .kd-dt-loader {
  display: flex;
}

/* Centered white card around the spinner (same look as the full-page loader box) */
.kd-dt-loader .kd-inline-spinner-wrap {
  width: auto !important;
  padding: 18px 24px !important;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(26, 93, 183, 0.1);
  box-shadow: 0 10px 30px rgba(26, 93, 183, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Admin page loader (resources/views/components/page_loader_script.blade.php):
   show the global loader while <html> has .kd-page-loading (page loading / navigating). */
html.kd-page-loading #kd-global-loader {
  display: flex !important;
}