/* ==================================================
   VELORA HOME WALLET
   STRUCTURE A
   Visual layout copied from reference A.
   Existing data/actions stay untouched.
   ================================================== */


/* MAIN WHITE WALLET CARD */

.vd2-dashboard .vd2-wallet {
  box-sizing:border-box !important;

  width:calc(100% - 24px) !important;
  margin:-14px auto 0 !important;

  padding:
    23px
    18px
    17px !important;

  background:#FFFFFF !important;
  background-image:none !important;

  border:0 !important;
  border-radius:
    23px
    23px
    24px
    24px !important;

  box-shadow:
    0 12px 28px
    rgba(16,20,40,.08) !important;

  overflow:visible !important;
}


/* ==============================
   BALANCE TOP AREA
   ============================== */

.vd2-dashboard .vd2-wallet-top {
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    auto !important;

  align-items:end !important;

  column-gap:18px !important;

  min-height:90px !important;

  padding:
    0
    2px
    21px !important;

  margin:0 !important;

  border-bottom:
    1px dashed
    #E1E3EC !important;
}


/* remove old individual panels */

.vd2-dashboard
.vd2-wallet-top > article,

.vd2-dashboard
.vd2-wallet-invest {
  background:transparent !important;
  background-image:none !important;

  border:0 !important;

  box-shadow:none !important;

  margin:0 !important;
}


/* ==============================
   PROFIT BALANCE — LEFT
   ============================== */

.vd2-dashboard
.vd2-wallet-top > article:first-child {
  min-width:0 !important;

  padding:0 !important;

  text-align:left !important;

  align-self:end !important;
}


.vd2-dashboard
.vd2-wallet-label {
  display:block !important;

  margin:0 0 9px !important;

  color:#85889B !important;

  font-size:10px !important;
  font-weight:700 !important;

  letter-spacing:.15px !important;

  line-height:1 !important;
}


.vd2-dashboard
.vd2-wallet-top > article:first-child strong {
  display:block !important;

  margin:0 !important;

  color:#15172A !important;

  font-size:30px !important;
  font-weight:900 !important;

  letter-spacing:-1.2px !important;

  line-height:1 !important;
}


/* Profit supporting text */

.vd2-dashboard
.vd2-wallet-top > article:first-child small {
  display:block !important;

  margin-top:9px !important;

  color:#10B981 !important;

  font-size:8px !important;
  font-weight:800 !important;

  line-height:1.2 !important;
}


/* ==============================
   INVEST WALLET — RIGHT
   ============================== */

.vd2-dashboard
.vd2-wallet-invest {
  width:auto !important;
  min-width:105px !important;

  padding:
    0
    0
    2px
    10px !important;

  text-align:right !important;

  align-self:end !important;
}


.vd2-dashboard
.vd2-wallet-invest .vd2-wallet-label {
  text-align:right !important;
}


.vd2-dashboard
.vd2-wallet-invest strong {
  display:block !important;

  margin:7px 0 0 !important;

  color:#EB0616 !important;

  font-size:20px !important;
  font-weight:900 !important;

  letter-spacing:-.5px !important;

  line-height:1 !important;
}


.vd2-dashboard
.vd2-wallet-invest small {
  color:#85889B !important;

  font-size:7px !important;
}


/* hide old vertical separator if present */

.vd2-dashboard
.vd2-wallet-divider {
  display:none !important;
}


/* ==============================
   QUICK ACTION AREA
   ============================== */

.vd2-dashboard
.vd2-quick-actions {
  display:grid !important;

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

  gap:4px !important;

  width:100% !important;

  margin:0 !important;

  padding:
    19px
    0
    0 !important;

  border:0 !important;

  background:transparent !important;
}


/* each action */

.vd2-dashboard
.vd2-quick-actions button {
  position:relative !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:flex-start !important;

  gap:8px !important;

  min-width:0 !important;
  min-height:66px !important;

  padding:0 !important;

  color:#15172A !important;

  background:transparent !important;

  border:0 !important;

  box-shadow:none !important;
}


/* icon wrapper: A-style, no box */

.vd2-dashboard
.vd2-quick-actions button > span {
  position:relative !important;

  display:grid !important;

  place-items:center !important;

  width:43px !important;
  height:36px !important;

  padding:0 !important;

  background:transparent !important;

  border:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;
}


/* icons */

.vd2-dashboard
.vd2-quick-actions button svg {
  width:27px !important;
  height:27px !important;

  color:#171927 !important;
  stroke:#171927 !important;

  stroke-width:1.8px !important;
}


/* small status dot like reference A */

.vd2-dashboard
.vd2-quick-actions button > span::after {
  content:"" !important;

  position:absolute !important;

  right:2px !important;
  bottom:0 !important;

  width:8px !important;
  height:8px !important;

  border-radius:50% !important;

  background:#EB0616 !important;

  border:
    2px solid
    #FFFFFF !important;
}


/* action labels */

.vd2-dashboard
.vd2-quick-actions button b,

.vd2-dashboard
.vd2-quick-actions button strong,

.vd2-dashboard
.vd2-quick-actions button small {
  display:block !important;

  width:100% !important;

  margin:0 !important;

  color:#171927 !important;

  text-align:center !important;

  font-size:9px !important;
  font-weight:700 !important;

  line-height:1.15 !important;

  white-space:nowrap !important;
}


/* remove active backgrounds inside wallet actions */

.vd2-dashboard
.vd2-quick-actions button.active,

.vd2-dashboard
.vd2-quick-actions button[aria-current="page"] {
  background:transparent !important;
}


/* ========================================
   MOBILE FINE TUNING
   ======================================== */

@media (max-width:390px) {

  .vd2-dashboard .vd2-wallet {
    width:calc(100% - 20px) !important;

    padding:
      21px
      15px
      15px !important;
  }


  .vd2-dashboard
  .vd2-wallet-top {
    column-gap:12px !important;

    min-height:87px !important;

    padding-bottom:19px !important;
  }


  .vd2-dashboard
  .vd2-wallet-top > article:first-child strong {
    font-size:28px !important;
  }


  .vd2-dashboard
  .vd2-wallet-invest {
    min-width:96px !important;
  }


  .vd2-dashboard
  .vd2-wallet-invest strong {
    font-size:18px !important;
  }


  .vd2-dashboard
  .vd2-quick-actions {
    padding-top:17px !important;
  }


  .vd2-dashboard
  .vd2-quick-actions button svg {
    width:25px !important;
    height:25px !important;
  }

}