/* =============================================================================
   Horizon Securities — Mobile App CSS
   Self-contained. Bridges to global --hz-* tokens injected by Blade partial.
   ============================================================================= */

/* ─── Custom Properties ──────────────────────────────────────────────────── */
:root {
  /* ── HORIZON mobile — Version 2 (docs/mobile-design-v2) ────────────────
     Literal values on purpose: these must NOT bridge to the desktop --hz-*
     theme, or a site-theme change would restyle the mobile app and vice
     versa. The desktop/front pages are unaffected by this file.
     The admin palette block in layouts/mobile-app.blade.php still overrides
     --m-gold / --m-success / --m-input / --m-card after this file loads. */

  --m-navy-900:      #0b2c6f;  /* body, header, curve dome            */
  --m-card:          #123883;  /* card surface                        */
  --m-surface-2:     #1a4592;  /* icon circles, header btns, nav bar  */
  --m-border:        #24509f;  /* hairline / row divider              */
  --m-border-strong: #2f5cab;  /* stronger outline                    */

  --m-bg:       var(--m-navy-900);
  --m-text:     #ffffff;
  --m-sub:      #a9c0ec;       /* secondary text                      */
  --m-soft:     #d3e0ff;       /* descriptions on cards               */

  --m-gold:     #c9a35e;       /* buttons, curve band, active states  */
  --m-gold-200: #ecd29a;       /* gold text/icons on blue             */
  --m-ink:      #050b1a;       /* text/icons sitting on gold          */
  --m-up:       #9fc1ff;       /* up-change text                      */

  /* kept for real errors/alerts only — not used for price direction */
  --m-danger:  #f87171;
  --m-success: #4ade80;
  --m-input:   var(--m-surface-2);
  --m-brand:   var(--m-navy-900);

  --m-header-h:  60px;
  --m-nav-h:     74px;
  --m-safe-top:  env(safe-area-inset-top, 0px);
  --m-safe-bot:  env(safe-area-inset-bottom, 0px);

  --m-r:      16px;
  --m-r-sm:   10px;
  --m-r-lg:   24px;
  --m-r-card: 22px;
  --m-r-pill: 999px;

  --m-shadow:    0 1px 3px rgba(5,11,26,.28), 0 4px 12px rgba(5,11,26,.18);
  --m-shadow-lg: 0 8px 32px rgba(5,11,26,.38);

  --m-transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Cairo", "Tajawal", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--m-bg);
  color: var(--m-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* ─── Safe-area helpers ──────────────────────────────────────────────────── */
.safe-top    { padding-top: env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.mbl-header {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 1000;
  height: calc(var(--m-header-h) + var(--m-safe-top));
  padding-top: var(--m-safe-top);
  background: var(--m-card);
  border-bottom: 1px solid var(--m-border);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: var(--m-shadow);
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

.mbl-header > * {
  /* inner row occupies exactly --m-header-h */
  height: var(--m-header-h);
}

/* single inner flex row */
.mbl-header {
  flex-direction: row;
  align-items: center;
  padding-inline: 16px;
  gap: 12px;
}

.mbl-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--m-r-sm);
  color: var(--m-text);
  font-size: 18px;
  transition: background var(--m-transition), transform var(--m-transition);
  position: relative;
  flex-shrink: 0;
}

.mbl-header-btn:active { transform: scale(.93); }

@media (hover: hover) {
  .mbl-header-btn:hover { background: var(--m-input); }
}

.mbl-header-logo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.mbl-header-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.mbl-header-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--m-brand);
  letter-spacing: .06em;
  white-space: nowrap;
}

.mbl-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mbl-lang-btn {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  width: auto !important;
  padding: 0 10px;
  color: var(--m-brand) !important;
}

/* ─── Notification badge ─────────────────────────────────────────────────── */
.mbl-badge {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--m-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--m-card);
  line-height: 1;
}

/* ─── Content area ───────────────────────────────────────────────────────── */
.mbl-content {
  padding-top: calc(var(--m-header-h) + var(--m-safe-top) + 8px);
  padding-bottom: calc(var(--m-nav-h) + var(--m-safe-bot) + 16px);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Alert bar ──────────────────────────────────────────────────────────── */
.mbl-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 16px;
  padding: 12px 14px;
  border-radius: var(--m-r);
  font-size: 13px;
  line-height: 1.5;
}

.mbl-alert--warning {
  background: #fef3c7;
  border: 1px solid rgba(251,191,36,.35);
  color: #92400e;
}

.mbl-alert i { font-size: 16px; margin-top: 1px; flex-shrink: 0; }

/* ─── Bottom navigation ──────────────────────────────────────────────────── */
.mbl-nav {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 900;
  height: calc(var(--m-nav-h) + var(--m-safe-bot));
  padding-bottom: var(--m-safe-bot);
  background: var(--m-card);
  border-top: 1px solid var(--m-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.07);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

.mbl-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--m-sub);
  font-size: 10px;
  font-weight: 600;
  padding: 8px 4px;
  transition: color var(--m-transition);
  position: relative;
  text-align: center;
}

.mbl-nav-item i {
  font-size: 20px;
  transition: transform var(--m-transition);
  display: block;
}

.mbl-nav-item span {
  display: block;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active pill */
.mbl-nav-item.active {
  color: var(--m-brand);
}

.mbl-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 40px;
  height: 3px;
  background: var(--m-brand);
  border-radius: 0 0 4px 4px;
}

[dir="rtl"] .mbl-nav-item.active::before {
  inset-inline-start: auto;
  inset-inline-end: 50%;
  translate: 50% 0;
}

.mbl-nav-item.active i { transform: scale(1.15); }

@media (hover: hover) {
  .mbl-nav-item:hover { color: var(--m-brand); }
}

/* ─── Drawer overlay ─────────────────────────────────────────────────────── */
.mbl-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--m-transition);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mbl-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Side drawer ────────────────────────────────────────────────────────── */
.mbl-drawer {
  position: fixed;
  top: 0;
  inset-inline-start: -280px;
  width: 280px;
  height: 100%;
  height: 100dvh;
  z-index: 1100;
  background: var(--m-card);
  box-shadow: var(--m-shadow-lg);
  transition: inset-inline-start var(--m-transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mbl-drawer.open {
  inset-inline-start: 0;
}

/* RTL: slide from right */
[dir="rtl"] .mbl-drawer {
  inset-inline-start: auto;
  inset-inline-end: auto;
  right: -280px;
  left: auto;
  transition: right var(--m-transition);
}

[dir="rtl"] .mbl-drawer.open {
  right: 0;
}

.mbl-drawer-header {
  background: linear-gradient(135deg, var(--m-brand) 0%, color-mix(in srgb, var(--m-brand) 60%, #aad52c 40%) 100%);
  padding: calc(var(--m-safe-top) + 16px) 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.mbl-drawer-close {
  align-self: flex-start;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--m-transition), transform var(--m-transition);
}

.mbl-drawer-close:active { transform: scale(.9); }

.mbl-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mbl-drawer-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.mbl-drawer-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
}

.mbl-drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.mbl-menu-account{display:flex;align-items:center;gap:11px;padding:13px;margin-bottom:12px;border:1px solid #e7edf5;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#fff)}
.mbl-menu-avatar{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--m-primary),#2d80dc);font-weight:800}
.mbl-menu-account-copy{min-width:0;flex:1}
.mbl-menu-account-copy strong,.mbl-menu-account-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbl-menu-account-copy strong{color:#142b44;font-size:.88rem}
.mbl-menu-account-copy span{margin-top:2px;color:#75869a;font-size:.7rem;direction:ltr;text-align:start}
.mbl-menu-account-link{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--m-primary);background:#eaf3fc}
.mbl-menu-kyc{display:flex;align-items:center;gap:10px;padding:12px;margin-bottom:17px;border-radius:15px;text-decoration:none}
.mbl-menu-kyc.is-pending{color:#684f05;border:1px solid #f0da8b;background:linear-gradient(135deg,#fff9df,#fffdf5)}
.mbl-menu-kyc.is-complete{color:#12653b;border:1px solid #bfe7d1;background:#f0fbf5}
.mbl-menu-kyc-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:11px;background:rgba(255,255,255,.75)}
.mbl-menu-kyc>span:nth-child(2){min-width:0;flex:1}
.mbl-menu-kyc strong,.mbl-menu-kyc small{display:block;line-height:1.45}
.mbl-menu-kyc strong{font-size:.78rem}.mbl-menu-kyc small{margin-top:2px;opacity:.78;font-size:.65rem}
.mbl-menu-section-title{margin:17px 4px 9px;color:#8291a3;font-size:.68rem;font-weight:800}
.mbl-menu-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mbl-menu-quick-grid a{display:flex;min-width:0;min-height:67px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px 4px;border:1px solid #e9eef5;border-radius:13px;color:#344d68;background:#fff;box-shadow:0 4px 15px rgba(20,43,68,.045);font-size:.66rem;font-weight:700;text-align:center;text-decoration:none}
.mbl-menu-quick-grid a i{color:var(--m-primary);font-size:1rem}
.mbl-menu-links{display:grid;gap:4px}
.mbl-menu-links .menu-item{display:flex;width:100%;min-height:46px;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:0;border-radius:12px;color:#304861;background:transparent;font:inherit;font-size:.78rem;font-weight:700;text-align:start;text-decoration:none;cursor:pointer}
.mbl-menu-links .menu-item:hover,.mbl-menu-links .menu-item:focus-visible{color:var(--m-primary);background:#f1f7fd}
.menu-item-main{display:flex;min-width:0;align-items:center;gap:11px}.menu-item-main>i{width:21px;color:#5e85ad;text-align:center}
.menu-chevron{color:#9aa8b7;font-size:.64rem;transition:transform .2s ease}.menu-parent[aria-expanded=true] .menu-chevron{transform:rotate(180deg)}
.mbl-menu-links .menu-submenu{display:none;margin:1px 15px 5px 0;padding-right:8px;border-right:2px solid #e2edf8}
.mbl-menu-links .menu-submenu.open{display:block}
[dir=ltr] .mbl-menu-links .menu-submenu{margin-right:0;margin-left:15px;padding-right:0;padding-left:8px;border-right:0;border-left:2px solid #e2edf8}
.mbl-menu-links .menu-submenu .menu-item{min-height:40px;font-size:.72rem;font-weight:600}
.mbl-menu-logout-form{margin-top:16px;padding-top:13px;border-top:1px solid #edf1f5}
.mbl-menu-logout{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;gap:9px;border:1px solid #f2d1d5;border-radius:12px;color:#b1303c;background:#fff7f8;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}

/* ─── Notification panel (slide-down) ───────────────────────────────────── */
.mbl-notif-panel {
  position: fixed;
  top: calc(var(--m-header-h) + var(--m-safe-top));
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 950;
  max-height: 70vh;
  background: var(--m-card);
  border-bottom: 1px solid var(--m-border);
  box-shadow: var(--m-shadow-lg);
  border-radius: 0 0 var(--m-r-lg) var(--m-r-lg);
  display: flex;
  flex-direction: column;
  transform: translateY(-110%);
  transition: transform var(--m-transition);
  overflow: hidden;
}

.mbl-notif-panel.open {
  transform: translateY(0);
}

.mbl-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--m-border);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.mbl-notif-header button {
  color: var(--m-sub);
  font-size: 17px;
  padding: 4px 8px;
}

.mbl-notif-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mbl-notif-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--m-sub);
  font-size: 28px;
}

.mbl-notif-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--m-sub);
  font-size: 13px;
  line-height: 2;
}

.mbl-notif-item {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--m-border);
  transition: background var(--m-transition);
}

.mbl-notif-item:active { background: var(--m-input); }

.mbl-notif-item.unread {
  background: color-mix(in srgb, var(--m-brand) 8%, transparent);
  border-inline-start: 3px solid var(--m-brand);
}

.mbl-notif-item__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--m-text);
  margin-bottom: 4px;
  line-height: 1.5;
}

.mbl-notif-item__time {
  font-size: 11px;
  color: var(--m-sub);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.mbl-card {
  background: var(--m-card);
  border-radius: var(--m-r);
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}

/* ─── Section heading ────────────────────────────────────────────────────── */
.mbl-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-sub);
}

/* ─── Section wrapper ────────────────────────────────────────────────────── */
.mbl-section {
  margin-bottom: 16px;
  padding: 20px 16px;
  background: var(--m-card);
}

.mbl-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.mbl-section-head h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--m-text);
}

.mbl-view-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-brand);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--m-transition);
}

.mbl-view-all:active { opacity: .7; }

[dir="rtl"] .mbl-view-all i { transform: scaleX(-1); }

/* ─── Hero greeting ──────────────────────────────────────────────────────── */
.mbl-hero {
  margin: 12px 16px 0;
  border-radius: var(--m-r-lg);
  background: linear-gradient(135deg, var(--m-brand) 0%, color-mix(in srgb, var(--m-brand) 55%, #1e293b 45%) 100%);
  padding: 22px 20px 20px;
  color: #fff;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--m-brand) 40%, transparent);
  position: relative;
  overflow: hidden;
}

.mbl-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  inset-inline-end: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.mbl-hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  inset-inline-start: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}

.mbl-greeting {
  position: relative;
  z-index: 1;
}

.mbl-greeting__sub {
  font-size: 13px;
  font-weight: 500;
  opacity: .85;
  margin-bottom: 4px;
}

.mbl-greeting__name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 2px;
  line-height: 1.25;
}

.mbl-greeting__date {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 16px;
}

.mbl-hero__index {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.mbl-hero__index-val {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.mbl-hero__index-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 4px;
}

.mbl-hero__index-name {
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
}

.mbl-hero__index-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mbl-hero__index-change.up   { background: rgba(34,197,94,.25); }
.mbl-hero__index-change.down { background: rgba(239,68,68,.25); }

.mbl-hero__asof {
  position: relative;
  z-index: 1;
  font-size: 10px;
  opacity: .65;
  margin-top: 10px;
}

/* ─── Market strip ───────────────────────────────────────────────────────── */
.mbl-market-strip {
  padding: 16px 0 4px;
  background: var(--m-card);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--m-border);
}

.mbl-market-strip__label {
  padding: 0 16px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--m-sub);
}

.mbl-market-strip__scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 16px 14px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mbl-market-strip__scroll::-webkit-scrollbar { display: none; }

/* ─── Market card ────────────────────────────────────────────────────────── */
.mbl-market-card {
  min-width: 160px;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(135deg, var(--m-brand) 0%, color-mix(in srgb, var(--m-brand) 55%, #1a3a2a 45%) 100%);
  color: #fff;
  box-shadow: var(--m-shadow);
  position: relative;
  overflow: hidden;
  transition: transform var(--m-transition), box-shadow var(--m-transition);
}

.mbl-market-card::before {
  content: '';
  position: absolute;
  top: -30%;
  inset-inline-end: -20%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  pointer-events: none;
}

.mbl-market-card:active { transform: scale(.97); }

.mbl-market-card__name {
  font-size: 13px;
  font-weight: 600;
  opacity: .9;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mbl-market-card__value {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 10px;
}

.mbl-market-card__change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
}

.mbl-market-card__change.up   { background: rgba(34,197,94,.3); }
.mbl-market-card__change.down { background: rgba(239,68,68,.3); }

/* ─── Quick actions ──────────────────────────────────────────────────────── */
.mbl-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mbl-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: var(--m-r);
  background: var(--m-input);
  border: 1.5px solid transparent;
  color: var(--m-text);
  cursor: pointer;
  transition: transform var(--m-transition), border-color var(--m-transition),
              box-shadow var(--m-transition), background var(--m-transition);
  min-height: 72px;
  text-align: center;
}

.mbl-action:active { transform: scale(.97); }

@media (hover: hover) {
  .mbl-action:hover {
    border-color: var(--m-brand);
    background: var(--m-card);
    box-shadow: var(--m-shadow);
  }
}

.mbl-action__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--m-r-sm);
  background: linear-gradient(135deg, var(--m-brand) 0%, color-mix(in srgb, var(--m-brand) 60%, #aad52c 40%) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--m-brand) 35%, transparent);
}

.mbl-action__label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--m-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ─── Stock row ──────────────────────────────────────────────────────────── */
.mbl-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--m-r);
  background: var(--m-input);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--m-transition), border-color var(--m-transition),
              background var(--m-transition), box-shadow var(--m-transition);
  gap: 10px;
}

.mbl-stock-row:active { transform: scale(.98); }

@media (hover: hover) {
  .mbl-stock-row:hover {
    border-color: var(--m-brand);
    background: var(--m-card);
    box-shadow: var(--m-shadow);
  }
}

.mbl-stock-row__left {
  min-width: 0;
}

.mbl-stock-row__sym {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-text);
  white-space: nowrap;
  margin-bottom: 2px;
}

.mbl-stock-row__name {
  font-size: 12px;
  color: var(--m-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.mbl-stock-row__right {
  text-align: end;
  flex-shrink: 0;
}

.mbl-stock-row__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-text);
  margin-bottom: 4px;
  white-space: nowrap;
}

.mbl-stock-row__change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mbl-stock-row__change.up {
  background: rgba(34,197,94,.12);
  color: var(--m-success);
}

.mbl-stock-row__change.down {
  background: rgba(239,68,68,.12);
  color: var(--m-danger);
}

/* ─── Up / Down color utilities ──────────────────────────────────────────── */
.mbl-up   { color: #22c55e; }
.mbl-down { color: #ef4444; }

/* ─── News item ──────────────────────────────────────────────────────────── */
.mbl-news-item {
  background: var(--m-card);
  border-radius: var(--m-r);
  border: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  padding: 14px 14px 14px 18px;
  border-inline-start: 4px solid var(--m-brand);
  cursor: pointer;
  transition: transform var(--m-transition), box-shadow var(--m-transition),
              border-color var(--m-transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbl-news-item:active { transform: scale(.98); }

@media (hover: hover) {
  .mbl-news-item:hover {
    box-shadow: var(--m-shadow-lg);
    transform: translateY(-1px);
  }
}

.mbl-news-item__badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  align-self: flex-start;
  white-space: nowrap;
  letter-spacing: .03em;
}

.mbl-news-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mbl-news-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--m-sub);
}

.mbl-news-item__meta i { font-size: 10px; }

/* ─── Ticker strip ───────────────────────────────────────────────────────── */
.mbl-ticker {
  background: #0f172a;
  color: #fff;
  padding: 9px 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.mbl-ticker__inner {
  display: inline-flex;
  gap: 0;
  will-change: transform;
}

.mbl-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mbl-ticker__sym  { color: #fff; font-weight: 800; }
.mbl-ticker__price { color: rgba(255,255,255,.9); }
.mbl-ticker__sep  { color: var(--m-brand); font-size: 8px; }

.mbl-ticker__change.up   { color: #22c55e; }
.mbl-ticker__change.down { color: #ef4444; }

@keyframes mbl-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes mbl-ticker-scroll-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.mbl-ticker .mbl-ticker__inner {
  animation: mbl-ticker-scroll 30s linear infinite;
}

[dir="rtl"] .mbl-ticker .mbl-ticker__inner {
  animation-name: mbl-ticker-scroll-rtl;
}

/* ─── Skeleton shimmer ───────────────────────────────────────────────────── */
.mbl-skeleton {
  background: linear-gradient(
    90deg,
    var(--m-input) 25%,
    color-mix(in srgb, var(--m-input) 60%, var(--m-card) 40%) 50%,
    var(--m-input) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--m-r-sm);
  animation: mbl-shimmer 1.5s ease-in-out infinite;
}

@keyframes mbl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Pull-to-refresh indicator ──────────────────────────────────────────── */
.mbl-ptr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  color: var(--m-sub);
  font-size: 13px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--m-transition), opacity var(--m-transition);
}

.mbl-ptr.visible {
  max-height: 60px;
  opacity: 1;
}

.mbl-ptr i { font-size: 20px; animation: mbl-spin .8s linear infinite; }

@keyframes mbl-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Floating action buttons (FABs) ─────────────────────────────────────── */
.mbl-fab {
  position: fixed !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--m-brand) 0%, color-mix(in srgb, var(--m-brand) 60%, #aad52c 40%) 100%);
  border: none;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--m-brand) 45%, transparent);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 22px;
  cursor: pointer;
  z-index: 10001 !important;
  transition: transform var(--m-transition), box-shadow var(--m-transition);
  text-decoration: none;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mbl-fab i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.mbl-fab:active { transform: scale(.93) !important; }

@media (hover: hover) and (pointer: fine) {
  .mbl-fab:hover { transform: translateY(-2px) !important; }
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.mbl-toast {
  position: fixed;
  bottom: calc(var(--m-nav-h) + var(--m-safe-bot) + 16px);
  inset-inline-start: 50%;
  translate: -50% 0;
  background: rgba(15,23,42,.92);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--m-r);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  max-width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--m-transition), transform var(--m-transition);
  pointer-events: none;
}

.mbl-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Stocks section ─────────────────────────────────────────────────────── */
.mbl-stocks-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── News section ───────────────────────────────────────────────────────── */
.mbl-news-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Search bar ─────────────────────────────────────────────────────────── */
.mbl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--m-input);
  border-radius: var(--m-r);
  padding: 12px 16px;
  margin: 12px 16px;
  border: 1.5px solid transparent;
  transition: border-color var(--m-transition), box-shadow var(--m-transition);
}

.mbl-search:focus-within {
  border-color: var(--m-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-brand) 15%, transparent);
}

.mbl-search i { font-size: 16px; color: var(--m-sub); flex-shrink: 0; }

.mbl-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--m-text);
  outline: none;
}

.mbl-search input::placeholder { color: var(--m-sub); }

/* ─── RTL overrides ──────────────────────────────────────────────────────── */
[dir="rtl"] .mbl-stock-row__name { max-width: 160px; }

/* Chevron arrows in RTL */
[dir="rtl"] .fa-arrow-right::before { content: "\f060"; }
[dir="rtl"] .fa-arrow-left::before  { content: "\f061"; }

/* ─── Prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .mbl-ticker .mbl-ticker__inner {
    animation: none !important;
  }

  .mbl-skeleton {
    animation: none !important;
    background: var(--m-input);
  }
}

/* ─── Very small screens ─────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .mbl-actions-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .mbl-action { padding: 10px 4px; gap: 6px; min-height: 64px; }
  .mbl-action__icon { width: 34px; height: 34px; font-size: 14px; }
  .mbl-action__label { font-size: 9px; }

  .mbl-market-card { min-width: 140px; }
  .mbl-market-card__value { font-size: 20px; }

  .mbl-hero__index-val { font-size: 28px; }
  .mbl-greeting__name  { font-size: 19px; }

  .mbl-drawer { width: 260px; }
  [dir="rtl"] .mbl-drawer { right: -260px; }
  [dir="rtl"] .mbl-drawer.open { right: 0; }
}

/* =============================================================================
   HORIZON mobile - Version 2 components
   Source of truth: docs/mobile-design-v2/*.html
   ============================================================================= */

body { background: var(--m-bg); color: var(--m-text); }

/* --- Signature top section: blue head -> gold band -> dome back to blue --- */
.mbl-v2-band { background: var(--m-gold); display: flex; flex-direction: column; }
.mbl-v2-band--plain { background: var(--m-bg); }

.mbl-v2-head {
  background: var(--m-bg);
  border-radius: 0 0 50% 50% / 0 0 44px 44px;
  padding: calc(20px + var(--m-safe-top)) 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mbl-v2-band--plain .mbl-v2-head { padding-bottom: 44px; }

.mbl-v2-dome {
  height: 36px;
  background: var(--m-bg);
  border-radius: 50% 50% 0 0 / 36px 36px 0 0;
}

.mbl-v2-straddle { display: flex; justify-content: center; margin-top: -32px; }
.mbl-v2-straddle__ring {
  padding: 5px;
  border-radius: var(--m-r-pill);
  background: var(--m-gold);
  border: 2px solid var(--m-bg);
  display: flex;
  gap: 2px;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
}
.mbl-v2-straddle__ring::-webkit-scrollbar { display: none; }

.mbl-v2-pill {
  min-height: 50px;
  padding: 0 20px;
  border-radius: var(--m-r-pill);
  border: 1.5px solid var(--m-gold);
  background: var(--m-bg);
  color: var(--m-text);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.mbl-v2-tab {
  height: 42px;
  padding: 0 12px;
  border-radius: var(--m-r-pill);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--m-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.mbl-v2-tab.active { border-color: var(--m-gold); background: var(--m-bg); color: var(--m-text); }

.mbl-v2-asof { text-align: center; font-size: 12px; color: var(--m-ink); font-weight: 600; margin-top: 6px; }

/* --- Header row ----------------------------------------------------------- */
.mbl-v2-hrow { display: flex; align-items: center; gap: 8px; }

.mbl-v2-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--m-border-strong);
  background: var(--m-surface-2);
  color: var(--m-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  position: relative;
  cursor: pointer;
  transition: background var(--m-transition), transform var(--m-transition);
}
.mbl-v2-btn:active { transform: scale(.93); }
@media (hover: hover) { .mbl-v2-btn:hover { background: #24509f; } }

.mbl-v2-btn--lang { border-color: var(--m-gold); color: var(--m-gold-200); font-size: 13px; font-weight: 700; }

.mbl-v2-logo { flex-grow: 1; display: flex; justify-content: center; min-width: 0; }
.mbl-v2-logo img { height: 48px; width: auto; object-fit: contain; }

.mbl-v2-dot {
  position: absolute;
  top: 9px;
  inset-inline-end: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--m-gold);
}

/* --- Page title inside the head ------------------------------------------- */
.mbl-v2-titles { display: flex; flex-direction: column; gap: 2px; }
.mbl-v2-title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.3; color: var(--m-text); }
.mbl-v2-sub { margin: 0; font-size: 13px; color: var(--m-sub); }
.mbl-v2-sub .hl { color: var(--m-gold-200); font-weight: 600; }

/* --- Change chips: gold = up, white = down -------------------------------- */
.mbl-v2-chip {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--m-r-pill);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  direction: ltr;
}
.mbl-v2-chip--up { background: var(--m-gold); color: var(--m-ink); }
.mbl-v2-chip--down { background: #ffffff; color: var(--m-navy-900); }

/* --- Page body on blue ---------------------------------------------------- */
.mbl-v2-body { padding: 0 20px; display: flex; flex-direction: column; gap: 22px; margin-top: -8px; }
.mbl-v2-section { display: flex; flex-direction: column; gap: 10px; }
.mbl-v2-shead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mbl-v2-shead h2, .mbl-v2-slabel { margin: 0; font-size: 15px; font-weight: 800; color: var(--m-text); }
.mbl-v2-more { font-size: 13px; font-weight: 700; color: var(--m-gold-200); }
.mbl-v2-band .mbl-v2-slabel { color: var(--m-ink); }

.mbl-v2-card { background: var(--m-card); border-radius: var(--m-r-card); padding: 14px; color: var(--m-text); }

/* --- Index cards strip ---------------------------------------------------- */
.mbl-v2-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.mbl-v2-strip::-webkit-scrollbar { display: none; }

.mbl-v2-idx {
  flex-shrink: 0;
  width: 132px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--m-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}
.mbl-v2-idx__name { font-size: 12px; color: var(--m-sub); font-weight: 600; }
.mbl-v2-idx__val { font-size: 17px; font-weight: 800; direction: ltr; text-align: start; }
.mbl-v2-idx__chg { font-size: 12px; font-weight: 700; direction: ltr; text-align: start; }
.mbl-v2-idx__chg.is-up { color: var(--m-up); }
.mbl-v2-idx__chg.is-down { color: #ffffff; }

/* --- E-Trade call to action ----------------------------------------------- */
.mbl-v2-etrade {
  /* Navy fill: the button sits on the gold band, so a gold fill read as an
     outline only. Blue + a gold hairline gives it the contrast it needs. */
  min-height: 66px;
  padding: 0 24px;
  border-radius: var(--m-r-pill);
  background: var(--m-bg);
  border: 1.5px solid var(--m-gold);
  color: var(--m-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 6px 18px rgba(5, 11, 26, .28);
}
.mbl-v2-etrade__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--m-ink);
  color: var(--m-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
}
.mbl-v2-etrade__t { display: flex; flex-direction: column; line-height: 1.25; }
.mbl-v2-etrade__t b { font-size: 19px; font-weight: 800; color: var(--m-text); }
.mbl-v2-etrade__t span { font-size: 13px; font-weight: 700; color: var(--m-gold-200); }
.mbl-v2-etrade__arrow { font-size: 18px; color: var(--m-gold-200); }
[dir="ltr"] .mbl-v2-etrade__arrow { transform: scaleX(-1); }

/* --- Quick action circles ------------------------------------------------- */
.mbl-v2-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mbl-v2-quick a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--m-text);
  text-align: center;
}
.mbl-v2-quick__c {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.mbl-v2-band .mbl-v2-quick a { color: var(--m-ink); }
.mbl-v2-band .mbl-v2-quick__c { background: var(--m-bg); border-color: var(--m-bg); }

/* --- Stock rows ----------------------------------------------------------- */
.mbl-v2-stock { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--m-card); border-radius: 18px; }
.mbl-v2-stock__av {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--m-surface-2);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
}
.mbl-v2-stock__m { flex: 1; min-width: 0; }
.mbl-v2-stock__n { font-size: 14px; font-weight: 700; color: var(--m-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbl-v2-stock__s { font-size: 11px; color: var(--m-sub); direction: ltr; }
.mbl-v2-stock__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mbl-v2-stock__p { font-size: 15px; font-weight: 800; direction: ltr; }

/* --- News rows ------------------------------------------------------------ */
.mbl-v2-news { display: flex; gap: 12px; padding: 12px; background: var(--m-card); border-radius: var(--m-r-card); }
.mbl-v2-news__th { width: 84px; height: 84px; flex-shrink: 0; border-radius: 16px; object-fit: cover; background: var(--m-surface-2); }
.mbl-v2-news__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mbl-v2-news__t {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--m-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mbl-v2-news__time { font-size: 11px; color: var(--m-sub); }

.mbl-v2-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--m-r-pill);
  border: 1px solid var(--m-gold);
  color: var(--m-gold-200);
  font-size: 11px;
  font-weight: 700;
}

/* --- Featured card (news) ------------------------------------------------- */
.mbl-v2-feat { border-radius: var(--m-r-card); overflow: hidden; background: var(--m-bg); }
.mbl-v2-feat img { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--m-surface-2); }
.mbl-v2-feat__b { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.mbl-v2-feat__t { font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--m-text); }
.mbl-v2-feat__meta { font-size: 11px; color: var(--m-sub); }

/* --- Service cards (2-col grid) ------------------------------------------- */
.mbl-v2-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mbl-v2-svc {
  background: var(--m-card);
  border-radius: var(--m-r-card);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  color: var(--m-text);
}
.mbl-v2-svc__c {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--m-gold);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.mbl-v2-svc__t { font-size: 14px; font-weight: 800; }
.mbl-v2-svc__s { font-size: 11px; color: var(--m-sub); line-height: 1.5; }

.mbl-v2-cta {
  background: var(--m-gold);
  color: var(--m-ink);
  border-radius: var(--m-r-card);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.mbl-v2-cta__t { font-size: 17px; font-weight: 800; }
.mbl-v2-cta__btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--m-r-pill);
  background: var(--m-ink);
  border: 1.5px solid var(--m-gold);
  color: var(--m-gold-200);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Menu page ------------------------------------------------------------ */
.mbl-v2-prof { display: flex; align-items: center; gap: 12px; }
.mbl-v2-prof__av {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--m-surface-2);
  border: 2px solid var(--m-gold);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
}
.mbl-v2-prof__n { font-size: 18px; font-weight: 800; color: var(--m-text); }
.mbl-v2-prof__s { font-size: 12px; color: var(--m-sub); }

.mbl-v2-list { background: var(--m-card); border-radius: var(--m-r-card); overflow: hidden; }
.mbl-v2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--m-text);
  border-bottom: 1px solid var(--m-border);
}
.mbl-v2-row:last-child { border-bottom: 0; }
.mbl-v2-row__c {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--m-surface-2);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.mbl-v2-row__m { flex: 1; min-width: 0; }
.mbl-v2-row__t { font-size: 14px; font-weight: 700; }
.mbl-v2-row__s { font-size: 11px; color: var(--m-sub); }
.mbl-v2-row__ch { color: var(--m-sub); font-size: 14px; }
[dir="ltr"] .mbl-v2-row__ch { transform: scaleX(-1); }

.mbl-v2-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 0 8px; }
.mbl-v2-foot img { height: 70px; width: auto; }
.mbl-v2-foot__n { font-size: 13px; font-weight: 800; color: var(--m-gold-200); }
.mbl-v2-foot__r { font-size: 11px; color: var(--m-sub); text-align: center; }

/* --- Bottom navigation: floating pill ------------------------------------- */
.mbl-nav {
  position: fixed;
  bottom: calc(22px + var(--m-safe-bot));
  inset-inline: 16px;
  height: var(--m-nav-h);
  border-radius: 37px;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  box-shadow: 0 10px 30px rgba(5, 11, 26, .45);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
  z-index: 99990;
  width: auto;
}

.mbl-nav-item {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--m-sub);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}
.mbl-nav-item i {
  width: 40px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: transparent;
  color: inherit;
  transition: background var(--m-transition), color var(--m-transition);
}
.mbl-nav-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbl-nav-item.active { color: var(--m-gold-200); }
.mbl-nav-item.active i { background: var(--m-gold); color: var(--m-ink); }
.mbl-nav-item.active::before { display: none; }

/* --- Content clears the floating bar -------------------------------------- */
.mbl-content { padding-top: 0; padding-bottom: calc(var(--m-nav-h) + var(--m-safe-bot) + 46px); }

/* --- Alerts, drawer, notifications on blue -------------------------------- */
.mbl-alert--warning { background: rgba(201,163,94,.14); border: 1px solid var(--m-gold); color: var(--m-gold-200); }
.mbl-drawer { background: var(--m-bg); color: var(--m-text); }
.mbl-drawer-header { background: var(--m-bg); border-bottom: 1px solid var(--m-border); }
.mbl-drawer-title, .mbl-drawer-brand { color: var(--m-gold-200); }
.mbl-drawer-close { border: 1px solid var(--m-border-strong); background: var(--m-surface-2); color: #fff; border-radius: 50%; }
.mbl-notif-panel { background: var(--m-bg); border: 1px solid var(--m-border-strong); color: var(--m-text); }
.mbl-notif-header { border-bottom: 1px solid var(--m-border); }
.mbl-notif-item { background: var(--m-card); }
.mbl-notif-empty, .mbl-notif-item__time { color: var(--m-sub); }
.mbl-toast { background: var(--m-surface-2); border: 1px solid var(--m-border-strong); color: var(--m-text); }

/* --- Safety net for the views without a bespoke v2 design ----------------- */
.mbl-content h1, .mbl-content h2, .mbl-content h3,
.mbl-content h4, .mbl-content h5, .mbl-content h6 { color: var(--m-text); }
.mbl-content p, .mbl-content li { color: var(--m-soft); }
.mbl-content a:not([class]) { color: var(--m-gold-200); }
.mbl-content hr { border-color: var(--m-border); }
.mbl-content table { color: var(--m-text); }
.mbl-content th { color: var(--m-gold-200); }
.mbl-content td, .mbl-content th { border-color: var(--m-border); }
.mbl-card, .mbl-section, .mbl-market-card, .mbl-news-item,
.mbl-stock-row, .mbl-notif-item {
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-radius: var(--m-r-card);
  color: var(--m-text);
}
.mbl-section-title { color: var(--m-text); }
.mbl-view-all { color: var(--m-gold-200); }
.mbl-up { color: var(--m-up); }
.mbl-down { color: #ffffff; }

/* =============================================================================
   Shared partials on the mobile shell
   -----------------------------------------------------------------------------
   partials/sections/kyc-cycle and partials/news-ticker-async are ALSO rendered
   by the desktop home page (resources/views/home.blade.php) and by
   partials/site/ticker, so those files must not be edited for the mobile
   redesign. They read --hz-* tokens, so the tokens are redefined here scoped to
   .mbl-content: custom properties inherit, so this applies only inside the
   mobile shell and cannot reach the desktop site.
   ============================================================================= */
.mbl-content {
  --hz-gold:      var(--m-gold);
  --hz-primary:   var(--m-gold);
  --hz-bg-page:   var(--m-bg);
  --hz-bg-card:   var(--m-card);
  --hz-text-main: var(--m-text);
  --hz-text-sub:  var(--m-sub);
  --hz-border:    var(--m-border);
}

/* ── KYC onboarding cycle → card with a gold outline ─────────────────────── */
.mbl-content .hz-kyc-cycle {
  background: var(--m-card);
  border: 1.5px solid var(--m-gold);
  border-radius: var(--m-r-card);
  padding: 18px 14px;
  color: var(--m-text);
}
.mbl-content .hz-kyc-cycle .container { padding-inline: 0; }
.mbl-content .hz-kyc-cycle h1,
.mbl-content .hz-kyc-cycle h2,
.mbl-content .hz-kyc-cycle h3 { color: var(--m-text); }
.mbl-content .hz-kyc-cycle p  { color: var(--m-soft); }

/* step circles sit on the connecting line; done/active fill gold with ink icon */
.mbl-content .hz-kyc-progress { background: var(--m-surface-2); }

.mbl-content .hz-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  border-radius: var(--m-r-pill);
  background: var(--m-gold);
  border: none;
  color: var(--m-ink);
  font-size: 15px;
  font-weight: 800;
}

/* ── News ticker → rounded bar with a gold label pill ────────────────────── */
.mbl-content .hz-news-ticker {
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  border-radius: var(--m-r-pill);
  overflow: hidden;
  color: var(--m-text);
}
.mbl-content .hz-news-ticker__label {
  background: var(--m-gold);
  color: var(--m-ink);
  border-radius: var(--m-r-pill);
  font-weight: 800;
}
.mbl-content .hz-news-ticker__belt,
.mbl-content .hz-news-ticker__track { background: transparent; }
.mbl-content .hz-ticker-item { color: var(--m-text); }
.mbl-content .hz-ticker-badge {
  background: var(--m-gold);
  color: var(--m-ink);
  border-radius: var(--m-r-pill);
}

/* ── Bootstrap remnants used by shared partials ──────────────────────────── */
.mbl-content .card,
.mbl-content .list-group-item {
  background: var(--m-card);
  border-color: var(--m-border);
  color: var(--m-text);
}
.mbl-content .text-muted { color: var(--m-sub) !important; }
.mbl-content .bg-white,
.mbl-content .bg-light {
  background: var(--m-card) !important;
  color: var(--m-text);
}
.mbl-content .btn-primary {
  background: var(--m-gold);
  border-color: var(--m-gold);
  color: var(--m-ink);
}
.mbl-content .form-control,
.mbl-content .form-select,
.mbl-content input[type="text"],
.mbl-content input[type="email"],
.mbl-content input[type="tel"],
.mbl-content input[type="search"],
.mbl-content input[type="number"],
.mbl-content textarea,
.mbl-content select {
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  color: var(--m-text);
  border-radius: 14px;
}
.mbl-content .form-control::placeholder,
.mbl-content textarea::placeholder { color: var(--m-sub); }
.mbl-content label { color: var(--m-soft); }

/* =============================================================================
   Account-opening cycle (mobile/partials/kyc-cycle)
   ============================================================================= */
.mbl-kyc {
  background: var(--m-card);
  border: 1.5px solid var(--m-gold);
  border-radius: 26px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}

.mbl-kyc__eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--m-gold-200);
}

.mbl-kyc__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--m-text);
}

.mbl-kyc__prog {
  font-size: 12px;
  color: var(--m-sub);
}
.mbl-kyc__prog b { color: var(--m-gold-200); }

/* five circles on a single connecting line */
.mbl-kyc__steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  padding: 4px 6px 0;
}
/* the line sits behind the circles, inset so it stops at the first/last one */
.mbl-kyc__steps::before {
  content: "";
  position: absolute;
  top: 28px;
  inset-inline: 32px;
  height: 2px;
  background: var(--m-surface-2);
  z-index: 0;
}

.mbl-kyc__step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}

.mbl-kyc__c {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border-strong);
  color: var(--m-gold-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.mbl-kyc__step.is-on .mbl-kyc__c {
  background: var(--m-gold);
  border-color: var(--m-gold);
  color: var(--m-ink);
}

.mbl-kyc__l {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--m-sub);
  text-align: center;
}
.mbl-kyc__step.is-on .mbl-kyc__l { color: var(--m-text); }

/* =============================================================================
   Version 2 buttons
   Used by: mobile/partials/kyc-cycle (gold), mobile/menu guest state (both),
   mobile/markets load-more (ghost).
   ============================================================================= */
.mbl-v2-btn-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: none;
  border-radius: var(--m-r-pill);
  background: var(--m-gold);
  color: var(--m-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.mbl-v2-btn-gold:active { transform: scale(.99); }

.mbl-v2-btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--m-gold);
  border-radius: var(--m-r-pill);
  background: transparent;
  color: var(--m-gold-200);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.mbl-v2-btn-ghost:active { transform: scale(.99); }

/* "view all" link keeps its arrow on the baseline and flips for LTR */
.mbl-v2-more { display: inline-flex; align-items: center; gap: 6px; }
.mbl-v2-more i { font-size: 11px; }
[dir="ltr"] .mbl-v2-more i { transform: scaleX(-1); }

/* Row text is marked up with <span>s (valid inside an <a>), so the middle
   column must stack them explicitly or title and subtitle run together. */
.mbl-v2-row__m { display: flex; flex-direction: column; gap: 2px; }
.mbl-v2-row__t,
.mbl-v2-row__s { display: block; }
.mbl-v2-row__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbl-v2-row__s { line-height: 1.4; }

/* Same for the service cards and quick actions, which also use spans. */
.mbl-v2-svc__t, .mbl-v2-svc__s { display: block; }

/* =============================================================================
   Carried forward from production (these fixes existed only on the server,
   not in the repo — preserved here during the Version 2 deploy).
   ============================================================================= */

/* horizon-components.css (pulled in by partials/design-tokens, which loads
   AFTER this file) sets body{padding-top:95px} — 85px under 991.98px — to clear
   the fixed navbar of the DESKTOP site. The mobile shell has no such navbar, so
   leaving it in place pushes every mobile page down behind a band of blank
   space. Attribute selector so the fix does not depend on stylesheet order. */
body[class*="device-"] {
  padding-top: 0;
}

/* The legacy stock row is still emitted by the home search JS hooks; let its
   left column claim leftover width instead of truncating at a fixed 160px. */
.mbl-stock-row__left { flex: 1 1 auto; }
.mbl-stock-row__name,
[dir="rtl"] .mbl-stock-row__name { max-width: 100%; }

/* NOTE: production also carried @media rules shrinking/hiding .mbl-header-name
   below 420/380px. Version 2 drops the separate "HORIZON" wordmark (the logo
   image already contains it), so those rules are obsolete and not carried. */

/* Notifications panel: the closed state used translateY(-110%), which is only
   enough when the panel is anchored at the very top. It sits --m-header-h down,
   so a 178px panel still left ~42px of itself parked over the header icons.
   Offset by its own top as well, so it clears the viewport at any height, and
   make it inert while closed so it cannot swallow taps on the header buttons. */
.mbl-notif-panel {
  transform: translateY(calc(-100% - var(--m-header-h) - var(--m-safe-top) - 16px));
  visibility: hidden;
  pointer-events: none;
}
.mbl-notif-panel.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}