/* ==========================================================================
   Home Hero Component Styles
   ========================================================================== */

.home-hero-section {
  background-color: var(--color-signal-indigo) !important;
}

/* Grid Overlay Background */
.home-hero-section .hero-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
}

/* Domain Search Bar Styling */
.home-hero-section .input-group {
  background-color: #122846 !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.home-hero-section .form-control::placeholder {
  color: #94a3b8;
}

.home-hero-section .form-control:focus {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Showcase Card & Floating Background Elements */
.home-hero-section .hero-pricing-showcase {
  width: 100%;
  max-width: 400px;
  padding: 15px 0;
}

.home-hero-section .hero-price-card {
  background-color: #122846 !important;
  border: 2px solid var(--color-ember) !important;
  border-radius: 1.75rem !important;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.35) !important;
}

.home-hero-section .bg-floating-card {
  width: 280px;
  height: 70px;
  background-color: #0d1e36;
  border: 1px solid var(--color-indigo-border);
  border-radius: 1.25rem !important;
  z-index: 1;
  padding-right: 1.5rem !important;
}

.home-hero-section .card-top {
  top: 40px;
  right: -45px;
}

.home-hero-section .card-bottom {
  bottom: 40px;
  right: -45px;
}

.home-hero-section .bg-floating-card .dot {
  width: 12px;
  height: 12px;
}

.home-hero-section .bg-indigo-muted {
  background-color: rgba(255, 255, 255, 0.15) !important;
}