/* ── loading.css: Used by the loading directive when loading-message="true" OR loading-progress="true" ── */

:root {
  --lp-primary: #6b7fad;
  --lp-accent: #8b93b8;
  --lp-success: #7aa89e;
  --lp-warn: #b8a88a;
  --lp-pink: #b08fa0;
  --lp-blue: #7a9cc4;
  --lp-text-dark: #3d4a5c;
  --lp-text-mid: #6b7a8d;
  --lp-text-soft: #9aa3af;
  --lp-border: #e8eaed;
}

/* ── Overlay ── */
.lp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10400;
  background: rgba(90, 100, 120, 0.22);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  pointer-events: all;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* No-background variant (used with spinnerOnly) ── */
.lp-overlay-no-bg {
  position: absolute;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: default;
  pointer-events: none;
}

/* ── Card ── */
.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 10px 10px;
  min-width: 250px;
  max-width: 340px;
  width: 80vw;
  text-align: center;
  cursor: default;
  pointer-events: none;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  outline: 3px solid rgba(148, 163, 184, 0.12);
  outline-offset: 0px;
  box-shadow: 0 2px 4px rgba(60, 72, 90, 0.06), 0 8px 24px rgba(107, 127, 173, 0.14), 0 24px 48px rgba(107, 127, 173, 0.08);
  animation: lpFadeIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  overflow: hidden;
}


/* ── Compact card (no subtitle) ── */
.lp-card--compact {
  min-width: 220px;
  max-width: 300px;
  padding: 14px 20px 15px;
}

.lp-card--minimal {
  min-width: 100px;
  max-width: 100px;
  padding: 10px 10px 10px;
}

/* ── Spinner-only card: no border, no background, no shadow, no dots ── */
.lp-card-spinner-only {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  min-width: unset;
  max-width: unset;
  width: auto;
}

/* ── Subtle rule to frame the card ── */
.lp-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
      90deg,
      transparent,
      #e2e8f0 30%,
      #e2e8f0 70%,
      transparent
  );
}

/* ── Spinner-only: suppress the bottom rule ── */
.lp-card-spinner-only::after {
  display: none;
}

@keyframes lpStripe {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes lpFadeIn {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Spinner wrapper — smaller ── */
.lp-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 1px auto 0; /* ↓ reduced from 4px → 2px */
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(107, 127, 173, 0.09) 0%, transparent 72%);
}

/* ── Option 1 ring  — single spinning ring ──  */
.lp-spin-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #e2e8f0; /* ↓ from 4px → 3px */
  border-top-color: var(--lp-primary);
  animation: lpRingSpin 0.75s linear infinite;
}

/* ── Shared spinner keyframes ── */
@keyframes lpRingSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lpPulseRing {
  0% {
    transform: scale(0.15);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes lpBarsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

/* ── Option 2:  ── */
.lp-spin-hbars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 36px;
  height: 36px;
}

.lp-spin-hbars span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: var(--lp-primary);
  top: 3px;
  left: calc(50% - 2px);
  transform-origin: center 15px;
  animation: lpHBarWave 1.1s ease-in-out infinite;
}

.lp-spin-hbars span:nth-child(1) {
  animation-delay: 0.0s;
}

.lp-spin-hbars span:nth-child(2) {
  animation-delay: 0.1s;
}

.lp-spin-hbars span:nth-child(3) {
  animation-delay: 0.2s;
  background: var(--lp-accent);
}

.lp-spin-hbars span:nth-child(4) {
  animation-delay: 0.3s;
}

.lp-spin-hbars span:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes lpHBarWave {
  0%, 100% {
    height: 8px;
    opacity: 0.45;
  }
  50% {
    height: 28px;
    opacity: 1;
  }
}

/* ── Elapsed timer ── */
.lp-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 1px;
}

.lp-timer-icon {
  font-size: 11px;
  color: #909090;
  font-weight: 700;
  line-height: 1;
  filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.35));
}

.lp-timer-value {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #909090;
  min-width: 28px;
  text-align: left;
}

.lp-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ── Solid dark title ── */
.lp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--lp-text-dark);
  letter-spacing: 0.025em;
  line-height: 1.3;
}

/* ── underline accent on the title ── */
.lp-title::after {
  content: "";
  display: block;
  margin: 4px auto 0;
  width: 35px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--lp-primary), var(--lp-accent));
}

.lp-subtitle {
  font-size: 11px;
  color: var(--lp-text-mid);
  line-height: 1.55;
  margin-top: 0;
}

/* ── Progress bar track ── */
.lp-bar {
  height: 3px;
  border-radius: 99px;
  background: #e2e8f0;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.10);
  position: relative;
}

/* ──────────────────────────────────────────────────────────────────────
   BAR TYPE OPTIONS :'sweep','stripe','bounce','neon','segmented','split'
   ────────────────────────────────────────────────────────────────────── */

/* ── Option 1 (default): sweep ── */
.lp-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 45%;
  background: linear-gradient(
      90deg,
      var(--lp-primary),
      var(--lp-accent),
      var(--lp-pink),
      var(--lp-success),
      var(--lp-primary)
  );
  background-size: 300% 100%;
  animation: lpBarSweep 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes lpBarSweep {
  0% {
    transform: translateX(-140%);
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(260%);
    opacity: 0.7;
  }
}

/* ── Option 2: segmented  ── */
.lp-bar-segmented {
  display: flex;
  gap: 4px;
  width: 100%;
}

.lp-bar-segmented span {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: #e2e8f0;
  animation: lpSegPulse 2.0s ease-in-out infinite;
}

.lp-bar-segmented span:nth-child(1) {
  animation-delay: 0.0s;
}

.lp-bar-segmented span:nth-child(2) {
  animation-delay: 0.2s;
}

.lp-bar-segmented span:nth-child(3) {
  animation-delay: 0.4s;
}

.lp-bar-segmented span:nth-child(4) {
  animation-delay: 0.6s;
}

.lp-bar-segmented span:nth-child(5) {
  animation-delay: 0.8s;
}

@keyframes lpSegPulse {
  0%, 100% {
    background: #e2e8f0;
  }
  40%, 60% {
    background: var(--lp-primary);
  }
}

/* ── Dots ── */
.lp-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.lp-dots span {
  display: inline-block;
  width: 4px; /* ↓ from 6px → 4px */
  height: 4px;
  border-radius: 50%;
  animation: lpDot 1.4s ease-in-out infinite both;
}

/* ── Tonal palette — soft grey-blues ── */
.lp-dots span:nth-child(1) {
  background: #94a3b8;
  animation-delay: 0s;
}

/* ── slate-400 ── */
.lp-dots span:nth-child(2) {
  background: #8b93b8;
  animation-delay: 0.18s;
}

/* ── periwinkle ── */
.lp-dots span:nth-child(3) {
  background: #7a9cc4;
  animation-delay: 0.36s;
}

/* ── steel-blue  ── */
.lp-dots span:nth-child(4) {
  background: #8b93b8;
  animation-delay: 0.54s;
}

/* ── periwinkle  ── */
.lp-dots span:nth-child(5) {
  background: #94a3b8;
  animation-delay: 0.72s;
}

@keyframes lpDot {
  0%, 70%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  35% {
    transform: scale(1.15);
    opacity: 1;
  }
}