/* ============================
   OVERLAY (FULLSCREEN LOADER BACKGROUND)
   ============================
   ✔ Covers entire screen
   ✔ Centers loader perfectly (flexbox)
   ✔ Controls background visibility
============================ */
#globalLoaderOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;  /*100%;*/
  height: 100%; /*100%;*/

  /* ✅ IMPORTANT: Enables perfect centering */
  display: flex; /*!important; /* uncomment to force flex over javascript code*/
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */

  z-index: 9999;

  /* ============================
     BACKGROUND STYLE OPTIONS
     👉 Uncomment ONE only
  ============================ */

  /* Light overlay (default) */
  background: rgba(255, 255, 255, 0.6);

  /* Dark overlay (more visible spinner) */
  /* background: rgba(0, 0, 0, 0.3); */

  /* Completely transparent */
  /* background: transparent; */

  /* ============================ */

  display: none; /* keep LAST → ensures hidden initially */
}



/* ============================
   CSS SPINNER (DEFAULT LOADER)
   👉 COMMENT THIS OUT if using image loader
   ============================
   ✔ Uses your custom color: rgb(164, 106, 62)
   ✔ Smooth rotation
   ✔ Highly visible on light/dark backgrounds
============================ */

/*--[ version 1: basic ]--*/
/*
.jl-spinner {
    
  
  width: 50px;
  height: 50px;

  /* Base ring (faded white) *-/
  border: 6px solid rgba(255, 255, 255, 0.6);

  /* Spinning colored part *-/
  border-top: 6px solid rgb(164, 106, 62);

  border-radius: 50%;

  /* Smooth animation *-/
  animation: jl-spin 0.7s linear infinite;
}
*/

/*--[ version 2: multiple color ]--*/
/*
.jl-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  /* Remove the single 'border' line you had before *-/
  
  /* Add these 4 lines to define your colors *-/
  border-top: 6px solid #e74c3c;    /* Red *-/
  border-right: 6px solid #f1c40f;  /* Yellow *-/
  border-bottom: 6px solid #2ecc71; /* Green *-/
  border-left: 6px solid #3498db;   /* Blue *-/

  /* Keep the animation *-/
  animation: jl-spin 0.7s linear infinite;
}

*/

/*--[ version 3: gradient color ]--*/
.jl-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  /* Create the gradient blending your brand color and a lighter version */
  background: conic-gradient(
    from 0deg, 
    rgb(164, 106, 62),    /* Brand Color (Start) */
    rgb(220, 185, 145),   /* Lighter, golden variation */
    rgb(164, 106, 62)     /* Brand Color (End/Loop) */
  );
  
  /* Mask creates the ring structure (the "hole") */
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));

  /* Maintain animation */
  animation: jl-spin 0.7s linear infinite;
}



/* Spinner animation */
@keyframes jl-spin {
  to {
    transform: rotate(360deg);
  }
}



/* ============================
   IMAGE / GIF LOADER (ALTERNATIVE)
   👉 USE THIS INSTEAD OF CSS SPINNER
   ============================
   ✔ Uncomment this block
   ✔ Then set loaderType: "image" in JS
   ✔ Update image path in plugin
============================ */
/*
.jl-image-loader {
  width: 80px;
  height: 80px;

  // Optional tweaks:
  // object-fit: contain;
  // animation: fadeIn 0.3s ease;
}
*/



/* ============================
   BACKGROUND BLUR EFFECT (OPTIONAL)
   ============================
   ✔ Applied when loader is active
   ✔ Controlled via JS setting: blurBackground: true
   ✔ You can disable globally by commenting this out
============================ */
.jl-blur {
  filter: blur(4px);

  /* Optional: smooth blur transition */
  transition: filter 0.2s ease;
}



/* ============================
   DISABLED BUTTON STYLE
   ============================
   ✔ Automatically applied when button is disabled
   ✔ Works with plugin option: disableButton: true
============================ */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* ============================
   OPTIONAL: FADE-IN ANIMATION
   (useful for image loader or smoother UX)
============================ */
/*
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
*/