.pricing {
  column-gap: var(--rem-400);
  /* padding: 0 1rem; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr ;
  grid-template-columns: repeat(auto-fit, minmax(341px, 1fr));
  /* place-items: center; */
  padding: 1rem;
}

.pricing > :not(:first-child) {
  border: none;
}


.pricing-custom {
  margin: var(--rem-500) 1rem;
  display: flex;
  flex-direction: column;     
  align-items: center;    
  gap: var(--rem-500);   
}

.pricing-custom p {
  text-align: center;
}

.preview {
  padding: 0 var(--rem-400)!important;
}


 .pricing-box {
  width: 100%;
  border: none !important;
  padding: 2rem var(--rem-400) !important;
  background-color: var(--clr-background-2);
  border-radius: var(--border-radius-500);
  min-width: 341px;
  text-align: left;
  display: grid;
  grid-template-rows: 2fr 2fr;
  
}





.pricing-box-top {
  
  height: 100%;
  display: flex;
  flex-direction: column;
  align-self: center;
  
  padding-bottom: var(--rem-100);
    position: relative;
  overflow-anchor: none;
}

.pricing-box-top > :last-child, .pricing-box-top > :last-child  {
  margin-top: auto;
}

.pricing-box-bottom {
  display: flex;
  flex-direction: column;
  /* border-top: 1px solid var(--clr-white); */
  padding-top: 1rem;
  height: 100%; 
}

.pricing-box-bottom > :last-child, .pricing-box-top > :last-child  {
  margin-top: auto;
}

.pricing-box-bottom button, .pricing-box-bottom a {


  margin: 0 auto;
}



.pricing-box h4 {
  font-size: var(--fs-300);
  width: 100%;
}



.pack-price {
  font-size: var(--fs-500);
  font-weight: 500;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.pack-price-extra {
  font-weight: 500;
  
}

.pack-price span {
  font-weight: 200;
  font-size: var(--fs-100);
}






.feature-list {

  list-style: none;
  padding: 0;
  margin: 0rem 0 1rem 0;
  display: grid;
  column-gap: 1rem;
  line-height: inherit;
}

.feature-list li {
  display: flex;
  font-weight: 200;
  font-size: var(--fs-200);
  align-items: center;
  align-items: first baseline;
  padding: 0;

}

.feature-list li * {
  font-size: var(--fs-200);
}




.pricing-box .feature-list svg {
  transform: translateY(6px);
  margin-right: 0.414rem;
  fill: var(--clr-dark);
  flex-shrink: 0; 
  
}



.pack-text {
  text-align: center;
  
}



/* 1. Default state: semi-transparent */
.pack-options::before {
  content: "POPULAR";
  position: absolute;
  top: -1.414rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--clr-accent);
  color: white;
  padding: 0.1rem 0.41rem;
  font-size: var(--fs-100);
  font-weight: 500;
  border-radius: var(--border-radius);
  
  opacity: 0.5; /* Default opacity */
  transition: opacity 0.2s ease;
}

/* 2. Full opacity state: when the 2nd child has the .selected class */
.pack-options:has(.pack-option:nth-child(2).selected)::before {
  opacity: 1;
}





.pack-options {
  position: relative;
  overflow-anchor: none;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr 1fr;
  
  margin: 3rem 0;
  height: 4rem;
  width: calc(100% + 2rem);
  transform: translateX(-1rem);
  gap: 0.57rem;
  
}

.pack-option {
  cursor: pointer;
  border-radius: var(--border-radius-350);
  font-weight: 500;
  font-size: var(--fs-400);
  
   transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  line-height: 1;
  padding: 0.414rem 1rem;
  text-align: center;

   display: flex;
  justify-content: center;
  align-items: center;    
  border: 1px solid transparent;
  scroll-margin: 0;
}

.pack-option div {
  font-size: var(--fs-200);
  font-weight: 300;
}



.pack-option.selected {
  
  border-color:  var(--clr-accent);
  
  

}

.pack-option.selected span {
    color: var(--clr-green);
}










.credit-pack-button {
    background-color: var(--clr-dark);
}

.sub-button {
  display: block;

  padding: 1rem 0;
  text-decoration: none;

  border: 1px solid var(--clr-light);
  color: var(--clr-dark);
  background-color: white;
  
  font-weight: 500;
}





@media(max-width: 1111px) {



}

@media (max-width: 768px) {

}

@media (max-width: 400px) {
 .pricing-box { 
   padding: 1rem;
 }

 .billing-toggle {
   width: calc(100% + 2rem);
  transform: translateX(-1rem);
   
  }

}