/* ==========================================================================
   RankNexa design system
   Palette: deep indigo (trust/tech) + emerald "rank-up" accent (growth).
   Every selector below keeps its original `ewc-*` class name (used across
   ~40 PHP templates) so no markup had to change — only the tokens and
   component styling underneath were rebuilt from scratch for the
   RankNexa relaunch. New components introduced for the relaunch (SEO
   tool badges, currency switcher, stat strip, breadcrumbs, light FAQ) use
   `rn-*` names so they're easy to tell apart from the legacy hooks.
   ========================================================================== */

:root {
  /* Core brand tokens */
  --rn-primary: #4F46E5;
  --rn-primary-dark: #4338CA;
  --rn-primary-light: #EEF2FF;
  --rn-accent: #10B981;
  --rn-accent-dark: #059669;
  --rn-accent-light: #ECFDF5;
  --rn-warn: #F59E0B;
  --rn-warn-light: #FFFBEB;
  --rn-danger: #EF4444;

  --rn-ink: #0F172A;
  --rn-ink-2: #1E293B;
  --rn-muted: #64748B;
  --rn-muted-2: #94A3B8;
  --rn-border: #E2E8F0;
  --rn-bg: #FFFFFF;
  --rn-bg-soft: #F8FAFC;
  --rn-bg-dark: #0B1120;
  --rn-bg-dark-2: #111827;

  --rn-radius-sm: .5rem;
  --rn-radius: .9rem;
  --rn-radius-lg: 1.25rem;
  --rn-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --rn-shadow: 0 8px 24px rgba(15,23,42,.08);
  --rn-shadow-lg: 0 24px 60px rgba(15,23,42,.14);

  /* Legacy aliases — every old --ewc-* var still resolves, since a few
     inline styles (kept intact deliberately, see includes/header.php)
     reference them directly. */
  --ewc-primary: var(--rn-primary);
  --ewc-primary-dark: var(--rn-primary-dark);
  --ewc-bg-dark: var(--rn-bg-dark);
  --ewc-text-muted: var(--rn-muted);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--rn-ink-2);
  background: var(--rn-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .rn-display {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--rn-ink);
  letter-spacing: -.01em;
}

@media screen {
  body { min-height: 100vh; display: flex; flex-direction: column; }
  body > main { flex: 1 0 auto; }
  body > .ewc-footer { flex-shrink: 0; }
}

a { text-decoration: none; color: var(--rn-primary); }
::selection { background: var(--rn-primary-light); color: var(--rn-primary-dark); }

/* Reduced-motion safety: every transform/animation below is purely
   decorative, so users who've asked the OS to cut motion get it cut. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- Buttons ---- */
.btn-ewc-primary {
  background: var(--rn-primary);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(79,70,229,.15);
}
.btn-ewc-primary:hover { background: var(--rn-primary-dark); color: #fff; }
.btn-outline-secondary { border-color: var(--rn-border); color: var(--rn-ink-2); }
.btn-outline-secondary:hover { background: var(--rn-bg-soft); border-color: var(--rn-muted-2); color: var(--rn-ink); }
.btn { border-radius: var(--rn-radius-sm); }
.btn-lg { border-radius: .7rem; }

/* ---- Navbar ---- */
.ewc-navbar { box-shadow: 0 1px 0 var(--rn-border); backdrop-filter: saturate(1.1); }
.ewc-logo-badge {
  background: linear-gradient(135deg, var(--rn-primary), var(--rn-accent));
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: .5rem;
  margin-right: .3rem;
  letter-spacing: .02em;
}
.navbar-brand { color: var(--rn-ink) !important; font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.ewc-navbar .nav-link { color: var(--rn-ink-2); font-weight: 500; }
.ewc-navbar .nav-link:hover, .ewc-navbar .nav-link:focus { color: var(--rn-primary); }
.ewc-credit-pill {
  background: var(--rn-accent-light);
  color: var(--rn-accent-dark);
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 2rem;
  font-size: .85rem;
  display: inline-block;
}
.ewc-mega-menu { min-width: 480px; border-radius: var(--rn-radius-lg); border: 1px solid var(--rn-border); box-shadow: var(--rn-shadow-lg); }
.ewc-mega-menu-wide { min-width: 640px; }
.ewc-mega-link { display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem; border-radius: .6rem; color: var(--rn-ink-2); font-size: .9rem; }
.ewc-mega-link:hover { background: var(--rn-primary-light); color: var(--rn-primary-dark); }
.ewc-mega-heading {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rn-muted-2);
  font-weight: 700;
  padding: .3rem .65rem;
  margin-bottom: .25rem;
}

@media (max-width: 991.98px) {
  .ewc-mega-menu {
    position: static;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: 1px solid var(--rn-border);
  }
  .ewc-mega-menu .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---- Currency switcher (RankNexa: INR / USD) ---- */
.rn-currency-switch {
  display: inline-flex;
  align-items: center;
  background: var(--rn-bg-soft);
  border: 1px solid var(--rn-border);
  border-radius: 2rem;
  padding: .2rem;
  gap: .15rem;
}
.rn-currency-switch a {
  padding: .3rem .7rem;
  border-radius: 2rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--rn-muted);
}
.rn-currency-switch a.active { background: var(--rn-ink); color: #fff; }

/* ---- Hero ---- */
.ewc-hero {
  position: relative;
  background:
    radial-gradient(circle at 15% 10%, rgba(79,70,229,.10) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(16,185,129,.10) 0%, transparent 45%),
    var(--rn-bg);
  padding: 5.5rem 0 4rem;
  overflow: hidden;
}
.ewc-hero h1 { font-weight: 800; font-size: 3.1rem; line-height: 1.12; }

.rn-badge-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--rn-bg); border: 1px solid var(--rn-border);
  color: var(--rn-ink-2); font-weight: 600; font-size: .82rem;
  padding: .4rem .9rem; border-radius: 2rem; box-shadow: var(--rn-shadow-sm);
}
.rn-badge-pill .bi { color: var(--rn-accent); }

/* ---- Stat strip (homepage trust bar) ---- */
.rn-stat-strip { border-top: 1px solid var(--rn-border); border-bottom: 1px solid var(--rn-border); background: var(--rn-bg-soft); }
.rn-stat { text-align: center; padding: 1.75rem 0; }
.rn-stat .num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2rem; color: var(--rn-ink); }
.rn-stat .label { color: var(--rn-muted); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Section heading helper ---- */
.rn-eyebrow { color: var(--rn-primary); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---- Tool cards ---- */
.ewc-tool-card {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius);
  padding: 1.5rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background: var(--rn-bg);
}
.ewc-tool-card:hover { transform: translateY(-4px); box-shadow: var(--rn-shadow); border-color: var(--rn-primary-light); }
.ewc-tool-icon {
  width: 48px; height: 48px;
  border-radius: .8rem;
  background: var(--rn-primary-light);
  color: var(--rn-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.rn-tool-icon-seo { background: var(--rn-accent-light); color: var(--rn-accent-dark); }
.ewc-credit-badge {
  font-size: .75rem;
  background: var(--rn-warn-light);
  color: #92400E;
  padding: .1rem .5rem;
  border-radius: .5rem;
  font-weight: 700;
}

/* ---- SEO tools "free" ribbon ---- */
.rn-free-badge {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  background: var(--rn-accent-light); color: var(--rn-accent-dark);
  padding: .15rem .5rem; border-radius: .4rem;
}

/* ---- Pricing (light cards, kept for any non-dark usage) ---- */
.ewc-plan-card {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  padding: 2rem;
  height: 100%;
  background: var(--rn-bg);
  position: relative;
}
.ewc-plan-card.ewc-plan-highlight {
  border: 2px solid var(--rn-primary);
  box-shadow: var(--rn-shadow-lg);
}
.ewc-plan-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--rn-primary); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .25rem .9rem; border-radius: 2rem;
}
.ewc-plan-price { font-size: 2.5rem; font-weight: 800; }
.ewc-plan-price small { font-size: 1rem; font-weight: 500; color: var(--rn-muted); }

/* ---- Tool workspace cards (form + result) ---- */
.ewc-tool-box {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  padding: 2rem;
  height: auto;
  background: var(--rn-bg);
  position: relative;
}

.ewc-result-textarea {
  min-height: 4.5rem;
  height: auto;
  field-sizing: content;
  resize: vertical;
  overflow-y: hidden;
  border-radius: var(--rn-radius-sm);
  border-color: var(--rn-border);
}

/* ---- Footer ---- */
.ewc-footer { background: var(--rn-bg-dark); }
.ewc-footer h5, .ewc-footer h6 { font-family: 'Plus Jakarta Sans', sans-serif; }
.ewc-footer a { color: #94A3B8; }
.ewc-footer a:hover { color: #fff; }
.ewc-footer .rn-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.06); margin-right: .4rem; }
.ewc-footer .rn-social-links a:hover { background: var(--rn-primary); }

/* ==========================================================================
   Dark pricing page — scoped to body.ewc-pricing-dark only
   ========================================================================== */
body.ewc-pricing-dark { background: var(--rn-bg-dark); color: #E2E8F0; }
body.ewc-pricing-dark .ewc-navbar { background: var(--rn-bg-dark) !important; border-bottom: 1px solid #1E293B; box-shadow: none; }
body.ewc-pricing-dark .ewc-navbar .nav-link,
body.ewc-pricing-dark .ewc-navbar .navbar-brand { color: #E2E8F0 !important; }
body.ewc-pricing-dark .navbar-toggler-icon { filter: invert(1); }
body.ewc-pricing-dark .rn-currency-switch { background: #131A2C; border-color: #1E293B; }
body.ewc-pricing-dark .rn-currency-switch a { color: #94A3B8; }
body.ewc-pricing-dark .rn-currency-switch a.active { background: var(--rn-accent); color: #06281D; }

.ewc-pricing-hero {
  background: radial-gradient(circle at 20% 0%, rgba(16,185,129,.16) 0%, transparent 45%),
              radial-gradient(circle at 80% 10%, rgba(79,70,229,.22) 0%, transparent 45%);
  padding: 4rem 0 2rem;
  text-align: center;
}
.ewc-pricing-hero h1 { font-weight: 800; font-size: 2.75rem; color: #fff; }
.ewc-pricing-hero p { color: #94A3B8; }

.ewc-toggle-pill {
  display: inline-flex;
  background: #131A2C;
  border: 1px solid #1E293B;
  border-radius: 2rem;
  padding: .3rem;
  gap: .25rem;
}
.ewc-toggle-pill .btn {
  border-radius: 2rem;
  border: none;
  background: transparent;
  color: #94A3B8;
  font-weight: 600;
  padding: .5rem 1.25rem;
}
.ewc-toggle-pill .btn.active { background: #fff; color: var(--rn-bg-dark); }
.ewc-toggle-pill .btn .off-badge { color: var(--rn-accent); font-weight: 700; margin-left: .35rem; }

.ewc-dark-plan {
  background: #111A2E;
  border: 1px solid #1E293B;
  border-radius: var(--rn-radius-lg);
  padding: 1.75rem;
  height: 100%;
  position: relative;
  color: #E2E8F0;
  transition: transform .18s ease, border-color .18s ease;
}
.ewc-dark-plan:hover { transform: translateY(-3px); }
.ewc-dark-plan.ewc-plan-pink { border: 2px solid var(--rn-accent); box-shadow: 0 0 40px rgba(16,185,129,.18); }
.ewc-dark-plan.ewc-plan-gold { border: 2px solid #FBBF24; }
.ewc-plan-ribbon {
  position: absolute; top: -1px; left: -1px; right: -1px;
  background: linear-gradient(90deg, var(--rn-accent), #22D3AA);
  color: #06281D; font-weight: 700; font-size: .8rem;
  text-align: center; padding: .4rem; border-radius: 1rem 1rem 0 0;
  margin: -1.75rem -1.75rem 1rem;
}
.ewc-flash-badge {
  background: linear-gradient(90deg, var(--rn-warn), #FB923C);
  color: #fff; font-size: .7rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: .4rem; margin-left: .5rem;
}
.ewc-dark-plan .plan-name { color: #fff; font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; font-family: 'Plus Jakarta Sans', sans-serif; }
.ewc-dark-plan .plan-price { color: #fff; font-weight: 800; font-size: 2.2rem; font-family: 'Plus Jakarta Sans', sans-serif; }
.ewc-dark-plan .plan-price .strike { color: #64748B; text-decoration: line-through; font-size: 1.1rem; font-weight: 500; margin-left: .4rem; }
.ewc-dark-plan .plan-sub { color: #94A3B8; font-size: .85rem; }
.ewc-dark-plan ul { list-style: none; padding: 0; margin: 1rem 0; }
.ewc-dark-plan ul li { color: #CBD5E1; font-size: .9rem; padding: .4rem 0; border-bottom: 1px solid #1E293B; }
.ewc-dark-plan ul li i { color: var(--rn-accent); margin-right: .5rem; }
.ewc-dark-plan ul li.disabled { color: #475569; }
.ewc-dark-plan ul li.disabled i { color: #475569; }

.ewc-btn-buy-white { background: #fff; color: var(--rn-bg-dark); font-weight: 700; border: none; border-radius: .6rem; padding: .7rem; width: 100%; transition: opacity .15s; }
.ewc-btn-buy-white:hover { opacity: .9; color: var(--rn-bg-dark); }
.ewc-btn-buy-pink { background: linear-gradient(90deg, var(--rn-accent), #22D3AA); color: #06281D; font-weight: 700; border: none; border-radius: .6rem; padding: .7rem; width: 100%; }
.ewc-btn-buy-pink:hover { color: #06281D; opacity: .92; }
.ewc-btn-buy-gold { background: #FBBF24; color: var(--rn-bg-dark); font-weight: 700; border: none; border-radius: .6rem; padding: .7rem; width: 100%; }
.ewc-btn-buy-gold:hover { color: var(--rn-bg-dark); opacity: .92; }
.ewc-btn-upi { background: #131A2C; color: #CBD5E1; font-weight: 600; border: 1px solid #1E293B; border-radius: .6rem; padding: .55rem; width: 100%; margin-top: .5rem; font-size: .85rem; }

.ewc-compare-table { background: #111A2E; border: 1px solid #1E293B; border-radius: var(--rn-radius-lg); overflow: hidden; }
.ewc-compare-table table { color: #E2E8F0; margin-bottom: 0; }
.ewc-compare-table th, .ewc-compare-table td { border-color: #1E293B !important; vertical-align: middle; }
.ewc-compare-table thead th { color: #fff; background: #131A2C; }

.ewc-dark-plan.ewc-plan-special {
  background: linear-gradient(160deg, #131A2C, #10241F);
  border: 2px solid var(--rn-accent);
  box-shadow: 0 0 50px rgba(16,185,129,.22);
}
.ewc-plan-special-badge {
  position: absolute; top: -1px; left: -1px; right: -1px;
  background: linear-gradient(90deg, var(--rn-accent), #22D3AA);
  color: #06281D; font-weight: 700; font-size: .78rem;
  text-align: center; padding: .45rem; border-radius: 1rem 1rem 0 0;
  margin: -1.75rem -1.75rem 1rem;
}
.ewc-discount-badge {
  display: inline-block; background: rgba(16,185,129,.15); color: #34D399;
  font-weight: 700; font-size: .75rem; padding: .15rem .55rem; border-radius: .4rem;
  margin-left: .4rem; vertical-align: middle;
}
.ewc-price-strike { color: #64748B; text-decoration: line-through; font-size: 1rem; font-weight: 500; }
.ewc-price-sub-detail { color: #94A3B8; font-size: .8rem; margin-top: .15rem; }
.ewc-feature-list { list-style: none; padding: 0; margin: 1.1rem 0; }
.ewc-feature-list li { display: flex; align-items: center; gap: .55rem; color: #CBD5E1; font-size: .88rem; padding: .45rem 0; border-bottom: 1px solid #1E293B; }
.ewc-feature-list li i.bi-check-circle-fill { color: #34D399; }
.ewc-feature-list li i.bi-dash-circle { color: #475569; }
.ewc-feature-list li.locked { color: #64748B; }
.ewc-feature-badge { font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: .3rem; background: #1E293B; color: #CBD5E1; margin-left: auto; }

.ewc-faq-dark .accordion-item { background: transparent; border: 1px solid #1E293B; margin-bottom: .5rem; border-radius: .75rem !important; overflow: hidden; }
.ewc-faq-dark .accordion-button { background: #111A2E; color: #fff; font-weight: 600; }
.ewc-faq-dark .accordion-button:not(.collapsed) { background: #131A2C; color: #fff; box-shadow: none; }
.ewc-faq-dark .accordion-body { background: #0B1120; color: #94A3B8; }
.ewc-faq-dark .accordion-button::after { filter: invert(1); }

/* ---- Light FAQ (homepage — schema-linked, see includes/seo_schema.php) ---- */
.rn-faq-light .accordion-item { border: 1px solid var(--rn-border); margin-bottom: .6rem; border-radius: .9rem !important; overflow: hidden; }
.rn-faq-light .accordion-button { font-weight: 700; color: var(--rn-ink); background: var(--rn-bg); }
.rn-faq-light .accordion-button:not(.collapsed) { color: var(--rn-primary); background: var(--rn-primary-light); box-shadow: none; }

/* ---- Tool workspace (upload / result) ---- */
.ewc-dropzone {
  border: 2px dashed #C7D2FE;
  border-radius: var(--rn-radius);
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--rn-primary-light);
}
.ewc-dropzone:hover { border-color: var(--rn-primary); }

/* ---- Platform badges (YouTube / Facebook / Instagram / SEO tool pages) ---- */
.ewc-platform-badge {
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .7rem;
  border-radius: 2rem;
  color: #fff;
  letter-spacing: .02em;
}
.ewc-platform-youtube   { background: linear-gradient(90deg, #ff0000, #ff5c3d); }
.ewc-platform-facebook  { background: linear-gradient(90deg, #1877f2, #3b82f6); }
.ewc-platform-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.ewc-platform-seo       { background: linear-gradient(90deg, var(--rn-accent), var(--rn-primary)); }
.ewc-platform-other     { background: linear-gradient(90deg, var(--rn-primary), #7C3AED); }

/* ---- Nav platform icons ---- */
.ewc-navbar .nav-link i { font-size: 1.05rem; vertical-align: -2px; margin-right: .15rem; }

/* ---- Homepage section header icons ---- */
.container > .d-flex .bi { filter: drop-shadow(0 2px 6px rgba(15,23,42,.08)); }

/* ---- Breadcrumbs (SEO — BreadcrumbList schema mirrors this, see seo_schema.php) ---- */
.rn-breadcrumb { font-size: .85rem; color: var(--rn-muted); margin-bottom: 1rem; }
.rn-breadcrumb a { color: var(--rn-muted); }
.rn-breadcrumb a:hover { color: var(--rn-primary); }
.rn-breadcrumb .sep { margin: 0 .4rem; color: var(--rn-muted-2); }

/* ---- CMS page content (About/Contact/legal pages) ---- */
.ewc-page-content { color: var(--rn-ink-2); line-height: 1.7; }
.ewc-page-content h1, .ewc-page-content h2, .ewc-page-content h3 { font-weight: 700; margin-top: 1.5rem; margin-bottom: .75rem; }
.ewc-page-content p { margin-bottom: 1rem; }
.ewc-page-content ul, .ewc-page-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.ewc-page-content a { color: var(--rn-primary); }