/* fundraiser/static/css/fundraiser.css
   ---------------------------------------------------------------
   Fundraiser page polish aligned to harmonies_site.css variables.
   Scope: .fundraiser-page (to avoid global side effects)
   --------------------------------------------------------------- */


/* ===============================================================
   1) DONATION CARD (AMOUNT BOX)
   =============================================================== */

.fundraiser-page .price-box{
  border: 1px solid var(--bh-surface-border);
  border-radius: 14px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(8px);
}

.fundraiser-page .amount-display{
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fundraiser-page .amount-row{
  gap: .75rem;
}

.fundraiser-page .amount-input{
  max-width: 170px;
}

.fundraiser-page .next-tier{
  border-top: 1px dashed rgba(0,0,0,0.18);
  margin-top: .75rem;
  padding-top: .75rem;
}


/* ===============================================================
   2) QUICK AMOUNT BUTTONS
   =============================================================== */

.fundraiser-page .quick-amounts .btn{
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1.1;
}

@media (max-width: 575px){
  .fundraiser-page .quick-amounts .btn{
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
  }
}


/* ===============================================================
   3) SLIDER (SOLID RED THUMB)
   =============================================================== */

/* Base */
.fundraiser-page .price-slider,
.fundraiser-page input[type="range"].form-range{
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  accent-color: #dc3545;
  background: transparent;
  border: 0;
}

.fundraiser-page .price-slider:focus,
.fundraiser-page .price-slider:focus-visible,
.fundraiser-page input[type="range"].form-range:focus,
.fundraiser-page input[type="range"].form-range:focus-visible{
  box-shadow: none;
}

/* Track — WebKit */
.fundraiser-page .price-slider::-webkit-slider-runnable-track,
.fundraiser-page input[type="range"].form-range::-webkit-slider-runnable-track{
  background: #1f1f1f;
  height: 0.5rem;
  border-radius: 1rem;
}

/* Track — Firefox */
.fundraiser-page .price-slider::-moz-range-track,
.fundraiser-page input[type="range"].form-range::-moz-range-track{
  background: #1f1f1f;
  height: 0.5rem;
  border-radius: 1rem;
}

.fundraiser-page .price-slider::-moz-range-progress,
.fundraiser-page input[type="range"].form-range::-moz-range-progress{
  background: #1f1f1f;
  height: 0.5rem;
  border-radius: 1rem;
}

/* Thumb — WebKit (Chrome/Safari/Edge) */
.fundraiser-page .price-slider::-webkit-slider-thumb,
.fundraiser-page input[type="range"].form-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dc3545 !important;
  background-color: #dc3545 !important;
  opacity: 1 !important;
  cursor: pointer;
  border: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-top: -8px;
}

/* Thumb — Firefox */
.fundraiser-page .price-slider::-moz-range-thumb,
.fundraiser-page input[type="range"].form-range::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dc3545 !important;
  background-color: #dc3545 !important;
  opacity: 1 !important;
  cursor: pointer;
  border: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* ===============================================================
   4) GIFTS
   =============================================================== */

.fundraiser-page .gift-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}

.fundraiser-page .gift-item{
  display: none;
  width: 92px;
  text-align: center;
}

.fundraiser-page .gift-item.gift-revealed{
  display: block;
}

.fundraiser-page .gift-visual{
  width: 92px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fundraiser-page .gift-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fundraiser-page .gift-emoji{
  font-size: 2.4rem;
  line-height: 1;
}

.fundraiser-page .gift-label{
  margin-top: 6px;
  font-weight: 800;
  font-size: .78rem;
  line-height: 1.15;
}


/* ===============================================================
   5) PRIMARY CTA
   =============================================================== */


.fundraiser-page .buy-button{
  width: 100%;
  padding: 0.9rem 1rem;
  font-size: 1.05rem;
  font-weight: 800;
}


/* ===============================================================
   6) PROGRESS BAR
   =============================================================== */

.fundraiser-page .custom-progress{
  width: 100%;
  height: 22px;
  background: rgba(0,0,0,0.86);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
}

.fundraiser-page .custom-progress-bar{
  height: 100%;
  width: 0%;
  background: var(--bh-accent);
  transition: width 0.5s cubic-bezier(.4,2,.6,1);
}


/* ===============================================================
   7) SUPPORTERS LIST
   =============================================================== */

.fundraiser-page .donor-list{
  border-radius: 14px;
  overflow: hidden;
}

.fundraiser-page .donor-list-item{
  padding: 0.85rem 1rem;
  border-color: rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
}

.fundraiser-page .donor-list-item + .donor-list-item{
  border-top-color: rgba(0,0,0,0.06);
}

.fundraiser-page .donor-list-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fundraiser-page .donor-list-name,
.fundraiser-page .donor-list-amount{
  display: block;
}

.fundraiser-page .donor-list-name{
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fundraiser-page .donor-list-amount{
  flex: 0 0 auto;
  white-space: nowrap;
}

.fundraiser-page .donor-list-item-loading{
  background: rgba(255,255,255,0.72);
}

.fundraiser-page .donor-name-placeholder,
.fundraiser-page .donor-amount-placeholder{
  display: block;
  height: 0.95rem;
  border-radius: 999px;
}

.fundraiser-page .donor-name-placeholder{
  width: min(62%, 12rem);
}

.fundraiser-page .donor-amount-placeholder{
  width: 4.75rem;
}

.fundraiser-page .donor-list-item-empty{
  font-size: 0.95rem;
}


/* ===============================================================
   8) STICKY SIDE CARDS (DESKTOP)
   =============================================================== */

@media (min-width: 768px){
  .fundraiser-page .sticky-side-card{
    position: sticky;
    top: 24px;
    z-index: 10;
  }
}


/* ===============================================================
  9) MOBILE STICKY DONATE BAR
   =============================================================== */

.fundraiser-sticky-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
}

.fundraiser-sticky-bar .btn{
  border-radius: 14px;
  font-weight: 900;
}

/* Ensure bar doesn't cover content on mobile */
@media (max-width: 767.98px){
  body{
    padding-bottom: 84px;
  }
}