/* ============================================================================
 * Pairing Path V2 — bespoke CSS (no RTL rules here; tailwind-rtl handles that)
 * Keep this file SMALL. Tailwind utilities do the heavy lifting in markup.
 * ========================================================================== */

:root {
  --pp-ink-950: #07071a;
  --pp-ink-900: #0b0b24;
  --pp-violet:  #8b5cf6;
  --pp-cyan:    #06b6d4;
  --pp-pink:    #ec4899;
}

html,
body {
  background: radial-gradient(circle at 20% 0%, rgba(139, 92, 246, 0.15), transparent 50%),
              radial-gradient(circle at 80% 100%, rgba(6, 182, 212, 0.12), transparent 50%),
              var(--pp-ink-950);
  color: #e2e8f0;
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
}

html.light,
html.light body {
  background: radial-gradient(circle at 20% 0%, rgba(139, 92, 246, 0.10), transparent 50%),
              radial-gradient(circle at 80% 100%, rgba(6, 182, 212, 0.08), transparent 50%),
              #f7f5ff;
  color: #11111f;
}

html[lang="ar"] body { font-family: 'Cairo', system-ui, sans-serif; }

/* Display font helper — replaces inline style="font-family:..." in markup */
.pp-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
html[lang="ar"] .pp-display { font-family: 'Cairo', system-ui, sans-serif; }

/* Feature-page layout helpers */
.pp-feature-hero {
  padding-top: 3.5rem; padding-bottom: 3rem;
}
.pp-pros-card { background: rgba(16, 185, 129, .06); border-color: rgba(16, 185, 129, .25); }
.pp-cons-card { background: rgba(244, 63, 94, .06);  border-color: rgba(244, 63, 94, .25); }
.pp-kpi {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}
html[lang="ar"] .pp-kpi { font-family: 'Cairo', system-ui, sans-serif; }

/* Ladder rows */
.pp-ladder-row { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: .75rem; align-items: center; padding: .75rem 1rem; border-radius: .75rem; }
.pp-ladder-row + .pp-ladder-row { margin-top: .35rem; }
.pp-ladder-num {
  width: 2.75rem; height: 2.75rem; border-radius: .65rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #07071a;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.pp-ladder-pill {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: .35rem; color: #07071a;
}

/* Wallet currency row */
.pp-curr-row {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: stretch;
  padding: 1rem 1.15rem; border-radius: 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.18);
}
.pp-curr-code {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: .65rem;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(6,182,212,.18));
  color: #c4b5fd;
}

/* ─── Gradient text ─── */
.pp-grad-text {
  background: linear-gradient(135deg, var(--pp-violet), var(--pp-cyan), var(--pp-pink));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ─── Glass panel ─── */
.pp-glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  backdrop-filter: blur(8px);
}
html.light .pp-glass {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(139, 92, 246, 0.18);
}

/* ─── Gradient button ─── */
.pp-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem 1rem;
  border-radius: .65rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--pp-violet), var(--pp-cyan));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(139, 92, 246, .6);
  transition: transform .2s, box-shadow .2s;
}
.pp-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(139, 92, 246, .8); }

/* ═════════════════════════ PAGE LOADER ═════════════════════════ */
#pp-loader {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--pp-ink-950);
  z-index: 9999;
  transition: opacity .55s ease, visibility .55s ease;
}
html.light #pp-loader { background: #f7f5ff; }
#pp-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

#pp-loader-logo {
  width: 96px; height: 96px;
}
#pp-loader-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #94a3b8;
}
#pp-loader-bar {
  width: 160px; height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .2);
  overflow: hidden;
}
#pp-loader-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pp-violet), var(--pp-cyan), var(--pp-pink));
  width: 0%;
  transition: width .35s ease;
}

/* Animated SVG logo strokes */
.pp-logo-ring  { transform-origin: center; animation: pp-ring 6s linear infinite; }
.pp-logo-pulse { animation: pp-pulse 1.8s ease-in-out infinite; }
.pp-logo-link  { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pp-link 2.6s ease-in-out infinite; }
@keyframes pp-ring  { to   { transform: rotate(360deg); } }
@keyframes pp-pulse { 0%, 100% { transform: scale(1);   opacity: 1; } 50% { transform: scale(1.08); opacity: .7; } }
@keyframes pp-link  { 0%   { stroke-dashoffset: 24; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -24; } }

/* ═════════════════════════ BLOCK ANIMATIONS (run after loader) ═════════════════════════ */
/* Each [data-pp-rv] starts hidden; .pp-ready (added after loader is hidden) lets them
   animate in via .rv-in. */
[data-pp-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.pp-ready [data-pp-rv].rv-in {
  opacity: 1;
  transform: translateY(0);
}

/* ═════════════════════════ TOOLTIPS ═════════════════════════ */
/* Bottom tooltip on hover for one-word nav links and CTA. */
.pp-tip { position: relative; }
.pp-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 15, 30, .96);
  color: #e2e8f0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: .4rem .65rem;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: .5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 40;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
}
.pp-tip:hover::after,
.pp-tip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
html.light .pp-tip::after { background: #11111f; color: #f5f3ff; }

/* ═════════════════════════ MOBILE MENU ═════════════════════════ */
.pp-mobile-menu { display: none; }
.pp-mobile-menu.is-open { display: flex; }
@media (min-width: 960px) {
  .pp-mobile-menu,
  .pp-mobile-menu.is-open { display: none !important; }
}

/* ═════════════════════════ LANGUAGE ASIDE ═════════════════════════ */
.pp-aside-backdrop {
  position: fixed; inset: 0;
  background: rgba(7, 7, 17, .65);
  backdrop-filter: blur(6px);
  z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.pp-aside-backdrop.is-open { opacity: 1; visibility: visible; }

.pp-aside {
  position: fixed; top: 0; bottom: 0; right: 0;
  width: min(420px, 92vw);
  background: var(--pp-ink-900);
  border-left: 1px solid rgba(148, 163, 184, .18);
  z-index: 70;
  transform: translateX(105%);
  transition: transform .35s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
html[dir="rtl"] .pp-aside       { right: auto; left: 0; border-left: none; border-right: 1px solid rgba(148, 163, 184, .18); transform: translateX(-105%); }
.pp-aside.is-open               { transform: translateX(0); }
html.light .pp-aside            { background: #fff; }

.pp-blacklist-card {
  background: rgba(244, 63, 94, .08);
  border: 1px solid rgba(244, 63, 94, .3);
  border-radius: .75rem;
}