/* =========================================
 CAMPAIGN SIDEBAR COMPONENT
 ========================================= */
/* Main sidebar container */

.growfund-page-container .growfund-project__sidebar {
  flex-shrink: 0;
  width: 470px;
  border-radius: var(--growfund-radius-4);
  padding: var(--growfund-spacing-8);
  height: fit-content;
}

/* =========================================
 STATS CARD COMPONENT
 ========================================= */
.growfund-page-container .growfund-stats-card {
  margin-bottom: var(--growfund-spacing-6);
}

.growfund-page-container .growfund-stats-card__amount {
  font-size: var(--growfund-font-size-8);
  font-weight: var(--growfund-font-weight-semibold);
  color: var(--growfund-gray-15);
  margin-bottom: var(--growfund-spacing-3);
  line-height: 32px;
}

.growfund-page-container .growfund-stats-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--growfund-spacing-3);
}

.growfund-page-container .growfund-stats-card__backers {
  font-size: var(--growfund-font-size-3);
  color: var(--growfund-gray-12);
  line-height: 1.3;
}

.growfund-page-container .growfund-stats-card__backers strong {
  color: var(--growfund-gray-15);
  font-weight: var(--growfund-font-weight-semibold);
}

.growfund-page-container .growfund-stats-card__goal {
  font-size: var(--growfund-font-size-3);
  color: var(--growfund-gray-13);
}

.growfund-page-container .growfund-progress {
  width: 100%;
  height: 8px;
  background-color: var(--growfund-gray-8);
  border-radius: var(--growfund-radius-sm);
  overflow: hidden;
}

.growfund-page-container .growfund-progress__bar {
  height: 100%;
  background-color: var(--growfund-gray-16);
  transition: width 0.3s ease;
  border-radius: 9999px;
}

/* =========================================
 ACTION BUTTONS COMPONENT
 ========================================= */
.growfund-page-container .growfund-action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--growfund-spacing-3);
  margin-bottom: var(--growfund-spacing-6);
}

/* =========================================
 NOTICE COMPONENT
 ========================================= */
.growfund-page-container .growfund-notice {
  color: var(--growfund-gray-12);
  font-size: var(--growfund-font-size-3);
  line-height: 21px;
  margin-bottom: var(--growfund-spacing-4);
}

.growfund-page-container .growfund-notice__text {
  margin-bottom: var(--growfund-spacing-4);
}

.growfund-page-container .growfund-notice strong {
  text-decoration: underline;
  color: var(--growfund-gray-15);
  font-weight: var(--growfund-font-weight-semibold);
}

/* =========================================
 DONATION NOTICE COMPONENT
 ========================================= */
.growfund-page-container .growfund-donation-notice {
  color: var(--growfund-gray-12);
  font-size: var(--growfund-font-size-3);
  line-height: 21px;
  margin-bottom: var(--growfund-spacing-4);
}

.growfund-page-container .growfund-donation-notice__text {
  margin-bottom: var(--growfund-spacing-6);
  padding-bottom: var(--growfund-spacing-6);
  display: flex;
  align-items: center;
  gap: var(--growfund-spacing-3);
  border-bottom: 1px solid var(--growfund-border-primary);
}

.growfund-page-container .growfund-donation-notice__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.growfund-page-container .growfund-donation-notice__content {
  flex: 1;
  min-width: 0;
}

/* =========================================
 CREATOR CARD COMPONENT
 ========================================= */
.growfund-page-container .growfund-creator-card {
  border-top: 1px solid var(--growfund-border-primary);
  padding-top: var(--growfund-spacing-6);
  max-height: 202px;
  overflow-y: auto;
}

.growfund-page-container .growfund-creator-card-summary {
  display: flex;
  gap: var(--growfund-spacing-2);
  margin-bottom: var(--growfund-spacing-4);
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars {
  width: 105px;
  flex-shrink: 0;
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars img {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--growfund-gray-1);
  overflow: hidden;
  background-color: var(--growfund-gray-8);
  flex-shrink: 0;
  object-fit: cover;
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars img:first-child {
  z-index: 3;
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars img:nth-child(2) {
  z-index: 2;
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars img:nth-child(3) {
  z-index: 1;
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-avatars img:not(:first-child) {
  margin-left: calc(-1 * var(--growfund-spacing-6));
}

.growfund-page-container .growfund-creator-card-summary .growfund-creator-card-summary-info .growfund-creator-card-summary-info-text {
  font-weight: 500;
  font-size: var(--growfund-font-size-4);
  margin-bottom: var(--growfund-spacing-3);
  line-height: 1.5;
}

.growfund-page-container .growfund-creator-card__content {
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.growfund-page-container .growfund-creator-card__content.hidden {
  max-height: 0;
  opacity: 0;
}

.growfund-page-container .growfund-creator-card__content.active {
  max-height: 1000px;
  opacity: 1;
}

.growfund-page-container .growfund-creator-card__location {
  display: flex;
  align-items: center;
  gap: var(--growfund-spacing-2);
  margin-bottom: var(--growfund-spacing-4);
  font-size: var(--growfund-font-size-3);
  color: var(--growfund-gray-12);
}

.growfund-page-container .growfund-location-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--growfund-gray-11);
}

.growfund-page-container .growfund-creator-card__profile {
  display: flex;
  gap: var(--growfund-spacing-3);
  margin-bottom: var(--growfund-spacing-4);
}

.growfund-page-container .growfund-creator-card__avatar--sm {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--growfund-gray-8);
  flex-shrink: 0;
}

.growfund-page-container .growfund-creator-card__avatar--sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.growfund-page-container .growfund-creator-card__info {
  flex: 1;
  min-width: 0;
}

.growfund-page-container .growfund-creator-card__name {
  font-size: var(--growfund-font-size-4);
  font-weight: var(--growfund-font-weight-semibold);
  color: var(--growfund-gray-16);
  margin-bottom: var(--growfund-spacing-1-5);
  line-height: 1.3;
}

.growfund-page-container .growfund-creator-card__stats {
  font-size: var(--growfund-font-size-3);
  color: var(--growfund-gray-12);
  line-height: 1.3;
}

.growfund-page-container .growfund-contributors-toggle-button {
  color: var(--growfund-green-4);
  font-size: var(--growfund-font-size-3);
  font-weight: 500;
}

.growfund-page-container .growfund-contributors-toggle-button-up {
  margin-left: var(--growfund-spacing-15);
}

/* =========================================
 RESPONSIVE DESIGN
 ========================================= */
@media (max-width: 1023px) {
  .growfund-page-container .growfund-project__sidebar {
    width: 100%;
    order: 1;
    padding: var(--growfund-spacing-4);
  }

  .growfund-page-container .growfund-stats-card__backers {
    font-size: var(--growfund-font-size-2);
  }

  .growfund-page-container .growfund-stats-card__amount {
    font-size: var(--growfund-font-size-6);
    margin-bottom: var(--growfund-spacing-2);
  }

  .growfund-page-container .growfund-stats-card__footer {
    align-items: flex-start;
    gap: var(--growfund-spacing-1);
  }

  .growfund-page-container .growfund-stats-card__goal {
    font-size: var(--growfund-font-size-2);
  }

  .growfund-page-container .growfund-action-buttons {
    margin-bottom: var(--growfund-spacing-4);
    gap: var(--growfund-spacing-2);
  }

  .growfund-page-container .growfund-notice {
    font-size: var(--growfund-font-size-2);
    line-height: 18px;
    margin-bottom: var(--growfund-spacing-4);
  }

  .growfund-page-container .growfund-donation-notice {
    font-size: var(--growfund-font-size-2);
    line-height: 18px;
    margin-bottom: var(--growfund-spacing-4);
  }

  .growfund-page-container .growfund-donation-notice__text {
    gap: var(--growfund-spacing-2);
    margin-bottom: var(--growfund-spacing-4);
    padding-bottom: var(--growfund-spacing-4);
  }

  .growfund-page-container .growfund-donation-notice__icon {
    width: 20px;
    height: 20px;
  }

  .growfund-page-container .growfund-creator-card {
    padding-top: var(--growfund-spacing-4);
    max-height: none;
  }

  .growfund-page-container .growfund-creator-card__location {
    font-size: var(--growfund-font-size-2);
    margin-bottom: var(--growfund-spacing-3);
  }

  .growfund-page-container .growfund-creator-card__profile {
    gap: var(--growfund-spacing-2);
    margin-bottom: var(--growfund-spacing-3);
  }

  .growfund-page-container .growfund-creator-card__avatar--sm {
    width: 40px;
    height: 40px;
  }

    .growfund-page-container .growfund-contributors-toggle-button-up {
      margin-left: var(--growfund-spacing-12);
    }

  .growfund-page-container .growfund-creator-card__name {
    font-size: var(--growfund-font-size-3);
  }

  .growfund-page-container .growfund-creator-card__stats {
    font-size: var(--growfund-font-size-2);
  }
}