/* ================= CARD ================= */
.card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(0, 0, 0, 0.05);

  transition: all 0.3s ease;

  display: flex;
  flex-direction: column;
  position: relative;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
  }
}

/* ================= HEADER ================= */
.header {
  padding: 0.85rem 1rem;

  display: flex;
  justify-content: flex-start; // 🔥 LEFT ALIGN
  align-items: center;

  background: linear-gradient(135deg, #5e3817, #7a4b20);

  position: relative;
  overflow: hidden;
}

/* subtle shine effect */
.header::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );

  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.card:hover .header::after {
  transform: translateX(100%);
}

/* ================= STATUS ================= */
.status {
  padding: 5px 12px;
  border-radius: 999px;

  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;

  display: inline-flex;
  align-items: center;
  gap: 4px;

  backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  transition: all 0.25s ease;
}

/* ONGOING */
.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);

  &:hover {
    background: rgba(255, 255, 255, 0.22);
  }
}

/* COMPLETED */
.closed {
  color: #2f7d4f;
  background: linear-gradient(
    180deg,
    rgba(47, 125, 79, 0.16),
    rgba(47, 125, 79, 0.08)
  );
  border-color: rgba(47, 125, 79, 0.28);
  box-shadow:
    0 4px 10px rgba(47, 125, 79, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  &:hover {
    background: rgba(16, 185, 129, 0.5);
  }
}

/* ================= BODY ================= */
.body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  // gap: 0.75rem;
}

/* ================= PROGRESS ================= */
.progressSection {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.progressTop {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6b7280;
}

.progressBar {
  height: 7px;
  background: #f3f4f6;
  border-radius: 20px;
  overflow: hidden;
}

.progressFill {
  height: 100%;
  background: linear-gradient(135deg, #7a4b20, #d6a56f);
  transition: width 0.6s ease;
}

.card:hover .progressFill {
  filter: brightness(1.05);
}

/* PROGRESS TEXT */
.progressBottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* ================= TITLE ================= */
.title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  // line-height: 1.4;
  padding-top: 1.2rem;
}

/* ================= DESCRIPTION ================= */
.description {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: .3rem;
  margin-bottom: 1rem;

  svg {
    font-size: 14px;
    color: #7a4b20;
  }

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ================= BUTTON ================= */
.cardBtn {
  margin-top: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 0.45rem 0.75rem;
  border-radius: 8px; 

  font-size: 0.75rem;      
  font-weight: 600;

  background: transparent;
  border: 1px solid rgba(122, 75, 32, 0.25);
  color: #7a4b20;

  width: 100%;    

  transition: all 0.2s ease;

  &:hover {
    background: rgba(122, 75, 32, 0.08);
    border-color: rgba(122, 75, 32, 0.4);
    transform: translateY(-1px);
  }

  &:active {
    transform: scale(0.96);
  }
}

/* ================= SKELETON ================= */
.skeleton,
.skeletonLine,
.buttonSkel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;

  background: linear-gradient(
    90deg,
    rgba(94, 56, 23, 0.05) 25%,
    rgba(94, 56, 23, 0.12) 37%,
    rgba(94, 56, 23, 0.05) 63%
  );

  background-size: 800px 100%;
  animation: shimmer 1.3s infinite linear;
}

/* ================= HEADER SKELETON ================= */
.headerSkeleton {
  height: 48px;
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(94, 56, 23, 0.9),
    rgba(122, 75, 32, 0.85)
  );

  /* subtle moving light */
  &::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

    animation: shimmerHeader 2s infinite;
  }
}

@keyframes shimmerHeader {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ================= TEXT LINES ================= */
.skeletonLine {
  height: 10px;
}

.wide {
  width: 100%;
}

.small {
  width: 55%;
}

.titleSkel {
  width: 75%;
  height: 14px;
  border-radius: 6px;
}

/* ================= PROGRESS ================= */
.progressBar.skeleton {
  height: 7px;
  border-radius: 20px;
}

/* ================= BUTTON ================= */
.buttonSkel {
  height: 34px;
  border-radius: 10px;
  margin-top: 0.6rem;
}

/* ================= EXTRA (OPTIONAL BUT 🔥) ================= */

/* slight pulse for realism */
.skeletonLine,
.titleSkel {
  animation-duration: 1.4s;
}

/* spacing realism */
.body .skeletonLine + .skeletonLine {
  margin-top: 6px;
}


/* ================= PLEDGERS ================= */
.pledgers {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 0.75rem;
  font-weight: 500;

  color: #6b7280;

  margin-top: 0.8rem;

  svg {
    font-size: 14px;
    color: #7a4b20;
  }

  span {
    letter-spacing: 0.2px;
  }
}