/* 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 input[type="range"].price-slider{
  width: 100%;
  height: 8px;

  -webkit-appearance: none;
  appearance: none;

  background: transparent; /* track is styled via pseudo-elements */
  outline: 2px solid var(--bh-black);
  border-radius: 8px;

  position: relative;
  z-index: 1;
}

.fundraiser-page input[type="range"].price-slider:focus,
.fundraiser-page input[type="range"].price-slider:focus-visible{
  outline: 2px solid var(--bh-black);
}

/* Track — WebKit */
.fundraiser-page input[type="range"].price-slider::-webkit-slider-runnable-track{
  background: var(--bh-black);
  height: 8px;
  border-radius: 8px;
}

/* Track — Firefox */
.fundraiser-page input[type="range"].price-slider::-moz-range-track{
  background: var(--bh-black);
  height: 8px;
  border-radius: 8px;
}

/* Thumb — WebKit (Chrome/Safari/Edge) */
.fundraiser-page input[type="range"].price-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 24px;
  height: 24px;
  border-radius: 999px;

  background: var(--bh-accent) !important;
  background-color: var(--bh-accent) !important;
  background-image: none !important;

  opacity: 1 !important;

  border: none !important;
  box-shadow: none !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;

  cursor: pointer;
}

/* Thumb — Firefox */
.fundraiser-page input[type="range"].price-slider::-moz-range-thumb{
  width: 24px;
  height: 24px;
  border-radius: 999px;

  background: var(--bh-accent) !important;
  background-color: var(--bh-accent) !important;
  background-image: none !important;

  opacity: 1 !important;

  border: none !important;
  box-shadow: none !important;

  cursor: pointer;
}


/* ===============================================================
   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) STICKY SIDE CARDS (DESKTOP)
   =============================================================== */

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


/* ===============================================================
   8) 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;
  }
}