/* ===================================================== */
/* 🧠 FIX AUTOFILL (CHROME / EDGE / SAFARI)              */
/* ===================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    
    -webkit-box-shadow: 0 0 0px 1000px var(--auth-input-bg) inset;
    
    -webkit-text-fill-color: #fff;

    transition: background-color 9999s ease-in-out 0s;
}







/* ===================================== */
/* 🧾 INPUT                            */
/* ===================================== */
.auth__field {
    width: 100%;
}

.auth__input {
    width: 100%;
    height: 51px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #31373E;
    background: #0C0F12;
    color: #fff;
    font-size: 15px;
    outline: none;
}



/* ===================================================== */
/* ✨ FLOATING FIELD                                     */
/* ===================================================== */

.auth__floating-field {
    position: relative;
}


/* ===================================================== */
/* 🧾 FLOATING INPUT                                     */
/* ===================================================== */

.auth__input--floating {
    padding-top: 24px;
    padding-bottom: 10px;
}


/* ===================================================== */
/* 🏷 FLOATING LABEL                                     */
/* ===================================================== */

.auth__floating-label {
    position: absolute;

    top: 50%;
    left: 16px;

    transform: translateY(-50%);

    font-size: 15px;
    color: #7d8590;

    pointer-events: none;

    transition:
        top 0.18s ease,
        transform 0.18s ease,
        font-size 0.18s ease,
        color 0.18s ease;

    transform-origin: left top;
}


/* ===================================================== */
/* ✨ LABEL ACTIVE                                       */
/* ===================================================== */

.auth__input--floating:focus
+ .auth__floating-label,

.auth__input--floating:not(:placeholder-shown)
+ .auth__floating-label {
    top: 6px;
    transform: translateY(0);
    font-size: 12px;
    color: #a6a6a6;
    font-weight: 600;
}


/* ===================================================== */
/* 🎯 INPUT FOCUS                                        */
/* ===================================================== */

.auth__input--floating:focus {
    border-color: #b3b0b0;
}


/* ===================================================== */
/* ❌ INPUT ERROR                                        */
/* ===================================================== */

.auth__input--error {
    border-color: #ff4d4f !important;
}


/* ===================================================== */
/* ❌ FLOATING LABEL ERROR                               */
/* ===================================================== */

.auth__input--error
+ .auth__floating-label {

    color: #ff4d4f !important;
}


/* ===================================================== */
/* ❌ PASSWORD TOGGLE ERROR                              */
/* ===================================================== */

.auth__input--error
~ .auth__password-toggle
.auth__password-icon {

    filter:
        brightness(0)
        saturate(100%)
        invert(39%)
        sepia(97%)
        saturate(2261%)
        hue-rotate(336deg)
        brightness(101%)
        contrast(101%);
}


/* ===================================== */
/* 🔴 ERRO                             */
/* ===================================== */
.auth__error {
    font-size: 12px;
    color: #ff4d4f;
    margin-top: 16px;
}



/* ===================================== */
/* 🔘 BOTÃO                            */
/* ===================================== */
.auth__button {
    width: 100%;
    height: 50px;

    border: none;
    border-radius: 8px;

    font-weight: 600;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.auth__button--primary {
    background: #F85909;
    color: #fff;
    font-size: 16px;
}

.auth__button-loading {
    display: none;
}

.auth__button--loading .auth__button-text {
    display: none;
}

.auth__button--loading .auth__button-loading {
    display: flex;
    gap: 6px;
    align-items: center;
}



/* ===================================================== */
/* 🔐 PASSWORD FIELD                                     */
/* ===================================================== */

.auth__password-wrapper {
    position: relative;
}


/* ===================================================== */
/* 🔐 INPUT PASSWORD                                     */
/* ===================================================== */

.auth__input--password {
    padding-right: 54px;
}


/* ===================================================== */
/* 👁 PASSWORD TOGGLE                                    */
/* ===================================================== */

.auth__password-toggle {
    position: absolute;
    top: 50%;
    right: 14px;

    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


/* ===================================================== */
/* 👁 PASSWORD ICON                                      */
/* ===================================================== */

.auth__password-icon {
    width: 20px;
    height: 20px;

    display: block;
    object-fit: contain;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    /* 🎨 COR DEFINIDA */
    filter:
        invert(22%)
        sepia(6%)
        saturate(929%)
        hue-rotate(166deg)
        brightness(102%)
        contrast(92%);
}


/* ===================================================== */
/* ✨ TOUCH FEEDBACK                                     */
/* ===================================================== */

.auth__password-toggle:active
.auth__password-icon {

    transform: scale(0.92);
}


/* ===================================================== */
/* 🖥 HOVER (WEB)                                        */
/* ===================================================== */

@media (hover: hover) {

    .auth__password-toggle:hover
    .auth__password-icon {

        opacity: 0.8;
    }

}





/* ===================================== */
/* 📅 INPUT COM ÍCONE */
/* ===================================== */

.auth__input-wrapper {
    position: relative;
    width: 100%;
}

/* input ganha espaço pro ícone */
.auth__input-wrapper .auth__input {
    padding-right: 44px;
    cursor: pointer;
}

/* ícone */
.auth__input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    width: 20px;
    height: 20px;

    opacity: 0.7;

    /* CRUCIAL */
    pointer-events: none;
    filter: invert(24%) sepia(12%) saturate(462%) hue-rotate(166deg) brightness(93%) contrast(93%);
}

/* hover suave */
.auth__input-wrapper:hover .auth__input-icon {
    opacity: 1;
}




/* ===================================== */
/* 🔄 SPINNER                          */
/* ===================================== */
.spinner_auth {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}