/* Phase C: Hero Inline Form Aesthetic Layer
 * ONLY visual decoration for hero inline form (inputs, focus, button variant, shadows, gradients)
 * Structural positioning & layout is handled in components-form-hero.css (structural) and layout-hero.css.
 * Source: hero-form-styles-we-lost.txt (filtered for colors, shadows, gradients) + future theme tokenization.
 */

/* Input visual styling (keep spacing & sizing structural elsewhere) */
.hero-form-inputs .form-control {
  background: rgba(255,255,255,0.95);
  border: 1px solid #ddd;
  border-radius: 8px;
}
.hero-form-inputs .form-control:focus {
  border-color: var(--brand-accent, #FFD700);
  box-shadow: 0 0 0 0.2rem rgba(255,215,0,0.25);
}

/* Button aesthetics if reused outside hero-form-submit class context */
.hero-form-inputs .btn {
  /* Visual reset to ensure button inherits theme colors cleanly */
  background: var(--brand-primary, #0066cc);
  color: var(--text-on-primary, #fff);
  border: 1px solid rgba(0,0,0,0.1);
}

/* Modal style aesthetic aspects for small/medium screens (shadow & background) */
@media (max-width: 991px) {
  .hero-inline-form {
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
  }
}