/**
 * Contact Form Proper Spacing
 * Provides balanced gaps and padding between all form elements
 * Overrides the tight spacing rules with professional layout
 */

/* ===== Main Form Container ===== */
.contact-sec-2 {
    padding: 40px 60px 30px 60px !important;
}

.contact-sec-2 .contact-form {
    gap: 15px !important;
}

/* ===== Form Field Groups ===== */
.contact-form .input-group {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

/* ===== Form Labels ===== */
.contact-form label,
.contact-form-spacing label,
body .contact-form-spacing label {
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 500 !important;
}

/* ===== Form Inputs and Selects ===== */
.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-sec-2 .contact-form .input-group input,
.contact-sec-2 .contact-form .input-group textarea,
.contact-sec-2 .contact-form .input-group select {
    margin-bottom: 12px !important;
    padding: 12px 18px !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(136, 136, 136, 0.1) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* ===== Package Selection Section ===== */
.contact-form-spacing h1,
.contact-form-spacing h2,
.contact-form-spacing h3,
.contact-form-spacing .form-title,
body .contact-form-spacing .form-title {
    margin-bottom: 8px !important;
    padding-bottom: 5px !important;
    color: #fb974b !important;
}

/* Package dropdown specific spacing */
.package-dropdown-spacing,
.contact-form-spacing .form-field:has(select[name*="package"]) {
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
}

/* ===== Dynamic Package Content ===== */
.package-conditional-content {
    margin: 12px 0 !important;
    padding: 8px 0 !important;
    transition: all 300ms ease-in-out !important;
}

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

/* Package content elements */
.package-title {
    background: linear-gradient(45deg, #fb974b 0%, #fd005a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.2em !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

.package-subtitle {
    color: #ffffff !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
}

.package-urgency {
    background: linear-gradient(45deg, #fb974b 0%, #fd005a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold !important;
    margin-bottom: 12px !important;
    margin-top: 8px !important;
    font-size: 1.1em !important;
    padding: 0 !important;
}

.package-footer {
    color: #ffffff !important;
    margin-top: 12px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    line-height: 1.5 !important;
}

/* ===== Message Field ===== */
.message-field-spacing,
.contact-form-spacing .form-field:has(textarea) {
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
}

.contact-form textarea,
.contact-sec-2 .contact-form .input-group textarea {
    height: 120px !important;
    resize: vertical !important;
}

/* ===== Form Fields Spacing ===== */
.contact-form-spacing .form-field:has(input[type="text"]),
.contact-form-spacing .form-field:has(input[type="email"]),
.contact-form-spacing .form-field:has(input[type="tel"]),
.contact-form-spacing .form-field:has(input[type="date"]) {
    margin-bottom: 12px !important;
    padding-bottom: 5px !important;
}

/* ===== Radio Buttons ===== */
.radio-btns {
    gap: 15px !important;
    margin-bottom: 12px !important;
}

.radio-btns .radio-btn label {
    padding: 10px 18px !important;
    margin: 0 !important;
    background: #1a1a1a !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.radio-btns .radio-btn input:checked ~ label {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ===== Buttons ===== */
.contact-form button,
.contact-form input[type="submit"],
.contact-sec-2 .contact-form .input-group button {
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border: 1.6px solid #ffffff;
    background: none;
    color: var(--primary);
    border-radius: 30px;
    z-index: 1;
    text-decoration: none;
    gap: 10px;
    line-height: 16px;
    padding: 14px 24px;
    background: #1a1a1a;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

.contact-form button:hover,
.contact-form input[type="submit"]:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}

/* ===== Urgency Message Spacing ===== */
.package-urgency-spacing {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
}

/* ===== Button and Confirmation Spacing ===== */
.button-confirmation-spacing {
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
}

/* ===== Form Sections Spacing ===== */
#package-dropdown-content.active,
#package-message-content.active,
#package-footer-content.active {
    margin: 12px 0 !important;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .contact-sec-2 {
        padding: 20px 20px 15px 20px !important;
    }
    
    .contact-form .input-group {
        margin-bottom: 15px !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        margin-bottom: 15px !important;
        padding: 10px 15px !important;
        font-size: 16px !important;
    }
    
    .package-conditional-content {
        margin: 15px 0 !important;
        padding: 15px 0 !important;
    }
    
    .package-title {
        font-size: 1.8em !important;
    }
    
    .contact-form button,
    .contact-form input[type="submit"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

/* ===== High Priority Overrides ===== */
body .contact-form-spacing .form-field,
body .contact-form-spacing .input-group,
body .contact-form-spacing label,
body .contact-form-spacing input,
body .contact-form-spacing select,
body .contact-form-spacing textarea,
body .contact-form-spacing button {
    box-sizing: border-box !important;
}

/* Override any zero margins/paddings from other CSS files */
body .contact-form-spacing .package-dropdown-spacing,
body .contact-form-spacing .message-field-spacing,
body .contact-form-spacing .package-urgency-spacing,
body .contact-form-spacing .button-confirmation-spacing {
    margin-bottom: 12px !important;
}

/* Ensure proper spacing for all form elements */
body .contact-form-spacing > *:not(:last-child) {
    margin-bottom: 10px !important;
}