/* =========================================================
PROFILE WRAPPER
========================================================= */

.pm-profile-wrapper{

    width:100%;

}

/* =========================================================
CARD
========================================================= */

.pm-profile-card{

    background:
    linear-gradient(
        180deg,
        rgba(5,10,25,.96),
        rgba(2,6,23,.98)
    );

    border-radius:32px;

    padding:38px;

    border:
    1px solid rgba(255,255,255,.06);

    overflow:hidden;

    position:relative;

    box-shadow:
    0 12px 40px rgba(0,0,0,.28);

}

/* =========================================================
GLOW
========================================================= */

.pm-profile-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(255,0,70,.08),
        transparent 35%,
        transparent 65%,
        rgba(0,120,255,.08)
    );

    pointer-events:none;

}

/* =========================================================
HEADER
========================================================= */

.pm-profile-header{

    margin-bottom:34px;

}

.pm-profile-header h2{

    color:#fff;

    font-size:42px;

    font-weight:900;

    margin:0 0 12px;

}

.pm-profile-header p{

    color:#94a3b8;

    font-size:18px;

    margin:0;

}

/* =========================================================
SUCCESS
========================================================= */

.pm-profile-success{

    background:
    rgba(0,255,153,.12);

    border:
    1px solid rgba(0,255,153,.22);

    color:#00ff99;

    padding:18px;

    border-radius:18px;

    margin-bottom:24px;

    font-weight:700;

}

/* =========================================================
ERROR
========================================================= */

.pm-profile-error{

    background:
    rgba(255,0,70,.12);

    border:
    1px solid rgba(255,0,70,.22);

    color:#ff3355;

    padding:18px;

    border-radius:18px;

    margin-bottom:24px;

    font-weight:700;

}

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

.pm-profile-form{

    display:flex;

    flex-direction:column;

    gap:26px;

}

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

.pm-profile-field{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.pm-profile-field label{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

/* =========================================================
INPUT
========================================================= */

.pm-profile-field input{

    width:100%;

    height:74px;

    border-radius:22px;

    border:
    1px solid rgba(255,255,255,.08);

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

    padding:0 24px;

    color:#fff;

    font-size:18px;

    outline:none;

    transition:.25s ease;

    box-sizing:border-box;

}

.pm-profile-field input:focus{

    border-color:
    rgba(255,0,70,.35);

    box-shadow:
    0 0 20px rgba(255,0,70,.18);

}

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

.pm-profile-field input::placeholder{

    color:#6b7280;

}

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

.pm-profile-form button{

    width:100%;

    height:78px;

    border:none;

    border-radius:24px;

    cursor:pointer;

    background:
    linear-gradient(
        135deg,
        #ff0033,
        #ff5a00
    );

    color:#fff;

    font-size:22px;

    font-weight:900;

    transition:.25s ease;

    box-shadow:
    0 0 24px rgba(255,0,70,.24);

}

.pm-profile-form button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 34px rgba(255,0,70,.35);

}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:768px){

    .pm-profile-card{

        padding:24px;

        border-radius:24px;

    }

    .pm-profile-header h2{

        font-size:28px;

    }

    .pm-profile-header p{

        font-size:15px;

    }

    .pm-profile-field label{

        font-size:15px;

    }

    .pm-profile-field input{

        height:64px;

        font-size:16px;

        border-radius:18px;

    }

    .pm-profile-form button{

        height:68px;

        font-size:18px;

        border-radius:20px;

    }

}