/*
  Ensany v2 — campaigns list pages (/campaigns, /campaigns/completed,
  /campaigns/category/{id} — all served by campaigns.blade.php — and
  /most_collected_campaigns, served by campaigns_ngo.blade.php). Shared by
  both since they're the same kind of page (title + grid of campaign
  cards, optionally a category filter), just like v2-shared.css is shared
  by every v2 page. The card itself (resources/views/components/
  campaign-card.blade.php) is styled almost entirely with the site's
  existing Tailwind utility vocabulary (v2-tailwind-config.js), so this
  file only needs to cover page-level layout: the title/filter row, the
  grid, and native-select styling for the category dropdown (Tailwind
  alone can't restyle a <select>'s own chrome).

  Scoped under #v2Campaigns (present on both host pages) to match every
  other v2 page's pattern of never leaking into or depending on another
  page's CSS.
*/

#v2Campaigns { background: #F7F4EC; font-family: 'Inter', sans-serif; }

#v2Campaigns .v2cc-head {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
#v2Campaigns .v2cc-title {
  font-size: 22px; font-weight: 800; color: #12332A; margin: 0;
}
#v2Campaigns .v2cc-title span {
  display: block; font-size: 12px; font-weight: 700; color: #D4A94B;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}

/* Category filter — plain native <select>, restyled to match the rest of
   v2 (rounded pill, brand-colored focus) since Tailwind utility classes
   alone can't reach a <select>'s native chrome/arrow. */
#v2Campaigns .v2cc-filter { display: flex; align-items: center; gap: 10px; }
#v2Campaigns .v2cc-filter label {
  font-size: 13px; font-weight: 700; color: #5B6660; white-space: nowrap; margin: 0;
}
#v2Campaigns .v2cc-filter select {
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2312332A' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat;
  background-position: calc(100% - 14px) center;
  border: 1px solid #E7E1D2; border-radius: 9999px;
  padding: 10px 36px 10px 16px;
  font-size: 13px; font-weight: 700; color: #12332A;
  min-width: 200px; cursor: pointer;
  outline: none;
}
html[dir="rtl"] #v2Campaigns .v2cc-filter select,
#v2Campaigns[style*="direction: rtl"] .v2cc-filter select {
  background-position: 14px center; padding: 10px 16px 10px 36px;
}
/* This site applies RTL via CSS `direction: rtl` on an ancestor rather
   than an [dir] attribute (see the range-slider work on donate.blade.php
   for the full story) — so the two selectors above are backstops only;
   this computed-direction-agnostic rule is the one that actually fires,
   flipping the arrow to the visual "end" side in Arabic without any JS. */
#v2Campaigns .v2cc-filter { direction: inherit; }
#v2Campaigns .v2cc-filter select:focus {
  border-color: #7FB239; box-shadow: 0 0 0 3px rgba(127,178,57,.18);
}

#v2Campaigns .v2cc-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 16px 60px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 991px) {
  #v2Campaigns .v2cc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #v2Campaigns .v2cc-grid { grid-template-columns: 1fr; gap: 16px; }
}

#v2Campaigns .v2cc-empty {
  max-width: 1280px; margin: 0 auto; padding: 60px 16px; text-align: center;
  color: #5B6660; font-size: 15px; font-weight: 600;
}

/* Card component (campaign-card.blade.php) — image skeleton. A shimmering
   placeholder (.v2cc-img-skel) sits on top of the real <img> until it
   actually finishes loading (or fails), at which point the inline
   onload/onerror on the <img> itself adds .is-hidden to fade the skeleton
   out and .is-loaded on the image to fade it in — see the component's own
   comment for why plain inline handlers are used instead of a page-init
   script (has to keep working for cards the category-filter AJAX response
   drops in later, not just the initial render). */
#v2Campaigns .v2cc-img-skel {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, #F1ECDF 28%, #FBF8F1 48%, #F1ECDF 68%);
  background-size: 250% 100%;
  animation: v2ccShimmer 1.4s ease-in-out infinite;
  transition: opacity .35s ease;
}
#v2Campaigns .v2cc-img-skel.is-hidden { opacity: 0; pointer-events: none; }
@keyframes v2ccShimmer {
  0% { background-position: 250% 0; }
  100% { background-position: -250% 0; }
}
#v2Campaigns .v2cc-img {
  opacity: 0; transition: opacity .4s ease;
}
#v2Campaigns .v2cc-img.is-loaded { opacity: 1; }

/* line-clamp isn't in every
   Tailwind CDN build's default core utilities depending on version, so
   it's defined explicitly here rather than assumed. */
#v2Campaigns .line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination — Laravel's default Bootstrap pagination markup
   ($campaigns->links()), restyled to match v2 instead of the legacy
   theme's pagination look. */
#v2Campaigns .pagination {
  display: flex; justify-content: center; gap: 6px; list-style: none;
  padding: 0; margin: 8px 0 0; flex-wrap: wrap;
}
#v2Campaigns .page-item .page-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid #E7E1D2; border-radius: 9999px;
  background: #fff; color: #12332A; font-size: 13px; font-weight: 700;
  text-decoration: none;
}
#v2Campaigns .page-item.active .page-link {
  background: #578021; border-color: #578021; color: #fff;
}
#v2Campaigns .page-item.disabled .page-link {
  color: #9AA39C; background: #F1ECDF; cursor: not-allowed;
}