/**
 * Login/Register Form Fix
 * This CSS specifically targets the login and registration forms to fix icon display issues
 */

/* Target only login and registration forms */
form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none,
form[action*="register"] .relative .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;
    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;
    z-index: 10 !important;
}

/* Remove any duplicate icons */
form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none *:not(:first-child),
form[action*="register"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none *:not(:first-child) {
    display: none !important;
}

/* Ensure the first icon is visible */
form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas:first-child,
form[action*="register"] .relative .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 */
    z-index: 20 !important;
}

/* Adjust input padding to accommodate the icon */
form[action*="login"] .relative input,
form[action*="register"] .relative input {
    padding-left: 3rem !important;
}

/* Specific fixes for each icon type */
form[action*="login"] .relative .absolute i.fas.fa-envelope,
form[action*="login"] .relative .absolute i.fas.fa-lock,
form[action*="register"] .relative .absolute i.fas.fa-envelope,
form[action*="register"] .relative .absolute i.fas.fa-lock,
form[action*="register"] .relative .absolute i.fas.fa-user,
form[action*="register"] .relative .absolute i.fas.fa-ticket-alt {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    color: #10b981 !important; /* text-green-500 */
}

/* Fix for Firefox */
@-moz-document url-prefix() {
    form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas,
    form[action*="register"] .relative .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;
    }
}

/* Fix for Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas,
    form[action*="register"] .relative .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;
    }
}

/* Fix for Safari */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        form[action*="login"] .relative .absolute.inset-y-0.left-0.flex.items-center.pl-4.pointer-events-none i.fas,
        form[action*="register"] .relative .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;
        }
    }
}