/**
 * ============================================================================
 * COMPONENTS - Form Elements & UI Components
 * ============================================================================
 * 
 * Purpose: Provides styling for interactive UI components including form
 * buttons, form fields, and modal close icons.
 * 
 * Components:
 * - Form Button: Custom styled submit button with hover states
 * - Fluent Form Fields: Height normalization for form inputs
 * - Popout Close Icon: Custom SVG close button for modals/lightboxes
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   FORM BUTTON CUSTOM
   ============================================================================
   Styled submit button with brand colors and full-width mobile layout.
   Transitions disabled for immediate visual feedback on interaction.
   
   Usage: Add "form-button-custom" class to button wrapper/container
   ============================================================================ */

.form-button-custom button {
  background-color: #864EF5 !important;
  transition: none !important;
  /* Disable transition for immediate feedback */
}

.form-button-custom button:hover {
  background-color: #5926BC !important;
}

/* === Mobile Full-Width (≤992px) === */
@media (max-width: 992px) {
  .form-button-custom button {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
    /* Include padding in width calculation */
  }
}


/* ============================================================================
   FLUENT FORM FIELD HEIGHT NORMALIZATION
   ============================================================================
   Ensures all Fluent Form fields have consistent height (60px) including
   text inputs, textareas, and select dropdowns. Forces uniform vertical
   alignment and visual consistency across all field types.
   
   Field Classes:
   - field1-custom, field2-custom, field3-custom: Text/textarea fields
   - field4-custom: Select dropdown field
   - field_phone-custom: Phone input field
   ============================================================================ */

/* Standard text inputs and textareas */
.field1-custom .ff-el-form-control,
.field2-custom .ff-el-form-control,
.field3-custom .ff-el-form-control,
.field4-custom .ff-el-form-control,
.field_phone-custom .ff-el-form-control {
  height: 60px;
  line-height: 60px;
  padding: 0 14px;
  box-sizing: border-box;
}

/* Select dropdown - force height with !important for stubborn frameworks */
.field4-custom select.ff-el-form-control,
.field4-custom .ff-el-input--content select,
.field4-custom .ff-el-form-control.ff-el-select {
  height: 60px !important;
  min-height: 60px !important;
  line-height: 60px !important;
  padding: 0 60px 0 14px !important;
  /* Extra right padding for dropdown arrow */
  box-sizing: border-box;

  /* Remove default browser styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* ============================================================================
   POPOUT CLOSE ICON - CUSTOM SVG
   ============================================================================
   Replaces Elementor's default Eicon close button with a custom SVG graphic
   in modals and lightboxes. Uses CSS background-image for easy asset swapping.
   
   Target: Elementor dialog/lightbox close buttons
   ============================================================================ */

/* Hide default Elementor icon */
.dialog-close-button.dialog-lightbox-close-button .eicon-close {
  display: none !important;
}

/* Add custom SVG as background image on pseudo-element */
.dialog-close-button.dialog-lightbox-close-button::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('/wp-content/uploads/2025/11/Group-468.svg') center center no-repeat;
  background-size: contain;
}