/* ==========================================================================
Afropaddi - Global Stylesheet
Brand: Vibrant African green (#0E9F6E) + warm gold (#F2B705)
========================================================================== */
:root {
--ap-green: #0E9F6E;
--ap-green-dark: #0a7d56;
--ap-green-light: #e7f7f0;
--ap-gold: #F2B705;
--ap-gold-dark: #c99905;
--ap-dark: #0f1b17;
--ap-muted: #5c6b66;
--ap-bg: #ffffff;
--ap-soft: #f7faf9;
--ap-border: #e6ece9;
--ap-shadow: 0 12px 40px -12px rgba(14, 159, 110, 0.25);
--ap-shadow-sm: 0 4px 16px -4px rgba(15, 27, 23, 0.08);
--ap-radius: 14px;
--ap-transition: all .35s cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family:var(--font-body);
color: var(--ap-dark);
background: var(--ap-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.65;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family:var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ap-dark);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.2; }
h3 { font-size: 1.4rem; }
p { color: var(--ap-muted); }
a { color: var(--ap-green); text-decoration: none; transition: var(--ap-transition); }
a:hover { color: var(--ap-green-dark); }
.text-gradient {
background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.section-soft { background: var(--ap-soft); }
/* ============== AUTH PAGES ============== */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ap-soft);}
.auth-side{background:linear-gradient(160deg,var(--ap-green) 0%,var(--ap-green-dark) 100%);color:#fff;padding:4rem 3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.auth-side::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(242,183,5,.15);right:-180px;top:-180px;}
.auth-side h2{color:#fff;font-size:2.2rem;line-height:1.15;}
.auth-side p{color:rgba(255,255,255,.85);}
.auth-side .feat{display:flex;gap:.8rem;align-items:flex-start;margin:1rem 0;}
.auth-side .feat i{background:rgba(255,255,255,.15);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;}
.auth-card{padding:3.5rem 3rem;display:flex;flex-direction:column;justify-content:center;background:#fff;}
.auth-card .form-control{height:50px;border-radius:12px;border:1.5px solid var(--ap-border);padding:0 1rem;}
.auth-card .form-control:focus{border-color:var(--ap-green);box-shadow:0 0 0 4px var(--ap-green-light);}
.auth-card label{font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--ap-dark);}
@media (max-width:991px){.auth-wrap{grid-template-columns:minmax(0,1fr);}.auth-side{display:none;}}
/* ============== DASHBOARD LAYOUT ============== */
.dash-shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh;background:var(--ap-soft);}
.dash-sidebar{background:#0f1b17;color:#cfd8d4;padding:1.5rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto;}
.dash-sidebar .brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-family:var(--font-display);font-size:1.2rem;padding:.5rem .8rem 1.5rem;}
.dash-sidebar .brand .brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;}
.dash-sidebar .nav-group{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:#6b7d77;padding:1.2rem .8rem .4rem;}
.dash-sidebar a.menu{display:flex;align-items:center;gap:.7rem;color:#cfd8d4;padding:.7rem .9rem;border-radius:10px;margin-bottom:.15rem;font-weight:500;font-size:.95rem;}
.dash-sidebar a.menu:hover{background:rgba(255,255,255,.05);color:#fff;}
.dash-sidebar a.menu.active{background:var(--ap-green);color:#fff;}
.dash-sidebar a.menu i{width:18px;text-align:center;}
.dash-main{padding:1.5rem 2rem 4rem;}
.dash-topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:1rem 1.4rem;border-radius:16px;box-shadow:var(--ap-shadow-sm);margin-bottom:1.5rem;}
.dash-topbar .user-chip{display:flex;align-items:center;gap:.7rem;}
.dash-topbar .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ap-green),var(--ap-gold));color:#fff;display:grid;place-items:center;font-weight:700;}
.dash-card{background:#fff;border-radius:18px;padding:1.6rem;box-shadow:var(--ap-shadow-sm);border:1px solid var(--ap-border);}
.stat-tile{background:#fff;border-radius:18px;padding:1.4rem;border:1px solid var(--ap-border);}
.stat-tile .ic{width:44px;height:44px;border-radius:12px;background:var(--ap-green-light);color:var(--ap-green);display:grid;place-items:center;margin-bottom:.8rem;font-size:1.1rem;}
.stat-tile h3{font-size:1.6rem;margin:.2rem 0 0;}
.stat-tile .label{font-size:.85rem;color:var(--ap-muted);}
.wallet-card{background:linear-gradient(135deg,var(--ap-green) 0%,#0a7d56 60%,var(--ap-gold) 140%);color:#fff;border-radius:20px;padding:1.8rem;position:relative;overflow:hidden;}
.wallet-card::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08);right:-100px;bottom:-100px;}
.wallet-card .bal{font-family:var(--font-display);font-size:2.4rem;font-weight:800;margin:.4rem 0;}
.wallet-card .btn-ap-primary{background:#fff;color:var(--ap-green);}
.wallet-card .btn-ap-primary:hover{background:var(--ap-gold);color:#fff;}
.mobile-bar{display:none;}
@media (max-width:991px){
.dash-shell{grid-template-columns:minmax(0,1fr);}
.dash-sidebar{position:fixed;left:-280px;width:260px;transition:left .3s;z-index:1050;}
.dash-sidebar.open{left:0;}
.mobile-bar{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:.8rem 1rem;box-shadow:var(--ap-shadow-sm);position:sticky;top:0;z-index:100;}
}
.svc-tile{display:block;background:#fff;border:1px solid var(--ap-border);border-radius:16px;padding:1.4rem;text-decoration:none;color:var(--ap-dark);transition:var(--ap-transition);}
.svc-tile:hover{transform:translateY(-3px);box-shadow:var(--ap-shadow);border-color:var(--ap-green);color:var(--ap-dark);}
.svc-tile .ic{width:48px;height:48px;border-radius:14px;background:var(--ap-green-light);color:var(--ap-green);display:grid;place-items:center;font-size:1.3rem;margin-bottom:.8rem;}
/* Status pill — small, perfectly round, with status dot */
.badge-soft,.badge-warn,.badge-danger,.status-pill{
display:inline-flex;align-items:center;gap:.35rem;
padding:.28rem .65rem;border-radius:999px;
font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.02em;
white-space:nowrap;text-transform:capitalize;
background:var(--ap-green-light);color:var(--ap-green-dark);
border:1px solid rgba(14,159,110,.18);
}
.badge-soft::before,.badge-warn::before,.badge-danger::before,.status-pill::before{
content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}
.badge-warn{background:#fff4d6;color:#8a6300;border-color:rgba(242,183,5,.28);}
.badge-danger{background:#fde2e2;color:#a8281f;border-color:rgba(220,38,38,.22);}
.status-pill.pending{background:#fff4d6;color:#8a6300;border-color:rgba(242,183,5,.28);}
.status-pill.processing{background:#dbeafe;color:#1d4ed8;border-color:rgba(29,78,216,.2);}
.status-pill.failed{background:#fde2e2;color:#a8281f;border-color:rgba(220,38,38,.22);}
.status-pill.completed{background:#dcfce7;color:#166534;border-color:rgba(22,101,52,.2);}
.status-pill.partial{background:#ffedd5;color:#9a3412;border-color:rgba(154,52,18,.22);}
.status-pill.cancelled{background:#e5e7eb;color:#475569;border-color:#cbd5e1;}
.table-ap{width:100%;border-collapse:separate;border-spacing:0 .5rem;}
.table-ap th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ap-muted);padding:.4rem 1rem;font-weight:700;}
.table-ap td{background:#fff;padding:1rem;border-top:1px solid var(--ap-border);border-bottom:1px solid var(--ap-border);}
.table-ap tr td:first-child{border-left:1px solid var(--ap-border);border-top-left-radius:12px;border-bottom-left-radius:12px;}
.table-ap tr td:last-child{border-right:1px solid var(--ap-border);border-top-right-radius:12px;border-bottom-right-radius:12px;}
.eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
color: var(--ap-green);
background: var(--ap-green-light);
padding: .4rem .9rem;
border-radius: 999px;
margin-bottom: 1rem;
}
/* ============== NAVBAR ============== */
.navbar-ap {
background: rgba(255,255,255,.85);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: var(--ap-transition);
padding: .9rem 0;
z-index: 1030;
}
.navbar-ap.scrolled {
border-bottom-color: var(--ap-border);
box-shadow: var(--ap-shadow-sm);
}
.navbar-brand-ap {
display: flex; align-items: center; gap: .55rem;
font-family:var(--font-display);
font-weight: 800; font-size: 1.35rem;
color: var(--ap-dark);
}
.navbar-brand-ap:hover { color: var(--ap-dark); }
.brand-mark {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--ap-green), var(--ap-green-dark));
color: #fff; border-radius: 10px;
font-weight: 800;
box-shadow: 0 6px 16px -6px rgba(14,159,110,.6);
}
.navbar-ap .nav-link {
color: var(--ap-dark);
font-weight: 600;
font-size: .95rem;
padding: .5rem 1rem !important;
position: relative;
}
.navbar-ap .nav-link::after {
content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .25rem;
height: 2px; background: var(--ap-green); transform: scaleX(0);
transform-origin: right; transition: transform .35s ease;
}
.navbar-ap .nav-link:hover::after,
.navbar-ap .nav-link.active::after {
transform: scaleX(1); transform-origin: left;
}
.navbar-ap .nav-link.active { color: var(--ap-green); }
/* ============== BUTTONS ============== */
.btn-ap {
display: inline-flex; align-items: center; gap: .55rem;
padding: .85rem 1.6rem;
font-weight: 600;
border-radius: 999px;
border: 2px solid transparent;
transition: var(--ap-transition);
font-size: .95rem;
cursor: pointer;
}
.btn-ap-primary {
background: var(--ap-green);
color: #fff;
box-shadow: 0 10px 24px -10px rgba(14,159,110,.7);
}
.btn-ap-primary:hover {
background: var(--ap-green-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 16px 32px -12px rgba(14,159,110,.7);
}
.btn-ap-outline {
background: transparent;
border-color: var(--ap-border);
color: var(--ap-dark);
}
.btn-ap-outline:hover {
border-color: var(--ap-green);
color: var(--ap-green);
transform: translateY(-2px);
}
.btn-ap-gold {
background: var(--ap-gold);
color: var(--ap-dark);
box-shadow: 0 10px 24px -10px rgba(242,183,5,.7);
}
.btn-ap-gold:hover {
background: var(--ap-gold-dark); color: var(--ap-dark);
transform: translateY(-2px);
}
/* ============== HERO ============== */
.hero {
position: relative;
padding: 9rem 0 5rem;
overflow: hidden;
}
.hero::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 10% 20%, rgba(14,159,110,.10), transparent 60%),
radial-gradient(50% 40% at 90% 80%, rgba(242,183,5,.10), transparent 60%);
z-index: -1;
}
.hero-badge {
display: inline-flex; align-items: center; gap: .5rem;
background: #fff;
border: 1px solid var(--ap-border);
padding: .45rem .9rem;
border-radius: 999px;
font-size: .82rem; font-weight: 600;
box-shadow: var(--ap-shadow-sm);
margin-bottom: 1.5rem;
}
.hero-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ap-green);
box-shadow: 0 0 0 4px rgba(14,159,110,.2);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 4px rgba(14,159,110,.2); }
50% { box-shadow: 0 0 0 8px rgba(14,159,110,0); }
}
.hero-img {
position: relative;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
/* ============== STAT STRIP ============== */
.stat-strip {
background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-dark) 100%);
color: #fff;
border-radius: var(--ap-radius);
padding: 2.2rem 1.5rem;
box-shadow: var(--ap-shadow);
}
.stat-strip .stat-num {
font-family:var(--font-display);
font-size: 2.4rem; font-weight: 800; line-height: 1;
color: #fff;
}
.stat-strip .stat-label {
color: rgba(255,255,255,.85);
font-size: .9rem; margin-top: .35rem;
}
/* ============== SERVICE CARDS ============== */
.service-card {
background: #fff;
border: 1px solid var(--ap-border);
border-radius: var(--ap-radius);
padding: 2rem;
height: 100%;
transition: var(--ap-transition);
position: relative; overflow: hidden;
}
.service-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--ap-green), var(--ap-gold));
transform: scaleX(0); transform-origin: left;
transition: transform .4s ease;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--ap-shadow);
border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
width: 56px; height: 56px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ap-green-light);
color: var(--ap-green);
border-radius: 14px;
font-size: 1.4rem;
margin-bottom: 1.2rem;
transition: var(--ap-transition);
}
.service-card:hover .service-icon {
background: var(--ap-green); color: #fff;
transform: rotate(-6deg) scale(1.05);
}
.service-card h3 { margin-bottom: .6rem; }
.service-card p { font-size: .95rem; margin-bottom: 1.2rem; }
.service-link {
display: inline-flex; align-items: center; gap: .4rem;
font-weight: 600; font-size: .9rem;
color: var(--ap-green);
}
.service-link i { transition: transform .3s ease; }
.service-card:hover .service-link i { transform: translateX(4px); }
/* ============== FEATURE / WHY US ============== */
.feature-item {
display: flex; gap: 1rem; align-items: flex-start;
padding: 1rem 0;
}
.feature-icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 12px;
background: var(--ap-green-light);
color: var(--ap-green);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
}
.feature-item h4 {
font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem;
}
.feature-item p { font-size: .92rem; margin: 0; }
/* ============== TESTIMONIALS / REVIEWS ============== */
.review-card {
background: #fff;
border: 1px solid var(--ap-border);
border-radius: var(--ap-radius);
padding: 1.8rem;
height: 100%;
transition: var(--ap-transition);
}
.review-card:hover {
transform: translateY(-4px);
box-shadow: var(--ap-shadow-sm);
border-color: var(--ap-green-light);
}
.review-stars { color: var(--ap-gold); margin-bottom: .8rem; font-size: .95rem; }
.review-text {
color: var(--ap-dark);
font-size: 1rem; line-height: 1.65;
margin-bottom: 1.3rem;
}
.review-author { display: flex; align-items: center; gap: .8rem; }
.review-avatar {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, var(--ap-green), var(--ap-gold));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
}
.review-author .name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.review-author .role { color: var(--ap-muted); font-size: .82rem; }
/* ============== CTA BAND ============== */
.cta-band {
background: linear-gradient(135deg, var(--ap-dark) 0%, #1a302a 100%);
border-radius: 24px;
padding: 3.5rem 2.5rem;
position: relative; overflow: hidden;
color: #fff;
}
.cta-band::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(40% 60% at 10% 50%, rgba(14,159,110,.4), transparent 60%),
radial-gradient(40% 60% at 90% 50%, rgba(242,183,5,.25), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.8); }
/* ============== FOOTER ============== */
.footer {
background: var(--ap-dark);
color: rgba(255,255,255,.7);
padding: 4.5rem 0 1.5rem;
}
.footer h5 {
color: #fff; font-size: 1rem; font-weight: 700;
margin-bottom: 1.2rem;
}
.footer a { color: rgba(255,255,255,.7); display: block; padding: .3rem 0; font-size: .92rem; }
.footer a:hover { color: var(--ap-gold); transform: translateX(3px); }
.footer .navbar-brand-ap { color: #fff; }
.social-icons { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social-icons a {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(255,255,255,.08);
color: #fff;
font-size: .95rem;
padding: 0;
}
.social-icons a:hover {
background: var(--ap-green); color: #fff;
transform: translateY(-3px);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 1.5rem; margin-top: 3rem;
font-size: .85rem;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
/* ============== PAGE HEADER ============== */
.page-header {
padding: 9rem 0 4rem;
background: linear-gradient(180deg, var(--ap-green-light) 0%, #fff 100%);
text-align: center;
position: relative; overflow: hidden;
}
.page-header::after {
content: ''; position: absolute; bottom: 0; left: 50%;
transform: translateX(-50%);
width: 80%; height: 1px;
background: linear-gradient(90deg, transparent, var(--ap-border), transparent);
}
.page-header .breadcrumb-ap {
display: inline-flex; gap: .5rem; align-items: center;
font-size: .88rem; color: var(--ap-muted);
margin-top: .8rem;
}
.page-header .breadcrumb-ap a { color: var(--ap-muted); }
.page-header .breadcrumb-ap a:hover { color: var(--ap-green); }
/* ============== ABOUT VALUES ============== */
.value-card {
text-align: center;
padding: 2rem 1.5rem;
border-radius: var(--ap-radius);
background: #fff;
border: 1px solid var(--ap-border);
height: 100%;
transition: var(--ap-transition);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--ap-shadow);
border-color: transparent;
}
.value-card .icon-wrap {
width: 64px; height: 64px;
margin: 0 auto 1.2rem;
border-radius: 18px;
background: linear-gradient(135deg, var(--ap-green), var(--ap-green-dark));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem;
}
/* ============== CONTACT FORM ============== */
.contact-card {
background: #fff;
border: 1px solid var(--ap-border);
border-radius: var(--ap-radius);
padding: 2.5rem;
box-shadow: var(--ap-shadow-sm);
}
.form-control-ap {
width: 100%;
padding: .85rem 1.1rem;
border: 1px solid var(--ap-border);
border-radius: 12px;
font-size: .95rem;
background: var(--ap-soft);
transition: var(--ap-transition);
font-family: inherit;
}
.form-control-ap:focus {
outline: none;
border-color: var(--ap-green);
background: #fff;
box-shadow: 0 0 0 4px rgba(14,159,110,.12);
}
.form-label-ap {
font-weight: 600;
font-size: .9rem;
margin-bottom: .45rem;
display: block;
color: var(--ap-dark);
}
.contact-info-item {
display: flex; gap: 1rem; align-items: flex-start;
padding: 1.2rem 0;
border-bottom: 1px solid var(--ap-border);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item .icon {
width: 48px; height: 48px;
background: var(--ap-green-light); color: var(--ap-green);
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
.contact-info-item h5 { margin-bottom: .2rem; font-size: 1rem; color: var(--ap-dark); }
.contact-info-item p { margin: 0; font-size: .92rem; }
/* ============== AOS-LIKE REVEAL ============== */
.js .reveal {
opacity: 0; transform: translateY(24px);
transition: opacity .8s ease, transform .8s ease;
}
.js .reveal.in {
opacity: 1; transform: translateY(0);
}
/* ============== UTILITIES ============== */
.divider-dot {
display: inline-block; width: 4px; height: 4px;
background: var(--ap-muted); border-radius: 50%;
margin: 0 .5rem; vertical-align: middle; opacity: .5;
}
.img-rounded { border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-sm); }
/* ============== RESPONSIVE ============== */
@media (max-width: 991.98px) {
.section { padding: 4rem 0; }
.hero { padding: 7rem 0 3rem; }
.cta-band { padding: 2.5rem 1.5rem; }
.navbar-ap { padding: .6rem 0; }
.navbar-collapse {
background: #fff;
border-radius: var(--ap-radius);
margin-top: .8rem;
padding: 1rem;
box-shadow: var(--ap-shadow-sm);
}
}
/* ============== MOBILE-FIRST DASHBOARD UPGRADES ============== */
.wallet-pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--ap-green-light);color:var(--ap-green);padding:.45rem .8rem;border-radius:999px;font-weight:700;font-size:.85rem;text-decoration:none;}
.wallet-pill:hover{background:var(--ap-green);color:#fff;}
.mobile-bar .hamb{background:#fff;border:1px solid var(--ap-border);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ap-dark);}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1040;}
.sb-overlay.on{display:block;}
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--ap-border);padding:.4rem .25rem calc(.4rem + env(safe-area-inset-bottom));z-index:1020;justify-content:space-around;box-shadow:0 -8px 24px -12px rgba(0,0,0,.12);}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;text-decoration:none;color:#7a8884;font-size:.75rem;font-weight:600;padding:.4rem .2rem;border-radius:12px;}
.bottom-nav a i{font-size:1.1rem;}
.bottom-nav a.active{color:var(--ap-green);}
.bottom-nav a.active i{transform:translateY(-2px);transition:.2s;}
@media (max-width:991px){
.bottom-nav{display:flex;}
.dash-main{padding:1rem 1rem 6rem !important;}
.dash-topbar{padding:.9rem 1rem;border-radius:14px;margin-bottom:1rem;}
.dash-topbar h2{font-size:1.15rem !important;}
.dash-card{padding:1.2rem;border-radius:16px;}
.wallet-card{padding:1.4rem;border-radius:18px;}
.wallet-card .bal{font-size:1.9rem;}
.stat-tile{padding:1rem;border-radius:14px;}
.stat-tile h3{font-size:1.25rem;}
.stat-tile .ic{width:38px;height:38px;font-size:.95rem;}
.svc-tile{padding:1rem;border-radius:14px;}
.svc-tile .ic{width:42px;height:42px;font-size:1.1rem;}
.table-ap th,.table-ap td{padding:.6rem .55rem;font-size:.85rem;}
}
@media (min-width:992px){.mobile-bar{display:none;}}
/* ============== PURCHASE PAGES (App-like) ============== */
.pp-wrap{max-width:1100px;margin:0 auto;}
.pp-hero{background:linear-gradient(135deg,var(--ap-green) 0%,var(--ap-green-dark) 100%);color:#fff;border-radius:22px;padding:1.6rem 1.6rem;display:flex;align-items:center;gap:1.1rem;box-shadow:var(--ap-shadow);position:relative;overflow:hidden;}
.pp-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);}
.pp-hero::before{content:"";position:absolute;right:60px;bottom:-50px;width:120px;height:120px;border-radius:50%;background:rgba(242,183,5,.18);}
.pp-hero .ph-ic{width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.6rem;flex-shrink:0;position:relative;z-index:1;}
.pp-hero h1{color:#fff;font-size:1.45rem;margin:0;letter-spacing:-.01em;}
.pp-hero .sub{opacity:.9;font-size:.88rem;margin-top:.15rem;position:relative;z-index:1;}
.pp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;margin-top:1.2rem;}
@media (min-width:992px){.pp-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;}}
.pp-card{background:#fff;border:1px solid var(--ap-border);border-radius:20px;padding:1.4rem;box-shadow:var(--ap-shadow-sm);}
.pp-card h2{font-size:1.05rem;margin:0 0 .2rem;font-family:var(--font-display);}
.pp-card .lead{color:var(--ap-muted);font-size:.88rem;margin:0 0 1rem;}
.pp-section{margin-top:1rem;}
.pp-section-label{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ap-muted);font-weight:700;margin:1.1rem 0 .55rem;display:flex;align-items:center;gap:.5rem;}
.pp-section-label i{color:var(--ap-green);}
.pp-field{display:block;}
.pp-field input,.pp-field select,.pp-field textarea{
width:100%;background:var(--ap-soft);border:1.5px solid var(--ap-border);border-radius:14px;
padding:.95rem 1rem;font-size:.95rem;font-family:inherit;color:var(--ap-dark);
transition:.2s;appearance:none;-webkit-appearance:none;
}
.pp-field input:focus,.pp-field select:focus,.pp-field textarea:focus{outline:none;border-color:var(--ap-green);background:#fff;box-shadow:0 0 0 4px rgba(14,159,110,.1);}
.pp-field select{background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem;}
.pp-input-prefix{position:relative;}
.pp-input-prefix .pfx{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--ap-muted);font-size:.9rem;font-weight:600;pointer-events:none;}
.pp-input-prefix input{padding-left:2.4rem;}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem;}
@media (min-width:600px){.pp-row.cols-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.pp-row.cols-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);}}
/* Selectable chip tiles */
.pp-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;}
.pp-chip{cursor:pointer;border:1.5px solid var(--ap-border);background:var(--ap-soft);border-radius:14px;padding:.85rem .6rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem;transition:.2s;user-select:none;}
.pp-chip i{font-size:1.15rem;color:var(--ap-green);}
.pp-chip .lbl{font-weight:700;font-size:.82rem;color:var(--ap-dark);line-height:1.1;}
.pp-chip .meta{font-size:.7rem;color:var(--ap-muted);}
.pp-chip:hover{border-color:var(--ap-green);transform:translateY(-2px);}
.pp-chip.on{background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));border-color:var(--ap-green);color:#fff;box-shadow:0 8px 18px -8px rgba(14,159,110,.55);}
.pp-chip.on i,.pp-chip.on .lbl,.pp-chip.on .meta{color:#fff;}
/* Tabs */
.pp-tabs{display:flex;background:var(--ap-soft);padding:.3rem;border-radius:14px;gap:.3rem;margin-bottom:1rem;}
.pp-tabs button{flex:1;border:none;background:transparent;padding:.65rem;border-radius:11px;font-weight:700;font-size:.88rem;color:var(--ap-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem;}
.pp-tabs button.on{background:#fff;color:var(--ap-green);box-shadow:0 4px 10px -4px rgba(14,159,110,.25);}
/* Summary card */
.pp-sum{position:sticky;top:1rem;background:linear-gradient(160deg,#0f1b17 0%,#163026 100%);color:#fff;border-radius:20px;padding:1.4rem;box-shadow:var(--ap-shadow);}
.pp-sum h3{color:#fff;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin:0 0 1rem;font-weight:700;}
.pp-sum .line{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px dashed rgba(255,255,255,.12);font-size:.88rem;opacity:.9;}
.pp-sum .line strong{color:#fff;opacity:1;font-weight:600;}
.pp-sum .total{display:flex;justify-content:space-between;align-items:flex-end;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18);}
.pp-sum .total span{font-size:.78rem;opacity:.7;text-transform:uppercase;letter-spacing:.12em;}
.pp-sum .total b{font-family:var(--font-display);font-size:1.9rem;color:var(--ap-gold);}
.pp-sum .wal{background:rgba(255,255,255,.06);border-radius:12px;padding:.7rem .9rem;margin-top:1rem;display:flex;justify-content:space-between;font-size:.82rem;}
.pp-sum .wal b{color:var(--ap-gold);}
.pp-cta{margin-top:1.1rem;width:100%;background:linear-gradient(135deg,var(--ap-gold),var(--ap-gold-dark));color:#0f1b17;border:none;padding:1rem;border-radius:14px;font-weight:800;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem;transition:.2s;}
.pp-cta:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(242,183,5,.6);}
.pp-cta:disabled{opacity:.6;cursor:not-allowed;}
.pp-trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:.55rem;margin-top:1.1rem;}
.pp-trust .t{background:#fff;border:1px solid var(--ap-border);border-radius:14px;padding:.85rem .6rem;text-align:center;}
.pp-trust .t i{color:var(--ap-green);font-size:1.05rem;}
.pp-trust .t .ttl{display:block;font-weight:700;font-size:.78rem;margin-top:.25rem;}
.pp-trust .t .sub{display:block;font-size:.75rem;color:var(--ap-muted);}
@media (max-width:600px){.pp-hero{padding:1.2rem;border-radius:18px;}.pp-hero h1{font-size:1.15rem;}.pp-sum{position:static;}}
/* ============== APP MODAL ============== */
.ap-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-end;justify-content:center;background:rgba(15,27,23,.55);backdrop-filter:blur(6px);padding:1rem;}
.ap-modal.open{display:flex;animation:apFade .25s ease;}
@keyframes apFade{from{opacity:0;}to{opacity:1;}}
.ap-modal .box{background:#fff;border-radius:24px 24px 24px 24px;max-width:430px;width:100%;padding:1.8rem 1.5rem;text-align:center;animation:apSlide .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 60px -15px rgba(0,0,0,.4);}
@media (min-width:600px){.ap-modal{align-items:center;}.ap-modal .box{padding:2.2rem;}}
@keyframes apSlide{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.ap-modal .ic-wrap{width:84px;height:84px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;font-size:2.1rem;animation:apPop .5s cubic-bezier(.2,1.6,.3,1);}
@keyframes apPop{0%{transform:scale(0);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
.ap-modal.success .ic-wrap{background:rgba(14,159,110,.12);color:var(--ap-green);}
.ap-modal.error .ic-wrap{background:rgba(239,68,68,.12);color:#ef4444;}
.ap-modal.info .ic-wrap{background:rgba(91,141,239,.12);color:#5b8def;}
.ap-modal h3{font-family:var(--font-display);font-size:1.35rem;margin:0 0 .35rem;color:var(--ap-dark);}
.ap-modal p{color:var(--ap-muted);font-size:.92rem;margin:0 0 1rem;}
.ap-modal .receipt{background:var(--ap-soft);border:1px dashed var(--ap-border);border-radius:14px;padding:.9rem 1rem;text-align:left;margin-bottom:1.1rem;}
.ap-modal .receipt .row{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.85rem;}
.ap-modal .receipt .row span{color:var(--ap-muted);}
.ap-modal .receipt .row b{color:var(--ap-dark);font-weight:700;word-break:break-all;text-align:right;max-width:60%;}
.ap-modal .receipt .row.tx b{font-family:var(--font-mono);font-size:.78rem;}
.ap-modal .acts{display:flex;gap:.6rem;}
.ap-modal .acts button,.ap-modal .acts a{flex:1;padding:.85rem;border-radius:12px;font-weight:700;font-size:.9rem;cursor:pointer;border:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;}
.ap-modal .acts .primary{background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;}
.ap-modal .acts .ghost{background:var(--ap-soft);color:var(--ap-dark);border:1px solid var(--ap-border);}
/* ============== ADMIN PANEL (DARK, DISTINCT THEME) ============== */
.admin-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh;background:#0b1220;color:#cdd6e4;font-family:var(--font-body);}
.admin-side{background:linear-gradient(180deg,#070b14,#0b1220);border-right:1px solid #1a2238;padding:1.2rem .9rem;position:sticky;top:0;height:100vh;overflow-y:auto;}
.admin-side .abrand{font-family:var(--font-display);font-weight:800;color:#fff;font-size:.85rem;letter-spacing:.18em;padding:.4rem .6rem 1.5rem;display:flex;align-items:center;gap:.5rem;}
.admin-side .logo-dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#a855f7);box-shadow:0 0 14px rgba(91,141,239,.6);}
.admin-side .agroup{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:#5b6b8a;padding:1.4rem .7rem .5rem;}
.admin-side .amenu{display:flex;align-items:center;gap:.7rem;color:#9aa8c4;padding:.7rem .8rem;border-radius:10px;font-weight:500;font-size:.92rem;text-decoration:none;margin-bottom:.15rem;}
.admin-side .amenu:hover{background:#101a30;color:#fff;}
.admin-side .amenu.active{background:linear-gradient(135deg,#1e3a8a 0%,#5b21b6 100%);color:#fff;box-shadow:0 8px 24px -10px rgba(91,33,182,.7);}
.admin-side .amenu i{width:16px;text-align:center;}
.admin-main{padding:1.4rem 2rem 3rem;}
.admin-topbar{display:flex;align-items:center;gap:1rem;background:#101a30;border:1px solid #1a2238;padding:.9rem 1.2rem;border-radius:14px;margin-bottom:1.5rem;}
.admin-topbar .atitle{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.2rem;line-height:1.1;}
.admin-topbar .asub{font-size:.78rem;color:#7a8aae;}
.admin-topbar .apill{background:rgba(91,33,182,.18);color:#c4b5fd;border:1px solid rgba(91,33,182,.35);padding:.4rem .8rem;border-radius:999px;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:.4rem;}
.admin-topbar .hamb{display:none;background:#0b1220;border:1px solid #1a2238;width:38px;height:38px;border-radius:10px;color:#cdd6e4;}
.acard{background:#101a30;border:1px solid #1a2238;border-radius:16px;padding:1.4rem;color:#cdd6e4;}
.acard h3{color:#fff;font-family:var(--font-display);}
.akpi{background:linear-gradient(160deg,#101a30 0%,#0d1428 100%);border:1px solid #1a2238;border-radius:16px;padding:1.2rem;position:relative;overflow:hidden;}
.akpi .lab{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:#7a8aae;}
.akpi .val{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:#fff;margin:.4rem 0 .1rem;}
.akpi .sub{font-size:.78rem;color:#9aa8c4;}
.akpi .ic{position:absolute;right:1rem;top:1rem;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(91,141,239,.15);color:#5b8def;}
.akpi.green .ic{background:rgba(16,185,129,.15);color:#10b981;}
.akpi.gold .ic{background:rgba(245,158,11,.15);color:#f59e0b;}
.akpi.purple .ic{background:rgba(168,85,247,.15);color:#a855f7;}
.akpi.red .ic{background:rgba(239,68,68,.15);color:#ef4444;}
.atable{width:100%;color:#cdd6e4;border-collapse:collapse;}
.atable th{text-align:left;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#7a8aae;padding:.7rem .8rem;border-bottom:1px solid #1a2238;font-weight:700;}
.atable td{padding:.85rem .8rem;border-bottom:1px solid #1a2238;font-size:.9rem;}
.atable tr:hover td{background:#0d1428;}
.abadge{padding:.25rem .65rem;border-radius:999px;font-size:.75rem;font-weight:700;background:rgba(16,185,129,.15);color:#10b981;}
.abadge.warn{background:rgba(245,158,11,.15);color:#f59e0b;}
.abadge.red{background:rgba(239,68,68,.15);color:#ef4444;}
.abtn{background:linear-gradient(135deg,#1e3a8a 0%,#5b21b6 100%);color:#fff;border:none;border-radius:10px;padding:.45rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer;}
.abtn:hover{filter:brightness(1.15);}
.abtn.ghost{background:transparent;border:1px solid #1a2238;color:#cdd6e4;}
.abtn.red{background:linear-gradient(135deg,#991b1b,#7f1d1d);}
.ainput{background:#0b1220;border:1px solid #1a2238;color:#fff;border-radius:10px;padding:.6rem .9rem;width:100%;}
.ainput:focus{outline:none;border-color:#5b21b6;box-shadow:0 0 0 3px rgba(91,33,182,.25);}
.admin-auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(60% 50% at 50% 10%,rgba(91,33,182,.25),transparent 60%),#070b14;padding:2rem 1rem;}
.admin-auth .card{background:#101a30;border:1px solid #1a2238;border-radius:18px;padding:2.4rem;max-width:430px;width:100%;color:#cdd6e4;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);}
.admin-auth .card h1{color:#fff;font-family:var(--font-display);font-size:1.6rem;margin-bottom:.3rem;}
.admin-auth label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#7a8aae;font-weight:700;display:block;margin:1rem 0 .4rem;}
@media (max-width:991px){
.admin-shell{grid-template-columns:minmax(0,1fr);}
.admin-side{position:fixed;left:-260px;width:240px;transition:left .3s;z-index:1050;}
.admin-side.open{left:0;}
.admin-topbar .hamb{display:grid;place-items:center;}
.admin-main{padding:1rem 1rem 3rem;}
.akpi .val{font-size:1.3rem;}
}
/* Mobile hero / nav polish */
@media (max-width:767px){
.hero{padding:6rem 0 2.5rem;}
.hero-img{max-width:280px !important;}
.stat-strip{padding:1.4rem 1rem;}
.stat-strip .stat-num{font-size:1.6rem;}
.stat-strip .stat-label{font-size:.78rem;}
.service-card{padding:1.4rem;}
.cta-band{padding:2rem 1.2rem;border-radius:18px;}
.cta-band h2{font-size:1.5rem;}
.page-header{padding:7rem 0 2.5rem;}
.auth-card{padding:2rem 1.4rem;}
.auth-card h2{font-size:1.5rem !important;}
.feature-item{padding:.6rem 0;}
.footer{padding:3rem 0 1.2rem;}
.review-card{padding:1.4rem;}
.btn-ap{padding:.75rem 1.3rem;font-size:.9rem;}
h1{font-size:2rem !important;}
h2{font-size:1.5rem !important;}
}
/* ============== APP DROPDOWN (Searchable, themed) ============== */
.ap-dd{position:relative;width:100%;}
.ap-dd-btn{width:100%;background:var(--ap-soft);border:1.5px solid var(--ap-border);border-radius:14px;padding:.85rem 1rem;display:flex;align-items:center;gap:.6rem;cursor:pointer;font-family:inherit;text-align:left;transition:.2s;}
.ap-dd-btn:hover{border-color:var(--ap-green);}
.ap-dd.open .ap-dd-btn{border-color:var(--ap-green);background:#fff;box-shadow:0 0 0 4px rgba(14,159,110,.1);}
.ap-dd-btn .ap-dd-val{flex:1;display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--ap-dark);font-size:.95rem;}
.ap-dd-btn .ap-dd-val .ic{width:30px;height:30px;display:grid;place-items:center;background:#fff;border:1px solid var(--ap-border);border-radius:8px;font-size:1.1rem;}
.ap-dd-btn .ap-dd-val .m{margin-left:auto;color:var(--ap-muted);font-weight:600;font-size:.82rem;}
.ap-dd-btn .chev{color:var(--ap-muted);transition:.25s;}
.ap-dd.open .chev{transform:rotate(180deg);color:var(--ap-green);}
.ap-dd-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--ap-border);border-radius:16px;box-shadow:0 20px 50px -15px rgba(15,27,23,.25);z-index:50;display:none;overflow:hidden;animation:apDdIn .18s ease;}
.ap-dd.open .ap-dd-menu{display:block;}
@keyframes apDdIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.ap-dd-search{display:flex;align-items:center;gap:.55rem;padding:.7rem .9rem;border-bottom:1px solid var(--ap-border);background:var(--ap-soft);}
.ap-dd-search i{color:var(--ap-muted);}
.ap-dd-search input{flex:1;border:none;background:transparent;outline:none;font-family:inherit;font-size:.9rem;color:var(--ap-dark);}
.ap-dd-list{max-height:280px;overflow-y:auto;padding:.4rem;}
.ap-dd-list::-webkit-scrollbar{width:6px;}.ap-dd-list::-webkit-scrollbar-thumb{background:var(--ap-border);border-radius:6px;}
.ap-dd-opt{display:flex;align-items:center;gap:.6rem;padding:.65rem .7rem;border-radius:10px;cursor:pointer;font-size:.92rem;color:var(--ap-dark);font-weight:600;transition:.15s;}
.ap-dd-opt .ic{width:28px;height:28px;display:grid;place-items:center;background:var(--ap-soft);border-radius:8px;font-size:1.05rem;flex-shrink:0;}
.ap-dd-opt .t{flex:1;}
.ap-dd-opt .m{color:var(--ap-muted);font-size:.78rem;font-weight:600;}
.ap-dd-opt .tick{opacity:0;color:var(--ap-green);font-size:.85rem;margin-left:.4rem;}
.ap-dd-opt:hover{background:var(--ap-green-light);}
.ap-dd-opt.on{background:var(--ap-green-light);color:var(--ap-green-dark);}
.ap-dd-opt.on .tick{opacity:1;}
.ap-dd-empty{padding:1.5rem;text-align:center;color:var(--ap-muted);font-size:.88rem;}
/* ============== PHONE INPUT GROUP ============== */
.pp-phone{display:flex;align-items:stretch;background:var(--ap-soft);border:1.5px solid var(--ap-border);border-radius:14px;overflow:hidden;transition:.2s;}
.pp-phone:focus-within{border-color:var(--ap-green);background:#fff;box-shadow:0 0 0 4px rgba(14,159,110,.1);}
.pp-phone .flag{padding:0 .9rem;display:flex;align-items:center;gap:.45rem;border-right:1.5px solid var(--ap-border);font-weight:700;color:var(--ap-dark);font-size:.95rem;background:#fff;}
.pp-phone input{flex:1;border:none;background:transparent;padding:.95rem 1rem;font-size:1.05rem;font-family:var(--font-display);letter-spacing:.05em;font-weight:600;color:var(--ap-dark);outline:none;min-width:0;}
.pp-phone input::placeholder{color:#a8b2af;font-weight:500;letter-spacing:.02em;}
/* ============== DATA PLAN TABS + COMPACT GRID ============== */
.pp-pills{display:flex;gap:.4rem;background:var(--ap-soft);padding:.3rem;border-radius:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pp-pills::-webkit-scrollbar{display:none;}
.pp-pills button{flex:1;min-width:74px;border:none;background:transparent;padding:.55rem .7rem;border-radius:10px;font-weight:700;font-size:.82rem;color:var(--ap-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap;}
.pp-pills button.on{background:#fff;color:var(--ap-green);box-shadow:0 4px 10px -4px rgba(14,159,110,.25);}
.pp-pills button i{font-size:.78rem;}
.pp-data-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.5rem;margin-top:.7rem;}
@media (min-width:768px){.pp-data-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}}
.pp-data{cursor:pointer;border:1.5px solid var(--ap-border);background:#fff;border-radius:12px;padding:.65rem .5rem;text-align:center;transition:.18s;}
.pp-data .sz{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ap-dark);line-height:1.1;}
.pp-data .du{font-size:.7rem;color:var(--ap-muted);margin-top:.15rem;font-weight:600;}
.pp-data .pr{margin-top:.3rem;font-size:.78rem;font-weight:800;color:var(--ap-green);}
.pp-data:hover{border-color:var(--ap-green);transform:translateY(-2px);}
.pp-data.on{background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));border-color:var(--ap-green);}
.pp-data.on .sz,.pp-data.on .du,.pp-data.on .pr{color:#fff;}
/* ============== VIRTUAL ACCOUNT (Fund wallet) ============== */
.va-card{background:linear-gradient(160deg,#0f1b17 0%,#143726 60%,#0a7d56 100%);color:#fff;border-radius:22px;padding:1.6rem 1.5rem;position:relative;overflow:hidden;box-shadow:0 24px 50px -20px rgba(14,159,110,.5);}
.va-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(242,183,5,.25),transparent 70%);right:-100px;top:-100px;}
.va-card::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);left:-60px;bottom:-60px;}
.va-card .va-lab{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;display:flex;align-items:center;gap:.4rem;}
.va-card .va-bank{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-top:.3rem;position:relative;z-index:1;}
.va-card .va-num{font-family:var(--font-display);font-weight:800;font-size:2.1rem;letter-spacing:.08em;margin:.4rem 0 .15rem;color:#fff;position:relative;z-index:1;display:flex;align-items:center;gap:.6rem;}
.va-card .va-name{font-size:.92rem;opacity:.9;position:relative;z-index:1;}
.va-card .va-copy{background:rgba(255,255,255,.15);border:none;color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;transition:.2s;}
.va-card .va-copy:hover{background:var(--ap-gold);color:#0f1b17;}
.va-steps{margin-top:1.4rem;display:grid;gap:.8rem;}
.va-step{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--ap-border);border-radius:14px;padding:.95rem 1rem;}
.va-step .n{width:30px;height:30px;border-radius:9px;background:var(--ap-green-light);color:var(--ap-green);font-weight:800;display:grid;place-items:center;flex-shrink:0;font-family:var(--font-display);}
.va-step .t{font-weight:700;color:var(--ap-dark);font-size:.95rem;}
.va-step .s{font-size:.82rem;color:var(--ap-muted);margin-top:.15rem;}
.va-generate{text-align:center;padding:2.5rem 1.5rem;background:var(--ap-soft);border:1.5px dashed var(--ap-border);border-radius:20px;}
.va-generate i{font-size:2.4rem;color:var(--ap-green);margin-bottom:.8rem;}
.va-generate h3{font-size:1.2rem;margin-bottom:.3rem;}
.va-generate p{font-size:.9rem;margin-bottom:1.2rem;}
/* ============== STYLED PROMPT INPUT ============== */
.ap-prompt-in{width:100%;background:var(--ap-soft);border:1.5px solid var(--ap-border);border-radius:12px;padding:.85rem 1rem;font-size:1rem;font-family:var(--font-display);font-weight:700;text-align:center;color:var(--ap-dark);margin:0 0 1.1rem;}
.ap-prompt-in:focus{outline:none;border-color:var(--ap-green);background:#fff;box-shadow:0 0 0 4px rgba(14,159,110,.1);}
/* ============== BOTTOM NAV (label fix for long labels) ============== */
.bottom-nav a span{font-size:.75rem;text-align:center;line-height:1;letter-spacing:-.01em;}
/* ============== ID PILL (orders/transactions list) ============== */
.id-pill{display:inline-block;font-family:var(--font-mono);font-size:.7rem;background:var(--ap-green-light);color:var(--ap-green-dark);padding:.18rem .5rem;border-radius:6px;font-weight:700;letter-spacing:.04em;margin-top:.15rem;}
/* ============== NOTIFICATION BELL ============== */
.notif-bell{position:relative;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--ap-border);display:inline-flex;align-items:center;justify-content:center;color:var(--ap-dark);text-decoration:none;transition:.2s;}
.notif-bell:hover{border-color:var(--ap-green);color:var(--ap-green);transform:translateY(-1px);}
.notif-bell .ndot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e11d48;color:#fff;font-size:.75rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;}
/* ============== NOTIFICATIONS PAGE ============== */
.notif-item{display:flex;gap:.9rem;padding:1rem;border:1px solid var(--ap-border);border-radius:14px;background:#fff;margin-bottom:.6rem;transition:.2s;}
.notif-item.unread{border-left:3px solid var(--ap-green);background:linear-gradient(180deg,#f0fbf6,#fff);}
.notif-item:hover{border-color:var(--ap-green);transform:translateY(-1px);}
.notif-ic{width:44px;height:44px;border-radius:12px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;}
.notif-ic.success{background:#d1fae5;color:#047857;}
.notif-ic.info{background:#dbeafe;color:#1d4ed8;}
.notif-ic.warn{background:#fef3c7;color:#b45309;}
.notif-item h6{margin:0 0 .1rem;font-weight:700;}
.notif-item p{margin:0;color:#64748b;font-size:.88rem;}
.notif-item .tm{color:#94a3b8;font-size:.75rem;margin-top:.2rem;}
/* ============== REFERRAL PAGE ============== */
.ref-hero{background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;border-radius:22px;padding:2rem;position:relative;overflow:hidden;}
.ref-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 60%);}
.ref-code-box{background:rgba(255,255,255,.15);border:1px dashed rgba(255,255,255,.4);border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.ref-code-box code{font-family:var(--font-mono);font-size:1.15rem;color:#fff;letter-spacing:.05em;font-weight:700;}
.ref-share a{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--ap-dark);display:inline-flex;align-items:center;justify-content:center;margin-right:.5rem;transition:.2s;text-decoration:none;}
.ref-share a:hover{background:var(--ap-gold);color:#fff;transform:translateY(-2px);}
.ref-stat{background:#fff;border:1px solid var(--ap-border);border-radius:16px;padding:1.1rem;}
.ref-stat .v{font-size:1.5rem;font-weight:800;color:var(--ap-dark);font-family:var(--font-display);}
.ref-stat .l{color:#64748b;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
/* ============== SUPPORT / TICKETS ============== */
.tk-card{background:#fff;border:1px solid var(--ap-border);border-radius:16px;padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;transition:.2s;}
.tk-card:hover{border-color:var(--ap-green);}
.tk-badge{padding:.25rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.tk-open{background:#dbeafe;color:#1d4ed8;}
.tk-answered{background:#d1fae5;color:#047857;}
.tk-closed{background:#e5e7eb;color:#475569;}
.tk-high{color:#dc2626;}.tk-medium{color:#d97706;}.tk-low{color:#059669;}
.help-tile{background:#fff;border:1px solid var(--ap-border);border-radius:16px;padding:1.4rem;text-align:center;transition:.2s;text-decoration:none;color:inherit;display:block;height:100%;}
.help-tile:hover{border-color:var(--ap-green);transform:translateY(-3px);box-shadow:0 12px 28px rgba(14,159,110,.12);color:inherit;}
.help-tile i{font-size:1.6rem;color:var(--ap-green);margin-bottom:.6rem;}
/* ============== FLOATING SUPPORT WIDGET ============== */
.ap-support-fab{position:fixed;right:18px;bottom:88px;z-index:900;border:none;border-radius:999px;padding:.7rem 1.1rem;background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;font-weight:700;box-shadow:0 12px 30px rgba(14,159,110,.35);display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;transition:.2s;}
.ap-support-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(14,159,110,.45);}
@media(min-width:992px){.ap-support-fab{bottom:22px;}}
.ap-support-panel{position:fixed;right:18px;bottom:150px;z-index:901;width:min(340px,calc(100vw - 36px));background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.18);overflow:hidden;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:.22s;border:1px solid var(--ap-border);}
.ap-support-panel.open{transform:none;opacity:1;pointer-events:auto;}
.ap-support-panel .hd{padding:.9rem 1rem;background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:.5rem;}
.ap-support-panel .hd b{font-size:.95rem;}
.ap-support-panel .hd .s{font-size:.75rem;opacity:.9;display:flex;align-items:center;gap:.35rem;}
.ap-support-panel .hd .s .on{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.3);}
.ap-support-panel .x{background:transparent;border:none;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;}
.ap-support-panel .bd{padding:1rem;max-height:280px;overflow:auto;background:#f8fafc;}
.ap-support-panel .msg{background:#fff;padding:.7rem .9rem;border-radius:12px;font-size:.85rem;border:1px solid var(--ap-border);margin-bottom:.6rem;line-height:1.4;}
.ap-support-panel .quick{display:grid;gap:.4rem;}
.ap-support-panel .quick a{background:#fff;border:1px solid var(--ap-border);padding:.6rem .8rem;border-radius:10px;text-decoration:none;color:var(--ap-dark);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:.15s;}
.ap-support-panel .quick a:hover{border-color:var(--ap-green);color:var(--ap-green);}
.ap-support-panel .ft{display:flex;gap:.4rem;padding:.7rem;border-top:1px solid var(--ap-border);background:#fff;}
.ap-support-panel .ft input{flex:1;border:1px solid var(--ap-border);border-radius:10px;padding:.55rem .7rem;font-size:.88rem;outline:none;}
.ap-support-panel .ft input:focus{border-color:var(--ap-green);}
.ap-support-panel .ft button{border:none;background:var(--ap-green);color:#fff;border-radius:10px;width:40px;cursor:pointer;}
/* ============== TIER CHIP (loyalty) ============== */
.tier-chip{display:inline-flex;align-items:center;gap:.4rem;margin:.4rem .8rem 1rem;padding:.35rem .7rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.75rem;font-weight:700;color:#e6ede9;}
.tier-chip i{font-size:.85rem;}
/* ============== WALLET PILL (mobile bar) ============== */
.wallet-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:999px;background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;font-weight:700;font-size:.82rem;text-decoration:none;white-space:nowrap;}
.wallet-pill:hover{color:#fff;filter:brightness(1.05);}
/* ============== GLOBAL RESPONSIVENESS POLISH ============== */
@media (max-width:600px){
.dash-topbar{padding:.8rem .9rem;border-radius:12px;gap:.6rem;}
.dash-topbar h2{font-size:1.05rem !important;}
.dash-topbar .user-chip .avatar{width:36px;height:36px;font-size:.85rem;}
.stat-tile h3{font-size:1.1rem;}
.stat-tile .label{font-size:.75rem;}
.id-pill{font-size:.75rem;padding:.14rem .4rem;}
.btn-ap{padding:.7rem 1.1rem;font-size:.85rem;}
.wallet-card{padding:1.2rem;}
.wallet-card .bal{font-size:1.7rem;}
.pp-hero .ph-ic{width:48px;height:48px;font-size:1.2rem;border-radius:14px;}
.pp-hero h1{font-size:1.05rem;}
.pp-hero .sub{font-size:.78rem;}
.pp-card{padding:1.1rem;border-radius:16px;}
.pp-cta{padding:.9rem;font-size:.92rem;}
.pp-chips{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));}
}
@media (max-width:400px){
.bottom-nav a{font-size:.75rem;padding:.3rem .1rem;}
.bottom-nav a i{font-size:.98rem;}
.bottom-nav a span{font-size:.75rem;}
}
/* Admin responsive tweaks */
@media (max-width:600px){
.admin-main{padding:.8rem .8rem 3rem !important;}
.admin-main .admin-topbar{margin-left:-.8rem;margin-right:-.8rem;}
.acard{padding:1rem;border-radius:14px;}
.akpi{padding:.9rem;border-radius:14px;}
.akpi .val{font-size:1.15rem;}
.akpi .lab{font-size:.75rem;}
.atable th,.atable td{padding:.55rem .5rem;font-size:.78rem;}
.admin-topbar{padding:.7rem .9rem;border-radius:12px;}
.admin-topbar .atitle{font-size:1rem;}
.admin-topbar .asub{font-size:.7rem;}
.admin-topbar .apill{padding:.3rem .55rem;font-size:.75rem;}
}
/* Table responsive scroll shadow hint */
.table-responsive{-webkit-overflow-scrolling:touch;}
/* ============== GIFT CARDS ============== */
.gc-brand{cursor:pointer;background:#fff;border:1.5px solid var(--ap-border);border-radius:16px;padding:1rem .8rem;text-align:center;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:.35rem;}
.gc-brand .emoji{font-size:1.8rem;line-height:1;}
.gc-brand .n{font-weight:800;font-size:.9rem;color:var(--ap-dark);}
.gc-brand .r{font-size:.75rem;color:var(--ap-green-dark);background:var(--ap-green-light);padding:.15rem .45rem;border-radius:6px;font-weight:700;}
.gc-brand:hover{border-color:var(--ap-green);transform:translateY(-2px);box-shadow:var(--ap-shadow-sm);}
.gc-brand.on{background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));border-color:var(--ap-green);}
.gc-brand.on .n{color:#fff;}.gc-brand.on .r{background:rgba(255,255,255,.2);color:#fff;}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:.6rem;}
.gc-drop{border:1.5px dashed var(--ap-border);border-radius:14px;padding:1.6rem 1rem;text-align:center;background:var(--ap-soft);color:var(--ap-muted);cursor:pointer;transition:.2s;}
.gc-drop:hover{border-color:var(--ap-green);background:#fff;color:var(--ap-dark);}
.gc-drop i{font-size:1.8rem;color:var(--ap-green);margin-bottom:.4rem;display:block;}
/* ============== REFERRAL UPGRADES (tiers, leaderboard) ============== */
.ref-tier-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:1.2rem 0 .3rem;}
.ref-tier{background:#fff;border:1.5px solid var(--ap-border);border-radius:14px;padding:.9rem .6rem;text-align:center;position:relative;}
.ref-tier.reached{border-color:var(--ap-green);background:linear-gradient(180deg,#f0fbf6,#fff);}
.ref-tier.reached::after{content:"✓";position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;background:var(--ap-green);color:#fff;font-size:.75rem;font-weight:800;display:grid;place-items:center;}
.ref-tier .lb{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ap-muted);font-weight:700;}
.ref-tier .co{font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--ap-dark);}
.ref-tier .rw{font-size:.78rem;color:var(--ap-green-dark);font-weight:700;margin-top:.2rem;}
@media (max-width:600px){.ref-tier-track{grid-template-columns:repeat(2,minmax(0,1fr));}.ref-tier .co{font-size:.95rem;}}
.ref-prog{height:8px;background:var(--ap-soft);border-radius:999px;overflow:hidden;margin:.6rem 0 .3rem;}
.ref-prog .b{height:100%;background:linear-gradient(90deg,var(--ap-green),var(--ap-gold));border-radius:999px;transition:.5s;}
.lb-item{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--ap-border);}
.lb-item:last-child{border-bottom:none;}
.lb-item .rk{width:32px;height:32px;border-radius:50%;background:var(--ap-soft);color:var(--ap-muted);font-weight:800;display:grid;place-items:center;font-size:.85rem;}
.lb-item.top .rk{background:linear-gradient(135deg,var(--ap-gold),var(--ap-gold-dark));color:#fff;}
.lb-item.you{background:var(--ap-green-light);border-radius:12px;padding:.7rem;border-bottom:none;}
.lb-item .nm{font-weight:700;color:var(--ap-dark);}
.lb-item .ct{font-size:.75rem;color:var(--ap-muted);}
.lb-item .er{color:var(--ap-green-dark);font-weight:800;font-family:var(--font-display);}
/* Steps list (how it works) */
.step-list{display:grid;gap:.8rem;}
.step-item{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--ap-border);border-radius:14px;padding:1rem;}
.step-item .n{width:34px;height:34px;border-radius:10px;background:var(--ap-green-light);color:var(--ap-green);font-weight:800;display:grid;place-items:center;flex:none;font-family:var(--font-display);}
.step-item .t{font-weight:700;color:var(--ap-dark);}
.step-item .s{font-size:.85rem;color:var(--ap-muted);margin-top:.15rem;}
/* ============== ADMIN NEW WIDGETS (broadcast, fraud, margins) ============== */
.a-form input,.a-form textarea,.a-form select{background:#0b1220;border:1px solid #1a2238;color:#fff;border-radius:10px;padding:.6rem .9rem;width:100%;font-family:inherit;font-size:.9rem;}
.a-form input:focus,.a-form textarea:focus,.a-form select:focus{outline:none;border-color:#5b21b6;box-shadow:0 0 0 3px rgba(91,33,182,.2);}
.a-list-item{display:flex;justify-content:space-between;gap:.8rem;padding:.7rem .8rem;border:1px solid #1a2238;border-radius:10px;background:#0b1220;margin-bottom:.5rem;}
.a-list-item .t{color:#fff;font-weight:700;font-size:.9rem;}
.a-list-item .s{color:#7a8aae;font-size:.75rem;margin-top:.15rem;}
.a-margin-row{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px dashed #1a2238;}
.a-margin-row:last-child{border-bottom:none;}
.a-margin-row .svc{color:#cdd6e4;font-weight:600;font-size:.88rem;}
.a-margin-row input{background:#0b1220;border:1px solid #1a2238;color:#fff;border-radius:8px;padding:.35rem .5rem;text-align:right;font-family:var(--font-mono);}
.risk-h{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.28);padding:.15rem .5rem;border-radius:6px;font-size:.7rem;font-weight:700;}
.risk-m{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.28);padding:.15rem .5rem;border-radius:6px;font-size:.7rem;font-weight:700;}
/* ============== API KEYS (profile) ============== */
.api-key-row{display:flex;align-items:center;gap:.6rem;background:var(--ap-soft);border:1px solid var(--ap-border);border-radius:12px;padding:.7rem .9rem;margin-bottom:.5rem;}
.api-key-row code{flex:1;font-family:var(--font-mono);font-size:.85rem;color:var(--ap-dark);overflow:hidden;text-overflow:ellipsis;}
.api-key-row .lbl{font-size:.75rem;font-weight:700;color:var(--ap-muted);text-transform:uppercase;letter-spacing:.08em;}
/* ============== TOGGLE SWITCH ============== */
.ap-toggle{position:relative;display:inline-block;width:44px;height:24px;flex:none;}
.ap-toggle input{opacity:0;width:0;height:0;}
.ap-toggle .sl{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s;cursor:pointer;}
.ap-toggle .sl::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.ap-toggle input:checked+.sl{background:var(--ap-green);}
.ap-toggle input:checked+.sl::before{transform:translateX(20px);}
/* ============== BREADCRUMB (dashboard header) ============== */
.crumb{font-size:.75rem;color:var(--ap-muted);}
.crumb a{color:var(--ap-muted);}.crumb a:hover{color:var(--ap-green);}
/* ============== Table hover polish for user tables ============== */
.table-ap tr:hover td{background:#fbfefc;}
/* Skeleton loader */
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.skeleton{background:linear-gradient(90deg,#eef2f0 25%,#f7faf9 37%,#eef2f0 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px;color:transparent !important;}
/* Announcement banner (user dashboard) */
/* Broadcast announcement — unique glass ribbon */
.ap-announce{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#0f172a 0%,#1e293b 55%,#0E9F6E 130%)!important;color:#fff!important;border-radius:18px!important;padding:.95rem 1.1rem .95rem 3.4rem!important;display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;box-shadow:0 18px 36px -18px rgba(14,159,110,.55),0 0 0 1px rgba(255,255,255,.06) inset;font-weight:600;border:none!important;}
.ap-announce::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 0% 0%,rgba(242,183,5,.28),transparent 55%),radial-gradient(circle at 100% 100%,rgba(14,159,110,.4),transparent 55%);z-index:-1;pointer-events:none;}
.ap-announce::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);animation:announceShine 5s ease-in-out infinite;pointer-events:none;}
@keyframes announceShine{0%,100%{transform:translateX(0);}55%{transform:translateX(360%);}}
.ap-announce .ann-ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#F2B705,#d97706);display:grid;place-items:center;color:#0f172a;font-size:1rem;box-shadow:0 6px 14px -6px rgba(242,183,5,.6);}
.ap-announce .ann-body{min-width:0;flex:1;font-size:.9rem;line-height:1.35;letter-spacing:-.005em;color:#e6fff5;}
.ap-announce .ann-body b{font-weight:800;color:#fef9c3;margin-right:.25rem;}
.ap-announce .btn-close{background-color:rgba(255,255,255,.16)!important;border-radius:8px!important;opacity:.9;filter:invert(1) grayscale(1) brightness(2);padding:.35rem!important;margin-left:.4rem;}
.ap-announce .btn-close:hover{background-color:rgba(255,255,255,.28)!important;opacity:1;}
/* Order summary card (airtime/data) */
.ord-sum{background:linear-gradient(135deg,#f7faf9,#eef7f2);border:1px dashed var(--ap-border);border-radius:14px;padding:.85rem 1rem;}
.ord-sum .os-row{display:flex;justify-content:space-between;align-items:center;padding:.35rem 0;font-size:.88rem;color:var(--ap-muted);}
.ord-sum .os-row b{color:var(--ap-dark);font-weight:700;}
.ord-sum .os-total{border-top:1px solid var(--ap-border);margin-top:.35rem;padding-top:.6rem;font-size:.95rem;}
.ord-sum .os-total b{color:var(--ap-green-dark);font-family:var(--font-display);font-weight:800;font-size:1.1rem;}
/* ============== OPAY-STYLE COMPACT DASHBOARD TILES ============== */
.svc-grid-mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;}
@media (max-width:600px){.svc-grid-mini{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;}}
.svc-mini{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.9rem .35rem;background:#fff;border:1px solid var(--ap-border);border-radius:16px;text-decoration:none;color:var(--ap-dark);transition:.2s;text-align:center;}
.svc-mini:hover{transform:translateY(-3px);border-color:var(--ap-green);color:var(--ap-dark);box-shadow:var(--ap-shadow-sm);}
.svc-mini .ic{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--ap-green-light),#fff4d6);color:var(--ap-green);display:grid;place-items:center;font-size:1.15rem;}
.svc-mini .nm{font-size:.75rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;}
@media (max-width:400px){.svc-mini{padding:.7rem .2rem;}.svc-mini .ic{width:38px;height:38px;font-size:1rem;}.svc-mini .nm{font-size:.75rem;}}
/* Compact stat strip (below service tiles) */
.stat-strip-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-top:.8rem;background:#fff;border:1px dashed var(--ap-border);border-radius:14px;padding:.7rem;}
.stat-strip-mini .m{text-align:center;padding:.3rem .2rem;border-right:1px solid var(--ap-border);}
.stat-strip-mini .m:last-child{border-right:none;}
.stat-strip-mini .m .v{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--ap-dark);line-height:1;}
.stat-strip-mini .m .l{font-size:.75rem;color:var(--ap-muted);margin-top:.25rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
@media (max-width:480px){.stat-strip-mini{grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem;}.stat-strip-mini .m{border-right:none;border-bottom:1px solid var(--ap-border);padding:.5rem .2rem;}.stat-strip-mini .m:nth-last-child(-n+2){border-bottom:none;}}
/* ============== SEARCHABLE DROPDOWN ============== */
.sd-wrap{position:relative;}
.sd-toggle{width:100%;background:#fff;border:1.5px solid var(--ap-border);border-radius:14px;padding:.85rem 2.6rem .85rem 1rem;font-size:.95rem;color:var(--ap-dark);font-weight:600;text-align:left;display:flex;align-items:center;gap:.6rem;cursor:pointer;position:relative;min-height:52px;}
.sd-toggle::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--ap-green);font-size:.75rem;transition:.2s;}
.sd-wrap.open .sd-toggle::after{transform:translateY(-50%) rotate(180deg);}
.sd-toggle .sd-flag{font-size:1.3rem;line-height:1;}
.sd-toggle .sd-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sd-toggle .sd-price{font-family:var(--font-display);color:var(--ap-green);font-weight:800;font-size:.85rem;}
.sd-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--ap-border);border-radius:14px;box-shadow:0 20px 50px -18px rgba(15,27,23,.25);z-index:50;overflow:hidden;display:none;max-height:340px;}
.sd-wrap.open .sd-panel{display:flex;flex-direction:column;}
.sd-search{padding:.75rem;border-bottom:1px solid var(--ap-border);position:relative;}
.sd-search input{width:100%;border:1.5px solid var(--ap-border);border-radius:10px;padding:.6rem .8rem .6rem 2.2rem;font-size:.9rem;outline:none;}
.sd-search input:focus{border-color:var(--ap-green);box-shadow:0 0 0 3px var(--ap-green-light);}
.sd-search i{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);color:var(--ap-muted);font-size:.85rem;}
.sd-list{overflow-y:auto;flex:1;}
.sd-item{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;cursor:pointer;font-size:.9rem;border-bottom:1px solid #f4f7f6;transition:.15s;}
.sd-item:hover{background:var(--ap-green-light);}
.sd-item.on{background:linear-gradient(90deg,var(--ap-green-light),#fff4d6);}
.sd-item .sd-flag{font-size:1.2rem;}
.sd-item .sd-nm{flex:1;font-weight:600;}
.sd-item .sd-pr{color:var(--ap-green);font-weight:800;font-family:var(--font-display);font-size:.85rem;}
.sd-item .sd-none{color:var(--ap-muted);text-align:center;padding:1rem;font-size:.85rem;}
/* Big CTA with price inside */
.cta-price{width:100%;background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;border:none;border-radius:16px;padding:.9rem 1.2rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem;transition:.2s;box-shadow:0 12px 28px -12px rgba(14,159,110,.7);margin-top:1.1rem;}
.cta-price:hover{transform:translateY(-2px);}
.cta-price .cp-lbl{font-family:var(--font-display);font-size:1rem;display:flex;align-items:center;gap:.5rem;}
.cta-price .cp-total{background:var(--ap-gold);color:#0f1b17;padding:.45rem .85rem;border-radius:10px;font-family:var(--font-display);font-size:1rem;box-shadow:0 4px 10px -3px rgba(242,183,5,.55);}
/* ============== OTP RECEIVE BOX ============== */
.otp-box{background:linear-gradient(160deg,#0f1b17,#163026);border-radius:20px;padding:1.5rem;color:#fff;position:relative;overflow:hidden;}
.otp-box::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:rgba(242,183,5,.12);}
.otp-num{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;letter-spacing:.02em;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin:.8rem 0;}
.otp-num .cp-btn{background:var(--ap-gold);color:#0f1b17;border:none;padding:.45rem .8rem;border-radius:8px;font-family:var(--font-body);font-weight:800;font-size:.75rem;cursor:pointer;flex-shrink:0;}
.otp-code{font-family:var(--font-mono);font-size:2rem;font-weight:800;letter-spacing:.4em;text-align:center;background:linear-gradient(135deg,var(--ap-gold),var(--ap-gold-dark));color:#0f1b17;padding:1rem;border-radius:14px;margin:.8rem 0;position:relative;z-index:1;}
.otp-wait{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.2rem;background:rgba(255,255,255,.06);border-radius:12px;font-size:.9rem;position:relative;z-index:1;}
.otp-wait .dot-load{width:8px;height:8px;border-radius:50%;background:var(--ap-gold);animation:pulse 1.4s infinite;}
.otp-actions{display:flex;gap:.5rem;margin-top:.8rem;position:relative;z-index:1;}
.otp-actions .btn-sm-danger{flex:1;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.35);color:#fecaca;padding:.7rem;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer;}
.otp-actions .btn-sm-primary{flex:1;background:var(--ap-gold);color:#0f1b17;border:none;padding:.7rem;border-radius:10px;font-weight:800;font-size:.85rem;cursor:pointer;}
/* ============== MODERN TABLE ============== */
.tbl-modern{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--ap-shadow-sm);}
.tbl-modern thead th{background:#f7faf9;text-align:left;padding:.85rem 1rem;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ap-muted);border-bottom:1px solid var(--ap-border);white-space:nowrap;}
.tbl-modern tbody td{padding:.9rem 1rem;border-bottom:1px solid #f0f4f2;font-size:.88rem;vertical-align:middle;}
.tbl-modern tbody tr:last-child td{border-bottom:none;}
.tbl-modern tbody tr:hover{background:#fafcfb;}
.tbl-modern .t-id{font-family:var(--font-mono);font-size:.75rem;color:var(--ap-muted);}
.tbl-modern .t-amt{font-family:var(--font-display);font-weight:800;white-space:nowrap;}
.tbl-modern .t-amt.pos{color:var(--ap-green);}
.tbl-modern .t-amt.neg{color:#ef4444;}
.tbl-modern .t-type{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;}
.tbl-modern .t-type .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:.75rem;}
.tbl-modern .btn-view{background:var(--ap-green-light);color:var(--ap-green-dark);border:none;padding:.4rem .75rem;border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;}
.tbl-modern .btn-view:hover{background:var(--ap-green);color:#fff;}
.tbl-modern .code-cell{font-family:var(--font-mono);font-weight:800;background:#fff4d6;color:#8a6300;padding:.25rem .55rem;border-radius:6px;font-size:.8rem;display:inline-block;}
.tbl-modern .code-cell.dash{background:#f1f5f4;color:#94a3b8;}
/* Card layout below 640px */
@media (max-width:640px){
.tbl-modern thead{display:none;}
.tbl-modern,.tbl-modern tbody,.tbl-modern tr,.tbl-modern td{display:block;width:100%;}
.tbl-modern{background:transparent;box-shadow:none;}
.tbl-modern tbody tr{background:#fff;border:1px solid var(--ap-border);border-radius:14px;margin-bottom:.7rem;padding:.4rem;box-shadow:var(--ap-shadow-sm);}
.tbl-modern tbody td{padding:.5rem .8rem;border-bottom:none;display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.85rem;}
.tbl-modern tbody td::before{content:attr(data-l);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ap-muted);font-weight:700;}
.tbl-modern tbody td.t-hero::before{display:none;}
.tbl-modern tbody td.t-hero{background:#f7faf9;border-radius:10px;margin-bottom:.3rem;font-weight:700;justify-content:flex-start;}
}
/* ============== COPY TOAST (fund wallet) ============== */
.copy-toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;
transform:translateX(-50%) translateY(-160%);max-width:min(92vw,380px);
background:linear-gradient(135deg,var(--ap-green),var(--ap-green-dark));color:#fff;
padding:.75rem 1.1rem;border-radius:14px;box-shadow:0 20px 40px -12px rgba(14,159,110,.55);
display:none;align-items:center;gap:.65rem;font-weight:700;z-index:2000;
transition:transform .4s cubic-bezier(.2,.85,.25,1),opacity .3s;opacity:0;
pointer-events:none;font-size:.86rem;}
.copy-toast .ck{width:22px;height:22px;border-radius:50%;background:var(--ap-gold);color:#0f1b17;
display:grid;place-items:center;font-size:.7rem;flex-shrink:0;}
.copy-toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.copy-toast.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);}
.copy-toast.error{background:linear-gradient(135deg,#ef4444,#b91c1c);}
.copy-toast.error .ck{background:#fff;color:#b91c1c;}
@media (max-width:991.98px){.copy-toast{top:calc(70px + env(safe-area-inset-top));}}
/* ============== PROGRESS BAR (boost) ============== */
.pg-wrap{background:#f1f5f4;border-radius:999px;height:8px;overflow:hidden;position:relative;margin:.5rem 0;}
.pg-wrap .pg-bar{height:100%;background:linear-gradient(90deg,var(--ap-green),var(--ap-gold));border-radius:999px;transition:width .6s;position:relative;}
.pg-wrap .pg-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 1.6s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.pg-lbl{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ap-muted);font-weight:600;}
/* compact network chips (airtime) */
.net-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;}
.net-mini label{cursor:pointer;background:#fff;border:1.5px solid var(--ap-border);border-radius:12px;padding:.6rem .3rem;text-align:center;transition:.2s;}
.net-mini label img{width:32px;height:32px;object-fit:contain;}
.net-mini label .nm{display:block;font-size:.7rem;font-weight:700;margin-top:.2rem;color:var(--ap-dark);}
.net-mini input{display:none;}
.net-mini input:checked+.nm{color:var(--ap-green);}
.net-mini label:has(input:checked){border-color:var(--ap-green);background:var(--ap-green-light);}
.plan-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.45rem;}
.plan-mini label{cursor:pointer;background:#fff;border:1.5px solid var(--ap-border);border-radius:10px;padding:.5rem .35rem;text-align:center;transition:.15s;}
.plan-mini input{display:none;}
.plan-mini label:has(input:checked){border-color:var(--ap-green);background:var(--ap-green-light);}
.plan-mini .pn{font-weight:800;font-size:.82rem;color:var(--ap-dark);line-height:1;}
.plan-mini .pd{font-size:.75rem;color:var(--ap-muted);margin-top:.15rem;}
.plan-mini .pp{font-family:var(--font-display);font-weight:800;color:var(--ap-green);font-size:.78rem;margin-top:.25rem;}
/* ============== ENHANCED BROADCAST BANNER (dashboard only) ============== */
.ap-announce{
position:relative;overflow:hidden;isolation:isolate;
background:linear-gradient(115deg,#0a1224 0%,#0f2a24 45%,#0a7d56 100%)!important;
color:#fff!important;border-radius:20px!important;padding:1.05rem 1.2rem 1.05rem 3.6rem!important;
display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem;
box-shadow:0 22px 48px -22px rgba(14,159,110,.7),0 0 0 1px rgba(242,183,5,.18) inset;
font-weight:600;border:none!important;animation:apAnnFloat 6s ease-in-out infinite;
}
.ap-announce::before{content:"";position:absolute;inset:0;z-index:-1;
background:
radial-gradient(circle at 0% 0%,rgba(242,183,5,.28),transparent 55%),
radial-gradient(circle at 100% 100%,rgba(14,159,110,.35),transparent 55%);}
.ap-announce::after{content:"";position:absolute;top:0;left:-30%;height:100%;width:35%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
transform:skewX(-18deg);animation:apShine 3.4s linear infinite;pointer-events:none;}
@keyframes apShine{0%{left:-30%;}100%{left:130%;}}
@keyframes apAnnFloat{0%,100%{box-shadow:0 22px 48px -22px rgba(14,159,110,.7),0 0 0 1px rgba(242,183,5,.18) inset;}50%{box-shadow:0 28px 60px -22px rgba(242,183,5,.55),0 0 0 1px rgba(242,183,5,.35) inset;}}
.ap-announce .ann-ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
width:38px;height:38px;border-radius:12px;
background:linear-gradient(135deg,#F2B705,#c99905);color:#0f1b17;
display:grid;place-items:center;font-size:1rem;box-shadow:0 8px 18px -6px rgba(242,183,5,.55);
animation:apBell 2.2s ease-in-out infinite;}
@keyframes apBell{0%,100%{transform:translateY(-50%) rotate(0);}10%,30%{transform:translateY(-50%) rotate(-12deg);}20%,40%{transform:translateY(-50%) rotate(12deg);}50%{transform:translateY(-50%) rotate(0);}}
.ap-announce .ann-body{flex:1;min-width:0;font-size:.9rem;line-height:1.35;}
.ap-announce .ann-body b{color:#F2B705;font-weight:800;letter-spacing:.01em;}
.ap-announce .btn-close{filter:invert(1) grayscale(1) brightness(1.4);opacity:.75;}
@media (max-width:520px){.ap-announce{padding:.9rem 1rem .9rem 3.2rem!important;font-size:.82rem;}.ap-announce .ann-ic{width:34px;height:34px;font-size:.9rem;}}
/* ============== THEME TOGGLE (dashboard) ============== */
/* ============ Avatar images ============ */
.dash-topbar .user-chip img.avatar,img.avatar{object-fit:cover;border:2px solid var(--ap-green-light);}
img.avatar-lg{width:92px;height:92px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;border:3px solid var(--ap-green-light);box-shadow:0 10px 24px -12px rgba(14,159,110,.55);}
/* ============ Virtual number timer ============ */
.vn-timer{display:flex;align-items:center;gap:.85rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:.75rem 1rem;margin-top:.9rem;position:relative;z-index:1;}
.vn-timer .tl{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;opacity:.75;}
.vn-timer .tv{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;line-height:1;}
.vn-timer .tbar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;min-width:60px;}
.vn-timer .tbar span{display:block;height:100%;background:linear-gradient(90deg,var(--ap-gold),#ffd75e);border-radius:99px;transition:width 1s linear;}
.vn-timer.done .tv{color:#ffb4b4;}
/* ============ Order detail page ============ */
.dt-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;margin-bottom:1rem;}
.dt-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;}
.dt-cell{background:var(--ap-soft);border:1px solid var(--ap-border);border-radius:14px;padding:.85rem 1rem;min-width:0;}
.dt-cell .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ap-muted);font-weight:700;}
.dt-cell .v{font-weight:700;font-size:.95rem;margin-top:.2rem;word-break:break-word;}
.dt-steps{list-style:none;margin:0;padding:0;}
.dt-steps li{display:flex;gap:.8rem;padding:.7rem 0;border-bottom:1px dashed var(--ap-border);font-size:.88rem;}
.dt-steps li:last-child{border-bottom:none;}
.dt-steps .di{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--ap-green-light);color:var(--ap-green-dark);font-size:.78rem;}
.dt-steps .di.warn{background:#fff4d6;color:#8a6300;}
.dt-steps .di.bad{background:#fde2e2;color:#a8281f;}
/* ============ Support contact tiles ============ */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;}
.sup-card{display:flex;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--ap-border);border-radius:18px;padding:1.05rem 1.1rem;text-decoration:none;color:inherit;transition:.22s;min-width:0;}
.sup-card:hover{transform:translateY(-3px);border-color:var(--ap-green);box-shadow:0 16px 30px -18px rgba(14,159,110,.5);}
.sup-card .si{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0;}
.sup-card b{display:block;font-size:.95rem;}
.sup-card .sm{font-size:.78rem;color:var(--ap-muted);word-break:break-word;}
/* ============ Referral balance + link ============ */
.ref-bal{background:linear-gradient(150deg,#0f1b17,#14503c 60%,#0E9F6E);color:#fff;border-radius:22px;padding:1.5rem;position:relative;overflow:hidden;box-shadow:var(--ap-shadow);}
.ref-bal::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(242,183,5,.28),transparent 65%);}
.ref-bal .rl{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;opacity:.8;position:relative;z-index:1;}
.ref-bal .rv{font-family:var(--font-display);font-size:2.1rem;font-weight:800;color:var(--ap-gold);line-height:1.1;position:relative;z-index:1;}
.ref-bal .rn{font-size:.8rem;opacity:.85;position:relative;z-index:1;}
.rlink{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem;background:var(--ap-soft);border:1px dashed var(--ap-border);border-radius:14px;padding:.7rem .9rem;}
.rlink code{font-family:var(--font-mono);font-size:.8rem;color:var(--ap-green-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;}
.rshare{display:flex;gap:.5rem;flex-wrap:wrap;}
/* Compact icon-only copy buttons (referral link/code, and reused anywhere
via .ap-copy-btn) -- small pill that fits inline without shouting. */
.ap-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
border:1px solid var(--ap-border);background:#fff;color:var(--ap-green-dark);width:34px;height:34px;
border-radius:10px;cursor:pointer;transition:var(--ap-transition);padding:0;font-size:.85rem;}
.ap-copy-btn:hover{background:var(--ap-green);border-color:var(--ap-green);color:#fff;transform:translateY(-1px);}
.ap-copy-btn.ap-copy-inline{width:auto;height:auto;border:none;background:none;padding:.1rem .3rem;
color:var(--ap-muted);font-size:.78rem;}
.ap-copy-btn.ap-copy-inline:hover{background:var(--ap-green-light);color:var(--ap-green-dark);transform:none;}
.rshare a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;text-decoration:none;font-size:1rem;}
/* ============ Category pill tabs (scrollable) ============ */
.pp-tabs.scroll{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pp-tabs.scroll::-webkit-scrollbar{display:none;}
.pp-tabs.scroll button{flex:0 0 auto;padding:.55rem 1rem;font-size:.83rem;white-space:nowrap;}
/* ============ Small responsive guards ============ */
@media (max-width:600px){
.dt-head{grid-template-columns:minmax(0,1fr);}
.vn-timer{flex-wrap:wrap;}
.ref-bal .rv{font-size:1.8rem;}
}
/* ============================================================
Dashboard mobile responsiveness pass
============================================================ */
/* Compact wallet balance card (dashboard hero) */
.wallet-card-compact{padding:1.25rem 1.3rem;border-radius:18px;}
.wallet-card-compact .bal{font-size:1.75rem;margin:.15rem 0 .25rem;}
.wallet-card-compact .btn-ap{padding:.5rem .95rem;font-size:.82rem;}
@media (max-width:575.98px){
.wallet-card-compact{padding:1rem 1.05rem;border-radius:16px;}
.wallet-card-compact .bal{font-size:1.45rem;}
.wallet-card-compact .small{font-size:.75rem;}
.wallet-card-compact .btn-ap{padding:.45rem .8rem;font-size:.76rem;flex:1;justify-content:center;}
.wallet-card-compact i.fa-wallet{font-size:1.3rem !important;}
}
@media (max-width:359.98px){
.wallet-card-compact .bal{font-size:1.25rem;}
}
/* Never allow sideways scrolling anywhere in the dashboard */
html,body{max-width:100%;overflow-x:hidden;}
.dash-main{min-width:0;}
.dash-main .row{--bs-gutter-x:.75rem;}
@media (max-width:575.98px){
.dash-main{padding:.85rem .75rem 6.5rem !important;}
.dash-card{padding:1rem !important;border-radius:14px;}
.dash-card h3{font-size:.98rem !important;}
.stat-strip-mini{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:.2rem;padding:.55rem .35rem;}
.stat-strip-mini .m{border-right:1px solid var(--ap-border) !important;border-bottom:none !important;padding:.25rem .1rem;}
.stat-strip-mini .m:last-child{border-right:none !important;}
.stat-strip-mini .m .v{font-size:.85rem;}
.stat-strip-mini .m .l{font-size:.75rem;letter-spacing:.02em;}
.stat-strip-mini .m .l i{display:none;}
.ref-hero{padding:1rem !important;}
.ref-hero .btn-ap{width:100%;justify-content:center;}
}
/* Tables inside the dashboard always scroll rather than stretch the page */
.dash-card .table-responsive{-webkit-overflow-scrolling:touch;}
/* --- Virtual-number server pill (which server fulfilled an order) --- */
.srv-pill{display:inline-block;font-size:.75rem;font-weight:700;padding:.15rem .5rem;border-radius:99px;background:#eef2f0;color:#5c6b66;}
/* ------------------------------------------------------------------
Fixed side navigation on laptop / desktop (>= 992px)
The shell is a CSS grid; on wide screens we pin the nav column to the
viewport and reserve its width on the grid so the main column keeps its
own single scrollbar and never slides under the nav.
Mobile behaviour (off-canvas nav + bottom nav) is untouched.
------------------------------------------------------------------- */
@media (min-width:992px){
.dash-shell{grid-template-columns:260px minmax(0,1fr);}
.dash-sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:1030;}
.dash-shell > .dash-main{grid-column:2;}
.admin-shell{grid-template-columns:240px minmax(0,1fr);}
.admin-side{position:fixed;top:0;left:0;width:240px;height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:1030;}
.admin-shell > .admin-main{grid-column:2;}
/* Slim scrollbars so the pinned nav feels native */
.dash-sidebar::-webkit-scrollbar,.admin-side::-webkit-scrollbar{width:6px;}
.dash-sidebar::-webkit-scrollbar-thumb,.admin-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;}
}
/* ============== KEYBOARD FOCUS IN CUSTOM DROPDOWNS ==============
static/js/ap-ui.js marks the option under keyboard focus with .ap-kb
(in addition to the per-flavour .focus class), so arrow-key users get
the same clear highlight as mouse hover on every dropdown. */
.sd-item.ap-kb, .sd2-item.ap-kb, .ac-item.ap-kb{
background:var(--ap-green-light,#eafaf3);
outline:2px solid var(--ap-green,#0E9F6E);
outline-offset:-2px;border-radius:10px;}
.sd-toggle:focus-visible, .sd2-toggle:focus-visible, .ap-combo-btn:focus-visible,
[data-copy]:focus-visible{outline:2px solid var(--ap-green,#0E9F6E);outline-offset:2px;border-radius:10px;}
/* =====================================================================
MOBILE TAP TARGETS (global safety net)
---------------------------------------------------------------------
Reported bug: on phones you had to hit the *text* of a dropdown row or
chip for it to register -- tapping the padding around it did nothing.
Two causes, both fixed here:
1. inner icons/images/spans swallowed the tap and the handler sat on
the parent row, so we make decorative children transparent to
pointer events;
2. several rows were shorter than the 44px minimum comfortable target.
===================================================================== */
.sd2-item, .sd-option, .sd-item, .ac-item, .offer-row, .plan-card, .net-tile,
.net-chip, .plan-mini label, .seg-toggle label,
.grp-pills button, .rc-chip, .pp-cta, .btn-ap,
.ap-switch button, .pp-tabs button, .sd2-toggle, .sd-toggle{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
cursor:pointer;
}
/* Children are decoration: the row itself always receives the tap. */
.sd2-item > *, .sd-option > *, .sd-item > *, .ac-item > *, .offer-row > *,
.plan-card > *, .net-tile > *,
.grp-pills button > *, .rc-chip > *, .ap-switch button > *,
.pp-tabs button > *, .pp-cta > *, .btn-ap > *{
pointer-events:none;
}
/* Comfortable minimum hit areas. */
.sd2-item, .sd-option, .sd-item, .ac-item, .offer-row, .plan-card, .net-tile{min-height:48px;}
.sd2-toggle, .sd-toggle{min-height:52px;}
.grp-pills button, .rc-chip{min-height:40px;display:inline-flex;align-items:center;justify-content:center;}
.seg-toggle span, .plan-mini .pn{min-height:44px;display:flex;align-items:center;justify-content:center;}
.ap-switch button, .pp-tabs button{min-height:46px;}
/* Radio/checkbox overlays must never block the label they belong to. */
.net-chip input, .plan-mini input, .seg-toggle input{pointer-events:none;}
/* Hover movement is a desktop enhancement; touch Safari must never retain a
translated/stuck tile after a tap. */
@media (hover:none){
.service-card:hover,.value-card:hover,.wallet-card:hover,.offer-row:hover,
.net-tile:hover,.plan-card:hover,.rc-chip:hover{transform:none !important;}
}
/* Highlight the live number panel right after a purchase (buy-numbers.html
scrolls to it instead of showing an alert). */
.otp-box.just-bought{animation:ap-just-bought 2.4s ease-out 1;}
@keyframes ap-just-bought{
0%{box-shadow:0 0 0 0 rgba(242,183,5,.55);}
60%{box-shadow:0 0 0 14px rgba(242,183,5,0);}
100%{box-shadow:0 0 0 0 rgba(242,183,5,0);}
}
/* =====================================================================
DECORATIVE PSEUDO-ELEMENTS MUST NEVER SWALLOW TAPS
---------------------------------------------------------------------
Reported bug: "View" / "View all" links only responded sometimes.
Cause: the soft glow circles painted with ::before/::after on hero and
card surfaces are stacked above the card content, and they sit exactly
in the corners where those links live. They are pure decoration, so
pointer events pass straight through them from here on.
===================================================================== */
.auth-side::before, .wallet-card::after, .pp-hero::after, .pp-hero::before,
.va-card::after, .va-card::before, .ref-hero::after, .ref-bal::after,
.otp-box::after, .ad-hero::after, .ap-fab::after, .pg-wrap .pg-bar::after,
.ref-tier.reached::after, .sd-toggle::after{
pointer-events:none;
}
/* "View all" style links are small by design -- give them a real hit area
and keep them above any sibling decoration. */
.view-all,
a.small[href]:has(> i),
.dash-card .d-flex > a.small{
position:relative;z-index:3;display:inline-flex;align-items:center;gap:.35rem;
min-height:44px;padding:.25rem .5rem;margin:-.25rem -.5rem;
border-radius:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
/* Timeline: a connecting rail so the steps read as a journey rather than a
stack of identical check icons. */
.dt-steps li{position:relative;}
.dt-steps li:not(:last-child)::before{content:"";position:absolute;left:14px;top:38px;bottom:-4px;
width:2px;background:linear-gradient(180deg,var(--ap-green-light,#e7f7f1),rgba(0,0,0,.06));pointer-events:none;}
.dt-steps li > div{min-width:0;overflow-wrap:anywhere;}
/* =====================================================================
UX PASS 2 -- app-like feel, readability fixes, touch comfort
(kept in one block so it is easy to find and tweak)
===================================================================== */
html{-webkit-text-size-adjust:100%;}
a,button,.btn-ap,.menu,.svc-mini{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
/* --- Dollar-card hero: headings were inheriting the dark global colour --- */
.dc-hero h2,.dc-hero p,.dc-hero b{color:#fff;}
.dc-hero p{opacity:.92;}
/* --- Auth pages: form should sit right under the banner on phones --- */
@media (max-width:991.98px){
.auth-card{justify-content:flex-start!important;}
}
/* --- Page enter animation (subtle, respects reduced-motion) --- */
@keyframes apRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.dash-main>*:not(.mobile-bar):not(.sb-overlay){animation:apRise .28s ease both;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
/* --- Skeleton loader helper: --- */
.ap-skel{border-radius:12px;background:linear-gradient(90deg,#eef3f1 25%,#f8fbfa 37%,#eef3f1 63%);background-size:400% 100%;animation:apSkel 1.3s ease infinite;}
@keyframes apSkel{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
/* --- Dashboard greeting (phones only) --- */
.ap-greet{display:flex;flex-direction:column;margin:.2rem .1rem .8rem;}
.ap-greet span{font-family:var(--font-display);font-weight:800;font-size:1.15rem;}
.ap-greet small{color:var(--ap-muted,#6b7280);}
/* --- Bottom tab bar: buttons look like links, active state clearer --- */
.bottom-nav a,.bottom-nav .bn-more{justify-content:flex-start;line-height:1.2;}
.bottom-nav .bn-more{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;background:none;border:0;
color:#7a8884;font-size:.75rem;font-weight:600;padding:.4rem .2rem;border-radius:12px;font-family:inherit;}
.bottom-nav .bn-more i{font-size:1.1rem;}
.bottom-nav a:active,.bottom-nav .bn-more:active{background:var(--ap-green-light,#e7f6ef);}
.bottom-nav a.active{position:relative;}
.bottom-nav a.active::before{content:"";position:absolute;top:-.42rem;left:30%;right:30%;height:3px;border-radius:0 0 4px 4px;background:var(--ap-green);}
/* --- Phones & tablets (<992px): behave like a native app --- */
@media (max-width:991.98px){
.dash-topbar{display:none;} /* title now lives in the app bar */
.mobile-bar{padding:calc(.65rem + env(safe-area-inset-top)) 1rem .65rem;margin:-1rem -1rem .9rem;gap:.6rem;}
.mobile-bar .mb-title{flex:1;min-width:0;font-family:var(--font-display);font-weight:800;font-size:1.05rem;
color:var(--ap-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-bar>.d-flex{flex-shrink:0;}
.dash-main{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))!important;}
body.drawer-open{overflow:hidden;}
.dash-sidebar{padding-top:calc(1.5rem + env(safe-area-inset-top));box-shadow:20px 0 40px -20px rgba(0,0,0,.5);}
/* iOS zooms into inputs below 16px -- stop that */
input,select,textarea,.form-control,.form-control-ap{font-size:16px!important;}
/* comfortable thumb targets */
.btn-ap,.dash-sidebar a.menu{min-height:44px;}
.table-responsive,.ap-table-wrap{-webkit-overflow-scrolling:touch;}
}
@media (min-width:992px){.bottom-nav,.ap-install{display:none!important;}}
/* --- Install banner (add to home screen) --- */
.ap-install{position:fixed;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:1030;display:flex;align-items:center;gap:.7rem;
background:#0f1b17;color:#fff;border-radius:16px;padding:.7rem .8rem;box-shadow:0 18px 40px -14px rgba(0,0,0,.55);animation:apRise .3s ease both;}
.ap-install[hidden]{display:none;}
.ap-install .tx{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.75rem;line-height:1.25;opacity:.92;}
.ap-install .tx b{font-size:.88rem;opacity:1;}
.ap-install .go{background:var(--ap-green);color:#fff;border:0;border-radius:11px;font-weight:700;font-size:.82rem;padding:.55rem .95rem;}
.ap-install .x{background:none;border:0;color:#9db0a9;font-size:1.4rem;line-height:1;padding:0 .2rem;}
/* --- Offline indicator --- */
.ap-offline-bar{position:fixed;top:0;left:0;right:0;z-index:2000;background:#b45309;color:#fff;text-align:center;font-size:.8rem;
font-weight:600;padding:calc(.4rem + env(safe-area-inset-top)) .8rem .4rem;}
.ap-offline-bar[hidden]{display:none;}
/* --- When launched from the home screen the website link is pointless --- */
@media (display-mode:standalone){
.dash-sidebar a.menu[href="/"]{display:none;}
body{overscroll-behavior-y:none;}
}
/* --- Focus visibility for keyboard users --- */
:focus-visible{outline:3px solid rgba(14,159,110,.45);outline-offset:2px;border-radius:8px;}
/* Phones: the floating help button covered page content -- support lives in the More drawer instead */
@media (max-width:991.98px){.ap-fab-wrap{display:none!important;}}
.bottom-nav a i,.bottom-nav .bn-more i{height:1.2rem;line-height:1.2rem;display:block;}
.bottom-nav a span,.bottom-nav .bn-more span{display:block;font-size:.75rem;line-height:1.2;}
.bottom-nav .bn-more{align-self:stretch;margin:0;box-sizing:border-box;}
.bottom-nav .bn-more{padding-top:.3rem;}
/* ======================= P3 / P5 additions ======================= */
/* empty states */
.ap-empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:2rem 1rem;text-align:center;color:#64748b}
.ap-empty p{margin:0 0 .4rem;font-size:.9rem}
.ap-empty-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#e8f7f0;color:#0E9F6E;font-size:1.4rem}
/* tour */
.ap-tour-ring{position:fixed;z-index:2000;border-radius:14px;box-shadow:0 0 0 9999px rgba(15,23,42,.62);pointer-events:none;transition:all .25s ease}
.ap-tour-card{position:fixed;z-index:2001;left:50%;transform:translateX(-50%);width:min(320px,calc(100vw - 32px));background:#fff;color:#0f172a;border-radius:14px;padding:1rem 1.1rem;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.ap-tour-card h6{margin:.2rem 0 .3rem;font-weight:700}.ap-tour-card p{margin:0 0 .8rem;font-size:.9rem;color:#475569}
.ap-tour-card small{color:#94a3b8}
.ap-tour-btns{display:flex;justify-content:space-between}
.ap-tour-btns button{border:0;background:none;color:#64748b;font-weight:600;padding:.4rem .8rem;border-radius:8px}
.ap-tour-btns button.primary{background:#0E9F6E;color:#fff}
/* progress bar */
.ap-topbar{position:fixed;top:0;left:0;height:3px;width:0;background:#0E9F6E;z-index:3000;opacity:0;transition:width .6s ease,opacity .3s}
/* pull to refresh */
.ap-ptr{position:fixed;top:0;left:50%;transform:translate(-50%,-60px);z-index:2500;width:38px;height:38px;border-radius:50%;background:#fff;color:#0E9F6E;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .15s}
.ap-ptr.spin i{animation:apspin .7s linear infinite}@keyframes apspin{to{transform:rotate(360deg)}}
/* skeleton shimmer: add class="ap-skel" to any placeholder block */
.ap-skel{border-radius:8px;min-height:1rem;background:linear-gradient(90deg,#eef2f6 25%,#f8fafc 37%,#eef2f6 63%);background-size:400% 100%;animation:apshim 1.3s ease infinite}
@keyframes apshim{0%{background-position:100% 50%}100%{background-position:0 50%}}
button.is-loading{opacity:.8;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ap-skel,.ap-ptr.spin i{animation:none}.ap-tour-ring,.ap-topbar{transition:none}}
/* ======================= AI helpers ======================= */
.ap-chat-fab{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:1500;width:50px;height:50px;border-radius:50%;border:0;background:#0E9F6E;color:#fff;font-size:1.3rem;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media(min-width:992px){.ap-chat-fab{bottom:20px}}
.ap-chat{position:fixed;right:16px;bottom:calc(138px + env(safe-area-inset-bottom));z-index:1500;width:min(340px,calc(100vw - 32px));height:min(420px,60vh);display:flex;flex-direction:column;background:#fff;color:#0f172a;border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.3);overflow:hidden}
@media(min-width:992px){.ap-chat{bottom:84px}}
.ap-chat[hidden]{display:none}
.ap-chat-h{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#0E9F6E;color:#fff}.ap-chat-h button{border:0;background:none;color:#fff;font-size:1.4rem;line-height:1}
.ap-chat-log{flex:1;overflow:auto;padding:.8rem;display:flex;flex-direction:column;gap:.5rem;background:#f8fafc}
.ap-chat-b{max-width:85%;padding:.5rem .75rem;border-radius:12px;font-size:.9rem;white-space:pre-wrap}.ap-chat-b.me{align-self:flex-end;background:#0E9F6E;color:#fff}.ap-chat-b.bot{align-self:flex-start;background:#fff;border:1px solid #e2e8f0}
.ap-chat-f{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid #e2e8f0}.ap-chat-f input{flex:1;border:1px solid #cbd5e1;border-radius:10px;padding:.45rem .7rem;font-size:16px}.ap-chat-f button{border:0;background:#0E9F6E;color:#fff;border-radius:10px;padding:0 .9rem}
/* ---- Show / hide password eye (static/js/ap-password.js) ---- */
.ap-pw-wrap{position:relative;display:block;width:100%}
.ap-pw-wrap>input{width:100%;padding-right:3rem !important}
.ap-pw-eye{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;
border:0;border-radius:10px;background:transparent;color:currentColor;opacity:.55;cursor:pointer;padding:0;transition:opacity .15s,background .15s,color .15s}
.ap-pw-eye:hover,.ap-pw-eye:focus-visible{opacity:1;background:rgba(14,159,110,.12);color:#0E9F6E;outline:none}
.ap-pw-eye[aria-pressed="true"]{opacity:1;color:#0E9F6E}