/* Basic Spinner Styles */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(16, 185, 129, 0.6), rgba(236, 253, 245, 0.6));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(2px); /* Optional: adds soft blur to background */
}


.spinner {
    border: 8px solid #f3f3f3; /* Light gray */
    border-top: 8px solid #26A69A; /* Primary color */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

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


/* ✅ Full-screen auth splash overlay */
.hp-auth-splash{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;               /* shown via JS */
  place-items:center;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(16,185,129,.18), transparent 55%),
    linear-gradient(to bottom right, #ecfdf5, #ffffff);
}

.hp-auth-splash.is-on{ display:grid; }

/* ✅ Loader content container (not login modal) */
.hp-auth-card{
  width: min(520px, 92vw);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}


.hp-auth-logo{
  width:110px !important;
  height:110px !important;
  max-width:110px !important;
  max-height:110px !important;
  object-fit:contain !important;
  display:block;
  margin:0 auto;

  filter: drop-shadow(0 14px 30px rgba(16,185,129,.25));
  animation:
    hpSpin360 1.6s linear infinite,
    hpPulse 1.25s ease-in-out infinite;
  transform-origin:center;
}


.hp-auth-card img{ 
  width:110px !important;
  height:110px !important;
}


.hp-auth-text{
  margin-top:14px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  color:#0f172a;
  letter-spacing:.2px;
}

.hp-auth-sub{
  margin-top:6px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  color:#475569;
}

/* ✅ We use the Handy People auth splash as the ONLY loader */
.spinner-overlay,
#spinner-overlay,
#global-spinner{
  display:none !important;
}


@keyframes hpSpin360{
  from{ transform: rotate(0deg) scale(1); }
  to  { transform: rotate(360deg) scale(1); }
}

@keyframes hpPulse{
  0%,100%{ filter: drop-shadow(0 12px 26px rgba(16,185,129,.22)); opacity: .95; }
  50%    { filter: drop-shadow(0 18px 40px rgba(16,185,129,.35)); opacity: 1; }
}