/* Opay-like visual style overrides */
:root{
  --opay-start:#111827;
  --opay-end:#26364a;
  --muted:#6b7280;
  --card:#ffffff;
  --abu-silver:#111827;
  --abu-grey:#26364a;
  --abu-gold:#334155;
  --abu-navy:#111827;
  --abu-navy-light:#26364a;
}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#fafafa 0%, #f3f4f6 100%);
  -webkit-font-smoothing:antialiased;
}
.opay-gradient{
  background: linear-gradient(135deg,var(--opay-start),var(--opay-end));
}

/* Convenience helpers to match the profile single-color theme */
.opay-orange { color: var(--abu-grey) !important; }
.opay-bg { background-color: var(--abu-silver) !important; }
.opay-text { color: var(--abu-grey) !important; }
.opay-card{
  background: var(--card);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  border: 1px solid #d8e0ea;
}
.opay-balance{color:white;padding:1rem;border-radius:1rem}
.opay-abu-gradient{background: linear-gradient(90deg,var(--abu-navy),var(--abu-navy-light));}
.opay-action{background:var(--card);border-radius:9999px;padding:.6rem;box-shadow:0 6px 14px rgba(15,23,42,0.06)}
.opay-quick .w-14{width:3.5rem;height:3.5rem}
.opay-quick i{font-size:1.1rem}
/* Ensure quick-action icons and header icons use silver/grey */
.opay-quick i, .opay-header i, .opay-bottom-nav a i, .opay-bottom-nav .fab i {
  color: var(--abu-grey) !important;
}

/* Make icons and interactive controls use a neutral silver/grey tone by default */
:root {
  --abu-control: var(--abu-navy);
}

/* Icons, font-awesome glyphs and inline SVGs */
.fas, .far, .fab, .opay-quick i, .opay-header i, .opay-bottom-nav a i, .opay-bottom-nav a, .opay-text {
  color: var(--abu-control) !important;
}

/* Neutralize Tailwind orange utility usages common in quick-actions */
.bg-orange-50 { background-color: #ffffff !important; }
.hover\:bg-orange-100:hover { background-color: #f8fafc !important; }

/* Neutralize stronger orange utilities used in buttons and text */
.bg-orange-600 { background-color: var(--abu-navy) !important; color: #fff !important; border: 1px solid var(--abu-navy) !important; }
.hover\:bg-orange-700:hover { background-color: #eef0f1 !important; }
.text-orange-600 { color: var(--abu-control) !important; }
.text-orange-600:hover { color: var(--abu-control) !important; }
.bg-amber-500, .text-amber-500 { background: var(--abu-navy) !important; color: #fff !important; }

/* Catch other common classes that may color controls */
.btn-primary, .btn-accent { background: var(--abu-navy) !important; color: #fff !important; border:1px solid var(--abu-navy) !important; }

/* Neutralize Indigo utilities (buttons/active states) */
.bg-indigo-600, .bg-indigo-500, .text-indigo-600, .text-indigo-500 {
  background: var(--abu-navy) !important;
  color: #fff !important;
  border: 1px solid var(--abu-navy) !important;
}
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-600:hover { background: var(--abu-navy-light) !important; }

.bg-purple-600, .bg-violet-600, .bg-blue-600 {
  background: linear-gradient(135deg, var(--abu-navy), var(--abu-navy-light)) !important;
  color: #ffffff !important;
}
.hover\:bg-purple-700:hover, .hover\:bg-violet-700:hover, .hover\:bg-blue-700:hover {
  background: var(--abu-navy-light) !important;
}
.bg-purple-100, .bg-violet-100, .bg-blue-100, .bg-cyan-100 {
  background-color: rgba(192, 192, 192, 0.28) !important;
}
.bg-blue-50, .bg-purple-50, .bg-violet-50, .bg-cyan-50 {
  background-color: rgba(212, 175, 55, 0.1) !important;
}
.text-purple-600, .text-violet-600, .text-blue-600, .text-cyan-600 {
  color: var(--abu-grey) !important;
}
.text-blue-700, .text-blue-800, .text-blue-900,
.text-purple-700, .text-purple-800, .text-purple-900 {
  color: var(--abu-grey) !important;
}
.hover\:text-purple-700:hover, .hover\:text-blue-700:hover,
.hover\:text-blue-800:hover { color: var(--abu-gold) !important; }
.focus\:ring-purple-500:focus, .focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--abu-gold) !important; }
.focus\:border-purple-500:focus, .focus\:border-blue-500:focus,
.focus\:border-indigo-500:focus { border-color: var(--abu-gold) !important; }

/* Override inline-colored icons: prefer the silver/grey control tone for icon glyphs */
i[style*="color"], .fas[style*="color"], .far[style*="color"], .fab[style*="color"] {
  color: var(--abu-control) !important;
}

/* Ensure links and small interactive text use the neutral control color */
a[style*="color"] { color: var(--abu-control) !important; }


/* Primary buttons and action controls: make them subtle silver/grey */
.opay-btn {
  background: linear-gradient(90deg,var(--abu-navy),var(--abu-navy-light)) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(15,23,42,0.04) !important;
  border: 1px solid #e6e9ea !important;
}

/* Floating action button and bottom nav primary button */
.opay-bottom-nav .fab {
  background: var(--abu-navy) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(15,23,42,0.06) !important;
  transform: translateY(-20%);
  border: 1px solid #e6e9ea !important;
}

/* Quick action tiles: keep icon background neutral and icon color grey */
.opay-quick .w-14, .opay-action, .w-14.h-14 { background: var(--abu-navy) !important; border: 1px solid var(--abu-navy-light) !important; color: #fff !important; }
.opay-quick i { color: #fff !important; }

/* Ensure pills and small controls follow the neutral tone */
.opay-pill, .opay-card .small, .opay-card .title { color: var(--abu-control) !important; }

/* Ensure header buttons/icons remain grey */
.opay-header button, .opay-header a { color: var(--abu-control) !important; }

/* Balance card: silver -> grey -> gold gradient for ABU branding */
.opay-balance-gradient {
  background: linear-gradient(135deg, var(--abu-navy) 0%, var(--abu-navy-light) 100%);
  color: #ffffff; /* keep text readable */
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

/* Smoke-gold gradient for promo tiles */
.promo-slide .opay-smoke-gold { background: linear-gradient(90deg, rgba(245,245,247,0.95) 0%, rgba(226,221,210,0.95) 40%, rgba(212,175,55,0.12) 100%); color: #0f172a }

/* Carousel / promo styles */
.promo-carousel { position: relative; overflow: hidden }
.promo-carousel .promo-slides { display: flex; transition: transform 400ms ease; gap:12px }
.promo-slide { min-width: 100%; box-sizing: border-box; border-radius: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(2,6,23,0.06) }
.promo-indicators { display:flex; gap:8px; justify-content:center; margin-top:8px }
.promo-indicators button { width:8px; height:8px; border-radius:9999px; background:rgba(15,23,42,0.08); border:0 }
.promo-indicators button.active { background: linear-gradient(90deg, var(--abu-navy), var(--abu-navy-light)); box-shadow:0 4px 10px rgba(0,0,0,0.06) }

/* Soft gradient background for promo slides (restores bottom tint) */
.gradient-sg {
  /* Smooth, blended silver -> grey -> subtle gold tint matching dashboard design */
  background: linear-gradient(135deg, var(--abu-navy), var(--abu-navy-light));
  color: #fff;
  border: 1px solid rgba(15,23,42,0.03);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
  padding: 16px;
}

@media(min-width:768px){
  .promo-slide { padding:24px }
}

/* Ensure action buttons inside balance card are visible on the gradient */
.opay-balance-gradient .btn, .opay-balance-gradient button {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.opay-btn .fas, .opay-btn .far, .opay-btn .fab,
.opay-balance-gradient button .fas, .opay-balance-gradient button .far,
.opay-balance-gradient button .fab,
.bg-indigo-600 .fas, .bg-indigo-500 .fas, .bg-purple-600 .fas,
.bg-blue-600 .fas, .bg-amber-500 .fas, .btn-primary .fas, .btn-accent .fas {
  color: #ffffff !important;
}



/* Tints for SVG logos when used inline */
.opay-brand img, .opay-logo img { filter: none; }

/* Icon circle backgrounds: keep control background white */
.w-14.h-14 {
  background: var(--card) !important;
}

.opay-header button {
  background: transparent;
}

/* Slightly dim hover for header buttons */
.opay-header button:hover { opacity: 0.92; }
.opay-bottom-nav{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(255,255,255,0.95));box-shadow:0 -6px 24px rgba(15,23,42,0.06);padding:8px 12px}
.opay-bottom-nav .fab{width:56px;height:56px;border-radius:9999px;background:linear-gradient(135deg,var(--opay-start),var(--opay-end));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px rgba(255,45,85,0.18);transform:translateY(-20%)}
.opay-pill{background:rgba(255,255,255,0.08);padding:.35rem .6rem;border-radius:9999px;color:#fff;font-size:.85rem}
.opay-card .small{font-size:.8rem;color:var(--muted)}
.opay-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:6rem;background:#111827;color:#fff;padding:.6rem 1rem;border-radius:.6rem;box-shadow:0 8px 20px rgba(0,0,0,0.2);z-index:60}

/* Mobile tweaks */
@media(min-width:768px){
  .opay-bottom-nav{max-width:720px;margin:0 auto;border-radius:14px}
}

/* Bottom nav buttons (bn-item) styling to match ABU silver/grey theme */
.opay-bottom-nav { display:flex; gap:8px; align-items:flex-end; justify-content:space-between; padding:10px 14px; z-index:60 }
.opay-bottom-nav .bn-item { background:transparent; border:0; outline:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--abu-control); font-size:12px; padding:10px 8px 14px; border-radius:10px; position:relative }
.opay-bottom-nav .bn-item i { font-size:18px; color:var(--abu-control); margin-bottom:3px }
.opay-bottom-nav .bn-item.active { color:var(--abu-navy); background:rgba(17,24,39,0.08); }

/* Active button gradient underline */
.opay-bottom-nav .bn-item.active::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  height: 3px;
  bottom: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--abu-navy), var(--abu-navy-light));
}
.opay-bottom-nav .bn-item.bn-action {
  background: transparent !important;
  color: var(--abu-control) !important;
  box-shadow: none !important;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.04);
}
.opay-bottom-nav .bn-item.bn-action i { color: var(--abu-control) !important }

@media(min-width:768px){
  /* hide on larger screens (desktop) — desktop mode will show top navigation instead */
  .opay-bottom-nav { display:flex !important }
}

/* Force show bottom nav on specific pages even in desktop mode */
body.desktop .opay-bottom-nav.force-visible { display: flex !important; }

/* Header / Brand */
.opay-header{background:white; border-bottom:0;padding:14px 0; position:fixed; top:0; left:0; right:0; z-index:20}
.opay-brand{display:flex;align-items:center;gap:.6rem;font-weight:600;color:#0f172a}
.opay-logo{width:20px;height:20px;border-radius:10px;background:linear-gradient(90deg,var(--opay-start),var(--opay-end));display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
.opay-sub{color:var(--muted);font-size:.85rem}

/* Body typography */
body.opay-ui { font-family: 'Poppins', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
h1.opay-title{font-size:1.1rem;font-weight:700;margin:0}

/* Cards and list spacing */
.opay-card { padding:1rem }
.opay-card .title { font-weight:600 }

/* Accounts page styles */
.account-card-full, .account-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 8px 18px rgba(15,23,42,0.05);
  border: 1px solid rgba(15,23,42,0.03);
}
.account-card .account-header, .account-card-full .account-header { display:flex; justify-content:space-between; align-items:center; gap:8px }
.account-card .account-number, .account-card-full .account-number { color:var(--muted); font-size:0.9rem }
.account-card .account-balance, .account-card-full .account-balance { font-size:1.25rem; font-weight:700; margin-top:6px }
.account-card .account-type-badge { background: #f1f5f9; color:var(--abu-grey); padding:4px 8px; border-radius:9999px; font-size:0.75rem }
.selected-account { border: 1px solid rgba(124,58,237,0.12); box-shadow: 0 8px 22px rgba(124,58,237,0.06); }
.account-actions { display:flex; gap:8px; margin-top:10px }
.account-actions button { padding:.5rem .75rem; border-radius:8px; border:1px solid rgba(15,23,42,0.04); background:#fbfdfe }

@media (min-width: 768px) {
  .max-w-2xl { max-width: 920px !important }
}

/* Buttons */
.opay-btn { background:linear-gradient(90deg,var(--abu-navy),var(--abu-navy-light)); color:#fff; padding:.6rem 1rem; border-radius:10px; border:0 }

/* Bottom nav small tweaks */
.opay-bottom-nav a { color: #374151; text-decoration:none }
.opay-bottom-nav a.active { color: var(--abu-navy) }

/* Desktop adjustments: when viewing on a laptop/desktop, prefer a full-screen layout
   and hide the mobile bottom controls. The `desktop` class is toggled by JS. */
body.desktop {
  background: linear-gradient(180deg,#f8fafc 0%, #eef2ff 100%);
}

body.desktop .opay-bottom-nav { display: none !important; }
body.desktop .opay-header { position: relative; top: 0; left: 0; right: 0; padding: 18px 0; }
body.desktop main { max-width: 1100px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* Ensure page content does not hide behind fixed header */
body.opay-ui main { padding-top: 64px; }
body.desktop .max-w-2xl, body.desktop .max-w-md, body.desktop .max-w-3xl { max-width: 1100px !important; width: 100% !important; }
body.desktop .opay-card { border-radius: 12px; }
body.desktop .opay-toast { bottom: 4rem }

/* Transfer confirmation modal styles */
.transfer-confirm-backdrop { position: fixed; inset:0; background: rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:60 }
.transfer-confirm { background: #fff; padding:18px; border-radius:12px; width:92%; max-width:480px; box-shadow:0 12px 40px rgba(2,6,23,0.2) }
.transfer-confirm .muted { color:var(--muted); font-size:0.95rem }
.transfer-confirm .confirm-amount { font-size:1.4rem; font-weight:700 }
.transfer-confirm .confirm-meta { margin-top:8px }
.transfer-confirm .btns { display:flex; gap:8px; margin-top:14px }

/* Desktop tweaks: make transfer page slightly wider and align cards side-by-side */
@media(min-width:1100px){
  body.desktop main { max-width: 1000px }
  .transfer-layout { display:grid; grid-template-columns: 1fr 340px; gap:20px }
}

/* Show a desktop top nav if needed (keeps layout simple) */
body.desktop .navbar, body.desktop .navbar-container { display: block }

/* Ensure feature sheet doesn't cover desktop screens — keep it hidden by default */
body.desktop #featureSheet { display: none !important }

/* Cards page tweaks */
.dashboard-actions { display:flex; gap:8px; align-items:center }
.card-virtual-badge { display:inline-block; background:rgba(255,255,255,0.12); color:#fff; padding:2px 8px; border-radius:9999px; font-size:0.75rem; margin-left:8px }
.credit-card { width:260px; border-radius:14px; color:#fff; padding:16px; box-shadow:0 10px 30px rgba(2,6,23,0.08); margin:8px }
.cards-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px }
.card-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px }