/*
  Ensany v2 — campaign detail page (website/campaign.blade.php).
  Scoped under #v2Campaign so it never leaks onto the rest of the site.
  Load v2-shared.css alongside this file (for the navbar/footer/focus/
  scrollbar rules) — do NOT load v2-home.css here, that file is specific to
  the homepage's own hero/flow/drag-track components.

  -------------------------------------------------------------------------
  IMPORTANT CONTEXT: this theme's legacy CSS (styles.css / custom_25_1_23.css)
  was built for a real-estate listing template — classes like .gg_single_part,
  .prs_lists, .property_info_detail_wrap, .entery-content, .donation-box
  carry compound selectors (e.g. ".img-details .property_info_detail_wrap")
  with real positioning/color rules baked in (one made a progress-bar card
  absolutely-cover the hero image in black; another made button text
  color:#fff, invisible on a white button). Reusing those class *names* for
  new markup silently inherited that old CSS. So this page's markup uses
  fresh v2c- prefixed classes for anything purely visual, and only keeps the
  exact classes/ids Bootstrap or this page's own JS require
  (modal/nav-tabs/tab-pane/donor-list/avatar/content/raised_box/etc,
  documented inline in campaign.blade.php). This stylesheet only styles
  those v2c- classes plus the required Bootstrap/JS ones — nothing here
  should ever again collide with the legacy theme.
  ========================================================================== */
#v2Campaign { font-family: 'Inter', sans-serif; background: #F7F4EC; }
#v2Campaign h1, #v2Campaign h2, #v2Campaign h3, #v2Campaign h4, #v2Campaign h5, #v2Campaign h6 {
  text-transform: none !important;
  font-family: 'Inter', sans-serif;
}

#v2Campaign .v2c-cat-chip { text-decoration: none; }

/* Support Now / Share Now — the two hero action buttons render fine on
   desktop but on narrow phones (~375-390px) their desktop padding/min-width
   (px-6/px-5 py-3, min-w-[160px]) makes them look oversized and forces an
   ungainly wrap. Scaled down at the same breakpoint used elsewhere on this
   page for mobile-only tweaks. */
@media (max-width: 480px) {
  #v2Campaign .v2c-hero-actions { gap: 8px !important; }
  #v2Campaign .v2c-action-btn {
    min-width: 0 !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    gap: 6px !important;
  }
  #v2Campaign .v2c-action-btn i { font-size: 12px; }
}

/* Same fix as #v2Nav in v2-shared.css and #v2Home in v2-home.css — never
   applied here, which is why the browser's default blue focus ring was
   reappearing on click for buttons/links on this page (FAQ triggers,
   "remind me later", tabs, etc). Removed on mouse/touch interaction, kept
   for keyboard navigation via :focus-visible so accessibility isn't lost. */
#v2Campaign a, #v2Campaign button, #v2Campaign input, #v2Campaign [tabindex] {
  outline: none;
}
#v2Campaign a:focus-visible, #v2Campaign button:focus-visible, #v2Campaign input:focus-visible, #v2Campaign [tabindex]:focus-visible {
  outline: 2px solid rgba(127,178,57,.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Progress bar directly under the campaign title — same real .progress/
   .progress-bar element, just made visually unmistakable (thicker track,
   % label sitting on top) so it doesn't read as empty space. */
#v2Campaign .v2c-titlebar { position: relative; display: flex; align-items: center; gap: 10px; }
#v2Campaign .v2c-titlebar .progress { flex: 1; height: 12px !important; }
#v2Campaign .v2c-titlebar-pct {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #578021;
  background: rgba(87,128,33,.1);
  border-radius: 9999px;
  padding: 3px 10px;
  min-width: 42px;
  text-align: center;
}

/* Tabs disabled until they have real content (Gallery/Donors/Updates when
   empty) — visually muted, not clickable, no data-toggle attribute at all
   so Bootstrap can't activate them. */
#v2Campaign .nav-tabs .nav-link.v2c-tab-disabled {
  background: #F7F4EC !important;
  border-color: #EFE9D8 !important;
  color: #A9A296 !important;
  cursor: not-allowed;
  opacity: .7;
}

/* Hero photo frame + the stat strip card that floats over its bottom edge */
#v2Campaign .v2c-hero-frame { background: #EFE9D8; }
#v2Campaign .v2c-statstrip { border: 1px solid #EFE9D8; }
#v2Campaign .v2c-statstrip .v2c-stat-label { display: block; font-size: 11px; font-weight: 700; color: #5B6660; margin-bottom: 4px; }
#v2Campaign .v2c-statstrip .v2c-stat-value { display: block; font-size: 15px; font-weight: 800; color: #12332A; }

/* Progress bars (title block + sidebar donate box) — same real .progress/
   .progress-bar elements and inline width:%, restyled into the brand's
   thicker rounded gradient bar. */
#v2Campaign .progress {
  height: 10px !important;
  border-radius: 9999px !important;
  background: #EFE9D8 !important;
  overflow: hidden !important;
}
#v2Campaign .progress-bar {
  background: linear-gradient(90deg, #578021, #7FB239) !important;
  border-radius: 9999px !important;
}
#v2Campaign .progress-bar.progress-bar-striped { background-image: none !important; }
#v2Campaign .tool-per { display: none; }

/* Sidebar donate card — square corners (no border-radius), by request. */
#v2Campaign .v2c-donatecard { border-radius: 0 !important; }

/* Progress ring in the sidebar donate card: a plain div with an inline
   --pct custom property (see campaign.blade.php), drawn with conic-gradient
   — no SVG/JS needed, just CSS. */
#v2Campaign .v2c-ring {
  --pct: 0;
  width: 88px; height: 88px; border-radius: 9999px;
  background: conic-gradient(#578021 calc(var(--pct) * 1%), #EFE9D8 0);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#v2Campaign .v2c-ring-inner {
  width: 68px; height: 68px; border-radius: 9999px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #12332A; text-align: center;
}

/* Tabs: Bootstrap keeps driving show/hide via .nav-tabs/.tab-pane/data-toggle,
   this just restyles the buttons into brand pills instead of underlined tabs. */
#v2Campaign .nav-tabs { border-bottom: none !important; gap: 8px; flex-wrap: wrap; }
#v2Campaign .nav-tabs .nav-link {
  border: 1px solid #E7E1D0 !important;
  border-radius: 9999px !important;
  color: #1B2A22 !important;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px !important;
  background: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#v2Campaign .nav-tabs .nav-link.active {
  background: #12332A !important;
  border-color: #12332A !important;
  color: #fff !important;
}
#v2Campaign .v2c-panel { border-radius: 20px !important; overflow: hidden; background: #fff; }

/* Donor list rows (used both for server-rendered rows and the ones this
   page's own JS appends via donors()/show_more()/show_top_donate() — same
   markup, same classes: .donor-list / .avatar / .content / .content_row /
   .title-details / .info / .currency). Restyled generically so both sources
   look identical without touching the JS strings that generate them. None
   of these class names exist in the legacy theme's CSS. */
#v2Campaign .donor-list, .modal .donor-list {
  list-style: none; margin: 0; padding: 0;
}
#v2Campaign .donor-list > li, .modal .donor-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #EFE9D8;
}
#v2Campaign .donor-list > li:last-child, .modal .donor-list > li:last-child { border-bottom: none; }
#v2Campaign .donor-list .avatar, .modal .donor-list .avatar {
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(87,128,33,.12); color: #578021;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
#v2Campaign .donor-list .content h5, .modal .donor-list .content h5 {
  margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: #12332A;
}
#v2Campaign .donor-list .content > span, .modal .donor-list .content > span,
#v2Campaign .donor-list .content p, .modal .donor-list .content p {
  font-size: 12px; color: #5B6660;
}
#v2Campaign .donor-list .info { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
#v2Campaign .donor-list .info .currency, .modal .donor-list .info .currency {
  font-weight: 700; color: #578021; font-size: 12.5px;
}

/* Donor rows built by renderDonorRow() in @push('js') — donors() /
   show_more() / show_top_donate() all share this one template now instead
   of each hand-rolling slightly different markup. Selects on the row's own
   class (not a parent .donor-list) so it works the same whether it lands
   inside the Donors tab's plain <div class="donors"> or the modals'
   <ul class="donor-list">. The donor's own comment (q.notes) previously had
   no real treatment — it was a bare <p>, same tiny gray text as the
   timestamp, wedged between name and amount with no visual separation. */
#v2Campaign .v2c-donor-row, .modal .v2c-donor-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid #EFE9D8;
  list-style: none;
}
#v2Campaign .v2c-donor-row:last-child, .modal .v2c-donor-row:last-child { border-bottom: none; }
#v2Campaign .v2c-donor-avatar, .modal .v2c-donor-avatar {
  width: 40px; height: 40px; border-radius: 9999px;
  background: rgba(87,128,33,.12); color: #578021;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px; margin-top: 2px;
}
#v2Campaign .v2c-donor-main, .modal .v2c-donor-main { flex: 1; min-width: 0; }
#v2Campaign .v2c-donor-head, .modal .v2c-donor-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
#v2Campaign .v2c-donor-name, .modal .v2c-donor-name {
  margin: 0; font-size: 13.5px; font-weight: 700; color: #12332A;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#v2Campaign .v2c-donor-amount, .modal .v2c-donor-amount {
  font-weight: 700; color: #578021; font-size: 12.5px; white-space: nowrap; flex-shrink: 0;
}
#v2Campaign .v2c-donor-time, .modal .v2c-donor-time {
  display: block; font-size: 11.5px; color: #9AA39C; margin-top: 2px;
}
/* The comment itself: its own quiet card so it reads as "something the
   donor said" rather than metadata, with a quote glyph that flips side in
   RTL automatically (it's inline-flex with the text, so direction handles
   it) and a 3-line clamp so one long comment can't blow out the row height
   in a list that may have dozens of donors. */
#v2Campaign .v2c-donor-comment, .modal .v2c-donor-comment {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #F7F4EC;
  border-radius: 10px;
  border-inline-start: 2px solid #C9A227;
}
#v2Campaign .v2c-donor-comment-icon, .modal .v2c-donor-comment-icon {
  font-size: 10px; color: #C9A227; margin-top: 4px; flex-shrink: 0; opacity: .8;
}
#v2Campaign .v2c-donor-comment p, .modal .v2c-donor-comment p {
  margin: 0; font-size: 12px; line-height: 1.6; color: #4A544E; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Skeleton rows shown while the Donors tab / Comments panel fetch their
   real content — same shimmer treatment, reused for both. */
@keyframes v2cShimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
#v2Campaign .v2c-donor-skel-row, #v2Campaign .v2c-comments-skel-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 4px;
}
#v2Campaign .v2c-donor-skel-avatar {
  width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
  background: linear-gradient(90deg, #EFE9D8 25%, #F7F4EC 37%, #EFE9D8 63%);
  background-size: 400px 100%;
  animation: v2cShimmer 1.4s ease infinite;
}
#v2Campaign .v2c-donor-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
#v2Campaign .v2c-donor-skel-lines span {
  display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #EFE9D8 25%, #F7F4EC 37%, #EFE9D8 63%);
  background-size: 400px 100%;
  animation: v2cShimmer 1.4s ease infinite;
}
#v2Campaign .v2c-donor-skel-lines span:first-child { width: 45%; }
#v2Campaign .v2c-donor-skel-lines span:last-child { width: 70%; }

/* Redesigned "view more" trigger (donors list) — pill button instead of a
   bare text link, with a spinner state while the AJAX call is in flight. */
#v2Campaign .v2c-viewmore {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; padding: 9px 20px;
  border: 1px solid #EFE9D8; border-radius: 9999px;
  font-size: 12.5px; font-weight: 700; color: #578021;
  text-decoration: none; background: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
#v2Campaign .v2c-viewmore:hover { border-color: #7FB239; background: #F7F4EC; }
#v2Campaign .v2c-viewmore-spinner {
  display: none; width: 13px; height: 13px; border-radius: 9999px;
  border: 2px solid rgba(87,128,33,.25); border-top-color: #578021;
  animation: v2cSpin .7s linear infinite;
}
#v2Campaign .v2c-viewmore.v2c-viewmore-loading .v2c-viewmore-label { opacity: .5; }
#v2Campaign .v2c-viewmore.v2c-viewmore-loading .v2c-viewmore-spinner { display: inline-block; }
@keyframes v2cSpin { to { transform: rotate(360deg); } }
/* Inside the all-donors/top-donors modals the "view more" trigger should
   span the full width, sitting under the fixed-height scrollable list. */
.modal .v2c-viewmore { display: flex; width: 100%; margin-top: 14px; }

/* Donors / top-donors modal chrome — title + live count on the left, a
   plain close button on the right (the donate CTA used to be crammed into
   this same header row; it's now its own full-width button below). */
.modal .v2c-modal-header {
  border-bottom: none !important;
  align-items: flex-start;
  padding-bottom: 6px !important;
}
.modal .v2c-modal-title { font-size: 19px; font-weight: 800; color: #12332A; margin: 0 0 3px; }
.modal .v2c-modal-subtitle { font-size: 12.5px; color: #5B6660; font-weight: 600; margin: 0; }
.modal .mod-close {
  width: 30px; height: 30px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #F7F4EC; color: #5B6660; font-size: 13px;
  flex-shrink: 0;
}

/* Full-width primary donate CTA, pulled out of the header into its own row
   at the top of the modal body. */
.modal .v2c-modal-donate-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-bottom: 16px; padding: 13px 0;
  border-radius: 9999px; text-decoration: none;
  background: linear-gradient(90deg, #578021, #7FB239);
  color: #fff !important; font-weight: 800; font-size: 14px;
  box-shadow: 0 14px 30px -14px rgba(87,128,33,.7);
}

/* Fixed-height, scrollable donor list — same pattern as the Donors tab, so
   opening the modal never balloons the page/modal height as more rows load
   in via "view more". */
.modal .v2c-modal-list-wrap {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.modal .v2c-modal-list-wrap::-webkit-scrollbar { width: 6px; }
.modal .v2c-modal-list-wrap::-webkit-scrollbar-track { background: #F7F4EC; border-radius: 9999px; }
.modal .v2c-modal-list-wrap::-webkit-scrollbar-thumb { background: #7FB239; border-radius: 9999px; }

/* Comments panel — labeled heading + skeleton instead of a blank white box
   while the Facebook SDK asynchronously mounts its comments iframe. */
#v2Campaign .v2c-comments-title {
  font-size: 15px; font-weight: 800; color: #12332A; margin: 0 0 14px;
}
#v2Campaign .v2c-comments-skel { display: block; }
#v2Campaign .v2c-donor-skel { display: block; }

/* "No comments yet" fallback — shown instead of the skeleton if the FB
   widget never mounts within the timeout (see the isolated <script> in
   campaign.blade.php right after the FB comments markup). */
#v2Campaign .v2c-comments-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 10px; text-align: center;
}
#v2Campaign .v2c-comments-empty i {
  font-size: 26px; color: #A9A296;
}
#v2Campaign .v2c-comments-empty span {
  font-size: 13px; font-weight: 600; color: #5B6660;
}

/* Modals (all-donors / top-donors / share-option) keep Bootstrap's own
   .modal/.modal-dialog/.modal-content/data-toggle/data-dismiss wiring for
   show/hide; only the chrome is restyled here. */
.modal .modal-content {
  border-radius: 22px !important;
  border: none !important;
  box-shadow: 0 24px 60px -20px rgba(18,51,42,.35);
  overflow: hidden;
}
.modal .modal-header {
  border-bottom: 1px solid #EFE9D8 !important;
  align-items: center;
  padding: 18px 22px !important;
}
.modal .modal-header h2, .modal .modal-header h3 { font-size: 17px; font-weight: 800; color: #12332A; margin: 0; }
.modal .modal-header .modal-title { font-size: 12px; color: #5B6660; font-weight: 600; }
.modal .modal-header .mod-close { cursor: pointer; color: #5B6660; }
.modal .modal-body { padding: 20px 22px !important; }
/* Share modal: icon grid (Facebook/X/WhatsApp/Telegram/LinkedIn/Messenger/
   Email/SMS — all real share links), FontAwesome brand icons on solid
   brand-color circles instead of the broken images/icon-*.png files that
   don't exist on disk (that's what was rendering as broken-image
   placeholders). 4 columns on wider screens, 3 on narrow modals/mobile so
   the labels never get cramped. */
.modal .v2c-sharegrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 420px) {
  .modal .v2c-sharegrid { grid-template-columns: repeat(3, 1fr); }
}
.modal .v2c-sharegrid a, .modal .v2c-sharegrid button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; border: 1px solid #EFE9D8; border-radius: 16px;
  font-size: 11.5px; font-weight: 700; color: #12332A; text-decoration: none;
  background: #fff; font-family: inherit; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.modal .v2c-sharegrid a:hover, .modal .v2c-sharegrid button:hover { border-color: #7FB239; background: #F7F4EC; }
.modal .v2c-share-ic {
  width: 38px; height: 38px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
}

.modal .v2c-copyclip {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  background: #F7F4EC; border: 1px solid #EFE9D8; border-radius: 14px; padding: 6px 6px 6px 14px;
}
.modal .v2c-copyclip input {
  flex: 1; min-width: 0; border: none !important; background: transparent !important;
  padding: 8px 0; font-size: 12px; color: #5B6660; outline: none;
}
.modal .v2c-copyclip-btn {
  background: #578021 !important; color: #fff !important; border: none !important;
  border-radius: 10px !important; padding: 10px 18px; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; cursor: pointer;
}
.modal .v2c-share-tip {
  margin: 0; font-size: 11.5px; color: #5B6660; text-align: center;
}

/* Sticky mobile donate bar (legacy .donate-box-mobile class kept only
   because it's still gated by Bootstrap's own d-block/d-sm-none display
   utilities — but the theme has no CSS rule for that class name, so no
   collision) pinned to the bottom of the viewport instead of sitting
   inline at the end of the page. */
@media (max-width: 767.98px) {
  #v2Campaign .donate-box-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    background: #fff;
    border-top: 1px solid #EFE9D8;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 24px -18px rgba(18,51,42,.3);
    transition: transform .25s ease;
  }
  #v2Campaign .v2c-bottom-spacer { display: block; height: 84px; }
  /* Toggled by JS (IntersectionObserver on #v2Footer) once the footer
     scrolls into view — otherwise this fixed white bar sits on top of the
     footer for the rest of the scroll, reading as a white strip glued to
     the bottom of the screen below the footer's visible content. */
  #v2Campaign .donate-box-mobile.v2c-donatebar-hidden { transform: translateY(100%); }
}
#v2Campaign .donate-box-mobile .btn-primary {
  background: linear-gradient(90deg, #578021, #7FB239) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 13px 0 !important;
  font-weight: 800;
  font-size: 14.5px;
}

/* Gift popup (#gift-popup id + Bootstrap's own .d-none utility toggled by
   this page's JS — kept exactly). Inner wrapper renamed from .content
   (way too generic, risk of legacy collision) to .v2c-giftpop-card. */
.gitfpop .v2c-giftpop-card {
  border-radius: 22px !important;
  box-shadow: 0 24px 60px -20px rgba(18,51,42,.35);
}

/* "Close to goal" badge — sits in the categories row above the hero photo
   (when the campaign itself is 85–99% funded) and on similar-campaign cards
   in the carousel below. */
#v2Campaign .v2c-goal-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FFF4DE; color: #9A6B12;
  font-size: 11px; font-weight: 800; padding: 5px 11px;
  border-radius: 9999px;
}
#v2Campaign .v2c-goal-badge i { font-size: 10px; }
#v2Campaign a .v2c-goal-badge, #v2Campaign span.v2c-goal-badge {
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.35);
}

/* FAQ accordion — Bootstrap's own .collapse component, restyled. */
#v2Campaign .v2c-faq-item {
  border: 1px solid #EFE9D8; border-radius: 16px;
  background: #fff; margin-bottom: 10px;
}
#v2Campaign .v2c-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; background: none; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #12332A;
  text-align: start; cursor: pointer;
}
#v2Campaign .v2c-faq-q i { font-size: 12px; color: #5B6660; transition: transform .25s ease; flex-shrink: 0; }
#v2Campaign .v2c-faq-q[aria-expanded="true"] i { transform: rotate(180deg); }
/* Bootstrap's .collapse/.collapsing already handle show/hide — these are
   just a defensive backstop in case any legacy theme rule elsewhere ever
   targets .collapse/.show generically (see the v2c- prefix policy at the
   top of this file); content was reportedly vanishing on open, which
   pointed at the parent's overflow:hidden clipping the JS height
   animation, so that's been dropped from .v2c-faq-item above too. */
#v2Campaign .v2c-faq-item .collapse.show { display: block; visibility: visible; height: auto; overflow: visible; }
#v2Campaign .v2c-faq-item .collapse:not(.show) { display: none; }
#v2Campaign .v2c-faq-a {
  margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.8; color: #5B6660;
}

/* Similar campaigns — now sits in a half-width column next to the FAQ
   (see campaign.blade.php), so cards are narrower than the old full-bleed
   version and the track scrolls via the prev/next arrow buttons (JS) as
   well as touch/trackpad drag. */
#v2Campaign .no-scrollbar::-webkit-scrollbar { display: none; }
#v2Campaign .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
#v2Campaign .v2c-similar-track { scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 4px; }
#v2Campaign .v2c-similar-card {
  width: 168px; text-decoration: none; scroll-snap-align: start;
}
#v2Campaign .v2c-similar-arrow {
  width: 34px; height: 34px; border-radius: 9999px;
  border: 1px solid #EFE9D8; background: #fff; color: #12332A;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
#v2Campaign .v2c-similar-arrow:hover { border-color: #7FB239; background: #F7F4EC; }

/* "Remind me later" — trigger link under the donor-list footer buttons,
   and the modal form it opens. */
#v2Campaign .v2c-remindme-trigger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 9px 0;
  background: none; border: none; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #5B6660; cursor: pointer;
}
#v2Campaign .v2c-remindme-trigger:hover { color: #578021; }
#v2Campaign .v2c-remindme-trigger i { font-size: 12px; }

.modal .v2c-remindme-copy { font-size: 13px; color: #5B6660; line-height: 1.7; margin: 0 0 16px; }
.modal .v2c-remindme-field .form-control {
  border: 1px solid #EFE9D8 !important; border-radius: 12px !important;
  padding: 12px 14px !important; font-size: 13.5px; background: #F7F4EC !important;
}
.modal .v2c-remindme-field .form-control:focus {
  border-color: #7FB239 !important; box-shadow: none !important;
}
.modal .v2c-remindme-error {
  color: #B3261E; font-size: 12px; font-weight: 600; margin: 8px 0 0;
}
.modal .v2c-remindme-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 12px 0;
  background: linear-gradient(90deg, #578021, #7FB239); border: none;
  border-radius: 9999px; color: #fff; font-weight: 800; font-size: 13.5px;
  cursor: pointer;
}
.modal .v2c-remindme-submit:disabled { opacity: .75; cursor: default; }
.modal .v2c-remindme-submit-spinner {
  display: none; width: 14px; height: 14px; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: v2cSpin .7s linear infinite;
}
.modal .v2c-remindme-submit.v2c-remindme-loading .v2c-remindme-submit-label { opacity: .7; }
.modal .v2c-remindme-submit.v2c-remindme-loading .v2c-remindme-submit-spinner { display: inline-block; }
.modal .v2c-remindme-success {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 18px 6px;
}
.modal .v2c-remindme-success i { font-size: 30px; color: #578021; }
.modal .v2c-remindme-success p { margin: 0; font-size: 13.5px; color: #12332A; font-weight: 600; }