/* scl-style.css - Loader styles */


/* Fullscreen overlay */
.scl-overlay{
position:fixed;
left:0; top:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
z-index:99999; background:rgba(0, 0, 0, 0.6);
}
.scl-overlay .scl-spinner{
width:56px; height:56px; border:6px solid #ddd;
border-top-color:#2271b1; border-radius:50%;
animation:scl-spin 1s linear infinite;
}
@keyframes scl-spin{ to{ transform:rotate(360deg); } }


/* Per-card overlay (for product cards) */
.scl-card-overlay{
position:absolute; left:0; top:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
background:rgba(0, 0, 0, 0.6); z-index:9999;
}
.scl-card-overlay .scl-spinner{ width:40px; height:40px; border-width:5px; }


/* Helpers */
.scl-hidden{ display:none !important; }


/* You can customize sizes / opacity / colors here */

/* spinner Kadence (já no HTML) fica visível quando scl-is-loading aplicado */
.button .kadence-spinner-svg { display: none; visibility: hidden; }
.button.scl-is-loading .kadence-spinner-svg { display: inline-block; visibility: visible; }

/* spinner inline criado pelo script (caso não exista svg) */
.scl-inline-spinner{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid #ddd;
  border-top-color: #2271b1; border-radius:50%;
  border-radius: 50%;
  animation: scl-spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes scl-spin { to { transform: rotate(360deg); } }

/* overlay / spinner (opcional — ajuste conforme seu tema) */
.scl-overlay {
  position: fixed;
  z-index: 99999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scl-card-overlay {
  position: absolute;
  z-index: 999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scl-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: scl-spin 0.8s linear infinite;
}

/* estilo leve no botão (NÃO bloquear pointer-events) */
.button.scl-is-loading { opacity: 0.95; }

/* spinner flutuante (aparece na frente da tela, não bloqueia interações) */
.scl-floating-spinner{
  position: fixed;
  z-index: 999999;
  width: 44px;
  height: 44px;
  margin: 0;
  pointer-events: none; /* NÃO bloqueia clique */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  /* opcional: sombra leve para destaque */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

/* aparência do círculo giratório */
.scl-floating-spinner::before{
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: scl-spin 0.8s linear infinite;
}

@keyframes scl-spin { to { transform: rotate(360deg); } }

/* garante que o spinner interno do botão continue visível quando scl-is-loading aplicado */
.button.scl-is-loading .kadence-spinner-svg { display: inline-block !important; visibility: visible !important; }