/* ======================================
   SPONSOR PAGE — FULL CSS (drop-in)
   ====================================== */
:root{
  --brand:#0d2c55;          /* deep navy */
  --brand-2:#143b73;
  --ink:#0e2442;
  --muted:#6b7280;
  --line:#e9edf5;
  --card:#ffffff;
  --chip:#eef3f9;
  --success:#55b057;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0; color:var(--ink); background:#fff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.container{width:min(1200px,92%); margin-inline:auto}

/* ---------- HERO ---------- */
.hero{
  padding: clamp(40px, 6vw, 80px) 0;
  background: url('../images/hero-bg-pattern.svg') no-repeat center/cover;
}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:clamp(16px,3vw,40px)}
/* if you didn't wrap with .container, it's okay: hero-text & hero-img still work */
.hero-text h1{
  font-weight:800; line-height:1.05; padding-left: 10%; margin-top: 15% !important;letter-spacing:.2px;
  color:var(--brand); margin:0 0 12px; font-size: clamp(28px, 4vw, 46px)
}
.hero-text p{margin:0 0 18px; padding-left: 10%;   color:#2b3b54; font-size: clamp(14px, 1.2vw, 18px)}
.btn, .hero-btn, .sponsor-now-btn{
  display:inline-flex; align-items:center; margin-left: 10% ;justify-content:center;
  padding:12px 22px; border-radius:10px; text-decoration:none; font-weight:800;
  background:var(--brand); color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.08)
}
.btn:hover, .hero-btn:hover{filter:brightness(.93)}
.hero-img{display:flex; justify-content:center}
.hero-img img{
  width: clamp(250px, 28vw, 320px);
  aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  display:block; margin-inline:auto; margin-top: 10%; background:none; padding:0; /* ensures no blue circle */
}

/* ---------- FILTER ---------- */
.filter-section{padding: 14px 0 6px; text-align:center}
.filter-section h2{
  font-size: clamp(22px, 3vw, 38px); font-weight:800; color:var(--brand); margin:0 0 10px
}
.filter-section select{
  margin-top:6px; font-size:16px; padding:12px 16px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; color:var(--brand);
  min-width:220px; box-shadow:0 2px 0 rgba(0,0,0,.02)
}
.filter-section select:focus{outline:none; border-color:#9db6db}

/* ---------- CAROUSEL ---------- */
.carousel-section { position: relative; }

.carousel-container{
  position: relative;
  width: min(1240px, 94%);
  margin: 14px auto 34px;
  /* no flex here; the arrows are absolutely positioned */
}

.carousel-track{
  display:flex;
  gap:26px;
  padding: 6px 48px 16px; /* leave room for arrows inside the container */
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  justify-content:flex-start; /* default: carousel mode */
}
.carousel-track::-webkit-scrollbar{ display:none; }

/* Center row when there’s no overflow (JS toggles this) */
.carousel-track.is-centered{ justify-content:center; }

/* Arrows: float over the track, vertically centered */
.carousel-btn{
  position:absolute;
  top:50%;
  translate: 0 -50%;
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--brand-2);
  background:#fff; color:var(--brand-2);
  display:grid; place-items:center;
  cursor:pointer;
  transition:.2s transform, .2s box-shadow, .2s opacity;
  z-index:2;
}
.carousel-btn:hover{ transform: translateY(-50%) scale(1.03); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.carousel-btn i{ font-size:20px; }

/* left/right positions (slightly outside the card row) */
.carousel-btn.prev{ left: 8px; }
.carousel-btn.next{ right: 8px; }

/* Disable state at edges */
.carousel-btn.disabled{
  opacity:.4;
  pointer-events:none;
}


/* ---------- PET CARD ---------- */
.pet-card{
  flex:0 0 270px; background:var(--card); border-radius:18px; padding:16px;
  box-shadow: 0 8px 24px rgba(14,36,66,.06);
  border: 4px solid #f2f4f8;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pet-card:hover{ transform:translateY(-4px); box-shadow: 0 14px 30px rgba(14,36,66,.10) }
.pet-card img{
  width:100%; height:180px; object-fit:cover; border-radius:14px; display:block; margin-bottom:12px
}
.pet-card h3{margin:0 0 6px; font-size:20px; color:var(--brand)}
.pet-card p{margin:0 0 12px; font-size:14px; line-height:1.35; color:#3a4a64}

/* progress */
.progress-bar{
  background:#e9f2e9; border-radius:999px; height:12px; overflow:hidden; margin: 6px 0 12px
}
.progress{height:100%; background:var(--success); width:0; border-radius:999px; transition:width .4s ease}

/* sponsor button inside card */
.sponsor-btn{width:100%; padding:12px 16px; border-radius:12px; font-size:16px}
/* Pet card button */
.pet-card .sponsor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
  transition: background .2s ease, transform .2s ease;
  margin: 12px 15px;       /* space above and center horizontally */
  width: auto;               /* shrink to content */
  min-width: 200px;          /* consistent width across cards */
  text-align: center;
}

.pet-card .sponsor-btn:hover {
  background: var(--brand-2);
  transform: translateY(-2px);
}
/* Progress pill */
.progress-bar {
  position: relative;
  width: 100%;
  height: 22px;
  border-radius: 999px;
  background: rgba(141, 198, 63, 0.25); /* translucent background */
  overflow: hidden;
  margin: 8px 0 14px;
}

.progress-bar .progress {
  height: 100%;
  background: var(--success);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.progress-bar .progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- HOW IT WORKS ---------- */
.how-it-works{padding: 34px 0 46px}
.how-it-works h2{
  text-align:center; font-size: clamp(22px, 3.4vw, 40px); font-weight:800; color:var(--brand); margin: 0 0 16px
}
.how-it-works .steps{
  width:min(1180px,92%); margin:0 auto; background:#f3f5f8; border-radius:28px;
  padding: clamp(18px, 4vw, 34px); display:grid; grid-template-columns:repeat(3, 1fr); gap: clamp(14px, 2.2vw, 28px)
}
.step{
  background:#fff; border-radius:24px; padding: clamp(16px, 2.2vw, 24px);
  border:1.5px solid #c6d3e6; text-align:center
}
.step span{
  display:inline-grid; place-items:center; width:56px; height:56px; margin-bottom:10px;
  background:var(--brand); color:#fff; font-weight:800; border-radius:50%; font-size:18px
}
.step h3{margin:0 0 6px; font-size: clamp(16px, 2vw, 20px); color:var(--brand); font-weight:800}
.step p{margin:0; color:#425572; font-size:14px; line-height:1.45}

/* ---------- FAQ ---------- */
.faqs{padding: 18px 0 60px; text-align:center}
.faqs h2{
  font-size: clamp(22px, 3.4vw, 40px); font-weight:800; color:var(--brand); margin: 0 0 16px
}
.faqs .view-all{
  display:inline-block; margin: 0 auto 22px; padding: 12px 24px;
  background:var(--brand); color:#fff; font-weight:800; border-radius:12px; text-decoration:none
}

.faqs details{
  width:min(1000px, 92%); margin:12px auto 0; border-radius:18px; overflow:hidden;
  border:1px solid #e3e8f2; background:#f6f8fb; text-align:left
}
.faqs summary{
  list-style:none; cursor:pointer; padding:16px 18px; position:relative;
  background:var(--brand); color:#fff; font-weight:800; font-size:18px;
  border-radius:18px; margin:0; display:flex; align-items:center
}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{
  content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; right:16px; transform:rotate(0deg); transition:transform .2s ease
}
.faqs details[open] summary:after{transform:rotate(180deg)}
.faqs details > .content, .faqs details > p{
  padding:16px 18px 18px; color:#2b3b54; background:#fff; line-height:1.6
}

/* ---------- Utility ---------- */
.empty-state{text-align:center; color:#55657f; padding:20px}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .carousel-btn{display:none}  /* hide arrows on small screens; swipe instead */
  .how-it-works .steps{grid-template-columns:1fr; padding:18px}
  .step{padding:18px}
}