/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - PROFILE SYSTEM
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| MODAL SIZE FIX
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| WRAPPER
|--------------------------------------------------------------------------
*/

.profile-modal-wrapper {
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| OVERVIEW
|--------------------------------------------------------------------------
*/

.profile-overview {
    width: 100%;

    display: grid;

    grid-template-columns:
        380px
        1fr;

    padding: 28px;
    gap: 28px;

    border-radius: 36px;

    background:
        var(--background-secondary);

    border:
        1px solid var(--card-border);

    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.45);
}

/*
|--------------------------------------------------------------------------
| MONEY ICON
|--------------------------------------------------------------------------
*/

.profile-info-card i {
    margin-right: 6px;

    color: #FF4747;
}

/*
|--------------------------------------------------------------------------
| LEFT
|--------------------------------------------------------------------------
*/

.profile-overview-left {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 34px;

    border-radius: 30px;

    background:
        var(--card-background);

    border:
        1px solid var(--card-border);
}

.profile-overview-avatar {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    overflow: hidden;

    border:
        4px solid rgba(255, 52, 52, 0.42);

    box-shadow:
        0 0 40px rgba(255, 52, 52, 0.22);
}

.profile-overview-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.profile-overview-level {
    margin-top: 30px;

    color: var(--text-color);

    font-size: 44px;
    font-weight: 900;
}

.profile-overview-xp {
    width: 100%;
    height: 16px;

    margin-top: 24px;

    border-radius: 999px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.06);
}

.profile-overview-xp-bar {
    height: 100%;

    border-radius: 999px;

    transition:
    width 0.35s ease;

    background:
        linear-gradient(
            90deg,
            var(--primary-color),
            var(--secondary-color)
        );
}

.profile-settings-switch {
    width: 100%;
    height: 64px;

    margin-top: 34px;

    border: none;
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            var(--primary-color),
            var(--secondary-color)
        );

    color: var(--text-color);

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition:
        all 0.25s ease;
}

.profile-settings-switch:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.05);

    box-shadow:
        0 12px 30px rgba(255,52,52,0.25),
        0 0 20px rgba(255,52,52,0.12);
}

/*
|--------------------------------------------------------------------------
| RIGHT
|--------------------------------------------------------------------------
*/

.profile-overview-right {
    display: flex;
    flex-direction: column;

    gap: 30px;
}

.profile-settings-title {
    color: var(--text-color);

    font-size: clamp(28px, 2.2vw, 42px);
    font-weight: 900;

    line-height: 0.95;
}

.profile-settings-subtitle {
    margin-top: 14px;

    color:
        var(--text-muted);

    font-size: 14px;
    font-weight: 700;

    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| INFO GRID
|--------------------------------------------------------------------------
*/

.profile-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(280px, 1fr));

    gap: 14px;
}

.profile-info-card {
    min-height: 110px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 28px;

    background:
        var(--card-background);

    border:
        1px solid var(--card-border);
}

.profile-info-card span {
    color:
        var(--text-muted);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.profile-info-card strong {
    margin-top: 14px;

    color: var(--text-color);

    font-size: 22px;
    font-weight: 900;

    line-height: 1.3;
}

/*
|--------------------------------------------------------------------------
| SETTINGS
|--------------------------------------------------------------------------
*/

.profile-settings-modal {
    width: 100%;

    display: grid;

    grid-template-columns:
        280px
        1fr;

    gap: 28px;

    padding: 28px;

    border-radius: 36px;

    background:
        var(--background-secondary);

    border:
        1px solid var(--card-border);

    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.45);
}

/*
|--------------------------------------------------------------------------
| SETTINGS LEFT
|--------------------------------------------------------------------------
*/

.profile-settings-left {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 34px;

    border-radius: 30px;

    background:
        var(--card-background);

    border:
        1px solid var(--card-border);
}

.profile-settings-avatar-preview {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    overflow: hidden;

    border:
        4px solid rgba(255, 52, 52, 0.42);

    box-shadow:
        0 0 40px rgba(255, 52, 52, 0.22);
}

.profile-settings-avatar-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.profile-avatar-change {
    width: 100%;
    height: 54px;

    margin-top: 22px;

    border: none;
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            var(--primary-color),
            var(--secondary-color)
        );

    color: var(--text-color);

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
}

.profile-avatar-input {
    display: none;
}

/*
|--------------------------------------------------------------------------
| SETTINGS RIGHT
|--------------------------------------------------------------------------
*/

.profile-settings-right {
    display: flex;
    flex-direction: column;

    gap: 24px;
}

/*
|--------------------------------------------------------------------------
| BACK BUTTON
|--------------------------------------------------------------------------
*/

.profile-back-button {

    width: fit-content;

    height: 56px;

    padding:
        0
        24px;

    border:
        1px solid var(--card-border);

    border-radius: 18px;

    background:
        var(--card-background);

    color:
        var(--text-color);

    font-size: 15px;

    font-weight: 800;

    cursor: pointer;

    transition:
        all 0.25s ease;
}

.profile-back-button:hover {

    background:
        var(--card-background-hover);

    border-color:
        rgba(255,52,52,0.35);

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(255,52,52,0.12),
        0 0 18px rgba(255,52,52,0.08);
}

/*
|--------------------------------------------------------------------------
| FORM GRID
|--------------------------------------------------------------------------
*/

.profile-settings-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(260px, 1fr));

    gap: 20px;
}

.profile-settings-field {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.profile-settings-label {
    color:
        var(--text-muted);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;
}

.profile-settings-input {
    width: 100%;
    height: 54px;

    padding:
        0
        20px;

    border-radius: 18px;

    border:
        1px solid var(--card-border);

    background:
        var(--card-background);

    color: var(--text-color);

    font-size: 16px;
    font-weight: 700;

    outline: none;
}

.profile-settings-input:focus {
    border-color:
        rgba(255, 52, 52, 0.42);
}

/*
|--------------------------------------------------------------------------
| THEME
|--------------------------------------------------------------------------
*/

.profile-theme-selector {
    display: flex;

    gap: 20px;
}

.profile-theme-card {
    flex: 1;

    min-height: 90px;

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

    gap: 14px;

    border-radius: 24px;

    background:
        var(--card-background);

    border:
        2px solid transparent;

    color: var(--text-color);

    text-align: center;

    cursor: pointer;
}

.profile-theme-card.active {
    border-color:
        rgba(255, 52, 52, 0.82);

    box-shadow:
        0 0 24px rgba(255, 52, 52, 0.14);
}

/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.profile-settings-actions {
    display: flex;

    gap: 20px;
}

.profile-settings-save,
.profile-settings-logout {
    flex: 1;

    height: 54px;

    border: none;
    border-radius: 22px;

    color: var(--text-color);

    font-size: 15px;
    font-weight: 900;

    cursor: pointer;
}

.profile-settings-save {
    background:
        linear-gradient(
            180deg,
            var(--primary-color),
            var(--secondary-color)
        );

    transition:
        all 0.25s ease;    
}

.profile-settings-save:hover {

    transform:
        translateY(-3px);

    filter:
        brightness(1.05);

    box-shadow:
        0 12px 30px rgba(255,52,52,0.25),
        0 0 20px rgba(255,52,52,0.12);
}

.profile-settings-logout {
    background:
        var(--card-background);

    border:
        1px solid var(--card-border);

    transition:
        all 0.25s ease;    
}

.profile-settings-logout:hover {

    background:
        var(--card-background-hover);

    border-color:
        rgba(255,52,52,0.35);

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(255,52,52,0.12),
        0 0 18px rgba(255,52,52,0.08);
}


/*
|--------------------------------------------------------------------------
| XP
|--------------------------------------------------------------------------
*/
.profile-overview-xp-text {

    margin-top: 10px;

    color:
        var(--text-muted);

    font-size: 13px;

    font-weight: 600;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .profile-overview,
    .profile-settings-modal {
        grid-template-columns: 1fr;
    }

    .profile-settings-title {
        font-size: 54px;
    }
}

/*
|--------------------------------------------------------------------------
| AAA MOBILE PROFILE SYSTEM
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    /*
    |--------------------------------------------------------------------------
    | MODAL WRAPPER
    |--------------------------------------------------------------------------
    */

    .profile-modal-wrapper {

        width: 100%;

        max-height: 100vh;

        overflow-x: hidden;

        overflow-y: auto;

        padding-bottom: 120px;
    }

    /*
    |--------------------------------------------------------------------------
    | OVERVIEW / SETTINGS
    |--------------------------------------------------------------------------
    */

    .profile-overview,
    .profile-settings-modal {

        width: 100%;

        display: flex;

        flex-direction: column;

        padding: 18px;

        gap: 18px;

        border-radius: 26px;

        min-height: auto;
    }

    /*
    |--------------------------------------------------------------------------
    | LEFT BLOCKS
    |--------------------------------------------------------------------------
    */

    .profile-overview-left,
    .profile-settings-left {

        width: 100%;

        padding: 22px;

        border-radius: 24px;
    }

    /*
    |--------------------------------------------------------------------------
    | AVATAR
    |--------------------------------------------------------------------------
    */

    .profile-overview-avatar,
    .profile-settings-avatar-preview {

        width: 120px;
        height: 120px;
    }

    /*
    |--------------------------------------------------------------------------
    | LEVEL
    |--------------------------------------------------------------------------
    */

    .profile-overview-level {

        margin-top: 20px;

        font-size: 28px;

        text-align: center;
    }

    /*
    |--------------------------------------------------------------------------
    | XP BAR
    |--------------------------------------------------------------------------
    */

    .profile-overview-xp {

        height: 12px;

        margin-top: 18px;
    }

    /*
    |--------------------------------------------------------------------------
    | BUTTONS
    |--------------------------------------------------------------------------
    */

    .profile-settings-switch,
    .profile-avatar-change,
    .profile-back-button,
    .profile-settings-save,
    .profile-settings-logout {

        width: 100%;

        height: 52px;

        border-radius: 18px;

        font-size: 14px;
    }

    /*
    |--------------------------------------------------------------------------
    | RIGHT
    |--------------------------------------------------------------------------
    */

    .profile-overview-right,
    .profile-settings-right {

        width: 100%;

        gap: 18px;
    }

    /*
    |--------------------------------------------------------------------------
    | TITLE
    |--------------------------------------------------------------------------
    */

    .profile-settings-title {

        font-size: 28px;

        line-height: 1.1;
    }

    /*
    |--------------------------------------------------------------------------
    | SUBTITLE
    |--------------------------------------------------------------------------
    */

    .profile-settings-subtitle {

        margin-top: 10px;

        font-size: 12px;

        line-height: 1.5;
    }

    /*
    |--------------------------------------------------------------------------
    | INFO GRID
    |--------------------------------------------------------------------------
    */

    .profile-overview-grid,
    .profile-settings-grid {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    /*
    |--------------------------------------------------------------------------
    | INFO CARD
    |--------------------------------------------------------------------------
    */

    .profile-info-card {

        min-height: 92px;

        padding: 16px;

        border-radius: 22px;
    }

    .profile-info-card span {

        font-size: 10px;
    }

    .profile-info-card strong {

        margin-top: 10px;

        font-size: 16px;

        line-height: 1.4;

        word-break: break-word;
    }

    /*
    |--------------------------------------------------------------------------
    | INPUTS
    |--------------------------------------------------------------------------
    */

    .profile-settings-input {

        height: 50px;

        padding:
            0
            16px;

        border-radius: 16px;

        font-size: 14px;
    }

    /*
    |--------------------------------------------------------------------------
    | LABEL
    |--------------------------------------------------------------------------
    */

    .profile-settings-label {

        font-size: 11px;
    }

    /*
    |--------------------------------------------------------------------------
    | THEME
    |--------------------------------------------------------------------------
    */

    .profile-theme-selector {

        display: flex;

        flex-direction: column;

        gap: 12px;
    }

    .profile-theme-card {

        min-height: 74px;

        border-radius: 18px;

        gap: 10px;
    }

    /*
    |--------------------------------------------------------------------------
    | ACTIONS
    |--------------------------------------------------------------------------
    */

    .profile-settings-actions {

        display: flex;

        flex-direction: column;

        gap: 12px;
    }

    /*
    |--------------------------------------------------------------------------
    | MODAL SAFE AREA
    |--------------------------------------------------------------------------
    */

    .modal-content {

        width: calc(100vw - 20px) !important;

        max-width: 100% !important;

        margin:
            10px auto !important;

        border-radius: 28px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | IOS FIX
    |--------------------------------------------------------------------------
    */

    @supports (-webkit-touch-callout: none) {

        .profile-modal-wrapper {

            padding-bottom:
                calc(
                    140px +
                    env(safe-area-inset-bottom)
                );
        }
    }
}