/* Main container */
 .membership-container {
   min-height: 100vh;
   background-color: var(--white);
   padding: var(--spacing-2xl) var(--spacing-md);
 }

 .membership-wrapper {
   max-width: 69rem;
   margin: 0 auto;
 }

 /* Header */
 .membership-container .header {
   text-align: center;
   margin-bottom: var(--spacing-2xl);
   max-width: 800px;
   margin: 0 auto;
 }

 .membership-container .header h1 {
   font-size: var(--font-3xl);
   font-weight: var(--font-weight-bold);
   color: var(--primary-blue);
   margin-bottom: var(--spacing-sm);
   font-family: var(--font-family-primary);
 }

 .membership-container .header p {
   color: var(--text-secondary);
   font-size: var(--font-base);
 }

 /* Progress section */
 .membership-container .progress-section {
   margin-bottom: var(--spacing-2xl);
 }

 .membership-container .progress-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--spacing-sm);
 }

 .membership-container .progress-text {
   font-size: var(--font-sm);
   color: var(--text-secondary);
   font-weight: var(--font-weight-medium);
 }

 .membership-container .progress-container {
   width: 100%;
   height: var(--spacing-md);
   background-color: var(--border-light);
   border-radius: var(--spacing-md);
   overflow: hidden;
   /* box-shadow: var(--box-shadow-sm); */
 }

 .membership-container .progress-bar {
   height: 100%;
   background: var(--primary-blue);
   transition: width 0.4s ease;
   border-radius: var(--spacing-xs);
 }

 /* Card */
 .membership-container .card {
   /* border: 1px solid var(--border-medium) !important; */
   /* border-radius: var(--spacing-base); */
   background-color: var(--white);
   /* box-shadow: var(--box-shadow-lg); */
   overflow: hidden;
   /* padding: var(--spacing-lg) 70px; */
   padding: 0 70px;
   width: 100%;
   box-shadow: none !important;
 }



 .membership-container .card-header {
   background-color: var(--white) !important;
   border: 1px solid var(--border-medium) !important;
   padding: var(--spacing-md) !important;
   border-radius: var(--spacing-base);
 }

  @media screen and (max-width: 768px) {
   .membership-container .card {
     padding: 0;
     width: 100%;
   }
 .membership-container .card-header {
  padding: var(--spacing-lg) !important;
 }
 }
 .membership-container .card-header h2 {
   font-size: var(--font-xl);
   font-weight: var(--font-weight-bold);
   color: var(--primary-blue);
   margin-bottom: var(--spacing-sm);
   margin-top: 0;
   font-family: var(--font-family-primary);
 }

 .membership-container .card-header p {
   color: var(--text-secondary);
   font-size: var(--font-sm);
   line-height: 1.5;
 }


 /* Step content */
 .membership-container .step-content {
   padding: var(--spacing-lg) 0;
 }

 .membership-container .form-check label {
   color: var(--text-dark);
 }


 /* Placeholder content */
 .membership-container .placeholder-content {
   padding: var(--spacing-lg) 0;
 }

 .placeholder-text {
   color: var(--text-secondary);
   font-size: var(--font-base);
   font-style: italic;
 }

 /* Navigation */
 .membership-container .navigation {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: var(--spacing-2xl);
 }

 /* Button styles */
 .membership-container .button {
   background-color: var(--orange-primary);
   color: var(--white);
   padding: var(--spacing-base) var(--spacing-xl);
   border-radius: var(--spacing-sm);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-base);
   cursor: pointer;
   transition: all 0.3s ease;
   border: none;
   min-width: 6rem;
   font-family: var(--font-family-base);
   /* box-shadow: var(--box-shadow-sm); */
 }

 .membership-container .button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
 }

 .membership-container .button:hover:not(:disabled) {
   transform: translateY(-2px);
   box-shadow: var(--box-shadow-md);
 }

 .membership-container.button-default {
   background: var(--orange-primary);
   color: var(--white);
 }

 .membership-container .button-default:hover:not(:disabled) {
   opacity: 0.5;
 }

 .membership-container .button-outline {
   background-color: var(--white);
   color: var(--primary-blue);
   border: 2px solid var(--primary-blue);
   line-height: 100%;
 }

 .membership-container .button-outline:hover:not(:disabled) {
   background-color: var(--primary-blue);
   color: var(--white);
 }

 /* Responsive */
 @media (max-width: 640px) {
   .membership-container {
     padding: var(--spacing-md) var(--spacing-sm);
   }

   .membership-container.header h1 {
     font-size: var(--font-2xl);
   }

   .membership-container .card-header,
   .card-content {
     padding: var(--spacing-lg);
   }

   .membership-container.button {
     padding: var(--spacing-base) var(--spacing-lg);
     min-width: 5rem;
   }
 }

 @media (max-width: 480px) {
   .membership-container .header h1 {
     font-size: var(--font-xl);
   }

   .membership-container.card-header h2 {
     font-size: var(--font-lg);
   }

   .membership-container .navigation {
     gap: var(--spacing-md);
   }
 }

 /* select plan is css start  */

 .review-text {
   margin: 0 !important;
   font-size: var(--font-xs) !important;
 }

 .review-text a {
   color: var(--text-secondary) !important;
   text-decoration: underline !important;
 }

 .plans-wrapper {
   display: flex;
   gap: var(--spacing-lg);
   /* flex-wrap: wrap; */
   flex-wrap: nowrap;
   justify-content: flex-start;
   overflow-x: auto;
 }

 input[type=date] {
   margin-bottom: 20px;
 }

 input[type=tell] {
   margin-bottom: 20px;
 }

 .form-select {
   margin-bottom: 20px;
 }

 .plan-box {
   background-color: var(--white);
   border-radius: 8px;
   padding: var(--spacing-md);
   width: 308px;
   /* flex: 0 0 308px; */
   border: 1px solid var(--border-light);
   box-shadow: var(--box-shadow-sm);
   position: relative;
   display: flex !important;
   flex-direction: column;
 }
  .plan-box ul{
    list-style: none;
  }

 .plan-box.selected {
   border: 2px solid var(--orange-primary);
 }

 .plan-header {
   margin-bottom: var(--spacing-sm);
 }

 .plan-annual {
   font-size: var(--font-sm);
   color: var(--text-secondary);
   margin-bottom: var(--spacing-xs);
   font-weight: var(--font-weight-regular);
 }

 .plan-title {
   font-size: var(--font-sm);
   font-weight: var(--font-weight-bold);
   color: var(--text-dark);
   line-height: 1.3;
 }

 .plan-pricing {
   text-align: right;
   margin-bottom: var(--spacing-sm);
 }

 .plan-price {
   font-size: var(--font-lg);
   font-weight: var(--font-weight-bold);
   color: var(--text-dark);
   margin-bottom: var(--spacing-xs);
 }

 .plan-period {
   font-size: var(--font-sm);
   color: var(--text-secondary);
   white-space: nowrap;
 }

 /* .plan-features {
  margin-bottom: var(--spacing-2xl);
} */

 .feature-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: var(--spacing-sm);
   font-size: var(--font-sm);
   color: var(--text-primary);
   line-height: 1.4;
 }

 .feature-bullet {
   width: 4px;
   height: 4px;
   background-color: var(--orange-primary);
   border-radius: 50%;
   margin-top: 8px;
   margin-right: var(--spacing-base);
   flex-shrink: 0;
 }

 .plan-button {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--border-medium);
   border-radius: 6px;
   font-size: var(--font-xs);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   background-color: var(--white);
   color: var(--text-primary);
   transition: background-color 0.3s ease;
   margin-top: auto;
 }

 .plan-button:hover {
   background-color: var(--orange-primary);
   color: var(--white);

 }

 .plan-button.selected {
   border: none;
   background-color: var(--orange-primary);
   color: var(--white);
 }

 .plan-button.selected:hover {
   background-color: var(--orange-primary);
 }

 .plan-next {
   display: flex;

 }

 .footer-text {
   margin-top: var(--spacing-xl);
   font-size: var(--font-xs);
   color: var(--text-secondary);
   line-height: 1.5;
   text-align: left;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
   .plans-wrapper {
     flex-direction: column;
     align-items: center;
   }

   /* .plan-box {
     width: 100%;
     max-width: 350px;
   } */

   .membership-container {
     padding: var(--spacing-base);
   }
 }

 /* select plan is css end  */

 /* custom css add this  */

 .discount-input {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
 }

 .discount-input input[type=text] {
   margin-bottom: 0;
 }

 .payment-list {
   border: 1px solid var(--border-medium);
   margin-top: var(--spacing-md);
   padding: var(--spacing-md);
   border-radius: var(--spacing-sm);
 }

 .payment-plan-add {
   display: flex;
   align-items: center;
   margin: 0 !important;
 }

 .payment-plan-add span {
   margin-left: auto;
 }

 .payment-plan-add.total-payment {
   font-weight: var(--font-weight-bold);
   color: var(--text-dark) !important;
   padding-top: var(--spacing-sm);
   border-top: 1px solid var(--border-medium);
   margin-top: var(--spacing-md) !important;
 }

 /* custom css add this  */