/* ===========================
   LocalLink Loader System
   =========================== */

:root{
  --ll-loader-bg: rgba(255,255,255,.72);
  --ll-loader-card: rgba(255,255,255,.96);
  --ll-loader-border: #dbe3dc;
  --ll-loader-accent: #556b2f; /* verde militar */
  --ll-loader-text: #1f2937;
  --ll-skeleton-base: #e9ecef;
  --ll-skeleton-shine: #f8f9fa;
}

/* ===========================
   FULLSCREEN / PAGE OVERLAY
   =========================== */
.ll-loader-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--ll-loader-bg);
  backdrop-filter: blur(2px);
  z-index: 9999;
  padding: 20px;
}

.ll-loader-overlay.is-active{
  display: flex;
}

.ll-loader-box{
  min-width: 220px;
  max-width: 320px;
  text-align: center;
  background: var(--ll-loader-card);
  border: 1px solid var(--ll-loader-border);
  border-radius: 18px;
  padding: 22px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.ll-spinner{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid #e5e7eb;
  border-top-color: var(--ll-loader-accent);
  margin: 0 auto 12px;
  animation: ll-spin .75s linear infinite;
}

.ll-loader-text{
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ll-loader-text);
  letter-spacing: .2px;
}

/* ===========================
   INLINE LOADER
   =========================== */
.ll-inline-loader{
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ll-loader-text);
}

.ll-inline-loader.is-active{
  display: inline-flex;
}

.ll-inline-loader .ll-inline-spinner{
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-top-color: var(--ll-loader-accent);
  border-radius: 50%;
  animation: ll-spin .7s linear infinite;
}

/* ===========================
   BUTTON LOADING STATE
   =========================== */
.ll-btn-loading{
  position: relative;
  pointer-events: none;
  opacity: .88;
}

.ll-btn-loading .ll-btn-text{
  opacity: 0;
}

.ll-btn-loading .ll-btn-spinner{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
}

.ll-btn-spinner-icon{
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ll-spin .7s linear infinite;
}

/* caso o botão tenha fundo claro */
.ll-btn-light.ll-btn-loading .ll-btn-spinner-icon{
  border: 2px solid rgba(31,41,55,.18);
  border-top-color: var(--ll-loader-accent);
}

/* ===========================
   SKELETON
   =========================== */
.ll-skeleton{
  position: relative;
  overflow: hidden;
  background: var(--ll-skeleton-base);
}

.ll-skeleton::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  );
  animation: ll-shimmer 1.2s infinite;
}

.ll-skeleton-card{
  background: #fff;
  border: 1px solid #eef1f4;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}

.ll-skeleton-media{
  width: 100%;
  height: 180px;
  border-radius: 14px;
  margin-bottom: 12px;
}

.ll-skeleton-line{
  height: 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.ll-skeleton-line.w-100{ width: 100%; }
.ll-skeleton-line.w-80{ width: 80%; }
.ll-skeleton-line.w-60{ width: 60%; }
.ll-skeleton-line.w-40{ width: 40%; }

.ll-skeleton-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

/* ===========================
   HELPERS
   =========================== */
.ll-hidden{
  display: none !important;
}

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

@keyframes ll-shimmer{
  100%{ transform: translateX(100%); }
}