/* Billing Cycle Buttons - Modern Gaming Style */
/* Clean implementation without conflicts */

.field-container .form-group label {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.1rem;

  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #ffffff, #83f0c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Reset all default button styles first - with higher specificity */
.pricing-cycle-btn.btn.btn-default,
.pricing-cycle-btn {
  /* Reset everything */
  all: unset !important;

  /* Apply our custom styling using order summary button gradient */
  display: inline-block !important;
  width: auto !important;
  min-width: 160px !important;
  background: #1e113c !important; /* Deep Violet base for unselected */
  border: 1px solid #59499d !important; /* Simple Game Hosting Purple border */
  border-radius: 8px !important;
  color: #ffffff !important; /* White from system.json */
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 1.25rem 1.75rem !important;
  margin-right: 1rem !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(10, 6, 16, 0.2) !important; /* Subtle shadow */
  text-decoration: none !important;
  line-height: 1.3 !important;
  vertical-align: top !important;
}

/* Remove complex effects - keep it simple */

/* Hover state - dull version of order summary gradient */
.pricing-cycle-btn.btn.btn-default:hover,
.pricing-cycle-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.6),
    rgba(99, 102, 241, 0.6)
  ) !important; /* Dulled gradient */
  border-color: #8b5cf6 !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Selected state - darker gradient by default */
.pricing-cycle-btn.btn.btn-default.btn-selected,
.pricing-cycle-btn.btn-selected {
  background: linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
  ) !important; /* Darker gradient for selected state */
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
}

.pricing-cycle-btn.btn.btn-default.btn-selected:hover,
.pricing-cycle-btn.btn-selected:hover {
  background: linear-gradient(
    135deg,
    #8b5cf6,
    #6366f1
  ) !important; /* Brighter gradient on hover */
  border-color: #8b5cf6 !important;
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5) !important;
}

/* Price text styling */
.pricing-cycle-btn p {
  margin: 0.5rem 0 0 0 !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.pricing-cycle-btn.btn-selected p {
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 600 !important;
}

/* Current price styling (for buttons without discounts) */
.pricing-cycle-btn .current-price {
  margin: 0.5rem 0 0 0 !important;
  font-size: 0.9rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.pricing-cycle-btn.btn-selected .current-price {
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 600 !important;
}

/* Discounted price styling */
.pricing-cycle-btn .discounted-price {
  margin: 0.5rem 0 0.25rem 0 !important;
  font-size: 1rem !important;
  color: #83f0c7 !important; /* Aquamarine for discounted price */
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(131, 240, 199, 0.3) !important;
}

.pricing-cycle-btn.btn-selected .discounted-price {
  color: #39f6f8 !important; /* Aqua when selected */
  text-shadow: 0 0 8px rgba(57, 246, 248, 0.4) !important;
}

/* Style for "first month" text within discounted price */
.pricing-cycle-btn .discounted-price {
  position: relative !important;
}

/* Target the "first month" text specifically */
.pricing-cycle-btn .discounted-price:contains("first month") {
  font-size: 1rem !important;
}

/* Use CSS to make "first month" smaller - we'll use a span for this */
.pricing-cycle-btn .period-text {
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
  margin-left: 0.25rem !important;
}

/* Original price styling (crossed out) */
.pricing-cycle-btn .original-price {
  margin: 0 !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  line-height: 1 !important;
}

.pricing-cycle-btn.btn-selected .original-price {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Style for the quarterly button with savings text */
.pricing-cycle-btn {
  position: relative !important;
}

/* Make SAVE 10% text stand out - using green/aqua accent */
.pricing-cycle-btn .save-text {
  color: #83f0c7 !important; /* Aquamarine accent from system.json */
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-shadow: 0 0 8px rgba(131, 240, 199, 0.4) !important;
  display: inline-block !important;
  animation: subtle-pulse 2s ease-in-out infinite !important;
}

.pricing-cycle-btn.btn-selected .save-text {
  color: #39f6f8 !important; /* Aqua accent when selected */
  text-shadow: 0 0 10px rgba(57, 246, 248, 0.5) !important;
}

/* Subtle pulse animation for the save text */
@keyframes subtle-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Focus state for accessibility */
.pricing-cycle-btn:focus {
  outline: none;
  box-shadow: 0 2px 8px rgba(10, 6, 16, 0.3), 0 0 0 3px rgba(131, 240, 199, 0.5); /* Aquamarine focus ring */
}

/* Active state */
.pricing-cycle-btn:active {
  transform: translateY(0);
}

/* Responsive design */
@media (max-width: 768px) {
  .pricing-cycle-btn.btn.btn-default,
  .pricing-cycle-btn {
    min-width: 140px !important;
    padding: 1rem 1.5rem !important;
    font-size: 0.95rem !important;
  }
}

@media (max-width: 480px) {
  .pricing-cycle-btn.btn.btn-default,
  .pricing-cycle-btn {
    min-width: 130px !important;
    padding: 0.875rem 1.25rem !important;
    font-size: 0.9rem !important;
    margin-right: 0.75rem !important;
  }

  .pricing-cycle-btn p {
    font-size: 0.8rem !important;
    margin: 0.375rem 0 0 0 !important;
  }
}