/* Gverifyer icon style v4: flat, one site colour, icon + label joined in one bordered box */
:root{--ic:var(--primary,var(--brand,#19709b))}
/* one colour for info/warning accents, so nothing else competes with the site colour */
:root{--info:var(--ic);--info-light:color-mix(in srgb,var(--ic) 11%,var(--card,#fff));--warning:var(--ic);--warning-light:color-mix(in srgb,var(--ic) 11%,var(--card,#fff))}

/* ---- dashboard services: each group is ONE card, icons joined in a grid with divider lines ---- */
.cat-id,.cat-bvn,.cat-bill,.cat-biz{--tc:var(--ic);--line:color-mix(in srgb,var(--ic) 22%,var(--border))}
.svc-section{margin-top:20px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--ic) 30%,var(--border));border-radius:22px;overflow:hidden}
.svc-head{padding:14px 16px 12px;margin:0;border-bottom:1.5px solid color-mix(in srgb,var(--ic) 22%,var(--border));background:color-mix(in srgb,var(--ic) 5%,var(--card))}
.svc-head h2{font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;margin:0 -1px -1px 0}
.tile.card{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:inset -1.5px -1.5px 0 0 var(--line)!important;
  min-height:96px;padding:16px 6px 12px;gap:8px;justify-content:center;transform:none!important;transition:background .15s}
.tile.card:hover,.tile.card:active{background:color-mix(in srgb,var(--ic) 7%,var(--card))!important;transform:none!important;box-shadow:inset -1.5px -1.5px 0 0 var(--line)!important}
.tile.card a::after{border-radius:0}
.tile-ico{all:unset;display:block;line-height:1;position:static}
.tile-ico::after{display:none!important}
.tile.card .tile-ico i,.tile.card:hover .tile-ico i{font-size:24px!important;color:var(--ic)!important;filter:none!important}
.tile-name{font-size:12px;line-height:1.3;color:var(--text);word-break:break-word}
.tile.inactive-service{border:0!important}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:900px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}.tile.card{min-height:110px}.tile-name{font-size:13px}}
@media (min-width:1200px){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:360px){.tile-name{font-size:11px}.tile.card{padding:14px 4px 10px;min-height:88px}.tile.card .tile-ico i{font-size:21px!important}}

/* ---- hero actions: icon + label joined in one bordered box ---- */
.hero-actions{gap:8px!important}
.hero-actions a{border:1.5px solid rgba(255,255,255,.45);border-radius:16px;padding:12px 4px 10px;background:rgba(255,255,255,.1);gap:6px!important;transition:background .15s}
.hero-actions a:hover,.hero-actions a:active{background:rgba(255,255,255,.2)}
.ha-ico{all:unset;display:block;width:auto!important;height:auto!important;font-size:19px;line-height:1;color:#fff;transform:none!important}
.hero-actions a:hover .ha-ico,.hero-actions a:active .ha-ico{background:none!important;box-shadow:none!important;transform:none!important}
.ha-ico i{filter:none}

/* header buttons, eye, avatar */
.hdr-btn,.back{border:1.5px solid color-mix(in srgb,var(--ic) 30%,var(--border))!important;background:var(--card)!important;box-shadow:none!important}
.hdr-btn i,.back i{color:var(--ic)}
.eye{border:1.5px solid rgba(255,255,255,.45)!important;background:transparent!important;box-shadow:none!important}
.avatar{border:0;box-shadow:none!important}

/* ---- menu (sidebar): plain icons in site colour ---- */
.sidebar-nav a>i,.sidebar nav a>i{width:auto!important;height:auto;min-width:28px!important;display:inline-block!important;border:0;background:none;box-shadow:none;border-radius:0;font-size:18px!important}
.sidebar-nav a:hover>i,.sidebar nav a:hover>i{border:0;box-shadow:none}
.sidebar-nav a.active>i,.sidebar nav a.active>i{border:0;background:none;box-shadow:none;color:#fff}
.sidebar .logo img{border:1.5px solid color-mix(in srgb,var(--ic) 30%,var(--border));box-shadow:none}
.toggle-btn{border:1.5px solid color-mix(in srgb,var(--ic) 30%,transparent)!important;box-shadow:none}
.submenu a>i{border:0;padding:0;width:auto;height:auto;display:inline-block;font-size:14px}
.sidebar:not(.expanded) .sidebar-nav a,.sidebar:not(.expanded) nav a{padding:10px 0!important;justify-content:center;gap:0}
.sidebar:not(.expanded) .submenu a{padding:8px 0!important}

/* ---- bottom navigation: flat ---- */
.bottom-nav{border:1.5px solid color-mix(in srgb,var(--ic) 22%,var(--border))!important;box-shadow:0 8px 24px rgba(15,23,42,.12)!important}
.bottom-nav a>i{width:auto;height:auto;display:block;border:0;background:none;box-shadow:none;border-radius:0;font-size:19px!important}
.bottom-nav a.active>i{border:0;background:none;box-shadow:none}
.bottom-nav .bn-main{border:3px solid var(--bg)!important;background:var(--ic)!important;box-shadow:none!important}
.bottom-nav .bn-main>i{color:#fff}

/* ---- service pages: flat icons ---- */
.card h3 i,.pf-ico,.stat-icon,.financial-icon,.account-icon,.order-icon,.funding-icon,.expense-icon{
  border:1.5px solid color-mix(in srgb,var(--ic) 35%,transparent)!important;background:color-mix(in srgb,var(--ic) 8%,var(--card,#fff))!important;box-shadow:none!important}
.method-option i,.slip-option i{border:0!important;background:none!important;box-shadow:none!important}
.copy-acct,.copy{border:0!important;box-shadow:none!important}
.fp-circle{box-shadow:none!important}
.field i{border-right:0;padding-right:0}
.field input{padding-left:46px!important}

/* ---- mobile responsive safety net (all pages) ---- */
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
.main,.container,.shell{min-width:0;max-width:100%}
img,video,svg{max-width:100%}
.table-container,.history-card,.chart-card,.api-key-display{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{max-width:100%}
.form-grid{grid-template-columns:1fr!important}
@media (min-width:700px){.form-grid{grid-template-columns:repeat(2,1fr)!important}}
.stats-container,.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}
@media (max-width:768px){
  input,select,textarea{font-size:16px!important}   /* stops iPhone zooming into fields */
  .main{padding-left:12px;padding-right:12px}
  .hero{padding:20px 16px}
  .modal-content{width:92%!important;max-width:92%!important}
  .pagination{flex-wrap:wrap;gap:6px;justify-content:center}
  .tabs{-webkit-overflow-scrolling:touch}
  .financial-item,.account-item{flex-wrap:wrap}
  .method-grid,.slip-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.bottom-nav{padding-bottom:env(safe-area-inset-bottom,0);height:calc(66px + env(safe-area-inset-bottom,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px)) !important}
.main{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media (min-width:769px){.main{padding-bottom:40px}}

/* ---- v5 services: app-style tiles, solid site-colour icon badge, separate soft cards ---- */
.svc-section{background:transparent;border:0;border-radius:0;overflow:visible}
.svc-head{padding:0 2px 10px;border:0;background:none}
.svc-head h2{font-size:16px;font-weight:800;letter-spacing:-.2px}
.tiles{gap:10px!important;margin:0}
.tile.card{border:1.5px solid color-mix(in srgb,var(--ic) 14%,var(--border))!important;border-radius:18px!important;background:var(--card)!important;
  box-shadow:0 2px 8px color-mix(in srgb,var(--ic) 8%,transparent)!important;min-height:104px;padding:14px 6px 11px;gap:9px;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.tile.card:hover,.tile.card:active{background:var(--card)!important;border-color:var(--ic)!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--ic) 22%,transparent)!important;transform:translateY(-2px)!important}
.tile-ico{display:flex!important;align-items:center;justify-content:center;width:46px;height:46px;border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ic) 78%,#fff),var(--ic));
  box-shadow:0 5px 12px color-mix(in srgb,var(--ic) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.tile.card .tile-ico i,.tile.card:hover .tile-ico i{font-size:20px!important;color:#fff!important}
.tile-name{font-weight:700;font-size:12px}
.tile.card:hover .tile-ico{transform:scale(1.06)}
.tile-ico{transition:transform .15s}
@media (max-width:360px){.tiles{gap:8px!important}.tile-ico{width:40px;height:40px;border-radius:13px}.tile.card .tile-ico i{font-size:18px!important}}