/* =========================================================
   ORO PRIME STRUCTURE + VELORA RED/BLACK
   ========================================================= */

.vip-plan-2usd.oro-ready {
  position:relative !important;

  padding:0 !important;

  background:transparent !important;
  border:0 !important;

  box-shadow:none !important;
}


/* original UI hides ONLY after new card is ready */

.vip-plan-2usd.oro-ready
> :not(.velora-oro-shell) {
  display:none !important;
}


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

.velora-oro-shell {
  box-sizing:border-box;

  width:100%;

  padding:14px 14px 13px;

  color:#FFFFFF;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(235,6,22,.12),
      transparent 32%
    ),
    linear-gradient(
      160deg,
      #171824 0%,
      #11121D 50%,
      #0B0B0D 100%
    );

  border:
    1px solid rgba(139,0,15,.48);

  border-radius:22px;

  box-shadow:
    0 14px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.035);

  overflow:hidden;
}


/* ==============================
   TOP CHIPS
   ============================== */

.velora-oro-shell__top {
  display:grid;

  grid-template-columns:
    42px
    auto
    1fr
    88px;

  align-items:center;

  gap:9px;

  margin-bottom:13px;
}


.velora-oro-shell__icon {
  display:grid;

  place-items:center;

  width:42px;
  height:42px;

  background:#111217;

  border:
    1px solid rgba(235,6,22,.50);

  border-radius:12px;

  box-shadow:
    0 0 14px rgba(139,0,15,.14),
    inset 0 0 12px rgba(139,0,15,.08);
}


.velora-oro-shell__icon svg {
  width:19px;
  height:19px;

  fill:none;

  stroke:#EB0616;
  stroke-width:1.8;
}


.velora-oro-shell__days {
  display:flex;

  align-items:center;
  justify-content:center;

  gap:7px;

  min-width:78px;
  height:38px;

  padding:0 11px;

  background:#111217;

  border:
    1px solid rgba(192,192,192,.19);

  border-radius:11px;

  color:#FFFFFF;

  font-size:9px;
  font-weight:800;

  white-space:nowrap;
}


.velora-oro-shell__days svg {
  width:13px;
  height:13px;

  fill:none;

  stroke:#C0C0C0;
  stroke-width:1.8;
}


.velora-oro-shell__hourly {
  grid-column:4;

  display:flex;

  flex-direction:column;

  align-items:center;
  justify-content:center;

  justify-self:end;

  width:88px;
  height:44px;

  background:#111217;

  border:
    1px solid rgba(139,0,15,.52);

  border-radius:11px;
}


.velora-oro-shell__hourly small {
  color:#C0C0C0;

  font-size:5px;
  font-weight:900;

  letter-spacing:.7px;
}


.velora-oro-shell__hourly strong {
  margin-top:2px;

  color:#FFFFFF;

  font-size:12px;
  font-weight:950;
}


/* ==============================
   TITLE
   ============================== */

.velora-oro-shell__title {
  margin-bottom:5px;

  color:#FFFFFF;

  font-size:18px;
  font-weight:950;

  line-height:1;

  letter-spacing:-.25px;
}


.velora-oro-shell__subtitle {
  margin-bottom:9px;

  color:#C0C0C0;

  font-size:8px;
  font-weight:650;

  line-height:1.2;
}


/* ==============================
   GRAPH — like ORO
   ============================== */

.velora-oro-shell__chart {
  width:100%;
  height:74px;

  margin-bottom:10px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(139,0,15,0),
      rgba(139,0,15,.10)
    );

  border-bottom:
    1px solid rgba(192,192,192,.07);
}


.velora-oro-shell__chart svg {
  display:block;

  width:100%;
  height:100%;
}


.velora-oro-shell__chart-line {
  fill:none;

  stroke:#EB0616;

  stroke-width:2.2;

  stroke-linecap:round;
  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 0 4px rgba(235,6,22,.30)
    );
}


/* ==============================
   ORO DATA ROWS
   ============================== */

.velora-oro-shell__rows {
  display:flex;

  flex-direction:column;

  gap:6px;
}


.velora-oro-shell__row {
  box-sizing:border-box;

  display:grid;

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

  align-items:center;

  gap:8px;

  width:100%;
  min-height:36px;

  padding:0 11px;

  background:#101116;

  border:
    1px solid rgba(192,192,192,.12);

  border-radius:9px;
}


.velora-oro-shell__check {
  display:grid;

  place-items:center;

  width:17px;
  height:17px;

  background:#8B000F;

  color:#FFFFFF;

  border-radius:6px;

  font-size:9px;
  font-weight:900;
}


.velora-oro-shell__row-label {
  overflow:hidden;

  color:#C0C0C0;

  font-size:8px;
  font-weight:700;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.velora-oro-shell__row strong {
  color:#FFFFFF;

  font-size:9px;
  font-weight:900;

  white-space:nowrap;
}


.velora-oro-shell__row.is-muted {
  opacity:.55;
}


.velora-oro-shell__row.is-muted
.velora-oro-shell__check {
  background:#1E1E22;

  border:
    1px solid rgba(192,192,192,.15);
}


/* ==============================
   PURCHASE PROGRESS
   ============================== */

.velora-oro-shell__progress {
  margin:
    9px
    2px
    11px;
}


.velora-oro-shell__progress-head {
  display:flex;

  align-items:center;
  justify-content:space-between;

  margin-bottom:5px;

  color:#C0C0C0;

  font-size:6.5px;
  font-weight:750;
}


.velora-oro-shell__track {
  width:100%;
  height:5px;

  overflow:hidden;

  background:
    rgba(192,192,192,.15);

  border-radius:999px;
}


.velora-oro-shell__track span {
  display:block;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #8B000F,
      #EB0616
    );

  border-radius:999px;
}


/* ==============================
   PRICE + ACTIVATE
   ============================== */

.velora-oro-shell__bottom {
  display:grid;

  grid-template-columns:
    .95fr
    1.05fr;

  gap:9px;
}


.velora-oro-shell__price {
  display:flex;

  align-items:center;

  min-height:50px;

  padding:0 13px;

  background:#111217;

  border:
    1px solid rgba(192,192,192,.18);

  border-radius:11px;

  color:#FFFFFF;

  font-size:18px;
  font-weight:950;
}


.velora-oro-shell__activate {
  display:flex;

  align-items:center;
  justify-content:center;

  gap:7px;

  min-height:50px;

  padding:0 9px;

  color:#FFFFFF;

  background:
    linear-gradient(
      135deg,
      #8B000F,
      #EB0616
    );

  border:
    1px solid rgba(255,255,255,.05);

  border-radius:11px;

  box-shadow:
    0 8px 18px rgba(139,0,15,.19);

  font-size:9px;
  font-weight:950;

  cursor:pointer;
}


.velora-oro-shell__activate:disabled {
  opacity:.48;

  cursor:not-allowed;
}


.velora-oro-shell__activate svg {
  width:13px;
  height:13px;

  fill:none;

  stroke:#FFFFFF;

  stroke-width:1.8;
}


/* ==============================
   PHONE
   ============================== */

@media(max-width:390px) {

  .velora-oro-shell {
    padding:
      12px
      12px
      12px;

    border-radius:20px;
  }


  .velora-oro-shell__top {
    grid-template-columns:
      39px
      auto
      1fr
      83px;

    gap:7px;
  }


  .velora-oro-shell__icon {
    width:39px;
    height:39px;
  }


  .velora-oro-shell__days {
    min-width:74px;

    height:36px;

    padding:0 9px;
  }


  .velora-oro-shell__hourly {
    width:83px;
    height:41px;
  }


  .velora-oro-shell__chart {
    height:67px;
  }


  .velora-oro-shell__row {
    min-height:34px;
  }


  .velora-oro-shell__price,
  .velora-oro-shell__activate {
    min-height:47px;
  }

}