/* Make the card relative */
.pricing-list__item {
    position: relative;
    padding-bottom: 50px; /* space for the price - adjust as needed */
    box-sizing: border-box;
}

/* Price anchored at the bottom, horizontally centered */
.pricing-list__price {
    position: absolute;
    bottom: 15px;         /* distance from bottom edge */
    left: 50%;            
    transform: translateX(-50%);
    text-align: center;
    width: auto;          /* shrink to content width */
}

/* Mobile fix so description doesn't overlap price */
@media (max-width: 768px) {

  .pricing-list__item {
      padding-bottom: 80px; /* increase space for price on phones */
  }

}
.pricing-list__description {
    column-count: 3;
    column-gap: 50px;
    width: fit-content;
    margin: 0 auto;
    text-align: left;
}
@media (max-width: 768px) {
    .pricing-list__description {
        column-count: 1;
    }
/* Keep the price on one line */
.pt-pricing-card .price {
    white-space: nowrap;   /* Prevents wrapping */
    display: block;
    font-size: 1.5em;      /* Adjust size as needed */
    margin-bottom: 10px;   /* Adds space below the price */
}

/* Optional: widen the card itself */
.pt-pricing-card {
    max-width: 400px;      /* Make card wider */
    width: 100%;
}
/* Widen the pricing card content */
.pt-pricing-card .pt-pricing-inner {
    width: 100%;           /* Ensure inner content can expand */
    min-width: 250px;      /* Minimum width so price fits */
}

/* Keep the price on one line */
.pt-pricing-card .price {
    white-space: nowrap;   /* Prevent wrapping */
    display: inline-block; /* Make it inline so it stays on one line */
}
/* Widen the entire pricing card */
.pt-pricing-card {
    max-width: 450px;       /* Increase overall width */
    width: 100%;
}

/* Ensure inner content can expand */
.pt-pricing-card .pt-pricing-inner {
    display: flex;          /* Make inner content flexible */
    flex-direction: column; /* Stack title, price, description vertically */
    align-items: flex-start; /* Keep items aligned nicely */
}

/* Keep the price on one line */
.pt-pricing-card .price {
    white-space: nowrap;    /* Prevent wrapping */
    display: inline-block;  /* Stay on one line */
    margin-bottom: 10px;    /* Space below price */
}
/* Force the pricing card to be wider and flexible */
.pt-pricing-card {
    width: 100% !important;          /* Take full container width */
    max-width: 500px !important;     /* Allow cards to be wider */
    box-sizing: border-box;          /* Avoid padding issues */
}

/* Ensure inner container can expand */
.pt-pricing-card .pt-pricing-inner {
    display: block !important;
    width: 100% !important;
}

/* Keep the price on one line */
.pt-pricing-card .price {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 1.5em;                /* Adjust to fit design */
    line-height: 1.2;                /* Reduce overlap */
}
/* 1. Force the pricing row to display cards in a flexible grid */
.pt-pricing-row {
    display: flex !important;
    flex-wrap: wrap !important;       /* Allow wrapping if screen too small */
    justify-content: space-between !important;
}

/* 2. Force each pricing card to take a fixed percentage of the row */
.pt-pricing-card {
    width: 23% !important;            /* 4 cards per row with spacing */
    max-width: 500px !important;      /* Allow card to expand */
    box-sizing: border-box !important;
    margin-bottom: 20px !important;   /* Space between rows */
}

/* 3. Ensure the inner content can expand fully */
.pt-pricing-card .pt-pricing-inner {
    display: block !important;
    width: 100% !important;
}

/* 4. Keep the price on one line */
.pt-pricing-card .price {
    white-space: nowrap !important;
    display: inline-block !important;
    font-size: 1.5em !important;      /* Adjust as needed */
    line-height: 1.2 !important;      /* Prevent overlap with description */
    margin-bottom: 10px !important;
}

/* 5. Optional: keep description below price without overlap */
.pt-pricing-card .description {
    display: block !important;
}
.proteus-price-table .price-table__features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}
@media (max-width: 768px) {
  .pricing-list__description {
    column-count: 2;
    column-gap: 30px;
  }
}
.pricing-list__description{
    display: inline-block;
    text-align: left;
}

.pricing-list{
    text-align: center;
}
.pricing-list__description{
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left;
}
@media (min-width: 769px) {
  .pricing-list__description{
    width: fit-content;
    margin: 0 auto;
    text-align: left;
  }
}
.pricing-list__description {
    display: inline-block;
}

.pricing-list__item {
    text-align: center;
}
@media (max-width: 768px) {
  .panel-row-style {
    background-position: 75% center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}
@media (max-width: 768px) {
  .panel-row-style {
    background-size: cover !important;
    background-position: 75% center !important;
    background-repeat: no-repeat !important;
  }

  /* KEY FIX FOR COLUMNS */
  .panel-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  .panel-grid-cell {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media (max-width: 768px) {
  [class*="panel-row-style-for-"] {
    background-size: cover !important;
    background-position: 75% center !important;
    background-repeat: no-repeat !important;
  }