.plan-interval--active {
  @apply bg-blue-500 text-white;
}


.plan-card {
  @apply relative p-3 min-w-xs max-w-xs sm:p-4 lg:p-6 flex flex-col hover:border-blue-500/50 bg-gradient-to-br dark:from-gray-800 dark:to-gray-900  rounded-2xl border-2;
}

.plan-card-submit-button {
  @apply w-full block text-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 sm:py-3 px-4 sm:px-6 rounded-lg transition-colors mb-4 sm:mb-6 text-sm sm:text-base;
}

.plan-card-submit-button--update {
  @apply bg-black dark:bg-white text-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200;
}


.plan-card_header {
  @apply mb-4 sm:mb-6 text-center;
}

.plan-card--popular {
  @apply  border-orange-500/60 md:transform hover:border-orange-500/50 md:scale-105 md:hover:scale-110 transition-all duration-300 shadow-2xl;
}

.plan-card-submit-button--popular {
  @apply bg-orange-600 hover:bg-orange-700;
}

.plan-interval-button--normal {
  @apply bg-blue-500 text-white;
}

.plan-interval-button--popular {
  @apply bg-orange-500 text-white;
}

.plan-interval-button {
  @apply flex-1 py-1.5 sm:py-2 px-3 sm:px-4 text-xs sm:text-sm font-medium rounded-md transition-colors;
}


.plan-card-submit-button:disabled {
  @apply bg-gray-500 dark:bg-gray-700 text-white cursor-not-allowed;
}