/* =========================================================
   BACKLINKS.CSS - Backlink Packages Page
   Version: 2.4 (centered headers + testimonial slider)
   Matches Digital Ranker Pakistan theme (home.css / seo.css)
   ========================================================= */

/* ---------- Theme helpers (fallbacks if not in :root) ---------- */
:root {
  --brand-600: #006600;       /* deep green */
  --brand-500: #0AA86A;       /* accent green */
  --brand-400: #19b97a;
  --ink-900:  #0f172a;
  --ink-700:  #111827;
  --ink-600:  #374151;
  --ink-500:  #4B5563;
  --muted:    #4A4A4A;
  --bg-soft:  #F5F7FA;
  --card:     #FFFFFF;
  --ring:     #E5E7EB;
  --shadow:   0 10px 30px rgba(15,23,42,.08);
}

/* =========================================================
   GLOBAL ALIGNMENT (centered headers like other pages)
========================================================= */
.section-header.align-center {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.section-header.align-center .section-eyebrow {
  justify-content: center;
}

/* Eyebrow shared treatment (if not already in global) */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-500);
  font-weight: 700;
}

/* =========================================================
   HERO (inherits from home.css/seo.css)
========================================================= */
.hero {
  position: relative;
  background: linear-gradient(135deg, #009933 0%, #003300 100%);
  color: #fff;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
.hero-inner { padding-block: 88px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.95fr); gap: 3rem; align-items: center; }

.hero-subtitle { font-size: 1.05rem; opacity: .95; }
.hero-badge { background: rgba(15,23,42,.65); color: #fff; padding:.35rem .9rem; border-radius:999px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.hero-badge-row { display:flex; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin:1.25rem 0 1rem; }
.hero-meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; opacity:.95; }
.hero-meta a { color:#fff; text-decoration: underline; }

/* Hero illustration card */
.hero-illustration-card {
  background: var(--card);
  border-radius: 28px;
  padding: 1.4rem;
  box-shadow: var(--shadow);
  color: var(--ink-700);
}
.hero-illustration-card img { width:100%; height:auto; border-radius:12px; }
.hero-illustration-metrics {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.1rem;
}
.metric-pill {
  padding:.7rem .9rem; border-radius:12px; background: var(--bg-soft);
  font-size:.82rem; color: var(--ink-600);
}
.metric-pill strong { display:block; font-size:1rem; color: var(--brand-600); }

/* =========================================================
   BENEFIT CARDS (icon + badge)
========================================================= */
.benefit-card { position:relative; height:100%; padding:1.5rem; border-radius:18px; background:#fff; box-shadow: var(--shadow); }
.benefit-card .card-header { display:flex; justify-content:flex-end; }
.icon-badge {
  font-size:.72rem; font-weight:700; color:#003B3B; background: rgba(0,102,0,.08);
  border-radius:999px; padding:.25rem .6rem;
}
.benefit-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background: rgba(10,168,106,.12); color: var(--brand-600); margin-bottom:.9rem; }
.benefit-card h3 { margin:.25rem 0 .35rem; }
.benefit-card .text-muted { color: var(--muted); }

/* =========================================================
   LINK TYPE / GENERIC CARDS
========================================================= */
.card { background:#fff; border-radius:18px; padding:1.25rem 1.4rem; box-shadow: var(--shadow); }
.card p.text-muted { color: var(--muted); }

/* =========================================================
   PRICING CARDS
========================================================= */
.pricing-card { display:flex; flex-direction:column; height:100%; }
.pricing-header { padding-bottom:.75rem; border-bottom:1px solid var(--ring); }
.pricing-features { list-style:none; padding:0; margin:1rem 0; color:var(--muted); }
.pricing-features li { padding:.35rem 0; }
.pricing-footer { margin-top:auto; }
.pricing-card.featured {
  border:2px solid var(--brand-600);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0,102,0,.03) 0%, rgba(10,168,106,.03) 100%);
  z-index:1;
}
.pricing-badge {
  position:absolute; transform: translate(-50%, -50%); left:50%; top:0;
  background:#FF7A3C; color:#fff; font-weight:700; font-size:.75rem; padding:.25rem 1rem; border-radius:999px;
}

/* Center helper */
.center { text-align:center; }

/* =========================================================
   TESTIMONIAL SLIDER (Google-style cards)
========================================================= */
.testimonial-slider { position:relative; }
.slider-track {
  display:flex; gap:1rem; overflow:hidden; scroll-behavior:smooth;
}
.testimonial-slide { min-width: 100%; padding: .25rem; }
@media (min-width: 900px) {
  .testimonial-slide { min-width: calc(100% / 1); }
}
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--ring);
  background:#fff; display:grid; place-items:center; box-shadow: var(--shadow);
}
.slider-btn--prev { left:-6px; }
.slider-btn--next { right:-6px; }

.slider-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.slider-dots .dot {
  width:8px; height:8px; border-radius:999px; background:#D1D5DB; border:0;
}
.slider-dots .dot.active { background: var(--brand-600); }

/* Google-style testimonial card */
.google-card { background:#fff; border-radius:18px; padding:1.25rem 1.4rem; box-shadow: var(--shadow); }
.google-card-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.google-rating { display:flex; align-items:center; gap:.5rem; }
.google-rating .stars { letter-spacing:.15em; color:#f5b80f; }
.google-rating .rating-text { font-weight:700; }
.verified-badge {
  display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:700;
  color:#0AA86A; background: rgba(10,168,106,.12); padding:.25rem .6rem; border-radius:999px;
}
.google-card-content { margin: .9rem 0; color: var(--ink-700); }
.google-card-author { display:flex; align-items:center; gap:.75rem; margin-top:.25rem; }
.author-avatar.initials {
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  background: #0AA86A; color:#fff; font-weight:800;
}
.author-info .author-name { font-weight:700; }
.author-info .author-title { display:block; font-size:.85rem; color: var(--muted); }
.review-meta { display:flex; gap:.75rem; font-size:.8rem; color: var(--muted); margin-top:.25rem; }

/* =========================================================
   MARKETPLACE CTA
========================================================= */
.section .card .center .btn { margin-top:.5rem; }

/* =========================================================
   FAQ
========================================================= */
details { border-top:1px solid var(--ring); padding: .9rem 0; }
details:first-of-type { border-top:0; }
details summary { cursor:pointer; font-weight:600; }
details p { margin:.6rem 0 0; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:2.25rem; }
  .hero-inner { padding-block: 76px; }
  .hero-illustration-metrics { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-illustration { order:-1; margin-bottom:1.5rem; }
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .slider-btn { display:none; } /* dots-only on mobile */
}