* {

    box-sizing: border-box;

}

/* ===================================================== FORM STATE CLASSES ===================================================== */

/* 

 * Form wrapper state classes for styling based on form state:

 * 

 * 1. Normal State (default):

 *    - No additional class on .connect2form-form-wrapper

 *    - Use: .connect2form-form-wrapper { ... }

 * 

 * 2. Validation Error State:

 *    - Class: .connect2form-has-errors

 *    - Applied when form validation fails

 *    - Use: .connect2form-form-wrapper.connect2form-has-errors { ... }

 * 

 * 3. Success State:

 *    - Class: .connect2form-submitted-success

 *    - Applied when form is successfully submitted

 *    - Use: .connect2form-form-wrapper.connect2form-submitted-success { ... }

 * 

 * Example usage:

 * 

 * .connect2form-form-wrapper {

 *     border: 2px solid #e1e8ed; // Normal state

 * }

 * 

 * .connect2form-form-wrapper.connect2form-has-errors {

 *     border-color: #dc3232; // Error state - red border

 * }

 * 

 * .connect2form-form-wrapper.connect2form-submitted-success {

 *     border-color: #46b450; // Success state - green border

 *     background-color: #f0f8ff; // Light blue background

 * }

 */

/* Honeypot field - must be hidden for spam protection */

.connect2form-honeypot {

    position: absolute;

    left: -9999px;

    top: -9999px;

    visibility: hidden;

    opacity: 0;

}

/* Hidden message container - will be shown via JavaScript */

.connect2form-message {

    display: none;

    margin-top: 24px;

    padding: 16px 20px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: 500;

    animation: slideDown 0.3s ease;

}

@keyframes slideDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

   }

    to {

        opacity: 1;

        transform: translateY(0);

   }

}

.connect2form-message.success {

    background-color: #d4edda;
    text-align: center;
    border: 2px solid #28a745;

    color: #155724;

}

.connect2form-message.error {

    background-color: #f8d7da;

    border: 2px solid #e74c3c;

    color: #721c24;

}

.connect2form-message.show {

    display: block;

}

/* Conditional Field Hidden */

.connect2form-field[data-conditional] {

    display: none;

}

.connect2form-field[data-conditional].show {

    display: block;

}

/* File Upload Info */

.c2f-file-info {

    color: #666;

    font-size: 11px;

    margin-top: 5px;

    display: block;

}

/* Form Fields */

.connect2form-field {

    margin-bottom: 28px;

    padding: 0 10px;

    width: 33.333%;

    display: inline-block;

    vertical-align: top;

    margin-right: 0;

    font-size: 14px;

}

.connect2form-field label {

    display: block;

    text-transform:capitalize;

    font-weight: 600;

    font-size: 16px;

    color: #2c3e50;

    letter-spacing: 0.3px;

    margin-bottom: 10px;

}

.connect2form-field .required {

    color: #e74c3c;

    margin-left: 4px;

    font-weight: 600;

}

/* Remove label::after if it exists since asterisk is now in HTML */

input.error, textarea.error, select.error {

    border: 1px solid #dc3232;

    border-color: #dc3232;

}

.field-error {

    color: #dc3232;

    font-size: 12px;

    margin-top: 5px;

    display: block;

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    padding: 8px 12px;

    border-radius: 4px;

}

/* Error styling for fieldsets (checkbox/radio groups) */

fieldset.error {

    border-color: #dc3232;

}

fieldset .field-error {

    margin-top: 10px;

    width: 100%;

}

.connect2form-field label.connect2form-radio-label, .connect2form-field label.connect2form-checkbox-label {

    font-weight: 400;

    margin-bottom: 0;

}

.connect2form-field select {

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px;

    padding-right: 35px;

}

.file-preview {

    margin-top: 10px;

}

.file-preview img {

    width: 70px;

}

/* Input Fields */

.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"], .connect2form-field select, .connect2form-field textarea {

    width: 100%;

    padding: 14px 16px;

    border: 2px solid #e1e8ed;

    border-radius: 10px;

    background-color: #f8f9fa;

    transition: all 0.3s ease;

    -webkit-transition: all 0.3s ease;

    font-size: 15px;

    color: #2c3e50;

    height: auto;

    margin-top: 0;

}

.connect2form-field input:hover {

    border-color: #c5d2dc;

    background-color: #ffffff;

}

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

    width: 100%;

    font-size: 16px;

}

.connect2form-field input[type="text"]::placeholder, .connect2form-field input[type="email"]::placeholder, .connect2form-field input[type="phone"]::placeholder, .connect2form-field input[type="number"]::placeholder, .connect2form-field input[type="date"]::placeholder, .connect2form-field textarea::placeholder {

    color: #95a5a6;

}

.connect2form-field input[type="text"]:focus, .connect2form-field input[type="email"]:focus, .connect2form-field input[type="phone"]:focus, .connect2form-field input[type="number"]:focus, .connect2form-field input[type="date"]:focus, .connect2form-field select:focus, .connect2form-field textarea:focus, .connect2form-field input[type="file"]:focus {

    border-color: #4a90e2;

    background-color: #ffffff;

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

    outline: none;

}

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

    border: transparent;

}







/* Radio and Checkbox option text color and font size */

.connect2form-radio-label span,

.connect2form-checkbox-label span {

    color: #95a5a6;

}

/* Placeholder color - Apply to all field types */

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

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

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

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

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

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

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

.connect2form-field input[type="password"]::placeholder,

.connect2form-field input[type="search"]::placeholder,

.connect2form-field input[type="time"]::placeholder,

.connect2form-field input[type="datetime-local"]::placeholder,

.connect2form-field input[type="month"]::placeholder,

.connect2form-field input[type="week"]::placeholder,

.connect2form-field textarea::placeholder,

.connect2form-field select::placeholder,

.connect2form-field .connect2form-datepicker::placeholder,

.connect2form-field input::placeholder {

    color: #95a5a6;

}



/* Placeholder Styling */

.connect2form-field textarea {

    height: 100px;

    resize: none;

    padding: 12px;

}

/* Fieldset and Legend for Radio and Checkbox */

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

    width: 100%;

    background-color: #f8f9fa;

    border: 2px solid #e1e8ed;

    padding: 10px;

    border-radius: 10px;

    margin-left: 10px;

    margin-right: 10px;

    width: auto;

    margin-top: 50px;

    position: relative;

}

.connect2form-fieldset-legend {

    font-weight: 600;

    /* Color and font size will be set by CSS variables from admin settings (see line 689-703) */

    font-size: 15px;

    padding: 0;

    margin-bottom: 16px;

    display: block;

    width: 100%;

    letter-spacing: 0.3px;

}

.connect2form-fieldset-legend .required {

    color: #e74c3c;

    margin-left: 4px;

    font-weight: 700;

}

/* Radio and Checkbox Fields */

.connect2form-radio-label, .connect2form-checkbox-label {

    display: block;

    margin-bottom: 14px;

    font-weight: normal;

    width: 100%;

    padding: 8px 12px;

    border-radius: 6px;

    transition: background-color 0.2s ease;

}

.connect2form-radio-label:hover, .connect2form-checkbox-label:hover {

    background-color: rgba(74, 144, 226, 0.05);

}

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

    display: block;

}

/* Custom Radio Button Styling */

.connect2form-radio-label {

    position: relative;

    cursor: pointer;

    display: inline-block;

    min-height: 22px;

    line-height: 22px;

    padding: 10px 12px 10px 40px;

    margin-bottom: 8px;

}

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

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}

.connect2form-radio-label span {

    position: relative;

    padding-left: 5px;

    display: inline-block;

    /* Color and font size will be set by CSS variables from admin settings */

    vertical-align: middle;

}

.connect2form-radio-label::before {

    content: '';

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    width: 20px;

    height: 20px;

    border: 2px solid #c5d2dc;

    border-radius: 50%;

    background-color: #fff;

    transition: all 0.3s ease;

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

}

.connect2form-radio-label::after {

    content: '';

    position: absolute;

    left: 19px;

    top: 50%;

    transform: translateY(-50%);

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background-color: #4a90e2;

    opacity: 0;

    transition: opacity 0.3s ease;

}

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

    border-color: #4a90e2;

}

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

    border-color: #4a90e2;

}

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

    border-color: #2271b1;

}

.connect2form-radio-label input[type="radio"]:checked ~ ::after, .connect2form-radio-label:has(input[type="radio"]:checked)::after {

    opacity: 1;

}

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

    padding: 10px;

    border-width: 0;

    border-radius: 4px;

    background-color: #2271b1;

    color: #FFFFFF;

    font-weight: bold;

    transition: all .25s ease-in-out;

    cursor: pointer;

    margin-right: 10px;

}

.file-preview .file-name {

    font-size: 16px;

}

/* Custom Checkbox Styling */

.connect2form-checkbox-label {

    position: relative;

    padding: 10px 12px 10px 40px;

    cursor: pointer;

    display: inline-block;

    margin-bottom: 0;

    min-height: 22px;

    line-height: 22px;

}

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

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}

.connect2form-checkbox-label span {

    position: relative;

    padding-left: 5px;

    display: inline-block;

    /* Color and font size will be set by CSS variables from admin settings */

    vertical-align: middle;

}

.connect2form-checkbox-label::before {

    content: '';

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    width: 20px;

    height: 20px;

    border: 2px solid #c5d2dc;

    border-radius: 6px;

    background-color: #fff;

    transition: all 0.3s ease;

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

}

.connect2form-checkbox-label::after {

    content: '';

    position: absolute;

    left: 21px;

    top: 14px;

    transform: rotate(45deg);

    width: 5px;

    height: 10px;

    border: solid #000000;

    border-width: 0 2.5px 2.5px 0;

    opacity: 0;

    transition: opacity 0.3s ease;

}

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

    border-color: #4a90e2;

}

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

    background-color: #4a90e2;

    border-color: #4a90e2;

}

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

    background-color: #4a90e2;

    border-color: #4a90e2;

}

.connect2form-checkbox-label input[type="checkbox"]:checked ~ ::after, .connect2form-checkbox-label:has(input[type="checkbox"]:checked)::after {

    opacity: 0.3;

}

/* Focus states for accessibility */

.connect2form-radio-label input[type="radio"]:focus + span::before, .connect2form-checkbox-label input[type="checkbox"]:focus + span::before {

    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.2);

}

/* Disabled states */

.connect2form-radio-label input[type="radio"]:disabled + span, .connect2form-checkbox-label input[type="checkbox"]:disabled + span {

    opacity: 0.5;

    cursor: not-allowed;

}

.connect2form-radio-label input[type="radio"]:disabled::before, .connect2form-checkbox-label input[type="checkbox"]:disabled::before {

    background-color: #f5f5f5;

    border-color: #ddd;

}

/* Image Choice Fields */

.connect2form-image-choice {

    display: inline-block;

    margin: 0 10px 10px 0;

    text-align: center;

    cursor: pointer;

}

.connect2form-image-choice input[type="radio"] {

    display: none;

}

.connect2form-image-choice img {

    max-width: 150px;

    height: auto;

    border: 2px solid transparent;

    transition: border-color 0.3s ease;

}

.connect2form-image-choice input[type="radio"]:checked + img {

    border-color: #2271b1;

}

.connect2form-image-choice .choice-label {

    display: block;

    margin-top: 5px;

    font-size: 12px;

}

/* File Upload Field */

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

    padding: 10px;

    border: 2px dashed #ddd;

    background: #f9f9f9;

    width: 100%;

    cursor: pointer;

}

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

    border-color: #2271b1;

}

/* Submit Button */

.connect2form-submit-wrapper {

    margin-top: 0;

    padding-top: 25px;

    border-top: 2px solid #e1e8ed;

    text-align: left;

}

.connect2form-submit {

    padding: 16px 48px;

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

    color: #fff;

    border: none;

    font-size: 16px;

    cursor: pointer;

    transition: all 0.3s ease;

    min-width: 145px;

    text-transform: uppercase;

    border-radius: 10px;

    font-weight: 600;

    letter-spacing: 0.5px;

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

    outline: none;

    cursor: pointer;

}

.connect2form-submit:hover {
    background: linear-gradient(135deg, #357abd 0%, #2d6aa3 100%);
}

.connect2form-submit:active {

    transform: translateY(0);

}

/* Date Picker */

.connect2form-datepicker {

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px;

    padding-right: 35px;

    width: 100%;

    height: 50px;

    border: 1px solid #cbcbcb;

    border-radius: 4px;

    font-size: 14px;

    color: #333;

    background-color: #fff;

    box-sizing: border-box;

    margin-bottom: 10px;

}

.connect2form-datepicker:focus {

    outline: none;

    border-color: #007cba;

    box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);

}

.connect2form-datepicker::placeholder {

    color: #999;

    opacity: 1;

}

/* Date field styling for DD-MM-YYYY format */

.connect2form-field input[type="text"][pattern*="date"] {

    font-family: monospace;

}

/* Date field container styling */

.connect2form-field:has(.connect2form-datepicker) {

    margin-bottom: 20px;

}

.connect2form-field .connect2form-datepicker {

    margin-top: 5px;

}

/* Datepicker dropdown styling */

.datepicker-dropdown {

    position: absolute;

    z-index: 1000;

    background: white;

    border: 1px solid #ccc;

    border-radius: 8px;

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

    font-family: Arial, sans-serif;

    font-size: 14px;

    min-width: 280px;

    padding: 0;

    margin-top: 5px;

}

.datepicker-container {

    background: white;

    border: 1px solid #ddd;

    border-radius: 8px;

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

    font-family: Arial, sans-serif;

    font-size: 14px;

    padding: 15px;

    min-width: 280px;

}

.datepicker-panel {

    min-width: 280px;

}

.datepicker-panel ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 2px;

    justify-items: center;

}

.datepicker-panel li {

    padding: 8px 4px;

    text-align: center;

    cursor: pointer;

    border-radius: 4px;

    margin: 0;

    width: 100%;

    box-sizing: border-box;

    font-weight: 500;

    transition: all 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 35px;

}

.datepicker-panel li:hover {

    background-color: #f0f8ff;

    color: #007cba;

}

.datepicker-panel li.picked {

    background-color: #007cba;

    color: white;

    font-weight: bold;

}

.datepicker-panel li.disabled {

    color: #ccc;

    cursor: not-allowed;

    background-color: #f9f9f9;

}

.datepicker-panel li.muted {

    color: #999;

    background-color: #f5f5f5;

}

.datepicker-panel li.highlighted {

    background-color: #e6f3ff;

    color: #007cba;

    font-weight: bold;

}

/* Calendar header styling */

.datepicker-panel ul:first-child {

    background-color: #f8f9fa;

    border-bottom: 1px solid #e9ecef;

    padding: 10px 0;

    margin-bottom: 10px;

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 2px;

    justify-items: center;

}

.datepicker-panel ul:first-child li {

    font-weight: bold;

    color: #495057;

    cursor: default;

    width: 100%;

    padding: 8px 4px;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 35px;

    box-sizing: border-box;

}

.datepicker-panel ul:first-child li:hover {

    background-color: transparent;

    color: #495057;

}

/* reCAPTCHA */

.g-recaptcha {

    margin: 10px 0;

}

/* CAPTCHA field styling */

.connect2form-field-captcha {

    margin-bottom: 20px;

}

.connect2form-field-captcha .g-recaptcha {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 10px 0;

}

/* Ensure no label is shown for CAPTCHA fields */

.connect2form-field-captcha label {

    display: none;

}

/* Hide browser validation messages for date fields */

.connect2form-field input[type="date"]::-webkit-validation-bubble-message {

    display: none;

}

.connect2form-field input[type="date"]::-webkit-validation-bubble-arrow {

    display: none;

}

/* Prevent browser validation messages */

.connect2form-field input[type="date"]:invalid {

    box-shadow: none;

}

.connect2form-field input[type="date"]:invalid::-webkit-validation-bubble-message {

    display: none;

}

.connect2form-field.connect2form-field-text.twocol-left {

    width: 50%;

    float: left;

    padding-right: 15px;

}

.connect2form-field.connect2form-field-text.twocol-right {

    width: 50%;

    float: left;

}

.connect2form-field.connect2form-field-text.twocol-right {

    width: 50%;

    float: left;

}

.connect2form-field.connect2form-field-text.no-label label,.connect2form-field.connect2form-field-email.no-label label, .connect2form-field.connect2form-field-textarea.no-label label{

    display: none;

}

.connect2form-field.connect2form-field-text.no-label input, .connect2form-field.connect2form-field-email.no-label input, .connect2form-field.connect2form-field-textarea.no-label textarea,.connect2form-field.connect2form-field-select.no-label select{

    border:0;

    border-bottom: 1px solid #333;

}

.custom-select {

    position: relative;

}

.custom-select >select {

    display: none;

}

.selected-option {

    width: 100%;

    padding: 0px 12px;

    border: 2px solid #e1e8ed;

    border-radius: 10px;

    font-size: 14px;

    height: 50px;

    background-color: #f8f9fa;

    color: #2c3e50;

    line-height: 46px;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 16px;

    font-weight: 400;

    transition: 0.4s;

    cursor: pointer;

}

.selected-option.active {

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 15 12 9 18 15'%3e%3c/polyline%3e%3c/svg%3e");

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

}

ul.options-list {

    position: absolute;

    background-color: #f8f9fa;

    z-index: 1;

    left: 0;

    right: 0;

    list-style: none;

    padding-left: 0;

    margin: 0;

    border: 2px solid #e1e8ed;

    border-top: none;

    cursor: pointer;

    display: none;

    max-height: 200px;

    overflow: auto;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

li.option-item {

    font-size: 14px;

    padding: 6px 13px;

    text-transform: capitalize;

    transition: 0.4s;

}

li.option-item:hover {

    background-color: #135e96;

    color: #fff;

}

li.option-item.focused {

    background-color: #135e96;

    color: #fff;

    outline: 2px solid #4a90e2;

    outline-offset: -2px;

}

.selected-option:focus {

    outline: 2px solid #4a90e2;

    outline-offset: 2px;

    border-color: #4a90e2;

}

/* Responsive Design */

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

    .connect2form-image-choice img {

        max-width: 120px;

   }

    .connect2form-submit {

        width: 100%;

   }

}

/* Field Layout Styles for Frontend */

.connect2form-form-wrapper .connect2form-field[data-layout="two-column"] {

    width: 48%;

    display: inline-block;

    vertical-align: top;

    box-sizing: border-box;

}

.connect2form-form-wrapper .connect2form-field[data-layout="two-column"]:nth-child(2n) {

    margin-left: 0;

}

.connect2form-form-wrapper .connect2form-field[data-layout="three-column"] {

    width: 31%;

    display: inline-block;

    margin-right: 2%;

    vertical-align: top;

    box-sizing: border-box;

}

.connect2form-form-wrapper .connect2form-field[data-layout="three-column"]:nth-child(3n) {

    margin-right: 0;

}



/* .connect2form-form-wrapper.multi-column .connect2form-field {

    margin-bottom: 20px;

}

*/

/* Responsive adjustments for multi-column layouts */

@media (max-width: 768px) {

    .connect2form-form-wrapper .connect2form-field[data-layout="two-column"], .connect2form-form-wrapper .connect2form-field[data-layout="three-column"] {

        width: 100%;

        margin-right: 0;

   }

    .connect2form-form-wrapper.multi-column {

        flex-direction: column;

        gap: 0;

   }

}

/* Phone Number Field Styling */

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

    width: 100%;

    padding: 0px 12px;

    border: 1px solid #cbcbcb;

    font-size: 14px;

    height: 50px;

    background-color: #fff;

    color: #333;

}

.connect2form-field input[type="tel"]:focus {

    border-color: #2271b1;

    box-shadow: 0 0 0 1px #2271b1;

    outline: none;

}

.connect2form-field input[type="tel"]::placeholder {

    color: #333;

}

/* Phone number validation styling */

.connect2form-field input[type="tel"]:invalid {

    border-color: #dc3232;

}

.connect2form-field input[type="tel"]:valid {

    border-color: #46b450;

}

/* Conditional Fields */

.connect2form-field[data-conditional="true"] {

    transition: all 0.3s ease;

}

.connect2form-field[data-conditional="true"]:not([style*="display: none"]) {

    animation: slideDown 0.3s ease;

}

.connect2form-field[data-conditional="true"][style*="display: none"] {

    animation: slideUp 0.3s ease;

}

@keyframes slideDown {

    from {

        opacity: 0;

        max-height: 0;

        margin-bottom: 0;

   }

    to {

        opacity: 1;

        max-height: 500px;

        margin-bottom: 20px;

   }

}

@keyframes slideUp {

    from {

        opacity: 1;

        max-height: 500px;

        margin-bottom: 20px;

   }

    to {

        opacity: 0;

        max-height: 0;

        margin-bottom: 0;

   }

}

/* Disabled required fields when hidden */

.connect2form-field[data-conditional="true"][style*="display: none"] input[required], .connect2form-field[data-conditional="true"][style*="display: none"] select[required], .connect2form-field[data-conditional="true"][style*="display: none"] textarea[required] {

    pointer-events: none;

}

.datepicker-panel.datepicker-hide{

   display: none;

}

/* Ensure datepicker can be hidden */

.datepicker-dropdown.hidden, .datepicker-container.hidden {

    display: none;

}

/* Manual hide class */

.datepicker-hidden {

    display: none;

    visibility: hidden;

    opacity: 0;

}

/* Force hide datepicker when hidden */

.datepicker-dropdown[style*="display: none"], .datepicker-container[style*="display: none"] {

    display: none;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

}

/* Loading Spinner for Submit Button */

.connect2form-loading {

    position: relative;

}

.connect2form-spinner {

    display: inline-block;

    width: 16px;

    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-left-color: #ffffff;

    border-radius: 50%;

    animation: connect2form-spin 1s linear infinite;

    margin-right: 8px;

    vertical-align: middle;

}

.connect2form-loading-text {

    vertical-align: middle;

}

@keyframes connect2form-spin {

    0% {

        transform: rotate(0deg);

   }

    100% {

        transform: rotate(360deg);

   }

}

/* Loading state for different button styles */

.connect2form-submit.connect2form-loading {

    cursor: not-allowed;

    opacity: 0.8;

}

.connect2form-submit.connect2form-loading:hover {

    opacity: 0.8;

}

/* Ensure spinner is visible on dark buttons */

.connect2form-submit.connect2form-loading .connect2form-spinner {

    border-color: rgba(255, 255, 255, 0.3);

    border-left-color: #ffffff;

}

/* Ensure spinner is visible on light buttons */

.connect2form-submit[style*="background: #fff"], .connect2form-submit[style*="background:#fff"], .connect2form-submit[style*="background: white"], .connect2form-submit.light-button .connect2form-spinner {

    border-color: rgba(0, 0, 0, 0.3);

    border-left-color: #000000;

}

/* Image Choice Field Styles */

.connect2form-image-choice {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}

.connect2form-image-choice-vertical {

    flex-direction: column;

}

.connect2form-image-choice-horizontal {

    flex-direction: row;

}

.connect2form-image-choice-item {

    position: relative;

    cursor: pointer;

    border: 2px solid #ddd;

    border-radius: 8px;

    padding: 10px;

    transition: all 0.3s ease;

    background: #fff;

    min-width: 120px;

    text-align: center;

}

.connect2form-image-choice-item:hover {

    border-color: #0073aa;

    box-shadow: 0 2px 8px rgba(0, 115, 170, 0.2);

}

.connect2form-image-choice-item input[type="radio"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

.connect2form-image-choice-item input[type="radio"]:checked + .image-choice-content {

    background: #0073aa;

    color: #fff;

}

.connect2form-image-choice-item input[type="radio"]:checked + .image-choice-content .image-choice-image {

    opacity: 0.9;

}

.connect2form-image-choice-item input[type="radio"]:checked {

    border-color: #0073aa;

}

.image-choice-content {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 5px;

    border-radius: 4px;

    transition: all 0.3s ease;

}

.image-choice-image {

    max-width: 100%;

    height: auto;

    max-height: 120px;

    object-fit: cover;

    border-radius: 4px;

    transition: opacity 0.3s ease;

}

.image-choice-label {

    font-weight: 500;

    font-size: 14px;

    line-height: 1.2;

}

/* Responsive adjustments for image choice */

@media (max-width: 768px) {

    .connect2form-image-choice-horizontal {

        flex-direction: column;

   }

    .connect2form-image-choice-item {

        min-width: 100px;

   }

    .image-choice-image {

        max-height: 100px;

   }

}

/* ===================================================== FIELD SIZE STYLES ===================================================== */

/* Small field size */

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

    max-width: 300px;

}

/* Medium field size (default) */

.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: 500px;

}

/* Large field size */

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

    max-width: 100%;

}

/* ===================================================== FIELD LAYOUT STYLES ===================================================== */

/* Single column layout (default) */

.connect2form-field.layout-single {

    width: 100%;

}

.connect2form-field-radio.layout-single, .connect2form-field-checkbox.layout-single {

    width: auto;

}

/* Two column layout */

.connect2form-field.layout-two-columns {

    width: 50%;

    display: inline-block;

    vertical-align: top;

    margin-right: 0;

    box-sizing: border-box;

}

/* .connect2form-field.layout-two-columns:nth-child(2n) {

    margin-right: 0;

}

*/

/* Clear floats after two-column fields */

.connect2form-field.layout-two-columns:nth-child(2n)::after {

    content: "";

    display: table;

    clear: both;

}

/* .connect2form-field.layout-three-columns:nth-child(3n) {

    margin-right: 0;

}

*/

/* ===================================================== RESPONSIVE LAYOUT ADJUSTMENTS ===================================================== */

@media (max-width: 768px) {

   /* Stack two-column layout on mobile */

    .connect2form-field.layout-two-columns {

        width: 100%;

        margin-right: 0;

   }

   /* Stack three-column layout on mobile */

    .connect2form-field.layout-three-columns {

        width: 100%;

        margin-right: 0;

   }

   /* All field sizes become full width on mobile */

    .connect2form-field.field-size-small input[type="text"], .connect2form-field.field-size-small input[type="email"], .connect2form-field.field-size-small input[type="phone"], .connect2form-field.field-size-small input[type="number"], .connect2form-field.field-size-small input[type="date"], .connect2form-field.field-size-small select, .connect2form-field.field-size-small textarea, .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 {

        max-width: 100%;

   }

}

/* ===================================================== CONDITIONAL LOGIC - Hidden fields ===================================================== */

.connect2form-field[data-conditional="true"] {

    display: none;

}

.connect2form-field[data-conditional="true"].connect2form-field-visible {

    display: block;

    position: relative;

}

/* ===================================================== CONSENT FIELD STYLING ===================================================== */

.connect2form-consent-field {

    margin-bottom: 0;

}

.connect2form-consent-label {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    cursor: pointer;

    font-size: 14px;

    line-height: 1.4;

}

.connect2form-consent-label input[type="checkbox"] {

    margin: 0;

    flex-shrink: 0;

    margin-top: 2px;

}

.connect2form-consent-label .consent-text {

    flex: 1;

}

.connect2form-consent-label .consent-text a {

    color: #0073aa;

    text-decoration: underline;

}

.connect2form-consent-label .consent-text a:hover {

    color: #005177;

}

/* Error styling for consent fields */

.connect2form-field.error .connect2form-consent-label {

    color: #dc3232;

}

.connect2form-field.error .connect2form-consent-label input[type="checkbox"] {

    border-color: #dc3232;

}

/* ===================================================== HIDE LABEL FUNCTIONALITY ===================================================== */

.connect2form-field.hide-label label {

    display: none;

}

.connect2form-field.hide-label .connect2form-fieldset-legend {

    display: none;

}

/* For consent fields with hide label */

.connect2form-consent-field.hide-label {

   /* Consent fields don't have separate labels, so this is mainly for consistency */

   display: block; /* Placeholder to avoid empty ruleset */

}

/* Radio and Checkbox Field Legends */

.connect2form-fieldset-legend {

    display: block;

    visibility: visible;

    opacity: 1;

    font-weight: 600;

    margin-bottom: 8px;

    color: #333;

    font-size: 14px;

    line-height: 1.4;

}

.connect2form-fieldset-legend .connect2form-label-content {

    display: inline-block;

}

.connect2form-fieldset-legend .required {

    color: #dc3232;

    margin-left: 2px;

}

table.has-fixed-layout {

    width: 100%;

}

/* Select Dropdown - Custom Arrow */

.connect2form-field select {

    padding: 14px 40px 14px 16px;

    border: 2px solid #e1e8ed;

    border-radius: 10px;

    background-color: #f8f9fa;

    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");

    background-repeat: no-repeat;

    background-position: right 14px center;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    font-size: 15px;

    color: #2c3e50;

    transition: all 0.3s ease;

    /* Custom colors will be applied via more specific rules below */

}

.connect2form-field select:hover {

    border-color: #c5d2dc;

    background-color: #ffffff;

}

.connect2form-field select:focus {

    border-color: #4a90e2;

    background-color: #ffffff;

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

    outline: none;

}



.connect2form-field textarea {

    padding: 14px 16px;

    border: 2px solid #e1e8ed;

    border-radius: 10px;

    background-color: #f8f9fa;

    font-size: 15px;

    color: #2c3e50;

    min-height: 120px;

    resize: vertical;

    transition: all 0.3s ease;

    line-height: 1.6;

}

.connect2form-field textarea:hover {

    border-color: #c5d2dc;

    background-color: #ffffff;

}

.connect2form-field textarea:focus {

    border-color: #4a90e2;

    background-color: #ffffff;

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

    outline: none;

}

/* File Input - Modern Design */

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

    padding: 14px;

    border: 2px dashed #c5d2dc;

    border-radius: 10px;

    background-color: #f8f9fa;

    cursor: pointer;

    transition: all 0.3s ease;

}

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

    border-color: #4a90e2;

    background-color: #ffffff;

}

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

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

    color: #ffffff;

    border: none;

    padding: 10px 20px;

    border-radius: 6px;

    margin-right: 12px;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    transition: all 0.3s ease;

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

}

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

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

    transform: translateY(-1px);

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

}

.connect2form-field input::placeholder, .connect2form-field textarea::placeholder {

    color: #95a5a6;

    opacity: 1;

}

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

    .connect2form-submit {

        width: 100%;

        padding: 14px 24px;

   }

}

.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;

    font-size: 0;

}

.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;

    min-width: 14px;

    display: inline-block;

    vertical-align: middle;

    position: relative;

    top: -1px;

}

.connect2form-field label.connect2form-consent-label {

    padding-left: 25px;

    position: relative;

    font-size: 14px;

    font-weight: 400;

}

.connect2form-field label.connect2form-consent-label input {

    position: absolute;

    left: 0;

    top: 0;

    min-height: 14px;

    min-width: 14px;

}







/* Preview CSS Define Here */

.preview-header, .preview-actions {

    text-align: center;

}

.preview-header p {

    font-size: 20px;

    letter-spacing: 1px;

}

.form-preview-container .connect2form-field input[type="text"], .form-preview-container .connect2form-field input[type="email"], .form-preview-container .connect2form-field input[type="tel"], .form-preview-container .connect2form-field input[type="number"], .form-preview-container .connect2form-field input[type="phone"], .form-preview-container .connect2form-field input[type="date"], .form-preview-container .connect2form-field input[type="url"], .form-preview-container .connect2form-field input[type="password"], .form-preview-container .connect2form-field select {

    height: 53px;

}

/* ===================================================== FINAL OVERRIDE FOR SELECT AND NUMBER FIELDS ===================================================== */

/* These rules must come at the very end to ensure they override all other rules */