/* 10X Brand Colors */
:root {
  --color-10x-bg: #08080B;
  --color-10x-card: #FFFFFF;
  --color-10x-card-alt: #F7F7F8;
  --color-10x-text-dark: #111111;
  --color-10x-pink: #FF005E;
  --color-10x-pink-hover: #E60050;
  --color-10x-border: #E1E1E6;
}

/* Ensure Page Background is Premium Dark */
body, 
body.page-template-elementor_canvas,
.elementor-section.background-10x-dark {
  background-color: var(--color-10x-bg) !important;
}

/* Keep active question/form step area inside a clean light card */
.elementor-form .elementor-field-type-step {
  background-color: var(--color-10x-card) !important;
  color: var(--color-10x-text-dark) !important;
  border-radius: 16px !important;
  padding: 36px !important;
  max-width: 950px !important;
  margin: 0 auto 24px auto !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  .elementor-form .elementor-field-type-step {
    padding: 24px !important;
  }
}

/* Ensure step content headings & descriptions inside card are dark text for readability */
.elementor-form .elementor-field-type-step label,
.elementor-form .elementor-field-type-step .elementor-field-label,
.elementor-form .elementor-field-type-step p,
.elementor-form .elementor-field-type-step h1,
.elementor-form .elementor-field-type-step h2,
.elementor-form .elementor-field-type-step h3,
.elementor-form .elementor-field-type-step h4,
.elementor-form .elementor-field-type-step span {
  color: var(--color-10x-text-dark) !important;
}

/* Radio Options Custom Styling */
.elementor-form .elementor-field-option {
  position: relative !important;
  display: block !important;
  background-color: var(--color-10x-card-alt) !important;
  border: 1px solid var(--color-10x-border) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
  cursor: pointer !important;
  transition: all 0.18s ease-in-out !important; /* Smooth 150-200ms transition */
  padding: 0 !important; /* Removed container padding to allow label to stretch fully */
  overflow: hidden !important;
}

/* Radio Option Hover State */
.elementor-form .elementor-field-option:hover {
  background-color: #F1F1F3 !important;
  border-color: rgba(255, 0, 94, 0.4) !important; /* Subtle pink border */
}

/* Selected Radio State using Modern CSS :has() */
.elementor-form .elementor-field-option:has(input[type="radio"]:checked) {
  background-color: rgba(255, 0, 94, 0.05) !important; /* Very light pink background */
  border-color: var(--color-10x-pink) !important; /* Pink border */
}

/* Stronger text weight when option is checked */
.elementor-form .elementor-field-option:has(input[type="radio"]:checked) label {
  font-weight: 600 !important;
  color: var(--color-10x-text-dark) !important;
}

/* Make actual input nicely aligned on the left */
.elementor-form .elementor-field-option input[type="radio"] {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  accent-color: var(--color-10x-pink) !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 2 !important;
}

/* Label styling inside options - Stretch to cover full card area */
.elementor-form .elementor-field-option label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 16px 14px 44px !important; /* Moved spacing here to make entire card clickable */
  color: var(--color-10x-text-dark) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  user-select: none !important;
  z-index: 1 !important;
}

/* Progress Bar Custom Styling */
.elementor-form .elementor-progress {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  height: 8px !important; /* Slightly thinner progress bar */
  overflow: hidden !important;
  margin-bottom: 20px !important; /* Cleaner spacing above the card */
  max-width: 950px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.elementor-form .elementor-progress-bar {
  background-color: var(--color-10x-pink) !important;
  border-radius: 10px !important;
  transition: width 0.4s ease !important;
}

/* Elegantly styled progress percentage indicator */
.elementor-form .elementor-progress-text {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Form Buttons Styling */
.elementor-form .elementor-button {
  background-color: var(--color-10x-pink) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: bold !important;
  font-size: 16px !important;
  padding: 14px 28px !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.elementor-form .elementor-button:hover,
.elementor-form .elementor-button:focus {
  background-color: var(--color-10x-pink-hover) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(255, 0, 94, 0.4) !important;
}

/* Input Fields on Step 3 */
.elementor-form .elementor-field-textual {
  background-color: #FFFFFF !important;
  color: var(--color-10x-text-dark) !important;
  border: 1px solid var(--color-10x-border) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  transition: all 0.25s ease !important;
}

.elementor-form .elementor-field-textual:focus {
  border-color: var(--color-10x-pink) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 94, 0.15) !important;
}

/* Success Message Improvements */
.elementor-message-success {
  background-color: #FFFFFF !important;
  border-left: 5px solid #28a745 !important;
  color: var(--color-10x-text-dark) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  font-weight: 500 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
  max-width: 950px !important;
  margin: 20px auto !important;
}