/* ============================================================
   /services — revolutionized directory page
   Scoped under .servicespage-* so nothing leaks to other pages.
   Light-mode brand-blue (TraPay brand), RTL-first.
   ============================================================ */

:root {
  --svc-brand: var(--tp-brand, #0d3e7e);
  --svc-ink: #0f1b2d;
  --svc-muted: #64748b;
  --svc-line: #e6ebf2;
  --svc-card: #ffffff;
  --svc-soft: #f6f8fc;
}

/* ─────────── HERO (search is the CTA) ─────────── */
.servicespage-hero {
  background:
    radial-gradient(120% 120% at 88% -10%, color-mix(in srgb, var(--svc-brand) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--svc-brand) 5%, #fff) 0%, var(--svc-soft) 100%);
  border-bottom: 1px solid var(--svc-line);
}
/* own padding so it never depends on Tailwind classes being present */
.servicespage-hero > .relative { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width:1024px){ .servicespage-hero > .relative { padding-top: 7rem; padding-bottom: 7rem; } }
.servicespage-hero-glow {
  position: absolute; inset-inline-start: -8%; top: -30%;
  width: 46%; height: 160%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--svc-brand) 14%, transparent), transparent 72%);
  filter: blur(8px); pointer-events: none; opacity: .7;
}
.servicespage-eyebrow {
  background: color-mix(in srgb, var(--svc-brand) 7%, #fff);
  color: var(--svc-brand);
  border: 1px solid color-mix(in srgb, var(--svc-brand) 14%, transparent);
  border-radius: 999px; font-weight: 700;
}
.servicespage-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}
.servicespage-h1 { line-height: 1.32; }
.servicespage-lead { line-height: 1.9; }

/* search box */
.servicespage-search-box {
  display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1.5px solid var(--svc-line);
  border-radius: 16px; padding: .5rem .9rem;
  box-shadow: 0 10px 30px -18px rgba(13, 62, 126, .45);
  transition: border-color .2s, box-shadow .2s;
}
.servicespage-search-box:focus-within {
  border-color: color-mix(in srgb, var(--svc-brand) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--svc-brand) 12%, transparent), 0 14px 34px -18px rgba(13, 62, 126, .5);
}
.servicespage-search-ic { width: 22px; height: 22px; color: var(--svc-muted); flex: none; }
.servicespage-search-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 1.02rem; color: var(--svc-ink); padding: .5rem 0;
  font-family: inherit;
}
.servicespage-search-input::placeholder { color: #94a3b8; }
.servicespage-search-clear {
  width: 30px; height: 30px; border-radius: 9px; border: 0;
  display: grid; place-items: center; cursor: pointer; flex: none;
  color: var(--svc-muted); background: var(--svc-soft);
}
.servicespage-search-clear svg { width: 15px; height: 15px; }
.servicespage-search-clear:hover { color: var(--svc-ink); background: #eef2f8; }

/* trust stats — span the search width evenly (no right-edge clump) */
.servicespage-stats { width: 100%; }
.servicespage-stat {
  flex: 1 1 0; min-width: 120px;
  display: flex; flex-direction: column; gap: 2px;
  padding: .7rem 1.1rem; border-radius: 14px; text-align: center;
  background: #fff; border: 1px solid var(--svc-line);
}
.servicespage-stat-val { font-size: 1.15rem; font-weight: 800; color: var(--svc-brand); }
.servicespage-stat-lbl { font-size: .82rem; color: var(--svc-muted); }

/* ─────────── LIST section ─────────── */
.servicespage-list { background: #fff; padding: 2.5rem 0 3.5rem; }
@media (min-width:1024px){ .servicespage-list{ padding: 3rem 0 4.5rem; } }

/* category chips */
.servicespage-chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center; margin: 0 0 2rem;
}
.servicespage-chip {
  border: 1.5px solid var(--svc-line); background: #fff;
  color: var(--svc-ink); font-weight: 700; font-size: .9rem;
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  transition: all .18s; font-family: inherit;
}
.servicespage-chip:hover { border-color: color-mix(in srgb, var(--svc-brand) 35%, transparent); color: var(--svc-brand); }
.servicespage-chip.is-active {
  background: var(--svc-brand); border-color: var(--svc-brand); color: #fff;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--svc-brand) 70%, transparent);
}

/* tier heading (now a full-width Isotope item) */
.servicespage-tier-title { font-size: 1.1rem; font-weight: 800; color: var(--svc-ink); white-space: nowrap; }
.servicespage-tier-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--svc-line), transparent); }

/* ─────────── ISOTOPE GRID ───────────
   Isotope absolute-positions every item. We only declare widths: cards take
   ~1/3 (desktop) / 1/2 (tablet) / full (mobile); headers + sizer are full-width.
   Isotope packs by height (masonry) → short cards never leave a gap, headers
   land on their own row, and filtering/show-hide is handled by the library. */
.servicespage-iso { position: relative; }
.servicespage-iso-sizer { width: 100%; }
.servicespage-iso-head,
.servicespage-iso .servicespage-card { margin-bottom: 1.1rem; }

/* full-width items */
.servicespage-iso-head {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding-top: .75rem; margin-bottom: 1.4rem;
}

/* card widths (percentPosition → use % so Isotope reflows responsively) */
.servicespage-iso .servicespage-card { width: 100%; }
@media (min-width:640px){
  .servicespage-iso .servicespage-card,
  .servicespage-iso-sizer { width: calc(50% - 9px); }  /* gutter 18 → half-gutter each side */
}
@media (min-width:1024px){
  .servicespage-iso .servicespage-card,
  .servicespage-iso-sizer { width: calc(33.333% - 12px); }
}

/* featured cards sit in the first row(s) and read bigger */
.servicespage-iso .servicespage-card.is-featured { /* width same as others, styled by card rules below */ }

/* ─────────── CARD ─────────── */
/* NO forced equal height → short cards (e.g. Western Union w/ 1 task)
   no longer stretch into a big empty block. align-items:start does it. */
.servicespage-card {
  display: flex; flex-direction: column;
  background: var(--svc-card); border: 1px solid var(--svc-line);
  border-radius: 18px; padding: 1.25rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.servicespage-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--svc-brand) 22%, transparent);
  box-shadow: 0 18px 40px -24px rgba(13, 62, 126, .4);
}
.servicespage-card.is-featured {
  padding: 1.5rem;
  border-color: color-mix(in srgb, var(--svc-brand) 16%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--svc-brand) 4%, #fff), #fff 42%);
}
.servicespage-card.is-soon { opacity: .9; }

.servicespage-card-head { display: flex; align-items: flex-start; gap: .9rem; }
.servicespage-card-logo {
  width: 52px; height: 52px; flex: none; border-radius: 14px;
  display: grid; place-items: center; padding: 9px;
  background: var(--svc-soft); border: 1px solid var(--svc-line);
  overflow: hidden;                /* never let a logo (or broken-img alt) spill */
}
.is-featured .servicespage-card-logo { width: 58px; height: 58px; }
.servicespage-card-logo img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain;
  font-size: 0;                    /* hide alt text if the SVG fails to load */
  color: transparent;
}
/* inline-SVG icons (utopia/crypto/ai/exam/visa-embassy/apply/vnum) from the
   shared svc-icon component come in at h-6 — size them to fill the box + tint brand */
.servicespage-card-logo svg { width: 30px !important; height: 30px !important; color: var(--svc-brand); }
.is-featured .servicespage-card-logo svg { width: 34px !important; height: 34px !important; }
.is-soon .servicespage-card-logo { filter: grayscale(40%); opacity: .7; }

.servicespage-card-head-text { flex: 1; min-width: 0; }
.servicespage-card-titlerow { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.servicespage-card-title { font-size: 1.1rem; font-weight: 800; color: var(--svc-ink); }
.is-featured .servicespage-card-title { font-size: 1.22rem; }
.servicespage-card-body { margin-top: .4rem; font-size: .88rem; line-height: 1.75; color: var(--svc-muted); }

.servicespage-cat-tag {
  font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--svc-brand) 8%, transparent); color: var(--svc-brand);
}
.servicespage-soon-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px;
  background: #fff7ed; color: #c2630c; border: 1px solid #fed7aa;
}
.servicespage-soon-badge svg { width: 11px; height: 11px; }

/* ─────────── TASK ROWS ───────────
   Image#1 fix: a task's own category no longer renders as a full-width
   header line above a single row. It's a compact inline pill on the SAME
   row as the label. One line per task → no 4-line waste. */
.servicespage-tasks { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.is-featured .servicespage-tasks { margin-top: 1.1rem; }
.servicespage-task {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem; border-radius: 10px;
  color: #334155; font-size: .9rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.servicespage-task:hover { background: var(--svc-soft); color: var(--svc-brand); }
.servicespage-task-ic { width: 17px; height: 17px; flex: none; color: #22c55e; }
.servicespage-task-label { min-width: 0; }
/* arrow hugs the label (sits right after it), not floating at the row edge */
.servicespage-task-arrow { width: 15px; height: 15px; flex: none; color: #cbd5e1; transition: transform .15s, color .15s; }
.servicespage-task:hover .servicespage-task-arrow { color: var(--svc-brand); transform: translateX(-3px); }
/* cat pill pushed to the far (left) edge via auto margin */
.servicespage-task-cat {
  margin-inline-start: auto;
  font-size: .66rem; font-weight: 700; padding: .1rem .45rem; border-radius: 5px;
  background: color-mix(in srgb, var(--svc-brand) 7%, transparent); color: var(--svc-brand);
  white-space: nowrap;
}
.servicespage-task.is-soon { color: #94a3b8; cursor: not-allowed; }
.servicespage-task.is-soon .servicespage-task-ic { color: #cbd5e1; }

/* ─────────── empty state ─────────── */
.servicespage-empty {
  text-align: center; padding: 3rem 1rem; color: var(--svc-muted);
}
.servicespage-empty svg { width: 42px; height: 42px; margin: 0 auto .75rem; display: block; opacity: .5; }
.servicespage-empty p { font-size: 1rem; margin-bottom: 1rem; }
.servicespage-empty-reset {
  border: 1.5px solid var(--svc-brand); color: var(--svc-brand); background: #fff;
  font-weight: 700; padding: .5rem 1.25rem; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.servicespage-empty-reset:hover { background: var(--svc-brand); color: #fff; }

/* ─────────── dark mode ─────────── */
.dark .servicespage-list { background: #0f172a; }
.dark .servicespage-card { background: #1e293b; border-color: #334155; }
.dark .servicespage-card.is-featured { background: linear-gradient(180deg, color-mix(in srgb, var(--svc-brand) 18%, #1e293b), #1e293b 50%); border-color: color-mix(in srgb, var(--svc-brand) 40%, transparent); }
.dark .servicespage-card-title, .dark .servicespage-tier-title { color: #f1f5f9; }
.dark .servicespage-card-body, .dark .servicespage-task { color: #cbd5e1; }
.dark .servicespage-card-logo { background: #0f172a; border-color: #334155; }
.dark .servicespage-chip { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .servicespage-search-box { background: #1e293b; border-color: #334155; }
.dark .servicespage-search-input { color: #f1f5f9; }
.dark .servicespage-stat { background: #1e293b; border-color: #334155; }
.dark .servicespage-task:hover { background: #0f172a; }

/* ─────────── responsive ─────────── */
@media (max-width:420px){
  .servicespage-stats { gap: .5rem; }
  .servicespage-stat { padding: .5rem .75rem; flex: 1 1 calc(33% - .5rem); }
  .servicespage-card-title { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce){
  .servicespage-card, .servicespage-task, .servicespage-task-arrow, .servicespage-chip { transition: none !important; }
  .servicespage-card:hover { transform: none; }
}

/* Isotope absolute-positions items → disable hover lift (it fights the
   positioning transform). Keep the shadow/border feedback instead. */
.servicespage-iso .servicespage-card { transition: box-shadow .2s, border-color .2s; }
.servicespage-iso .servicespage-card:hover { transform: none; box-shadow: 0 18px 40px -24px rgba(13,62,126,.4); }

/* ─────────── "show more" toggle (collapse long task lists) ─────────── */
.servicespage-more-btn {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 100%; margin-top: .5rem; padding: .5rem;
  border: 0; border-top: 1px dashed var(--svc-line); border-radius: 0 0 10px 10px;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: .82rem; font-weight: 700; color: var(--svc-brand);
  transition: background .15s;
}
.servicespage-more-btn:hover { background: var(--svc-soft); }
.servicespage-more-ic { width: 15px; height: 15px; transition: transform .2s; }
.servicespage-more-btn[aria-expanded="true"] .servicespage-more-ic { transform: rotate(180deg); }
.dark .servicespage-more-btn:hover { background: #0f172a; }