/* =========================================================
   Virtual Pricing Info (wrapper intro)
   ========================================================= */
.virtual-pricing-info {
  margin: 80px auto 0 !important;
  max-width: 90%;
  overflow: hidden;
}

.virtual-pricing-info__intro{
  margin-bottom: 26px;
}

.virtual-pricing-info__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  color: #111;
  line-height: 1.05;
}

.virtual-pricing-info__copy p:last-child{
  margin-bottom: 0;
}

/* =========================================================
   Chart container
   ========================================================= */
.virtual-pricing-info .pricing-info__sidebar-bottom{
  border: 2px solid #52287e;
  border-radius: 30px;
  background: #fff;
}

.virtual-pricing-info .chart-title{
  background: url("/wp-content/uploads/2025/04/sbhpp-purple-bg-d973d1.svg") center / cover no-repeat;
  padding: 18px 28px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  border-radius: 30px 30px 0 0;
}

/* =========================================================
   Main row
   ========================================================= */
.virtual-pricing-info .pricing-info__row{
  --divider-color: rgba(82, 196, 199, 0.85);
  --divider-width: 2px;
  --divider-gap: 22px;

  display: grid;
  grid-template-columns: 300px 1fr 220px;
  align-items: stretch;
}

/* =========================================================
   Left logo column
   ========================================================= */
.virtual-pricing-info .pricing-info__section-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 26px;
}

.virtual-pricing-info .pricing-info__section-header::after{
  content: "";
  position: absolute;
  right: 0;
  top: var(--divider-gap);
  bottom: var(--divider-gap);
  width: var(--divider-width);
  background: var(--divider-color);
}

.virtual-pricing-info .pricing-info__icon{
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   Tier columns
   ========================================================= */
.virtual-pricing-info .pricing-info__columns{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}

.virtual-pricing-info .pricing-info__cell{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 30px 18px;
}

.virtual-pricing-info .pricing-info__cell + .pricing-info__cell::before{
  content: "";
  position: absolute;
  left: 0;
  top: var(--divider-gap);
  bottom: var(--divider-gap);
  width: var(--divider-width);
  background: var(--divider-color);
}

.virtual-pricing-info .pricing-info__cell h5{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #111;
}

.virtual-pricing-info .pricing-info__cell p{
  margin: 6px 0 10px;
  font-size: 18px;
  color: #111;
}

.virtual-pricing-info .pricing-info__price-box{
  display: flex;
  justify-content: center;
}

.virtual-pricing-info .pricing-info__price-box h5{
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: #52287e;
}

/* =========================================================
   CTA column
   ========================================================= */

.virtual-pricing-info .pricing-info__cta{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* remove side padding */
}

/* divider before CTA */
.virtual-pricing-info .pricing-info__cta::before{
  content: "";
  position: absolute;
  left: 0;
  top: var(--divider-gap);
  bottom: var(--divider-gap);
  width: var(--divider-width);
  background: var(--divider-color);
}

/* ensure button centers perfectly */
.virtual-pricing-info .pricing-info__cta .purple-cart-btn{
  margin: auto;
}



/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 990px) {
  .virtual-pricing-info .pricing-info__row{
    grid-template-columns: 1fr;
  }

  .virtual-pricing-info .pricing-info__section-header{
    padding: 18px 16px;
  }

  .virtual-pricing-info .pricing-info__section-header::after{
    display: none;
  }

  .virtual-pricing-info .pricing-info__columns{
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, 1fr);
  }

  .virtual-pricing-info .pricing-info__cell{
    padding: 18px 12px;
  }

  .virtual-pricing-info .pricing-info__cell::before{
    display: none;
  }

  .virtual-pricing-info .pricing-info__cell:nth-child(2n)::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: var(--divider-gap);
    bottom: var(--divider-gap);
    width: var(--divider-width);
    background: var(--divider-color);
  }

  .virtual-pricing-info .pricing-info__cell:nth-child(n+3){
    border-top: 2px solid rgba(82, 196, 199, 0.85);
  }

  .virtual-pricing-info .pricing-info__cta{
    padding: 0 16px 18px;
  }

  .virtual-pricing-info .pricing-info__cta::before{
    display: none;
  }

  .virtual-pricing-info .pricing-info__columns--virtual .pricing-info__cell:nth-child(3){
    grid-column: 1 / -1;
  }

  .virtual-pricing-info .pricing-info__icon {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .virtual-pricing-info__title {
    font-size: 22px;
  }
  .virtual-pricing-info .pricing-info__icon {
    width: 100%;
  }
  .virtual-pricing-info .pricing-info__cell h5 {
    font-size: 16px;
  }
  .virtual-pricing-info .pricing-info__cell p {
    font-size: 14px;
  }
  .virtual-pricing-info .pricing-info__price-box h5 {
    font-size: 22px;
  }
}