/*
Theme Name: TopUp Lite
Theme URI: https://example.com/topuplite
Author: TopUp Lite
Description: A very light WordPress theme for mobile recharge plans. Compact plan rows with cost per day, instant filters and sorting, automatic dark mode. One CSS file, one tiny deferred script, no jQuery, no web fonts. Image cards with lazy loading.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: topuplite
*/
:root{--bg:#fbfaf6;--sf:#fff;--ink:#13211b;--mute:#5d6b64;--line:#e3e7e1;--a:#0b8f6a;--ai:#fff;--soft:#e8f5ef;--hot:#ff6a4a;--r:12px}
@media(prefers-color-scheme:dark){:root{--bg:#0d1411;--sf:#141d19;--ink:#e9f1ed;--mute:#9aaaa2;--line:#25322c;--a:#2ec79a;--ai:#06251b;--soft:#173028;--hot:#ff8466}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto}
a{color:var(--a);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .6em;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,5vw,2.7rem);font-weight:750}
h2{font-size:clamp(1.3rem,3.2vw,1.7rem);font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid var(--a);outline-offset:2px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 18px}
.narrow{max-width:780px}
.pad{padding-top:26px;padding-bottom:30px}
.sr,.screen-reader-text{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:var(--sf);padding:8px 12px;z-index:99}
.hp{position:absolute;left:-9999px}
/* header */
.hd{background:var(--sf);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.admin-bar .hd{top:32px}
@media(max-width:782px){.admin-bar .hd{top:46px}}
@media(max-width:600px){.admin-bar .hd{top:0}}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:9px;color:var(--a);font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand:hover{text-decoration:none}.brand svg{width:28px;height:28px}.brand span{color:var(--ink);white-space:nowrap}.brand img{max-height:36px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav a{color:var(--mute);padding:8px 12px;border-radius:8px;display:block;font-weight:600;font-size:.94rem}
.nav a:hover,.nav .current-menu-item>a{background:var(--soft);color:var(--a);text-decoration:none}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:0}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:22px;height:2px;background:var(--ink);margin:auto;position:relative;content:""}
.menu-btn span::before{position:absolute;top:-7px;left:0}.menu-btn span::after{position:absolute;top:7px;left:0}
@media(max-width:760px){
.menu-btn{display:block}
.nav{display:none;position:absolute;left:0;right:0;top:58px;background:var(--sf);padding:6px 18px 14px;border-bottom:1px solid var(--line)}
.nav.open{display:block}.nav ul{flex-direction:column}
}
/* hero */
.hero{padding:34px 0 10px}
.hero-g{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.eyebrow{display:inline-block;background:var(--soft);color:var(--a);font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.hero h1{margin-bottom:.4em}
.sub{color:var(--mute);max-width:560px;font-size:1.05rem;margin-bottom:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.btn.ghost{background:transparent;color:var(--a);border:2px solid var(--a);padding:9px 18px}
.proof{color:var(--mute);font-size:.92rem;margin:0}.proof b{color:var(--ink)}
.hero-i{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.08);aspect-ratio:11/8;background:var(--soft)}
.hero-i img,.hero-i svg{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:800px){.hero-g{grid-template-columns:1fr}.hero-i{order:-1;aspect-ratio:16/9}}
.ops-s{padding:14px 0 0}
.ops{display:flex;flex-wrap:wrap;gap:10px}
.op{display:inline-flex;align-items:center;gap:8px;background:var(--sf);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:999px;padding:8px 16px;font-weight:700;color:var(--ink)}
.op:hover{text-decoration:none;border-color:var(--c)}.op span{background:var(--soft);border-radius:999px;font-size:.78rem;padding:1px 8px;color:var(--mute)}
/* sections */
.sec{padding:26px 0}
.sec.alt{background:var(--soft);padding:36px 0;margin-top:14px}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:14px}.sec-h h2{margin:0}.sec-h a{font-weight:700;font-size:.95rem}
/* finder */
.finder{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.fgrp{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.flab{font-size:.8rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;min-width:68px}
.pill{border:1px solid var(--line);background:var(--sf);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer}
.pill:hover{border-color:var(--a)}
.pill[aria-pressed=true]{background:var(--a);border-color:var(--a);color:var(--ai)}
.fbar{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;font-size:.9rem;color:var(--mute)}
.fbar select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 8px;margin-left:6px}
.link{background:none;border:0;color:var(--a);font:inherit;font-weight:700;cursor:pointer;padding:0}
/* plan cards */
.pls{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.pl{position:relative;display:flex;flex-direction:column;background:var(--sf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .15s,transform .15s}
.pl:hover{border-color:var(--c,var(--a));box-shadow:0 8px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.pl-a{position:absolute;inset:0;z-index:2}
.pl-img{position:relative;aspect-ratio:16/9;background:var(--soft);border-bottom:3px solid var(--c,var(--a));color:var(--c,var(--a))}
.pl-img img,.pl-img svg,.card-i img,.card-i svg{width:100%;height:100%;object-fit:cover;display:block}
.pl-op{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:#13211b;font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--a));display:inline-block}
.bdg{position:absolute;right:10px;top:10px;background:var(--hot);color:#fff;font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:999px}
.pl-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.pl-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pl-price{font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-cpd{font-weight:800;color:var(--a);font-variant-numeric:tabular-nums}.pl-cpd small{color:var(--mute);font-weight:600}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{background:var(--soft);border-radius:7px;padding:3px 9px;font-size:.82rem;font-weight:600}
.empty{background:var(--sf);border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;color:var(--mute)}
/* steps, faq, cards */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;counter-reset:s}
.steps li{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 16px 58px;position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:14px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--a);color:var(--ai);font-weight:800;display:grid;place-items:center}
.steps b{display:block;margin-bottom:2px}.steps span{color:var(--mute);font-size:.94rem}
details{background:var(--sf);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:8px}
summary{cursor:pointer;font-weight:700}details[open] summary{margin-bottom:6px}details p{margin:0;color:var(--mute)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card-i{display:block;aspect-ratio:16/9;background:var(--soft);color:var(--a)}
.card-b{padding:14px 16px 16px}
.card h3 a{color:var(--ink)}.card p{color:var(--mute);font-size:.93rem;margin:0}
.meta{color:var(--mute);font-size:.82rem;margin-bottom:4px}
/* inner pages */
.page-h{background:var(--soft);border-bottom:1px solid var(--line);padding:26px 0;border-top:3px solid var(--c,var(--a))}
.page-h h1{margin:0;font-size:clamp(1.5rem,4vw,2.1rem)}.page-h p{color:var(--mute);margin:8px 0 0}
.crumb{font-size:.84rem;color:var(--mute);margin-bottom:6px}.crumb a{color:var(--mute)}.crumb span{opacity:.6}
.entry{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.entry h2,.entry h3{margin-top:1.4em}.entry h2:first-child{margin-top:0}
.entry img{border-radius:10px}
.entry img.lead{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:16px}
.entry table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 1.4em;word-break:break-word}
.entry th,.entry td{padding:10px 13px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.entry th{background:var(--soft);width:38%}.entry tr:last-child>*{border-bottom:0}
.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}.aligncenter{display:block;margin:0 auto 1em}
.wp-caption{max-width:100%}.wp-caption-text{font-size:.85rem;color:var(--mute)}
.upd{color:var(--mute);font-size:.85rem;margin:0 0 12px}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 18px}
.spec div{background:var(--soft);border-radius:10px;padding:10px 12px}.spec .hi{background:var(--a);color:var(--ai)}
.spec small{display:block;opacity:.75;font-weight:600;font-size:.8rem}.spec b{font-size:1.1rem}
.tick{list-style:none;padding:0}.tick li{padding-left:24px;position:relative;margin-bottom:5px}
.tick li::before{content:"";position:absolute;left:4px;top:.4em;width:6px;height:11px;border:solid var(--a);border-width:0 2px 2px 0;transform:rotate(40deg)}
.go{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:22px 0 4px}.go p{margin:0 0 12px;color:var(--mute);font-size:.93rem}
.btn{display:inline-block;background:var(--a);color:var(--ai);font-weight:800;border-radius:10px;padding:11px 20px;text-align:center;border:0;cursor:pointer;font:inherit;font-weight:800}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.cta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-top:20px}
.cta b{display:block}.cta span{color:var(--mute);font-size:.93rem}
.mt{margin-top:28px}
.ad{margin:20px 0;min-height:250px;text-align:center;overflow:hidden}.ad small{display:block;color:var(--mute);font-size:.75rem;margin-bottom:4px}
.pagination{margin:24px 0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pagination .page-numbers{background:var(--sf);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:700;color:var(--ink)}
.pagination .current{background:var(--a);border-color:var(--a);color:var(--ai)}
.search-form{display:flex;gap:8px}.search-form label{flex:1}
.search-field,.cf input[type=text],.cf input[type=email],.cf textarea,.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink)}
.search-submit,.comment-respond input[type=submit]{background:var(--a);color:var(--ai);border:0;border-radius:10px;padding:0 18px;font-weight:800;cursor:pointer;font:inherit}
.comment-respond input[type=submit]{padding:10px 20px}
.comments{margin-top:22px}.clist{list-style:none;padding:0}.comment-body{background:var(--sf);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px}
.cf-n{border-radius:10px;padding:10px 14px;font-weight:600}.cf-n.ok{background:var(--soft);color:var(--a)}.cf-n.bad{background:#fdeaea;color:#a11d1d}
/* footer */
.ft{background:var(--sf);border-top:1px solid var(--line);padding:34px 0 18px;margin-top:34px;font-size:.92rem;color:var(--mute)}
.ft-g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.ft-brand{font-weight:800;font-size:1.1rem;color:var(--ink)}
.ft h4{color:var(--ink);margin-bottom:8px;font-size:.95rem}
.ft ul{list-style:none;padding:0;margin:0}.ft li{margin-bottom:5px}.ft a{color:var(--mute)}.ft a:hover{color:var(--a)}
.ft-note{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;font-size:.84rem}.ft-note p{margin:0 0 6px}
@media(max-width:700px){.ft-g{grid-template-columns:1fr}.flab{min-width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* guide / post page */
.post-h h1{max-width:760px}
.pm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--mute);font-size:.88rem;margin:12px 0 0!important}
.chip{background:var(--a);color:var(--ai);font-weight:800;font-size:.76rem;padding:3px 11px;border-radius:999px}
.lead-f{margin:0 0 18px;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--soft);color:var(--a)}
.lead-f img,.lead-f svg{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.post-body{font-size:1.06rem;line-height:1.8;padding:26px 28px}
.post-body h2{font-size:1.45rem;margin:1.7em 0 .5em;padding-top:.2em}
.post-body h3{font-size:1.15rem;margin:1.4em 0 .4em}
.post-body p,.post-body ul,.post-body ol{margin:0 0 1.1em}
.post-body ul,.post-body ol{padding-left:1.4em}.post-body li{margin-bottom:.35em}
.post-body li::marker{color:var(--a);font-weight:800}
.post-body a{text-decoration:underline;text-underline-offset:2px}
.post-body blockquote{margin:1.3em 0;padding:12px 18px;border-left:4px solid var(--a);background:var(--soft);border-radius:0 10px 10px 0}
.post-body figure{margin:1.3em 0}.post-body figcaption{font-size:.85rem;color:var(--mute);text-align:center;margin-top:6px}
.note{margin-top:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;font-size:.9rem;color:var(--mute)}
@media(max-width:600px){.post-body{padding:18px 16px;font-size:1rem}}