/* ==========================================================================
   Shared Hosting - Premium Dark Pricing Component Styles
   ========================================================================== */

/* Main Canvas Background */
.shared-pricing-section {
  background-color: var(--color-signal-indigo) !important; /* #1A365D */
}

.text-deep-indigo {
  color: var(--color-deep-indigo) !important;
}

.border-ember-light {
  border-color: rgba(255, 107, 44, 0.4) !important;
}

/* Card Elevation & Glow Effects */
.shared-pricing-section .pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.shared-pricing-section .pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.4) !important;
}

/* Featured Popular Plan Styling & Badge Offset */
.shared-pricing-section .popular-plan {
  padding-top: 3.5rem !important;
  box-shadow: 0 1rem 2.5rem rgba(255, 107, 44, 0.18) !important;
  border-color: var(--color-ember) !important;
}

.shared-pricing-section .popular-plan:hover {
  box-shadow: 0 1.5rem 3rem rgba(255, 107, 44, 0.28) !important;
}

.shared-pricing-section .popular-plan h4 {
  margin-top: 1rem !important;
}

/* Billing Cycle Switcher Toggle */
.shared-pricing-section .billing-toggle-btn {
  color: var(--color-indigo-subtle);
  border: none;
  background: transparent;
  transition: all 0.2s ease;
}

.shared-pricing-section .billing-toggle-btn.active {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}