/* HubSpot Form Custom Styling - Echo Leaf Brand */
/* Targets both hs-form-html (CMS) and hs-form-frame (standard) */

/* ========================================
   CRITICAL: Target both form types
   ======================================== */

.hs-form-html,
.hs-form-html *,
.hs-form-html *::before,
.hs-form-html *::after,
.hs-form-frame,
.hs-form-frame *,
.hs-form-frame *::before,
.hs-form-frame *::after,
.hsform-wrapper,
.hsform-wrapper *,
.hs-form,
.hs-form * {
  color: #e4e4e7 !important;
}

/* ========================================
   Form Container
   ======================================== */

#hubspot-form-container {
  position: relative;
}

.hs-form-html,
.hs-form-frame {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================
   Labels
   ======================================== */

.hs-form-html label,
.hs-form-html .hs-form-field > label,
.hs-form-html .hs-field-label,
.hs-form-frame label,
.hs-form-frame .hs-form-field > label,
.hs-form-frame .hs-field-label,
.hs-form label,
.hs-form .hs-form-field label {
  color: #e4e4e7 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
  display: block !important;
  line-height: 1.5 !important;
}

/* Required asterisk */
.hs-form-html .hs-form-required,
.hs-form-frame .hs-form-required,
.hs-form .hs-form-required {
  color: #f97316 !important;
  margin-left: 4px !important;
}

/* ========================================
   Input Fields
   ======================================== */

.hs-form-html input[type="text"],
.hs-form-html input[type="email"],
.hs-form-html input[type="tel"],
.hs-form-html select,
.hs-form-html textarea,
.hs-form-html .hs-input,
.hs-form-frame input[type="text"],
.hs-form-frame input[type="email"],
.hs-form-frame input[type="tel"],
.hs-form-frame select,
.hs-form-frame textarea,
.hs-form-frame .hs-input,
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form select,
.hs-form textarea,
.hs-form .hs-input {
  width: 100% !important;
  padding: 12px 16px !important;
  background-color: #18181b !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  color: #e4e4e7 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  margin-bottom: 4px !important;
}

/* Input focus state */
.hs-form-html input:focus,
.hs-form-html select:focus,
.hs-form-html textarea:focus,
.hs-form-frame input:focus,
.hs-form-frame select:focus,
.hs-form-frame textarea:focus,
.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
  outline: none !important;
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
  background-color: #18181b !important;
}

/* Placeholder text */
.hs-form-html input::placeholder,
.hs-form-html textarea::placeholder,
.hs-form-frame input::placeholder,
.hs-form-frame textarea::placeholder,
.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color: #71717a !important;
  opacity: 1 !important;
}

/* ========================================
   Field Spacing
   ======================================== */

.hs-form-html .hs-form-field,
.hs-form-frame .hs-form-field,
.hs-form .hs-form-field {
  margin-bottom: 24px !important;
}

/* ========================================
   Checkboxes & Radios
   ======================================== */

.hs-form-html .hs-form-checkbox label,
.hs-form-html .hs-form-radio label,
.hs-form-frame .hs-form-checkbox label,
.hs-form-frame .hs-form-radio label,
.hs-form .hs-form-checkbox label,
.hs-form .hs-form-radio label {
  color: #e4e4e7 !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.hs-form-html input[type="checkbox"],
.hs-form-html input[type="radio"],
.hs-form-frame input[type="checkbox"],
.hs-form-frame input[type="radio"],
.hs-form input[type="checkbox"],
.hs-form input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin-top: 2px !important;
  accent-color: #14b8a6 !important;
  cursor: pointer !important;
}

.hs-form-html .hs-form-checkbox,
.hs-form-html .hs-form-radio,
.hs-form-frame .hs-form-checkbox,
.hs-form-frame .hs-form-radio,
.hs-form .hs-form-checkbox,
.hs-form .hs-form-radio {
  margin-bottom: 12px !important;
}

/* ========================================
   Submit Button
   ======================================== */

.hs-form-html .hs-button,
.hs-form-html input[type="submit"],
.hs-form-frame .hs-button,
.hs-form-frame input[type="submit"],
.hs-form .hs-button,
.hs-form input[type="submit"] {
  width: 100% !important;
  padding: 16px 24px !important;
  background-color: #14b8a6 !important;
  color: #0a0a0f !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 8px !important;
  display: block !important;
}

.hs-form-html .hs-button:hover,
.hs-form-frame .hs-button:hover,
.hs-form .hs-button:hover {
  background-color: #2dd4bf !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important;
}

/* ========================================
   Error Messages
   ======================================== */

.hs-form-html .hs-error-msgs,
.hs-form-frame .hs-error-msgs,
.hs-form .hs-error-msgs {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}

.hs-form-html .hs-error-msgs label,
.hs-form-frame .hs-error-msgs label,
.hs-form .hs-error-msgs label {
  color: #f97316 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.hs-form-html input.error,
.hs-form-frame input.error,
.hs-form input.error {
  border-color: #f97316 !important;
}

/* ========================================
   Legal / Consent
   ======================================== */

.hs-form-html .legal-consent-container,
.hs-form-html .hs-richtext,
.hs-form-frame .legal-consent-container,
.hs-form-frame .hs-richtext,
.hs-form .legal-consent-container,
.hs-form .hs-richtext {
  color: #a1a1aa !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.hs-form-html .legal-consent-container a,
.hs-form-frame .legal-consent-container a,
.hs-form .legal-consent-container a {
  color: #14b8a6 !important;
  text-decoration: underline !important;
}

/* ========================================
   Thank You Message
   ======================================== */

.hs-form-html .submitted-message,
.hs-form-frame .submitted-message,
.hs-form .submitted-message {
  background-color: rgba(20, 184, 166, 0.1) !important;
  border: 1px solid #14b8a6 !important;
  color: #14b8a6 !important;
  padding: 32px !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-size: 18px !important;
}

/* ========================================
   Select Dropdown
   ======================================== */

.hs-form-html select,
.hs-form-frame select,
.hs-form select {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}

/* ========================================
   Multi-column Layout
   ======================================== */

.hs-form-html .hs-form-row,
.hs-form-frame .hs-form-row,
.hs-form .hs-form-row {
  display: flex !important;
  gap: 16px !important;
}

.hs-form-html .hs-form-row .hs-form-field,
.hs-form-frame .hs-form-row .hs-form-field,
.hs-form .hs-form-row .hs-form-field {
  flex: 1 !important;
}

/* ========================================
   Mobile
   ======================================== */

@media (max-width: 640px) {
  .hs-form-html .hs-form-row,
  .hs-form-frame .hs-form-row,
  .hs-form .hs-form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* ========================================
   Hide Branding
   ======================================== */

.hs-form-html .hs-logo,
.hs-form-frame .hs-logo,
.hs-form .hs-logo {
  display: none !important;
}