/* ============================================================
   BRILL VAULT NATIVE ONE
   ============================================================ */

:root {
  --vone-bg: #080c12;
  --vone-surface: #0d151f;
  --vone-surface-2: #101923;

  --vone-border: rgba(147, 168, 198, .12);
  --vone-border-strong: rgba(147, 168, 198, .20);

  --vone-text: #f3f5f8;
  --vone-soft: #a5b0bf;
  --vone-muted: #667589;

  --vone-blue: #4388ed;
  --vone-green: #51dcb0;
  --vone-gold: #c8a651;
}


/* ============================================================
   APP
   ============================================================ */

html,
body {
  overflow-x: hidden !important;
}


#appShell {
  grid-template-columns:
    248px minmax(0, 1fr) !important;

  color:
    var(--vone-text) !important;

  background:
    radial-gradient(
      circle at 78% -12%,
      rgba(48, 91, 151, .10),
      transparent 30%
    ),
    #080c12 !important;
}


#appShell,
#appShell * {
  box-sizing: border-box;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

#appShell .app-sidebar {
  position: sticky !important;

  top: 0 !important;

  width: 248px !important;
  height: 100vh !important;
  min-height: 100vh !important;

  padding:
    25px 15px 17px !important;

  background:
    rgba(6, 10, 15, .985) !important;

  border-right:
    1px solid rgba(147,168,198,.08) !important;

  box-shadow:
    none !important;
}


#appShell .app-sidebar::before {
  display: none !important;
}


#appShell .app-sidebar .brand {
  padding:
    0 6px 29px !important;
}


#appShell .brand-mark {
  width: 41px !important;
  height: 41px !important;

  border-radius:
    11px !important;

  border:
    1px solid rgba(68,136,232,.35) !important;

  background:
    linear-gradient(
      145deg,
      rgba(45,88,150,.26),
      rgba(9,16,25,.90)
    ) !important;

  box-shadow:
    none !important;
}


#appShell .brand-copy strong {
  font-size:
    13px !important;

  letter-spacing:
    .13em !important;
}


#appShell .brand-copy small {
  margin-top:
    5px !important;

  color:
    #647184 !important;

  font-size:
    8px !important;
}


#appShell .app-nav {
  gap:
    3px !important;
}


#appShell .app-nav-item {
  min-height:
    45px !important;

  padding:
    0 12px !important;

  border:
    1px solid transparent !important;

  border-radius:
    9px !important;

  color:
    #8793a4 !important;

  background:
    transparent !important;

  font-size:
    12px !important;

  font-weight:
    550 !important;

  box-shadow:
    none !important;

  transform:
    none !important;
}


#appShell .app-nav-item:hover {
  color:
    #dfe5ed !important;

  background:
    rgba(255,255,255,.025) !important;

  transform:
    none !important;
}


#appShell .app-nav-item.active {
  color:
    #f6f8fb !important;

  border-color:
    rgba(66,132,226,.27) !important;

  background:
    rgba(56,116,202,.12) !important;

  box-shadow:
    inset 3px 0 0 #4488ea !important;
}


/* ============================================================
   MAIN
   ============================================================ */

#appShell .app-main {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 clamp(28px,3vw,52px)
    42px !important;
}


#appShell .app-topbar {
  min-height:
    108px !important;

  padding:
    0 !important;

  border-bottom:
    1px solid rgba(147,168,198,.075) !important;
}


#appShell #appTitle {
  font-size:
    31px !important;

  font-weight:
    650 !important;

  letter-spacing:
    -.04em !important;
}


#appShell #view-overview {
  width:
    100% !important;

  min-width:
    0 !important;

  padding-top:
    20px !important;
}


/* ============================================================
   BASE PANEL
   ============================================================ */

#appShell #view-overview .panel {
  border:
    1px solid var(--vone-border) !important;

  border-radius:
    14px !important;

  background:
    rgba(13,21,31,.82) !important;

  box-shadow:
    0 20px 56px rgba(0,0,0,.12) !important;
}


#appShell #view-overview .panel::before {
  display:
    none !important;
}


#appShell .vone-kicker {
  margin:
    0 !important;

  color:
    #6793d0 !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .11em !important;
}


#appShell .vone-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    16px;
}


#appShell .vone-head h2,
#appShell .vone-ledger h2 {
  margin:
    7px 0 0 !important;

  color:
    #edf1f6 !important;

  font-size:
    19px !important;

  font-weight:
    620 !important;

  letter-spacing:
    -.025em !important;
}


/* ============================================================
   DASHBOARD
   ============================================================ */

#appShell .vone-grid {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(350px, 400px);

  gap:
    14px;

  min-width:
    0;
}


/* ============================================================
   BALANCE
   ============================================================ */

#appShell .vone-balance {
  min-width:
    0;

  min-height:
    460px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    27px 29px 24px !important;
}


#appShell .vone-live {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    5px 8px;

  border:
    1px solid rgba(81,220,176,.16);

  border-radius:
    999px;

  color:
    var(--vone-green);

  background:
    rgba(81,220,176,.045);

  font-size:
    7px;

  font-weight:
    700;
}


#appShell .vone-live i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    currentColor;
}


#appShell .vone-money {
  display:
    flex;

  align-items:
    baseline;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    41px;
}


#appShell .vone-money #balanceValue {
  color:
    #fff !important;

  font-size:
    clamp(58px,5.2vw,84px) !important;

  line-height:
    .92 !important;

  font-weight:
    420 !important;

  letter-spacing:
    -.066em !important;
}


#appShell .vone-money #balanceCurrency {
  color:
    #7896bd !important;

  font-size:
    17px !important;

  font-weight:
    600 !important;
}


#appShell .vone-muted {
  margin:
    14px 0 0;

  color:
    #677589;

  font-size:
    10px;
}


/* actions */

#appShell .vone-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-top:
    23px;
}


#appShell .vone-actions .btn {
  min-height:
    42px !important;

  padding:
    0 15px !important;

  border:
    1px solid var(--vone-border) !important;

  border-radius:
    8px !important;

  color:
    #aab5c3 !important;

  background:
    rgba(255,255,255,.012) !important;

  box-shadow:
    none !important;

  font-size:
    10px !important;

  font-weight:
    600 !important;
}


#appShell .vone-actions .vone-primary {
  color:
    #fff !important;

  border-color:
    rgba(68,137,235,.27) !important;

  background:
    linear-gradient(
      145deg,
      #4388eb,
      #2d6dc5
    ) !important;
}


/* finance section */

#appShell .vone-finance {
  margin-top:
    29px;

  padding-top:
    20px;

  border-top:
    1px solid rgba(147,168,198,.07);
}


#appShell .vone-finance-title {
  display:
    flex;

  justify-content:
    space-between;

  color:
    #69778a;

  font-size:
    9px;
}


#appShell .vone-finance-title strong {
  color:
    #8a96a7;

  font-weight:
    600;
}


#appShell .vone-metrics {
  display:
    grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    9px;

  margin-top:
    16px;
}


#appShell .vone-metrics > div {
  min-height:
    72px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  padding:
    12px;

  border:
    1px solid rgba(147,168,198,.065);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.011);
}


#appShell .vone-metrics span {
  color:
    #58667a;

  font-size:
    8px;
}


#appShell .vone-metrics strong {
  margin-top:
    8px;

  color:
    #b6c0cd;

  font-size:
    10px;

  font-weight:
    600;

  overflow-wrap:
    anywhere;
}


#appShell .vone-good {
  color:
    var(--vone-green) !important;
}


#appShell .vone-good i {
  display:
    inline-block;

  width:
    5px;

  height:
    5px;

  margin-right:
    5px;

  border-radius:
    50%;

  background:
    currentColor;
}


/* ============================================================
   RIGHT COLUMN
   ============================================================ */

#appShell .vone-right {
  min-width:
    0;

  display:
    grid;

  grid-template-rows:
    auto 1fr;

  gap:
    14px;
}


#appShell .vone-card-panel,
#appShell .vone-account {
  padding:
    22px !important;
}


/* ============================================================
   REAL NATIVE CARD
   ============================================================ */

#appShell .vone-card-tier {
  color:
    var(--vone-gold);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .10em;
}


#appShell .vone-card-mount {
  min-height:
    225px;

  margin-top:
    17px;
}


#appShell .vone-card-loading,
#appShell .vone-card-error {
  min-height:
    225px;

  display:
    grid;

  place-items:
    center;

  color:
    #5d6b7f;

  border:
    1px dashed rgba(147,168,198,.10);

  border-radius:
    14px;

  font-size:
    10px;
}


#appShell .vone-bank-card {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1.586 / 1;

  min-height:
    225px;

  padding:
    22px;

  overflow:
    hidden;

  border:
    1px solid rgba(201,166,76,.35);

  border-radius:
    14px;

  color:
    #f0eee8;

  background:
    radial-gradient(
      circle at 9% 0%,
      rgba(201,166,76,.13),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #24221c,
      #171612 49%,
      #10110f
    );

  box-shadow:
    0 26px 58px rgba(0,0,0,.34);
}


#appShell .vone-card-light {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.026) 38%,
      transparent 48%,
      rgba(255,255,255,.009) 68%,
      transparent
    );
}


#appShell .vone-bank-card::after {
  content:
    "";

  position:
    absolute;

  width:
    185px;

  height:
    185px;

  right:
    -55px;

  top:
    -58px;

  border:
    1px solid rgba(211,176,83,.07);

  border-radius:
    50%;

  box-shadow:
    0 0 0 45px rgba(211,176,83,.011),
    0 0 0 90px rgba(211,176,83,.006);
}


#appShell .vone-bank-top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    space-between;
}


#appShell .vone-bank-top strong {
  display:
    block;

  font-size:
    11px;

  letter-spacing:
    .12em;
}


#appShell .vone-bank-top span {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--vone-gold);

  font-size:
    6px;

  font-weight:
    700;
}


#appShell .vone-contactless {
  color:
    #a88a42;

  font-size:
    20px;
}


#appShell .vone-chip {
  position:
    relative;

  z-index:
    2;

  width:
    44px;

  height:
    32px;

  margin-top:
    26px;

  border-radius:
    7px;

  background:
    linear-gradient(
      145deg,
      #d8ba55,
      #987222
    );
}


#appShell .vone-card-number {
  position:
    relative;

  z-index:
    2;

  margin-top:
    19px;

  font-family:
    ui-monospace,
    Menlo,
    Consolas,
    monospace;

  font-size:
    14px;

  letter-spacing:
    .09em;
}


#appShell .vone-bank-bottom {
  position:
    absolute;

  z-index:
    2;

  left:
    22px;

  right:
    22px;

  bottom:
    18px;

  display:
    flex;

  justify-content:
    space-between;
}


#appShell .vone-bank-bottom span {
  display:
    block;

  color:
    #77756e;

  font-size:
    6px;
}


#appShell .vone-bank-bottom strong {
  display:
    block;

  margin-top:
    4px;

  font-size:
    7px;
}


/*
 * Critical:
 * old renderers may still create their card modules because
 * they are used elsewhere in the current frontend stack.
 * We do NOT move or mutate them. We only hide them on Overview.
 */

#appShell #view-overview #privateBankCard,
#appShell #view-overview #brill-card {
  display:
    none !important;
}


/* ============================================================
   ACCOUNT
   ============================================================ */

#appShell .vone-account-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    14px;
}


#appShell .vone-account-head h2 {
  margin:
    7px 0 0;

  color:
    #edf1f6;

  font-size:
    21px;

  font-weight:
    620;
}


#appShell .vone-verified {
  padding:
    4px 7px;

  border:
    1px solid rgba(81,220,176,.15);

  border-radius:
    6px;

  color:
    var(--vone-green);

  background:
    rgba(81,220,176,.04);

  font-size:
    7px;

  font-weight:
    700;
}


#appShell .vone-account dl {
  margin:
    18px 0 0;
}


#appShell .vone-account dl > div {
  min-height:
    54px;

  display:
    grid;

  grid-template-columns:
    90px minmax(0,1fr);

  align-items:
    center;

  border-top:
    1px solid rgba(147,168,198,.07);
}


#appShell .vone-account dt {
  color:
    #687589;

  font-size:
    9px;
}


#appShell .vone-account dd {
  margin:
    0;

  color:
    #bbc4d0;

  font-size:
    9px;

  font-weight:
    600;

  text-align:
    right;

  overflow-wrap:
    anywhere;
}


/* ============================================================
   QUICK NAV
   ============================================================ */

#appShell .vone-quick {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    10px;

  margin-top:
    14px;
}


#appShell .vone-quick button {
  min-width:
    0;

  min-height:
    76px;

  display:
    grid;

  grid-template-columns:
    38px minmax(0,1fr) auto;

  align-items:
    center;

  gap:
    12px;

  padding:
    0 15px;

  border:
    1px solid var(--vone-border);

  border-radius:
    11px;

  color:
    inherit;

  background:
    rgba(13,21,31,.72);

  cursor:
    pointer;

  text-align:
    left;
}


#appShell .vone-quick button:hover {
  border-color:
    rgba(93,140,207,.18);

  background:
    rgba(15,24,36,.82);
}


#appShell .vone-quick-icon {
  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    9px;

  color:
    #73a1e0;

  background:
    rgba(67,126,209,.07);
}


#appShell .vone-quick strong {
  display:
    block;

  color:
    #c0c9d5;

  font-size:
    10px;
}


#appShell .vone-quick small {
  display:
    block;

  margin-top:
    4px;

  color:
    #5c697c;

  font-size:
    8px;
}


#appShell .vone-quick b {
  color:
    #637287;

  font-size:
    13px;
}


/* ============================================================
   LEDGER
   ============================================================ */

#appShell .vone-ledger {
  margin-top:
    14px;

  padding:
    23px !important;
}


#appShell .vone-ledger-head {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    20px;

  margin-bottom:
    17px;
}


#appShell .vone-table-head {
  min-height:
    29px;

  display:
    grid;

  grid-template-columns:
    1.1fr 1.7fr 1fr;

  align-items:
    center;

  padding:
    0 12px;

  color:
    #526073;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    .08em;
}


#appShell .vone-ledger .transaction-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


#appShell .vone-ledger .transaction {
  min-height:
    70px !important;

  padding:
    10px 12px !important;

  border:
    1px solid rgba(147,168,198,.07) !important;

  border-radius:
    9px !important;

  background:
    rgba(255,255,255,.01) !important;
}


#appShell .vone-ledger .tx-icon {
  border-radius:
    8px !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1250px) {

  #appShell .vone-grid {
    grid-template-columns:
      1fr;
  }


  #appShell .vone-right {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      auto;
  }

}


@media (max-width: 900px) {

  #appShell .vone-right,
  #appShell .vone-quick {
    grid-template-columns:
      1fr;
  }


  #appShell .vone-metrics {
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media (max-width: 820px) {

  #appShell {
    display:
      block !important;
  }


  #appShell .app-sidebar {
    position:
      sticky !important;

    z-index:
      100;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    padding:
      12px !important;
  }


  #appShell .app-nav {
    flex-direction:
      row !important;

    overflow-x:
      auto !important;
  }


  #appShell .app-nav-item {
    flex:
      0 0 auto !important;

    width:
      auto !important;
  }


  #appShell .sidebar-security,
  #appShell #logoutBtn {
    display:
      none !important;
  }


  #appShell .app-main {
    padding:
      0 16px 30px !important;
  }

}


@media (max-width: 560px) {

  #appShell .vone-money #balanceValue {
    font-size:
      46px !important;
  }


  #appShell .vone-actions {
    flex-direction:
      column;
  }


  #appShell .vone-actions .btn {
    width:
      100%;
  }


  #appShell .vone-metrics {
    grid-template-columns:
      1fr;
  }

}


/* BRILL VAULT NATIVE ONE END */

/* ============================================================
   REMOVE SIDEBAR V LOGO
   ============================================================ */

#appShell .brand-mark {
    display: none !important;
}

#appShell .app-sidebar .brand {
    gap: 0 !important;
}

#appShell .brand-copy {
    margin-left: 0 !important;
}

/* BRILL VAULT V LOGO REMOVED */


/* ============================================================
   BRILL VAULT
   PREMIUM TOPUP VIEW
   ============================================================ */


/* ------------------------------------------------------------
   PAGE GRID
   ------------------------------------------------------------ */

#appShell #view-topup {
  width: 100% !important;
  min-width: 0 !important;

  padding-top: 24px !important;
}


#appShell #view-topup > div,
#appShell #view-topup .view-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(360px, .75fr) !important;

  gap: 16px !important;

  align-items: start !important;

  width: 100% !important;
}


/* ------------------------------------------------------------
   PANELS
   ------------------------------------------------------------ */

#appShell #view-topup .panel {
  min-width: 0 !important;

  padding:
    30px 31px 28px !important;

  border:
    1px solid rgba(147,168,198,.12) !important;

  border-radius:
    16px !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(55,112,198,.075),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(14,23,35,.96),
      rgba(9,16,25,.96)
    ) !important;

  box-shadow:
    0 22px 58px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}


#appShell #view-topup .panel::before {
  display: none !important;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

#appShell #view-topup .eyebrow {
  margin:
    0 0 15px !important;

  color:
    #6997d6 !important;

  font-size:
    9px !important;

  font-weight:
    750 !important;

  letter-spacing:
    .16em !important;
}


#appShell #view-topup h2 {
  margin:
    0 !important;

  color:
    #f1f4f8 !important;

  font-size:
    24px !important;

  line-height:
    1.15 !important;

  font-weight:
    650 !important;

  letter-spacing:
    -.035em !important;
}


#appShell #view-topup h2 + p {
  max-width:
    620px !important;

  margin:
    13px 0 0 !important;

  color:
    #718095 !important;

  font-size:
    11px !important;

  line-height:
    1.65 !important;
}


/* ------------------------------------------------------------
   FORM
   ------------------------------------------------------------ */

#appShell #view-topup form {
  margin-top:
    30px !important;
}


#appShell #view-topup form label {
  display:
    block !important;

  margin-bottom:
    10px !important;

  color:
    #aab5c4 !important;

  font-size:
    10px !important;

  font-weight:
    620 !important;
}


#appShell #view-topup input {
  width:
    100% !important;

  height:
    56px !important;

  padding:
    0 17px !important;

  border:
    1px solid rgba(138,163,199,.14) !important;

  border-radius:
    11px !important;

  outline:
    none !important;

  color:
    #f0f3f7 !important;

  background:
    rgba(4,10,17,.48) !important;

  font-size:
    14px !important;

  font-weight:
    560 !important;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}


#appShell #view-topup input:hover {
  border-color:
    rgba(93,147,225,.25) !important;
}


#appShell #view-topup input:focus {
  border-color:
    rgba(72,143,241,.58) !important;

  background:
    rgba(5,12,21,.72) !important;

  box-shadow:
    0 0 0 4px rgba(67,136,237,.07) !important;
}


/* ------------------------------------------------------------
   QUOTE / EXPECTED CREDIT
   ------------------------------------------------------------ */

#appShell #view-topup .quote,
#appShell #view-topup [class*="quote"] {
  min-height:
    80px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    20px !important;

  margin-top:
    22px !important;

  padding:
    18px 20px !important;

  border:
    1px solid rgba(120,151,193,.12) !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      135deg,
      rgba(42,88,153,.075),
      rgba(255,255,255,.012)
    ) !important;
}


#appShell #view-topup .quote span,
#appShell #view-topup [class*="quote"] span {
  color:
    #748298 !important;

  font-size:
    10px !important;
}


#appShell #view-topup .quote strong,
#appShell #view-topup [class*="quote"] strong {
  color:
    #f2f4f7 !important;

  font-size:
    20px !important;

  font-weight:
    640 !important;

  letter-spacing:
    -.025em !important;

  text-align:
    right !important;
}


/* ------------------------------------------------------------
   TOPUP BUTTON
   ------------------------------------------------------------ */

#appShell #view-topup form .btn-primary,
#appShell #view-topup form button[type="submit"] {
  width:
    100% !important;

  min-height:
    50px !important;

  margin-top:
    24px !important;

  border:
    1px solid rgba(106,168,255,.27) !important;

  border-radius:
    10px !important;

  color:
    #fff !important;

  background:
    linear-gradient(
      135deg,
      #4289ef,
      #2d6dc8
    ) !important;

  box-shadow:
    0 13px 30px rgba(38,101,190,.17),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  font-size:
    11px !important;

  font-weight:
    680 !important;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}


#appShell #view-topup form .btn-primary:hover,
#appShell #view-topup form button[type="submit"]:hover {
  transform:
    translateY(-1px) !important;

  filter:
    brightness(1.06) !important;

  box-shadow:
    0 17px 36px rgba(38,101,190,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}


#appShell #view-topup form .btn-primary:active,
#appShell #view-topup form button[type="submit"]:active {
  transform:
    translateY(0) !important;
}


/* ------------------------------------------------------------
   RIGHT PANEL - HOW IT WORKS
   ------------------------------------------------------------ */

#appShell #view-topup ol {
  margin:
    25px 0 0 !important;

  padding:
    0 !important;

  list-style:
    none !important;

  counter-reset:
    vault-topup-step !important;
}


#appShell #view-topup ol li {
  position:
    relative !important;

  min-height:
    52px !important;

  display:
    flex !important;

  align-items:
    center !important;

  padding:
    11px 12px 11px 48px !important;

  color:
    #8794a6 !important;

  border-bottom:
    1px solid rgba(143,165,195,.07) !important;

  font-size:
    10px !important;

  line-height:
    1.5 !important;

  counter-increment:
    vault-topup-step !important;
}


#appShell #view-topup ol li:last-child {
  border-bottom:
    0 !important;
}


#appShell #view-topup ol li::before {
  content:
    counter(vault-topup-step) !important;

  position:
    absolute !important;

  left:
    5px !important;

  width:
    28px !important;

  height:
    28px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid rgba(81,142,228,.20) !important;

  border-radius:
    8px !important;

  color:
    #75a6ec !important;

  background:
    rgba(57,115,198,.07) !important;

  font-size:
    9px !important;

  font-weight:
    700 !important;
}


/* ------------------------------------------------------------
   PROVIDER STATUS NOTICE
   ------------------------------------------------------------ */

#appShell #paymentProviderNotice {
  position:
    relative !important;

  margin-top:
    24px !important;

  padding:
    16px 17px 16px 46px !important;

  border:
    1px solid rgba(199,163,73,.13) !important;

  border-radius:
    11px !important;

  color:
    #8d98a8 !important;

  background:
    linear-gradient(
      135deg,
      rgba(173,135,43,.045),
      rgba(255,255,255,.01)
    ) !important;

  font-size:
    9px !important;

  line-height:
    1.55 !important;
}


#appShell #paymentProviderNotice::before {
  content:
    "i" !important;

  position:
    absolute !important;

  left:
    16px !important;

  top:
    17px !important;

  width:
    18px !important;

  height:
    18px !important;

  display:
    grid !important;

  place-items:
    center !important;

  border:
    1px solid rgba(202,168,79,.26) !important;

  border-radius:
    50% !important;

  color:
    #c4a45a !important;

  font-size:
    10px !important;

  font-family:
    Georgia,
    serif !important;

  font-weight:
    700 !important;
}


/* ------------------------------------------------------------
   FORM MESSAGE
   ------------------------------------------------------------ */

#appShell #topupMessage {
  min-height:
    18px !important;

  margin-top:
    12px !important;

  font-size:
    9px !important;

  line-height:
    1.5 !important;
}


/* ------------------------------------------------------------
   DISABLED PAYMENT STATE
   ------------------------------------------------------------ */

#appShell #view-topup button:disabled {
  opacity:
    .55 !important;

  cursor:
    not-allowed !important;

  transform:
    none !important;

  box-shadow:
    none !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1100px) {

  #appShell #view-topup > div,
  #appShell #view-topup .view-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

}


@media (max-width: 620px) {

  #appShell #view-topup .panel {
    padding:
      22px 19px !important;
  }


  #appShell #view-topup h2 {
    font-size:
      21px !important;
  }


  #appShell #view-topup .quote,
  #appShell #view-topup [class*="quote"] {
    align-items:
      flex-start !important;

    flex-direction:
      column !important;

    gap:
      9px !important;
  }


  #appShell #view-topup .quote strong,
  #appShell #view-topup [class*="quote"] strong {
    text-align:
      left !important;
  }

}


/* BRILL VAULT PREMIUM TOPUP END */