/**
 * Auth Icon Fix
 * This CSS ensures Font Awesome icons are properly displayed in login/registration forms across all browsers
 */

/* Reset any existing styles that might be affecting the icons */
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none * {
    display: none;
}

/* Specific styling for the icon container in login/registration forms */
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    padding-left: 1rem !important;
}

/* Ensure only one icon is displayed */
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas:first-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #10b981 !important; /* text-green-500 */
}

/* Adjust input padding to accommodate the icon */
input[type="email"],
input[type="password"],
input[type="text"] {
    padding-left: 3rem !important;
}

/* Specific fixes for each icon type to ensure proper rendering */
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas.fa-envelope,
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas.fa-lock,
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas.fa-user,
.absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas.fa-ticket-alt {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure proper positioning in Firefox */
    .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

/* Fix for Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure proper positioning in Chrome */
    .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

/* Fix for Safari */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Ensure proper positioning in Safari */
        .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
        }
    }
}