/* Custom Select2 Dropdown Checkbox Styles for Contact Form 7 */
.custom-select2-option {
    display: flex;
    align-items: center;
    gap: 12px;
}

.custom-select2-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background-color: #fff;
}

/* Ensure background of dropdown list item stays clean */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: transparent;
    color: inherit;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f8f9fa;
    color: inherit;
}

/* When the option is selected by Select2 */
.select2-results__option[aria-selected="true"] .custom-select2-checkbox {
    background-color: #61CE70; /* Brand green */
    border-color: #61CE70;
}

.select2-results__option[aria-selected="true"] .custom-select2-checkbox::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Ensure the select container styling matches the design */
.select2-container .select2-selection--single {
    height: 52px;
    display: flex;
    align-items: center;
    border: 1px solid #ededed;
    border-radius: 0;
    font-family: inherit;
    font-size: 16px;
    outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal;
    color: #212529;
    padding-left: 15px;
    padding-right: 30px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 12px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* =========================================
   Contact Form 7 Validation & Alignment Fixes
   ========================================= */

/* Add red border to invalid inputs */
.wpcf7-not-valid {
    border-color: #dc3232 !important;
}

/* Add red border to Select2 if it is invalid */
.wpcf7-not-valid + .select2-container .select2-selection--single {
    border-color: #dc3232 !important;
}

/* Improve styling and spacing of the red error text */
.wpcf7-not-valid-tip {
    font-size: 14px;
    margin-top: 6px;
    color: #dc3232;
    text-align: left;
    display: block;
}

/* Perfect alignment for the submit button and spinner */
.wpcf7 form .text-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem; /* Equivalent to mt-3 */
}
@media (min-width: 768px) {
    .wpcf7 form .text-end {
        margin-top: 1.5rem; /* Equivalent to mt-md-4 */
    }
}
.wpcf7 form .text-end .btn {
    margin-top: 0 !important; /* Move margin to container for perfect flex alignment */
}
.wpcf7-spinner {
    order: -1; /* Move spinner to the left of the button */
    margin: 0 15px 0 0 !important; /* Space between spinner and button */
    vertical-align: middle;
}

/* Improve the main response output box (the yellow box at the bottom) */
.wpcf7 form .wpcf7-response-output {
    margin: 25px 0 0 0 !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    background-color: #f8d7da !important; /* Light red/pink bg */
    border: 1px solid #f5c6cb !important; /* Red border */
    color: #721c24 !important; /* Dark red text */
    text-align: left;
    font-size: 15px;
}

/* Success message box (when mail is sent) */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px;
    right: 12px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}