/* ===========================================================
   RankToolsPro — main stylesheet
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Noto+Nastaliq+Urdu:wght@500;700&display=swap');

:root{
  --primary:#0F172A;
  --secondary:#2563EB;
  --accent:#22C55E;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --border:#E2E8F0;
  --text:#0F172A;
  --text-muted:#5B6472;
  --shadow: 0 4px 18px rgba(15,23,42,0.06);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
  --radius: 14px;
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#111C31;
  --border:#233252;
  --text:#EAF1FB;
  --text-muted:#93A2BC;
  --shadow: 0 4px 18px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5);
}

html[lang="ur"], body.lang-ur{
  font-family:'Noto Nastaliq Urdu','Inter',sans-serif;
}
body.lang-ur{ direction: rtl; }
body.lang-ur .nav-links{ direction: rtl; }
body.lang-ur .tool-grid, body.lang-ur .steps{ direction: rtl; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  transition:background .25s ease, color .25s ease;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text); line-height:1.25; margin:0 0 .5em; }
p{ color:var(--text-muted); margin:0 0 1em; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
.small{ font-size:.85rem; }
.center{ text-align:center; }

/* Skip link / focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--secondary); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.28); }
.btn-primary:hover{ background:#1d4fd1; }
.btn-accent{ background:var(--accent); color:#06210F; box-shadow:0 6px 16px rgba(34,197,94,.28); }
.btn-accent:hover{ background:#1ba851; }
.btn-outline{ background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:hover{ border-color:var(--secondary); color:var(--secondary); }
.btn-sm{ padding:8px 14px; font-size:.82rem; border-radius:8px; }
.btn-block{ width:100%; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--primary); color:#cbd5e1; font-size:.8rem; padding:6px 0;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#cbd5e1; }
.topbar a:hover{ color:#fff; }

/* ---------- Header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:16px; }
.logo-link svg{ height:36px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-weight:600; font-size:.94rem; color:var(--text); position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--secondary); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:40px; height:40px; border-radius:10px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1rem; transition:all .15s ease;
}
.icon-btn:hover{ border-color:var(--secondary); color:var(--secondary); }
.lang-btn{ width:auto; padding:0 12px; font-weight:700; font-size:.8rem; letter-spacing:.5px; }
.menu-toggle{ display:none; }

.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:0; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg);
  min-width:220px; padding:8px; display:none; flex-direction:column; gap:2px;
}
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu{ display:flex; }
.dropdown-menu a{ padding:9px 12px; border-radius:8px; font-weight:500; font-size:.9rem; }
.dropdown-menu a:hover{ background:var(--bg); color:var(--secondary); }

@media (max-width:920px){
  .nav-links{
    position:fixed; inset:64px 0 0 0; background:var(--surface); flex-direction:column;
    align-items:flex-start; padding:20px; gap:4px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease; border-top:1px solid var(--border);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:12px 6px; border-bottom:1px solid var(--border); }
  .dropdown-menu{ position:static; box-shadow:none; border:none; display:none; padding-left:12px; }
  .dropdown.open .dropdown-menu{ display:flex; }
  .menu-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 48px; text-align:center;
  background:
    radial-gradient(700px 300px at 15% -10%, rgba(37,99,235,.14), transparent 60%),
    radial-gradient(700px 300px at 90% 0%, rgba(34,197,94,.14), transparent 60%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  color:var(--secondary); font-weight:700; font-size:.78rem; letter-spacing:.4px; padding:6px 14px; border-radius:999px;
  margin-bottom:18px; box-shadow:var(--shadow);
}
.hero h1{ font-size:clamp(1.9rem,4vw,3rem); max-width:820px; margin-inline:auto; }
.hero p.lead{ max-width:640px; margin:14px auto 28px; font-size:1.05rem; }
.gradient-text{ background:linear-gradient(90deg,var(--secondary),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* search bar */
.search-wrap{ max-width:620px; margin:0 auto; position:relative; }
.search-wrap input{
  width:100%; padding:16px 54px 16px 20px; border-radius:14px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:1rem; box-shadow:var(--shadow);
}
.search-wrap button{
  position:absolute; right:6px; top:6px; bottom:6px; width:44px; border-radius:10px; border:none;
  background:var(--secondary); color:#fff; cursor:pointer; font-size:1.05rem;
}
body.lang-ur .search-wrap input{ padding:16px 20px 16px 54px; }
body.lang-ur .search-wrap button{ right:auto; left:6px; }
#search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); text-align:left;
  max-height:280px; overflow-y:auto; display:none; z-index:20;
}
#search-results a{ display:block; padding:12px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:.92rem; }
#search-results a:hover{ background:var(--bg); color:var(--secondary); }
#search-results.show{ display:block; }

/* ---------- Sections ---------- */
section{ padding:52px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 34px; }
.section-head .tag{ color:var(--secondary); font-weight:700; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; }

.cat-grid, .tool-grid{
  display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cat-card, .tool-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover, .tool-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--secondary); }
.cat-card .ic, .tool-card .ic{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:14px; background:linear-gradient(135deg,var(--secondary),var(--accent)); color:#fff;
}
.cat-card h3, .tool-card h3{ font-size:1.05rem; margin-bottom:6px; }
.cat-card p, .tool-card p{ font-size:.9rem; margin-bottom:14px; }
.cat-card .count{ font-size:.78rem; color:var(--accent); font-weight:700; }
.tool-card a.go{ font-weight:700; color:var(--secondary); font-size:.88rem; }
.tool-card a.go:hover{ text-decoration:underline; }

/* Steps / how it works */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
.step{ text-align:center; }
.step .num{
  width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:flex;
  align-items:center; justify-content:center; font-weight:700; margin:0 auto 12px; font-family:var(--font-display);
}

/* ---------- Tool page layout ---------- */
.breadcrumb{ font-size:.85rem; color:var(--text-muted); padding:16px 0 0; }
.breadcrumb a{ color:var(--secondary); font-weight:600; }
.tool-hero{ padding:26px 0 8px; }
.tool-hero h1{ font-size:clamp(1.5rem,3vw,2.1rem); }
.tool-layout{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }
@media (max-width:980px){ .tool-layout{ grid-template-columns:1fr; } }

.tool-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; box-shadow:var(--shadow); margin-bottom:26px;
}
.tool-panel h2{ font-size:1.15rem; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.field small.hint{ display:block; color:var(--text-muted); margin-top:5px; font-size:.78rem; }
input[type=text], input[type=number], input[type=date], input[type=url], input[type=password], textarea, select{
  width:100%; padding:11px 14px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--bg); color:var(--text); font-size:.95rem; font-family:var(--font-body);
}
textarea{ resize:vertical; min-height:140px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row .field{ flex:1; min-width:150px; }
.checks{ display:flex; flex-wrap:wrap; gap:14px; }
.checks label{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:.9rem; cursor:pointer; }
.upload-box{
  border:2px dashed var(--border); border-radius:12px; padding:32px 18px; text-align:center; cursor:pointer;
  background:var(--bg); transition:border-color .15s ease;
}
.upload-box:hover, .upload-box.dragover{ border-color:var(--secondary); }
.upload-box .ic{ font-size:2rem; margin-bottom:8px; }
.result-box{
  margin-top:18px; padding:18px; border-radius:12px; background:var(--bg); border:1px solid var(--border); display:none;
}
.result-box.show{ display:block; }
.result-box img{ max-width:100%; border-radius:10px; margin:10px 0; }
.stat-row{ display:flex; gap:18px; flex-wrap:wrap; margin:10px 0; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px 16px; font-size:.85rem; }
.stat b{ display:block; font-family:var(--font-display); font-size:1.2rem; color:var(--secondary); }
.copy-row{ display:flex; gap:10px; margin-top:10px; }
.thumb-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:14px; }
.thumb-grid figure{ margin:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px; text-align:center; }
.thumb-grid figcaption{ font-size:.75rem; margin-top:6px; color:var(--text-muted); }
.progress-track{ height:8px; border-radius:6px; background:var(--border); overflow:hidden; margin-top:10px; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--secondary),var(--accent)); transition:width .2s ease; }
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; background:rgba(34,197,94,.15); color:#16803d; }
[data-theme="dark"] .badge{ color:#4ade80; }
.alert{ padding:12px 14px; border-radius:10px; background:#FEF3C7; color:#92400E; font-size:.85rem; margin-top:12px; }
[data-theme="dark"] .alert{ background:#3a2f0f; color:#fde68a; }

.content-block{ margin-top:8px; }
.content-block h2{ font-size:1.3rem; margin-top:30px; }
.faq-item{ border-bottom:1px solid var(--border); padding:14px 0; }
.faq-item h3{ font-size:.98rem; margin-bottom:4px; }
.faq-item p{ margin:0; }

.sidebar .tool-panel{ position:sticky; top:86px; }
.related-list{ list-style:none; margin:0; padding:0; }
.related-list li{ margin-bottom:8px; }
.related-list a{ font-weight:600; font-size:.9rem; color:var(--secondary); }
.related-list a:hover{ text-decoration:underline; }

/* Ad placeholders */
.ad-space{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg, var(--border), var(--border) 10px, transparent 10px, transparent 20px);
  border:1.5px dashed var(--border); border-radius:12px; color:var(--text-muted); font-size:.78rem;
  font-weight:600; letter-spacing:.4px; margin:20px 0; min-height:90px;
}
.ad-space.leaderboard{ min-height:90px; }
.ad-space.sidebar-ad{ min-height:250px; }
.ad-space.footer-ad{ min-height:90px; }

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--primary),#122a55);
  color:#fff; border-radius:20px; padding:40px 30px; text-align:center; margin:20px auto;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#cbd5e1; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--primary); color:#cbd5e1; padding:50px 0 20px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:#94a3b8; font-size:.88rem; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid #1e2c47; margin-top:34px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:#7c8aa5; }
.social-row{ display:flex; gap:10px; margin-top:12px; }
.social-row a{ width:36px; height:36px; border-radius:9px; background:#1e2c47; display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--secondary); }

/* Page hero (about/contact/etc) */
.page-hero{ padding:44px 0 10px; }
.page-hero h1{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.info-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
table.legal, table{ width:100%; border-collapse:collapse; }
.legal p, .legal li{ color:var(--text-muted); }
.legal h2{ margin-top:28px; }

.back-top{
  position:fixed; bottom:22px; right:22px; width:46px; height:46px; border-radius:50%;
  background:var(--secondary); color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); cursor:pointer; z-index:60; border:none; font-size:1.1rem;
}
.back-top.show{ display:flex; }