/* WenaPay Warm UI — 2026-09-20
   Shared fallback visual system for hosted WenaPay HTML.
   Uses the approved near-black charcoal canvas with warm orange ambience.
   Legacy navy/violet surfaces are intentionally retired. */
:root{
  --wena-bg:#050607;
  --wena-bg-2:#090807;
  --wena-surface:#111315;
  --wena-surface-2:#17191c;
  --wena-surface-3:#211a15;
  --wena-line:rgba(255,255,255,.09);
  --wena-line-strong:rgba(255,255,255,.15);
  --wena-text:#f7f7f5;
  --wena-muted:#aaa39d;
  --wena-orange:#ff7b32;
  --wena-orange-2:#ff9c43;
  --wena-gold:#ffc857;
  --wena-violet:#d95a0b;
  --wena-violet-2:#ff9a42;
  --wena-pink:#ff8b48;
  --wena-cyan:#c98254;
  --wena-green:#55d68a;
  --wena-radius-sm:16px;
  --wena-radius-md:22px;
  --wena-radius-lg:30px;
  --wena-shadow:0 24px 70px rgba(0,0,0,.32);
  --wena-glow:0 0 0 1px rgba(255,123,50,.15),0 20px 55px rgba(255,123,50,.12);
  color-scheme:dark;
}

html{background:#0b0806;scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse 54rem 34rem at 50% -8rem,rgba(255,123,50,.18),transparent 72%),
    radial-gradient(circle at 0% 34%,rgba(255,123,50,.11),transparent 32rem),
    radial-gradient(circle at 100% 28%,rgba(255,123,50,.13),transparent 36rem),
    linear-gradient(180deg,#100b08 0%,#090807 46%,#120a06 100%)!important;
  color:var(--wena-text)!important;
  min-height:100vh;
}
body::selection{background:rgba(255,123,50,.35);color:#fff}
a{color:inherit}

/* Shared navigation */
.site-header,.topbar,.wp-topbar,.vas-topbar{
  background:rgba(8,8,7,.84)!important;
  border-color:var(--wena-line)!important;
  color:var(--wena-text)!important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
.site-logo img,.brand img,.wordmark img,.footer-brand img{filter:none!important}
.desktop-nav>a,.partners-menu summary,.nav-button.secondary,.header-signin,.home-link{color:#e9ebf7!important}
.desktop-nav>a:hover,.partners-menu summary:hover,.header-signin strong{color:var(--wena-orange)!important}
.partners-panel,.mobile-nav,.app-drawer,.notification-popover{
  background:rgba(17,19,21,.98)!important;
  border-color:var(--wena-line)!important;
  color:var(--wena-text)!important;
  box-shadow:var(--wena-shadow)!important;
}
.mobile-nav a,.mobile-nav .mobile-group-title{border-color:var(--wena-line)!important}
.menu-button,.appbar-icon-button,.drawer-close{
  background:rgba(255,255,255,.055)!important;
  border-color:var(--wena-line)!important;
  color:#fff!important;
}

/* Core typography */
.eyebrow,.wp-momentum-kicker,.platform-label,.role-kicker,.drawer-label{
  color:var(--wena-orange)!important;
}
.muted,.caption,.micro-note,.build-note,.form-lead,.recipient-help,.pilot-note,.drawer-pilot-note,.feature-card p,.audience-card p,.partner-card p,.contact-card p,.step p,.footer-brand p,.empty,.status-note{
  color:var(--wena-muted)!important;
}
h1,h2,h3,h4,strong,label{color:var(--wena-text)}

/* Shared cards and panels */
.panel,.card,.wp-momentum-card,.state-card,.login-card,.platform-card,.role-card,.audience-card,.feature-card,.partner-card,.contact-card,.visual-card,.step,.metric,.tool-card,.qr-panel,.transactions-panel,.attention,.security-banner,.onboarding-card,.feature-grid .feature-card{
  background:linear-gradient(180deg,rgba(23,25,28,.97),rgba(12,13,15,.98))!important;
  border:1px solid var(--wena-line)!important;
  color:var(--wena-text)!important;
  box-shadow:0 16px 50px rgba(0,0,0,.20)!important;
}
.panel:hover,.role-card:hover,.audience-card:hover,.feature-card:hover,.tool-card:hover,.contact-card:hover{
  border-color:rgba(255,123,50,.28)!important;
}

/* Inputs and controls */
input,select,textarea{
  background:#171513!important;
  color:#fff!important;
  border-color:var(--wena-line-strong)!important;
  box-shadow:none!important;
}
input::placeholder,textarea::placeholder{color:#7f7975!important}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:rgba(255,123,50,.7)!important;
  box-shadow:0 0 0 3px rgba(255,123,50,.13)!important;
}

.button-primary,.nav-button.primary,.primary-button,.button.primary,.primary,.wp-momentum-button.primary,.mini-button.primary{
  background:linear-gradient(135deg,var(--wena-orange),var(--wena-orange-2))!important;
  color:#17100b!important;
  border-color:transparent!important;
  box-shadow:0 12px 30px rgba(255,123,50,.24)!important;
}
.button-secondary,.nav-button.secondary,.secondary-button,.button.ghost,.secondary,.wp-momentum-button.secondary,.mini-button{
  background:rgba(255,255,255,.055)!important;
  color:#f6f7ff!important;
  border-color:var(--wena-line-strong)!important;
}

/* Public site */
.section.soft,.section.cream{background:rgba(255,255,255,.015)!important}
.section.dark,.site-footer{background:#050607!important}
.hero h1 span,.page-hero h1 span,.card-link{color:var(--wena-orange)!important}
.hero-lead,.page-lead,.section-head p,.split-card p,.visual-card .caption{color:var(--wena-muted)!important}
.orange-orbit{
  background:
    radial-gradient(circle at 30% 26%,#ffca61 0 10%,transparent 27%),
    linear-gradient(145deg,#ff7b32 0%,#ff8f3f 52%,#d95a0b 100%)!important;
  box-shadow:0 30px 95px rgba(217,90,11,.22),0 20px 70px rgba(255,123,50,.20)!important;
}
.phone{
  background:linear-gradient(180deg,#1b1d20,#0c0d0f)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.48)!important;
}
.phone-screen{background:linear-gradient(180deg,#151719,#090a0c)!important}
.quick-icon{background:linear-gradient(135deg,var(--wena-orange),var(--wena-violet))!important;color:#fff!important}
.qr-card{background:#f8f8fb!important;color:#10131e!important}
.float-chip{background:rgba(23,20,18,.94)!important;color:#fff!important;border-color:var(--wena-line)!important}
.split-card.personal{background:linear-gradient(145deg,#26170f,#141516)!important}
.split-card.business,.visual-card.dark{background:linear-gradient(145deg,#121416,#24150e)!important}
.cta-band{
  background:linear-gradient(130deg,var(--wena-orange) 0%,#ff9b44 62%,#d95a0b 100%)!important;
  color:#11131d!important;
  box-shadow:0 28px 75px rgba(217,90,11,.18)!important;
}
.cta-band h2,.cta-band p{color:#15131a!important}
.tab-switch{background:#111315!important}
.tab-button.active{background:linear-gradient(135deg,var(--wena-orange),var(--wena-violet))!important;color:#fff!important}

/* Personal wallet — mobile-first visual language */
body.personal-app{
  background:
    radial-gradient(circle at 84% 4%,rgba(255,123,50,.18),transparent 20rem),
    radial-gradient(circle at 5% 17%,rgba(255,154,66,.09),transparent 18rem),
    #050607!important;
}
.personal-app .shell{width:min(920px,100%)!important}
.personal-appbar{
  background:rgba(8,9,10,.78)!important;
  border-bottom:0!important;
}
.personal-appbar:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)!important}
.personal-context-chip{
  background:rgba(255,255,255,.06)!important;
  border-color:var(--wena-line)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.personal-welcome h1{
  color:#fff!important;
  font-weight:760!important;
  text-shadow:0 8px 38px rgba(0,0,0,.28);
}
.personal-welcome .muted{color:#aaa39d!important}
.personal-balance-card{
  background:
    radial-gradient(circle at 88% 24%,rgba(255,210,105,.34),transparent 27%),
    linear-gradient(135deg,#ff6815 0%,#ff7b32 58%,#ff9a42 100%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 30px 80px rgba(255,104,21,.24)!important;
}
.personal-balance-card:before{
  content:"W";
  position:absolute;
  right:30px;
  top:24px;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:15px;
  background:rgba(8,8,7,.42);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:900;
  letter-spacing:-.08em;
  backdrop-filter:blur(14px);
}
.personal-balance-card .balance-label-row p,.personal-balance-card .balance-main>span{color:rgba(255,255,255,.76)!important}
.personal-balance-card .privacy-toggle{background:rgba(9,9,8,.32)!important;border-color:rgba(255,255,255,.17)!important}
.balance-rings{border-color:rgba(255,255,255,.13)!important}
.balance-rings:before,.balance-rings:after{border-color:rgba(255,255,255,.14)!important}

.personal-app .personal-action-grid .action-card,.personal-app .personal-action-grid .action-card.action-primary{
  border:1px solid rgba(255,255,255,.08)!important;
  color:#fff!important;
  box-shadow:0 18px 40px rgba(0,0,0,.24)!important;
  overflow:hidden;
  position:relative;
}
.personal-app .personal-action-grid .action-card:nth-child(1){background:linear-gradient(145deg,#ff993f,#f36e36)!important}
.personal-app .personal-action-grid .action-card:nth-child(2){background:linear-gradient(145deg,#ff8538,#c84d12)!important}
.personal-app .personal-action-grid .action-card:nth-child(3){background:linear-gradient(145deg,#d95a0b,#8f370d)!important}
.personal-app .personal-action-grid .action-card:nth-child(4){background:linear-gradient(145deg,#ffb650,#ef8d2f)!important}
.personal-app .personal-action-grid .action-card:nth-child(5){background:linear-gradient(145deg,#b85a22,#6f2d0f)!important}
.personal-app .personal-action-grid .action-card:nth-child(6){background:linear-gradient(145deg,#ffd36c,#f5a43e)!important;color:#17120e!important}
.personal-app .personal-action-grid .action-icon,.personal-app .personal-action-grid .action-primary .action-icon{
  background:rgba(255,255,255,.16)!important;
  color:inherit!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
.personal-app .personal-action-grid .action-card:hover{transform:translateY(-3px) scale(1.01)!important;filter:saturate(1.06)}

.security-banner{
  background:linear-gradient(110deg,rgba(255,123,50,.16),rgba(217,90,11,.10))!important;
}
.security-badge,.drawer-link-icon,.wp-icon-tile{
  background:rgba(255,123,50,.14)!important;
  color:var(--wena-orange)!important;
}
.personal-app .content-grid .panel{
  background:linear-gradient(180deg,#17191c,#101214)!important;
  border-color:var(--wena-line)!important;
}
.personal-app .list-item{border-color:var(--wena-line)!important}
.personal-app .list-icon{background:rgba(255,123,50,.13)!important;color:var(--wena-orange)!important}
.personal-app .list-value.in{color:var(--wena-green)!important}

/* Business workspace */
.metric-dark,.merchant-heading+.metrics .metric:first-child{
  background:linear-gradient(135deg,#ff6416 0%,#ff7b32 58%,#ff9748 100%)!important;
  border-color:rgba(255,255,255,.14)!important;
}
.metric:not(.metric-dark){background:linear-gradient(180deg,#171a20,#101217)!important}
.tool-card .tool-icon{
  background:linear-gradient(145deg,rgba(255,123,50,.23),rgba(217,90,11,.15))!important;
  color:#ffd0b4!important;
}
.attention{background:linear-gradient(180deg,#171a20,#101217)!important}
.qr-frame{background:#fff!important;border-radius:24px!important}
.merchant-bottom-nav{background:rgba(13,15,19,.96)!important;border-color:var(--wena-line)!important}

/* Airtime, data, electricity and payment flows */
.vas-app .vas-card,.vas-app .panel,.page-shell .panel,.page-shell .card{
  background:linear-gradient(180deg,#171a20,#101214)!important;
  border-color:var(--wena-line)!important;
}
.vas-app .product-card,.vas-app .bundle-card,.vas-app .option-card{
  background:#171513!important;
  border-color:var(--wena-line)!important;
}
.vas-app .product-card:hover,.vas-app .bundle-card:hover,.vas-app .option-card:hover{border-color:rgba(255,123,50,.38)!important}

/* Registration, sign-in and security */
.choice-view .role-card,.login-card,.account-security-page .panel,.account-security-page .card{
  background:linear-gradient(180deg,#171a20,#101214)!important;
}
.personal-card{box-shadow:inset 0 0 0 1px rgba(255,123,50,.10),0 20px 60px rgba(0,0,0,.22)!important}
.business-card{box-shadow:inset 0 0 0 1px rgba(255,123,50,.12),0 20px 60px rgba(0,0,0,.22)!important}
.accountant-card{box-shadow:inset 0 0 0 1px rgba(85,214,138,.10),0 20px 60px rgba(0,0,0,.22)!important}
.truth-strip,.existing-access{
  background:rgba(255,255,255,.045)!important;
  border-color:var(--wena-line)!important;
  color:#dfe2ee!important;
}

/* Floating mobile navigation */
.wp-bottom-nav{
  background:rgba(13,15,19,.96)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
}
.wp-bottom-nav a{color:#8f8b88!important}
.wp-bottom-nav a.active{color:#fff!important}
.wp-bottom-nav a.active:before{background:linear-gradient(90deg,var(--wena-orange),var(--wena-violet))!important}

/* Accessibility */
:focus-visible{outline:2px solid var(--wena-orange)!important;outline-offset:3px!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media(max-width:760px){
  body{background:radial-gradient(circle at 84% 4%,rgba(255,123,50,.16),transparent 18rem),linear-gradient(180deg,#100b08,#050607 56%,#090603)!important}
  .site-header,.topbar,.wp-topbar,.vas-topbar{background:rgba(8,9,10,.94)!important}
  .personal-welcome{margin:18px 4px 20px!important}
  .personal-welcome h1{font-size:clamp(38px,11vw,54px)!important;line-height:1.02!important}
  .personal-welcome .muted{font-size:15px!important}
  .personal-balance-card{min-height:200px!important;padding:24px 22px!important;border-radius:28px!important}
  .personal-balance-card:before{width:38px;height:38px;right:18px;top:18px;border-radius:13px}
  .personal-balance-card strong{font-size:clamp(52px,16vw,72px)!important}
  .personal-action-grid{grid-template-columns:repeat(4,1fr)!important;gap:9px!important}
  .personal-app .personal-action-grid .action-card,.personal-app .personal-action-grid .action-card.action-primary{min-height:98px!important;border-radius:22px!important;padding:12px 4px!important}
  .personal-app .personal-action-grid .action-card:nth-child(n+5){grid-column:span 2;min-height:86px!important}
  .personal-app .personal-action-grid .action-card strong{white-space:normal!important;font-size:11px!important;line-height:1.15!important}
  .personal-app .wp-bottom-nav.personal-bottom-nav,.merchant-bottom-nav{left:12px!important;right:12px!important;bottom:10px!important;border-radius:25px!important}
  .section{padding:54px 0!important}
  .cta-band{border-radius:24px!important}
}

@media(max-width:430px){
  .personal-action-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .personal-app .personal-action-grid .action-icon{width:38px!important;height:38px!important}
  .personal-balance-card strong{font-size:15vw!important}
}