/*
Theme Name: TopUpBari
Theme URI: https://topupbari.rcymut.xyz/
Author: TopUpBari
Description: Clean, mobile-first gaming top-up storefront. Phase 1 visual design and dynamic WordPress content; payment/API integration intentionally excluded.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: topupbari
*/
:root{--tb-primary:#ff5b12;--tb-primary-dark:#e94c08;--tb-ink:#101828;--tb-muted:#667085;--tb-line:#e8edf3;--tb-bg:#f5f7fa;--tb-card:#fff;--tb-radius:16px;--tb-shadow:0 8px 28px rgba(16,24,40,.055)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--tb-bg);color:var(--tb-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}.tb-shell{max-width:1180px;margin:0 auto;background:#fff;min-height:100vh;box-shadow:0 0 45px rgba(16,24,40,.035)}.tb-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--tb-line)}.tb-header-inner{max-width:1180px;margin:auto;min-height:76px;padding:12px 24px;display:flex;align-items:center;gap:28px}.tb-brand{display:flex;align-items:center;gap:11px;min-width:190px}.tb-brand img{width:43px;height:43px;object-fit:contain;border-radius:12px}.tb-brand-name{font-weight:900;font-size:21px;letter-spacing:-.7px;line-height:1.1}.tb-brand-name span{color:var(--tb-primary)}.tb-brand-tag{color:#98a2b3;font-size:9px;letter-spacing:1.8px;font-weight:800;margin-top:4px}.tb-nav{display:flex;align-items:center;gap:22px;flex:1}.tb-nav a{color:#475467;font-size:13px;font-weight:700}.tb-nav a:hover,.tb-nav a.current{color:var(--tb-primary)}.tb-header-actions{display:flex;align-items:center;gap:10px}.tb-icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--tb-line);border-radius:12px;background:#fff;color:#344054;cursor:pointer}.tb-btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 17px;border-radius:11px;background:var(--tb-primary);color:white;font-weight:800;cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 4px 12px rgba(255,91,18,.16)}.tb-btn:hover{background:var(--tb-primary-dark);transform:translateY(-1px)}.tb-btn-outline{background:#fff;color:#344054;border:1px solid var(--tb-line);box-shadow:none}.tb-btn-outline:hover{background:#f9fafb;color:var(--tb-ink)}.tb-btn-sm{padding:9px 12px;font-size:12px;border-radius:9px}.tb-main{padding:22px 24px 48px}.tb-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:24px;min-height:245px;padding:32px 38px;border-radius:22px;background:linear-gradient(115deg,#101827 0%,#132c4b 60%,#6b2d18 100%);color:#fff}.tb-hero:after{content:"";position:absolute;z-index:-1;width:360px;height:360px;border-radius:50%;right:-90px;top:-150px;background:radial-gradient(circle,rgba(255,105,36,.4),transparent 68%)}.tb-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#ffb18a;font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.tb-eyebrow:before{content:"";width:20px;height:2px;background:currentColor}.tb-hero h1{font-size:clamp(28px,4.2vw,45px);line-height:1.08;letter-spacing:-1.5px;margin:12px 0;font-weight:950;max-width:580px}.tb-hero p{color:#d0d5dd;max-width:480px;margin:0 0 22px;font-size:14px}.tb-hero-actions{display:flex;gap:10px;flex-wrap:wrap}.tb-hero-visual{min-height:160px;display:flex;align-items:center;justify-content:center;position:relative}.tb-hero-visual img{max-width:100%;max-height:200px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))}.tb-hero-art{width:220px;height:170px;border-radius:28px;background:linear-gradient(135deg,#172c46,#1d4266);border:1px solid #ffffff26;display:flex;align-items:center;justify-content:center;color:#ffb18a}.tb-section{margin-top:28px}.tb-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 1px 14px}.tb-section-head h2{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.5px}.tb-section-head p{margin:5px 0 0;color:var(--tb-muted);font-size:12px}.tb-link{color:var(--tb-primary);font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:7px}.tb-categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.tb-category{display:flex;align-items:center;gap:12px;padding:15px 13px;border:1px solid var(--tb-line);border-radius:14px;background:#fff;transition:.15s;min-width:0}.tb-category:hover{border-color:#ffc2a5;transform:translateY(-2px);box-shadow:var(--tb-shadow)}.tb-category-icon{width:42px;height:42px;border-radius:12px;background:#fff1e9;color:var(--tb-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.tb-category strong{display:block;font-size:12px;line-height:1.25}.tb-category small{display:block;color:var(--tb-muted);font-size:10px;margin-top:4px}.tb-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.tb-product{border:1px solid var(--tb-line);border-radius:15px;background:#fff;overflow:hidden;transition:.18s}.tb-product:hover{transform:translateY(-3px);box-shadow:var(--tb-shadow);border-color:#ffd1bb}.tb-product-media{height:115px;background:linear-gradient(135deg,#f7f9fc,#edf2f7);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.tb-product-media img{width:100%;height:100%;object-fit:cover}.tb-product-placeholder{width:60px;height:60px;border-radius:18px;background:#fff;color:var(--tb-primary);display:flex;align-items:center;justify-content:center;border:1px solid #ffe1d2}.tb-product-body{padding:14px}.tb-product-title{font-weight:850;font-size:13px;line-height:1.35;margin:0 0 6px}.tb-product-desc{font-size:11px;color:var(--tb-muted);min-height:31px;margin:0 0 12px}.tb-product-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.tb-price{font-size:16px;font-weight:950;color:var(--tb-primary);white-space:nowrap}.tb-price small{font-size:10px;color:var(--tb-muted);font-weight:600}.tb-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tb-trust{display:flex;gap:13px;align-items:flex-start;padding:18px;border:1px solid var(--tb-line);border-radius:15px;background:#fff}.tb-trust-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:12px;background:#eff8ff;color:#1570ef}.tb-trust h3{font-size:13px;margin:1px 0 5px}.tb-trust p{font-size:11px;color:var(--tb-muted);margin:0}.tb-newsletter{margin-top:28px;border-radius:18px;padding:24px;background:#fff7f2;border:1px solid #ffe1d2;display:flex;align-items:center;justify-content:space-between;gap:20px}.tb-newsletter h2{margin:0 0 5px;font-size:18px}.tb-newsletter p{margin:0;color:#667085;font-size:12px}.tb-footer{background:#101828;color:#d0d5dd;padding:32px 24px 20px}.tb-footer-inner{max-width:1132px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}.tb-footer .tb-brand-name{color:white}.tb-footer-copy{font-size:12px;color:#98a2b3;max-width:340px;margin-top:14px}.tb-footer h3{font-size:12px;color:#fff;margin:4px 0 13px}.tb-footer-links{display:grid;gap:9px;font-size:12px;color:#98a2b3}.tb-footer-links a:hover{color:#fff}.tb-footer-bottom{max-width:1132px;margin:25px auto 0;padding-top:17px;border-top:1px solid #344054;display:flex;justify-content:space-between;gap:12px;color:#98a2b3;font-size:11px}.tb-mobile-nav{display:none}.tb-page-title{padding:10px 0 22px}.tb-page-title h1{font-size:27px;letter-spacing:-.8px;margin:0 0 6px}.tb-page-title p{margin:0;color:var(--tb-muted)}.tb-card{background:#fff;border:1px solid var(--tb-line);border-radius:16px;padding:20px}.tb-empty{padding:35px 15px;text-align:center;border:1px dashed #d0d5dd;border-radius:15px;color:var(--tb-muted)}.tb-search{display:flex;gap:8px;max-width:460px}.tb-search input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--tb-line);border-radius:10px;outline:none}.tb-search input:focus{border-color:#ffb18a}.tb-form-row{margin-bottom:15px}.tb-form-row label{display:block;font-weight:750;font-size:12px;margin-bottom:7px}.tb-input{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:12px 13px;background:#fff;outline:none}.tb-input:focus{border-color:var(--tb-primary);box-shadow:0 0 0 3px rgba(255,91,18,.1)}.tb-auth{max-width:470px;margin:10px auto 35px}.tb-auth h1{font-size:25px;margin:0 0 6px;letter-spacing:-.7px}.tb-auth-sub{font-size:12px;color:var(--tb-muted);margin:0 0 22px}.tb-divider{display:flex;align-items:center;gap:12px;color:#98a2b3;font-size:11px;margin:18px 0}.tb-divider:before,.tb-divider:after{content:"";height:1px;background:var(--tb-line);flex:1}.tb-notice{padding:12px 14px;border-radius:10px;background:#ecfdf3;border:1px solid #abefc6;color:#067647;margin-bottom:15px;font-size:12px}.tb-notice.error{background:#fef3f2;border-color:#fecdca;color:#b42318}.tb-profile-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}.tb-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 0 0 1px var(--tb-line)}.tb-profile-head h2{font-size:18px;margin:0 0 3px}.tb-profile-head p{margin:0;color:var(--tb-muted);font-size:12px}.tb-bottom-space{height:20px}
@media(max-width:980px){.tb-categories{grid-template-columns:repeat(3,minmax(0,1fr))}.tb-products{grid-template-columns:repeat(3,minmax(0,1fr))}.tb-header-inner{gap:16px}.tb-nav{gap:14px}}
@media(max-width:680px){body{background:#fff}.tb-shell{box-shadow:none}.tb-header-inner{min-height:64px;padding:9px 14px;gap:10px}.tb-brand{min-width:0;flex:1;gap:8px}.tb-brand img{width:37px;height:37px}.tb-brand-name{font-size:18px}.tb-brand-tag{font-size:8px;letter-spacing:1.3px}.tb-nav{display:none;position:absolute;top:64px;left:0;right:0;padding:15px 18px;background:#fff;border-bottom:1px solid var(--tb-line);box-shadow:0 12px 18px #1018280b;flex-direction:column;align-items:stretch;gap:0}.tb-nav.open{display:flex}.tb-nav a{padding:12px 0;border-bottom:1px solid #f2f4f7}.tb-header-actions .tb-btn-outline{display:none}.tb-main{padding:13px 13px 32px}.tb-hero{grid-template-columns:1fr;min-height:0;padding:24px 20px;gap:10px;border-radius:17px}.tb-hero h1{font-size:31px;letter-spacing:-1px}.tb-hero p{font-size:12px}.tb-hero-visual{display:none}.tb-section{margin-top:24px}.tb-section-head h2{font-size:17px}.tb-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tb-category{padding:11px 10px;gap:9px}.tb-category-icon{width:37px;height:37px}.tb-category strong{font-size:11px}.tb-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tb-product-media{height:100px}.tb-product-body{padding:11px}.tb-product-title{font-size:12px}.tb-product-desc{font-size:10px;min-height:28px}.tb-price{font-size:14px}.tb-product-bottom .tb-btn{padding:8px;font-size:11px}.tb-trust-grid{grid-template-columns:1fr;gap:9px}.tb-trust{padding:14px}.tb-newsletter{padding:18px;align-items:flex-start;flex-direction:column}.tb-footer{padding:25px 16px 90px}.tb-footer-inner{grid-template-columns:1fr 1fr;gap:22px}.tb-footer-inner>div:first-child{grid-column:1/-1}.tb-footer-bottom{flex-direction:column;gap:5px}.tb-mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;z-index:60;left:0;right:0;bottom:0;padding:8px 5px max(8px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--tb-line);box-shadow:0 -8px 24px #1018280a}.tb-mobile-nav a{text-align:center;font-size:10px;color:#667085;font-weight:750}.tb-mobile-nav svg{display:block;margin:0 auto 3px}.tb-mobile-nav a.active{color:var(--tb-primary)}.tb-auth{margin:0 auto 25px}.tb-page-title h1{font-size:23px}}

/* Phase 1.0.1: clean category-only homepage */
.home .tb-hero,.home .tb-main>.tb-section:not(.tb-home-categories),.home .tb-newsletter{display:none!important}
.home .tb-main{padding-top:18px;min-height:62vh}
.home .tb-home-categories{margin-top:0}
.home .tb-home-categories .tb-section-head{margin-bottom:18px}
.home .tb-home-categories .tb-category{min-height:82px}

/* Phase 1.0.2: five-item GamesKinbo-inspired mobile navigation */
.tb-mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr));}
.tb-mobile-nav a{min-width:0;gap:4px;padding:9px 2px;font-size:11px;white-space:normal;text-align:center;}
.tb-mobile-nav a svg{width:22px;height:22px;flex:0 0 auto;}
.tb-mobile-nav a span{display:block;line-height:1.2;}
@media(min-width:769px){.tb-mobile-nav{display:none!important;}}

/* TopUpBari 1.1.0 catalogue and account sections */
.tb-account-section{max-width:820px;margin:0 auto;padding:clamp(22px,4vw,42px);}
.tb-amount-choices{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;}
.tb-amount-choices button{border:1px solid #d9dce3;border-radius:12px;background:#f7f8fa;padding:11px 18px;font:inherit;cursor:pointer;}
#tb-add-amount{display:block;width:100%;max-width:100%;padding:15px;border:1px solid #d9dce3;border-radius:12px;font:inherit;margin:8px 0 18px;}
.tb-account-section .tb-btn[disabled]{opacity:.6;cursor:not-allowed;}