/* =========================================
   PROFILE PREMIUM LIGHT COMPLETE
========================================= */

/* PROFILE */

.profile-card{

    width:100%;

    max-width:100%;
}

/* =========================================
   PROFILE CARD STYLE
========================================= */

.profile-card.card{

    background:rgba(255,255,255,.96);

    border:1px solid rgba(15,23,42,.06);

    border-radius:28px;

    padding:2rem;

    max-width:760px;

    margin:0 auto;

    backdrop-filter:blur(12px);

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);
}

/* =========================================
   DIVIDER
========================================= */

.profile-divider{

    border:none;

    border-top:1px solid rgba(15,23,42,.06);

    margin:2rem 0;
}

/* =========================================
   FORM GROUP
========================================= */

.form-group{

    margin-bottom:1.4rem;
}

.form-group label{

    display:block;

    margin-bottom:.6rem;

    font-size:.92rem;

    font-weight:600;

    color:#334155;
}

/* =========================================
   FORCE LIGHT INPUTS
========================================= */

.profile-card input,
.profile-card textarea,
.profile-card select{

    width:100%;

    min-height:56px;

    padding:0 1rem;

    border-radius:16px;

    border:1px solid #dbe2ea !important;

    background:#ffffff !important;

    color:#0f172a !important;

    font-size:1rem;

    outline:none;

    transition:all .25s ease;

    box-shadow:
        0 2px 4px rgba(15,23,42,.02) !important;
}

/* =========================================
   PLACEHOLDER
========================================= */

.profile-card input::placeholder,
.profile-card textarea::placeholder{

    color:#94a3b8 !important;
}

/* =========================================
   FOCUS
========================================= */

.profile-card input:focus,
.profile-card textarea:focus,
.profile-card select:focus{

    background:#ffffff !important;

    border-color:#d4af37 !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.14) !important;
}

/* =========================================
   TEXTAREA
========================================= */

.form-group textarea{

    min-height:120px;

    padding:1rem;

    resize:vertical;
}

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

.password-field{

    position:relative;

    width:100%;
}

.password-field input{

    padding-right:55px;
}

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

.toggle-password{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:38px;
    height:38px;

    border:none;

    border-radius:12px;

    background:transparent;

    color:#64748b;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:all .25s ease;

    z-index:5;
}

/* HOVER */

.toggle-password:hover{

    background:rgba(15,23,42,.06);

    color:#475569;
}

.toggle-password:hover i{

    color:#475569 !important;
}

/* ACTIVE */

.toggle-password:active{

    transform:
        translateY(-50%)
        scale(.96);
}

/* ICON */

.toggle-password i{

    font-size:15px;

    pointer-events:none;
}

/* =========================================
   PASSWORD STRENGTH
========================================= */

.password-strength{

    margin-top:.8rem;

    height:6px;

    background:#e2e8f0;

    border-radius:999px;

    overflow:hidden;
}

/* BAR */

.strength-bar{

    height:100%;

    width:0%;

    border-radius:999px;

    transition:all .35s ease;

    background:linear-gradient(
        90deg,
        #ef4444 0%,
        #f59e0b 50%,
        #22c55e 100%
    );
}

/* TEXT */

.strength-text{

    display:block;

    margin-top:.45rem;

    font-size:.84rem;

    color:#64748b;

    font-weight:600;
}

/* =========================================
   BUTTONS
========================================= */

.btn{

    min-height:56px;

    border:none;

    border-radius:16px;

    font-weight:700;

    font-size:1rem;

    cursor:pointer;

    transition:all .25s ease;
}

/* HOVER */

.btn:hover{

    transform:translateY(-2px);
}

/* =========================================
   PRIMARY BUTTON
========================================= */

.btn-primary{

    background:linear-gradient(
        135deg,
        #b8860b 0%,
        #d4af37 45%,
        #f5d76e 100%
    );

    color:#111827;

    box-shadow:
        0 10px 25px rgba(212,175,55,.18),
        inset 0 1px 0 rgba(255,255,255,.35);
}

/* HOVER */

.btn-primary:hover{

    box-shadow:
        0 18px 35px rgba(212,175,55,.28),
        inset 0 1px 0 rgba(255,255,255,.45);
}

/* =========================================
   RESPONSIVO TABLET
========================================= */

@media(max-width:768px){

    .main-content{

        padding:1rem;
    }

    .navbar{

        flex-direction:column;

        align-items:flex-start;

        gap:.8rem;
    }

    .profile-card.card{

        padding:1.5rem;

        border-radius:22px;
    }

    .form-group{

        margin-bottom:1rem;
    }

    .btn{

        width:100%;
    }

    .password-strength{

        height:6px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

    .profile-card.card{

        padding:1.2rem;

        border-radius:18px;
    }

    .profile-card input,
    .profile-card textarea,
    .profile-card select{

        min-height:52px;

        font-size:16px;
    }

    .toggle-password{

        width:34px;
        height:34px;

        right:10px;
    }

    .toggle-password i{

        font-size:14px;
    }

    .strength-text{

        font-size:.8rem;
    }

    .btn{

        min-height:52px;

        font-size:.95rem;
    }
}