/* BLTZMAIL_DASHBOARD_BILLING_MODULE_V3 */

#billing{
  scroll-margin-top:100px;
}

.bltz-plan-panel{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#080808;
}

.bltz-plan-head{
  padding:17px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  border-bottom:1px solid var(--line-soft);
}

.bltz-plan-kicker{
  display:block;

  color:#6e6e6e;

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

  letter-spacing:1.8px;

  text-transform:uppercase;
}

.bltz-plan-head h3{
  margin:6px 0 0;

  color:#f2f2f2;

  font-size:21px;
  line-height:1;

  font-weight:520;

  letter-spacing:-.65px;
}

.bltz-plan-status{
  padding:6px 9px;

  border:1px solid #303030;
  border-radius:999px;

  color:#cecece;

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

  letter-spacing:.8px;
}

.bltz-plan-stats{
  padding:10px;

  display:grid;

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

  gap:8px;
}

.bltz-plan-stat{
  min-height:88px;

  padding:12px;

  border:1px solid var(--line-soft);
  border-radius:13px;

  background:#0c0c0c;
}

.bltz-plan-stat span{
  display:block;

  color:#686868;

  font-size:7px;

  letter-spacing:1px;

  text-transform:uppercase;
}

.bltz-plan-stat strong{
  display:block;

  margin-top:12px;

  color:#eeeeee;

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

  line-height:1;

  letter-spacing:-.5px;
}

.bltz-plan-stat small{
  display:block;

  margin-top:5px;

  color:#626262;

  font-size:7px;
}


.bltz-plan-details{
  display:grid;

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

  border-top:1px solid var(--line-soft);
}

.bltz-plan-detail{
  min-height:54px;

  padding:10px 12px;

  display:flex;
  flex-direction:column;
  justify-content:center;

  gap:4px;

  border-right:1px solid var(--line-soft);
}

.bltz-plan-detail:last-child{
  border-right:0;
}

.bltz-plan-detail span{
  color:#656565;

  font-size:7px;

  letter-spacing:.9px;

  text-transform:uppercase;
}

.bltz-plan-detail strong{
  color:#d0d0d0;

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

  overflow-wrap:anywhere;
}


.bltz-plan-footer{
  min-height:49px;

  padding:9px 12px;

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

  gap:12px;

  border-top:1px solid var(--line-soft);
}

.bltz-plan-summary{
  color:#707070;

  font-size:8px;
}

.bltz-plan-action{
  min-height:31px;

  padding:0 11px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #303030;
  border-radius:9px;

  background:#101010;

  color:#dadada;

  font-size:8px;
}


.bltz-order-panel{
  margin-top:10px;

  padding:16px;

  border:1px solid var(--line);
  border-radius:17px;

  background:#080808;
}

.bltz-order-head{
  margin-bottom:10px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:14px;
}

.bltz-order-head h3{
  margin:6px 0 0;

  color:#ededed;

  font-size:17px;
  font-weight:520;

  letter-spacing:-.4px;
}

.bltz-order-count{
  padding:5px 8px;

  border:1px solid var(--line-soft);
  border-radius:999px;

  color:#707070;

  font-size:7px;
}


.bltz-order-row{
  min-height:55px;

  padding:10px 0;

  display:grid;

  grid-template-columns:
    minmax(170px,1.45fr)
    minmax(80px,.65fr)
    minmax(100px,.8fr)
    minmax(75px,.55fr);

  gap:12px;

  align-items:center;

  border-top:1px solid var(--line-soft);
}

.bltz-order-main{
  min-width:0;
}

.bltz-order-main strong{
  display:block;

  color:#d8d8d8;

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

  overflow-wrap:anywhere;
}

.bltz-order-main span{
  display:block;

  margin-top:4px;

  color:#666;

  font-size:7px;
}

.bltz-order-cell span{
  display:block;

  color:#626262;

  font-size:6px;

  letter-spacing:.8px;

  text-transform:uppercase;
}

.bltz-order-cell strong{
  display:block;

  margin-top:4px;

  color:#c8c8c8;

  font-size:8px;
  font-weight:520;
}

.bltz-order-state{
  display:inline-flex !important;

  width:max-content;

  padding:4px 7px;

  border:1px solid var(--line-soft);
  border-radius:999px;

  font-size:7px !important;

  letter-spacing:.6px;
}

.bltz-order-empty{
  padding:15px 0 3px;

  border-top:1px solid var(--line-soft);

  color:#696969;

  font-size:8px;
}

.bltz-billing-error{
  margin-top:10px;

  padding:10px 12px;

  border:1px solid var(--line);
  border-radius:11px;

  background:#0c0c0c;

  color:#9b9b9b;

  font-size:8px;
}


@media(max-width:760px){

  .bltz-plan-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .bltz-plan-details{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .bltz-plan-detail:nth-child(2){
    border-right:0;
  }

  .bltz-plan-detail:nth-child(-n+2){
    border-bottom:1px solid var(--line-soft);
  }

  .bltz-order-row{
    grid-template-columns:
      1fr 1fr;
  }
}


@media(max-width:480px){

  .bltz-plan-head{
    padding:14px;
  }

  .bltz-plan-head h3{
    font-size:19px;
  }

  .bltz-plan-stats{
    padding:8px;

    gap:7px;
  }

  .bltz-plan-stat{
    min-height:80px;

    padding:10px;
  }

  .bltz-plan-stat strong{
    margin-top:10px;

    font-size:17px;
  }

  .bltz-plan-detail{
    padding:9px 10px;
  }

  .bltz-plan-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .bltz-order-panel{
    padding:13px;
  }

  .bltz-order-row{
    grid-template-columns:1fr;

    gap:7px;
  }
}