/* Subscription container styles */
.submanv2-subscriptions-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.submanv2-subscriptions-items-wrapper {
    display: grid;
    gap: 20px;
    padding: 16px;
    padding-bottom: 155px;
    background-color: var(--fw-white-050);
    align-items: start;
    overflow-y: auto;
    grid-auto-rows: min-content;
    width: 100%;
}


@media (min-width: 768px) {
    .submanv2-subscriptions-items-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .submanv2-subscriptions-items-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

.submanv2-subscription-card {
    height: fit-content;
    width: 100%;
    flex: none;
    display: block;
    overflow: hidden;
    color: var(--fw-black-450);
    background-color: var(--fw-white-050);
    border: 1px solid var(--fw-white-200);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}

.submanv2-subscription-top-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--fw-white-050);
    padding: 15px 10px;
    margin-bottom: 10px;
    min-height: 125px;
}

.submanv2-subscription-bottom-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 0px 10px;
}








/* ////////// INFO CONTAINER ////////// */

.submanv2-info-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    /* padding-top: 10px; */
    margin: 0px 0px 10px 0px;
}




.submanv2-subscription-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}

.submanv2-subscription-header-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.submanv2-subscription-header-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.submanv2-past-subscription{
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 0.70rem;
    color: var(--fw-black-450);
}

.submanv2-tier-name {
    font-size: 1.0rem;
    color: var(--fw-black-400);
    font-weight: bold;
    text-transform: capitalize;
}


.price-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.initial-group,
.recurring-group {
    display: flex;
    flex-direction: column;
}

.submanv2-status{
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
    font-size: 0.75rem;
}

.submanv2-status.active {
    background-color: var(--green-150);
    color: var(--green-500);
}

.submanv2-status.cancelled {
    background-color: #e0e5e9;
    color: #1a1d1f;
}

.submanv2-status.expired {    
    background-color: var(--red-150);
    color: var(--red-500);
}

.submanv2-price-info {
    width: 100%;
    font-size: 0.80rem;
    /* margin-bottom: 5px; */
}

.submanv2-time-remaining {
    width: 100%;
    font-weight: bold;
    font-size: 0.80rem;
}

.submanv2-updated-at {
    width: 100%;
    font-size: 0.7rem;
    color: var(--fw-black-450)

}





.cancel-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px;
}

.cancel-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--fw-black-000);
}

.cancel-pretext {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--fw-black-400);
}

.cancel-description {
    color: var(--fw-black-400);
}
































.subscription-plans-container {
    /* background: var(--fw-black-000); */
  }
  
  .plan-card {
    background: var(--fw-white-000);
    border: 1px solid var(--primary-200);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    transition: box-shadow 0.2s;
  }
  
  .plan-card:hover {
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  }
  
  .plan-tier-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--fw-black-100);
    margin-bottom: 4px;
    text-transform: capitalize;
  }
  
  .plan-price-section {
    display: flex;
    gap: 32px;
    margin-bottom: 8px;
  }
  
  .plan-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .plan-price-amount {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-350);
  }
  
  .plan-price-period {
    font-size: 0.95rem;
    color: var(--primary-300);
}

.plan-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px 0;
  }
  
  .plan-feature-item {
    font-size: 0.8rem;
    color: var(--fw-black-400);
    margin-bottom: 2px;
    padding-left: 1.2em;
    position: relative;
  }
  
  .plan-feature-item::before {
    content: "✓";
    color: #38a169;
    position: absolute;
    left: 0;
    font-size: 1rem;
  }
  
  .sumbv2-plan-menu {
    align-self: stretch;
    margin-top: 8px;
  }