/**
 * Contact Form Icon Position Fix - OVERRIDE
 * Forces icons to be positioned correctly beside inputs
 */

/* Reset and fix field container */
.xb-contact .xb-item--field,
.contact .xb-item--field,
.contact-from .xb-item--field {
    position: relative !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* Force icon to absolute position with higher z-index */
.xb-contact .xb-item--field > span:first-child,
.contact .xb-item--field > span:first-child,
.contact-from .xb-item--field > span:first-child {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
}

/* Icon image sizing */
.xb-contact .xb-item--field > span:first-child img,
.contact .xb-item--field > span:first-child img,
.contact-from .xb-item--field > span:first-child img {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* Input fields must have left padding */
.xb-contact .xb-item--field input,
.xb-contact .xb-item--field textarea,
.xb-contact .xb-item--field select,
.contact .xb-item--field input,
.contact .xb-item--field textarea,
.contact .xb-item--field select,
.contact-from .xb-item--field input,
.contact-from .xb-item--field textarea,
.contact-from .xb-item--field select {
    padding-left: 50px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 50px !important;
    line-height: normal !important;
    display: block !important;
}

/* Nice select specific fixes with lower z-index */
.xb-contact .xb-item--field .nice-select,
.contact .xb-item--field .nice-select,
.contact-from .xb-item--field .nice-select {
    padding-left: 50px !important;
    padding-right: 40px !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    height: 60px !important;
    line-height: 58px !important;
    border: 1px solid #edf3f5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer !important;
}

/* Nice select current text */
.xb-contact .xb-item--field .nice-select .current,
.contact .xb-item--field .nice-select .current,
.contact-from .xb-item--field .nice-select .current {
    display: block !important;
    padding: 0 !important;
    line-height: 58px !important;
}

/* Nice select arrow */
.xb-contact .xb-item--field .nice-select::after,
.contact .xb-item--field .nice-select::after,
.contact-from .xb-item--field .nice-select::after {
    border-bottom-width: 2px !important;
    border-right-width: 2px !important;
    height: 8px !important;
    width: 8px !important;
    right: 20px !important;
    top: 50% !important;
    margin-top: -6px !important;
}

/* Nice select dropdown list */
.xb-contact .xb-item--field .nice-select .list,
.contact .xb-item--field .nice-select .list,
.contact-from .xb-item--field .nice-select .list {
    width: 100% !important;
    top: calc(100% + 5px) !important;
    border: 1px solid #edf3f5 !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
}

/* Nice select hover state */
.xb-contact .xb-item--field .nice-select:hover,
.contact .xb-item--field .nice-select:hover,
.contact-from .xb-item--field .nice-select:hover,
.xb-contact .xb-item--field .nice-select.open,
.contact .xb-item--field .nice-select.open,
.contact-from .xb-item--field .nice-select.open {
    border-color: #ff5e14 !important;
}

/* Hide ALL duplicate nice-selects first */
.xb-contact .xb-item--field .nice-select:nth-of-type(n+2),
.contact .xb-item--field .nice-select:nth-of-type(n+2),
.contact-from .xb-item--field .nice-select:nth-of-type(n+2) {
    display: none !important;
}

/* Hide empty nice-selects */
.xb-item--field .nice-select:empty {
    display: none !important;
}

/* Force first nice-select to show if it has content */
.xb-contact .xb-item--field .nice-select:first-of-type:not(:empty),
.contact .xb-item--field .nice-select:first-of-type:not(:empty),
.contact-from .xb-item--field .nice-select:first-of-type:not(:empty) {
    display: block !important;
}

/* Ensure select elements are always hidden */
.xb-contact .xb-item--field select,
.contact .xb-item--field select,
.contact-from .xb-item--field select {
    display: none !important;
}

/* Textarea icon position - top aligned */
.xb-contact .xb-item--field:has(textarea) > span:first-child,
.contact .xb-item--field:has(textarea) > span:first-child,
.contact-from .xb-item--field:has(textarea) > span:first-child {
    top: 20px !important;
    transform: none !important;
}

/* Focus states */
.xb-contact .xb-item--field input:focus,
.xb-contact .xb-item--field textarea:focus,
.contact .xb-item--field input:focus,
.contact .xb-item--field textarea:focus,
.contact-from .xb-item--field input:focus,
.contact-from .xb-item--field textarea:focus {
    outline: none !important;
    border-color: #ff5e14 !important;
}

/* Make sure icons stay in place */
@media screen and (max-width: 9999px) {
    .xb-contact .xb-item--field > span:first-child,
    .contact .xb-item--field > span:first-child,
    .contact-from .xb-item--field > span:first-child {
        position: absolute !important;
        left: 15px !important;
    }
    
    .xb-contact .xb-item--field input,
    .xb-contact .xb-item--field textarea,
    .xb-contact .xb-item--field .nice-select,
    .contact .xb-item--field input,
    .contact .xb-item--field textarea,
    .contact .xb-item--field .nice-select,
    .contact-from .xb-item--field input,
    .contact-from .xb-item--field textarea,
    .contact-from .xb-item--field .nice-select {
        padding-left: 50px !important;
    }
}