/* Custom Styles - For Pricing Cards */

/* 1. Make the block a positioning context */
.pricing-block {
  position: relative;
}

/* 2. Style & position the badge */
.pricing-block .price-badge {
  position: absolute !important;
  top: -0.5rem;
  right: -0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 0.5rem 0.95rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* 1) Force flex layout on the CTA wrapper */
.pricing__body .pricing__ctas {
  display: flex !important;
  width: 100% !important;
  gap: 0.5rem !important;      /* space between buttons */
}

/* 2) Make both buttons share the space equally */
.pricing__body .pricing__ctas .btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* 3) But if there's only one button, stop it stretching and center it */
.pricing__body .pricing__ctas > .btn:only-child {
  flex: none !important;       /* disable stretch */
  width: auto !important;      /* size to its content */
  margin: 0 auto !important;   /* center in the flex container */
}

@media (max-width: 740px) {
  /* Stack the CTAs vertically again */
  .pricing__body .pricing__ctas {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* Make each button full‑width and reset centering margins */
  .pricing__body .pricing__ctas .btn {
    flex: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Carousel Slider Changes */
.carousel-slider .slick-list,
.carousel-slider .slick-track {
  overflow: visible !important;
}