/* =================================================================
   GLOBAL HINDCARE — FUNDRAISING STORY POPUP
   Triggered by the "Read Story" button on each fund-stories card
   (#fund-stories .fs-story-btn) via assets/js/story-modal.js.
   Uses the site's own tokens (--primary/--secondary from style.css)
   and font families (Nunito Sans / Fraunces).
================================================================= */

/* ---------- "Read Story" card button — distinct from the solid Donate button ---------- */
.fs-donate-btn.fs-story-btn{
  background:#fff;
  color:var(--primary,#023382);
  border:1.5px solid var(--line,rgba(2,51,130,.16));
  box-shadow:none;
}
.fs-card:hover .fs-donate-btn.fs-story-btn{
  border-color:var(--secondary,#00ABB2);
}
.fs-donate-btn.fs-story-btn:hover{
  background:var(--accent,#E9F8F9);
  color:var(--primary,#023382);
  border-color:var(--secondary,#00ABB2);
}
.fs-donate-btn.fs-story-btn svg{
  transition:transform .2s ease;
}
.fs-donate-btn.fs-story-btn:hover svg{
  transform:translateX(2px);
}

/* ---------- popup overlay ---------- */
.sm-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(2,20,50,.6);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.sm-overlay.active{ opacity:1; visibility:visible; }

.sm-box{
  position:relative; background:#fff; border-radius:26px; width:100%; max-width:620px;
  max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 60px 100px -30px rgba(2,20,50,.5);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .35s ease, transform .35s ease;
}
.sm-overlay.active .sm-box{ opacity:1; transform:translateY(0) scale(1); }
.sm-box::-webkit-scrollbar{ width:8px; }
.sm-box::-webkit-scrollbar-thumb{ background:var(--line,#e2e6ee); border-radius:8px; }

.sm-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--primary,#023382); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;
  z-index:3; box-shadow:0 6px 16px -6px rgba(2,20,50,.4);
}
.sm-close:hover{ background:#fff; transform:scale(1.06); }

.sm-media{ position:relative; height:260px; overflow:hidden; background:var(--line,#e2e6ee); border-radius:26px 26px 0 0; }
.sm-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sm-media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:70%;
  background:linear-gradient(180deg, rgba(2,20,50,0) 0%, rgba(2,20,50,.55) 100%);
}
.sm-badge{
  position:absolute; top:16px; left:16px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:7px 15px; border-radius:50px; font-family:'Nunito Sans',sans-serif;
  font-size:11.5px; font-weight:700; color:var(--primary,#023382); z-index:2;
}

.sm-content{ padding:22px 28px 26px; }

.sm-tag{
  display:block; font-family:'Nunito Sans',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--secondary,#00ABB2); margin-bottom:6px;
}
.sm-box h3{
  font-family:'Fraunces',serif; font-size:1.55rem; line-height:1.25; color:var(--primary,#023382);
  margin:0 0 14px;
}

.sm-progress-track{ height:6px; border-radius:6px; background:var(--accent,#E9F8F9); overflow:hidden; margin:0 0 8px; }
.sm-progress-fill{ height:100%; border-radius:6px; background:var(--secondary,#00ABB2); }
.sm-amounts{ display:flex; justify-content:space-between; align-items:baseline; font-family:'Nunito Sans',sans-serif; font-size:.82rem; color:#141414; margin-bottom:18px; }
.sm-amounts b{ color:var(--primary,#023382); font-weight:700; font-size:.92rem; }

.sm-story p{ font-family:'Nunito Sans',sans-serif; font-size:.94rem; line-height:1.75; color:#141414; margin:0 0 14px; }
.sm-story p.sm-quote{ font-style:italic; color:var(--primary,#023382); border-left:3px solid var(--secondary,#00ABB2); padding-left:14px; }
.sm-story p.sm-quote span{ display:block; font-style:normal; font-size:.78rem; font-weight:700; color:var(--secondary,#00ABB2); margin-top:6px; }

.sm-actions{ display:flex; gap:12px; margin-top:8px; }
.sm-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 16px; border-radius:12px; border:none; cursor:pointer;
  font-family:'Nunito Sans',sans-serif; font-weight:700; font-size:.88rem;
  text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.sm-btn:active{ transform:scale(.97); }
.sm-btn-ghost{ background:#fff; color:var(--primary,#023382); border:1.5px solid var(--line,#e2e6ee); }
.sm-btn-ghost:hover{ border-color:var(--secondary,#00ABB2); color:var(--secondary,#00ABB2); }
.sm-btn-solid{ background:var(--secondary,#00ABB2); color:#fff; }
.sm-btn-solid:hover{ background:var(--primary,#023382); }

@media (max-width:560px){
  .sm-media{ height:190px; }
  .sm-content{ padding:20px 20px 22px; }
  .sm-box h3{ font-size:1.3rem; }
  .sm-actions{ flex-direction:column; }
}