/* ===== 2026 Model Look — Airtel Payments Bank inspired 3D UI ===== */
:root{--red:#e01a3c;--red2:#ff4d6d;--navy:#0b1d4d;--navy2:#132a6b;--ink:#1c2340;--mut:#7a82a8;--bg:#f4f6fc;--card:#ffffff;--line:#e4e8f4;--ok:#18a864;--rad:18px;--sh:0 10px 34px rgba(15,30,80,.10);--sh2:0 24px 60px rgba(15,30,80,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* ---- Header ---- */
.topbar{background:#0b1d4d;color:#cdd6f7;font-size:12.5px;padding:7px 0}
.topbar .container{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
header.site{position:sticky;top:0;z-index:90;background:var(--card);border-bottom:1px solid var(--line);transition:transform .35s ease,background .3s;box-shadow:0 2px 14px rgba(15,30,80,.06)}
header.site.hide{transform:translateY(-110%)}
header.site .container{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;color:var(--navy)}
.logo img{height:40px}
.logo b{color:var(--red)}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav.main a{color:var(--ink);font-weight:600;font-size:14.5px;padding:9px 13px;border-radius:10px;transition:.25s}
nav.main a:hover{background:#feecef;color:var(--red);transform:translateY(-2px)}
.btn{display:inline-block;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff!important;padding:11px 22px;border-radius:12px;font-weight:700;border:none;cursor:pointer;font-size:14.5px;box-shadow:0 8px 20px rgba(224,26,60,.35);transition:.28s;transform-style:preserve-3d}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 30px rgba(224,26,60,.45)}
.btn.ghost{background:#fff;color:var(--navy)!important;border:1.6px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--red);color:var(--red)!important}
.btn.small{padding:8px 14px;font-size:13px;border-radius:10px}
.btn.navy{background:linear-gradient(135deg,#0b1d4d,#132a6b);box-shadow:0 8px 20px rgba(11,29,77,.3)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
/* ---- Hero (3D) ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(130deg,#0b1d4d 0%,#1b2f77 45%,var(--red) 130%);color:#fff;padding:86px 0 110px}
.hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 9s ease-in-out infinite}
.hero .b1{width:420px;height:420px;background:#ff4d6d;top:-140px;right:-80px}
.hero .b2{width:340px;height:340px;background:#3c5be0;bottom:-140px;left:-100px;animation-delay:3s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.06)}}
.hero .container{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.12;margin:0 0 18px;font-weight:800}
.hero h1 span{background:linear-gradient(90deg,#ffd166,#ff4d6d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#c9d3f5;font-size:17px;line-height:1.7;margin:0 0 30px;max-width:520px}
.hero-art{perspective:1100px}
.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(16px);border-radius:24px;padding:28px;transform:rotateY(-12deg) rotateX(6deg);box-shadow:0 40px 90px rgba(0,0,0,.4);transition:transform .5s}
.hero-card:hover{transform:rotateY(-4deg) rotateX(2deg)}
.hero-card .row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.18);font-size:14.5px}
.hero-card .row:last-child{border:none}
/* ---- Sections & 3D cards ---- */
section.pad{padding:72px 0}
.sec-title{text-align:center;margin-bottom:44px}
.sec-title h2{font-size:clamp(24px,3vw,34px);margin:0 0 8px;color:var(--navy)}
.sec-title p{color:var(--mut);margin:0}
.grid{display:grid;gap:24px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.card3d{background:var(--card);border-radius:var(--rad);box-shadow:var(--sh);padding:22px;transition:transform .35s,box-shadow .35s;transform-style:preserve-3d;will-change:transform;border:1px solid transparent}
.card3d:hover{box-shadow:var(--sh2);border-color:#ffd9e0}
.p-card{overflow:hidden;padding:0;display:flex;flex-direction:column}
.p-card .thumb{height:185px;background:linear-gradient(135deg,#eef1fb,#fde8ec);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.p-card .thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.p-card:hover .thumb img{transform:scale(1.07)}
.p-card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.p-card h3{margin:0;font-size:16.5px;color:var(--navy)}
.badge{display:inline-block;padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:700}
.badge.red{background:#ffe4ea;color:var(--red)}.badge.green{background:#dcf7e9;color:#128a52}.badge.navy{background:#e4eaff;color:var(--navy)}.badge.gray{background:#eef0f7;color:var(--mut)}
.price{font-size:20px;font-weight:800;color:var(--navy)}
.price .old{font-size:14px;color:var(--mut);text-decoration:line-through;font-weight:500;margin-left:8px}
.off{color:var(--ok);font-weight:700;font-size:13px}
.countdown{font-size:12.5px;color:var(--red);font-weight:700}
/* ---- Stats ---- */
.stats{background:linear-gradient(135deg,#0b1d4d,#132a6b);border-radius:26px;color:#fff;padding:44px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center;box-shadow:var(--sh2)}
.stats .num{font-size:36px;font-weight:800;color:#ffd166}
.stats .lbl{color:#c9d3f5;font-size:14px}
/* ---- Forms ---- */
.form-card{background:var(--card);border-radius:22px;box-shadow:var(--sh2);padding:36px;max-width:480px;margin:48px auto}
.form-card h2{color:var(--navy);margin:0 0 6px}
.form-card .sub{color:var(--mut);font-size:14px;margin:0 0 20px}
label{display:block;font-size:13.5px;font-weight:600;color:#41496b;margin:13px 0 6px}
input,select,textarea{width:100%;padding:12px 15px;border:1.6px solid var(--line);border-radius:11px;font-size:14.5px;font-family:inherit;background:#fbfcff;transition:.25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(224,26,60,.09);background:#fff}
.otp-row{display:flex;gap:10px;align-items:flex-end}
.otp-row input{flex:1}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
table.tbl th{background:#0b1d4d;color:#fff;padding:12px 14px;text-align:left;font-size:13px}
table.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14px}
table.tbl tr:hover td{background:#fafbff}
/* ---- Popups & toasts (no default alerts) ---- */
#toasts{position:fixed;top:84px;right:18px;z-index:999;display:flex;flex-direction:column;gap:10px}
.toast{min-width:280px;max-width:380px;background:#fff;border-radius:14px;box-shadow:var(--sh2);padding:15px 18px 15px 16px;font-size:14.2px;border-left:5px solid var(--ok);animation:slideIn .45s cubic-bezier(.2,.9,.3,1.2)}
.toast.error{border-left-color:var(--red)}.toast.info{border-left-color:var(--navy)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
.modal-bg{position:fixed;inset:0;background:rgba(10,16,40,.55);backdrop-filter:blur(5px);z-index:998;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:30px;box-shadow:var(--sh2);animation:pop .35s cubic-bezier(.2,.9,.3,1.25)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
/* ---- Reveal on scroll ---- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:none}
/* ---- Footer ---- */
footer.site{background:#0b1d4d;color:#aab5dd;margin-top:70px;padding:56px 0 0}
footer.site h4{color:#fff;font-size:16px;margin:0 0 14px}
footer.site a{color:#aab5dd;display:block;padding:5px 0;font-size:14px}
footer.site a:hover{color:#ffd166}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:36px}
.foot-bot{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:13px}
/* ---- Chat widget ---- */
#chatBtn{position:fixed;bottom:24px;right:24px;z-index:95;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;border:none;font-size:25px;cursor:pointer;box-shadow:0 12px 30px rgba(224,26,60,.5);transition:.3s}
#chatBtn:hover{transform:scale(1.12) rotate(8deg)}
#chatBox{position:fixed;bottom:96px;right:24px;z-index:96;width:340px;max-width:calc(100vw - 40px);background:#fff;border-radius:18px;box-shadow:var(--sh2);display:none;flex-direction:column;overflow:hidden}
#chatBox.open{display:flex}
#chatBox .head{background:linear-gradient(135deg,var(--navy),var(--red));color:#fff;padding:15px 18px;font-weight:700}
#chatMsgs{height:280px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:#f7f8fd}
.cmsg{max-width:82%;padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.45}
.cmsg.me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.cmsg.ad{align-self:flex-start;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);border-bottom-left-radius:4px}
#chatBox .foot{display:flex;gap:8px;padding:11px;border-top:1px solid var(--line)}
#chatBox .foot input{flex:1}
/* ---- Admin ---- */
.admin-wrap{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-side{background:#0b1d4d;color:#c9d3f5;padding:22px 0}
.admin-side .brand{padding:0 22px 18px;font-weight:800;color:#fff;font-size:18px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.admin-side a{display:flex;gap:10px;padding:11px 22px;color:#c9d3f5;font-size:14px;font-weight:600;border-left:3px solid transparent;transition:.2s}
.admin-side a:hover,.admin-side a.act{background:rgba(255,255,255,.07);color:#fff;border-left-color:var(--red)}
.admin-main{padding:28px;background:var(--bg)}
.admin-main h1{color:var(--navy);font-size:24px;margin:0 0 22px}
.stat-mini{background:#fff;border-radius:16px;padding:20px;box-shadow:var(--sh)}
.stat-mini .n{font-size:26px;font-weight:800;color:var(--red)}
.stat-mini .l{font-size:13px;color:var(--mut)}
/* ---- Responsive ---- */
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}.hero .container{grid-template-columns:1fr}.hero-art{display:none}.admin-wrap{grid-template-columns:1fr}.admin-side{position:sticky;top:0;z-index:80;display:flex;overflow-x:auto;padding:8px}.admin-side .brand{display:none}.admin-side a{white-space:nowrap;border-left:none;border-bottom:3px solid transparent}}
@media(max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}header.site .container{height:auto;flex-wrap:wrap;padding:10px 20px}.form-card{padding:26px 20px}}
/* ---- Header actions (theme + menu) ---- */
.hdr-actions{display:flex;gap:8px;align-items:center}
.iconbtn{background:transparent;border:1.6px solid var(--line);border-radius:10px;padding:7px 12px;font-size:16px;cursor:pointer;color:var(--ink);transition:.25s}
.iconbtn:hover{border-color:var(--red);transform:translateY(-2px)}
.navtoggle{display:none}
@media(max-width:960px){
.navtoggle{display:inline-block}
header.site .container{flex-wrap:wrap;height:auto;padding:12px 20px;gap:12px}
nav.main{display:none;width:100%;order:10!important;flex-direction:column;align-items:stretch;gap:2px;padding:8px 0;border-top:1px dashed var(--line)}
nav.main.open{display:flex;animation:slideDown .3s ease}
nav.main a{padding:12px 14px;border-radius:10px}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
}
/* ================= DARK MODE ================= */
[data-theme="dark"]{--bg:#0c1122;--card:#151b33;--ink:#e9ecff;--mut:#9aa3c9;--line:#2b3357;--navy:#aebaff;--navy2:#8fa0f5;--sh:0 10px 34px rgba(0,0,0,.45);--sh2:0 24px 60px rgba(0,0,0,.6)}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
[data-theme="dark"] header.site{background:#121831;border-color:var(--line)}
[data-theme="dark"] nav.main a{color:var(--ink)}
[data-theme="dark"] nav.main a:hover{background:#26183a;color:#ff7d95}
[data-theme="dark"] .logo{color:#e9ecff}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#0f1530;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{background:#111838}
[data-theme="dark"] table.tbl{background:var(--card)}
[data-theme="dark"] table.tbl td{border-color:var(--line)}
[data-theme="dark"] table.tbl tr:hover td{background:#1a2142}
[data-theme="dark"] .toast{background:var(--card);color:var(--ink)}
[data-theme="dark"] .modal{background:var(--card);color:var(--ink)}
[data-theme="dark"] .form-card{background:var(--card)}
[data-theme="dark"] .stat-mini{background:var(--card)}
[data-theme="dark"] .p-card .thumb{background:linear-gradient(135deg,#1a2142,#361a2c)}
[data-theme="dark"] .btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--line)}
[data-theme="dark"] .btn.ghost:hover{border-color:var(--red);color:#ff7d95!important}
[data-theme="dark"] .badge.red{background:#3a1626;color:#ff8aa3}
[data-theme="dark"] .badge.green{background:#11301f;color:#5fd99a}
[data-theme="dark"] .badge.navy{background:#1c2445;color:#aebaff}
[data-theme="dark"] .badge.gray{background:#222947;color:#9aa3c9}
[data-theme="dark"] #chatBox{background:var(--card)}
[data-theme="dark"] #chatMsgs{background:#0f1530}
[data-theme="dark"] .cmsg.ad{background:#1c2445;color:var(--ink);box-shadow:none}
[data-theme="dark"] .admin-main{background:var(--bg)}
[data-theme="dark"] .card3d:hover{border-color:#4a2340}
/* ---- Airtel-style logo mark ---- */
.logomark{width:40px;height:40px;min-width:40px;border-radius:12px;background:linear-gradient(135deg,#e01a3c 0%,#b3123a 55%,#0b1d4d 130%);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;box-shadow:0 5px 14px rgba(224,26,60,.4)}
.logotext{line-height:1.05;display:inline-flex;flex-direction:column}
.logotext small{font-size:10.5px;font-weight:700;letter-spacing:2.5px;color:var(--mut);text-transform:uppercase}
@media(max-width:620px){.logo{font-size:17px}.logomark{width:34px;height:34px;min-width:34px;font-size:17px;border-radius:10px}}
/* ---- Theme switch (pill) ---- */
.switch{position:relative;width:62px;height:30px;min-width:62px;border-radius:99px;border:1.6px solid var(--line);background:#eef1f8;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:0 8px;transition:.3s}
.switch .sw-ic{font-size:13px;line-height:1;pointer-events:none}
.switch .knob{position:absolute;top:2px;left:3px;width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,#e01a3c,#ff4d6d);box-shadow:0 2px 8px rgba(224,26,60,.45);transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
[data-theme="dark"] .switch{background:#0f1530;border-color:#2b3357}
[data-theme="dark"] .switch .knob{transform:translateX(31px);background:linear-gradient(135deg,#8fa0f5,#aebaff);box-shadow:0 2px 8px rgba(70,90,200,.5)}
/* ---- Ads (AdSense) — khali ho to jagah nahi dikhti ---- */
.ad-box{margin:22px auto;text-align:center;overflow:hidden;max-width:100%}
/* Ad ke upar chhota sa label — Google isi ki salah deta hai, taaki ad
content jaisa na lage. Khaali slot par yeh dabba banta hi nahi. */
.ad-lbl{
display:block; font-size:10px; font-weight:700; letter-spacing:1.4px;
text-transform:uppercase; color:var(--mut); opacity:.6; margin-bottom:6px;
}
.ad-box:empty{ display:none!important; margin:0!important }
.ad-box ins,.ad-box iframe{max-width:100%!important}
/* ---- Blog ---- */
.blog-card .thumb{height:170px}
.post-content{line-height:1.9;font-size:16px;color:var(--ink)}
.post-content img{border-radius:14px;max-width:100%;height:auto}
.post-content h2,.post-content h3{color:var(--navy);margin-top:28px}
.post-content a{font-weight:600}
.post-meta{color:var(--mut);font-size:13.5px;margin-bottom:18px}
[data-theme="dark"] .post-content{color:var(--ink)}
/* ---- Own captcha widget ---- */
.cap-box{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.cap-box img{border-radius:10px;border:1.6px solid var(--line);background:#fff}
[data-theme="dark"] .cap-box img{border-color:#2b3357}
/* ===== v5: category icons, sliders, share, mobile polish ===== */
.cat-ico{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(135deg,#fff0f3,#eef1fb);color:var(--red);box-shadow:inset 0 0 0 1.5px #ffe0e6}
[data-theme="dark"] .cat-ico{background:linear-gradient(135deg,#2a1622,#1a2142);box-shadow:inset 0 0 0 1.5px #3a2340}
.cat-ico svg{width:30px;height:30px}
.cat-card:hover .cat-ico{transform:scale(1.12) rotate(-4deg);transition:.4s}
/* animated gradient hero heading */
.hero h1 span{background:linear-gradient(90deg,#ffd166,#ff4d6d,#ffd166);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:200% center}}
/* horizontal auto-slider (products) */
.slider-wrap{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.slider-track{display:flex;gap:20px;width:max-content;animation:slide 40s linear infinite}
.slider-wrap:hover .slider-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.slider-track .p-card{width:250px;flex:0 0 auto}
.slider-track .tool-card{flex:0 0 auto}
.p-card .thumb{height:190px;background:#fff}
[data-theme="dark"] .p-card .thumb{background:#0f1530}
.p-card .thumb img{width:100%;height:100%;object-fit:contain;padding:6px} /* PURI image, crop nahi */
/* product gallery — full image */
.pgal-main{width:100%;height:380px;object-fit:contain;background:#fff;border-radius:12px}
[data-theme="dark"] .pgal-main{background:#0f1530}
/* share buttons */
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.share-btn{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:.25s}
.share-btn:hover{transform:translateY(-3px) scale(1.08)}
.share-btn svg{width:20px;height:20px;fill:#fff}
.sh-wa{background:#25D366}.sh-fb{background:#1877F2}.sh-tg{background:#0088cc}.sh-x{background:#111}.sh-cp{background:var(--navy)}
/* mega menu categories */
.has-mega{position:relative}
.mega{position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:12px;display:none;grid-template-columns:1fr 1fr;gap:4px;min-width:340px;z-index:95}
.has-mega:hover .mega{display:grid}
.mega a{padding:9px 12px;font-size:13.5px;border-radius:9px;white-space:nowrap}
@media(max-width:960px){.mega{position:static;display:grid;box-shadow:none;border:none;min-width:0;padding:4px 0 4px 14px}}
/* stats — mobile polish */
.stats{gap:16px}
.stats .stat-item{background:rgba(255,255,255,.06);border-radius:18px;padding:18px 10px;transition:.3s}
.stats .stat-item:hover{background:rgba(255,255,255,.12);transform:translateY(-4px)}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,1fr);padding:26px 16px;border-radius:20px}.stats .num{font-size:28px}.stats .lbl{font-size:12.5px}.hero{padding:54px 0 66px}.hero h1{font-size:29px}section.pad{padding:44px 0}.sec-title{margin-bottom:28px}}
/* ===== verification clock ===== */
.vclock{position:relative;width:120px;height:120px;margin:0 auto}
.vclock svg{width:120px;height:120px;transform:rotate(-90deg)}
.vclock .vtrack{fill:none;stroke:var(--line);stroke-width:9}
.vclock .vbar{fill:none;stroke:url(#g1);stroke:var(--red);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.vclock .vtime{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
[data-theme="dark"] .vclock .vtime{color:var(--ink)}
/* ================= v8: iPhone-style GLASS + premium 3D + app feel ================= */
:root{--glass:rgba(255,255,255,.62);--glassb:rgba(255,255,255,.75);--blur:saturate(180%) blur(20px)}
[data-theme="dark"]{--glass:rgba(24,31,58,.55);--glassb:rgba(255,255,255,.10)}
body{background-image:radial-gradient(1100px 520px at 8% -8%,rgba(224,26,60,.09),transparent 60%),radial-gradient(900px 480px at 96% 4%,rgba(11,29,77,.10),transparent 55%);background-attachment:fixed}
[data-theme="dark"] body{background-image:radial-gradient(1100px 520px at 8% -8%,rgba(224,26,60,.16),transparent 60%),radial-gradient(900px 480px at 96% 4%,rgba(70,100,255,.14),transparent 55%)}
/* glass surfaces */
.card3d,.form-card,.stat-mini,table.tbl,#chatBox,.modal,.toast{
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--glassb)}
.card3d{box-shadow:0 8px 32px rgba(15,30,80,.10),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="dark"] .card3d{box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.card3d:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(15,30,80,.18),inset 0 1px 0 rgba(255,255,255,.7);border-color:rgba(224,26,60,.30)}
header.site{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.glass{background:var(--glass)!important;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
/* premium buttons — glossy 3D */
.btn{position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(224,26,60,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%);transform:translateX(-120%);transition:.6s}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px) scale(.99)}
/* section headings — gradient */
.sec-title h2{background:linear-gradient(100deg,var(--navy),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .sec-title h2{background:linear-gradient(100deg,#aebaff,#ff7d95);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- HEADER MENU FIX: never breaks, scrolls on tablet ---- */
header.site .container{gap:14px;flex-wrap:nowrap}
.logo{flex:0 0 auto}
nav.main{flex:1 1 auto;min-width:0;overflow:visible;justify-content:flex-end;gap:2px}
nav.main a{padding:8px 11px;font-size:14px;white-space:nowrap}
.hdr-actions{flex:0 0 auto}
@media(max-width:1140px){nav.main a{padding:7px 9px;font-size:13.4px}}
@media(max-width:1000px){
.navtoggle{display:inline-block}
header.site .container{flex-wrap:wrap;height:auto;padding:11px 18px}
nav.main{display:none;width:100%;order:10!important;flex-direction:column;align-items:stretch;gap:3px;padding:10px 0 6px;border-top:1px solid var(--line);max-height:70vh;overflow-y:auto}
nav.main.open{display:flex}
nav.main a{padding:13px 14px;font-size:15px;border-radius:12px}
nav.main .btn,nav.main .btn.ghost{width:100%;text-align:center;margin-top:4px}
.has-mega{display:block}
}
/* ---- app-like bottom nav (mobile only) ---- */
.appnav{display:none}
@media(max-width:760px){
.appnav{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:97;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--glassb);border-radius:22px;padding:7px;justify-content:space-around;
box-shadow:0 12px 34px rgba(15,30,80,.20)}
.appnav a{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--mut);padding:7px 2px;border-radius:16px;line-height:1.5}
.appnav a svg{width:21px;height:21px;display:block;margin:0 auto 1px;stroke:currentColor;fill:none;stroke-width:1.9}
.appnav a.on{color:var(--red);background:rgba(224,26,60,.10)}
body{padding-bottom:74px}
#chatBtn{bottom:88px;width:52px;height:52px;font-size:21px}
#chatBox{bottom:150px}
.container{padding:0 15px}
.card3d{border-radius:16px}
h1{font-size:23px!important}
}
/* verification dots (no time shown) */
.vdots{display:flex;gap:5px}
.vdots i{width:8px;height:8px;border-radius:50%;background:var(--red);display:block;animation:vd 1.2s ease-in-out infinite}
.vdots i:nth-child(2){animation-delay:.2s}.vdots i:nth-child(3){animation-delay:.4s}
@keyframes vd{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.vclock .vbar.spin{animation:vspin 2.2s linear infinite;transform-origin:60px 60px}
@keyframes vspin{to{transform:rotate(360deg)}}
/* review cards */
.rv-card{display:flex;flex-direction:column;gap:10px;min-height:172px}
.rv-stars{color:#f5a623;font-size:15px;letter-spacing:2px}
.rv-txt{font-size:14.3px;line-height:1.65;color:var(--ink);flex:1}
.rv-who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--mut)}
.rv-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
/* ================= v9: premium home, mega menu, hero ================= */
.logotext{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.2px;white-space:nowrap}
.logotext b{color:var(--red)}
[data-theme="dark"] .logotext{color:#e9ecff}
@media(max-width:620px){.logotext{font-size:17.5px}}
/* mega menu */
.cav{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:5px;opacity:.6;vertical-align:middle}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(15,30,80,.16);padding:10px;display:none;grid-template-columns:1fr 1fr;gap:2px;min-width:330px;z-index:95}
.mega.mega-r{right:0;left:auto;grid-template-columns:1fr}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid;animation:megaIn .2s ease}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega a{padding:10px 13px;font-size:13.6px;border-radius:10px;white-space:nowrap;color:var(--ink);font-weight:600}
.mega a:hover{background:rgba(224,26,60,.09);color:var(--red)}
.mega .mg-hd{grid-column:1/-1;color:var(--red);font-weight:800;border-bottom:1px dashed var(--line);border-radius:0;margin-bottom:4px}
@media(max-width:1000px){.mega{position:static;display:grid!important;grid-template-columns:1fr;box-shadow:none;border:none;min-width:0;padding:2px 0 6px 16px;background:transparent}.mega a{padding:9px 10px;font-size:13.5px}.mega .mg-hd{border:none}.has-mega{display:block;width:100%}.cav{float:right;margin-top:8px}}
/* hero premium */
.hero{padding:76px 0 96px}
.hero-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at 50% 0,#000,transparent 72%)}
.hero-pill{display:inline-block;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12.5px;font-weight:700;padding:7px 16px;border-radius:99px;margin-bottom:18px;backdrop-filter:blur(8px);letter-spacing:.4px}
.typed-txt{background:linear-gradient(90deg,#ffd166,#ff8a9b,#ffd166);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
.caret{display:inline-block;width:3px;height:.95em;background:#ffd166;margin-left:3px;vertical-align:-3px;animation:blink 1s steps(2) infinite;border-radius:2px}
@keyframes blink{50%{opacity:0}}
.hero h1{min-height:2.3em}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;color:#c9d3f5;font-size:13.5px;font-weight:600}
/* hero glass card */
.glass-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border-radius:26px;padding:24px;box-shadow:0 34px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.28);transform:perspective(1200px) rotateY(-11deg) rotateX(6deg);transition:transform .6s cubic-bezier(.2,.9,.3,1)}
.glass-card:hover{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-6px)}
.gc-top{display:flex;gap:6px;margin-bottom:16px}
.gc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32)}
.gc-dot:first-child{background:#ff5f57}.gc-dot:nth-child(2){background:#ffbd2e}.gc-dot:nth-child(3){background:#28c840}
.gc-title{color:#fff;font-size:16.5px;font-weight:800;margin-bottom:14px}
.gc-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.16);font-size:14px;color:#c9d3f5}
.gc-row b{color:#fff;font-size:15px}
.gc-live{color:#7dffb0!important;position:relative;padding-left:14px}
.gc-live::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:#7dffb0;box-shadow:0 0 0 0 rgba(125,255,176,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(125,255,176,0)}100%{box-shadow:0 0 0 0 rgba(125,255,176,0)}}
.gc-cta{margin-top:16px;text-align:right}
.gc-cta a{color:#ffd166;font-weight:700;font-size:14px}
/* section head with action */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.sec-head h2{margin:0 0 4px;font-size:clamp(21px,2.6vw,29px);background:linear-gradient(100deg,var(--navy),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .sec-head h2{background:linear-gradient(100deg,#aebaff,#ff7d95);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head p{margin:0;color:var(--mut);font-size:14px}
/* category horizontal scroll */
.cat-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
.cat-card{text-align:center;padding:26px 16px}
@media(max-width:700px){.cat-scroll{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.cat-scroll::-webkit-scrollbar{display:none}.cat-card{flex:0 0 138px;scroll-snap-align:start;padding:20px 12px}}
/* product card actions + discount tag */
.pc-act{display:flex;gap:7px;margin-top:auto;padding-top:10px}
.p-card .body h3{transition:.2s}
.p-card:hover .body h3{color:var(--red)}
.off-tag{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:99px;box-shadow:0 4px 12px rgba(224,26,60,.4)}
.slider-track.slow{animation-duration:60s}
.slider-track .p-card{width:262px}
/* YouTube */
.yt-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:16px}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:16px}
/* mobile polish */
@media(max-width:620px){
.hero{padding:44px 0 60px}
.hero h1{font-size:27px;min-height:2.6em}
.hero-trust{gap:12px;font-size:12.5px}
.hero-btns .btn{flex:1;text-align:center;padding:12px 14px}
.slider-track .p-card{width:224px}
.sec-head{align-items:flex-start}
.stats{gap:12px}
}
/* ================= v10: no layout jump, YT grid, auto thumbs, menu polish ================= */
/* ---- Hero: FIXED height so page never jumps while text types ---- */
.hero-h1{display:flex;flex-direction:column;gap:2px;margin:0 0 18px;font-weight:800;line-height:1.14}
.typed-wrap{display:block;min-height:1.18em;height:1.18em;overflow:hidden;white-space:nowrap;text-overflow:clip}
.hero-sub2{display:block;font-size:.62em;font-weight:700;color:rgba(255,255,255,.9)}
.hero .container{align-items:center;min-height:400px}
@media(max-width:1000px){.hero .container{min-height:0}}
@media(max-width:620px){.typed-wrap{white-space:normal;min-height:2.4em;height:2.4em}.hero-h1{font-size:26px}}
/* ---- Auto SVG thumbnail ---- */
.auto-thumb{position:relative;width:100%;overflow:hidden;display:block;background:#0b1d4d}
.auto-thumb svg{display:block;width:100%;height:100%}
.at-ico{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.20);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.3)}
.at-ico svg{width:22px;height:22px}
.p-card .thumb{padding:0;background:transparent}
.p-card .thumb .auto-thumb{transition:.5s}
.p-card:hover .thumb .auto-thumb{transform:scale(1.04)}
/* ---- YouTube: compact grid, not full width ---- */
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.yt-item,.yt-main{padding:12px;border-radius:18px}
.yt-main{grid-column:1/-1;max-width:820px;margin:0 auto;width:100%}
.yt-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 4px 3px;font-size:13.5px}
.yt-cap b{color:var(--navy);font-size:14px}
[data-theme="dark"] .yt-cap b{color:var(--ink)}
.yt-cap a{color:var(--red);font-weight:700}
@media(max-width:620px){.yt-grid{grid-template-columns:1fr;gap:14px}}
/* ---- Header / mobile menu: closed by default, smooth ---- */
header.site .container{gap:12px;min-height:66px;height:auto;padding-top:8px;padding-bottom:8px}
.hdr-actions{display:flex;gap:8px;align-items:center;margin-left:auto;order:3}
nav.main{order:2;margin-left:auto}
@media(max-width:1000px){
nav.main{display:none!important;width:100%;order:10;flex-direction:column;align-items:stretch;gap:2px;
padding:8px 0 10px;border-top:1px solid var(--line);max-height:0;overflow:hidden;transition:max-height .3s ease}
nav.main.open{display:flex!important;max-height:80vh;overflow-y:auto}
.has-mega .mega{display:none!important;padding:2px 0 6px 16px}
.has-mega.open .mega{display:grid!important}
.has-mega>a{display:flex;justify-content:space-between;align-items:center}
.cav{transition:transform .25s}
.has-mega.open>a .cav{transform:rotate(180deg)}
nav.main .btn,nav.main .btn.ghost{width:100%;text-align:center;margin-top:6px}
}
.navtoggle{display:none;font-size:19px;line-height:1}
@media(max-width:1000px){.navtoggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:38px}}
/* ---- Theme switch: proper size, never breaks header ---- */
.switch{width:58px;height:30px;min-width:58px;flex:0 0 auto}
.switch .sw-ic{font-size:12px;opacity:.75}
@media(max-width:620px){.switch{width:52px;height:28px;min-width:52px}.switch .knob{width:21px;height:21px}[data-theme="dark"] .switch .knob{transform:translateX(27px)}}
/* ---- General mobile polish ---- */
@media(max-width:620px){
.topbar{font-size:11.5px;padding:6px 0}
.topbar .container{justify-content:center;text-align:center;gap:6px}
.grid{gap:14px}
.card3d{padding:18px}
.form-card{padding:24px 18px;margin:24px auto;border-radius:18px}
table.tbl{font-size:13px;display:block;overflow-x:auto;white-space:nowrap}
.sec-title{margin-bottom:22px}
.sec-title h2{font-size:22px}
.btn{padding:11px 18px;font-size:14px}
#toasts{top:auto;bottom:88px;right:10px;left:10px}
.toast{min-width:0;width:100%}
}
/* ================= v11: TRUE iPhone glass theme, stable card, rounded hero ================= */
/* ---- Logo: hamesha ek line ---- */
.logotext{display:inline-block;white-space:nowrap;font-size:20.5px;font-weight:800;letter-spacing:-.2px;line-height:1}
.logo{flex:0 0 auto;min-width:0}
@media(max-width:900px){.logotext{font-size:18.5px}}
@media(max-width:400px){.logotext{font-size:16.5px}}
/* ---- Hero glass card: SIZE NEVER CHANGES ---- */
.glass-card{width:100%;max-width:392px;margin-left:auto;box-sizing:border-box}
.gc-row{min-height:46px}
.gc-val{display:inline-block;min-width:104px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gc-title{min-height:22px}
.hero-art{perspective:1300px;display:flex;justify-content:flex-end}
@media(max-width:1000px){.hero-art{display:none}}
/* ---- Hero: rounded bottom + animated colour flow ---- */
.hero{border-radius:0 0 46px 46px;background:linear-gradient(120deg,#0b1d4d,#16266b,#3a1a6b,#a3123a,#0b1d4d);background-size:320% 320%;animation:heroFlow 22s ease-in-out infinite}
@keyframes heroFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:var(--bg);
-webkit-mask-image:radial-gradient(120% 100% at 50% 0,transparent 68%,#000 69%);mask-image:radial-gradient(120% 100% at 50% 0,transparent 68%,#000 69%);pointer-events:none}
.hero .blob{opacity:.42;animation-duration:11s}
.hero .b1{animation:float 11s ease-in-out infinite,hue 16s linear infinite}
.hero .b2{animation:float 13s ease-in-out infinite 2s,hue 19s linear infinite reverse}
@keyframes hue{to{filter:blur(70px) hue-rotate(360deg)}}
@media(max-width:620px){.hero{border-radius:0 0 30px 30px}.hero::after{height:44px}}
/* ================= GLASS EVERYWHERE ================= */
:root{--glass:rgba(255,255,255,.58);--glassb:rgba(255,255,255,.70);--blur:saturate(190%) blur(22px)}
[data-theme="dark"]{--glass:rgba(22,29,56,.52);--glassb:rgba(255,255,255,.09)}
body{background:var(--bg);
background-image:radial-gradient(900px 480px at 6% -6%,rgba(224,26,60,.10),transparent 62%),
radial-gradient(800px 460px at 96% 6%,rgba(11,29,77,.11),transparent 58%),
radial-gradient(700px 420px at 50% 108%,rgba(122,63,242,.08),transparent 60%);
background-attachment:fixed}
[data-theme="dark"] body{background-image:radial-gradient(900px 480px at 6% -6%,rgba(224,26,60,.17),transparent 62%),
radial-gradient(800px 460px at 96% 6%,rgba(70,100,255,.16),transparent 58%),
radial-gradient(700px 420px at 50% 108%,rgba(122,63,242,.14),transparent 60%)}
.card3d,.form-card,.stat-mini,table.tbl,#chatBox,.modal,.toast,.mega,.appnav,.tcard,.tbox,.tbig,
.rte-bar,.rte-area,.yt-item,.yt-main,.copybox,.admin-main .card3d{
background:var(--glass)!important;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--glassb)}
/* Navy hero cards (jaise Bank BC tool) — glass override ko hara kar navy gradient
dono theme me solid dikhe. .card3d.card-navy = 0,2,0 specificity, glass wali .card3d
(0,1,0) se jeet jaati hai. Blur band, warna navy dhundhla ho jaata. */
.card3d.card-navy{
background:linear-gradient(135deg,#0b1d4d,#16357e)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border:1px solid rgba(255,255,255,.14)!important;color:#fff}
.card3d.card-navy h1,.card3d.card-navy h2,.card3d.card-navy h3{color:#fff}
.card3d.card-navy::before{display:none}
.card3d{box-shadow:0 8px 32px rgba(15,30,80,.10),inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="dark"] .card3d{box-shadow:0 8px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05)}
header.site{background:rgba(255,255,255,.68)!important;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glassb)}
[data-theme="dark"] header.site{background:rgba(16,22,44,.62)!important}
.topbar{background:rgba(11,29,77,.92);backdrop-filter:blur(10px)}
input,select,textarea{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);border-color:var(--glassb)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:rgba(12,17,36,.55)}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.82)}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{background:rgba(12,17,36,.78)}
.btn.ghost{background:rgba(255,255,255,.55)!important;backdrop-filter:blur(10px);border:1px solid var(--glassb)}
[data-theme="dark"] .btn.ghost{background:rgba(255,255,255,.07)!important}
table.tbl th{background:rgba(11,29,77,.90);backdrop-filter:blur(8px)}
table.tbl td{border-bottom:1px solid var(--glassb)}
table.tbl tr:hover td{background:rgba(255,255,255,.35)}
[data-theme="dark"] table.tbl tr:hover td{background:rgba(255,255,255,.05)}
.stats{background:linear-gradient(135deg,rgba(11,29,77,.90),rgba(19,42,107,.86));backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14)}
.stat-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
footer.site{background:linear-gradient(180deg,rgba(11,29,77,.96),rgba(8,20,55,.99));backdrop-filter:blur(12px)}
.admin-side{background:linear-gradient(180deg,rgba(11,29,77,.95),rgba(9,22,60,.97));backdrop-filter:blur(14px);border-right:1px solid rgba(255,255,255,.08)}
.p-card .thumb{background:rgba(255,255,255,.30)}
[data-theme="dark"] .p-card .thumb{background:rgba(255,255,255,.04)}
.cat-ico{background:rgba(255,255,255,.45);backdrop-filter:blur(8px);border:1px solid var(--glassb);box-shadow:none}
[data-theme="dark"] .cat-ico{background:rgba(255,255,255,.07)}
.badge{backdrop-filter:blur(6px)}
.ad-box{border-radius:14px;overflow:hidden}
.modal-bg{background:rgba(10,16,40,.42);backdrop-filter:blur(9px)}
/* glass sheen on hover */
.card3d{position:relative;overflow:hidden}
.card3d::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
transform:skewX(-18deg);transition:left .75s ease;pointer-events:none;z-index:1}
.card3d:hover::before{left:130%}
.card3d>*{position:relative;z-index:2}
[data-theme="dark"] .card3d::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent)}
/* form-card thoda aur premium */
.form-card{border-radius:24px;box-shadow:0 24px 60px rgba(15,30,80,.16),inset 0 1px 0 rgba(255,255,255,.6)}
/* ================= v12: card sthir, rounded header, 3D sirf home ================= */
/* ---- HERO GRID: column kabhi na phaile (card khiskna band) ---- */
.hero .container{grid-template-columns:minmax(0,1.12fr) minmax(0,388px)}
.hero .container>*{min-width:0}
.hero-h1{max-width:100%;overflow:hidden}
.typed-wrap{display:block;max-width:100%;overflow:hidden;text-overflow:clip}
.hero p{max-width:560px}
.hero-art{width:388px;max-width:100%;margin-left:auto;flex:0 0 auto}
.glass-card{width:388px;max-width:100%;margin:0;
transform:perspective(1300px) rotateY(-9deg) rotateX(5deg);transition:transform .5s ease}
.glass-card:hover{transform:perspective(1300px) rotateY(-9deg) rotateX(5deg) translateY(-6px)}
@media(max-width:1080px){.hero .container{grid-template-columns:1fr}.hero-art{display:none}}
/* ---- HEADER: rounded floating bar ---- */
header.site{position:sticky;top:10px;z-index:90;background:transparent!important;border:none;box-shadow:none;padding:0 10px}
header.site>.container{
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--glassb);border-radius:22px;
box-shadow:0 10px 34px rgba(15,30,80,.12);
padding:9px 20px;max-width:1220px}
[data-theme="dark"] header.site>.container{box-shadow:0 10px 34px rgba(0,0,0,.42)}
header.site.hide{transform:translateY(-140%)}
.mega{top:calc(100% + 10px)}
@media(max-width:1000px){header.site{top:8px;padding:0 8px}header.site>.container{border-radius:20px;padding:8px 14px}}
@media(max-width:620px){header.site>.container{border-radius:18px;padding:7px 12px}}
/* ---- 3D EFFECTS: sirf home page par ---- */
.is-inner .card3d,.is-admin .card3d{transform:none!important;transform-style:flat}
.is-inner .card3d:hover,.is-admin .card3d:hover{transform:translateY(-3px)!important;box-shadow:0 14px 36px rgba(15,30,80,.12)}
.is-inner .card3d::before,.is-admin .card3d::before{display:none}
.is-admin .card3d,.is-admin .stat-mini,.is-admin table.tbl{border-radius:16px}
.is-admin{background-image:none}
.is-admin .admin-main{background:transparent}
.is-admin .btn::after{display:none}
.is-admin .btn:hover{transform:translateY(-1px)}
.is-home .card3d{transform-style:preserve-3d}
/* ---- glass card inner: compact fonts ---- */
.gc-title{font-size:15.5px;margin-bottom:12px}
.gc-row{font-size:13.5px;padding:10px 0;min-height:42px}
.gc-row b{font-size:14px}
.gc-val{min-width:98px}
.gc-cta a{font-size:13.5px}
/* ================= v13: live hero, stable typing, slider controls, favourites ================= */
/* ---------- HERO: upar ki khali jagah kam, neeche breathing room ---------- */
.hero{padding:52px 0 96px}
@media(max-width:1000px){.hero{padding:40px 0 70px}}
@media(max-width:620px){.hero{padding:30px 0 54px}}
.hero .container{min-height:0;align-items:center}
@media(min-width:1001px){.hero .container{min-height:392px}}
/* ---------- Background: chalti hui grid + animated columns ---------- */
.hero-grid-lines{animation:gridPan 26s linear infinite}
@keyframes gridPan{from{background-position:0 0,0 0}to{background-position:52px 52px,52px 52px}}
.hero-bars{position:absolute;inset:auto 0 0 0;height:56%;display:flex;align-items:flex-end;gap:2.2%;
padding:0 2%;opacity:.5;pointer-events:none;
mask-image:linear-gradient(0deg,#000,transparent 92%);-webkit-mask-image:linear-gradient(0deg,#000,transparent 92%)}
.hero-bars i{flex:1;display:block;height:var(--h);border-radius:9px 9px 0 0;
background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.03));
transform-origin:bottom;animation:barPulse 4.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes barPulse{0%,100%{transform:scaleY(.55);opacity:.45}50%{transform:scaleY(1.15);opacity:.95}}
@media(max-width:620px){.hero-bars{height:44%;opacity:.35}}
.hero-dots{position:absolute;inset:0;pointer-events:none;opacity:.55;
background-image:radial-gradient(rgba(255,255,255,.5) 1.1px,transparent 1.1px);background-size:26px 26px;
mask-image:radial-gradient(ellipse at 70% 20%,#000,transparent 62%);
-webkit-mask-image:radial-gradient(ellipse at 70% 20%,#000,transparent 62%);
animation:dotDrift 30s linear infinite}
@keyframes dotDrift{from{background-position:0 0}to{background-position:26px 52px}}
/* ---------- Mouse / touch follow spotlight — sirf hero par ---------- */
.hero-spot{position:absolute;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;
border-radius:50%;pointer-events:none;opacity:0;transition:opacity .45s;
background:radial-gradient(circle,rgba(255,209,102,.30) 0%,rgba(255,77,109,.16) 38%,transparent 68%);
filter:blur(12px);will-change:transform}
.hero.live .hero-spot{opacity:1}
.hero .container{position:relative;z-index:2}
.hero-bars,.hero-dots,.hero-grid-lines,.hero-spot{z-index:1}
/* hero content parallax (JS set karta hai --px/--py) */
.hero-art{transform:translate3d(calc(var(--px,0)*-14px),calc(var(--py,0)*-12px),0);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.hero .rv{transform:translate3d(calc(var(--px,0)*6px),calc(var(--py,0)*5px),0);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media(max-width:1000px){.hero-art,.hero .rv{transform:none!important}}
@media(prefers-reduced-motion:reduce){.hero-bars i,.hero-dots,.hero-grid-lines{animation:none}.hero-spot{display:none}}
/* ---------- TYPING TEXT: box kabhi nahi hilega, text kabhi nahi katega ----------
Sabhi lines grid ki EK hi cell me stack hoti hain. Invisible "ghost" lines
jagah reserve kar deti hain, isliye height/width pehle se fix hai. */
.typed-wrap{display:grid;width:100%;max-width:100%;min-height:0;height:auto;overflow:visible;white-space:normal}
.typed-wrap>*{grid-area:1/1;min-width:0}
.typed-ghost{visibility:hidden;pointer-events:none;user-select:none}
.typed-live{display:block}
.hero-h1{overflow-wrap:anywhere;word-break:normal;hyphens:none}
.typed-txt{display:inline}
@media(max-width:620px){.typed-wrap{white-space:normal;height:auto;min-height:0}}
/* ---------- SLIDER: prev / next buttons + drag ---------- */
.slider-wrap{position:relative;padding:0 4px}
.slider-wrap.dragging{cursor:grabbing}
.slider-wrap.dragging .slider-track{animation-play-state:paused}
.slider-track{will-change:transform}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
width:42px;height:42px;border-radius:50%;border:1px solid var(--glassb);
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;
box-shadow:0 8px 22px rgba(12,26,70,.18);transition:.2s}
.sl-nav:hover{background:var(--navy);color:#fff;transform:translateY(-50%) scale(1.08)}
.sl-nav.prev{left:-6px}
.sl-nav.next{right:-6px}
[data-theme="dark"] .sl-nav{color:#e8ecff}
@media(max-width:620px){.sl-nav{width:36px;height:36px}.sl-nav.prev{left:-2px}.sl-nav.next{right:-2px}}
/* ---------- FAVOURITE heart button ---------- */
.thumb-wrap,.p-wrap{position:relative}
.p-wrap{display:flex}
.p-wrap>.p-card{flex:1;width:100%}
.fav-btn{position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.72);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 6px 16px rgba(12,26,70,.16);transition:.2s;padding:0}
.fav-btn svg{fill:none;stroke:var(--navy);stroke-width:1.9;stroke-linejoin:round}
.fav-btn:hover{transform:scale(1.12)}
.fav-btn.on{background:var(--red);border-color:var(--red)}
.fav-btn.on svg{fill:#fff;stroke:#fff}
.fav-btn.pop{animation:favPop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes favPop{0%{transform:scale(1)}45%{transform:scale(1.38)}100%{transform:scale(1)}}
[data-theme="dark"] .fav-btn{background:rgba(20,26,56,.72);border-color:rgba(255,255,255,.18)}
[data-theme="dark"] .fav-btn svg{stroke:#e8ecff}
/* cart/fav counters header me */
.cnt-cart,.cnt-fav{font-variant-numeric:tabular-nums}
/* slider ab JS se chalta hai — CSS animation off, native scroll on (swipe/drag free) */
.slider-wrap[data-slider]{overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;
-ms-overflow-style:none;scrollbar-width:none;cursor:grab;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.slider-wrap[data-slider]::-webkit-scrollbar{display:none}
.slider-wrap[data-slider] .slider-track{animation:none!important;padding:6px 0}
.slider-wrap[data-slider] .sl-nav{position:sticky;top:auto}
.sl-nav{position:absolute}
/* nav buttons scroller ke BAHAR — scroll ke saath hilte nahi */
.slider-outer{position:relative}
.slider-outer .sl-nav{position:absolute;top:50%;transform:translateY(-50%)}
.slider-outer .sl-nav.prev{left:-8px}
.slider-outer .sl-nav.next{right:-8px}
@media(max-width:620px){.slider-outer .sl-nav.prev{left:0}.slider-outer .sl-nav.next{right:0}}
/* ================= v14: professional captcha ================= */
.cap-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.cap-box img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--glassb);
background:#f7f9ff;box-shadow:0 6px 18px rgba(12,26,70,.10);display:block}
.cap-reload{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
padding:10px 15px;border-radius:12px;font-size:13.5px;font-weight:700;
border:1px solid var(--glassb);background:var(--glass);color:var(--navy);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:.2s}
.cap-reload:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.cap-reload svg{transition:transform .6s}
.cap-reload.spin svg{transform:rotate(360deg)}
.cap-input{letter-spacing:9px;font-size:20px;font-weight:800;
text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:14px 12px!important}
.cap-input::placeholder{letter-spacing:.4px;font-size:13.5px;font-weight:600;text-transform:none}
.cap-hint{font-size:12.5px;color:var(--mut);margin:8px 0 0;line-height:1.6}
[data-theme="dark"] .cap-box img{background:#e9edfb}
[data-theme="dark"] .cap-reload{color:#e8ecff}
@media(max-width:520px){.cap-box{gap:9px}.cap-reload span{display:none}.cap-reload{padding:11px 13px}
.cap-input{letter-spacing:8px;font-size:19px}}
/* Kam items — na slide, na arrows; cards beech me centre */
.slider-outer.no-loop .sl-nav{display:none}
.slider-outer.no-loop .slider-wrap[data-slider]{overflow-x:hidden;cursor:default;
-webkit-mask-image:none;mask-image:none}
.slider-outer.no-loop .slider-track{justify-content:center;flex-wrap:wrap;width:100%;row-gap:20px}
/* ================= v16: payment page steps + UPI app buttons ================= */
.pay-steps{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.pstep{display:flex;gap:11px;align-items:flex-start;font-size:14.2px;line-height:1.65;color:var(--ink)}
.pnum{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;margin-top:1px}
.upi-apps{border-top:1px dashed var(--line);padding-top:13px}
.ua-title{font-size:12.5px;color:var(--mut);margin-bottom:9px;font-weight:600}
.ua-row{display:flex;gap:9px;flex-wrap:wrap}
.ua-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;border-radius:12px;
background:var(--c);color:#fff!important;font-weight:700;font-size:13.5px;text-decoration:none;
box-shadow:0 6px 16px rgba(12,26,70,.16);transition:.18s;border:none}
.ua-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.ua-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85)}
@media(max-width:620px){.ua-btn{flex:1;justify-content:center;min-width:calc(50% - 5px)}}
.use-timer{display:inline-block;padding:7px 13px;border-radius:99px;font-size:13px;font-weight:800;
background:#dcf7e9;color:#128a52;font-variant-numeric:tabular-nums}
.use-timer.low{background:#fff4e5;color:#b8720a}
.use-timer.over{background:#ffe4ea;color:#b30f35}
.ptool-body{overflow-x:auto}
/* ==================================================================
v17 — FINAL UI LAYER
Menu, buttons, forms aur mobile app-feel. Yeh sabse aakhir me aata hai
isliye pichhli saari versions par bhaari padta hai (koi conflict nahi).
================================================================== */
:root{
--field-bg:#ffffff;
--field-br:#c9d2e8; /* SAAF dikhne wala border — white par white nahi */
--field-br-hover:#9fadd0;
--tap:46px; /* mobile touch target */
}
[data-theme="dark"]{
--field-bg:rgba(14,20,42,.72);
--field-br:#39456f;
--field-br-hover:#5a6796;
}
/* ---------------- FORMS: har field saaf dikhe ---------------- */
input,select,textarea{
width:100%;padding:13px 15px;font-size:15px;font-family:inherit;
background:var(--field-bg)!important;
border:1.8px solid var(--field-br)!important;
border-radius:12px;color:var(--ink);
box-shadow:inset 0 1px 2px rgba(15,30,80,.05);
backdrop-filter:none;-webkit-backdrop-filter:none;
transition:border-color .18s,box-shadow .18s;
min-height:48px;-webkit-appearance:none;appearance:none
}
textarea{min-height:110px;line-height:1.7;resize:vertical}
input[type=checkbox],input[type=radio]{
width:20px;height:20px;min-height:0;padding:0;accent-color:var(--red);
border-width:1.6px!important;border-radius:6px;box-shadow:none;flex:0 0 auto;cursor:pointer
}
input[type=radio]{border-radius:50%}
input[type=file]{padding:10px 12px;font-size:13.5px;cursor:pointer;background:var(--bg)!important}
input[type=color]{padding:2px;min-height:0}
input::placeholder,textarea::placeholder{color:#a3abc9;opacity:1}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#6c769d}
input:hover,select:hover,textarea:hover{border-color:var(--field-br-hover)!important}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--red)!important;
box-shadow:0 0 0 4px rgba(224,26,60,.13);background:var(--field-bg)!important
}
input:disabled,input[readonly]{background:#eef1f8!important;color:var(--mut);cursor:not-allowed}
[data-theme="dark"] input:disabled,[data-theme="dark"] input[readonly]{background:rgba(255,255,255,.05)!important}
select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;background-size:17px;padding-right:40px
}
label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:15px 0 7px;letter-spacing:.1px}
[data-theme="dark"] label{color:#ccd4f0}
label:first-child{margin-top:0}
/* checkbox wali label line me text dabta nahi */
label:has(input[type=checkbox]),label:has(input[type=radio]){
display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer;line-height:1.5
}
/* form card ka apna saaf outline */
.form-card{border:1.5px solid var(--field-br)!important;box-shadow:0 14px 44px rgba(15,30,80,.13)}
[data-theme="dark"] .form-card{box-shadow:0 14px 44px rgba(0,0,0,.45)}
.form-card h2{margin-top:0}
fieldset{border:1.6px solid var(--field-br);border-radius:14px;padding:16px}
legend{font-weight:800;color:var(--navy);padding:0 8px;font-size:14px}
/* ---------------- BUTTONS: kabhi na takrayein, hamesha tappable ---------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;padding:12px 22px;line-height:1.2;white-space:nowrap;
border-radius:13px;font-weight:700;font-size:14.5px;text-align:center;
vertical-align:middle;max-width:100%
}
.btn.small{min-height:38px;padding:9px 15px;font-size:13.2px;border-radius:10px;gap:6px}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:3px solid rgba(224,26,60,.45);outline-offset:2px}
/* aas-paas ke buttons ke beech hamesha jagah */
.btn+.btn,.btn+a,.btn+form,form+.btn{margin-left:8px}
.pc-act,.otp-row,.hero-btns,.share-row,.ua-row,.cap-box{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pc-act .btn,.otp-row .btn{margin-left:0}
td form{display:inline-flex;vertical-align:middle}
td .btn{margin:2px 0}
td form+form,td .btn+form,td form+.btn,td a+form{margin-left:6px}
.iconbtn{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
/* ---------------- HEADER: saaf layout, kuch bhi overlap nahi ---------------- */
header.site>.container{
display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
min-height:64px;padding:10px 20px
}
.logo{flex:0 0 auto;margin-right:2px}
nav.main{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:0}
.hdr-actions{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin-left:6px;order:3}
nav.main>a,nav.main .has-mega>a{
display:inline-flex;align-items:center;gap:5px;
padding:9px 12px;font-size:14px;border-radius:11px;white-space:nowrap;font-weight:650
}
nav.main .btn.small{margin-left:6px}
.cav{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid currentColor;opacity:.55;flex:0 0 auto;transition:transform .25s}
@media(max-width:1180px){nav.main>a,nav.main .has-mega>a{padding:8px 9px;font-size:13.4px}}
/* ---------------- MOBILE: asli app jaisa side drawer ---------------- */
.nav-backdrop{position:fixed;inset:0;background:rgba(8,14,38,.48);backdrop-filter:blur(4px);
opacity:0;visibility:hidden;transition:.28s;z-index:98}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}
@media(max-width:1000px){
.navtoggle{display:inline-flex!important}
header.site>.container{flex-wrap:nowrap;padding:9px 16px;min-height:60px}
nav.main{
position:fixed!important;top:0;right:0;bottom:0;
width:min(86vw,362px);max-width:none;height:100dvh;
display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;
gap:3px;padding:18px 16px calc(26px + env(safe-area-inset-bottom));
background:var(--glass);backdrop-filter:saturate(190%) blur(26px);-webkit-backdrop-filter:saturate(190%) blur(26px);
border-left:1px solid var(--glassb);border-top:none;border-radius:24px 0 0 24px;
box-shadow:-20px 0 60px rgba(10,20,60,.28);
overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
transform:translateX(102%);transition:transform .32s cubic-bezier(.22,.8,.28,1);
max-height:none;z-index:99;visibility:hidden
}
nav.main.open{transform:translateX(0);visibility:visible}
[data-theme="dark"] nav.main{background:rgba(16,22,44,.90)}
/* drawer ka header */
nav.main::before{
content:"Menu";display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;
text-transform:uppercase;color:var(--mut);padding:2px 12px 12px;margin-bottom:4px;
border-bottom:1px solid var(--glassb)
}
nav.main>a,nav.main .has-mega>a{
justify-content:space-between;width:100%;padding:14px 14px;font-size:15.5px;
border-radius:14px;min-height:var(--tap);font-weight:700
}
nav.main>a:active,nav.main .has-mega>a:active{background:rgba(224,26,60,.10)}
.has-mega{display:block;width:100%}
.has-mega .mega{
display:none!important;position:static;grid-template-columns:1fr;min-width:0;
background:rgba(255,255,255,.35)!important;border:none!important;box-shadow:none!important;
padding:4px 6px 8px 14px;margin:2px 0 6px;border-radius:14px
}
[data-theme="dark"] .has-mega .mega{background:rgba(255,255,255,.05)!important}
.has-mega.open .mega{display:grid!important;animation:megaIn .22s ease}
.has-mega.open>a .cav{transform:rotate(180deg)}
.mega a{padding:12px 12px;font-size:14.2px;min-height:42px;display:flex;align-items:center;border-radius:11px}
.cav{float:none;margin:0}
nav.main .btn,nav.main .btn.ghost,nav.main .btn.small{
width:100%;margin:6px 0 0;justify-content:center;min-height:var(--tap);font-size:15px;border-radius:14px
}
}
/* ---------------- Hamburger + theme switch: chhote screens par bhi theek ---------------- */
.navtoggle{
display:none;width:44px;height:42px;border-radius:12px;font-size:0;position:relative;
border:1.5px solid var(--glassb);background:var(--glass);backdrop-filter:blur(10px)
}
.navtoggle::before,.navtoggle::after,.navtoggle span{content:"";position:absolute;left:12px;right:12px;height:2.2px;
background:var(--navy);border-radius:2px;transition:.28s}
.navtoggle::before{top:14px}
.navtoggle::after{bottom:14px}
[data-theme="dark"] .navtoggle::before,[data-theme="dark"] .navtoggle::after{background:#e8ecff}
body.nav-open .navtoggle::before{top:20px;transform:rotate(45deg)}
body.nav-open .navtoggle::after{bottom:19.8px;transform:rotate(-45deg)}
@media(max-width:400px){.switch{width:48px;min-width:48px;height:27px}
[data-theme="dark"] .switch .knob{transform:translateX(23px)}
.switch .knob{width:20px;height:20px}}
/* ---------------- Bottom app nav: asli app jaisa ---------------- */
@media(max-width:760px){
.appnav{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px 5px;border-radius:24px;
box-shadow:0 14px 38px rgba(10,20,60,.24)}
.appnav a{padding:8px 2px;border-radius:17px;min-height:var(--tap);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:.2s}
.appnav a:active{transform:scale(.93)}
.appnav a.on{background:rgba(224,26,60,.12);color:var(--red)}
.appnav a.on svg{stroke-width:2.2}
body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
}
@media(max-width:430px){
.appnav a{font-size:9.8px}
.appnav a svg{width:20px;height:20px}
.appnav a.nav-blog{display:none} /* 6 se 5 items — cramped nahi lagta */
}
/* ---------------- Glass ko aur premium ---------------- */
.card3d{border-radius:20px}
.card3d:hover{box-shadow:0 16px 46px rgba(15,30,80,.15),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="dark"] .card3d:hover{box-shadow:0 16px 46px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.glass-strong{background:rgba(255,255,255,.74)!important;backdrop-filter:saturate(200%) blur(26px)}
[data-theme="dark"] .glass-strong{background:rgba(18,25,50,.78)!important}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;
font-size:11.5px;font-weight:800;letter-spacing:.2px;line-height:1.5;white-space:nowrap}
/* ---------------- Mobile general polish ---------------- */
@media(max-width:620px){
.container{padding:0 14px}
h1{font-size:25px;line-height:1.25}
h2{font-size:21px}
.card3d{padding:17px;border-radius:18px}
.btn{width:auto;min-height:var(--tap);font-size:14.5px;padding:12px 18px}
.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;gap:13px}
.form-card{padding:22px 17px;border-radius:20px;margin:20px auto}
input,select,textarea{font-size:16px;min-height:50px} /* 16px = iOS zoom nahi karta */
label{font-size:13.8px}
.sec-head{flex-direction:column;align-items:flex-start;gap:10px}
.sec-head .btn{width:100%}
table.tbl{font-size:13px}
#toasts{bottom:calc(96px + env(safe-area-inset-bottom));top:auto;left:12px;right:12px}
.modal{width:calc(100% - 28px);max-width:none;border-radius:22px}
}
@media(max-width:400px){
.btn.small{padding:9px 12px;font-size:12.6px}
.btn+.btn{margin-left:6px}
}
/* iOS momentum + tap highlight saaf */
*{-webkit-tap-highlight-color:transparent}
a,button,select,input[type=submit]{touch-action:manipulation}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* drawer ka close button — sirf mobile par */
.nav-close{display:none;position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;
border:1px solid var(--glassb);background:rgba(255,255,255,.6);color:var(--navy);
font-size:26px;line-height:1;cursor:pointer;align-items:center;justify-content:center;padding:0}
[data-theme="dark"] .nav-close{background:rgba(255,255,255,.08);color:#e8ecff}
@media(max-width:1000px){
nav.main{position:fixed}
.nav-close{display:flex}
nav.main::before{padding-right:52px}
}
/* drawer body me chala jaata hai (fixed positioning ke liye) — desktop par wapas header me */
body>nav.main{z-index:99}
@media(min-width:1001px){
body>nav.main{position:static;transform:none;visibility:visible;box-shadow:none;background:transparent!important;
border:none;padding:0;width:auto;height:auto;overflow:visible;flex-direction:row}
body>nav.main::before,body>nav.main .nav-close{display:none}
}
/* jin containers me pehle se gap hai wahan extra margin nahi chahiye */
.pc-act .btn,.otp-row .btn,.hero-btns .btn,.share-row .btn,.ua-row .btn,.cap-box .btn,
.sec-head .btn,.slider-outer .btn,.appnav a,nav.main .btn,.modal .btn,.stat-mini .btn,
[style*="display:flex"] > .btn,[style*="display:flex"] > form > .btn{margin-left:0}
/* Admin table ke andar ke action buttons — line me rahein, tootein nahi */
table.tbl td{vertical-align:middle}
table.tbl td>form{display:inline-flex;align-items:center;gap:6px;margin:2px 4px 2px 0}
table.tbl td>a.btn,table.tbl td>button.btn{margin:2px 4px 2px 0}
table.tbl td .btn.small{min-height:34px;padding:7px 12px;font-size:12.6px}
@media(max-width:900px){
table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
table.tbl td,table.tbl th{white-space:nowrap}
}
/* Card ke andar ke form fields ko poori chaudai — chipke na rahein */
.card3d form .grid{gap:14px}
.card3d>h3:first-child,.card3d>h4:first-child{margin-top:0}
/* Sec-head: heading aur button kabhi na takrayein */
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sec-head h2{margin:0}
.sec-head p{margin:4px 0 0}
/* Home page cards ki grid — har screen par saaf */
@media(min-width:621px) and (max-width:1000px){.grid.g4{grid-template-columns:repeat(2,1fr)}.grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1001px){.grid.g4{grid-template-columns:repeat(4,1fr)}}
/* Category scroll — mobile par swipe, scrollbar chhupa hua */
.cat-scroll{display:flex;gap:13px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;
-ms-overflow-style:none;scrollbar-width:none}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-scroll>*{flex:0 0 auto;scroll-snap-align:start;min-width:132px}
@media(max-width:620px){.cat-scroll>*{min-width:118px}}
/* Toast mobile par bottom nav ke upar */
#toasts{z-index:9999}
.toast{border-radius:14px;font-size:14px;line-height:1.5}
/* Hamburger ki beech wali line + open state */
.navtoggle span{position:absolute;top:50%;left:12px;right:12px;height:2.2px;margin-top:-1.1px;
background:var(--navy);border-radius:2px;transition:.22s}
[data-theme="dark"] .navtoggle span{background:#e8ecff}
body.nav-open .navtoggle span{opacity:0;transform:scaleX(.2)}
/* Theme switch ka knob hamesha sahi jagah rukе — chahe switch ki width kuch bhi ho */
.switch{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}
.switch .knob{left:3px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2)}
[data-theme="dark"] .switch .knob{left:auto;right:3px}
.switch .knob{position:absolute;top:50%;margin-top:-11.5px}
/* ==================================================================
v18 — header buttons, admin responsive, tool page
================================================================== */
/* ---------- THEME SWITCH: knob ab hamesha andar hi rahega ----------
Bug tha: dark mode me purana translateX(31px) aur naya right:3px dono lag rahe the,
isliye knob switch se bahar udd jaata tha. Ab transform poori tarah reset. */
.switch{
position:relative;width:60px;min-width:60px;height:32px;flex:0 0 auto;padding:0;
border-radius:99px;border:1.6px solid var(--field-br);background:#eef1f8;cursor:pointer;
display:inline-flex;align-items:center;justify-content:space-between;overflow:hidden
}
.switch .sw-ic{font-size:13px;line-height:1;pointer-events:none;position:relative;z-index:2;
width:26px;text-align:center;opacity:.8}
.switch .knob{
position:absolute;top:50%;left:3px;right:auto;
width:24px;height:24px;margin-top:-12px;border-radius:50%;
background:linear-gradient(135deg,#e01a3c,#ff4d6d);
box-shadow:0 2px 8px rgba(224,26,60,.45);
transform:none!important; /* purane translateX ko band karo */
transition:left .28s cubic-bezier(.2,.9,.3,1.2),background .25s;z-index:1
}
[data-theme="dark"] .switch{background:#0f1530;border-color:#39456f}
[data-theme="dark"] .switch .knob{
left:calc(100% - 27px);right:auto;
background:linear-gradient(135deg,#8fa0f5,#aebaff);box-shadow:0 2px 8px rgba(70,90,200,.5)
}
@media(max-width:400px){
.switch{width:54px;min-width:54px;height:30px}
.switch .knob{width:22px;height:22px;margin-top:-11px}
[data-theme="dark"] .switch .knob{left:calc(100% - 25px)}
}
/* ---------- HEADER ACTIONS: hamesha DAAYIN taraf ----------
Mobile par nav drawer body me chala jaata hai, isliye header me sirf logo + actions
bachte the aur actions logo se chipak jaate the. Ab margin-left:auto se hamesha right. */
.hdr-actions{margin-left:auto!important;order:3;display:flex;align-items:center;gap:10px;flex:0 0 auto}
header.site>.container{justify-content:flex-start}
@media(max-width:1000px){
header.site>.container{gap:10px}
.hdr-actions{gap:9px}
}
/* Hamburger: saaf, sahi size, hamesha switch ke baad */
.navtoggle{
position:relative;width:44px;height:44px;min-width:44px;flex:0 0 auto;padding:0;
border-radius:13px;border:1.6px solid var(--field-br);
background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
cursor:pointer;font-size:0;order:2
}
.navtoggle::before,.navtoggle::after,.navtoggle span{
content:"";position:absolute;left:11px;right:11px;height:2.4px;border-radius:2px;
background:var(--ink);transition:.25s
}
.navtoggle::before{top:14px}
.navtoggle span{top:50%;margin-top:-1.2px}
.navtoggle::after{bottom:14px;top:auto}
body.nav-open .navtoggle::before{top:50%;margin-top:-1.2px;transform:rotate(45deg)}
body.nav-open .navtoggle::after{bottom:auto;top:50%;margin-top:-1.2px;transform:rotate(-45deg)}
body.nav-open .navtoggle span{opacity:0}
/* ---------- ADMIN: table ke andar ka form kabhi na dabe ---------- */
.admin-main table.tbl{white-space:normal}
.admin-main table.tbl td,.admin-main table.tbl th{white-space:normal;vertical-align:top;padding:11px 12px}
.admin-main table.tbl td>form{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:3px 0}
.admin-main table.tbl td input,.admin-main table.tbl td select{min-height:40px;font-size:13.5px;padding:9px 11px}
.admin-main table.tbl td .btn.small{min-height:36px}
/* jis row me detail panel khulta hai — wahan table ke rules poori tarah band */
.detail-cell{white-space:normal!important;padding:16px 14px!important;background:rgba(255,255,255,.35)}
[data-theme="dark"] .detail-cell{background:rgba(255,255,255,.04)}
.detail-cell .grid{display:grid;gap:16px}
.detail-cell .card3d{padding:16px}
.detail-cell input,.detail-cell select,.detail-cell textarea{min-height:46px}
.detail-cell .btn{margin:0}
.detail-cell form{display:block}
.detail-cell form.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media(max-width:900px){
.admin-main table.tbl{display:block;overflow-x:auto}
.detail-cell{display:block;width:100%}
.detail-cell .grid.g2,.detail-cell .grid.g3{grid-template-columns:1fr}
.admin-main table.tbl td{display:block;width:100%;border-bottom:none}
.admin-main table.tbl tr{display:block;border-bottom:1.5px solid var(--field-br);padding:6px 0}
.admin-main table.tbl thead,.admin-main table.tbl tr:first-child{display:none}
.admin-main table.tbl td::before{content:attr(data-l);display:block;font-size:11px;font-weight:800;
text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:3px}
}
/* Captcha image: safed background hamesha saaf dikhe */
.cap-box img{background:#fff!important;border:1.6px solid var(--field-br);border-radius:12px;
box-shadow:0 4px 14px rgba(15,30,80,.10);max-width:100%;height:auto}
[data-theme="dark"] .cap-box img{border-color:#4a5680}
/* Admin detail panel ke chhote helpers */
.btn-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:10px}
.btn-row .btn{margin:0}
.prem-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
padding:9px 0;border-bottom:1px dashed var(--line)}
.prem-row form{margin:0}
.detail-cell .dcards{align-items:start}
.detail-cell .card3d h4{font-size:14.5px}
.act-cell{min-width:190px}
.act-cell form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0}
.act-cell input{min-width:0}
@media(max-width:900px){.act-cell{min-width:0}.act-cell .btn{flex:1;min-width:120px}}
/* ---------------- Premium tool page ---------------- */
.ptool-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ptool-price{text-align:right}
.pt-amt{display:block;font-size:28px;font-weight:800;color:var(--red);line-height:1.1}
.pt-lbl{font-size:12px;color:var(--mut);font-weight:600}
.pt-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
background:var(--glass);border:1.6px solid var(--field-br);border-radius:16px;padding:14px 18px;
margin-bottom:16px;font-size:14.5px;backdrop-filter:var(--blur)}
.pt-bar-ok{border-color:#8fd9b6;background:rgba(24,168,100,.10)}
.ptool-body{padding:24px;overflow-x:auto}
.ptool-body[data-paid="0"] .tool-result{display:none}
.ptool-body[data-paid="1"] .tool-result{display:block;margin-top:22px;padding-top:20px;border-top:2px dashed var(--field-br)}
.pt-pay{margin-top:24px;padding-top:20px;border-top:2px dashed var(--field-br)}
.pt-pay-row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
@media(max-width:620px){
.ptool-head{flex-direction:column}
.ptool-price{text-align:left}
.ptool-body{padding:18px}
.pt-pay-row{flex-direction:column;align-items:stretch}
.pt-pay-row>div:last-child{text-align:left!important}
}
@media print{
header.site,footer.site,.appnav,.topbar,.pt-bar,.pt-pay,#chatBtn,#chatBox,#toasts{display:none!important}
.ptool-body{border:none!important;box-shadow:none!important;background:#fff!important;padding:0}
body{padding:0;background:#fff!important}
}
/* ---------------- Payment page: fee line + waiting state ---------------- */
.fee-line{display:flex;justify-content:space-between;align-items:center;gap:14px;
padding:9px 0;font-size:14.5px;border-bottom:1px dashed var(--field-br)}
.fee-line b{font-variant-numeric:tabular-nums}
.fee-total{border-bottom:none;border-top:2px solid var(--field-br);margin-top:2px;
padding-top:12px;font-size:16.5px}
.fee-total b{color:var(--red);font-size:20px}
.wait-box{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 18px;
border-radius:16px;background:rgba(11,29,77,.06);border:1.6px solid var(--field-br)}
[data-theme="dark"] .wait-box{background:rgba(255,255,255,.05)}
.wait-dots{display:flex;gap:6px;flex:0 0 auto}
.wait-dots i{width:10px;height:10px;border-radius:50%;background:var(--red);display:block;
animation:wdot 1.3s ease-in-out infinite}
.wait-dots i:nth-child(2){animation-delay:.18s}
.wait-dots i:nth-child(3){animation-delay:.36s}
@keyframes wdot{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.utr-box{margin-top:22px;padding-top:20px;border-top:2px dashed var(--field-br)}
@media(max-width:620px){.wait-box{padding:14px}.fee-total b{font-size:18px}}
/* Khaali dropdown kabhi na dikhe */
.mega:empty{display:none!important}
.mega a:empty{display:none}
/* ==================================================================
v21 — payment page responsive + desktop deep 3D
================================================================== */
/* ---------------- PAYMENT PAGE: phone par bilkul saaf ---------------- */
@media(max-width:760px){
.container{padding:0 13px}
.card3d{padding:16px}
/* QR aur steps ek ke neeche ek, QR beech me */
.card3d>div[style*="display:flex"][style*="gap:26px"]{flex-direction:column;gap:18px!important}
#qrBox{width:100%;max-width:260px;margin:0 auto;padding:10px!important}
#qrBox canvas,#qrBox img{width:100%!important;height:auto!important;max-width:236px}
.pay-steps{gap:12px}
.pstep{font-size:14px}
.fee-line{font-size:14px;padding:8px 0}
.fee-total{font-size:15.5px}
.fee-total b{font-size:19px}
.ua-row{gap:8px}
.ua-btn{flex:1 1 calc(50% - 4px);min-width:0;justify-content:center;padding:13px 8px;font-size:13.5px}
.utr-box .grid.g2{grid-template-columns:1fr;gap:2px}
.wait-box{flex-direction:row;align-items:flex-start;padding:14px}
.wait-dots{margin-top:5px}
}
@media(max-width:420px){
.ua-btn{font-size:12.8px;padding:12px 6px}
.ua-btn::before{width:6px;height:6px}
#qrBox{max-width:230px}
}
/* Payment card ka heading number kabhi na toote */
.card3d h3[style*="var(--red)"]{overflow-wrap:anywhere}
.utr-box input{font-size:16px}
/* ---------------- DESKTOP: asli 3D depth ----------------
Sirf home page + bade screen par. Mobile aur inner pages bilkul flat glass. */
@media(min-width:1001px) and (hover:hover){
.is-home .p-card,.is-home .cat-card,.is-home .glass-card{
transform-style:preserve-3d;
transition:transform .32s cubic-bezier(.2,.7,.3,1.1), box-shadow .32s;
will-change:transform
}
/* Card ke andar ki cheezein alag-alag gehraai par — asli 3D ka ehsaas */
.is-home .p-card .thumb-wrap,.is-home .p-card .thumb{transform:translateZ(46px);transition:transform .32s}
.is-home .p-card .body{transform:translateZ(26px);transition:transform .32s}
.is-home .p-card h3{transform:translateZ(16px)}
.is-home .p-card .price{transform:translateZ(30px)}
.is-home .p-card .pc-act{transform:translateZ(38px)}
.is-home .p-card .fav-btn{transform:translateZ(60px)}
.is-home .p-card .off-tag{transform:translateZ(56px)}
.is-home .cat-card .cat-ico{transform:translateZ(34px);transition:transform .32s}
/* Hover par gehra shadow + halki roshni */
.is-home .card3d:hover{
box-shadow:0 40px 80px -22px rgba(11,29,77,.42),
0 12px 26px -10px rgba(11,29,77,.28),
inset 0 1px 0 rgba(255,255,255,.7)
}
[data-theme="dark"] .is-home .card3d:hover{
box-shadow:0 40px 80px -22px rgba(0,0,0,.75),
0 12px 26px -10px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.08)
}
/* Mouse ke saath ghoomti hui roshni (JS --mx/--my deta hai) */
.is-home .card3d::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
rgba(255,255,255,.42),rgba(255,255,255,.10) 38%,transparent 62%);
opacity:0;transition:opacity .3s
}
.is-home .card3d:hover::after{opacity:1}
[data-theme="dark"] .is-home .card3d::after{
background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
rgba(255,255,255,.14),rgba(255,255,255,.04) 38%,transparent 62%)
}
/* Card ke neeche floating shadow */
.is-home .p-card::before{z-index:3}
.is-home .slider-track{padding:26px 0 34px}
.is-home .cat-scroll{padding:22px 2px 30px}
.is-home .grid.g4{perspective:1600px}
.is-home .slider-wrap[data-slider]{perspective:1600px}
.is-home .cat-scroll{perspective:1400px}
}
@media(prefers-reduced-motion:reduce){
.is-home .p-card,.is-home .cat-card{transform:none!important}
}
/* ---------------- Cooldown screen ---------------- */
.cd-ring{position:relative;width:132px;height:132px;margin:0 auto}
.cd-ring svg{width:132px;height:132px;transform:rotate(-90deg)}
.cd-track{fill:none;stroke:var(--field-br);stroke-width:9}
.cd-bar{fill:none;stroke:var(--red);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.cd-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:26px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.btn.disabled{opacity:.45;pointer-events:none;filter:grayscale(.4)}
/* ==================================================================
v22 — Giveaways
================================================================== */
.gw-hero{padding:0;overflow:hidden}
.gw-banner{width:100%;height:230px;object-fit:cover;display:block}
.gw-hero h1{margin:4px 20px 0;font-size:29px;color:var(--navy);line-height:1.22}
.gw-sub{margin:8px 20px 0;color:var(--mut);font-size:16px;line-height:1.7}
.gw-badges{display:flex;gap:8px;flex-wrap:wrap;padding:18px 20px 0}
.gw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;padding:22px 20px}
.gw-stat{background:rgba(255,255,255,.42);border:1px solid var(--glassb);border-radius:14px;
padding:14px 12px;text-align:center}
[data-theme="dark"] .gw-stat{background:rgba(255,255,255,.05)}
.gw-stat b{display:block;font-size:24px;font-weight:800;color:var(--navy);line-height:1.2;
font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gw-stat b.gw-prize{font-size:16px;color:var(--red);line-height:1.4}
.gw-stat span{display:block;font-size:12px;color:var(--mut);font-weight:700;
text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.gw-desc{line-height:1.85;font-size:15.5px;color:var(--ink)}
.gw-desc img{border-radius:12px}
.gw-pay{display:flex;gap:20px;align-items:flex-end;flex-wrap:wrap;margin-top:20px;
padding-top:18px;border-top:2px dashed var(--field-br)}
.gw-in,.gw-won{margin-top:18px;padding:32px;text-align:center}
.gw-in h2,.gw-won h2{margin:0 0 8px;font-size:22px;color:var(--navy)}
.gw-won{border:2px solid #8fd9b6;background:rgba(24,168,100,.10)!important}
.gw-won h2{color:#128a52}
.gw-in p,.gw-won p{color:var(--mut);font-size:15px;line-height:1.75;margin:0 auto 18px;max-width:460px}
.gw-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.gw-thumb{height:170px;overflow:hidden;background:rgba(255,255,255,.3)}
.gw-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.gw-card:hover .gw-thumb img{transform:scale(1.06)}
.gw-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.gw-body .gw-badges{padding:0}
.gw-body h3{margin:2px 0 0;font-size:17px;color:var(--navy);line-height:1.35}
.gw-prize-sm{font-size:13.5px;color:var(--red);font-weight:700}
.gw-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;
border-top:1px dashed var(--field-br);font-size:13px;color:var(--mut)}
.gw-foot b{color:var(--navy);font-size:15px}
@media(max-width:620px){
.gw-banner{height:170px}
.gw-hero h1{font-size:23px;margin:4px 16px 0}
.gw-sub{margin:8px 16px 0;font-size:15px}
.gw-badges{padding:15px 16px 0}
.gw-stats{padding:18px 16px;gap:10px;grid-template-columns:repeat(2,1fr)}
.gw-stat b{font-size:21px}
.gw-pay{flex-direction:column;align-items:stretch;gap:12px}
.gw-in,.gw-won{padding:26px 18px}
}
/* Admin sidebar role badge */
.admin-role{margin-top:14px;padding:9px 14px;font-size:11px;font-weight:800;letter-spacing:1px;
text-transform:uppercase;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.10)}
@media(max-width:1000px){.admin-role{display:none}}
/* ==================================================================
v23 — 360° rotating 3D hero card
================================================================== */
.card3d-stage{
position:relative;width:100%;max-width:400px;height:430px;margin-left:auto;
perspective:1500px;perspective-origin:50% 45%;
display:flex;align-items:center;justify-content:center;
touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none
}
.card3d-stage.dragging{cursor:grabbing}
.card3d-cube{
position:relative;width:340px;height:360px;
transform-style:preserve-3d;
transform:rotateX(var(--rx,-8deg)) rotateY(var(--ry,-18deg));
transition:transform .12s linear;will-change:transform;z-index:3
}
.card3d-cube.snap{transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.cube-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube-front { transform:translateZ(6px) }
.cube-back { transform:rotateY(180deg) translateZ(6px) }
/* Card ka patla kinara — sirf 6px, "dande" nahi */
.cube-edge{position:absolute;inset:0;border-radius:24px;transform:translateZ(0);
background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.30);pointer-events:none}
[data-theme="dark"] .cube-edge{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
border-color:rgba(255,255,255,.12)}
.face-inner{transition:transform .25s ease}
.card3d-cube.upside .face-inner{transform:rotate(180deg)}
.card3d-stage .glass-card{width:340px;max-width:none;height:360px;margin:0;transform:none;
display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(8,18,52,.42)}
.card3d-stage .glass-card:hover{transform:none}
.gc-back{justify-content:center}
.gc-badge{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
color:rgba(255,255,255,.72);margin-bottom:16px}
.gc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.gc-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.5;color:#fff;font-weight:600}
.gc-tick{flex:0 0 20px;width:20px;height:20px;border-radius:50%;margin-top:1px;
background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.45);position:relative}
.gc-tick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;
border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
/* Peechhe ke rings */
.stage-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(255,255,255,.22);
pointer-events:none;z-index:1}
.stage-ring.r1{width:400px;height:400px;animation:ringSpin 26s linear infinite}
.stage-ring.r2{width:310px;height:310px;border-style:solid;border-color:rgba(255,255,255,.13);
animation:ringSpin 18s linear infinite reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.stage-glow{position:absolute;width:330px;height:330px;border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(circle,rgba(255,209,102,.30),rgba(255,77,109,.14) 45%,transparent 68%);
filter:blur(26px);animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.13);opacity:1}}
/* Aage tairte hue chips */
.float-chip{position:absolute;z-index:5;pointer-events:none;
background:rgba(255,255,255,.90);border-radius:14px;padding:9px 14px;
box-shadow:0 14px 34px rgba(8,18,52,.30);text-align:left;
animation:chipFloat 5.5s ease-in-out infinite}
.float-chip b{display:block;font-size:16px;font-weight:800;color:#0b1d4d;line-height:1.15}
.float-chip span{display:block;font-size:11px;font-weight:700;color:#7a82a8;margin-top:2px}
.fc1{top:12px;left:-6px;animation-delay:.0s}
.fc2{bottom:64px;left:-16px;animation-delay:1.1s}
.fc3{top:96px;right:-10px;animation-delay:2.2s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
[data-theme="dark"] .float-chip{background:rgba(24,31,58,.92)}
[data-theme="dark"] .float-chip b{color:#e8ecff}
.drag-hint{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);z-index:6;
font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:rgba(255,255,255,.62);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
padding:6px 14px;border-radius:99px;backdrop-filter:blur(8px);transition:opacity .4s;white-space:nowrap}
.card3d-stage.touched .drag-hint{opacity:0}
@media(max-width:1000px){
.hero-art{display:flex!important;justify-content:center;margin-top:26px;perspective:1200px}
.card3d-stage{margin:0 auto;height:390px;max-width:330px}
.card3d-cube{width:290px;height:330px}
.card3d-stage .glass-card{width:290px;height:330px}
.stage-ring.r1{width:340px;height:340px}
.stage-ring.r2{width:265px;height:265px}
.float-chip{padding:7px 11px}
.float-chip b{font-size:14px}
.fc1{left:-2px}.fc2{left:-6px}.fc3{right:-4px}
}
@media(max-width:400px){
.card3d-stage{height:350px;max-width:290px}
.card3d-cube,.card3d-stage .glass-card{width:255px;height:300px}
.fc3{display:none}
}
@media(prefers-reduced-motion:reduce){
.stage-ring,.stage-glow,.float-chip{animation:none}
.card3d-cube{transform:none}
}
/* ---------------- Seller storefront ---------------- */
.store-hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:24px}
.store-logo{width:88px;height:88px;border-radius:20px;overflow:hidden;flex:0 0 auto;
background:linear-gradient(135deg,var(--navy),var(--red));display:flex;align-items:center;justify-content:center}
.store-logo img{width:100%;height:100%;object-fit:cover}
.store-logo span{font-size:30px;font-weight:800;color:#fff;letter-spacing:1px}
.store-stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--mut)}
.store-stats b{color:var(--navy);font-size:16px}
@media(max-width:620px){.store-hero{padding:18px;gap:14px}.store-logo{width:64px;height:64px;border-radius:16px}.store-logo span{font-size:22px}}
/* ==================================================================
v24 — MOBILE NAV: FINAL AUTHORITATIVE RULES
Yeh block sabse aakhir me hai aur !important ke saath hai, isliye
pichhle kisi bhi purane rule ka is par koi asar nahi padta.
Dropdown ab kabhi side me nahi ja sakta — hamesha neeche khulta hai.
================================================================== */
@media (max-width: 1000px){
/* ---- Drawer ---- */
nav.main, body > nav.main, header.site nav.main{
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
width: min(88vw, 380px) !important;
max-width: 380px !important;
height: 100% !important; max-height: 100% !important;
margin: 0 !important;
padding: 62px 14px calc(30px + env(safe-area-inset-bottom)) !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 4px !important;
overflow-y: auto !important;
overflow-x: hidden !important; /* kuch bhi side me nikal hi nahi sakta */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border-radius: 26px 0 0 26px !important;
border: none !important;
border-left: 1px solid var(--glassb) !important;
background: rgba(255,255,255,.90) !important;
backdrop-filter: saturate(190%) blur(26px);
-webkit-backdrop-filter: saturate(190%) blur(26px);
box-shadow: -24px 0 64px rgba(8,16,48,.30) !important;
transform: translateX(103%) !important;
transition: transform .34s cubic-bezier(.22,.85,.26,1) !important;
visibility: hidden !important;
z-index: 999 !important;
}
[data-theme="dark"] nav.main, [data-theme="dark"] body > nav.main{
background: rgba(16,22,44,.95) !important;
}
nav.main.open, body > nav.main.open{
transform: translateX(0) !important;
visibility: visible !important;
}
/* Drawer ka header label */
nav.main::before{
content: "MENU" !important;
position: absolute !important; top: 20px !important; left: 22px !important;
font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 1.6px !important;
color: var(--mut) !important; padding: 0 !important; margin: 0 !important; border: none !important;
}
.nav-close{
display: flex !important;
position: absolute !important; top: 12px !important; right: 14px !important;
width: 40px !important; height: 40px !important; border-radius: 50% !important;
align-items: center !important; justify-content: center !important;
font-size: 26px !important; line-height: 1 !important; padding: 0 !important;
border: 1px solid var(--field-br) !important; background: rgba(255,255,255,.75) !important;
color: var(--navy) !important; z-index: 3 !important;
}
[data-theme="dark"] .nav-close{ background: rgba(255,255,255,.10) !important; color:#e8ecff !important; }
/* ---- Top level items ---- */
nav.main > a,
nav.main .has-mega > a{
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important;
padding: 15px 16px !important;
margin: 0 !important;
font-size: 15.5px !important; font-weight: 700 !important;
border-radius: 14px !important;
min-height: 50px !important;
white-space: normal !important;
text-align: left !important;
}
nav.main .has-mega{
display: block !important;
position: static !important; /* mega ka anchor khatam — ab absolute ho hi nahi sakta */
width: 100% !important;
max-width: 100% !important;
}
/* ---- DROPDOWN: hamesha neeche, poori chaudai ---- */
nav.main .mega,
nav.main .has-mega .mega,
body > nav.main .has-mega .mega,
header.site nav.main .has-mega .mega{
display: none !important;
position: static !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
transform: none !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
grid-template-columns: 1fr !important;
gap: 2px !important;
margin: 2px 0 8px !important;
padding: 6px 8px 8px 16px !important;
background: rgba(11,29,77,.055) !important;
border: none !important;
box-shadow: none !important;
border-radius: 14px !important;
overflow: hidden !important;
}
[data-theme="dark"] nav.main .has-mega .mega{ background: rgba(255,255,255,.06) !important; }
nav.main .has-mega.open .mega,
body > nav.main .has-mega.open .mega{
display: grid !important;
animation: megaIn .22s ease;
}
nav.main .mega a,
nav.main .has-mega .mega a{
display: flex !important;
align-items: center !important;
width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important;
padding: 13px 14px !important;
margin: 0 !important;
font-size: 14.5px !important;
min-height: 46px !important;
border-radius: 11px !important;
white-space: normal !important;
word-break: break-word !important;
text-align: left !important;
border: none !important;
}
nav.main .mega .mg-hd{
color: var(--red) !important; font-weight: 800 !important;
border-bottom: 1px dashed var(--field-br) !important; border-radius: 0 !important;
margin-bottom: 3px !important;
}
/* Caret */
nav.main .cav{
float: none !important; margin: 0 0 0 10px !important; flex: 0 0 auto !important;
transition: transform .25s !important;
}
nav.main .has-mega.open > a .cav{ transform: rotate(180deg) !important; }
/* Buttons */
nav.main .btn, nav.main .btn.small, nav.main .btn.ghost{
display: flex !important; width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important; text-align: center !important;
margin: 8px 0 0 !important; min-height: 50px !important;
font-size: 15px !important; border-radius: 14px !important;
}
/* Backdrop */
.nav-backdrop{ z-index: 998 !important; }
}
/* ==================================================================
v24 — PREMIUM HERO: background, card, aur poora mobile layout
================================================================== */
/* ---------- Hero background: aurora + chalti hui roshni ---------- */
.hero{
background:linear-gradient(125deg,#08163f 0%,#0f2360 26%,#2a1a6e 48%,#7a1246 74%,#0b1d4d 100%);
background-size:340% 340%;
animation:heroFlow 26s ease-in-out infinite;
isolation:isolate
}
.hero::before{
content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
background:
radial-gradient(38% 42% at 18% 26%, rgba(255,120,160,.42), transparent 62%),
radial-gradient(34% 38% at 82% 20%, rgba(120,150,255,.38), transparent 62%),
radial-gradient(40% 44% at 62% 82%, rgba(160,110,255,.32), transparent 64%),
radial-gradient(30% 34% at 12% 78%, rgba(255,190,110,.24), transparent 62%);
filter:blur(48px);
animation:auroraDrift 30s ease-in-out infinite alternate
}
@keyframes auroraDrift{
0% {transform:translate3d(0,0,0) rotate(0deg) scale(1)}
50% {transform:translate3d(3%,-2%,0) rotate(7deg) scale(1.09)}
100%{transform:translate3d(-3%,2%,0) rotate(-6deg) scale(1.04)}
}
.hero-grid-lines{opacity:.55;z-index:1}
.hero-bars{opacity:.34;z-index:1}
.hero-dots{opacity:.40;z-index:1}
.hero .blob{opacity:.30;z-index:1}
.hero .container{position:relative;z-index:4}
.hero-spot{z-index:2}
/* Neeche ki taraf halka sa dark, taaki text hamesha padhne layak rahe */
.hero::after{
background:linear-gradient(180deg,transparent,var(--bg));
height:88px
}
/* ---------- Card stage ---------- */
.card3d-stage{height:440px;perspective:1400px}
.card3d-cube{width:330px;height:376px;transition:transform .1s linear}
.card3d-cube.snap{transition:transform .85s cubic-bezier(.2,.9,.25,1)}
.card3d-stage .glass-card{
width:330px;height:376px;border-radius:26px;padding:26px;
background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.10)) !important;
border:1px solid rgba(255,255,255,.42);
backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
box-shadow:0 34px 76px rgba(6,14,44,.46), inset 0 1px 0 rgba(255,255,255,.55)
}
.cube-face{border-radius:26px}
.cube-edge{border-radius:26px}
.gc-title{font-size:19px;line-height:1.35;margin-bottom:6px}
.gc-row{min-height:44px;font-size:14.5px}
.gc-cta{margin-top:auto}
/* ---------- Mobile: hero card zaroor dikhe, aur sab kuch fit ho ---------- */
@media(max-width:1000px){
.hero .container{grid-template-columns:1fr !important;gap:8px;text-align:center;min-height:0}
.hero .container > .rv{order:1}
.hero-art{order:2;display:flex !important;justify-content:center;width:100%;margin:6px auto 0;perspective:1200px}
.hero p{margin-left:auto;margin-right:auto}
.hero-btns,.hero-trust{justify-content:center}
.typed-wrap{text-align:center}
}
@media(max-width:620px){
.hero{padding:24px 0 42px}
.hero-pill{font-size:11.5px;padding:6px 13px;margin-bottom:14px}
.hero h1,.hero-h1{font-size:26px;line-height:1.2}
.hero p{font-size:15px;margin-bottom:20px}
.hero-trust{gap:10px;font-size:12px;margin-top:16px}
.card3d-stage{height:380px;max-width:100%;width:100%}
.card3d-cube{width:min(84vw,300px);height:340px}
.card3d-stage .glass-card{width:min(84vw,300px);height:340px;padding:20px;border-radius:22px}
.cube-face,.cube-edge{border-radius:22px}
.gc-title{font-size:17px}
.gc-row{min-height:40px;font-size:13.8px}
.gc-list li{font-size:14px}
.stage-ring.r1{width:min(96vw,340px);height:min(96vw,340px)}
.stage-ring.r2{width:min(76vw,270px);height:min(76vw,270px)}
.stage-glow{width:min(80vw,290px);height:min(80vw,290px)}
.float-chip{padding:6px 10px;border-radius:12px}
.float-chip b{font-size:13px}
.float-chip span{font-size:10px}
.fc1{top:4px;left:0}
.fc2{bottom:52px;left:-4px}
.fc3{top:82px;right:0}
.drag-hint{bottom:2px;font-size:10.5px;padding:5px 12px}
}
@media(max-width:380px){
.card3d-stage{height:340px}
.card3d-cube,.card3d-stage .glass-card{width:86vw;height:308px}
.fc3{display:none}
}
/* ---------- Poore page par: kuch bhi side me nahi nikal sakta ---------- */
html,body{max-width:100%;overflow-x:hidden}
.container{width:100%;box-sizing:border-box}
.hero,section.pad,footer.site{max-width:100vw;overflow-x:clip}
img,svg,video,iframe,canvas,table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
/* ---------- Mobile home sections ---------- */
@media(max-width:620px){
section.pad{padding:34px 0}
.sec-head{gap:8px;margin-bottom:14px}
.sec-head h2{font-size:21px;line-height:1.25}
.sec-head p{font-size:13.5px}
.sec-title h2{font-size:22px}
.sec-title p{font-size:14px}
.slider-outer{margin:0 -2px}
.slider-track .p-card{width:min(70vw,238px)}
.p-card .thumb{height:150px}
.p-card .body{padding:14px}
.p-card h3{font-size:15px}
.cat-card{padding:16px 12px}
.cat-ico{width:48px;height:48px}
.stats{grid-template-columns:repeat(2,1fr);padding:22px 14px;border-radius:20px}
.yt-grid{grid-template-columns:1fr}
.rv-card{min-height:0}
.foot-grid{grid-template-columns:1fr;gap:22px}
footer.site h4{margin-bottom:10px}
}
/* ==================================================================
v25 — MOBILE MENU: POORI SCREEN PAR, PREMIUM, KOI KHALI SAFED JAGAH NAHI
Yeh block sabse aakhir me hai — pichhle sab rules par bhaari padta hai.
================================================================== */
/* Desktop par ye naye hisse dikhne hi nahi chahiye */
.nav-top, .nav-foot { display: none; }
.nav-scroll { display: contents; }
@media (max-width: 1000px){
/* ---------- POORI SCREEN ka menu ---------- */
nav.main, body > nav.main, header.site nav.main{
position: fixed !important;
inset: 0 !important; /* top/right/bottom/left sab 0 — poori screen */
width: 100% !important; max-width: 100% !important;
height: 100% !important; max-height: 100% !important;
margin: 0 !important; padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
border: none !important; border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
/* Site ka apna gradient — kabhi khali safed nahi lagta */
background:
radial-gradient(90% 60% at 12% 4%, rgba(224,26,60,.22), transparent 60%),
radial-gradient(80% 55% at 92% 10%, rgba(80,110,255,.22), transparent 58%),
radial-gradient(90% 60% at 50% 104%, rgba(122,63,242,.20), transparent 62%),
linear-gradient(160deg, #0b1d4d 0%, #142a6b 45%, #1a1450 100%) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
transform: none !important;
opacity: 0 !important; visibility: hidden !important;
transition: opacity .28s ease, visibility .28s !important;
z-index: 1000 !important;
}
nav.main.open, body > nav.main.open{
opacity: 1 !important; visibility: visible !important;
}
nav.main::before{ content: none !important; }
/* ---------- Upar ka bar: brand + close ---------- */
.nav-top{
display: flex !important; align-items: center; justify-content: space-between;
gap: 12px; flex: 0 0 auto;
padding: 16px 18px calc(14px) !important;
padding-top: calc(16px + env(safe-area-inset-top)) !important;
border-bottom: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.04);
}
.nav-brand{ font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.2px; }
.nav-brand b{ color: #ff8098; }
.nav-close{
display: flex !important; position: static !important;
width: 42px !important; height: 42px !important; flex: 0 0 auto;
border-radius: 50% !important; align-items: center; justify-content: center;
font-size: 26px !important; line-height: 1 !important; padding: 0 !important;
background: rgba(255,255,255,.14) !important; color: #fff !important;
border: 1px solid rgba(255,255,255,.24) !important;
}
.nav-close:active{ transform: scale(.92); }
/* ---------- Beech ka scroll area ---------- */
.nav-scroll{
display: block !important; flex: 1 1 auto; min-height: 0;
overflow-y: auto !important; overflow-x: hidden !important;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain;
padding: 14px 16px 18px !important;
}
/* ---------- Menu items — bade, saaf, glass ---------- */
nav.main .nav-scroll > a,
nav.main .has-mega > a{
display: flex !important; align-items: center !important; justify-content: space-between !important;
width: 100% !important; box-sizing: border-box !important;
padding: 16px 18px !important; margin: 0 0 8px !important;
font-size: 16px !important; font-weight: 700 !important;
color: #fff !important; min-height: 56px !important;
background: rgba(255,255,255,.09) !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 16px !important;
text-align: left !important; white-space: normal !important;
}
nav.main .nav-scroll > a:active,
nav.main .has-mega > a:active{ background: rgba(255,255,255,.18) !important; }
nav.main .has-mega{ display: block !important; position: static !important; width: 100% !important; }
nav.main .has-mega.open > a{
background: rgba(224,26,60,.30) !important;
border-color: rgba(255,140,165,.45) !important;
margin-bottom: 0 !important;
border-radius: 16px 16px 0 0 !important;
}
nav.main .cav{
border-top-color: rgba(255,255,255,.75) !important;
margin: 0 0 0 10px !important; float: none !important; flex: 0 0 auto !important;
}
nav.main .has-mega.open > a .cav{ transform: rotate(180deg) !important; }
/* ---------- Dropdown: hamesha neeche, poori chaudai ---------- */
nav.main .mega,
nav.main .has-mega .mega,
body > nav.main .has-mega .mega{
display: none !important;
position: static !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
transform: none !important; float: none !important;
width: 100% !important; max-width: 100% !important; min-width: 0 !important;
box-sizing: border-box !important;
grid-template-columns: 1fr !important; gap: 0 !important;
margin: 0 0 8px !important; padding: 6px 8px !important;
background: rgba(0,0,0,.22) !important;
border: 1px solid rgba(255,255,255,.14) !important; border-top: none !important;
border-radius: 0 0 16px 16px !important;
box-shadow: none !important; overflow: hidden !important;
}
nav.main .has-mega.open .mega{ display: grid !important; animation: megaIn .2s ease; }
nav.main .mega a{
display: flex !important; align-items: center !important;
width: 100% !important; box-sizing: border-box !important;
padding: 13px 14px !important; margin: 0 !important;
font-size: 14.8px !important; font-weight: 600 !important;
color: rgba(255,255,255,.88) !important;
min-height: 48px !important; border-radius: 11px !important;
white-space: normal !important; word-break: break-word !important; border: none !important;
}
nav.main .mega a:active{ background: rgba(255,255,255,.12) !important; }
nav.main .mega .mg-hd{
color: #ff8098 !important; font-weight: 800 !important;
border-bottom: 1px solid rgba(255,255,255,.14) !important; border-radius: 0 !important;
}
/* ---------- Login / Sign up buttons ---------- */
nav.main .nav-scroll .btn,
nav.main .nav-scroll .btn.small,
nav.main .nav-scroll .btn.ghost{
display: flex !important; width: 100% !important; box-sizing: border-box !important;
justify-content: center !important; margin: 10px 0 0 !important;
min-height: 54px !important; font-size: 16px !important; border-radius: 16px !important;
}
nav.main .nav-scroll .btn.ghost{
background: rgba(255,255,255,.12) !important; color: #fff !important;
border: 1px solid rgba(255,255,255,.26) !important;
}
/* ---------- Neeche ka hissa — khali jagah kabhi nahi ---------- */
.nav-foot{
display: block !important; flex: 0 0 auto;
padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
border-top: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.20);
}
.nav-quick{ display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.nav-quick a{
display: flex !important; flex-direction: column; align-items: center; gap: 5px;
padding: 11px 4px !important; margin: 0 !important;
border-radius: 14px; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
font-size: 11px !important; font-weight: 700; color: rgba(255,255,255,.92) !important;
min-height: 0 !important; text-align: center;
}
.nav-quick a:active{ background: rgba(255,255,255,.18); }
.nq-ic svg{ width: 21px; height: 21px; display: block; fill: none;
stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-social{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 13px; }
.nav-social a, .nav-social span{
font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.62) !important;
padding: 0 !important; margin: 0 !important; min-height: 0 !important;
background: none !important; border: none !important;
}
.nav-copy{ text-align: center; font-size: 11.5px; color: rgba(255,255,255,.40); margin-top: 9px; }
/* Backdrop ki ab zaroorat nahi — menu poori screen par hai */
.nav-backdrop{ display: none !important; }
/* Hamburger menu ke upar rahe */
body.nav-open .navtoggle{ z-index: 1001; position: relative; }
body.nav-open .navtoggle::before,
body.nav-open .navtoggle::after{ background: #fff !important; }
}
@media (max-width: 380px){
.nav-quick{ grid-template-columns: repeat(2,1fr); }
.nav-brand{ font-size: 17px; }
nav.main .nav-scroll > a, nav.main .has-mega > a{ font-size: 15px !important; min-height: 52px !important; }
}
/* ==================================================================
v26 — MENU KA ASLI BUG: flex-wrap
Purane CSS me `nav.main{flex-wrap:wrap}` tha (desktop menu ke liye).
Mobile par nav ko column banaya to bhi wrap chalu raha — isliye jo
hissa neeche fit nahi hota tha wo DOOSRE COLUMN me daayen taraf chala
jaata tha. Isi wajah se menu items kinare dikhte the aur Shop/Tools/
Giveaways wala hissa upar-daayen chala jaata tha.
================================================================== */
@media (max-width: 1000px){
nav.main, body > nav.main, header.site nav.main{
flex-wrap: nowrap !important; /* <-- asli fix */
align-items: stretch !important;
align-content: stretch !important;
justify-content: flex-start !important;
}
/* Teenon hisse poori chaudai lein aur apni-apni jagah par rahein */
nav.main > .nav-top{
flex: 0 0 auto !important;
width: 100% !important; max-width: 100% !important;
order: 1 !important;
}
nav.main > .nav-scroll{
flex: 1 1 auto !important;
width: 100% !important; max-width: 100% !important;
min-height: 0 !important; /* tabhi andar scroll hoga */
order: 2 !important;
}
nav.main > .nav-foot{
flex: 0 0 auto !important;
width: 100% !important; max-width: 100% !important;
order: 3 !important;
}
/* Menu ka koi bhi seedha bachcha kabhi wrap na kare */
nav.main > *{ flex-shrink: 0; }
/* Andar ke items bhi hamesha poori chaudai */
nav.main .nav-scroll > a,
nav.main .nav-scroll > .has-mega,
nav.main .nav-scroll > .btn{
width: 100% !important; max-width: 100% !important;
flex: 0 0 auto !important;
}
/* Quick actions ki grid apni chaudai me hi rahe */
.nav-quick{ width: 100% !important; box-sizing: border-box !important; }
.nav-quick a{ min-width: 0 !important; }
.nav-social{ width: 100% !important; }
}
/* ==================================================================
v27 — BACK TO TOP button
Page ke aadhe se neeche jaate hi apne aap aata hai. Gol ring uske
chaaron taraf dikhati hai ki page kitna padha ja chuka hai.
================================================================== */
.to-top{
position:fixed; right:24px; bottom:96px; z-index:94;
width:52px; height:52px; padding:0; border-radius:50%;
display:flex; align-items:center; justify-content:center;
cursor:pointer; border:1px solid var(--glassb);
background:var(--glass); backdrop-filter:saturate(190%) blur(18px);
-webkit-backdrop-filter:saturate(190%) blur(18px);
box-shadow:0 12px 30px rgba(10,20,60,.22);
color:var(--navy);
opacity:0; visibility:hidden; transform:translateY(16px) scale(.86);
transition:opacity .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.3), visibility .3s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.to-top:hover{ background:var(--navy); color:#fff; box-shadow:0 16px 38px rgba(11,29,77,.34); }
.to-top:active{ transform:translateY(0) scale(.93); }
.to-top:focus-visible{ outline:3px solid rgba(224,26,60,.45); outline-offset:3px; }
[data-theme="dark"] .to-top{ color:#e8ecff; }
[data-theme="dark"] .to-top:hover{ background:rgba(255,255,255,.16); }
/* Padhne ki progress dikhata hua ring */
.tt-ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none; }
.tt-track{ fill:none; stroke:var(--field-br); stroke-width:2.4; opacity:.55; }
.tt-bar{ fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round;
stroke-dasharray:119.4; stroke-dashoffset:119.4; transition:stroke-dashoffset .12s linear; }
.to-top:hover .tt-track{ stroke:rgba(255,255,255,.30); }
.tt-arrow{ width:21px; height:21px; fill:none; stroke:currentColor;
stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1; }
/* Chat button ke saath takrav na ho */
@media(min-width:761px){ .to-top{ bottom:96px; } }
@media(max-width:760px){
.to-top{
right:14px;
bottom:calc(150px + env(safe-area-inset-bottom)); /* bottom nav + chat button ke upar */
width:46px; height:46px;
}
.tt-arrow{ width:19px; height:19px; }
}
@media(max-width:400px){ .to-top{ right:12px; width:44px; height:44px; } }
/* Print aur admin panel me zaroorat nahi */
.is-admin .to-top{ display:none; }
@media print{ .to-top{ display:none !important; } }
@media(prefers-reduced-motion:reduce){ .to-top{ transition:opacity .2s; } }
/* Back-to-top ki jagah doosre floating buttons ke hisaab se apne aap adjust */
/* 1) Chat box khula ho to button chhup jaaye (uske peechhe na phanse) */
body:has(#chatBox.open) .to-top{ opacity:0; visibility:hidden; pointer-events:none; }
/* 2) Chat button hai hi nahi (guest user) to neeche aa jaaye */
body:not(:has(#chatBtn)) .to-top{ bottom:24px; }
@media(max-width:760px){
body:not(:has(#chatBtn)) .to-top{ bottom:calc(88px + env(safe-area-inset-bottom)); }
}
/* 3) Menu khula ho to button na dikhe */
body.nav-open .to-top{ opacity:0; visibility:hidden; pointer-events:none; }
/* =========================================================================
v28 — Sliders, 3D showcase block, videos, mobile footer
========================================================================= */
/* ---------- 1. SLIDER: smooth marquee ----------
Ab chalna transform se hota hai (scrollbar se nahi), isliye bilkul makkhan.
Row bhari hi nahi to kuch nahi hilta — items beech me stable khade rehte hain. */
.slider-outer{ position:relative; padding:0 44px; margin:0 -6px }
.slider-outer .slider-wrap,
.slider-wrap[data-slider]{
overflow:hidden !important;
cursor:grab;
touch-action:pan-y; /* upar-neeche swipe = page scroll */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
}
.slider-wrap.dragging{ cursor:grabbing }
.slider-outer .slider-track{
display:flex; gap:20px; width:max-content;
animation:none !important;
padding:22px 0 28px;
will-change:transform;
transform:translate3d(0,0,0);
}
.slider-wrap.dragging .slider-track{ transition:none }
.slider-outer .slider-track > *{ flex:0 0 auto; user-select:none; -webkit-user-drag:none }
.slider-outer .slider-track a,
.slider-outer .slider-track img{ -webkit-user-drag:none; user-drag:none }
/* Arrows — dono taraf, hamesha ek jagah, kabhi content ke upar nahi */
.slider-outer .sl-nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:8;
width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1px solid var(--glassb); background:var(--glass); color:var(--navy);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
box-shadow:0 10px 26px rgba(8,18,52,.18); cursor:pointer;
transition:transform .22s, background .22s, color .22s, box-shadow .22s;
}
.slider-outer .sl-nav.prev{ left:0; right:auto }
.slider-outer .sl-nav.next{ right:0; left:auto }
.slider-outer .sl-nav:hover{ background:var(--navy); color:#fff; transform:translateY(-50%) scale(1.09); box-shadow:0 14px 30px rgba(8,18,52,.28) }
.slider-outer .sl-nav:active{ transform:translateY(-50%) scale(.96) }
[data-theme="dark"] .slider-outer .sl-nav{ color:#e8ecff }
/* Row bhari hi nahi — sab kuch beech me, stable, arrows gayab */
.slider-outer.no-loop{ padding:0 }
.slider-outer.no-loop .sl-nav{ display:none }
.slider-outer.no-loop .slider-wrap{
cursor:default; touch-action:auto;
-webkit-mask-image:none !important; mask-image:none !important;
}
.slider-outer.no-loop .slider-track{
width:100% !important; justify-content:center; flex-wrap:wrap; row-gap:20px;
transform:none !important;
}
/* Categories bhi ab isi slider par */
.sl-cats .slider-track .cat-card{
width:158px; text-align:center; padding:22px 14px;
display:flex; flex-direction:column; align-items:center; gap:10px;
}
.sl-cats .slider-track{ padding:18px 0 24px }
/* ---------- 2. VIDEOS: product card jitne hi, na chhote na bade ---------- */
.sl-yt .slider-track .yt-item{ width:290px; padding:12px; border-radius:18px; display:flex; flex-direction:column }
.sl-yt .yt-frame{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:13px; background:#0b1d4d }
.sl-yt .yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.yt-cap{ padding:12px 4px 4px; display:flex; flex-direction:column; gap:6px }
.yt-cap b{ font-size:14.5px; color:var(--navy); line-height:1.4 }
.yt-cap a{ font-size:12.5px; color:var(--red); font-weight:700 }
.yt-kind{
align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
padding:3px 9px; border-radius:99px; background:rgba(11,29,77,.10); color:var(--navy);
}
.yt-kind.pl{ background:rgba(213,16,63,.12); color:var(--red) }
[data-theme="dark"] .yt-cap b{ color:#e8ecff }
[data-theme="dark"] .yt-kind{ background:rgba(255,255,255,.10); color:#cdd6ff }
/* ---------- 3. HERO 3D SHOWCASE BLOCK ---------- */
.h3d-stage{
position:relative; width:100%; max-width:440px; height:470px; margin-left:auto;
display:flex; align-items:center; justify-content:center;
perspective:1500px; perspective-origin:50% 46%;
--bw:300px; --bh:372px; --bd:250px;
}
.h3d-box{
position:relative; width:var(--bw); height:var(--bh);
transform-style:preserve-3d;
transform:rotateX(var(--rx,-9deg)) rotateY(var(--ry,-26deg));
cursor:grab; touch-action:pan-y; /* mobile: seedha upar-neeche swipe page scroll kare */
will-change:transform;
}
.h3d-box.snap{ transition:transform .85s cubic-bezier(.2,.9,.25,1) }
.h3d-stage.dragging .h3d-box{ cursor:grabbing }
.h3d-face{
position:absolute; border-radius:22px; overflow:hidden;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
background:
linear-gradient(152deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.13) 46%, rgba(255,255,255,.07) 100%),
linear-gradient(200deg, rgba(11,29,77,.55), rgba(24,16,52,.62));
border:1px solid rgba(255,255,255,.34);
box-shadow:
0 0 0 1px rgba(255,255,255,.06) inset,
0 1px 0 rgba(255,255,255,.42) inset,
0 26px 64px rgba(6,14,42,.42);
}
.h3d-face::after{ /* kaanch ki chamak */
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(118deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,.12) 100%);
}
.h3d-in{ position:relative; z-index:2; height:100%; padding:22px 20px; display:flex; flex-direction:column; color:#f2f5ff }
.h3d-box.upside .h3d-in,
.h3d-box.upside .h3d-brand{ transform:rotate(180deg) }
.f-front { width:var(--bw); height:var(--bh); left:0; top:0; transform:translateZ(calc(var(--bd) / 2)) }
.f-back { width:var(--bw); height:var(--bh); left:0; top:0; transform:rotateY(180deg) translateZ(calc(var(--bd) / 2)) }
.f-right { width:var(--bd); height:var(--bh); top:0; left:calc((var(--bw) - var(--bd)) / 2); transform:rotateY(90deg) translateZ(calc(var(--bw) / 2)) }
.f-left { width:var(--bd); height:var(--bh); top:0; left:calc((var(--bw) - var(--bd)) / 2); transform:rotateY(-90deg) translateZ(calc(var(--bw) / 2)) }
.f-top { width:var(--bw); height:var(--bd); left:0; top:calc((var(--bh) - var(--bd)) / 2); transform:rotateX(90deg) translateZ(calc(var(--bh) / 2)) }
.f-bottom{ width:var(--bw); height:var(--bd); left:0; top:calc((var(--bh) - var(--bd)) / 2); transform:rotateX(-90deg) translateZ(calc(var(--bh) / 2)) }
.f-top, .f-bottom{
display:flex; align-items:center; justify-content:center;
background:linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.05)), linear-gradient(200deg, rgba(11,29,77,.72), rgba(24,16,52,.78));
}
.h3d-brand{ font-size:19px; font-weight:800; letter-spacing:1.6px; color:rgba(255,255,255,.80); text-transform:uppercase }
.h3d-brand.small{ font-size:12.5px; letter-spacing:2.4px; color:rgba(255,255,255,.55) }
/* Face ka andar ka content */
.h3d-eyebrow{
display:flex; align-items:center; gap:7px;
font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
color:rgba(255,255,255,.62); margin-bottom:14px;
}
.h3d-live{ width:7px; height:7px; border-radius:50%; background:#41e08a; box-shadow:0 0 0 0 rgba(65,224,138,.65); animation:h3dPulse 2s infinite }
@keyframes h3dPulse{ 70%{ box-shadow:0 0 0 9px rgba(65,224,138,0) } 100%{ box-shadow:0 0 0 0 rgba(65,224,138,0) } }
.h3d-head{ font-size:19px; font-weight:800; line-height:1.32; margin-bottom:16px; color:#fff }
.h3d-rows{ display:flex; flex-direction:column; gap:9px; margin-bottom:auto }
.h3d-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.72) }
.h3d-row b{ font-size:14px; font-weight:800; color:#fff }
.h3d-row b.hot{ color:#ffd166 }
.h3d-list{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:11px }
.h3d-list li{ position:relative; padding-left:24px; font-size:13.2px; line-height:1.5; color:rgba(255,255,255,.80) }
.h3d-list li::before{
content:""; position:absolute; left:0; top:4px; width:15px; height:15px; border-radius:50%;
background:rgba(65,224,138,.22); box-shadow:inset 0 0 0 1.5px rgba(65,224,138,.75);
}
.h3d-list li::after{
content:""; position:absolute; left:5px; top:8px; width:5px; height:8px;
border:solid #41e08a; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.h3d-links{ display:flex; flex-direction:column; gap:8px; margin-bottom:auto }
.h3d-links a{
display:flex; align-items:center; gap:10px;
padding:9px 12px; border-radius:11px; font-size:13.2px; font-weight:600;
color:rgba(255,255,255,.88); background:rgba(255,255,255,.09);
border:1px solid rgba(255,255,255,.14);
transition:background .2s, transform .2s, border-color .2s;
}
.h3d-links a span{ font-size:14px; opacity:.9; flex:0 0 auto }
.h3d-links a:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.34); transform:translateX(3px); color:#fff }
.h3d-cta{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
margin-top:16px; padding:11px 16px; border-radius:12px;
font-size:13.5px; font-weight:800; letter-spacing:.2px;
background:linear-gradient(135deg,#ec1f4d,#b60f36); color:#fff;
box-shadow:0 10px 24px rgba(213,16,63,.36);
transition:transform .2s, box-shadow .2s, filter .2s;
}
.h3d-cta i{ font-style:normal; transition:transform .22s }
.h3d-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(213,16,63,.46); color:#fff }
.h3d-cta:hover i{ transform:translateX(4px) }
.h3d-cta.ghost{ background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.30); box-shadow:none }
.h3d-cta.ghost:hover{ background:rgba(255,255,255,.24); box-shadow:none }
/* Peechhe ki roshni aur ghoomti hui rings */
.h3d-halo{
position:absolute; width:80%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
background:radial-gradient(circle, rgba(213,16,63,.34) 0%, rgba(11,29,77,.24) 42%, transparent 68%);
filter:blur(26px); animation:h3dHalo 9s ease-in-out infinite alternate;
}
@keyframes h3dHalo{ from{ transform:scale(.92) } to{ transform:scale(1.10) } }
.h3d-ring{
position:absolute; border-radius:50%; pointer-events:none; z-index:0;
border:1px solid rgba(255,255,255,.16);
}
.h3d-ring.r1{ width:88%; aspect-ratio:1; animation:h3dSpin 26s linear infinite }
.h3d-ring.r2{ width:66%; aspect-ratio:1; border-style:dashed; border-color:rgba(255,255,255,.13); animation:h3dSpin 34s linear infinite reverse }
@keyframes h3dSpin{ to{ transform:rotate(360deg) } }
/* Aage tairte hue chips — gayab hote hain, nayi jagah nayi baat lekar aate hain */
.h3d-chips{ position:absolute; inset:0; z-index:6; pointer-events:none }
.h3d-chip{
position:absolute; pointer-events:none;
background:rgba(255,255,255,.94); border-radius:14px; padding:9px 14px;
box-shadow:0 16px 36px rgba(6,14,42,.32); text-align:left; white-space:nowrap;
opacity:0; transform:translateY(12px) scale(.86); filter:blur(2px);
transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1.2), filter .55s ease;
}
.h3d-chip.in{ opacity:1; transform:translateY(0) scale(1); filter:none; animation:h3dFloat 4.4s ease-in-out infinite alternate }
.h3d-chip b{ display:block; font-size:15.5px; font-weight:800; color:#0b1d4d; line-height:1.15 }
.h3d-chip span{ display:block; font-size:10.5px; font-weight:700; color:#7a82a8; margin-top:2px }
@keyframes h3dFloat{ from{ translate:0 -4px } to{ translate:0 5px } }
[data-theme="dark"] .h3d-chip{ background:rgba(24,31,58,.94) }
[data-theme="dark"] .h3d-chip b{ color:#e8ecff }
[data-theme="dark"] .h3d-chip span{ color:#98a2cc }
@media (prefers-reduced-motion: reduce){
.h3d-chip.in{ animation:none }
.h3d-ring, .h3d-halo{ animation:none }
}
@media (max-width:1000px){
.h3d-stage{ margin:0 auto; height:430px; max-width:100%; --bw:272px; --bh:344px; --bd:224px }
.h3d-head{ font-size:18px }
}
@media (max-width:760px){
.h3d-stage{ height:390px; --bw:min(72vw,266px); --bh:326px; --bd:min(60vw,216px) }
.h3d-in{ padding:18px 16px }
.h3d-head{ font-size:16.5px; margin-bottom:12px }
.h3d-row{ font-size:12.2px } .h3d-row b{ font-size:13px }
.h3d-list li{ font-size:12.2px; padding-left:22px }
.h3d-links a{ padding:8px 10px; font-size:12.4px }
.h3d-cta{ padding:10px 14px; font-size:12.8px; margin-top:12px }
.h3d-chip{ padding:7px 11px; border-radius:12px }
.h3d-chip b{ font-size:13px } .h3d-chip span{ font-size:9.5px }
.slider-outer{ padding:0 34px }
.slider-outer .sl-nav{ width:34px; height:34px }
.sl-yt .slider-track .yt-item{ width:min(78vw,268px) }
.sl-cats .slider-track .cat-card{ width:136px; padding:18px 12px }
}
@media (max-width:430px){
.h3d-stage{ height:352px; --bw:70vw; --bh:300px; --bd:58vw }
.h3d-head{ font-size:15.5px }
.h3d-list li{ gap:8px }
.slider-outer{ padding:0 30px }
}
/* ---------- 5. Admin ke chhote helpers ---------- */
.tbl-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl-wrap table.tbl{ min-width:760px }
.frow{ display:grid; grid-template-columns:200px 1fr; gap:14px; align-items:end }
@media (max-width:640px){ .frow{ grid-template-columns:1fr } }
p.hint{ font-size:12.5px; color:var(--mut); margin:6px 0 0; line-height:1.6 }
/* Video ka halka roop: pehle sirf tasveer + play button, click par asli video */
.sl-yt .yt-frame{ cursor:pointer }
.yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0 }
.yt-thumb.ph{ background:linear-gradient(135deg,#0b1d4d,#3a1030) }
.yt-play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:56px; height:40px; border-radius:11px; background:rgba(213,16,63,.94);
box-shadow:0 10px 26px rgba(6,14,42,.42); transition:transform .22s, background .22s;
}
.yt-play::after{
content:""; position:absolute; left:50%; top:50%; transform:translate(-44%,-50%);
border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #fff;
}
.yt-frame:hover .yt-play{ transform:translate(-50%,-50%) scale(1.12); background:#ff1f52 }
.yt-frame[data-on] .yt-play, .yt-frame[data-on] .yt-thumb{ display:none }
.yt-frame:focus-visible{ outline:3px solid var(--red); outline-offset:3px }
/* Hero block ko thodi aur jagah, taaki ghoomte waqt kinare na kate */
@media(min-width:1081px){ .hero-art{ width:436px } }
/* =========================================================================
v29 — Popup message, upar chalti ghadi, naya footer
========================================================================= */
/* ---------- 1. POPUP MESSAGE (toast) ----------
Purane phone par hang hone ki asli wajah backdrop-blur thi. Ab solid rang hai. */
#toasts{
position:fixed; z-index:99999; display:flex; flex-direction:column; gap:12px;
top:84px; right:18px; left:auto; width:auto;
pointer-events:none;
}
.toast{
position:relative; display:flex; align-items:flex-start; gap:11px;
min-width:280px; max-width:400px; width:auto;
padding:14px 42px 14px 15px;
border-radius:15px; font-size:14.2px; line-height:1.5; color:var(--ink);
background:#ffffff !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
border:1px solid rgba(16,26,64,.08) !important;
border-left:5px solid var(--ok) !important;
box-shadow:0 18px 44px rgba(8,18,52,.22);
animation:none !important;
pointer-events:auto;
opacity:0; transform:translateX(46px) scale(.96);
transition:opacity .42s ease, transform .48s cubic-bezier(.2,.85,.3,1.05);
will-change:opacity, transform;
}
.toast.in { opacity:1; transform:none }
.toast.out{ opacity:0; transform:translateX(46px) scale(.96) }
.toast.error{ border-left-color:var(--red) !important }
.toast.info { border-left-color:var(--navy) !important }
.tst-msg{ flex:1; min-width:0; word-break:break-word }
.tst-ic{
flex:0 0 auto; width:21px; height:21px; margin-top:1px; border-radius:50%;
background:var(--ok); position:relative;
}
.tst-ic::after{
content:""; position:absolute; left:7px; top:4px; width:5px; height:10px;
border:solid #fff; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.toast.error .tst-ic{ background:var(--red) }
.toast.error .tst-ic::after{ left:9px; top:5px; width:2px; height:11px; border:0; background:#fff; transform:none; border-radius:2px }
.toast.error .tst-ic::before{ content:""; position:absolute; left:9px; top:5px; width:2px; height:7px; background:#fff; border-radius:2px }
.toast.info .tst-ic{ background:var(--navy) }
.toast.info .tst-ic::after{ left:9px; top:9px; width:3px; height:7px; border:0; background:#fff; transform:none; border-radius:2px }
.tst-x{
position:absolute; right:6px; top:6px; width:30px; height:30px; border:0; padding:0;
background:transparent; color:#9aa2c4; font-size:21px; line-height:1; cursor:pointer;
border-radius:9px; transition:background .2s, color .2s;
}
.tst-x:hover{ background:rgba(16,26,64,.07); color:var(--navy) }
[data-theme="dark"] .toast{ background:#161d3a !important; border-color:rgba(255,255,255,.10) !important }
[data-theme="dark"] .tst-x{ color:#8f98c2 }
[data-theme="dark"] .tst-x:hover{ background:rgba(255,255,255,.08); color:#e8ecff }
/* Mobile: sabse upar, beech me, poori chaudai —
chat button, bottom menu aur back-to-top, kisi se nahi takraata */
@media (max-width:760px){
#toasts{
top:calc(12px + env(safe-area-inset-top)); bottom:auto;
left:12px; right:12px; width:auto; align-items:stretch; gap:10px;
}
.toast{
min-width:0; max-width:none; width:100%;
padding:13px 40px 13px 14px; font-size:13.8px; border-radius:14px;
transform:translateY(-26px) scale(.97);
box-shadow:0 14px 34px rgba(8,18,52,.28);
}
.toast.out{ transform:translateY(-26px) scale(.97) }
}
@media (prefers-reduced-motion: reduce){
.toast{ transition:opacity .3s ease }
.toast, .toast.out{ transform:none }
}
/* Modal ka blur bhi halka — purane phone par jhatka na lage */
@media (max-width:760px){
.modal-bg{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px) }
}
/* ---------- 2. UPAR CHALTI HUI INDIA KI GHADI ---------- */
.topbar{ background:#0b1d4d; color:#cdd6f7; font-size:12.5px; padding:0 }
.topbar .container{
display:flex; align-items:center; justify-content:space-between; gap:14px;
flex-wrap:nowrap; min-height:34px;
}
.tb-info{ display:flex; align-items:center; gap:18px; min-width:0; overflow:hidden; white-space:nowrap }
.tb-info span{ display:inline-flex; gap:6px; align-items:center; color:#9fb0e4 }
.tb-info b{ color:#eef2ff; font-weight:700 }
.tb-clock{
display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; white-space:nowrap;
padding:5px 12px; border-radius:99px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11);
}
.tb-dot{
width:7px; height:7px; border-radius:50%; background:#41e08a; flex:0 0 auto;
box-shadow:0 0 0 0 rgba(65,224,138,.6); animation:tbPulse 2.2s infinite;
}
@keyframes tbPulse{ 70%{ box-shadow:0 0 0 7px rgba(65,224,138,0) } 100%{ box-shadow:0 0 0 0 rgba(65,224,138,0) } }
.tb-date{ color:#b9c6ee }
.tb-time{ color:#fff; font-weight:800; letter-spacing:.4px; font-variant-numeric:tabular-nums; min-width:88px; display:inline-block }
.tb-zone{ color:#8f9ed4; font-size:10.5px; font-weight:800; letter-spacing:1px }
@media (max-width:900px){
.tb-info span:nth-child(2){ display:none }
}
@media (max-width:760px){
.topbar{ font-size:11.5px }
.topbar .container{ justify-content:center; min-height:32px }
.tb-info{ display:none } /* mobile par sirf ghadi — saaf aur seedha */
.tb-clock{ padding:4px 12px; gap:7px; background:transparent; border:0 }
.tb-date{ font-size:11px }
.tb-time{ font-size:12px; min-width:80px }
}
/* ---------- 3. FOOTER: desktop aur mobile, dono par professional ---------- */
footer.site{
background:linear-gradient(180deg,#0d2258 0%,#0a1a44 55%,#081436 100%);
color:#a8b4dc; margin-top:70px; padding:52px 0 0;
border-top:1px solid rgba(255,255,255,.08);
}
footer.site .container{ position:relative }
.foot-head{ display:grid; grid-template-columns:1.15fr 2.3fr; gap:44px; padding-bottom:34px }
.fh-logo{ max-height:44px; display:block; margin-bottom:14px }
.fh-name{ font-size:21px; font-weight:800; color:#fff; letter-spacing:.3px; margin-bottom:12px }
.fh-tag{ font-size:13.8px; line-height:1.75; color:#9dabd8; margin:0 0 20px; max-width:340px }
.fh-meta{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px }
.fh-meta li{ display:flex; align-items:flex-start; gap:11px }
.fh-meta li > span:last-child{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.fh-meta b{ font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:#7f8ec4 }
.fh-meta i{ font-style:normal; font-size:13.4px; color:#dee5ff; font-weight:600 }
.fm-ic{
flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); color:#ffd166; font-size:14px;
}
.fh-links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:26px 24px; align-content:start }
.fh-col h4{ color:#fff; font-size:14px; font-weight:800; letter-spacing:.3px; margin:0 0 13px; position:relative; padding-bottom:9px }
.fh-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; border-radius:2px; background:var(--red) }
.fh-col a{
display:block; color:#a3b0da; padding:6px 0; font-size:13.6px; line-height:1.5;
transition:color .2s, transform .2s;
}
.fh-col a:hover{ color:#ffd166; transform:translateX(3px) }
.foot-social{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:20px 0; border-top:1px solid rgba(255,255,255,.09);
}
.fs-lbl{ font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#7f8ec4 }
.fs-row{ display:flex; gap:10px; flex-wrap:wrap }
.fs-btn{
width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); color:#cfd8ff;
transition:transform .22s cubic-bezier(.2,.9,.3,1.2), background .22s, color .22s, border-color .22s;
}
.fs-btn svg{ width:19px; height:19px; fill:currentColor }
.fs-btn:hover{ transform:translateY(-3px); color:#fff; border-color:transparent }
.fs-whatsapp:hover { background:#25d366 }
.fs-instagram:hover{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888) }
.fs-telegram:hover { background:#2aabee }
.fs-youtube:hover { background:#ff0033 }
.fs-facebook:hover { background:#1877f2 }
.foot-trust{
display:flex; flex-wrap:wrap; gap:10px;
padding:16px 0 20px; border-top:1px solid rgba(255,255,255,.09);
}
.foot-trust span{
font-size:12.2px; font-weight:600; color:#b3c0e8;
padding:7px 13px; border-radius:99px;
background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09);
}
/* --- Footer ka sabse neeche wala hissa: sab kuch BEECH ME --- */
.foot-bot{
display:flex; flex-direction:column; align-items:center; gap:14px;
border-top:1px solid rgba(255,255,255,.10);
padding:22px 0 24px; text-align:center; font-size:12.8px; color:#8e9cca;
}
.fb-links{
display:flex; align-items:center; justify-content:center;
gap:0 12px; flex-wrap:wrap; max-width:820px;
}
.fb-links a{ color:#9aa8d4; font-size:12.9px; transition:color .2s; padding:3px 0 }
.fb-links a:hover{ color:#ffd166 }
.fb-dot{
width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.28);
flex:0 0 auto; display:block;
}
.fb-copy{
display:flex; flex-direction:column; align-items:center; gap:3px;
font-size:13px; color:#b3c0e8; line-height:1.6;
}
.fb-copy b{ color:#e7ecff; font-weight:700 }
.fb-legal{ font-size:12px; color:#8391bd }
.fb-made{
display:inline-flex; align-items:center; gap:7px;
font-size:11.8px; color:#7b88b4; letter-spacing:.3px;
}
.fb-made svg{ width:14px; height:14px; color:#38e0b0; flex:0 0 auto }
/* --- Mobile: do column, koi khali jagah nahi, aur utna hi saaf jitna desktop par --- */
@media (max-width:900px){
.foot-head{ grid-template-columns:1fr; gap:28px; padding-bottom:26px }
.fh-tag{ max-width:none }
}
@media (max-width:760px){
footer.site{ margin-top:46px; padding:32px 0 0 }
.foot-head{ gap:24px; padding-bottom:22px }
.fh-name{ font-size:19px; margin-bottom:10px }
.fh-tag{ font-size:13.2px; line-height:1.7; margin-bottom:16px }
.fh-meta{ flex-direction:row; flex-wrap:wrap; gap:10px }
.fh-meta li{
flex:1 1 calc(50% - 5px); min-width:0; align-items:center; gap:9px;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
border-radius:12px; padding:9px 10px;
}
.fm-ic{ width:26px; height:26px; border-radius:8px; font-size:12.5px }
.fh-meta b{ font-size:9.5px; letter-spacing:.7px }
.fh-meta i{ font-size:12.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fh-links{ grid-template-columns:1fr 1fr; gap:20px 16px }
.fh-col h4{ font-size:13px; margin-bottom:10px; padding-bottom:7px }
.fh-col a{ font-size:13px; padding:5px 0 }
.fh-col a:hover{ transform:none }
.foot-social{ flex-direction:column; align-items:flex-start; gap:11px; padding:18px 0 }
.fs-row{ width:100%; gap:9px }
.fs-btn{ flex:1 1 0; min-width:44px; height:42px; border-radius:13px }
.foot-trust{ gap:8px; padding:14px 0 16px }
.foot-trust span{ font-size:11.4px; padding:6px 11px }
.foot-bot{ gap:12px; padding:18px 0 20px; font-size:12px }
.fb-links{ gap:0 10px; row-gap:2px }
.fb-links a{ font-size:12.2px }
.fb-copy{ font-size:12.4px }
}
@media (max-width:400px){
.fh-meta li{ flex:1 1 100% }
.fh-links{ gap:18px 12px }
}
/* Mobile par blur hatana zaroori hai — purane phone isi se atakte hain */
footer.site, .topbar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
.topbar{ position:relative; z-index:2 }
/* =========================================================================
v30 — Search, gallery, coupon banner, FAQ, timeline, analytics
========================================================================= */
/* ---------- 1. Header search ---------- */
.hdr-search{
position:relative; display:flex; align-items:center; gap:8px;
flex:1 1 320px; max-width:440px; margin:0 18px 0 26px;
background:var(--glass); border:1px solid var(--glassb); border-radius:99px;
padding:6px 6px 6px 14px; transition:box-shadow .22s, border-color .22s;
}
.hdr-search:focus-within{ border-color:rgba(213,16,63,.45); box-shadow:0 6px 22px rgba(8,18,52,.14) }
.hs-ic{ width:18px; height:18px; flex:0 0 auto; color:var(--mut) }
.hdr-search input{
flex:1; min-width:0; border:0 !important; background:transparent !important;
padding:6px 0 !important; margin:0 !important; font-size:14px; color:var(--ink);
box-shadow:none !important; outline:none;
}
.hdr-search input::-webkit-search-cancel-button{ -webkit-appearance:none }
.hs-go{
flex:0 0 auto; border:0; cursor:pointer; border-radius:99px;
padding:8px 16px; font-size:13px; font-weight:700; color:#fff;
background:linear-gradient(135deg,#ec1f4d,#b60f36);
transition:transform .2s, box-shadow .2s;
}
.hs-go:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(213,16,63,.34) }
.hs-sug{
position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:120;
background:var(--card); border:1px solid var(--glassb); border-radius:16px;
box-shadow:0 18px 46px rgba(8,18,52,.22); overflow:hidden; max-height:340px; overflow-y:auto;
}
.hs-item{
display:block; padding:11px 16px; font-size:14px; color:var(--ink);
border-bottom:1px solid var(--line); transition:background .15s, color .15s;
}
.hs-item:last-child{ border-bottom:0 }
.hs-item:hover, .hs-item.on{ background:rgba(213,16,63,.08); color:var(--red) }
@media (max-width:1000px){
.hdr-search{ order:9; flex:1 1 100%; max-width:none; margin:12px 0 0 }
}
@media (max-width:760px){
.hs-go{ padding:8px 13px; font-size:12.5px }
}
/* ---------- 2. Product gallery + lightbox ---------- */
.pgal-zoom{
display:block; width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; position:relative;
border-radius:14px; overflow:hidden;
}
.pgal-main{ width:100%; height:auto; display:block; border-radius:14px; background:#fff }
.pgal-hint{
position:absolute; right:12px; bottom:12px; padding:6px 12px; border-radius:99px;
font-size:11.5px; font-weight:700; color:#fff; background:rgba(11,29,77,.72);
opacity:0; transition:opacity .22s; pointer-events:none;
}
.pgal-zoom:hover .pgal-hint{ opacity:1 }
.pgal-thumbs{ display:flex; gap:9px; margin-top:12px; flex-wrap:wrap }
.pgal-t{
width:64px; height:64px; padding:0; border-radius:11px; overflow:hidden; cursor:pointer;
border:2px solid var(--line); background:#fff; transition:border-color .2s, transform .2s;
}
.pgal-t img{ width:100%; height:100%; object-fit:contain }
.pgal-t:hover{ transform:translateY(-2px) }
.pgal-t.on{ border-color:var(--red) }
.lbox{
position:fixed; inset:0; z-index:100000; display:none;
align-items:center; justify-content:center; padding:40px 16px;
background:rgba(6,12,32,.92);
}
.lbox.on{ display:flex }
.lbox img{ max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.55) }
.lbox button{
position:absolute; border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12);
border-radius:50%; width:46px; height:46px; font-size:20px; line-height:1;
display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s;
}
.lbox button:hover{ background:rgba(255,255,255,.26); transform:scale(1.06) }
.lb-x{ top:18px; right:18px; font-size:26px !important }
.lb-p{ left:16px; top:50%; margin-top:-23px }
.lb-n{ right:16px; top:50%; margin-top:-23px }
.lbox.single .lb-p, .lbox.single .lb-n, .lbox.single .lb-cnt{ display:none }
.lb-cnt{
position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
color:#cfd8ff; font-size:12.5px; font-weight:700; letter-spacing:1px;
}
@media (max-width:760px){
.lbox{ padding:56px 10px }
.lb-p, .lb-n{ width:40px; height:40px }
}
/* Product ke highlights */
.p-high{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:9px }
.p-high li{ position:relative; padding-left:26px; font-size:14.2px; line-height:1.6; color:var(--ink) }
.p-high li::before{
content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
background:rgba(24,168,100,.16); box-shadow:inset 0 0 0 1.5px rgba(24,168,100,.7);
}
.p-high li::after{
content:""; position:absolute; left:5.5px; top:8px; width:5px; height:8px;
border:solid #18a864; border-width:0 2px 2px 0; transform:rotate(42deg);
}
/* ---------- 3. Coupon banner ---------- */
.cp-banner{
display:flex; align-items:center; gap:16px; flex-wrap:wrap;
padding:16px 20px; border-radius:18px;
background:linear-gradient(120deg, rgba(213,16,63,.10), rgba(11,29,77,.10));
border:1px dashed rgba(213,16,63,.42);
transition:opacity .4s, transform .4s;
}
.cp-banner.done{ opacity:.55 }
.cp-tag{
flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
padding:5px 12px; border-radius:99px; background:var(--red); color:#fff;
}
.cp-txt{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:3px }
.cp-txt b{ font-size:15.5px; color:var(--navy); font-weight:700 }
.cp-txt span{ font-size:13px; color:var(--mut) }
.cp-code{
display:inline-block; padding:2px 10px; border-radius:8px; letter-spacing:2px;
background:#fff; color:var(--red); font-weight:800; border:1px dashed rgba(213,16,63,.5);
}
[data-theme="dark"] .cp-code{ background:rgba(255,255,255,.10) }
.cp-btn{
flex:0 0 auto; border:0; cursor:pointer; border-radius:12px; padding:11px 20px;
font-size:13.5px; font-weight:800; color:#fff;
background:linear-gradient(135deg,#ec1f4d,#b60f36);
box-shadow:0 10px 24px rgba(213,16,63,.32);
transition:transform .2s, box-shadow .2s, opacity .2s;
}
.cp-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(213,16,63,.42) }
.cp-btn:disabled{ opacity:.7; cursor:default; transform:none }
@media (max-width:760px){
.cp-banner{ padding:14px 16px; gap:12px }
.cp-txt b{ font-size:14.5px }
.cp-btn{ width:100%; padding:12px }
}
/* ---------- 4. FAQ ---------- */
.faq-grp{
color:var(--navy); font-size:17px; margin:28px 0 12px;
padding-left:13px; border-left:4px solid var(--red); line-height:1.3;
}
.faq-list{ display:flex; flex-direction:column; gap:10px }
.faq-item{
border:1px solid var(--glassb); border-radius:14px; overflow:hidden;
background:var(--glass); transition:box-shadow .22s, border-color .22s;
}
.faq-item[open]{ border-color:rgba(213,16,63,.32); box-shadow:0 10px 26px rgba(8,18,52,.10) }
.faq-item > summary{
list-style:none; cursor:pointer; padding:15px 18px;
display:flex; align-items:center; justify-content:space-between; gap:14px;
font-size:15px; font-weight:700; color:var(--navy);
-webkit-tap-highlight-color:transparent;
}
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-chev{
flex:0 0 auto; width:9px; height:9px;
border-right:2px solid var(--red); border-bottom:2px solid var(--red);
transform:rotate(45deg) translateY(-2px); transition:transform .25s;
}
.faq-item[open] .faq-chev{ transform:rotate(-135deg) translateY(-1px) }
.faq-ans{ padding:0 18px 17px; font-size:14.2px; line-height:1.8; color:var(--mut) }
.faq-ans a{ color:var(--red); font-weight:600 }
@media (max-width:760px){
.faq-item > summary{ padding:13px 15px; font-size:14.2px }
.faq-ans{ padding:0 15px 15px; font-size:13.6px }
}
/* ---------- 5. Order tracking timeline ---------- */
.tl{ position:relative; padding-left:8px }
.tl-row{ position:relative; display:flex; gap:16px; padding:0 0 22px 26px }
.tl-row::before{
content:""; position:absolute; left:7px; top:16px; bottom:-6px; width:2px; background:var(--line);
}
.tl-row:last-child::before{ display:none }
.tl-dot{
position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%;
background:var(--card); border:2px solid var(--line); z-index:2;
}
.tl-row.done .tl-dot{ background:#18a864; border-color:#18a864 }
.tl-row.done::before{ background:#18a864 }
.tl-row > div{ display:flex; flex-direction:column; gap:2px }
.tl-row b{ font-size:14.5px; color:var(--mut); font-weight:700 }
.tl-row.done b{ color:var(--navy) }
.tl-row i{ font-style:normal; font-size:12.8px; color:var(--mut) }
/* ---------- 6. Analytics chart ---------- */
.an-chart{
display:flex; align-items:flex-end; gap:2px; height:150px;
padding:10px 8px; border-radius:12px; background:rgba(11,29,77,.04);
}
.an-bar{ flex:1; height:100%; display:flex; align-items:flex-end; min-width:2px }
.an-bar span{
display:block; width:100%; border-radius:3px 3px 0 0;
background:linear-gradient(180deg,#ec1f4d,#8d0b2a); transition:filter .2s;
}
.an-bar:hover span{ filter:brightness(1.25) }
[data-theme="dark"] .an-chart{ background:rgba(255,255,255,.05) }
/* =========================================================================
v31 — Header ka pakka layout, footer, coupon banner
Yeh block sabse aakhir me hai, isliye purane sabhi niyam se upar rehta hai.
========================================================================= */
/* ---------- 1. HEADER: do line ka saaf layout ----------
Line 1 : logo | search | actions
Line 2 : menu bar (desktop), mobile par full-screen drawer */
header.site .container{
display:flex !important; flex-wrap:wrap !important; align-items:center;
height:auto !important; min-height:0 !important;
gap:14px 16px; padding:10px 20px;
}
header.site .logo{ order:1 !important; flex:0 0 auto !important; margin:0 !important }
header.site .hdr-search{
order:2 !important; flex:1 1 240px !important; max-width:520px !important;
margin:0 !important; min-width:0;
}
header.site .hdr-actions{
order:3 !important; flex:0 0 auto !important; margin-left:auto !important;
}
@media (min-width:1001px){
/* Menu poori chaudai me, apni alag line par — B2B portal jaisa */
header.site nav.main{
order:4 !important; flex:1 0 100% !important; width:100% !important;
display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
align-items:center; justify-content:center !important;
gap:2px; margin:0 !important; padding:4px 0 2px !important;
border-top:1px solid var(--line);
max-height:none !important; overflow:visible !important;
}
header.site nav.main > a,
header.site nav.main .has-sub > a{ padding:9px 13px !important; font-size:14.5px !important }
header.site .navtoggle{ display:none !important }
header.site nav.main .nav-top,
header.site nav.main .nav-foot{ display:none !important }
header.site nav.main .nav-scroll{
display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
width:auto !important; flex:0 1 auto !important; min-height:0 !important;
justify-content:center !important;
padding:0 !important; overflow:visible !important; gap:2px;
}
}
@media (max-width:1000px){
header.site .container{ padding:9px 16px; gap:10px 12px }
header.site .hdr-search{ order:4 !important; flex:1 0 100% !important; max-width:none !important }
header.site .logo{ font-size:17.5px }
header.site .logo img{ height:34px }
}
@media (max-width:400px){
header.site .container{ padding:8px 12px }
.hdr-search{ padding:5px 5px 5px 12px }
.hs-go{ padding:7px 11px; font-size:12px }
}
/* ---------- 2. FOOTER: bharose ki patti, bilkul beech me ---------- */
.foot-trust{
display:flex !important; flex-wrap:wrap; justify-content:center !important; align-items:center;
gap:10px 14px; padding:18px 0 20px;
border-top:1px solid rgba(255,255,255,.09);
}
.foot-trust span{
display:inline-flex; align-items:center; gap:8px;
font-size:12.4px; font-weight:600; color:#c2cdec; letter-spacing:.2px;
padding:8px 15px; border-radius:99px;
background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);
}
.foot-trust svg{ width:15px; height:15px; flex:0 0 auto; fill:none; stroke:#7fe3ad; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:760px){
.foot-trust{ gap:8px; padding:14px 0 16px }
.foot-trust span{ font-size:11.5px; padding:7px 12px; gap:6px }
.foot-trust svg{ width:13px; height:13px }
}
/* Timing wale card — teeno barabar, saaf */
.fh-meta i{ white-space:normal !important }
@media (max-width:760px){
.fh-meta li{ flex:1 1 100% !important }
}
/* ---------- 3. COUPON BANNER (apne aap banta hua) ---------- */
.cp-wrap{ display:flex; flex-direction:column; gap:12px }
.cp-card{
position:relative; display:block; width:100%; border:0; padding:0; cursor:pointer;
border-radius:18px; overflow:hidden; background:transparent;
transition:transform .25s cubic-bezier(.2,.9,.3,1.1), box-shadow .25s, opacity .3s;
-webkit-tap-highlight-color:transparent;
}
.cp-card svg{ display:block; width:100%; height:auto }
.cp-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(8,18,52,.22) }
.cp-card:active{ transform:translateY(-1px) }
.cp-card.done{ opacity:.55; cursor:default; transform:none }
.cp-card.done::after{
content:"APPLIED"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:rgba(6,14,42,.55); color:#fff; font-weight:800; letter-spacing:3px; font-size:15px;
}
.cp-note{ font-size:12.5px; color:var(--mut); text-align:center; margin:2px 0 0 }
@media (min-width:900px){
.cp-wrap.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
}
/* Ticket ke kate hue kone page ke rang me ghul jaate hain (dark mode me bhi) */
.cp-hole{ fill:var(--bg) !important }
.cp-lg{ display:block } .cp-sm{ display:none }
@media (max-width:700px){ .cp-lg{ display:none } .cp-sm{ display:block } }
/* ---------- Home: B2B assurance band ---------- */
.assure{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.assure-item{
padding:24px 22px; border-radius:18px;
background:var(--glass); border:1px solid var(--glassb);
backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
transition:transform .3s cubic-bezier(.2,.8,.3,1.1), box-shadow .3s;
}
.assure-item:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(8,18,52,.14) }
.as-ic{
display:flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:13px; margin-bottom:15px;
background:linear-gradient(135deg, rgba(213,16,63,.14), rgba(11,29,77,.12));
color:var(--red);
}
.as-ic svg{ width:21px; height:21px }
.assure-item h3{ margin:0 0 8px; font-size:15.5px; color:var(--navy); line-height:1.4; font-weight:700 }
.assure-item p{ margin:0; font-size:13.6px; line-height:1.72; color:var(--mut) }
@media (max-width:1000px){ .assure{ grid-template-columns:1fr 1fr; gap:14px } }
@media (max-width:620px){
.assure{ grid-template-columns:1fr; gap:12px }
.assure-item{ padding:18px 18px }
.as-ic{ width:38px; height:38px; border-radius:11px; margin-bottom:12px }
.assure-item h3{ font-size:14.8px }
.assure-item p{ font-size:13.2px }
}
/* Hero ki trust line — bina tick ke, saaf */
.hero-trust span{ font-weight:600 }
/* ---------- Mobile par 3D block thoda chhota ---------- */
@media (max-width:760px){
.h3d-stage{ height:326px !important; --bw:min(60vw,222px) !important; --bh:270px !important; --bd:min(50vw,182px) !important }
.h3d-in{ padding:15px 14px }
.h3d-eyebrow{ font-size:9.5px; margin-bottom:10px }
.h3d-head{ font-size:14.5px !important; margin-bottom:10px }
.h3d-row{ font-size:11.4px } .h3d-row b{ font-size:12.2px }
.h3d-list li{ font-size:11.4px; padding-left:20px }
.h3d-list{ gap:8px }
.h3d-links{ gap:6px } .h3d-links a{ padding:7px 9px; font-size:11.6px }
.h3d-cta{ padding:9px 12px; font-size:12px; margin-top:10px }
.h3d-brand{ font-size:15px }
.h3d-chip{ padding:6px 10px } .h3d-chip b{ font-size:12px } .h3d-chip span{ font-size:9px }
}
@media (max-width:430px){
.h3d-stage{ height:296px !important; --bw:58vw !important; --bh:246px !important; --bd:48vw !important }
.h3d-head{ font-size:13.6px !important }
}
/* =========================================================================
v32 — Premium stats panel (mobile par app jaisa)
========================================================================= */
.statx{
position:relative; overflow:hidden;
border-radius:26px; padding:30px 30px 34px;
background:
radial-gradient(120% 130% at 100% 0%, rgba(213,16,63,.30) 0%, transparent 55%),
radial-gradient(110% 120% at 0% 100%, rgba(37,99,235,.28) 0%, transparent 55%),
linear-gradient(140deg,#0a1738 0%,#0d2154 48%,#101a3f 100%);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 26px 64px rgba(6,14,42,.30);
}
.statx::before{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
mask-image:radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 78%);
}
.statx-head{
position:relative; z-index:2; display:flex; align-items:center; gap:12px;
padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.10);
}
.statx-head b{ display:block; color:#fff; font-size:16.5px; font-weight:700; letter-spacing:.2px }
.statx-head i{ display:block; font-style:normal; color:#9dabd8; font-size:12.8px; margin-top:3px; line-height:1.5 }
.sx-live{
flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#41e08a;
box-shadow:0 0 0 0 rgba(65,224,138,.6); animation:sxPulse 2.4s infinite;
}
@keyframes sxPulse{ 70%{ box-shadow:0 0 0 10px rgba(65,224,138,0) } 100%{ box-shadow:0 0 0 0 rgba(65,224,138,0) } }
.statx-grid{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.sx-tile{
position:relative; overflow:hidden;
padding:22px 20px 20px; border-radius:20px;
background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
transition:transform .32s cubic-bezier(.2,.8,.3,1.1), box-shadow .32s, border-color .32s;
}
.sx-tile::after{
content:""; position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:3px 3px 0 0;
background:linear-gradient(90deg,#ec1f4d,#ffd166); opacity:.7; transform:scaleX(.3); transform-origin:left;
transition:transform .5s cubic-bezier(.2,.9,.3,1);
}
.sx-tile:hover{
transform:translateY(-5px);
border-color:rgba(255,255,255,.24);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 40px rgba(6,14,42,.34);
}
.sx-tile:hover::after{ transform:scaleX(1) }
.sx-ic{
display:flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:13px; margin-bottom:16px;
background:linear-gradient(140deg, rgba(255,209,102,.20), rgba(236,31,77,.18));
border:1px solid rgba(255,255,255,.14);
color:#ffd166;
}
.sx-ic svg{ width:20px; height:20px }
.statx .num{
font-size:38px; font-weight:800; line-height:1.05; letter-spacing:-.5px;
color:#ffffff; font-variant-numeric:tabular-nums;
background:linear-gradient(180deg,#ffffff 30%,#c9d6ff 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent;
}
.statx .lbl{ color:#e5ebff; font-size:14px; font-weight:600; margin-top:7px; letter-spacing:.1px }
.statx .sub{ color:#8f9dcb; font-size:11.8px; margin-top:4px; line-height:1.5 }
/* ---- Tablet ---- */
@media (max-width:1000px){
.statx{ padding:26px 22px 28px; border-radius:24px }
.statx-grid{ grid-template-columns:repeat(2,1fr); gap:13px }
.statx .num{ font-size:34px }
}
/* ---- Mobile: 2x2 dashboard, bilkul app jaisa ---- */
@media (max-width:760px){
.statx{ padding:20px 16px 22px; border-radius:22px }
.statx-head{ padding-bottom:16px; margin-bottom:18px; gap:10px }
.statx-head b{ font-size:15px }
.statx-head i{ font-size:11.8px }
.statx-grid{ grid-template-columns:repeat(2,1fr); gap:11px }
.sx-tile{ padding:16px 14px 15px; border-radius:17px }
.sx-tile:hover{ transform:none }
.sx-tile:active{ transform:scale(.97); transition:transform .12s }
.sx-tile::after{ left:14px; right:14px; transform:scaleX(1); opacity:.5 }
.sx-ic{ width:34px; height:34px; border-radius:11px; margin-bottom:11px }
.sx-ic svg{ width:17px; height:17px }
.statx .num{ font-size:27px }
.statx .lbl{ font-size:12.6px; margin-top:5px }
.statx .sub{ font-size:10.6px; margin-top:3px }
}
@media (max-width:400px){
.statx{ padding:17px 13px 19px }
.sx-tile{ padding:14px 12px 13px }
.statx .num{ font-size:24px }
.statx .lbl{ font-size:11.8px }
.statx .sub{ display:none } /* chhoti screen par sirf zaroori cheez */
}
@media (prefers-reduced-motion: reduce){
.sx-live{ animation:none }
.sx-tile, .sx-tile::after{ transition:none }
}
/* =========================================================================
v33 — Footer social, guest (bina login) system
========================================================================= */
/* ---------- Social follow buttons: dono jagah theek ---------- */
.foot-social{
display:flex !important; align-items:center; justify-content:center !important;
gap:14px; flex-wrap:wrap;
padding:20px 0 !important; border-top:1px solid rgba(255,255,255,.09);
}
.fs-lbl{
font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
color:#7f8ec4; flex:0 0 auto;
}
.fs-row{
display:flex !important; gap:10px; flex-wrap:wrap;
justify-content:center; width:auto !important; flex:0 0 auto !important;
}
.fs-btn{
flex:0 0 auto !important;
width:42px !important; height:42px !important; min-width:0 !important;
padding:0 !important; border-radius:12px;
display:flex !important; align-items:center; justify-content:center;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); color:#cfd8ff;
transition:transform .22s cubic-bezier(.2,.9,.3,1.2), background .22s, color .22s, border-color .22s;
}
.fs-btn svg{ width:19px; height:19px; fill:currentColor; display:block }
.fs-btn:hover{ transform:translateY(-3px); color:#fff; border-color:transparent }
@media (max-width:760px){
.foot-social{ flex-direction:column !important; gap:11px; padding:18px 0 !important }
.fs-row{ gap:9px }
.fs-btn{ width:44px !important; height:44px !important; border-radius:13px }
.fs-btn svg{ width:20px; height:20px }
}
@media (max-width:360px){
.fs-btn{ width:40px !important; height:40px !important }
}
/* Sidebar me owner-only section alag dikhe */
.side-sep{
margin:14px 0 6px; padding:0 14px;
font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
color:rgba(255,255,255,.38);
}
.admin-side a.owner{
border-left:3px solid #ffd166 !important;
background:rgba(255,209,102,.09);
}
.admin-side a.owner.act{ background:rgba(255,209,102,.20) }
@media(max-width:1000px){
.side-sep{ display:none }
.admin-side a.owner{ border-left:none !important; border-bottom:3px solid #ffd166 !important }
}
.btn.danger{ background:linear-gradient(135deg,#e01a3c,#a30d2a) !important; color:#fff !important }
.btn.danger:hover{ box-shadow:0 12px 26px rgba(213,16,63,.4) }
/* ---------- Guest (bina login) ka Saved page ---------- */
.gst-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 22px }
.gst-tab{
border:1px solid var(--glassb); background:var(--glass); color:var(--mut);
padding:10px 18px; border-radius:99px; cursor:pointer;
font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:8px;
transition:background .22s, color .22s, border-color .22s, transform .2s;
}
.gst-tab:hover{ transform:translateY(-2px) }
.gst-tab.on{ background:var(--navy); color:#fff; border-color:transparent }
.gst-n{
min-width:22px; height:22px; padding:0 6px; border-radius:99px;
background:rgba(11,29,77,.10); color:var(--navy);
display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
}
.gst-tab.on .gst-n{ background:rgba(255,255,255,.22); color:#fff }
.gst-pane{ display:none } .gst-pane.on{ display:block }
.gst-row{
display:flex; align-items:center; gap:14px; padding:15px 18px;
border-bottom:1px solid var(--line);
}
.gst-row:last-child{ border-bottom:0 }
.gr-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.gr-t a{ color:var(--navy); font-weight:700; font-size:14.8px; line-height:1.4 }
.gr-t a:hover{ color:var(--red) }
.gr-t span{ font-size:12.2px; color:var(--mut) }
.gr-q{ display:flex; align-items:center; gap:4px; flex:0 0 auto }
.gr-q button{
width:30px; height:30px; border-radius:9px; border:1px solid var(--line);
background:var(--card); color:var(--navy); cursor:pointer; font-size:16px; line-height:1;
}
.gr-q button:hover{ background:var(--navy); color:#fff; border-color:transparent }
.gr-q b{ min-width:28px; text-align:center; color:var(--navy) }
.gr-x{
flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:0; cursor:pointer;
background:transparent; color:var(--mut); font-size:21px; line-height:1;
}
.gr-x:hover{ background:rgba(213,16,63,.10); color:var(--red) }
.gst-blank{ text-align:center; padding:52px 20px }
.gb-ic{
width:66px; height:66px; margin:0 auto 16px; border-radius:20px;
display:flex; align-items:center; justify-content:center; font-size:29px;
background:linear-gradient(140deg, rgba(213,16,63,.12), rgba(11,29,77,.10)); color:var(--red);
}
.gst-blank h3{ margin:0 0 8px; color:var(--navy); font-size:18px }
.gst-blank p{ margin:0 auto 20px; max-width:420px; color:var(--mut); font-size:14.2px; line-height:1.75 }
.gst-card .thumb{ height:150px }
@media (max-width:600px){
.gst-tab{ padding:9px 14px; font-size:13px; flex:1 1 auto; justify-content:center }
.gst-row{ padding:13px 14px; gap:10px }
.gr-t a{ font-size:14px }
.gst-blank{ padding:40px 14px }
}
/* Tool page ki "Save this work" patti */
.tsave{
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
margin:22px 0 0; padding:16px 20px; border-radius:16px;
background:var(--glass); border:1px dashed var(--glassb);
}
.ts-txt{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.ts-txt b{ color:var(--navy); font-size:15px }
.ts-txt span{ color:var(--mut); font-size:12.8px; line-height:1.5 }
.ts-act{ display:flex; gap:9px; flex-wrap:wrap; flex:0 0 auto }
@media (max-width:600px){
.tsave{ padding:14px 16px; gap:12px }
.ts-act{ width:100% } .ts-act .btn{ flex:1 1 0; text-align:center }
}
/* =========================================================================
v34 — Tool ka dil (product jaisa), save bar
========================================================================= */
.tool-wrap{ position:relative }
.tool-wrap .tool-card{ display:block; height:100% }
.fav-btn.tool-heart{
position:absolute; top:12px; right:12px; z-index:6;
width:38px; height:38px; border-radius:50%;
display:flex; align-items:center; justify-content:center; cursor:pointer;
border:1px solid var(--glassb); background:var(--card); color:#c8cee0;
box-shadow:0 6px 18px rgba(8,18,52,.14);
transition:transform .22s cubic-bezier(.2,.9,.3,1.3), color .22s, background .22s, box-shadow .22s;
}
.fav-btn.tool-heart svg{ fill:currentColor; display:block }
.fav-btn.tool-heart:hover{ transform:scale(1.12); color:var(--red) }
.fav-btn.tool-heart.on{ color:#fff; background:linear-gradient(135deg,#ec1f4d,#b60f36); border-color:transparent }
.fav-btn.tool-heart.big{
position:static; width:44px; height:44px; flex:0 0 auto; box-shadow:none;
}
.fav-btn.pop{ animation:favPop .45s cubic-bezier(.2,.9,.3,1.4) }
@keyframes favPop{ 0%{transform:scale(1)} 45%{transform:scale(1.32)} 100%{transform:scale(1)} }
/* Save bar — hamesha tool ke SABSE NEECHE */
.tsave{
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
margin:20px 0 0 !important; padding:18px 22px; border-radius:18px;
background:linear-gradient(120deg, rgba(213,16,63,.07), rgba(11,29,77,.07));
border:1px dashed var(--glassb);
}
.ts-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 240px }
.ts-txt b{ color:var(--navy); font-size:15.5px }
.ts-txt span{ color:var(--mut); font-size:12.9px; line-height:1.55 }
.ts-act{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; flex:0 0 auto }
@media (max-width:700px){
.tsave{ padding:15px 16px; gap:13px }
.ts-act{ width:100% }
.ts-act .btn{ flex:1 1 0; text-align:center }
.fav-btn.tool-heart.big{ width:42px; height:42px }
}
@media (max-width:760px){
.fav-btn.tool-heart{ top:10px; right:10px; width:36px; height:36px }
}
/* =========================================================================
v36 — Save wala dil: har jagah, har theme me SAAF dikhe
Pehle safed card par safed dil ghul jaata tha, aur hover/3D effect me
chhup bhi jaata tha. Ab wo hamesha ek thos, alag dikhne wala button hai.
========================================================================= */
.fav-btn,
.fav-btn.tool-heart{
position:absolute; top:11px; right:11px;
z-index:40 !important; /* har shine/overlay se upar */
width:38px; height:38px; padding:0;
border-radius:50%; cursor:pointer;
display:flex !important; align-items:center; justify-content:center;
/* Thos background — kisi bhi tasveer ya rang par saaf dikhta hai */
background:#ffffff !important;
border:2px solid rgba(11,29,77,.14) !important;
color:#c2c9de !important; /* khaali dil — halka slate */
box-shadow:0 4px 14px rgba(8,18,52,.20), 0 0 0 3px rgba(255,255,255,.55) !important;
opacity:1 !important; visibility:visible !important;
transition:transform .22s cubic-bezier(.2,.9,.3,1.3), color .2s, border-color .2s,
background .2s, box-shadow .2s;
}
.fav-btn svg, .fav-btn.tool-heart svg{ fill:currentColor !important; display:block; pointer-events:none }
/* Hover / touch — laal ho jaata hai, chhupta nahi */
.fav-btn:hover, .fav-btn:focus-visible,
.fav-btn.tool-heart:hover, .fav-btn.tool-heart:focus-visible{
color:var(--red) !important;
border-color:rgba(213,16,63,.45) !important;
transform:scale(1.12);
box-shadow:0 8px 22px rgba(213,16,63,.28), 0 0 0 3px rgba(255,255,255,.7) !important;
}
.fav-btn:focus-visible{ outline:3px solid rgba(213,16,63,.45); outline-offset:2px }
/* Save ho chuka — bhara hua laal dil */
.fav-btn.on, .fav-btn.tool-heart.on{
background:linear-gradient(135deg,#ec1f4d,#b60f36) !important;
border-color:rgba(255,255,255,.85) !important;
color:#ffffff !important;
box-shadow:0 8px 22px rgba(213,16,63,.42), 0 0 0 3px rgba(255,255,255,.6) !important;
}
.fav-btn.on:hover, .fav-btn.tool-heart.on:hover{
color:#ffffff !important;
box-shadow:0 10px 26px rgba(213,16,63,.52), 0 0 0 3px rgba(255,255,255,.7) !important;
}
/* ---- DARK MODE ---- */
[data-theme="dark"] .fav-btn,
[data-theme="dark"] .fav-btn.tool-heart{
background:#1b2340 !important;
border-color:rgba(255,255,255,.24) !important;
color:#98a2cc !important;
box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 0 3px rgba(10,15,32,.6) !important;
}
[data-theme="dark"] .fav-btn:hover,
[data-theme="dark"] .fav-btn.tool-heart:hover{
color:#ff5c7c !important;
border-color:rgba(255,92,124,.55) !important;
box-shadow:0 8px 22px rgba(0,0,0,.6), 0 0 0 3px rgba(10,15,32,.7) !important;
}
[data-theme="dark"] .fav-btn.on,
[data-theme="dark"] .fav-btn.tool-heart.on{
background:linear-gradient(135deg,#ff2e5c,#c01038) !important;
border-color:rgba(255,255,255,.5) !important;
color:#ffffff !important;
}
/* Tool page ka bada dil — patti ke andar, absolute nahi */
.fav-btn.tool-heart.big{
position:static !important; width:46px; height:46px; flex:0 0 auto;
}
/* 3D tilt / shine kabhi dil ko na dhake */
.is-home .p-card .fav-btn,
.is-home .p-wrap .fav-btn{ transform:translateZ(80px) }
.is-home .p-card:hover .fav-btn,
.is-home .p-wrap:hover .fav-btn{ transform:translateZ(80px) }
.card3d::before, .card3d::after{ pointer-events:none !important }
.p-card, .p-wrap, .tool-wrap{ overflow:visible }
.p-card .thumb-wrap{ overflow:visible }
@media (max-width:760px){
.fav-btn, .fav-btn.tool-heart{ top:9px; right:9px; width:36px; height:36px; border-width:2px !important }
.fav-btn.tool-heart.big{ width:44px; height:44px }
}
@media (hover:none){
/* Touch device par hover ka koi bharosa nahi — dil hamesha poora saaf */
.fav-btn, .fav-btn.tool-heart{
box-shadow:0 4px 14px rgba(8,18,52,.24), 0 0 0 3px rgba(255,255,255,.75) !important;
}
}
/* =========================================================================
v39 — Tool card ki chaudai aur dil ki jagah
---------------------------------------------------------------------
DIKKAT: `.p-wrap` ek flex box hai, aur uske andar `flex:1; width:100%`
sirf `.p-card` ko milta tha. Tool ka card (`.tool-card`) us niyam me nahi
aata tha, isliye wo sikud kar chhota ho jaata tha — aur dil, jo wrap ke
daayen kinare par lagta hai, card se bahut door chala jaata tha.
FIX: har tarah ke card ko poori chaudai. Ab dil hamesha card ke hi
upar-daayen kone me baithta hai.
========================================================================= */
.p-wrap, .tool-wrap{
display:flex !important;
position:relative !important;
width:100%;
}
.p-wrap > .p-card,
.p-wrap > .tool-card,
.p-wrap > .card3d,
.tool-wrap > .tool-card,
.tool-wrap > .card3d{
flex:1 1 auto !important;
width:100% !important;
min-width:0;
box-sizing:border-box;
}
/* Ek line ke saare card barabar oonchai ke */
.grid > .p-wrap,
.grid > .tool-wrap{ align-self:stretch }
.tool-wrap > .tool-card{
display:flex !important;
flex-direction:column;
height:100%;
}
.tool-wrap > .tool-card > b{ display:block }
.tool-wrap > .tool-card > span{ margin-top:auto }
/* Dil ab card ke hi kone me — thoda andar, taaki kata hua na lage */
.fav-btn.tool-heart{
top:12px !important;
right:12px !important;
width:36px !important;
height:36px !important;
}
.fav-btn.tool-heart.big{
position:static !important;
width:44px !important;
height:44px !important;
top:auto !important;
right:auto !important;
}
@media (max-width:760px){
.fav-btn.tool-heart{ top:10px !important; right:10px !important; width:34px !important; height:34px !important }
.fav-btn.tool-heart.big{ width:42px !important; height:42px !important }
}
/* Card ka andar ka text dil ke neeche na chhupe */
.tool-wrap > .tool-card > .cat-ico{ margin-right:44px }
/* =====================================================================
v42 — CHECKBOX / TOGGLE, ADMIN SEARCH, MENU JO JALDI BAND NA HO,
GAADHA (kam transparent) GLASS MENU
===================================================================== */
/* ---------- 1. CHECKBOX: dekhte hi pata chale ki tick hai ya nahi ---------- */
.chk{
display:inline-flex; align-items:center; gap:10px;
cursor:pointer; user-select:none;
font-size:14px; font-weight:600; color:var(--ink);
padding:7px 12px 7px 8px; border-radius:12px;
border:1px solid transparent; transition:background .18s ease,border-color .18s ease;
line-height:1.35;
}
.chk:hover{ background:rgba(11,29,77,.05); }
[data-theme="dark"] .chk:hover{ background:rgba(255,255,255,.05); }
/* asli checkbox chhupa hua, par keyboard ke liye zinda */
.chk>input[type="checkbox"],
.chk>input[type="radio"]{
position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none;
}
/* dikhne wala dabba */
.chk>.bx{
flex:0 0 auto; position:relative;
width:24px; height:24px; border-radius:8px;
background:#fff; border:2px solid #9aa6c9;
box-shadow:inset 0 1px 2px rgba(11,29,77,.10);
transition:background .16s ease,border-color .16s ease,transform .12s ease;
}
[data-theme="dark"] .chk>.bx{ background:#131a35; border-color:#4c5a8c; }
.chk>.bx::after{ /* tick ka nishaan */
content:""; position:absolute; left:7px; top:3px;
width:6px; height:12px;
border:solid #fff; border-width:0 3px 3px 0;
transform:rotate(45deg) scale(.4); opacity:0;
transition:transform .16s cubic-bezier(.2,1.4,.5,1),opacity .12s ease;
}
.chk>input:checked+.bx{
background:#0f9d58; border-color:#0f9d58;
box-shadow:0 3px 10px rgba(15,157,88,.34);
}
.chk>input:checked+.bx::after{ transform:rotate(45deg) scale(1); opacity:1; }
.chk>input:focus-visible+.bx{ outline:3px solid rgba(224,26,60,.35); outline-offset:2px; }
.chk>input:disabled+.bx{ opacity:.45; }
.chk:active>.bx{ transform:scale(.92); }
/* saath me likha hua haal: ON / OFF */
.chk>.bx+span::after{ content:""; }
.chk .chk-on,.chk .chk-off{
font-size:11.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
padding:3px 9px; border-radius:999px; margin-left:2px;
}
.chk .chk-off{ background:rgba(120,130,160,.16); color:#66708f; }
.chk .chk-on { background:rgba(15,157,88,.14); color:#0f7a45; display:none; }
[data-theme="dark"] .chk .chk-on{ color:#5fd99b; }
.chk>input:checked~.chk-on { display:inline-block; }
.chk>input:checked~.chk-off{ display:none; }
/* radio gol hota hai */
.chk.radio>.bx{ border-radius:50%; }
.chk.radio>.bx::after{
left:5px; top:5px; width:10px; height:10px; border:none;
border-radius:50%; background:#fff; transform:scale(.3);
}
.chk.radio>input:checked+.bx{ background:var(--navy); border-color:var(--navy); box-shadow:0 3px 10px rgba(11,29,77,.30); }
.chk.radio>input:checked+.bx::after{ transform:scale(1); }
/* switch wala roop: