/**
 * Contact Form Specific Spacing
 * Applies targeted padding adjustments for better form layout
 * All elements expand to 100% width of their container
 */

/* Full Width Form Elements - Remove any width restrictions */
.contact-form-spacing,
.contact-form-spacing .form-field,
.contact-form-spacing .wpcf7-form-control-wrap,
.contact-form-spacing .elementor-field-group,
.contact-form-spacing .forminator-field,
.contact-form-spacing .wpforms-field {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Form Headings - 100% width */
.contact-form-spacing h1,
.contact-form-spacing h2,
.contact-form-spacing h3,
.contact-form-spacing .form-title,
.contact-form-spacing [class*="heading"],
.contact-form-spacing [class*="title"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Form Inputs - 100% width */
.contact-form-spacing input,
.contact-form-spacing select,
.contact-form-spacing textarea,
.contact-form-spacing button,
.contact-form-spacing .wpcf7-text,
.contact-form-spacing .wpcf7-email,
.contact-form-spacing .wpcf7-textarea,
.contact-form-spacing .wpcf7-select,
.contact-form-spacing .wpcf7-submit,
.contact-form-spacing .elementor-field,
.contact-form-spacing .elementor-button {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Dynamic Content Elements - 100% width */
.package-conditional-content,
.package-conditional-content .package-title,
.package-conditional-content .package-subtitle,
.package-conditional-content .package-urgency,
.package-conditional-content .package-footer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* 1. Apply uniform spacing between "Order My Song" heading and "Select Your Package" dropdown */
.contact-form-spacing h1:has(+ *:is([name*="package"], select)),
.contact-form-spacing h2:has(+ *:is([name*="package"], select)),
.contact-form-spacing h3:has(+ *:is([name*="package"], select)),
.contact-form-spacing .form-title + .form-field:has(select[name*="package"]),
.contact-form-spacing [class*="heading"]:has(+ *:is([name*="package"], select)),
.contact-form-spacing .form-title {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* Alternative selector for form titles that come before package dropdowns */
.contact-form-spacing .form-title:has(+ form),
.contact-form-spacing h1:has(~ form),
.contact-form-spacing h2:has(~ form),
.contact-form-spacing h3:has(~ form) {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* 2. Apply uniform spacing between "Select Your Package" section and "Message" field */
.package-dropdown-spacing,
.contact-form-spacing .form-field:has(select[name*="package"]) {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* 3. Apply uniform spacing between "Message" field and "Full Name" field */
.message-field-spacing,
.contact-form-spacing .form-field:has(textarea) {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* Apply uniform spacing for elements that come after message fields */
.contact-form-spacing textarea:not(:last-child),
.contact-form-spacing .form-field:has(textarea):not(:last-child) {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* 4. Apply uniform spacing between urgency message and "Proceed to Payment" button */
.package-urgency-spacing,
.contact-form-spacing #package-message-content {
    margin-bottom: 1px !important;
    /* padding-bottom: 15px !important; */
}

/* Apply uniform spacing for the urgency message */
.package-urgency-spacing .package-urgency {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* 5. Apply uniform spacing between "Proceed to Payment" button and confirmation message */
.button-confirmation-spacing,
.contact-form-spacing .form-field:has(button[type="submit"]),
.contact-form-spacing .form-field:has(input[type="submit"]) {
    margin-bottom: 15px !important;
    padding-bottom: 15px !important;
}

/* Center-align confirmation message */
.package-conditional-content .package-footer,
#package-footer-content .package-footer,
.contact-form-spacing #package-footer-content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* General form spacing improvements */
.contact-form-spacing {
    position: relative;
}

/* Smooth transitions for spacing changes */
.contact-form-spacing .form-field,
.contact-form-spacing h1,
.contact-form-spacing h2,
.contact-form-spacing h3,
.contact-form-spacing .form-title {
    transition: margin 300ms ease-in-out, padding 300ms ease-in-out;
}

/* Conditional content spacing - uniform with form */
.package-conditional-content {
    margin: 15px 0 !important;
    padding: 15px 0 !important;
    transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out, margin 300ms ease-in-out, padding 300ms ease-in-out;
}

.package-conditional-content.active {
    margin: 15px 0 !important;
    padding: 15px 0 !important;
}

/* FIX: Reduce CF7 response message spacing to prevent large gaps */
.contact-form-spacing .wpcf7-response-output {
    margin: 10px 0 !important;
    padding: 10px 15px !important;
}

/* Apply uniform margins to specific content types */
#package-dropdown-content.active {
    margin: 15px 0 !important;
}

#package-message-content.active {
    margin: 1px 0 !important;
}
#package-footer-content.active {
    margin: 15px 0 !important;
}

/* Mobile responsiveness - Maintain 100% width on all devices with no spacing */
@media (max-width: 768px) {
    /* Maintain uniform spacing on mobile */
    .package-dropdown-spacing {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .message-field-spacing {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .button-confirmation-spacing {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .package-urgency-spacing {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .contact-form-spacing .form-title,
    .contact-form-spacing h1,
    .contact-form-spacing h2,
    .contact-form-spacing h3 {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
    
    /* Ensure all elements remain 100% width on mobile */
    .contact-form-spacing,
    .contact-form-spacing *,
    .contact-form-spacing .form-field,
    .contact-form-spacing input,
    .contact-form-spacing select,
    .contact-form-spacing textarea,
    .contact-form-spacing button,
    .contact-form-spacing .package-conditional-content,
    .package-conditional-content * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile button styling */
    .contact-form-spacing button,
    .contact-form-spacing input[type="submit"],
    .contact-form-spacing .proceed-payment-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        touch-action: manipulation !important;
    }
}

/* Compatibility with various form plugins */

/* Contact Form 7 specific */
.wpcf7 .contact-form-spacing .wpcf7-form-control-wrap {
    transition: margin 300ms ease-in-out, padding 300ms ease-in-out;
}

/* Elementor Forms specific */
.elementor-form .contact-form-spacing .elementor-field-group {
    transition: margin 300ms ease-in-out, padding 300ms ease-in-out;
}

/* Forminator specific */
.forminator-custom-form .contact-form-spacing .forminator-field {
    transition: margin 300ms ease-in-out, padding 300ms ease-in-out;
}

/* WPForms specific */
.wpforms-form .contact-form-spacing .wpforms-field {
    transition: margin 300ms ease-in-out, padding 300ms ease-in-out;
}

/* Proceed to Payment Button - 100% width with high specificity */
.contact-form-spacing button[type="submit"],
.contact-form-spacing input[type="submit"],
.contact-form-spacing .wpcf7-submit,
.contact-form-spacing .elementor-button,
.contact-form-spacing .proceed-payment-btn,
.contact-form-spacing .btn-submit,
.contact-form-spacing .submit-btn {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: center !important;
}

/* Override any inline styles or theme button widths */
.contact-form-spacing [class*="btn"],
.contact-form-spacing [class*="button"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure fluid container behavior */
.contact-form-spacing form,
.contact-form-spacing .wpcf7,
.contact-form-spacing .elementor-form,
.contact-form-spacing .forminator-custom-form,
.contact-form-spacing .wpforms-form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Override any theme-specific form styles that might interfere */
.contact-form-spacing .form-field,
.contact-form-spacing .wpcf7-form-control-wrap,
.contact-form-spacing .elementor-field-group,
.contact-form-spacing .forminator-field,
.contact-form-spacing .wpforms-field {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure dark theme compatibility */
.contact-form-spacing,
.dark-theme .contact-form-spacing {
    color: #ffffff;
}

.contact-form-spacing .form-title,
.dark-theme .contact-form-spacing .form-title {
    color: #fb974b;
}