/* Free Privacy Tools — clean professional theme */
:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --ink:#0f172a; --muted:#64748b;
  --bg:#f8fafc; --card:#ffffff; --border:#e2e8f0; --green:#16a34a;
  --radius:14px; --shadow:0 4px 18px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:18px;padding:14px 20px}
.logo{font-weight:800;font-size:20px;color:#fff;display:flex;align-items:center;gap:10px}
.logo .shield{display:inline-flex;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--primary),#7c3aed);align-items:center;justify-content:center;font-size:18px}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{color:#cbd5e1;padding:8px 12px;border-radius:8px;font-size:14px}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer;line-height:1;padding:6px 8px;border-radius:8px}
.nav-toggle:hover{background:rgba(255,255,255,.08)}

/* Hero */
.hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#2563eb 100%);color:#fff;padding:64px 0 56px;text-align:center}
.hero h1{font-size:40px;margin:0 0 12px;letter-spacing:-.5px}
.hero p{color:#cbd5e1;max-width:640px;margin:0 auto 24px;font-size:17px}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;font-size:13px;color:#e2e8f0}
.searchbar{max-width:520px;margin:0 auto;position:relative}
.searchbar input{width:100%;padding:14px 48px 14px 18px;border-radius:999px;border:none;font-size:16px;outline:none;box-shadow:var(--shadow)}
.searchbar .icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:18px;background:none;border:none;cursor:pointer;padding:8px;line-height:1;border-radius:50%}
.searchbar .icon-btn:hover{background:rgba(0,0,0,.06)}

/* Tool grid */
.section{padding:44px 0}
.section h2{font-size:24px;margin:0 0 6px}
.section .sub{color:var(--muted);margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tool-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;display:block;color:var(--ink)}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(15,23,42,.12);text-decoration:none}
.tool-card .ticon{font-size:30px}
.tool-card h3{margin:10px 0 6px;font-size:16px}
.tool-card p{margin:0;color:var(--muted);font-size:13px}
.cat-tag{display:inline-block;background:#eff6ff;color:var(--primary);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;margin-top:10px;text-transform:uppercase;letter-spacing:.4px}

/* Tool page */
.crumbs{font-size:13px;color:var(--muted);padding:18px 0 0}
.tool-hero{padding:10px 0 6px}
.tool-hero h1{font-size:30px;margin:6px 0}
.tool-hero p{color:var(--muted);max-width:720px}
.tool-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin:20px 0}
/* AdSense placeholder hidden until ads are approved (AdSense policy: no empty ad boxes) */
.ad-slot{display:none!important}

/* Form controls */
.field{margin:0 0 14px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=color],select,textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
textarea{min-height:130px;resize:vertical;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.btn{display:inline-block;background:var(--primary);color:#fff;border:none;padding:12px 26px;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--primary-dark)}
.btn.secondary{background:#e2e8f0;color:var(--ink)}
.btn.secondary:hover{background:#cbd5e1}
.btn.green{background:var(--green)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.result{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:16px;margin-top:16px;word-break:break-word}
.result.big{font-size:22px;font-weight:700}
canvas.preview{max-width:100%;border:1px solid var(--border);border-radius:10px;margin-top:12px}
.drop{border:2px dashed var(--border);border-radius:12px;padding:28px;text-align:center;color:var(--muted);cursor:pointer;transition:.15s}
.drop:hover{border-color:var(--primary);color:var(--primary)}
.checks{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.checks label{display:flex;align-items:center;gap:6px;font-weight:400;font-size:14px}
.howto{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:20px 0}
.howto h2,.faq h2{font-size:20px;margin-top:0}
.faq details{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.related{margin:26px 0}

/* Footer */
.site-footer{background:var(--ink);color:#94a3b8;padding:40px 0;margin-top:50px;font-size:14px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.site-footer h4{color:#fff;margin:0 0 12px;font-size:15px}
.site-footer a{color:#94a3b8;display:block;margin-bottom:8px}
.site-footer a:hover{color:#fff}
.foot-note{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid #1e293b;font-size:13px}

@media(max-width:700px){
  .hero h1{font-size:28px}
  .row,.row3{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .nav-toggle{display:block;margin-left:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;padding:10px 14px 14px;gap:2px;margin:0;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .nav.open{display:flex}
  .nav a{padding:10px 12px;font-size:15px}
  html[dir=rtl] .nav-toggle{margin-left:0;margin-right:auto}
}

/* ============ FEATURES UPDATE: dark mode, favorites, ratings, chips, share ============ */

/* Dark mode */
body.dark{--bg:#0f172a;--card:#1e293b;--border:#334155;--ink:#f1f5f9;--muted:#94a3b8;--shadow:0 4px 18px rgba(0,0,0,.45)}
body.dark input[type=text],body.dark input[type=number],body.dark input[type=date],body.dark input[type=time],body.dark input[type=color],body.dark select,body.dark textarea{background:#0f172a;color:#f1f5f9;border-color:#334155}
body.dark .result{background:#052e16;border-color:#166534;color:#f1f5f9}
body.dark .howto,body.dark .faq details{background:#1e293b;border-color:#334155}
body.dark .ad-slot{display:none!important}
body.dark .btn.secondary{background:#334155;color:#f1f5f9}
body.dark .btn.secondary:hover{background:#475569}
body.dark .drop{background:#1e293b}
body.dark .cat-tag{background:#1e3a8a;color:#bfdbfe}
body.dark .chip{background:#1e293b;border-color:#334155;color:#e2e8f0}
body.dark .chip:hover{border-color:var(--primary)}
body.dark .share-btn{background:#1e293b;border-color:#334155}

/* Dark mode floating toggle */
.dark-toggle{position:fixed;right:18px;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:var(--card);font-size:22px;cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.dark-toggle:hover{transform:scale(1.08)}

/* Favorite stars */
.tool-card{position:relative}
.fav-star{position:absolute;top:10px;right:12px;background:none;border:none;font-size:22px;cursor:pointer;color:#cbd5e1;line-height:1;padding:2px}
.fav-star.on{color:#f59e0b}
.fav-star:hover{transform:scale(1.2)}
.fav-star.big{position:static;font-size:30px}
.tool-actions{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;margin:14px 0 4px;padding:14px 18px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.action-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.action-label{font-size:12px;color:var(--muted);font-weight:600}
.stars span{font-size:26px;cursor:pointer;color:#cbd5e1;line-height:1}
.stars span.on{color:#f59e0b}
.rate-msg{width:100%;font-size:13px;color:#16a34a;font-weight:600;min-height:18px}
.share-row{flex-direction:row;gap:8px;flex-wrap:wrap;align-items:center}
.share-btn{display:inline-flex;width:38px;height:38px;border-radius:50%;background:#f1f5f9;border:1px solid var(--border);align-items:center;justify-content:center;font-size:18px;text-decoration:none}
.share-btn:hover{transform:scale(1.12);text-decoration:none}

/* Category filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#e2e8f0;padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer}
.chip:hover{border-color:#fff}
.chip.active{background:#fff;color:var(--primary);border-color:#fff}

/* Blog cards */
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin:18px 0;display:block;color:var(--ink)}
.blog-card:hover{text-decoration:none;transform:translateY(-2px)}
.blog-card h3{margin:0 0 8px;font-size:19px}
.blog-card p{color:var(--muted);font-size:14px;margin:0}
.blog-card .meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin:24px 0;box-shadow:var(--shadow)}
.article h2{margin-top:0}
.article h3{margin-top:22px}

/* ============ MUFTTOOLS-STYLE UPDATE: language toggle, featured carousel ============ */

/* Language toggle in header */
.lang-toggle{margin-left:2px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.lang-toggle:hover{background:rgba(255,255,255,.24)}

/* Featured tools carousel (auto-scrolls right -> left) */
.featured-sec{padding-bottom:10px}
.carousel-wrap{position:relative;padding:0 52px}
.carousel{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x proximity;scrollbar-width:thin;direction:ltr}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-track{background:transparent}
.carousel::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.feat-card{position:relative;flex:0 0 250px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 18px 18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s;scroll-snap-align:start}
.feat-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(15,23,42,.14)}
.feat-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#ede9fe,#dbeafe);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:14px}
.feat-card h3{margin:0 0 6px;font-size:16px;padding-right:30px}
.feat-card p{margin:0 0 14px;color:var(--muted);font-size:13px;min-height:40px}
.feat-open{display:inline-block;background:#ede9fe;color:#6d28d9;font-weight:700;font-size:14px;padding:8px 20px;border-radius:999px}
.feat-open:hover{background:#ddd6fe;text-decoration:none}
.feat-heart{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;cursor:pointer;color:#cbd5e1;line-height:1;padding:2px}
.feat-heart.on{color:#ef4444}
.feat-heart:hover{transform:scale(1.2)}
.car-btn{position:absolute;top:36%;z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);font-size:22px;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
#carPrev{left:0}
#carNext{right:0}
.car-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* YouTube channels section */
.yt-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.yt-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;color:var(--ink)}
.yt-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(15,23,42,.14);text-decoration:none}
.yt-icon{font-size:34px;flex:0 0 auto;line-height:1}
.yt-card h3{margin:0 0 2px;font-size:16px}
.yt-handle{margin:0 0 6px;font-size:12px;color:var(--muted)}
.yt-card .yt-desc{margin:0;font-size:13px;color:var(--muted)}
.yt-sub{display:inline-block;margin-top:10px;background:#ff0000;color:#fff;font-weight:700;font-size:13px;padding:7px 18px;border-radius:999px}
.yt-card:hover .yt-sub{background:#cc0000}
body.dark .yt-sub{background:#ff0000}

/* Dark mode for new elements */
body.dark .feat-open{background:#1e3a8a;color:#bfdbfe}
body.dark .feat-open:hover{background:#1e40af}
body.dark .feat-icon{background:linear-gradient(135deg,#312e81,#1e3a8a)}
body.dark .car-btn{background:#1e293b}
body.dark .carousel::-webkit-scrollbar-thumb{background:#475569}

/* RTL (Urdu) adjustments */
html[dir=rtl] .searchbar .icon-btn{right:auto;left:8px}
html[dir=rtl] .searchbar input{padding:14px 18px 14px 48px}
html[dir=rtl] .fav-star{right:auto;left:12px}
html[dir=rtl] .feat-card h3{padding-right:0;padding-left:30px}
html[dir=rtl] .feat-heart{right:auto;left:14px}
html[dir=rtl] .nav{margin-left:0;margin-right:auto}
html[dir=rtl] .lang-toggle{margin-left:0;margin-right:2px}
html[dir=rtl] .dark-toggle{right:auto;left:18px}
html[dir=rtl] .carousel{direction:ltr} /* carousel always glides right -> left */

@media(max-width:700px){
  .feat-card{flex-basis:225px}
  .lang-toggle{padding:6px 12px;font-size:12px}
}

/* Mobile: hide carousel arrows — auto-scroll handles navigation */
@media(max-width:640px){
  .car-btn{display:none}
  .carousel-wrap{padding:0}
}

/* Developer taruf section */
.dev-photos{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}
.dev-photo{flex:1 1 220px;margin:0;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px}
.dev-photo img{width:100%;max-width:260px;height:260px;object-fit:cover;border-radius:10px}
.dev-photo figcaption{margin-top:10px;font-weight:700;font-size:15px;line-height:1.5}
.dev-photo figcaption span{font-weight:400;font-size:13px;color:#64748b}
@media (prefers-color-scheme:dark){.dev-photo{background:#0f172a;border-color:#1e293b}.dev-photo figcaption span{color:#94a3b8}}
.dev-card{transition:transform .15s ease}
a:hover .dev-card{transform:translateY(-2px)}