/* ===================================================

   CONNECT2FORM - ENHANCED UI STYLES

   Modern, clean, and professional form styling

   ===================================================== */

table.has-fixed-layout {

    width: 100%;

}

/* Form Wrapper - Modern Card Design */

.connect2form-form-wrapper {

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    padding: 40px;

    max-width: 700px;

    margin: 30px auto;

}



/* Field Spacing */

.connect2form-field {

    margin-bottom: 28px;

}



/* Label Styling */

.connect2form-field label {

    font-weight: 600;

    font-size: 15px;

    color: #2c3e50;

    letter-spacing: 0.3px;

    margin-bottom: 10px;

}



/* Text Inputs - Modern Style */

.connect2form-field input[type="text"],

.connect2form-field input[type="email"],

.connect2form-field input[type="tel"],

.connect2form-field input[type="number"],

.connect2form-field input[type="phone"],

.connect2form-field input[type="date"],

.connect2form-field input[type="url"],

.connect2form-field input[type="password"] {

    padding: 14px 16px !important;

    border: 2px solid #e1e8ed !important;

    border-radius: 10px !important;

    background-color: #f8f9fa !important;

    transition: all 0.3s ease !important;

    font-size: 15px !important;

    color: #2c3e50 !important;

    height: auto !important;

}



.connect2form-field input:hover {

    border-color: #c5d2dc !important;

    background-color: #ffffff !important;

}



.connect2form-field input:focus {

    border-color: #4a90e2 !important;

    background-color: #ffffff !important;

    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1) !important;

    outline: none !important;

}



/* Select Dropdown - Custom Arrow */

.connect2form-field select {

    padding: 14px 40px 14px 16px !important;

    border: 2px solid #e1e8ed !important;

    border-radius: 10px !important;

    background-color: #f8f9fa !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%232c3e50' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;

    background-position: right 14px center !important;

    appearance: none !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    font-size: 15px !important;

    color: #2c3e50 !important;

    transition: all 0.3s ease !important;

}



.connect2form-field select:hover {

    border-color: #c5d2dc !important;

    background-color: #ffffff !important;

}



.connect2form-field select:focus {

    border-color: #4a90e2 !important;

    background-color: #ffffff !important;

    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1) !important;

    outline: none !important;

}



/* Textarea - Enhanced */

.connect2form-field textarea {

    padding: 14px 16px !important;

    border: 2px solid #e1e8ed !important;

    border-radius: 10px !important;

    background-color: #f8f9fa !important;

    font-size: 15px !important;

    color: #2c3e50 !important;

    min-height: 120px !important;

    resize: vertical !important;

    transition: all 0.3s ease !important;

    line-height: 1.6 !important;

}



.connect2form-field textarea:hover {

    border-color: #c5d2dc !important;

    background-color: #ffffff !important;

}



.connect2form-field textarea:focus {

    border-color: #4a90e2 !important;

    background-color: #ffffff !important;

    box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.1) !important;

    outline: none !important;

}



/* File Input - Modern Design */

.connect2form-field input[type="file"] {

    padding: 14px !important;

    border: 2px dashed #c5d2dc !important;

    border-radius: 10px !important;

    background-color: #f8f9fa !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

}



.connect2form-field input[type="file"]:hover {

    border-color: #4a90e2 !important;

    background-color: #ffffff !important;

}



input[type="file"]::file-selector-button {

    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;

    color: #ffffff !important;

    border: none !important;

    padding: 10px 20px !important;

    border-radius: 6px !important;

    margin-right: 12px !important;

    font-weight: 600 !important;

    font-size: 14px !important;

    cursor: pointer !important;

    transition: all 0.3s ease !important;

    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3) !important;

}



input[type="file"]::file-selector-button:hover {

    background: linear-gradient(135deg, #357abd 0%, #2d6aa3 100%) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4) !important;

}



/* Radio & Checkbox Fieldset - Card Style */

.connect2form-field-radio,

.connect2form-field-checkbox {

    background-color: #f8f9fa !important;

    padding: 20px !important;

    border-radius: 10px !important;

    border: 2px solid #e1e8ed !important;

    margin-left: 10px;

    margin-right: 10px;

    width: auto !important;

    margin-top: 50px !important;

    position: relative;

}



/* Radio Label Improvements */

.connect2form-radio-label {

    padding: 10px 12px 10px 40px !important;

    margin-bottom: 8px !important;

}



.connect2form-radio-label::before {

    left: 12px !important;

    width: 20px !important;

    height: 20px !important;

    border: 2px solid #c5d2dc !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



.connect2form-radio-label::after {

    left: 17px !important;

    width: 10px !important;

    height: 10px !important;

    background-color: #4a90e2 !important;

}



.connect2form-radio-label:hover::before {

    border-color: #4a90e2 !important;

}



.connect2form-radio-label input[type="radio"]:checked::before {

    border-color: #4a90e2 !important;

}



/* Checkbox Label Improvements */

.connect2form-checkbox-label {

    padding: 10px 12px 10px 40px !important;

    margin-bottom: 0 !important;

}



.connect2form-checkbox-label::before {

    left: 12px !important;

    width: 20px !important;

    height: 20px !important;

    border: 2px solid #c5d2dc !important;

    border-radius: 6px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



.connect2form-checkbox-label::after {

    left: 20px !important;

    width: 5px !important;

    height: 10px !important;

    border: solid #000000 !important;

    border-width: 0 2.5px 2.5px 0 !important;

}



.connect2form-checkbox-label:hover::before {

    border-color: #4a90e2 !important;

}



.connect2form-checkbox-label input[type="checkbox"]:checked::before {

    background-color: #4a90e2 !important;

    border-color: #4a90e2 !important;

}



/* Submit Button - Gradient Design */

.connect2form-submit {

    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%) !important;

    color: #ffffff !important;

    padding: 16px 48px !important;

    border-radius: 10px !important;

    font-size: 16px !important;

    font-weight: 600 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    border: none !important;

    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;

    transition: all 0.3s ease !important;

    cursor: pointer !important;

}



.connect2form-submit:hover {

    background: linear-gradient(135deg, #357abd 0%, #2d6aa3 100%) !important;

    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4) !important;

    transform: translateY(-2px) !important;

}



.connect2form-submit:active {

    transform: translateY(0) !important;

}



.connect2form-submit-wrapper {

    margin-top: 35px !important;

    padding-top: 25px !important;

    border-top: 2px solid #e1e8ed !important;

    text-align: left !important;

}



/* Success/Error Messages */

.connect2form-message {

    margin-top: 24px !important;

    padding: 16px 20px !important;

    border-radius: 10px !important;

    font-size: 15px !important;

    font-weight: 500 !important;

    animation: slideDown 0.3s ease !important;

}



@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.connect2form-message.success {

    background-color: #d4edda !important;

    border: 2px solid #28a745 !important;

    color: #155724 !important;

}



.connect2form-message.error {

    background-color: #f8d7da !important;

    border: 2px solid #e74c3c !important;

    color: #721c24 !important;

}



/* Required Asterisk */

.connect2form-field .required,

.connect2form-fieldset-legend .required {

    color: #e74c3c !important;

    font-weight: 700 !important;

}



/* Placeholder Styling */

.connect2form-field input::placeholder,

.connect2form-field textarea::placeholder {

    color: #95a5a6 !important;

    opacity: 1 !important;

}



/* Responsive Design */

@media screen and (max-width: 768px) {

    .connect2form-form-wrapper {

        padding: 25px !important;

        margin: 15px !important;

        border-radius: 12px !important;

    }

    

    .connect2form-submit {

        width: 100% !important;

        padding: 14px 24px !important;

    }

}





.connect2form-field.field-size-medium input[type="text"], .connect2form-field.field-size-medium input[type="email"], .connect2form-field.field-size-medium input[type="phone"], .connect2form-field.field-size-medium input[type="number"], .connect2form-field.field-size-medium input[type="date"], .connect2form-field.field-size-medium select, .connect2form-field.field-size-medium textarea, .connect2form-field input.field-size-medium, .connect2form-field select.field-size-medium, .connect2form-field textarea.field-size-medium {

    max-width: 100%;

}

.connect2form-form-wrapper form {

    width: auto;

    margin: 0 -10px;

}

.connect2form-field-checkbox .connect2form-fieldset-legend, .connect2form-field-radio .connect2form-fieldset-legend {

    margin-bottom: 0;

    position: absolute;

    top: -30px;

    left: 0;

}

.connect2form-consent-label input {

    min-height: 14px !important;

    min-width: 14px !important;

    display: inline-block;

    vertical-align: middle !important;

    position: relative !important;

    top: -1px !important;

}

label.connect2form-consent-label {

    padding-left: 25px;

    position: relative;

    font-size: 14px !important;

    font-weight: 400 !important;

}

label.connect2form-consent-label input {

    position: absolute !important;

    left: 0 !important;

    top: 0 !important;

}