/* ═══════════════════════════════════════════ */
/* RC247 App Styles                        */
/* Auto-generated modular build                */
/* ═══════════════════════════════════════════ */

:root {
  --red:#E8001D; --navy:#0D1557; --navy-dark:#080d3a; --navy-mid:#1a237e;
  --red-dark:#b50016; --red-light:#ff1a35; --white:#ffffff; --off-white:#f8f8fc;
  --gray-light:#e8e9f0; --gray:#8a8da8; --text:#1a1d3a;
  --card-bg:rgba(255,255,255,0.06); --card-border:rgba(255,255,255,0.1);
  --shadow-card:0 20px 60px rgba(13,21,87,0.12);
  --shadow-hover:0 30px 80px rgba(13,21,87,0.2);
  --t:all 0.3s cubic-bezier(0.4,0,0.2,1);

  /* ── APP THEME TOKENS (overridden per theme) ── */
  --app-bg:        #0a0f2e;
  --app-bg2:       #0d1040;
  --app-surface:   rgba(255,255,255,0.06);
  --app-surface2:  rgba(255,255,255,0.04);
  --app-border:    rgba(255,255,255,0.10);
  --app-border2:   rgba(255,255,255,0.06);
  --app-text:      #ffffff;
  --app-text2:     rgba(255,255,255,0.65);
  --app-text3:     rgba(255,255,255,0.35);
  --app-input-bg:  rgba(255,255,255,0.08);
  --app-topbar:    rgba(13,16,64,0.95);
  --app-nav:       rgba(8,13,58,0.98);
  --app-card:      rgba(255,255,255,0.05);
  --app-status:    rgba(255,255,255,0.12);
  --app-accent:    var(--red);
  --app-shadow:    0 4px 20px rgba(0,0,0,0.4);
  --app-radius:    14px;
  --app-txn-in:    rgba(74,222,128,0.12);
  --app-txn-out:   rgba(232,0,29,0.12);
}

/* ══════════════════════════════════════════════
   THEME: LIGHT
   ══════════════════════════════════════════════ */
[data-theme="light"] {
  --app-bg:        #f4f6fb;
  --app-bg2:       #eaecf5;
  --app-surface:   #ffffff;
  --app-surface2:  rgba(0,0,0,0.03);
  --app-border:    rgba(0,0,0,0.10);
  --app-border2:   rgba(0,0,0,0.06);
  --app-text:      #0d1557;
  --app-text2:     rgba(13,21,87,0.65);
  --app-text3:     rgba(13,21,87,0.38);
  --app-input-bg:  rgba(13,21,87,0.07);
  --app-topbar:    rgba(255,255,255,0.97);
  --app-nav:       rgba(255,255,255,0.98);
  --app-card:      #ffffff;
  --app-status:    rgba(13,21,87,0.08);
  --app-shadow:    0 4px 20px rgba(13,21,87,0.12);
  --app-txn-in:    rgba(22,163,74,0.10);
  --app-txn-out:   rgba(232,0,29,0.08);
}

/* ══════════════════════════════════════════════
   THEME: CLASSIC DARK (OLED / true black)
   ══════════════════════════════════════════════ */
[data-theme="classic"] {
  --app-bg:        #a8c4f0;
  --app-bg2:       #96b8eb;
  --app-surface:   rgba(255,255,255,0.25);
  --app-surface2:  rgba(255,255,255,0.15);
  --app-border:    rgba(255,255,255,0.35);
  --app-border2:   rgba(255,255,255,0.20);
  --app-text:      #1a2744;
  --app-text2:     rgba(26,39,68,0.70);
  --app-text3:     rgba(26,39,68,0.40);
  --app-input-bg:  rgba(255,255,255,0.30);
  --app-topbar:    #8fb0e6;
  --app-nav:       rgba(143,176,230,0.97);
  --app-card:      #b8d0f5;
  --app-status:    rgba(255,255,255,0.20);
  --app-shadow:    0 4px 24px rgba(100,140,200,0.3);
  --app-txn-in:    rgba(34,160,90,0.15);
  --app-txn-out:   rgba(200,40,40,0.12);
}

/* ══════════════════════════════════════════════
   APPLY TOKENS → APP COMPONENTS
   ══════════════════════════════════════════════ */
.phone-screen,
.app-screen              { background: var(--app-bg) !important; color: var(--app-text); transition: background 0.35s ease, color 0.35s ease; }
.app-top-bar             { background: var(--app-topbar) !important; border-bottom: 1px solid var(--app-border2); }
.app-bottom-nav          { background: var(--app-nav) !important; border-top: 1px solid var(--app-border2); }
.abn-item .abn-label     { color: var(--app-text3); }
.abn-item.active .abn-icon { color: var(--app-accent); }
.top-bar-title           { color: var(--app-text) !important; }
.top-bar-sub             { color: var(--app-text3) !important; }
.app-name                { color: var(--app-text) !important; }
.app-greeting            { color: var(--app-text2) !important; }
.form-input, .modal-input, .form-select { background: var(--app-input-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; }
.form-select { -webkit-appearance: auto !important; appearance: auto !important; pointer-events: auto !important; touch-action: manipulation !important; z-index: 2 !important; }
.form-label              { color: var(--app-text2) !important; }
.profile-row             { background: var(--app-surface2); border-bottom: 1px solid var(--app-border2); }
.profile-row b           { color: var(--app-text) !important; }
.profile-row small       { color: var(--app-text3) !important; }
.profile-row .pr-chev    { color: var(--app-text3) !important; }
.app-order-row           { background: var(--app-surface2); border-bottom: 1px solid var(--app-border2); }
.app-sec-title           { color: var(--app-text2) !important; }
.txn-row                 { border-bottom: 1px solid var(--app-border2); }
.txn-info b              { color: var(--app-text) !important; }
.txn-info small          { color: var(--app-text3) !important; }
.txn-icon.in             { background: var(--app-txn-in) !important; }
.txn-icon.out            { background: var(--app-txn-out) !important; }
.food-card               { background: var(--app-card) !important; border: 1px solid var(--app-border2); }
.food-card-name          { color: var(--app-text) !important; }
.food-card-meta          { color: var(--app-text3) !important; }
.provider-card           { background: var(--app-card) !important; border: 1px solid var(--app-border2); }
.provider-name           { color: var(--app-text) !important; }
.market-item             { background: var(--app-card) !important; border: 1px solid var(--app-border2); }
/* v120g: marketplace price — strong, readable green on every theme (was faded
   #bbf7d0 which washed out, esp. on light). Bright green by default (dark/
   classic themes), darker saturated green on the light theme. */
.rcx-price{color:#22c55e}
[data-theme="light"] .rcx-price{color:#15803d}
.mi-name                 { color: var(--app-text) !important; }
.mi-seller               { color: var(--app-text3) !important; }
.search-result           { background: var(--app-surface2); border-bottom: 1px solid var(--app-border2); }
.auth-screen             { background: var(--app-bg); }
.auth-title              { color: var(--app-text) !important; }
.auth-subtitle           { color: var(--app-text2) !important; }
.modal-sheet             { background: var(--app-bg2) !important; }
.modal-title             { color: var(--app-text) !important; }
.modal-btn               { /* accent stays red */ }
.pin-key                 { background: var(--app-surface) !important; color: var(--app-text) !important; border: 1px solid var(--app-border2); }
.parish-row              { background: var(--app-surface2); border-bottom: 1px solid var(--app-border2); }
.parish-row .pr-info b   { color: var(--app-text) !important; }
.parish-row .pr-info small { color: var(--app-text3) !important; }
.phone-status-bar        { background: var(--app-status); color: var(--app-text2) !important; }
.bill-item               { background: var(--app-surface) !important; color: var(--app-text) !important; border: 1px solid var(--app-border2); }
.s-cat                   { background: var(--app-surface) !important; color: var(--app-text2) !important; border: 1px solid var(--app-border2); }
.sec-badge               { background: var(--app-surface) !important; color: #4ade80 !important; }
.app-search-bar          { background: var(--app-input-bg) !important; border: 1px solid var(--app-border) !important; }
.app-search-bar input    { background: transparent !important; color: var(--app-text) !important; }
.app-search-bar input::placeholder { color: var(--app-text3) !important; }
.food-hero-img           { opacity: 0.9; }
.scrollable              { background: var(--app-bg); }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--off-white);color:var(--text);overflow-x:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--navy-dark)}::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 5vw;height:70px;display:flex;align-items:center;justify-content:space-between;background:rgba(8,13,58,0.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(232,0,29,0.15);transition:var(--t)}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.nav-logo-icon{width:36px;height:36px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:white;font-weight:700;font-family:'Clash Display',sans-serif;position:relative;box-shadow:0 0 40px rgba(232,0,29,0.3)}
.nav-logo-icon::after{content:'';position:absolute;bottom:-3px;right:-3px;width:12px;height:12px;background:var(--navy);border-radius:50% 0 50% 50%;border:2px solid var(--red)}
.nav-logo-text{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;color:white;letter-spacing:-0.5px}
.nav-logo-text span{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.nav-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:var(--t);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform 0.3s ease}
.nav-links a:hover{color:white}.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{display:flex;gap:12px;align-items:center}
.btn{padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:var(--t);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-ghost{background:transparent;color:white;border:1.5px solid rgba(255,255,255,0.25)}
.btn-ghost:hover{border-color:var(--red);color:var(--red)}
.btn-primary{background:var(--red);color:white;box-shadow:0 4px 20px rgba(232,0,29,0.35)}
.btn-primary:hover{background:var(--red-light);transform:translateY(-1px);box-shadow:0 8px 30px rgba(232,0,29,0.45)}
.btn-large{padding:16px 36px;font-size:16px;border-radius:12px}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:white;border-radius:2px;transition:var(--t)}
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:rgba(8,13,58,0.98);backdrop-filter:blur(20px);padding:24px 5vw;z-index:999;border-bottom:1px solid rgba(232,0,29,0.2);flex-direction:column;gap:16px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:16px;font-weight:500;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);cursor:pointer;transition:var(--t)}
.mobile-menu a:hover{color:var(--red)}
.mobile-menu .btn{margin-top:8px;justify-content:center}

/* ── HERO ── */
.hero{min-height:100vh;background:var(--navy-dark);position:relative;overflow:hidden;display:flex;align-items:center;padding-top:70px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(232,0,29,0.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 10% 80%,rgba(26,35,126,0.6) 0%,transparent 60%),linear-gradient(135deg,#080d3a 0%,#0d1557 50%,#1a1060 100%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}
.hero-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(232,0,29,0.12) 0%,transparent 70%);top:-100px;right:-100px;border-radius:50%;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}
.hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:60px 5vw;display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(232,0,29,0.1);border:1px solid rgba(232,0,29,0.3);border-radius:100px;padding:6px 16px;font-size:12px;font-weight:600;color:#ff6b7a;letter-spacing:1px;text-transform:uppercase;margin-bottom:24px}
.hero-badge .dot{width:6px;height:6px;background:var(--red);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.4)}}
.hero-title{font-family:'Clash Display',sans-serif;font-size:clamp(38px,5vw,64px);font-weight:700;color:white;line-height:1.05;letter-spacing:-2px;margin-bottom:24px}
.hero-title .accent{color:var(--red)}
.hero-title .underline-accent{position:relative;display:inline-block}
.hero-title .underline-accent::after{content:'';position:absolute;bottom:4px;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--red),transparent);border-radius:2px}
.hero-desc{font-size:17px;line-height:1.7;color:rgba(255,255,255,0.6);max-width:480px;margin-bottom:40px;font-weight:300}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:48px}
.hero-stats{display:flex;gap:40px}
.stat-number{font-family:'Clash Display',sans-serif;font-size:28px;font-weight:700;color:white;line-height:1}
.stat-number span{color:var(--red)}
.stat-label{font-size:12px;color:rgba(255,255,255,0.4);font-weight:500;letter-spacing:0.5px;text-transform:uppercase}

/* ── PHONE FRAME ── */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.phone-frame{width:320px;background:#0a0b1a;border-radius:50px;padding:10px;border:2px solid rgba(255,255,255,0.14);box-shadow:0 40px 100px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.1);position:relative;user-select:none}
.phone-screen{border-radius:42px;overflow:hidden !important;background:#0a0f2e;height:640px;position:relative;display:flex;flex-direction:column;isolation:isolate;will-change:transform;transform:translateZ(0)}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:26px;background:#0a0b1a;border-radius:0 0 18px 18px;z-index:100}
.phone-float-1{position:absolute;top:8%;right:-70px;background:rgba(255,255,255,0.97);border-radius:14px;padding:10px 14px;box-shadow:0 16px 40px rgba(0,0,0,0.18);font-size:11px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px;white-space:nowrap;animation:floatRight 6s ease-in-out infinite}
.phone-float-2{position:absolute;bottom:12%;left:-78px;background:var(--navy);border-radius:14px;padding:10px 14px;box-shadow:0 16px 40px rgba(0,0,0,0.25);font-size:11px;font-weight:600;color:white;display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid rgba(232,0,29,0.3);animation:floatLeft 7s ease-in-out infinite}
@keyframes floatRight{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatLeft{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ── APP SCREENS ── */
.app-screen{position:absolute;inset:0;background:#0a0f2e;display:none;flex-direction:column;overflow:hidden;transform:translateX(14px);opacity:0;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1),opacity 0.2s ease}
.app-screen.active{transform:translateX(0);opacity:1}
.app-screen.active{display:flex}
.scrollable{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scrollable::-webkit-scrollbar{display:none}
.phone-status-bar{padding:28px 16px 6px;display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,0.7);font-weight:600;flex-shrink:0;background:#0a0f2e}

/* ── BACK HEADER ── */
.app-top-bar{display:flex;align-items:center;gap:10px;padding:6px 12px 10px;flex-shrink:0}
.back-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:var(--t)}
.back-btn:hover{background:rgba(232,0,29,0.15)}
.back-btn svg{display:block;color:white}
[data-theme="light"] .back-btn{background:rgba(13,21,87,0.08);border:1px solid rgba(13,21,87,0.18)}
[data-theme="light"] .back-btn svg{stroke:#0d1557 !important}
[data-theme="light"] .back-btn:hover{background:rgba(232,0,29,0.12)}
[data-theme="classic"] .back-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25)}
.ride-opt,.provider-card,.provider-book-btn,.give-item,.parish-row,.ann-card,.app-svc{position:relative;z-index:1;-webkit-tap-highlight-color:rgba(232,0,29,0.15)}
.ride-opt *,.provider-book-btn{pointer-events:auto !important}
.top-bar-title{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:white}
.top-bar-sub{font-size:10px;color:rgba(255,255,255,0.4);margin-top:1px}

/* ── HOME SCREEN ── */
.app-header{padding:4px 14px 10px;display:flex;justify-content:space-between;align-items:center}
.app-greeting{font-size:11px;color:rgba(255,255,255,0.45)}
.app-name{font-family:'Clash Display',sans-serif;font-size:17px;font-weight:700;color:white}
.app-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:white;border:2px solid rgba(232,0,29,0.5);cursor:pointer}
.app-wallet-card{margin:0 12px 12px;background:linear-gradient(135deg,#c0001a 0%,#8b0000 100%);border-radius:14px;padding:14px;cursor:pointer;position:relative;overflow:hidden;transition:var(--t)}
.app-wallet-card:hover{transform:scale(0.98)}
.app-wallet-card::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:rgba(255,255,255,0.07);border-radius:50%}
.awc-label{font-size:9px;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.awc-amount{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;color:white;margin-bottom:10px}
.awc-actions{display:flex;gap:6px}
.awc-btn{flex:1;background:rgba(255,255,255,0.15);border-radius:8px;padding:5px 2px;color:white;font-size:8px;font-weight:600;text-align:center;cursor:pointer;transition:var(--t)}
.awc-btn:hover{background:rgba(255,255,255,0.25)}
.app-sec-title{padding:4px 14px 6px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.55);letter-spacing:1px;text-transform:uppercase}
.app-services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 10px}
.app-svc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.07);cursor:pointer;transition:var(--t)}
.app-svc:hover{background:rgba(232,0,29,0.15);border-color:rgba(232,0,29,0.3);transform:scale(0.96)}
.app-svc span{font-size:26px}
.app-svc small{font-size:10px;color:rgba(255,255,255,0.75);font-weight:700;text-align:center;letter-spacing:0.1px}
.app-order-row{display:flex;gap:10px;align-items:center;padding:10px 12px;background:rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:var(--t)}
.app-order-row:hover{background:rgba(255,255,255,0.07)}
.aor-icon{font-size:22px;width:36px;height:36px;background:rgba(255,255,255,0.07);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.aor-info{flex:1;font-size:11px;color:white;line-height:1.4}
.aor-info small{display:block;font-size:9px;color:rgba(255,255,255,0.4);margin-top:2px}
.aor-badge{font-size:8px;font-weight:700;padding:2px 7px;border-radius:20px;white-space:nowrap}
.aor-badge.green{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.2)}
.aor-badge.blue{background:rgba(96,165,250,0.12);color:#60a5fa;border:1px solid rgba(96,165,250,0.2)}
.app-announce{margin:10px 12px 14px;background:rgba(232,0,29,0.08);border:1px solid rgba(232,0,29,0.2);border-radius:12px;padding:12px}
.ann-tag{font-size:9px;font-weight:700;color:#ff8090;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:4px}
.ann-text{font-size:11px;color:rgba(255,255,255,0.7);line-height:1.5;margin-bottom:6px}
.ann-link{font-size:10px;color:var(--red);font-weight:600;cursor:pointer}

/* ── SEARCH ── */
.app-search-bar{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:8px 12px}
.app-search-bar span{font-size:14px;opacity:0.5}
.app-search-bar input{background:none;border:none;outline:none;color:white;font-size:11px;width:100%;font-family:'DM Sans',sans-serif}
.app-search-bar input::placeholder{color:rgba(255,255,255,0.3)}
.search-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.s-cat{padding:5px 10px;border-radius:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font-size:10px;color:rgba(255,255,255,0.7);cursor:pointer;font-weight:500;transition:var(--t)}
.s-cat:hover,.s-cat.active{background:rgba(232,0,29,0.2);border-color:rgba(232,0,29,0.4);color:white}
.search-result{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:var(--t)}
.search-result:hover{padding-left:4px}
.sr-icon{font-size:20px;width:34px;height:34px;background:rgba(255,255,255,0.07);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sr-info{flex:1}
.sr-info b{display:block;font-size:11px;color:white;font-weight:600}
.sr-info small{display:block;font-size:9px;color:rgba(255,255,255,0.4);margin-top:2px}
.sr-arrow{color:rgba(255,255,255,0.3);font-size:16px}

/* ── WALLET ── */
.wallet-big-card{background:linear-gradient(135deg,var(--navy-mid) 0%,#3949ab 100%);border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,0.1);margin-bottom:4px}
.wbc-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.wbc-btn{background:rgba(255,255,255,0.1);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:8px;color:rgba(255,255,255,0.8);font-weight:600;text-align:center;transition:var(--t)}
.wbc-btn:hover{background:rgba(255,255,255,0.2);transform:scale(0.95)}
.wbc-btn-icon{font-size:16px}
.bills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.bill-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8px;color:rgba(255,255,255,0.7);font-weight:500;cursor:pointer;transition:var(--t)}
.bill-item:hover{background:rgba(232,0,29,0.15);border-color:rgba(232,0,29,0.3)}
.bill-icon{font-size:18px}
.txn-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.05)}
.txn-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.txn-icon.out{background:rgba(232,0,29,0.15);color:#ff6b7a}
.txn-icon.in{background:rgba(74,222,128,0.12);color:#4ade80}
.txn-info{flex:1}
.txn-info b{display:block;font-size:11px;color:white;font-weight:600}
.txn-info small{display:block;font-size:9px;color:rgba(255,255,255,0.4)}
.txn-amt{font-size:11px;font-weight:700;white-space:nowrap}
.txn-amt.out{color:#ff6b7a}.txn-amt.in{color:#4ade80}

/* ── SEND MONEY MODAL ── */
/* ── MODALS: fixed position, max z-index, fully interactive ── */
.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:62px;background:rgba(0,0,0,0.82);z-index:200;display:none;align-items:flex-end;justify-content:center;pointer-events:auto}
.modal-overlay.open{display:flex}
.modal-sheet{background:#111530;border-radius:20px 20px 0 0;padding:20px 16px;width:100%;max-width:480px;position:relative;pointer-events:auto;isolation:isolate;max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
.modal-title{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:white;margin-bottom:16px;text-align:center}
.modal-input{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:10px;padding:10px 12px;color:white;font-size:13px;font-family:'DM Sans',sans-serif;outline:none;margin-bottom:10px;pointer-events:auto;-webkit-user-select:text;user-select:text;touch-action:manipulation;cursor:text;display:block;position:relative;z-index:1;-webkit-appearance:none;appearance:none}
.modal-input::placeholder{color:rgba(255,255,255,0.3)}
.modal-btn{width:100%;background:var(--red);border:none;border-radius:10px;padding:12px;color:white;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--t);pointer-events:auto;touch-action:manipulation;display:block;position:relative;z-index:1}
.modal-btn:hover{background:var(--red-light)}
.modal-close{position:sticky;top:0;float:right;background:rgba(0,0,0,0.4);border:none;color:rgba(255,255,255,0.85);font-size:18px;cursor:pointer;z-index:10;pointer-events:auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-8px -4px 0 0;backdrop-filter:blur(8px)}
[data-theme="light"] .modal-close{background:rgba(255,255,255,0.85);color:#0d1557;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
/* ── PAYSTACK QUICK AMOUNT BUTTONS ── */
.ps-quick-btn{background:rgba(0,195,247,0.07);border:1px solid rgba(0,195,247,0.2);border-radius:8px;padding:8px 4px;text-align:center;font-size:10px;color:#00C3F7;cursor:pointer;font-weight:700;transition:all 0.15s;user-select:none;pointer-events:auto;touch-action:manipulation;font-family:'DM Sans',sans-serif;outline:none;width:100%;-webkit-tap-highlight-color:rgba(0,195,247,0.3)}
.ps-quick-btn:hover,.ps-quick-btn:active{background:rgba(0,195,247,0.25);border-color:#00C3F7;color:white;transform:scale(0.96)}
.ps-quick-btn.selected{background:rgba(0,195,247,0.25);border-color:#00C3F7;color:white}
/* Force interactivity when modal is portalled to body */
body>.modal-overlay *{pointer-events:auto!important}
body>.modal-overlay input,body>.modal-overlay textarea,body>.modal-overlay select{-webkit-user-select:text!important;user-select:text!important;cursor:text!important;touch-action:manipulation!important}
body>.modal-overlay button,body>.modal-overlay [onclick]{cursor:pointer!important}

/* ── FOOD / MERCHANT ── */
.food-hero-img{width:100%;height:120px;object-fit:cover;display:block;border-radius:0;background:rgba(255,255,255,0.06)}
.food-img{width:100%;height:90px;object-fit:cover;border-radius:10px 10px 0 0;display:block;background:rgba(255,255,255,0.06)}
/* Image fallback: show placeholder colour if image fails to load */
img{background:rgba(255,255,255,0.05)}
.provider-img{width:100%;height:80px;object-fit:cover;display:block;background:rgba(255,255,255,0.06)}
.mi-img{width:100%;height:70px;object-fit:cover;display:block;background:rgba(255,255,255,0.06)}
.food-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:var(--t)}
.food-card:hover{background:rgba(255,255,255,0.09);transform:scale(0.98)}
.food-card-body{padding:10px}
.food-card-name{font-size:13px;font-weight:700;color:white;margin-bottom:3px}
.food-card-meta{font-size:10px;color:rgba(255,255,255,0.45);display:flex;gap:8px}
.food-card-price{font-size:12px;font-weight:700;color:var(--red);font-family:'Clash Display',sans-serif;margin-top:4px}

/* ── RIDE / UBER-LIKE ── */
.ride-map{width:100%;height:160px;background:linear-gradient(135deg,#0d2a1a,#1a4a2e);border-radius:12px;overflow:hidden;position:relative;margin-bottom:12px;cursor:pointer}
.ride-map img{width:100%;height:100%;object-fit:cover;opacity:0.7}
.ride-map-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.ride-pin{font-size:28px;animation:bounce 1.5s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.ride-where-input{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer}
.ride-where-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ride-where-dot.green{background:#4ade80}
.ride-where-dot.red{background:var(--red)}
.ride-where-text{font-size:11px;color:rgba(255,255,255,0.6)}
.ride-options{display:flex;gap:8px;margin-bottom:12px}
.ride-opt{flex:1;background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.1);border-radius:10px;padding:8px;text-align:center;cursor:pointer;transition:var(--t);-webkit-tap-highlight-color:rgba(232,0,29,0.2);touch-action:manipulation;user-select:none}
.ride-opt.active{background:rgba(232,0,29,0.2)!important;border-color:var(--red)!important;border-width:2px!important}.ride-opt:hover{background:rgba(232,0,29,0.12);border-color:rgba(232,0,29,0.6)}
.ride-opt-icon{font-size:20px;margin-bottom:3px}
.ride-opt-name{font-size:9px;color:white;font-weight:700}
.ride-opt-price{font-size:9px;color:rgba(255,255,255,0.5)}
.ride-book-btn{width:100%;background:var(--red);border:none;border-radius:10px;padding:12px;color:white;font-size:13px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--t)}
.ride-book-btn:hover{background:var(--red-light)}

/* ── DRIVER CARD ── */
.driver-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:12px;margin-bottom:10px}
.driver-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.driver-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--red)}
.driver-info{flex:1}
.driver-name{font-size:13px;font-weight:700;color:white}
.driver-meta{font-size:10px;color:rgba(255,255,255,0.45)}
.driver-rating{font-size:10px;color:#fbbf24;font-weight:700}
.driver-actions{display:flex;gap:8px}
.driver-btn{flex:1;border:none;border-radius:8px;padding:8px;font-size:10px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--t)}
.driver-btn.call{background:rgba(74,222,128,0.15);color:#4ade80;border:1px solid rgba(74,222,128,0.3)}
.driver-btn.cancel{background:rgba(232,0,29,0.12);color:#ff6b7a;border:1px solid rgba(232,0,29,0.25)}
.ride-status-bar{background:rgba(255,255,255,0.05);border-radius:10px;padding:10px 12px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ride-status-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}

/* ── MARKETPLACE ── */
.market-cats{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px}
.market-cats::-webkit-scrollbar{display:none}
.mcat{padding:4px 10px;border-radius:20px;white-space:nowrap;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font-size:9px;color:rgba(255,255,255,0.6);font-weight:600;cursor:pointer;transition:var(--t)}
.mcat.active,.mcat:hover{background:var(--red);border-color:var(--red);color:white}
.market-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.market-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;overflow:hidden;cursor:pointer;transition:var(--t)}
.market-item:hover{background:rgba(255,255,255,0.09);transform:scale(0.97)}
.mi-img{width:100%;height:70px;object-fit:cover;display:block}
.mi-body{padding:7px}
.mi-name{font-size:10px;color:white;font-weight:600;margin-bottom:2px}
.mi-price{font-size:10px;color:var(--red);font-weight:700;font-family:'Clash Display',sans-serif}
.mi-seller{font-size:9px;color:rgba(255,255,255,0.35)}

/* ── SERVICE PROVIDER ── */
.provider-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:var(--t)}
.provider-card:hover{background:rgba(255,255,255,0.08)}
.provider-img{width:100%;height:80px;object-fit:cover;display:block}
.provider-body{padding:10px}
.provider-name{font-size:12px;font-weight:700;color:white;margin-bottom:2px}
.provider-meta{font-size:10px;color:rgba(255,255,255,0.45);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.p-rating{color:#fbbf24;font-weight:700}
.p-tag{font-size:8px;background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.2);padding:1px 6px;border-radius:20px;font-weight:600}
.provider-book-btn{width:100%;background:var(--red);border:none;border-radius:8px;padding:7px;color:white;font-size:10px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--t)}
.provider-book-btn:hover{background:var(--red-light)}

/* ── BOOKING FORM ── */
.form-label{font-size:10px;color:rgba(255,255,255,0.5);font-weight:600;margin-bottom:4px;display:block;letter-spacing:0.5px;text-transform:uppercase}
.form-input{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:9px 12px;color:white;font-size:11px;font-family:'DM Sans',sans-serif;outline:none;margin-bottom:10px;transition:var(--t)}
.form-input:focus{border-color:var(--red);background:rgba(232,0,29,0.05)}
.form-select{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:9px 12px;color:white;font-size:11px;font-family:'DM Sans',sans-serif;outline:none;margin-bottom:10px;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-appearance:auto;appearance:auto;position:relative;z-index:2;display:block;-webkit-tap-highlight-color:rgba(232,0,29,0.2)}
.form-select option{background:#0a0f2e;color:white}

/* ── CHURCH ── */
.church-banner{background:linear-gradient(135deg,rgba(232,0,29,0.2),rgba(13,21,87,0.4));border:1px solid rgba(232,0,29,0.3);border-radius:14px;padding:14px;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.cb-btn{background:var(--red);color:white;font-size:9px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;border:none;font-family:'DM Sans',sans-serif;transition:var(--t)}
.cb-btn:hover{background:var(--red-light)}
.give-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.give-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;color:rgba(255,255,255,0.7);font-weight:600;cursor:pointer;transition:var(--t)}
.give-item:hover{background:rgba(232,0,29,0.15);border-color:rgba(232,0,29,0.3)}
.give-item div:first-child{font-size:18px}
.parish-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:var(--t)}
.parish-row:hover{padding-left:4px}
.pr-icon{font-size:18px;width:32px;text-align:center}
.pr-info{flex:1}
.pr-info b{display:block;font-size:11px;color:white;font-weight:600}
.pr-info small{display:block;font-size:9px;color:rgba(255,255,255,0.4)}
.pr-arrow{color:rgba(255,255,255,0.3);font-size:16px}
.ann-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px;margin-bottom:8px;cursor:pointer;transition:var(--t)}
.ann-card:hover{background:rgba(255,255,255,0.07)}
.ann-c-tag{font-size:9px;font-weight:700;color:rgba(255,255,255,0.5);margin-bottom:4px}
.ann-c-tag.urgent{color:#fbbf24}
.ann-c-text{font-size:10px;color:rgba(255,255,255,0.7);line-height:1.5}

/* ── PROFILE ── */
.profile-header{text-align:center;padding:10px 0 16px;border-bottom:1px solid rgba(255,255,255,0.07);margin-bottom:10px}
.profile-avatar-lg{width:60px;height:60px;border-radius:50%;margin:0 auto 8px;background:linear-gradient(135deg,var(--red),var(--navy-mid));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:white;border:3px solid rgba(232,0,29,0.4)}
.profile-name{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:white;margin-bottom:3px}
.profile-meta{font-size:10px;color:rgba(255,255,255,0.45);margin-bottom:4px}
.profile-kyc{display:inline-block;font-size:9px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(74,222,128,0.1);color:#4ade80;border:1px solid rgba(74,222,128,0.2)}
.profile-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:var(--t);pointer-events:auto;touch-action:manipulation;position:relative;z-index:1;-webkit-tap-highlight-color:rgba(232,0,29,0.12)}
.profile-row:hover{background:rgba(255,255,255,0.05)}
.pr-row-text{flex:1}
.pr-row-text b{display:block;font-size:12px;color:white;font-weight:600}
.pr-row-text small{display:block;font-size:10px;color:rgba(255,255,255,0.4)}
.pr-chev{color:rgba(255,255,255,0.3);font-size:16px}

/* ── MERCHANT PORTAL ── */
.merchant-portal-header{background:linear-gradient(135deg,var(--red),var(--red-dark));padding:14px;border-radius:12px;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.merchant-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.merch-stat{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px;text-align:center}
.merch-stat-num{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:white}
.merch-stat-label{font-size:8px;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.5px}
.upload-area{background:rgba(255,255,255,0.04);border:2px dashed rgba(255,255,255,0.15);border-radius:12px;padding:20px;text-align:center;cursor:pointer;margin-bottom:10px;transition:var(--t)}
.upload-area:hover{border-color:var(--red);background:rgba(232,0,29,0.05)}
.upload-area-icon{font-size:28px;margin-bottom:6px}
.upload-area-text{font-size:11px;color:rgba(255,255,255,0.5)}
.order-item{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:10px;margin-bottom:8px;display:flex;gap:10px;align-items:center}
.order-item-status{font-size:8px;font-weight:700;padding:3px 8px;border-radius:20px}
.status-pending{background:rgba(251,191,36,0.12);color:#fbbf24;border:1px solid rgba(251,191,36,0.25)}
.status-done{background:rgba(74,222,128,0.12);color:#4ade80;border:1px solid rgba(74,222,128,0.2)}

/* ── AUTH SCREENS ── */
.auth-screen{padding:20px 16px}
.auth-logo{text-align:center;margin-bottom:24px}
.auth-logo-icon{width:56px;height:56px;background:var(--red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;font-family:'Clash Display',sans-serif;color:white;margin:0 auto 8px;box-shadow:0 0 30px rgba(232,0,29,0.4)}
.auth-title{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;color:white;text-align:center;margin-bottom:6px}
.auth-subtitle{font-size:12px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:24px}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;background:rgba(255,255,255,0.06);border-radius:10px;padding:3px}
.auth-tab{flex:1;padding:7px;text-align:center;font-size:11px;font-weight:700;color:rgba(255,255,255,0.45);cursor:pointer;border-radius:8px;transition:var(--t)}
.auth-tab.active{background:var(--red);color:white}
.auth-divider{text-align:center;font-size:10px;color:rgba(255,255,255,0.3);margin:12px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:rgba(255,255,255,0.1)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.social-auth{display:flex;gap:8px;margin-bottom:16px}
.social-btn{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:white;font-weight:600;cursor:pointer;transition:var(--t);font-family:'DM Sans',sans-serif}
.social-btn:hover{background:rgba(255,255,255,0.12)}
.terms-text{font-size:9px;color:rgba(255,255,255,0.3);text-align:center;margin-top:8px}
.terms-text span{color:var(--red);cursor:pointer}


/* ── PIN KEYPAD ── */
.pin-key{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:50%;width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:white;cursor:pointer;transition:var(--t);user-select:none;font-family:'Clash Display',sans-serif}
.pin-key:active,.pin-key:hover{background:rgba(232,0,29,0.25);border-color:var(--red);transform:scale(0.92)}
.pin-dot.filled{background:white!important;border-color:white!important;transform:scale(1.1)}
.pin-dot.error{background:var(--red)!important;border-color:var(--red)!important}
/* v119z: theme-aware PIN screen — dots, sublabels and filled state must read
   on light, dark AND classic themes (was hardcoded white = invisible on light). */
.pin-dot{border-color:var(--app-text3)!important}
.pin-dot.filled{background:var(--app-text)!important;border-color:var(--app-text)!important;transform:scale(1.1)}
.pin-key > div{color:var(--app-text3)!important}
[data-theme="light"] .pin-dot.filled{background:#0d1557!important;border-color:#0d1557!important}
[data-theme="light"] .pin-key > div{color:rgba(13,21,87,0.45)!important}


/* ── SECURITY BADGE ── */
.sec-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.2);border-radius:20px;padding:3px 8px;font-size:9px;font-weight:700;color:#4ade80}

/* ── PAYMENT RECEIPT ── */
.receipt-row{display:flex;justify-content:space-between;font-size:11px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.05)}

/* ── BOTTOM NAV ── */
.app-bottom-nav{position:absolute;bottom:0;left:0;right:0;background:rgba(8,13,58,0.98);border-top:1px solid rgba(255,255,255,0.08);padding:8px 6px 14px;display:flex;justify-content:space-around;align-items:flex-end;z-index:300;transform:translateZ(0)}
.abn-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:2px 8px;border-radius:10px;transition:var(--t);min-width:40px}
.abn-item:hover{background:rgba(255,255,255,0.06)}
.abn-icon{font-size:18px;opacity:0.45;transition:var(--t)}
.abn-label{font-size:8px;color:rgba(255,255,255,0.35);font-weight:600;transition:var(--t)}
.abn-item.active .abn-icon{opacity:1}
.abn-item.active .abn-label{color:var(--red)}
/* abn-center styles removed — wallet is now a normal nav item */

/* ── TOAST ── */
.app-toast{position:absolute;bottom:75px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(13,21,87,0.96);border:1px solid rgba(232,0,29,0.3);color:white;font-size:10px;font-weight:600;padding:7px 14px;border-radius:20px;white-space:nowrap;pointer-events:none;opacity:0;transition:all 0.3s ease;max-width:240px;text-align:center;z-index:200;backdrop-filter:blur(10px)}
.app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── WEBSITE SECTIONS ── */
section{position:relative}
.section-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(232,0,29,0.08);border:1px solid rgba(232,0,29,0.2);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:700;color:var(--red);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px}
.section-title{font-family:'Clash Display',sans-serif;font-size:clamp(28px,3.5vw,48px);font-weight:700;line-height:1.1;letter-spacing:-1.5px;color:var(--navy);margin-bottom:20px}
.section-desc{font-size:16px;line-height:1.7;color:var(--gray);max-width:560px;font-weight:300}

.features{padding:120px 5vw;background:white}
.features-header{text-align:center;margin-bottom:70px}
.features-header .section-desc{margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1200px;margin:0 auto}
.feature-card{background:var(--off-white);border-radius:20px;padding:36px 32px;border:1px solid var(--gray-light);transition:var(--t);position:relative;overflow:hidden;cursor:pointer}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:transparent}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon-wrap{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,rgba(232,0,29,0.1),rgba(13,21,87,0.05));border:1px solid rgba(232,0,29,0.15);display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:24px;transition:var(--t)}
.feature-card:hover .feature-icon-wrap{background:linear-gradient(135deg,var(--red),var(--navy-mid));border-color:transparent;transform:scale(1.1);box-shadow:0 8px 24px rgba(232,0,29,0.3)}
.feature-title{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:600;color:var(--navy);margin-bottom:12px;letter-spacing:-0.5px}
.feature-desc{font-size:14px;line-height:1.7;color:var(--gray)}

.services-section{padding:120px 5vw;background:var(--navy-dark);overflow:hidden;position:relative}
.services-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 0% 50%,rgba(232,0,29,0.06) 0%,transparent 60%)}
.services-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.services-header{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.services-header .section-title{color:white}
.services-header .section-desc{color:rgba(255,255,255,0.5)}
.services-tabs{display:flex;gap:12px;flex-wrap:wrap;align-self:end}
.tab{padding:8px 20px;border-radius:100px;border:1.5px solid rgba(255,255,255,0.15);background:transparent;color:rgba(255,255,255,0.5);font-size:13px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:var(--t)}
.tab.active,.tab:hover{background:var(--red);border-color:var(--red);color:white}
.services-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.service-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;padding:28px 24px;transition:var(--t);cursor:pointer;backdrop-filter:blur(10px);position:relative;overflow:hidden}
.service-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(232,0,29,0.3);transform:translateY(-4px)}
.service-card-icon{font-size:32px;margin-bottom:16px;display:block}
.service-card-name{font-family:'Clash Display',sans-serif;font-size:17px;font-weight:600;color:white;margin-bottom:8px}
.service-card-desc{font-size:13px;line-height:1.6;color:rgba(255,255,255,0.4)}
.service-card-tag{display:inline-block;margin-top:14px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:rgba(232,0,29,0.15);color:#ff8090;border:1px solid rgba(232,0,29,0.2);text-transform:uppercase;letter-spacing:0.8px}

.how-it-works{padding:120px 5vw;background:white}
.how-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.steps{display:flex;flex-direction:column;gap:32px;margin-top:48px}
.step{display:flex;gap:24px;align-items:flex-start}
.step-number{width:48px;height:48px;flex-shrink:0;background:linear-gradient(135deg,var(--red),var(--red-dark));color:white;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Clash Display',sans-serif;font-size:18px;font-weight:700;box-shadow:0 8px 24px rgba(232,0,29,0.3);position:relative;z-index:1}
.step:not(:last-child) .step-number::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);width:2px;height:32px;background:linear-gradient(to bottom,var(--red),transparent);margin-top:4px}
.step-title{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;color:var(--navy);margin-bottom:6px}
.step-desc{font-size:14px;color:var(--gray);line-height:1.6}
.how-img-container{border-radius:24px;overflow:hidden;position:relative;box-shadow:var(--shadow-card)}
.how-img-container img{width:100%;height:400px;object-fit:cover;display:block}
.how-img-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,21,87,0.3),rgba(232,0,29,0.1))}
.how-badge{position:absolute;bottom:-20px;left:-20px;background:white;border-radius:20px;padding:20px 24px;box-shadow:var(--shadow-card);display:flex;gap:14px;align-items:center;min-width:220px}
.how-badge-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--red),var(--red-dark));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.how-badge-text{font-size:12px;color:var(--gray)}
.how-badge-title{font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:2px}

.wallet-section{padding:120px 5vw;background:linear-gradient(135deg,#f0f1f8 0%,#fff 50%,#f8e8ea 100%)}
.wallet-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.wallet-features{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.wallet-feature{display:flex;gap:16px;align-items:flex-start;padding:20px;background:white;border-radius:16px;border:1px solid var(--gray-light);transition:var(--t);cursor:pointer}
.wallet-feature:hover{box-shadow:var(--shadow-card);border-color:rgba(232,0,29,0.15);transform:translateX(6px)}
.wallet-feature-icon{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,rgba(232,0,29,0.1),rgba(13,21,87,0.05));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.wallet-feature-title{font-weight:600;color:var(--navy);margin-bottom:4px;font-size:15px}
.wallet-feature-desc{font-size:13px;color:var(--gray);line-height:1.6}
.credit-card{width:100%;max-width:360px;margin:0 auto;aspect-ratio:1.586;background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-mid) 50%,#3949ab 100%);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(13,21,87,0.3),0 0 0 1px rgba(255,255,255,0.05);display:flex;flex-direction:column;justify-content:space-between;transform:rotateY(-5deg) rotateX(5deg);transition:var(--t)}
.credit-card:hover{transform:rotateY(0deg) rotateX(0deg)}
.credit-card::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(232,0,29,0.2),transparent 70%)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.card-logo-text{font-family:'Clash Display',sans-serif;font-size:20px;font-weight:700;color:white}
.card-logo-text span{color:var(--red)}
.card-chip{width:40px;height:30px;background:linear-gradient(135deg,#d4a017,#f0c040);border-radius:6px}
.card-number{font-family:'Clash Display',sans-serif;font-size:18px;font-weight:600;color:rgba(255,255,255,0.9);letter-spacing:2px;text-align:center}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.card-holder-label{font-size:9px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.card-holder-name{font-size:14px;font-weight:600;color:white;font-family:'Clash Display',sans-serif}
.card-balance{font-family:'Clash Display',sans-serif;font-size:22px;font-weight:700;color:white;text-align:right}
.card-below{max-width:360px;margin:24px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mini-action{background:white;border-radius:14px;padding:16px 12px;text-align:center;box-shadow:0 4px 20px rgba(13,21,87,0.08);cursor:pointer;transition:var(--t);border:1px solid var(--gray-light)}
.mini-action:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:rgba(232,0,29,0.2)}
.mini-action-icon{font-size:22px;margin-bottom:6px}
.mini-action-label{font-size:11px;font-weight:600;color:var(--navy)}

.church-section{padding:120px 5vw;background:var(--navy-dark);position:relative;overflow:hidden}
.church-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.church-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;margin-top:60px}
.church-img-wrap{border-radius:24px;overflow:hidden;position:relative;box-shadow:0 40px 100px rgba(0,0,0,0.4)}
.church-img-wrap img{width:100%;height:460px;object-fit:cover;display:block}
.church-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,13,58,0.7) 0%,transparent 50%)}
.church-img-caption{position:absolute;bottom:24px;left:24px;right:24px;color:white}
.church-img-caption h3{font-family:'Clash Display',sans-serif;font-size:20px;margin-bottom:4px}
.church-img-caption p{font-size:13px;color:rgba(255,255,255,0.6)}
.church-features{display:flex;flex-direction:column;gap:20px}
.church-feature{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:22px;display:flex;gap:16px;transition:var(--t)}
.church-feature:hover{background:rgba(255,255,255,0.08);border-color:rgba(232,0,29,0.25);transform:translateX(6px)}
.church-feature-icon{width:44px;height:44px;flex-shrink:0;background:rgba(232,0,29,0.12);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid rgba(232,0,29,0.2)}
.church-feature-title{font-weight:600;color:white;margin-bottom:4px;font-size:15px}
.church-feature-desc{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.6}

.download-section{padding:120px 5vw;background:white}
.download-inner{max-width:1200px;margin:0 auto;background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy-mid) 60%,#1a0a3a 100%);border-radius:32px;padding:80px 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden;box-shadow:0 40px 100px rgba(13,21,87,0.25)}
.download-inner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(232,0,29,0.12),transparent 70%);border-radius:50%}
.download-content{position:relative;z-index:1}
.download-title{font-family:'Clash Display',sans-serif;font-size:clamp(28px,3vw,44px);font-weight:700;color:white;letter-spacing:-1.5px;line-height:1.1;margin-bottom:20px}
.download-desc{font-size:16px;color:rgba(255,255,255,0.5);line-height:1.7;margin-bottom:36px}
.store-btns{display:flex;gap:16px;flex-wrap:wrap}
.store-btn{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.15);border-radius:14px;padding:14px 22px;color:white;text-decoration:none;transition:var(--t);cursor:pointer}
.store-btn:hover{background:rgba(255,255,255,0.15);border-color:var(--red);transform:translateY(-2px)}
.store-btn-icon{font-size:28px}
.store-btn-sub{font-size:10px;color:rgba(255,255,255,0.5)}
.store-btn-name{font-size:16px;font-weight:700;font-family:'Clash Display',sans-serif}
.download-visual{position:relative;z-index:1}
.qr-display{background:white;border-radius:20px;padding:30px;text-align:center;max-width:280px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.qr-label{font-size:12px;color:var(--gray);font-weight:500}
.qr-label strong{display:block;font-family:'Clash Display',sans-serif;font-size:16px;font-weight:700;color:var(--navy);margin-bottom:4px}

footer{background:var(--navy-dark);padding:80px 5vw 40px;border-top:1px solid rgba(255,255,255,0.06)}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-brand p{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.7;margin:16px 0 24px;max-width:280px}
.footer-social{display:flex;gap:12px}
.social-icon{width:38px;height:38px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:var(--t);text-decoration:none}
.social-icon:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.footer-col h4{font-family:'Clash Display',sans-serif;font-size:15px;font-weight:700;color:white;margin-bottom:20px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.4);text-decoration:none;transition:var(--t)}
.footer-links a:hover{color:var(--red)}
.footer-bottom{max-width:1200px;margin:0 auto;padding-top:30px;border-top:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,0.3)}
.footer-badges{display:flex;gap:12px}
.footer-badge{padding:4px 12px;border-radius:20px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);letter-spacing:0.5px}

.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

@media(max-width:968px){
  .nav-links,.nav-cta{display:none}.hamburger{display:flex}
  .hero-content{grid-template-columns:1fr;gap:40px}.hero-visual{order:-1}
  .phone-frame{width:260px}.phone-float-1,.phone-float-2{display:none}
  .features-grid{grid-template-columns:1fr}
  .services-header{grid-template-columns:1fr;gap:24px}.services-cards{grid-template-columns:repeat(2,1fr)}
  .how-inner{grid-template-columns:1fr;gap:40px}
  .wallet-inner{grid-template-columns:1fr;gap:40px}
  .church-grid{grid-template-columns:1fr;gap:40px}
  .download-inner{grid-template-columns:1fr;padding:50px 36px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .hero-stats{gap:24px}
}
@media(max-width:576px){
  .services-cards{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:30px}
  .store-btns{flex-direction:column}.footer-bottom{flex-direction:column;text-align:center}
  .hero-actions{flex-direction:column}.hero-actions .btn{width:100%;justify-content:center}
}

/* ── PRESENTATION / DEMO MODE ── */
/* demo styles removed */

/* ══════════════════════════════════════════════════════
   MOBILE FULLSCREEN APP MODE (≤ 600px)
   On small screens the website layout collapses and the
   phone frame becomes the entire viewport — like a real
   native app. The nav must be fixed to the viewport.
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Hide the website chrome entirely */
  nav, .hero-badge, .hero-title, .hero-desc, .hero-actions,
  .hero-stats, .hero-content > *:not(.hero-visual),
  .features-section, .services-section, .how-section,
  .wallet-section, .church-section, .download-section,
  footer, .mobile-menu { display: none !important; }

  /* Hero becomes just the phone frame, full viewport */
  .hero {
    min-height: 100dvh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }
  .hero-visual {
    width: 100% !important;
    height: 100dvh !important;
  }
  /* Phone frame: no rounded decoration, fills screen */
  .phone-frame {
    width: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .phone-notch { display: none !important; }
  /* Phone screen: fixed fullscreen */
  .phone-screen {
    position: fixed !important;
    inset: 0 !important;
    height: 100dvh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Bottom nav: fixed to viewport bottom */
  .app-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
    z-index: 9999 !important;
    transform: none !important;
  }
  /* App screens fill the fixed phone-screen */
  .app-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }
  /* Scrollable content clears the fixed bottom nav */
  .app-screen .scrollable {
    padding-bottom: max(80px, calc(70px + env(safe-area-inset-bottom, 0px))) !important;
  }
}
.app-screen .scrollable { padding-bottom: 70px !important; }



/* Screens with fixed bottom action bars */
#screen-checkout .scrollable,
#screen-food-order .scrollable,
#screen-book-service .scrollable,
#screen-logistics .scrollable,
#screen-rides .scrollable,
#screen-book-accommodation .scrollable {
  padding-bottom: 10px !important;
}

/* ═══ MOBILE SAFE AREA — prevent bottom cutoff on all phones ═══ */
html { 
  -webkit-text-size-adjust: 100%;
}

/* Bottom nav: account for phone safe area (iPhone notch, Android gestures) */
.app-bottom-nav {
  padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
}

/* All scrollable screens: enough room above bottom nav */
.app-screen .scrollable {
  padding-bottom: max(80px, calc(70px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Bottom action bars (checkout, book service, etc.) */
#screen-checkout > div:last-child,
#screen-food-order > div:last-child,
#screen-book-service > div:last-child,
#screen-book-accommodation > div:last-child,
#screen-rides > div:last-child,
#screen-logistics > div:last-child {
  padding-bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
  /* CRITICAL: push sticky footer above the app-bottom-nav (which is position:absolute;bottom:0).
     Without this margin the nav (≈60px tall) overlaps the Place Order button. */
  margin-bottom: 62px !important;
}

/* Sticky cart buttons (marketplace) */
#marketCartBtn {
  margin-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}

/* ride-book-btn — action buttons at screen bottom */
.ride-book-btn {
  margin-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
}

/* ═══ PLACE-ORDER CUTOFF FIX (global) ═══
   Many screens put the primary CTA (.ride-book-btn / .modal-btn) INSIDE
   the .scrollable area rather than in a sticky footer. When the user scrolls
   to the bottom, the button sits behind the bottom-nav. We force extra
   bottom padding on EVERY .scrollable so the last child never hides beneath
   the nav, regardless of where the CTA lives. This overrides the earlier
   10px override for specific screens — those screens have proper sticky
   footers and scrollable-inline buttons must not be cut off on either pattern. */
#screen-checkout .scrollable,
#screen-food-order .scrollable,
#screen-book-service .scrollable,
#screen-logistics .scrollable,
#screen-rides .scrollable,
#screen-book-accommodation .scrollable,
#screen-tourism .scrollable,
#screen-accommodation .scrollable,
#screen-recycling .scrollable,
#screen-adverts .scrollable,
#screen-bills .scrollable,
#screen-auto .scrollable,
#screen-home-services .scrollable,
#screen-beauty .scrollable,
#screen-health .scrollable,
#screen-market .scrollable,
#screen-food .scrollable,
#screen-church .scrollable,
#screen-profile .scrollable,
#screen-wallet .scrollable {
  padding-bottom: max(96px, calc(84px + env(safe-area-inset-bottom, 0px))) !important;
}

/* Extra-safety: the final button/div in a .scrollable always gets margin-bottom */
.app-screen .scrollable > button:last-child,
.app-screen .scrollable > .ride-book-btn:last-child,
.app-screen .scrollable > .modal-btn:last-child {
  margin-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
}

/* Phone frame in desktop demo mode — no safe area needed */
body.demo-mode .app-bottom-nav,
body.fullscreen-demo .app-bottom-nav {
  padding-bottom: 14px !important;
}

/* ══════════════════════════════════════════════
   HOME THEME TOGGLE BUTTON
   ══════════════════════════════════════════════ */
.home-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--app-border);
  background: var(--app-surface);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.home-theme-btn:hover {
  border-color: var(--red);
  background: rgba(232,0,29,0.12);
  transform: scale(1.08) rotate(12deg);
  box-shadow: 0 4px 20px rgba(232,0,29,0.25);
}
.home-theme-btn:active {
  transform: scale(0.93);
}
/* Icon spin on toggle */
.home-theme-btn.spinning span {
  display: inline-block;
  animation: themeSpin 0.4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes themeSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(0.7); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ══════════════════════════════════════════════
   ELEGANT THEME TRANSITIONS — ALL SURFACES
   ══════════════════════════════════════════════ */
.phone-screen,
.app-screen,
.app-top-bar,
.app-bottom-nav,
.app-header,
.wallet-big-card,
.quick-action,
.service-card,
.ann-card,
.profile-row,
.modal-sheet,
.modal-overlay,
.form-input,
.modal-input,
.form-select,
.food-card,
.ride-opt,
.chat-bubble-in,
.chat-bubble-out {
  transition:
    background 0.35s cubic-bezier(0.4,0,0.2,1),
    color      0.35s cubic-bezier(0.4,0,0.2,1),
    border-color 0.35s cubic-bezier(0.4,0,0.2,1),
    box-shadow 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Light theme — home screen refinements */
[data-theme="classic"] .home-theme-btn {
  border-color: rgba(26,39,68,0.25);
  background: rgba(255,255,255,0.3);
}

/* ════════════════════════════════════════════════════════
   CLASSIC BLUE THEME — DEEP ROYAL BLUE REDESIGN
   Rich navy/indigo palette, crisp white text, premium feel
   ════════════════════════════════════════════════════════ */

[data-theme="classic"] {
  --app-bg:        #0e1b4a;   /* deep royal navy */
  --app-bg2:       #162058;   /* slightly lighter navy */
  --app-surface:   rgba(255,255,255,0.10);
  --app-surface2:  rgba(255,255,255,0.06);
  --app-border:    rgba(100,149,237,0.30);   /* cornflower blue tint */
  --app-border2:   rgba(100,149,237,0.15);
  --app-text:      #e8eeff;   /* near-white with slight blue tint */
  --app-text2:     rgba(200,214,255,0.75);
  --app-text3:     rgba(160,180,255,0.45);
  --app-input-bg:  rgba(255,255,255,0.09);
  --app-topbar:    rgba(14,27,74,0.97);
  --app-nav:       rgba(10,20,62,0.98);
  --app-card:      rgba(255,255,255,0.08);
  --app-status:    rgba(255,255,255,0.10);
  --app-accent:    var(--red);
  --app-shadow:    0 4px 24px rgba(0,0,30,0.45);
  --app-txn-in:    rgba(74,222,128,0.13);
  --app-txn-out:   rgba(232,0,29,0.13);
}

/* Base screens */
[data-theme="classic"] .phone-screen,
[data-theme="classic"] .app-screen { background: #0e1b4a !important; }
[data-theme="classic"] .scrollable  { background: #0e1b4a; }

/* Status bar */
[data-theme="classic"] .phone-status-bar { background: rgba(100,149,237,0.08) !important; color: rgba(200,214,255,0.8) !important; }

/* Top bar */
[data-theme="classic"] .app-top-bar { background: rgba(14,27,74,0.97) !important; border-bottom: 1px solid rgba(100,149,237,0.18) !important; }
[data-theme="classic"] .top-bar-title { color: #e8eeff !important; }
[data-theme="classic"] .top-bar-sub   { color: rgba(160,180,255,0.6) !important; }

/* Bottom nav — deep glass navy */
[data-theme="classic"] .app-bottom-nav { background: rgba(10,20,62,0.98) !important; border-top: 1px solid rgba(100,149,237,0.18) !important; }
[data-theme="classic"] .abn-label { color: rgba(160,180,255,0.5) !important; }
[data-theme="classic"] .abn-item.active .abn-label { color: var(--red) !important; }

/* Cards */
[data-theme="classic"] .food-card,
[data-theme="classic"] .provider-card,
[data-theme="classic"] .market-item,
[data-theme="classic"] .bill-item,
[data-theme="classic"] .order-item,
[data-theme="classic"] .ann-card {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(100,149,237,0.22) !important;
  box-shadow: 0 2px 16px rgba(0,0,30,0.3) !important;
}
[data-theme="classic"] .food-card-name,
[data-theme="classic"] .provider-name,
[data-theme="classic"] .mi-name { color: #e8eeff !important; }
[data-theme="classic"] .food-card-meta,
[data-theme="classic"] .mi-seller { color: rgba(160,180,255,0.6) !important; }
[data-theme="classic"] .food-card-price,
[data-theme="classic"] .mi-price  { color: #ff6b7a !important; }

/* Quick actions */
[data-theme="classic"] .quick-action {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(100,149,237,0.2) !important;
  box-shadow: 0 2px 14px rgba(0,0,30,0.25) !important;
}
[data-theme="classic"] .quick-action-label { color: #e8eeff !important; }
[data-theme="classic"] .quick-action:hover {
  background: rgba(232,0,29,0.12) !important;
  border-color: rgba(232,0,29,0.3) !important;
}

/* Profile rows */
[data-theme="classic"] .profile-row { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(100,149,237,0.13) !important; }
[data-theme="classic"] .profile-row b { color: #e8eeff !important; }
[data-theme="classic"] .profile-row small { color: rgba(160,180,255,0.55) !important; }

/* Inputs */
[data-theme="classic"] .form-input,
[data-theme="classic"] .modal-input,
[data-theme="classic"] .form-select {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(100,149,237,0.28) !important;
  color: #e8eeff !important;
}
[data-theme="classic"] .form-input::placeholder,
[data-theme="classic"] .modal-input::placeholder { color: rgba(160,180,255,0.4) !important; }
[data-theme="classic"] .form-label { color: rgba(200,214,255,0.8) !important; }

/* PIN keys */
[data-theme="classic"] .pin-key {
  background: rgba(255,255,255,0.09) !important;
  color: #e8eeff !important;
  border: 1px solid rgba(100,149,237,0.25) !important;
}
[data-theme="classic"] .pin-key:active { background: rgba(100,149,237,0.2) !important; }

/* Modal sheet */
[data-theme="classic"] .modal-sheet { background: #0e1b4a !important; border-top: 1px solid rgba(100,149,237,0.22) !important; }
[data-theme="classic"] .modal-title  { color: #e8eeff !important; }

/* Section titles */
[data-theme="classic"] .app-sec-title { color: rgba(200,214,255,0.8) !important; }

/* Transaction history */
[data-theme="classic"] .txn-info b     { color: #e8eeff !important; }
[data-theme="classic"] .txn-info small { color: rgba(160,180,255,0.6) !important; }
[data-theme="classic"] .txn-amt.in     { color: #4ade80 !important; }
[data-theme="classic"] .txn-amt.out    { color: #ff6b7a !important; }
[data-theme="classic"] .txn-row { border-bottom: 1px solid rgba(100,149,237,0.12) !important; }

/* Back button */
[data-theme="classic"] .back-btn { background: rgba(100,149,237,0.12) !important; border: 1px solid rgba(100,149,237,0.28) !important; }
[data-theme="classic"] .back-btn svg { stroke: #c8d6ff !important; }
[data-theme="classic"] .back-btn:hover { background: rgba(232,0,29,0.15) !important; }

/* Search bar */
[data-theme="classic"] .app-search-bar { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(100,149,237,0.25) !important; }
[data-theme="classic"] .app-search-bar input { color: #e8eeff !important; }
[data-theme="classic"] .app-search-bar input::placeholder { color: rgba(160,180,255,0.45) !important; }

/* Ride options */
[data-theme="classic"] .ride-opt { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(100,149,237,0.2) !important; }
[data-theme="classic"] .ride-opt.selected { border-color: var(--red) !important; background: rgba(232,0,29,0.08) !important; }
[data-theme="classic"] .ride-type-name  { color: #e8eeff !important; }
[data-theme="classic"] .ride-type-desc  { color: rgba(160,180,255,0.6) !important; }
[data-theme="classic"] .ride-type-price { color: #ff6b7a !important; }

/* Chips */
[data-theme="classic"] .mcat,
[data-theme="classic"] .s-cat {
  background: rgba(100,149,237,0.1) !important;
  color: #c8d6ff !important;
  border: 1px solid rgba(100,149,237,0.22) !important;
}
[data-theme="classic"] .mcat.active,
[data-theme="classic"] .mcat:active {
  background: var(--red) !important;
  color: white !important;
  border-color: var(--red) !important;
}

/* Church parish rows */
[data-theme="classic"] .parish-row { background: rgba(255,255,255,0.05) !important; border-bottom: 1px solid rgba(100,149,237,0.12) !important; }
[data-theme="classic"] .parish-row .pr-info b     { color: #e8eeff !important; }
[data-theme="classic"] .parish-row .pr-info small { color: rgba(160,180,255,0.55) !important; }

/* Home theme toggle button */
[data-theme="classic"] .home-theme-btn {
  border-color: rgba(100,149,237,0.35) !important;
  background: rgba(100,149,237,0.12) !important;
  box-shadow: 0 2px 12px rgba(0,0,30,0.3) !important;
}
[data-theme="classic"] .home-theme-btn:hover {
  border-color: var(--red) !important;
  background: rgba(232,0,29,0.12) !important;
}

/* Wallet card — keep deep dark on classic too */
[data-theme="classic"] .wallet-big-card { background: linear-gradient(135deg,#06104a,#1a0a3a) !important; border: 1px solid rgba(100,149,237,0.2) !important; }

/* Scrollbar */
[data-theme="classic"] .scrollable::-webkit-scrollbar-track { background: #0e1b4a; }
[data-theme="classic"] .scrollable::-webkit-scrollbar-thumb { background: rgba(100,149,237,0.5); border-radius: 3px; }

/* Feature cards */
[data-theme="classic"] .feature-card { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(100,149,237,0.2) !important; }
[data-theme="classic"] .feature-title { color: #e8eeff !important; }
[data-theme="classic"] .feature-desc  { color: rgba(160,180,255,0.65) !important; }


/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — SINGLE AUTHORITATIVE RULESET  (v79)
   Every surface, component, screen, and inline-style override.
   One block. No duplicates. Do not append further light blocks.
   ════════════════════════════════════════════════════════════════════ */

/* ─── 1. CORE SURFACES ─────────────────────────────────────────────── */
[data-theme="light"] .phone-screen            { background: #f0f2f8 !important; }
[data-theme="light"] .app-screen              { background: #f0f2f8 !important; color: #1a1d3a !important; }
[data-theme="light"] .scrollable              { background: #f0f2f8 !important; color: #1a1d3a !important; }
[data-theme="light"] .scrollable::-webkit-scrollbar-track { background: #e8eaf2; }
[data-theme="light"] .scrollable::-webkit-scrollbar-thumb { background: rgba(13,21,87,0.20); border-radius: 4px; }
[data-theme="light"] .phone-status-bar        { background: #e8eaf2 !important; color: #0d1557 !important; }
[data-theme="light"] .phone-status-bar span   { color: #0d1557 !important; }

/* ─── 2. TOP BAR ────────────────────────────────────────────────────── */
[data-theme="light"] .app-top-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(13,21,87,0.10) !important;
  box-shadow: 0 2px 10px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] .top-bar-title           { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .top-bar-sub             { color: rgba(13,21,87,0.50) !important; }
[data-theme="light"] .back-btn                { background: rgba(13,21,87,0.08) !important; border: 1.5px solid rgba(13,21,87,0.14) !important; }
[data-theme="light"] .back-btn svg            { stroke: #0d1557 !important; }

/* ─── 3. BOTTOM NAV ──────────────────────────────────────────────────── */
[data-theme="light"] .app-bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid rgba(13,21,87,0.10) !important;
  box-shadow: 0 -4px 20px rgba(13,21,87,0.08) !important;
}
[data-theme="light"] .app-bottom-nav .abn-label               { color: rgba(13,21,87,0.45) !important; font-weight: 600; }
[data-theme="light"] .app-bottom-nav .abn-item.active .abn-label { color: var(--red) !important; font-weight: 700; }
[data-theme="light"] .app-bottom-nav .abn-icon                { filter: brightness(0) saturate(100%) opacity(0.40) !important; }
[data-theme="light"] .app-bottom-nav .abn-item.active .abn-icon { filter: none !important; }
[data-theme="light"] .notif-dot-border                        { border-color: #ffffff !important; }

/* ─── 4. HOME SCREEN ─────────────────────────────────────────────────── */
[data-theme="light"] .app-header              { background: #ffffff !important; border-bottom: 1px solid rgba(13,21,87,0.08) !important; }
[data-theme="light"] .app-greeting            { color: rgba(13,21,87,0.55) !important; }
[data-theme="light"] #timeGreeting            { color: rgba(13,21,87,0.55) !important; }
[data-theme="light"] #homeUserName            { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .home-theme-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.16) !important;
  box-shadow: 0 2px 8px rgba(13,21,87,0.10) !important;
  color: #0d1557 !important;
}
/* Service grid – preserve emoji colours */
[data-theme="light"] .app-services-grid       { background: transparent !important; }
/* ── Services grid ── */
[data-theme="light"] .app-svc {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.09) !important;
  box-shadow: 0 2px 8px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] .app-svc span,
[data-theme="light"] .app-svc > span  { filter: none !important; opacity: 1 !important; color: unset !important; }
[data-theme="light"] .app-svc small,
[data-theme="light"] .app-svc > small { color: #0d1557 !important; font-weight: 700 !important; font-size: 10px !important; }
/* Hero carousel */
[data-theme="light"] #homeHeroCarousel        { background: rgba(13,21,87,0.06) !important; }
/* Wallet card on home — keep dark, white text */
[data-theme="light"] .app-wallet-card {
  background: linear-gradient(135deg, #0d1557 0%, #1e0a50 100%) !important;
  box-shadow: 0 6px 24px rgba(13,21,87,0.28) !important;
}
[data-theme="light"] .awc-label               { color: rgba(255,255,255,0.65) !important; }
[data-theme="light"] .awc-amount              { color: #ffffff !important; font-weight: 800; }
[data-theme="light"] .awc-btn {
  background: rgba(255,255,255,0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  font-weight: 600;
}
/* Recent activity rows */
[data-theme="light"] .app-order-row {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.09) !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 6px rgba(13,21,87,0.06) !important;
}
[data-theme="light"] .aor-icon                { background: rgba(13,21,87,0.06) !important; }
[data-theme="light"] .aor-info b              { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .aor-info small          { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .aor-badge.green         { background: rgba(22,163,74,0.12) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.22) !important; }
[data-theme="light"] .aor-badge.blue          { background: rgba(29,78,216,0.09) !important; color: #1d4ed8 !important; border: 1px solid rgba(29,78,216,0.18) !important; }
[data-theme="light"] .aor-badge.red           { background: rgba(220,38,38,0.09) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,0.18) !important; }
/* Announcement bar */
[data-theme="light"] .app-announce {
  background: rgba(232,0,29,0.05) !important;
  border: 1px solid rgba(232,0,29,0.18) !important;
  border-radius: 12px !important;
  margin: 0 0 10px !important;
}
[data-theme="light"] .ann-tag                 { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .ann-text                { color: rgba(13,21,87,0.70) !important; }
[data-theme="light"] .ann-link                { color: var(--red) !important; font-weight: 700; }
/* Sponsored ad inline card */
[data-theme="light"] .scrollable div[style*="linear-gradient(135deg,rgba(232,0,29,0.1"] {
  background: rgba(232,0,29,0.05) !important;
  border: 1px solid rgba(232,0,29,0.14) !important;
}
[data-theme="light"] .scrollable div[style*="rgba(0,0,0,0.3)"][style*="padding:2px"] {
  background: rgba(13,21,87,0.10) !important;
  color: rgba(13,21,87,0.55) !important;
}
/* Sponsored merchant icon box */
[data-theme="light"] .scrollable div[style*="rgba(255,255,255,0.1)"][style*="border-radius:10px"] {
  background: rgba(13,21,87,0.07) !important;
}

/* ─── 5. SECTION TITLES ───────────────────────────────────────────────── */
[data-theme="light"] .app-sec-title           { color: #0d1557 !important; font-weight: 800; }
[data-theme="light"] .scrollable .app-sec-title { color: #0d1557 !important; }

/* ─── 6. FORMS & INPUTS ──────────────────────────────────────────────── */
[data-theme="light"] .form-label              { color: #0d1557 !important; font-weight: 700; font-size: 11px; }
[data-theme="light"] .form-input,
[data-theme="light"] .modal-input,
[data-theme="light"] .form-select {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.18) !important;
  color: #0d1557 !important;
  box-shadow: 0 1px 4px rgba(13,21,87,0.05) !important;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .modal-input:focus       { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(232,0,29,0.08) !important; }
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .modal-input::placeholder { color: rgba(13,21,87,0.30) !important; }
[data-theme="light"] .form-select option      { background: #ffffff; color: #0d1557; }

/* ─── 7. AUTH SCREENS (login, signup) ────────────────────────────────── */
[data-theme="light"] .auth-screen             { background: #ffffff !important; }
[data-theme="light"] .auth-title              { color: #0d1557 !important; font-weight: 800; }
[data-theme="light"] .auth-subtitle           { color: rgba(13,21,87,0.55) !important; }
/* Tab bar */
[data-theme="light"] .auth-tabs {
  background: rgba(13,21,87,0.07) !important;
  border: 1px solid rgba(13,21,87,0.10) !important;
}
[data-theme="light"] .auth-tab                { color: rgba(13,21,87,0.45) !important; font-weight: 700; }
[data-theme="light"] .auth-tab.active         { background: var(--red) !important; color: #ffffff !important; }
/* Divider */
[data-theme="light"] .auth-divider            { color: rgba(13,21,87,0.35) !important; }
[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after     { background: rgba(13,21,87,0.12) !important; }
/* Social buttons */
[data-theme="light"] .social-btn {
  background: #f4f6fb !important;
  border: 1.5px solid rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .social-btn span         { color: #0d1557 !important; }
[data-theme="light"] .social-btn:hover        { background: #eaecf5 !important; }
/* Apple button specifically (has inline dark bg) */
[data-theme="light"] #appleSignInBtn {
  background: #1a1a2e !important;
  border-color: rgba(0,0,0,0.20) !important;
}
[data-theme="light"] #appleSignInBtn span     { color: #ffffff !important; }
/* Terms text */
[data-theme="light"] .terms-text              { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] .terms-text span         { color: var(--red) !important; }
/* Remember me label & checkbox inline styles */
[data-theme="light"] .auth-screen label[for="rememberMe"] { color: rgba(13,21,87,0.60) !important; }
[data-theme="light"] .auth-screen div[style*="cursor:pointer;color:rgba(255,255,255"] { color: rgba(13,21,87,0.50) !important; }
/* Password eye icon */
[data-theme="light"] #eye-login svg,
[data-theme="light"] #eye-signup svg          { stroke: rgba(13,21,87,0.45) !important; }
/* Captcha container */
[data-theme="light"] #loginCaptcha,
[data-theme="light"] #signupCaptcha {
  background: rgba(13,21,87,0.04) !important;
  border: 1px solid rgba(13,21,87,0.12) !important;
}
[data-theme="light"] #loginCaptchaType,
[data-theme="light"] #signupCaptchaType       { color: rgba(13,21,87,0.35) !important; }
[data-theme="light"] #loginCaptchaPrompt,
[data-theme="light"] #signupCaptchaPrompt     { color: rgba(13,21,87,0.60) !important; }
[data-theme="light"] #loginCaptchaFeedback,
[data-theme="light"] #signupCaptchaFeedback   { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] #loginCaptchaCanvas,
[data-theme="light"] #signupCaptchaCanvas     { border-color: rgba(13,21,87,0.15) !important; background: #f8f9fc !important; }
/* Captcha refresh button */
[data-theme="light"] #loginCaptcha div[style*="rgba(0,0,0,0.55)"],
[data-theme="light"] #signupCaptcha div[style*="rgba(0,0,0,0.55)"] {
  background: rgba(13,21,87,0.10) !important;
}
/* Security verification header inside captcha */
[data-theme="light"] #loginCaptcha div[style*="rgba(255,255,255,0.4)"],
[data-theme="light"] #signupCaptcha div[style*="rgba(255,255,255,0.4)"] {
  color: rgba(13,21,87,0.50) !important;
}
/* Forgot password link */
[data-theme="light"] #screen-login .scrollable span[style*="rgba(255,255,255,0.5)"] {
  color: rgba(13,21,87,0.50) !important;
}

/* ─── 8. BUTTONS ──────────────────────────────────────────────────────── */
[data-theme="light"] .modal-btn {
  background: linear-gradient(135deg, var(--red), #c0001c) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(232,0,29,0.28) !important;
}
[data-theme="light"] .ride-book-btn           { background: linear-gradient(135deg, var(--red), #c0001c) !important; color: #ffffff !important; }

/* ─── 9. PIN KEYPAD ───────────────────────────────────────────────────── */
[data-theme="light"] .pin-key {
  background: #ffffff !important;
  color: #0d1557 !important;
  border: 1.5px solid rgba(13,21,87,0.15) !important;
  box-shadow: 0 2px 8px rgba(13,21,87,0.08) !important;
  font-weight: 700;
}
[data-theme="light"] .pin-key:active,
[data-theme="light"] .pin-key:hover  {
  background: rgba(232,0,29,0.10) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  transform: scale(0.92);
}

/* ─── 10. CARDS: food, market, provider, bill ─────────────────────────── */
[data-theme="light"] .food-card,
[data-theme="light"] .provider-card,
[data-theme="light"] .market-item,
[data-theme="light"] .feature-card,
[data-theme="light"] .bill-item {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.09) !important;
  box-shadow: 0 2px 10px rgba(13,21,87,0.07) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .food-card-name,
[data-theme="light"] .provider-name,
[data-theme="light"] .mi-name,
[data-theme="light"] .feature-title           { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .food-card-meta,
[data-theme="light"] .mi-seller,
[data-theme="light"] .feature-desc            { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .food-card-price,
[data-theme="light"] .mi-price                { color: var(--red) !important; font-weight: 700; }
[data-theme="light"] .bill-icon               { color: #0d1557 !important; }
/* Bills grid */
[data-theme="light"] .bills-grid              { gap: 8px; }
[data-theme="light"] .bill-item               { color: #0d1557 !important; }

/* ─── 11. FILTER CHIPS ────────────────────────────────────────────────── */
[data-theme="light"] .mcat,
[data-theme="light"] .s-cat {
  background: #ffffff !important;
  color: #0d1557 !important;
  border: 1.5px solid rgba(13,21,87,0.13) !important;
  font-weight: 600;
}
[data-theme="light"] .mcat.active,
[data-theme="light"] .s-cat.active            { background: var(--red) !important; color: #ffffff !important; border-color: var(--red) !important; }

/* ─── 12. WALLET SCREEN ───────────────────────────────────────────────── */
[data-theme="light"] .wallet-big-card {
  background: linear-gradient(135deg, #0d1557 0%, #1e0a50 100%) !important;
  box-shadow: 0 8px 32px rgba(13,21,87,0.28) !important;
}
[data-theme="light"] .wallet-big-card *       { color: #ffffff !important; }
/* Force white on the inline-styled balance elements inside wallet-big-card */
[data-theme="light"] #walletBalanceDisplay    { color: #ffffff !important; }
[data-theme="light"] .wbc-btn {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}
[data-theme="light"] .wbc-btn-icon            { color: #ffffff !important; }
[data-theme="light"] .sec-badge {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.80) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
/* Wallet loading text */
[data-theme="light"] #walletTxnList div[style*="rgba(255,255,255,0.35)"] { color: rgba(13,21,87,0.40) !important; }

/* ─── 13. TRANSACTION ROWS ────────────────────────────────────────────── */
[data-theme="light"] .txn-row {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.08) !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 1px 4px rgba(13,21,87,0.06) !important;
}
[data-theme="light"] .txn-info b              { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .txn-info small          { color: rgba(13,21,87,0.50) !important; }
[data-theme="light"] .txn-amt.in              { color: #15803d !important; font-weight: 700; }
[data-theme="light"] .txn-amt.out             { color: #b91c1c !important; font-weight: 700; }
[data-theme="light"] .txn-icon.in             { background: rgba(22,163,74,0.12) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.18) !important; }
[data-theme="light"] .txn-icon.out            { background: rgba(220,38,38,0.09) !important; color: #b91c1c !important; border: 1px solid rgba(220,38,38,0.15) !important; }

/* ─── 14. MODAL / BOTTOM SHEET ───────────────────────────────────────── */
[data-theme="light"] .modal-sheet {
  background: #f4f6fb !important;
  border-top: 1.5px solid rgba(13,21,87,0.09) !important;
}
[data-theme="light"] .modal-title             { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .modal-overlay           { background: rgba(13,21,87,0.45) !important; }

/* ─── 15. SEARCH BAR ──────────────────────────────────────────────────── */
[data-theme="light"] .app-search-bar {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.12) !important;
  box-shadow: 0 2px 8px rgba(13,21,87,0.06) !important;
}
[data-theme="light"] .app-search-bar input    { color: #0d1557 !important; }
[data-theme="light"] .app-search-bar input::placeholder { color: rgba(13,21,87,0.30) !important; }

/* ─── 16. PROFILE ROWS ────────────────────────────────────────────────── */
[data-theme="light"] .profile-row             { background: rgba(13,21,87,0.025) !important; border-bottom: 1px solid rgba(13,21,87,0.07) !important; }
[data-theme="light"] .profile-row b           { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .profile-row small       { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .profile-row .pr-chev    { color: rgba(13,21,87,0.30) !important; }

/* ─── 17. RIDE OPTIONS ────────────────────────────────────────────────── */
[data-theme="light"] .ride-opt {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.09) !important;
  box-shadow: 0 2px 10px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] .ride-opt.selected       { border-color: var(--red) !important; background: rgba(232,0,29,0.04) !important; }
[data-theme="light"] .ride-type-name          { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .ride-type-desc          { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .ride-type-price         { color: var(--red) !important; font-weight: 700; }

/* ─── 18. ORDER / STATUS BADGES ──────────────────────────────────────── */
[data-theme="light"] .order-item {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 5px rgba(13,21,87,0.05) !important;
}
[data-theme="light"] .status-done             { background: rgba(22,163,74,0.12) !important; color: #15803d !important; border: 1px solid rgba(22,163,74,0.22) !important; }
[data-theme="light"] .status-pending          { background: rgba(202,138,4,0.11) !important; color: #854d0e !important; border: 1px solid rgba(202,138,4,0.22) !important; }

/* ─── 19. CHURCH / PARISH ROWS ───────────────────────────────────────── */
[data-theme="light"] .parish-row              { background: rgba(13,21,87,0.025) !important; border-bottom: 1px solid rgba(13,21,87,0.07) !important; }
[data-theme="light"] .parish-row .pr-info b   { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .parish-row .pr-info small { color: rgba(13,21,87,0.52) !important; }

/* ─── 20. ANNOUNCEMENT CARD (ann-card style) ─────────────────────────── */
[data-theme="light"] .ann-card {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.09) !important;
  box-shadow: 0 2px 12px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] .ann-card-title          { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .ann-card-body           { color: rgba(13,21,87,0.62) !important; }

/* ─── 21. STRUCTURAL FIXES — items JS patcher can't reach ────────────── */

/* Sticky/fixed footers and tab bars inside screens */
[data-theme="light"] div[style*="position:sticky"],
[data-theme="light"] div[style*="position: sticky"] {
  background: #f0f2f8 !important;
  border-top: 1px solid rgba(13,21,87,0.09) !important;
}
/* Inline tab bars (sub-navigation) */
[data-theme="light"] div[style*="border-bottom:2px solid transparent"][style*="color:rgba(255,255,255,0.4)"] {
  color: rgba(13,21,87,0.45) !important;
}
[data-theme="light"] div[style*="border-bottom:2px solid var(--red)"][style*="color:white"] {
  color: #0d1557 !important;
}
/* Screen-level dark backgrounds that are NOT scrollable */
[data-theme="light"] div[style*="background:#0a0f2e"],
[data-theme="light"] div[style*="background:#080d3a"],
[data-theme="light"] div[style*="background:#0c1540"] {
  background: #f0f2f8 !important;
}
/* Split-screen login (half dark / half white) */
[data-theme="light"] div[style*="linear-gradient(90deg,#0a0f2e 50%,#eaecf5"] {
  background: #ffffff !important;
}
/* Input fields with dark inline bg */
[data-theme="light"] input[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] input[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] textarea[style*="background:rgba(255,255,255,0.06)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.18) !important;
  color: #0d1557 !important;
}
/* Inline color:white on input elements */
[data-theme="light"] input[style*="color:white"],
[data-theme="light"] textarea[style*="color:white"] { color: #0d1557 !important; }
/* iframe / canvas containers */
[data-theme="light"] div[style*="background:#000;border-radius"] { background: #f0f2f8 !important; }
/* Map overlays */
[data-theme="light"] div[style*="position:relative;flex:1;min-height:0;overflow:hidden;background:#0c1540"] {
  background: #e8eaf2 !important;
}
[data-theme="light"] div[style*="position:relative;height:155px;flex-shrink:0;overflow:hidden;background:#0f1635"] {
  background: #e8eaf2 !important;
}
/* QR scanner overlay */
[data-theme="light"] div[style*="position:absolute;inset:0;background:#0a0f2e"] {
  background: #f0f2f8 !important;
}

/* ─── 22. WELCOME SCREEN ──────────────────────────────────────────────── */
[data-theme="light"] #screen-welcome .app-name    { color: #0d1557 !important; font-weight: 800; }
[data-theme="light"] #screen-welcome .app-subtitle { color: rgba(13,21,87,0.55) !important; }
/* Full-screen inner wrapper — override the dark gradient */
[data-theme="light"] #screen-welcome > div,
[data-theme="light"] #screen-welcome .scrollable > div:first-child {
  background: linear-gradient(160deg,#f4f6fb 0%,#eaecf5 55%,#f0f0fa 100%) !important;
}
/* RC247 wordmark */
[data-theme="light"] #screen-welcome div[style*="color:white"][style*="Clash Display"],
[data-theme="light"] #screen-welcome div[style*="color:white"][style*="38px"],
[data-theme="light"] #screen-welcome div[style*="color:white"][style*="font-size:38"] {
  color: #0d1557 !important;
}
/* Tagline and subtitle */
[data-theme="light"] #screen-welcome div[style*="rgba(255,255,255,0.65)"],
[data-theme="light"] #screen-welcome div[style*="rgba(255,255,255,0.45)"],
[data-theme="light"] #screen-welcome div[style*="rgba(255,255,255,0.25)"] {
  color: rgba(13,21,87,0.55) !important;
}
/* Badge pills (50K+ RESIDENTS, 200+ MERCHANTS) */
[data-theme="light"] #screen-welcome div[style*="rgba(255,255,255,0.07)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
/* Sign In button (glass style → light button) */
[data-theme="light"] #screen-welcome button[style*="rgba(255,255,255,0.08)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.18) !important;
  color: #0d1557 !important;
}
/* Terms text */
[data-theme="light"] #screen-welcome div[style*="rgba(255,255,255,0.25)"] {
  color: rgba(13,21,87,0.35) !important;
}
/* Radial glow overlays — hide on light */
[data-theme="light"] #screen-welcome div[style*="radial-gradient"] {
  opacity: 0 !important;
}


/* ─── 23. SCREEN-LEVEL INNER BACKGROUNDS (CSS fast-path) ─────────────── */
/* These fire before the JS patcher runs, preventing flash-of-dark */

/* Any screen's direct child div that uses the main dark navy gradient */
[data-theme="light"] .app-screen > div[style*="background:linear-gradient(160deg,#080d3a"],
[data-theme="light"] .app-screen > div[style*="background:linear-gradient(135deg,#080d3a"],
[data-theme="light"] .app-screen > div[style*="background:linear-gradient(135deg,#0d1557"],
[data-theme="light"] .app-screen > div[style*="background:linear-gradient(180deg,#0d1557"],
[data-theme="light"] .app-screen > div[style*="background:#0a0f2e"],
[data-theme="light"] .app-screen > div[style*="background:#080d3a"],
[data-theme="light"] .app-screen > div[style*="background:#0c1540"],
[data-theme="light"] .scrollable > div[style*="background:#0a0f2e"],
[data-theme="light"] .scrollable > div[style*="background:#080d3a"] {
  background: #f0f2f8 !important;
}

/* Sticky bottom bars inside screens */
[data-theme="light"] div[style*="position:sticky;bottom:0;background:#0a0f2e"],
[data-theme="light"] div[style*="background:#0a0f2e;border-top"],
[data-theme="light"] div[style*="padding:10px 12px 28px;background:#0a0f2e"],
[data-theme="light"] div[style*="padding:8px 12px 14px;border-top"][style*="background:#0a0f2e"],
[data-theme="light"] div[style*="background:#0a0f2e;padding"] {
  background: #ffffff !important;
  border-top-color: rgba(13,21,87,0.10) !important;
}

/* Sub-navigation tab bars with dark background */
[data-theme="light"] div[style*="display:flex;background:rgba(0,0,0,0.3)"],
[data-theme="light"] div[style*="display:flex;background:rgba(0,0,0,0.3);border-bottom"] {
  background: #ffffff !important;
  border-bottom-color: rgba(13,21,87,0.10) !important;
}
[data-theme="light"] div[style*="display:flex;background:rgba(0,0,0,0.3);overflow-x"] {
  background: #ffffff !important;
}

/* Inline sub-tab text colour */
[data-theme="light"] div[style*="border-bottom:2px solid transparent"][style*="color:rgba(255,255,255,0.4)"] {
  color: rgba(13,21,87,0.45) !important;
}
[data-theme="light"] div[style*="border-bottom:2px solid"][style*="color:white"] {
  color: #0d1557 !important;
}

/* section-level section headers "QUICK SERVICES" etc rendered via inline style */
[data-theme="light"] div[style*="font-weight:700;color:rgba(255,255,255,0.7)"],
[data-theme="light"] div[style*="font-weight:700;color:white;margin-bottom"],
[data-theme="light"] div[style*="margin:10px 0 8px;font-size:11px;font-weight:700;color:rgba(255,255,255,0.7)"],
[data-theme="light"] div[style*="margin:10px 0 8px;font-size:11px;font-weight:700;color:white"] {
  color: #0d1557 !important;
}

/* Button text: colour:rgba(255,255,255,0.4) on inactive tab buttons */
[data-theme="light"] div[style*="color:rgba(255,255,255,0.4);border-bottom:2px solid transparent"] {
  color: rgba(13,21,87,0.42) !important;
}

/* ════════════════════════════════════════════════════════════════════
   WELCOME SCREEN — CLASS-BASED THEMING (v82)
   Replaces hard-coded inline styles so data-theme can control them.
   ════════════════════════════════════════════════════════════════════ */

/* ── Dark (default) ── */
.welcome-bg {
  background: linear-gradient(160deg,#080d3a 0%,#0d1557 55%,#1a0a3a 100%);
}
.welcome-title {
  font-family: 'Clash Display', sans-serif;
  font-size: 38px; font-weight: 700; color: white;
  letter-spacing: -2px; line-height: 1;
}
.welcome-sub {
  font-size: 13px; color: rgba(255,255,255,0.45);
  letter-spacing: 2px; text-transform: uppercase;
  margin-top: 6px; font-weight: 400;
}
.welcome-tagline {
  font-size: 15px; color: rgba(255,255,255,0.65);
  text-align: center; line-height: 1.7;
  max-width: 240px; margin-bottom: 36px;
}
.welcome-badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 4px 12px;
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.5); letter-spacing: 0.5px;
}
.welcome-signin-btn {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: white;
}
.welcome-terms {
  margin-top: 24px; font-size: 9px;
  color: rgba(255,255,255,0.25);
  text-align: center; cursor: default; user-select: none;
}
.welcome-build {
  font-size: 8px; color: rgba(255,255,255,0.3);
  margin-top: -10px; margin-bottom: -10px; letter-spacing: 1px;
}

/* ── Light overrides ── */
[data-theme="light"] .welcome-bg {
  background: linear-gradient(160deg,#f4f6fb 0%,#eaecf5 55%,#f0f0fa 100%) !important;
}
[data-theme="light"] .welcome-title  { color: #0d1557 !important; }
[data-theme="light"] .welcome-sub    { color: rgba(13,21,87,0.50) !important; }
[data-theme="light"] .welcome-tagline { color: rgba(13,21,87,0.62) !important; }
[data-theme="light"] .welcome-badge {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .welcome-signin-btn {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.18) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .welcome-terms  { color: rgba(13,21,87,0.35) !important; }
[data-theme="light"] .welcome-build  { color: rgba(13,21,87,0.25) !important; }
/* Hide decorative radial glow blobs on light */
[data-theme="light"] .welcome-bg > div[style*="radial-gradient"] { opacity: 0 !important; }

/* ════════════════════════════════════════════════════════════
   FOOD MODULE — CLASS-BASED THEMING
   ════════════════════════════════════════════════════════════ */
.fo-menu-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.fo-item-name  { font-size:12px; font-weight:700; color:white; }
.fo-item-desc  { font-size:10px; color:rgba(255,255,255,0.45); }
.fo-item-price { font-size:12px; font-weight:700; color:var(--red); font-family:'Clash Display',sans-serif; }

.fo-qty-btn {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; font-weight:700;
  transition:opacity 0.15s;
}
.fo-qty-minus {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
}
.fo-qty-minus.fo-qty-active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  opacity: 1 !important;
  pointer-events: auto !important;
}
.fo-qty-plus  { background:var(--red); color:white; border:none; font-size:20px; flex-shrink:0; }
.fo-qty-count {
  font-size:14px; font-weight:700; color:white;
  min-width:22px; text-align:center;
}
.fo-qty-zero  { color:rgba(255,255,255,0.3); }
.fo-qty-active.fo-qty-count { color:white; }

/* Light overrides */
[data-theme="light"] .fo-menu-row {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.09) !important;
  box-shadow: 0 1px 6px rgba(13,21,87,0.06) !important;
}
[data-theme="light"] .fo-item-name  { color: #0d1557 !important; }
[data-theme="light"] .fo-item-desc  { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .fo-item-price { color: var(--red) !important; }
[data-theme="light"] .fo-qty-minus {
  background: rgba(13,21,87,0.07) !important;
  border-color: rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .fo-qty-minus.fo-qty-active {
  background: rgba(13,21,87,0.12) !important;
}
[data-theme="light"] .fo-qty-count          { color: #0d1557 !important; }
[data-theme="light"] .fo-qty-zero           { color: rgba(13,21,87,0.28) !important; }
[data-theme="light"] .fo-qty-active.fo-qty-count { color: #0d1557 !important; }

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — COMPREHENSIVE GAP FILL  (v89)
   Covers all classes found in the app that had dark styles but no
   light override. Ordered by screen/module.
   ════════════════════════════════════════════════════════════════════ */

/* ── Announcements (actual class names: ann-c-tag, ann-c-text) ── */
[data-theme="light"] .ann-card {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.09) !important;
  box-shadow: 0 1px 6px rgba(13,21,87,0.06) !important;
}
[data-theme="light"] .ann-c-tag           { color: rgba(13,21,87,0.50) !important; }
[data-theme="light"] .ann-c-tag.urgent    { color: #b45309 !important; }
[data-theme="light"] .ann-c-text          { color: #0d1557 !important; }

/* ── Church screen ── */
[data-theme="light"] .church-banner {
  background: rgba(232,0,29,0.06) !important;
  border-color: rgba(232,0,29,0.18) !important;
}
[data-theme="light"] .church-banner div[style*="color:white"],
[data-theme="light"] .church-banner div[style*="font-weight:700"] { color: #0d1557 !important; }
[data-theme="light"] .church-feature-title { color: #0d1557 !important; }
[data-theme="light"] .church-feature-desc  { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .give-item {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.09) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .give-item:hover      { background: rgba(232,0,29,0.06) !important; }

/* ── Parish / church rows ── */
[data-theme="light"] .parish-row           { background: rgba(13,21,87,0.025) !important; border-bottom: 1px solid rgba(13,21,87,0.07) !important; }
[data-theme="light"] .pr-arrow,
[data-theme="light"] .sr-arrow             { color: rgba(13,21,87,0.30) !important; }
[data-theme="light"] .sr-icon              { background: rgba(13,21,87,0.07) !important; }

/* ── Profile screen ── */
[data-theme="light"] .profile-name         { color: #0d1557 !important; }
[data-theme="light"] .profile-meta         { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] .profile-avatar-lg    { /* gradient stays */ }

/* ── Rides screen ── */
[data-theme="light"] .ride-opt-name        { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .ride-opt-price       { color: rgba(13,21,87,0.52) !important; }
[data-theme="light"] .ride-where-input {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
[data-theme="light"] .ride-where-text      { color: rgba(13,21,87,0.55) !important; }
[data-theme="light"] .ride-status-bar      { background: rgba(13,21,87,0.04) !important; border: 1px solid rgba(13,21,87,0.08) !important; }
[data-theme="light"] .driver-card          { background: #ffffff !important; border-color: rgba(13,21,87,0.09) !important; }
[data-theme="light"] .driver-name          { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .driver-meta          { color: rgba(13,21,87,0.50) !important; }

/* ── Market / merchant screens ── */
[data-theme="light"] .merch-stat           { background: #ffffff !important; border-color: rgba(13,21,87,0.09) !important; }
[data-theme="light"] .merch-stat-num       { color: #0d1557 !important; font-weight: 700; }
[data-theme="light"] .merch-stat-label     { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] .upload-area          { background: rgba(13,21,87,0.04) !important; border-color: rgba(13,21,87,0.18) !important; }
[data-theme="light"] .upload-area-text     { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] .tab {
  border-color: rgba(13,21,87,0.16) !important;
  color: rgba(13,21,87,0.55) !important;
}
[data-theme="light"] .tab.selected,
[data-theme="light"] .tab.active           { background: var(--red) !important; color: #ffffff !important; border-color: var(--red) !important; }

/* ── Provider cards (services) ── */
[data-theme="light"] .provider-img         { background: rgba(13,21,87,0.06) !important; }
[data-theme="light"] .provider-meta        { color: rgba(13,21,87,0.50) !important; }

/* ── Food module ── */
[data-theme="light"] .food-img             { background: rgba(13,21,87,0.06) !important; }
[data-theme="light"] .mi-img               { background: rgba(13,21,87,0.06) !important; }

/* ── Wallet card elements ── */
[data-theme="light"] .card-balance         { color: #ffffff !important; /* stays on dark wallet card */ }
[data-theme="light"] .card-holder-name     { color: #ffffff !important; }
[data-theme="light"] .card-holder-label    { color: rgba(255,255,255,0.6) !important; }
[data-theme="light"] .card-number          { color: rgba(255,255,255,0.9) !important; }
[data-theme="light"] .card-logo-text       { color: #ffffff !important; }

/* ── Modal close button ── */
[data-theme="light"] .modal-close          { color: rgba(13,21,87,0.40) !important; }

/* ── Quick actions ── */
[data-theme="light"] .quick-action {
  background: #ffffff !important;
  border: 1px solid rgba(13,21,87,0.10) !important;
  box-shadow: 0 2px 10px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] .quick-action-label   { color: #0d1557 !important; font-weight: 700; }

/* ── Bottom nav label (bare .abn-label not scoped to nav) ── */
[data-theme="light"] .abn-label            { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] .abn-item.active .abn-label { color: var(--red) !important; }

/* ── Merchant stat/service list items ── */
[data-theme="light"] .cb-btn               { /* red button stays red */ }

/* ── App secondary elements ── */
[data-theme="light"] .app-avatar           { /* gradient stays */ }
[data-theme="light"] .btn-ghost {
  background: rgba(13,21,87,0.07) !important;
  color: #0d1557 !important;
  border-color: rgba(13,21,87,0.18) !important;
}

/* ── Church event title inline styles (via IDs) ── */
[data-theme="light"] #hgcEventTitle        { color: #0d1557 !important; }
[data-theme="light"] #hgcEventDate         { color: rgba(13,21,87,0.55) !important; }
[data-theme="light"] #hgcEventDesc         { color: rgba(13,21,87,0.45) !important; }
[data-theme="light"] #churchProjectsList div[style*="color:rgba(255,255,255,0.3)"] { color: rgba(13,21,87,0.35) !important; }

/* ── Wallet send confirmation overlay ── */
[data-theme="light"] #sendConfirmOverlay .modal-sheet div[style*="color:white"] { color: #0d1557 !important; }

/* ── Loading / empty state messages ── */
[data-theme="light"] .scrollable div[style*="color:rgba(255,255,255,0.3)"][style*="text-align:center"],
[data-theme="light"] .scrollable div[style*="color:rgba(255,255,255,0.4)"][style*="text-align:center"],
[data-theme="light"] .scrollable div[style*="color:rgba(255,255,255,0.5)"][style*="text-align:center"] {
  color: rgba(13,21,87,0.38) !important;
}

/* ═══════════════════════════════════════════════════════════
   THEME SELECTOR CARDS — always show their own colours
   These are exempt from light/dark theme overrides because
   they represent what each theme looks like.
   ═══════════════════════════════════════════════════════════ */

/* Prevent the light-theme patcher from recolouring theme card internals.
   The cards must always show their own representative colours. */
[data-theme="light"] #theme-card-dark   > div { background: #0a0f2e !important; }
[data-theme="light"] #theme-card-system > div > div:first-child { background: #0a0f2e !important; }
/* Dark card footer */
[data-theme="light"] #theme-card-dark   > div:last-child { background: #0a0f2e !important; border-top-color: rgba(255,255,255,0.08) !important; }
[data-theme="light"] #theme-card-dark   > div:last-child div:first-child { color: white !important; }
/* System card dark half elements */
[data-theme="light"] #theme-card-system > div > div:first-child > div { background: rgba(255,255,255,0.07) !important; }

/* ══════════════════════════════════════════════════════
   ONBOARDING SCREEN
   ══════════════════════════════════════════════════════ */
#screen-onboarding {
  background: #ffffff !important;
}
/* Guest mode prompt overlay — always light-themed since it slides up as a sheet */
#rcxGuestPrompt {
  pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════════════
   ADMIN & SUPER-ADMIN PORTAL — OVERFLOW FIX + LIGHT THEME
   ════════════════════════════════════════════════════════════════════ */

/* Contain admin screens inside phone frame */
#screen-admin-dashboard,
#screen-super-admin,
#screen-admin-login,
#screen-admin-totp-setup,
#screen-admin-merchants-queue,
#screen-admin-warehouse-staff,
#screen-admin-categories {
  overflow: hidden !important;
}

#screen-admin-dashboard .scrollable,
#screen-super-admin .scrollable,
#screen-admin-merchants-queue .scrollable,
#screen-admin-warehouse-staff .scrollable,
#screen-admin-categories .scrollable {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: calc(100% - 100px) !important;
}

/* ── Light theme: admin screens ── */
[data-theme="light"] #screen-admin-dashboard,
[data-theme="light"] #screen-admin-merchants-queue,
[data-theme="light"] #screen-admin-warehouse-staff,
[data-theme="light"] #screen-admin-categories {
  background: #f0f2f8 !important;
}

/* Admin top bar */
[data-theme="light"] #screen-admin-dashboard > div[style*="linear-gradient(135deg,#8b0000"],
[data-theme="light"] #screen-admin-dashboard > div[style*="linear-gradient(135deg,#c0001a"] {
  background: linear-gradient(135deg,#0d1557,#1e0a50) !important;
}

/* SA top bar */
[data-theme="light"] #screen-super-admin > div[style*="linear-gradient(135deg,#4c1d95"],
[data-theme="light"] #screen-super-admin > div[style*="linear-gradient(135deg,#7c3aed"] {
  background: linear-gradient(135deg,#0d1557,#1e0a50) !important;
}

/* Admin tab buttons */
[data-theme="light"] #atab-overview,
[data-theme="light"] #atab-merchants,
[data-theme="light"] #atab-txns,
[data-theme="light"] #atab-banks,
[data-theme="light"] #atab-security {
  color: rgba(13,21,87,0.55) !important;
  border-bottom-color: transparent !important;
}
[data-theme="light"] [id^="atab-"][style*="color:white"],
[data-theme="light"] [id^="atab-"][style*="border-bottom:2px solid var(--red)"] {
  color: #0d1557 !important;
}

/* SA tab buttons */
[data-theme="light"] [id^="satab-"] {
  color: rgba(13,21,87,0.55) !important;
}

/* Admin panel backgrounds */
[data-theme="light"] [id^="apanel-"],
[data-theme="light"] [id^="sapanel-"] {
  background: transparent !important;
}

/* Admin overview stat cards */
[data-theme="light"] #screen-admin-dashboard div[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] #screen-admin-dashboard div[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] #screen-admin-dashboard div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] #screen-super-admin div[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] #screen-super-admin div[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] #screen-super-admin div[style*="background:rgba(255,255,255,0.04)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.10) !important;
  box-shadow: 0 1px 6px rgba(13,21,87,0.07) !important;
}

/* Admin text colours */
[data-theme="light"] #screen-admin-dashboard div[style*="color:white"],
[data-theme="light"] #screen-admin-dashboard div[style*="color: white"],
[data-theme="light"] #screen-super-admin div[style*="color:white"],
[data-theme="light"] #screen-super-admin div[style*="color: white"] {
  color: #0d1557 !important;
}
[data-theme="light"] #screen-admin-dashboard div[style*="color:rgba(255,255,255,0.7)"],
[data-theme="light"] #screen-admin-dashboard div[style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] #screen-admin-dashboard div[style*="color:rgba(255,255,255,0.5)"],
[data-theme="light"] #screen-super-admin div[style*="color:rgba(255,255,255,0.7)"],
[data-theme="light"] #screen-super-admin div[style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] #screen-super-admin div[style*="color:rgba(255,255,255,0.5)"] {
  color: rgba(13,21,87,0.58) !important;
}
[data-theme="light"] #screen-admin-dashboard div[style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] #screen-admin-dashboard div[style*="color:rgba(255,255,255,0.3)"],
[data-theme="light"] #screen-super-admin div[style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] #screen-super-admin div[style*="color:rgba(255,255,255,0.3)"] {
  color: rgba(13,21,87,0.40) !important;
}

/* Admin section headers */
[data-theme="light"] #screen-admin-dashboard div[style*="text-transform:uppercase"][style*="color:rgba(255,255,255"],
[data-theme="light"] #screen-super-admin div[style*="text-transform:uppercase"][style*="color:rgba(255,255,255"] {
  color: rgba(13,21,87,0.45) !important;
}

/* Admin merchant/user list rows */
[data-theme="light"] #screen-admin-dashboard .admin-row,
[data-theme="light"] #screen-super-admin .admin-row,
[data-theme="light"] #screen-admin-merchants-queue .admin-row {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.09) !important;
}

/* Admin input fields */
[data-theme="light"] #screen-admin-dashboard input,
[data-theme="light"] #screen-super-admin input,
[data-theme="light"] #screen-admin-dashboard select,
[data-theme="light"] #screen-super-admin select {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.18) !important;
  color: #0d1557 !important;
}

/* SA Portal user list */
[data-theme="light"] #saUserList div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] #saUserList div[style*="background:rgba(255,255,255,0.05)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.09) !important;
}
[data-theme="light"] #saUserList div[style*="color:white"],
[data-theme="light"] #saUserList div[style*="color:rgba(255,255,255"] {
  color: #0d1557 !important;
}

/* Bank change request cards in admin */
[data-theme="light"] #rcxBankChangeList div[style*="background:rgba(255,255,255,0.05)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.09) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT SIGNUP WIZARD + DASHBOARD — theme-aware styling (v110)
   Dark/Classic themes  → wizard stays on dark navy bg with white text
   Light theme          → adapts to light surfaces with dark text
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Default (dark theme) ─────────────────────────────────────────── */
#screen-merchant-signup,
#screen-merchant-dashboard {
  background: #0a0f2e !important;
}
[data-theme="classic"] #screen-merchant-signup,
[data-theme="classic"] #screen-merchant-dashboard {
  background: #0e1b4a !important;
}
#screen-merchant-signup .app-top-bar,
#screen-merchant-dashboard .app-top-bar {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
#screen-merchant-signup .top-bar-title,
#screen-merchant-dashboard .top-bar-title {
  color: white !important;
}
#screen-merchant-signup .back-btn,
#screen-merchant-dashboard .back-btn {
  background: rgba(255,255,255,0.08) !important;
  color: white !important;
}
#screen-merchant-signup .back-btn svg,
#screen-merchant-dashboard .back-btn svg {
  stroke: white !important;
}

/* ─── Light theme — wizard adapts to light surfaces ─────────────────── */
[data-theme="light"] #screen-merchant-signup,
[data-theme="light"] #screen-merchant-dashboard {
  background: #f0f2f8 !important;
  color: #0d1557 !important;
}
[data-theme="light"] #merchantSignupContent,
[data-theme="light"] #merchantDashboardContent {
  background: #f0f2f8 !important;
  color: #0d1557 !important;
}
[data-theme="light"] #screen-merchant-signup .app-top-bar,
[data-theme="light"] #screen-merchant-dashboard .app-top-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(13,21,87,0.10) !important;
  box-shadow: 0 2px 10px rgba(13,21,87,0.07) !important;
}
[data-theme="light"] #screen-merchant-signup .top-bar-title,
[data-theme="light"] #screen-merchant-dashboard .top-bar-title {
  color: #0d1557 !important;
}
[data-theme="light"] #screen-merchant-signup .back-btn,
[data-theme="light"] #screen-merchant-dashboard .back-btn {
  background: rgba(13,21,87,0.08) !important;
  border: 1.5px solid rgba(13,21,87,0.14) !important;
}
[data-theme="light"] #screen-merchant-signup .back-btn svg,
[data-theme="light"] #screen-merchant-dashboard .back-btn svg {
  stroke: #0d1557 !important;
}

/* Headings & body copy inside the wizard — flip white inline to navy */
[data-theme="light"] #merchantSignupContent h2[style*="color:white"],
[data-theme="light"] #merchantSignupContent h2[style*="color: white"],
[data-theme="light"] #merchantDashboardContent h2[style*="color:white"],
[data-theme="light"] #merchantDashboardContent h2[style*="color: white"] {
  color: #0d1557 !important;
}
[data-theme="light"] #merchantSignupContent div[style*="color:white"],
[data-theme="light"] #merchantSignupContent div[style*="color: white"],
[data-theme="light"] #merchantDashboardContent div[style*="color:white"],
[data-theme="light"] #merchantDashboardContent div[style*="color: white"] {
  color: #0d1557 !important;
}

/* Faded helper text — rgba(255,255,255,*) → navy with similar opacity */
[data-theme="light"] #merchantSignupContent div[style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] #merchantSignupContent div[style*="color:rgba(255,255,255,0.5)"],
[data-theme="light"] #merchantSignupContent span[style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] #merchantSignupContent span[style*="color:rgba(255,255,255,0.5)"],
[data-theme="light"] #merchantDashboardContent div[style*="color:rgba(255,255,255,0.6)"],
[data-theme="light"] #merchantDashboardContent div[style*="color:rgba(255,255,255,0.5)"] {
  color: rgba(13,21,87,0.55) !important;
}
[data-theme="light"] #merchantSignupContent div[style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] #merchantSignupContent div[style*="color:rgba(255,255,255,0.3)"],
[data-theme="light"] #merchantDashboardContent div[style*="color:rgba(255,255,255,0.4)"],
[data-theme="light"] #merchantDashboardContent div[style*="color:rgba(255,255,255,0.3)"] {
  color: rgba(13,21,87,0.40) !important;
}

/* Option cards (Products / Services / Both) — flip translucent-white bg to white card */
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] #merchantSignupContent div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] #merchantSignupContent div[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] #merchantSignupContent div[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] #merchantDashboardContent div[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] #merchantDashboardContent div[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] #merchantDashboardContent div[style*="background:rgba(255,255,255,0.06)"] {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.10) !important;
  box-shadow: 0 1px 6px rgba(13,21,87,0.05) !important;
}
/* Buttons inside wizard with white inline text — force navy on light cards */
[data-theme="light"] #merchantSignupContent button[style*="color:white"],
[data-theme="light"] #merchantSignupContent button[style*="color: white"] {
  color: #0d1557 !important;
}
/* But keep the GREEN primary action button text WHITE (linear-gradient green) */
[data-theme="light"] #merchantSignupContent button[style*="linear-gradient(135deg,#4ade80"],
[data-theme="light"] #merchantSignupContent button[style*="linear-gradient(135deg, #4ade80"] {
  color: white !important;
  border-color: transparent !important;
  background: linear-gradient(135deg,#4ade80,#22c55e) !important;
  box-shadow: 0 4px 14px rgba(34,197,94,0.30) !important;
}
/* Disabled "Next →" button (translucent white bg) — show as muted on light */
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(255,255,255,0.1)"],
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(255,255,255,0.08)"] {
  background: rgba(13,21,87,0.08) !important;
  color: rgba(13,21,87,0.40) !important;
}

/* Selected option card (green tint) — keep the green tint, darker text */
[data-theme="light"] #merchantSignupContent button[style*="background:rgba(74,222,128,0.1)"],
[data-theme="light"] #merchantSignupContent div[style*="background:rgba(74,222,128,0.1)"] {
  background: rgba(74,222,128,0.18) !important;
  border-color: #22c55e !important;
  color: #0d1557 !important;
}

/* Inputs / textareas inside wizard */
[data-theme="light"] #merchantSignupContent input[style*="background:rgba(255,255,255"],
[data-theme="light"] #merchantSignupContent textarea[style*="background:rgba(255,255,255"],
[data-theme="light"] #merchantSignupContent select[style*="background:rgba(255,255,255"],
[data-theme="light"] #merchantDashboardContent input[style*="background:rgba(255,255,255"],
[data-theme="light"] #merchantDashboardContent textarea[style*="background:rgba(255,255,255"] {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}
[data-theme="light"] #merchantSignupContent input[style*="color:white"],
[data-theme="light"] #merchantSignupContent textarea[style*="color:white"],
[data-theme="light"] #merchantDashboardContent input[style*="color:white"],
[data-theme="light"] #merchantDashboardContent textarea[style*="color:white"] {
  color: #0d1557 !important;
}
[data-theme="light"] #merchantSignupContent input::placeholder,
[data-theme="light"] #merchantSignupContent textarea::placeholder,
[data-theme="light"] #merchantDashboardContent input::placeholder,
[data-theme="light"] #merchantDashboardContent textarea::placeholder {
  color: rgba(13,21,87,0.40) !important;
}

/* Progress bar track */
[data-theme="light"] #merchantSignupContent div[style*="background:rgba(255,255,255,0.08)"][style*="height:4px"] {
  background: rgba(13,21,87,0.10) !important;
}

/* Labels */
[data-theme="light"] #merchantSignupContent label,
[data-theme="light"] #merchantDashboardContent label {
  color: rgba(13,21,87,0.75) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   APP-WIDE LIGHT-THEME BLEED FIX (v110)
   Generic catch-all for screens whose JS-rendered content uses inline
   white-text and translucent-white backgrounds. These rules apply
   ONLY inside .scrollable containers and only in light theme, so they
   cannot affect dark/classic themes or non-scrollable chrome.
   ═══════════════════════════════════════════════════════════════════════ */

/* White inline text → navy in light theme (inside scrollable areas) */
[data-theme="light"] .scrollable [style*="color:white"]:not(button):not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color: white"]:not(button):not(.app-top-bar *):not(.app-bottom-nav *) {
  color: #0d1557 !important;
}

/* Faded white inline text */
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.6)"]:not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.55)"]:not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.5)"]:not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.45)"]:not(.app-top-bar *):not(.app-bottom-nav *) {
  color: rgba(13,21,87,0.55) !important;
}
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.4)"]:not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.35)"]:not(.app-top-bar *):not(.app-bottom-nav *),
[data-theme="light"] .scrollable [style*="color:rgba(255,255,255,0.3)"]:not(.app-top-bar *):not(.app-bottom-nav *) {
  color: rgba(13,21,87,0.40) !important;
}

/* Translucent-white card backgrounds → white cards with subtle border */
[data-theme="light"] .scrollable div[style*="background:rgba(255,255,255,0.04)"]:not(.app-wallet-card):not(.wallet-big-card),
[data-theme="light"] .scrollable div[style*="background:rgba(255,255,255,0.05)"]:not(.app-wallet-card):not(.wallet-big-card),
[data-theme="light"] .scrollable div[style*="background:rgba(255,255,255,0.06)"]:not(.app-wallet-card):not(.wallet-big-card),
[data-theme="light"] .scrollable div[style*="background:rgba(255,255,255,0.08)"]:not(.app-wallet-card):not(.wallet-big-card) {
  background: #ffffff !important;
  border-color: rgba(13,21,87,0.10) !important;
}

/* Inline-styled inputs/textareas inside scrollables */
[data-theme="light"] .scrollable input[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] .scrollable input[style*="background:rgba(255,255,255,0.05)"],
[data-theme="light"] .scrollable input[style*="background:rgba(255,255,255,0.04)"],
[data-theme="light"] .scrollable textarea[style*="background:rgba(255,255,255,0.06)"],
[data-theme="light"] .scrollable textarea[style*="background:rgba(255,255,255,0.05)"] {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,21,87,0.14) !important;
  color: #0d1557 !important;
}

/* Scrollable placeholder color in light theme */
[data-theme="light"] .scrollable input::placeholder,
[data-theme="light"] .scrollable textarea::placeholder {
  color: rgba(13,21,87,0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HORIZONTAL CONTAINMENT — app-wide safeguard (v112)
   Some screens (notably merchant signup, beauty, services, market detail)
   were rendering content that extended past the phone-frame's right edge
   on certain viewports. Root cause: a flex child inside a flex-column
   `.app-screen` has `min-width: auto` by default, which lets its content
   expand the parent's flex basis. Setting `min-width: 0` on the scrollable
   host plus `max-width: 100%` keeps everything inside the phone frame.
   ═══════════════════════════════════════════════════════════════════════ */

/* Belt-and-braces: phone-screen is the hard right edge — clip anything beyond */
.phone-screen {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Every .app-screen IS the phone-screen's interior; lock to that width */
.app-screen {
  max-width: 100% !important;
  width: 100%;
}

/* Scrollable content hosts: stop being able to push the parent flex wider */
.app-screen .scrollable {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* And every direct child of a scrollable host should respect the host width */
.app-screen .scrollable > * {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Top-bar and bottom-nav must match phone-screen width */
.app-screen > .app-top-bar,
.app-screen > .app-bottom-nav,
.app-screen > .phone-status-bar {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Merchant wizard host — explicit width since it uses style="flex:1" inline */
#merchantSignupContent,
#merchantDashboardContent {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Inputs/selects/textareas inside scrollables: never exceed 100% width */
.app-screen .scrollable input,
.app-screen .scrollable textarea,
.app-screen .scrollable select {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Images inside scrollables: never exceed parent width */
.app-screen .scrollable img {
  max-width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   v119d — Admin/SA panel light-theme visibility fixes
   Inline rgba(white) colors used by JS-rendered admin rows become
   invisible on a light background. These rules force proper contrast
   in light theme without affecting dark theme rendering.
   ═══════════════════════════════════════════════════════════════════════ */

/* Service toggle rows — render readable surfaces in light theme */
[data-theme="light"] .svc-toggle-row {
  background: rgba(13,21,87,0.05) !important;
  border-color: rgba(13,21,87,0.12) !important;
  color: #1a1d3a !important;
}
[data-theme="light"] .svc-toggle-row-indented {
  background: rgba(13,21,87,0.03) !important;
}
[data-theme="light"] .svc-toggle-name,
[data-theme="light"] .svc-toggle-status {
  color: #1a1d3a !important;
}

/* Admin cards in SA panel — readable in light theme */
[data-theme="light"] .admin-card {
  background: rgba(13,21,87,0.05) !important;
  border-color: rgba(13,21,87,0.12) !important;
  color: #1a1d3a !important;
}
[data-theme="light"] .admin-card-name,
[data-theme="light"] .admin-card-meta,
[data-theme="light"] .admin-card-priv-label {
  color: #1a1d3a !important;
}
[data-theme="light"] .admin-priv-chip-off {
  background: rgba(13,21,87,0.06) !important;
  color: #4a5278 !important;
  opacity: 0.8 !important;
  border-color: rgba(13,21,87,0.18) !important;
}
[data-theme="light"] .admin-priv-chip-on {
  background: rgba(124,58,237,0.15) !important;
  color: #6d28d9 !important;
  border-color: rgba(124,58,237,0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v119g — Admin form modal (Create/Edit Admin)
   Theme-safe: dark text in light theme, light text in dark theme.
   Single column layout, generous vertical spacing so labels never crowd.
   ═══════════════════════════════════════════════════════════════════════ */
.rcx-admin-form-modal {
  /* Positioning + scroll set inline by JS */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.rcx-admin-form-card {
  background: linear-gradient(180deg, #0d1557, #080d3a);
  border: 1px solid rgba(124,58,237,0.5);
  border-radius: 16px;
  padding: 18px 16px;
  width: 100%;
  max-width: 340px;
  color: white;
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  margin: 0 auto;
}
.rcx-admin-form-header {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 18px;
  color: white;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rcx-form-field {
  margin-bottom: 14px;
}
.rcx-form-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.rcx-form-input {
  display: block;
  width: 100%;
  padding: 9px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: white !important;        /* override any light-theme override */
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.rcx-form-input:focus {
  border-color: rgba(124,58,237,0.7);
  background: rgba(255,255,255,0.14);
}
.rcx-form-input.is-readonly {
  opacity: 0.6;
  cursor: not-allowed;
}
.rcx-form-input::placeholder { color: rgba(255,255,255,0.4); }

/* Select dropdown options inherit the OS theme; force readable colors. */
.rcx-form-input option {
  background: #0d1557;
  color: white;
}

.rcx-preset-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(124,58,237,0.25);
  border: 1px solid rgba(124,58,237,0.5);
  color: #c4b5fd;
  cursor: pointer;
  font-family: inherit;
}
.rcx-priv-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 2px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}
.rcx-priv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  color: white;
}
.rcx-priv-row:hover {
  background: rgba(255,255,255,0.08);
}
.rcx-priv-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  accent-color: #7c3aed;
}
.rcx-priv-row input[type="checkbox"]:checked + .rcx-priv-label {
  color: #c4b5fd;
  font-weight: 600;
}
.rcx-priv-label {
  flex: 1;
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
}
.rcx-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.rcx-form-btn {
  flex: 1;
  padding: 11px 8px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  border: 0;
}
.rcx-form-btn-cancel {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
}
.rcx-form-btn-cancel:hover {
  background: rgba(255,255,255,0.14);
}
.rcx-form-btn-save {
  background: linear-gradient(135deg, #E8001D, #a8001d);
  color: white;
  box-shadow: 0 4px 12px rgba(232,0,29,0.3);
}
.rcx-form-btn-save:hover {
  filter: brightness(1.1);
}

/* Light theme: the modal card itself stays dark (it's a deliberate dark
   overlay with its own purple gradient), so we only need to make sure
   the body's light theme doesn't bleed in. The !important on color
   above handles that. */
[data-theme="light"] .rcx-admin-form-card {
  /* Card stays dark — that's the visual style. No overrides needed. */
}