/* MAIN */

.profile-main{

max-width:1200px;

margin:auto;

padding:
180px 20px 80px;

display:flex;

flex-direction:column;

gap:24px;
}

/* HEADER */

.profile-header{

overflow:hidden;
}

/* BANNER */

.profile-banner-container{

position:relative;
}

.profile-banner{

width:100%;

height:260px;

object-fit:cover;

border-radius:24px;
}

/* AVATAR */

.profile-avatar-section{

margin-top:-70px;

padding-left:24px;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:12px;
}

.profile-avatar{

width:140px;
height:140px;

border-radius:50%;

object-fit:cover;

border:
4px solid rgba(0,255,153,0.3);

background:black;

box-shadow:
0 0 30px rgba(0,255,153,0.18);
}

/* NOTES */

.upload-note{

font-size:0.85rem;

color:#8f8f8f;

margin-top:4px;
}

/* BUTTONS */

.profile-upload-button,
.profile-avatar-button,
.profile-save-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:
12px 18px;

border-radius:16px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(255,255,255,0.08);

color:#d0d0d0;

cursor:pointer;

transition:0.25s;

text-decoration:none;
}

.profile-upload-button:hover,
.profile-avatar-button:hover,
.profile-save-button:hover{

transform:
translateY(-2px);

border-color:#00ff99;

color:#00ff99;

box-shadow:
0 0 20px rgba(0,255,153,0.15);
}

/* FORM */

.profile-form{

display:flex;

flex-direction:column;

gap:18px;
}

.profile-input-group{

display:flex;

flex-direction:column;

gap:10px;
}

.profile-input-group label{

font-size:0.95rem;

color:#cfcfcf;
}

/* INPUTS */

.profile-form input,
.profile-form textarea{

width:100%;

padding:
14px 16px;

border-radius:16px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:white;

outline:none;

transition:0.25s;
}

.profile-form textarea{

min-height:140px;

resize:vertical;
}

.profile-form input:focus,
.profile-form textarea:focus{

border-color:#00ff99;

box-shadow:
0 0 18px rgba(0,255,153,0.12);
}

.profile-note{

font-size:0.9rem;

color:#8f8f8f;
}

/* EXTRAS */

.extras-container{

display:flex;

flex-direction:column;

gap:22px;
}

.extra-setting{

padding:
18px;

border-radius:20px;

background:
rgba(255,255,255,0.03);

border:
1px solid rgba(255,255,255,0.06);
}

.extra-setting-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;
}

/* SWITCH */

.switch{

position:relative;

display:inline-block;

width:64px;
height:34px;
}

.switch input{

opacity:0;

width:0;
height:0;
}

.slider{

position:absolute;

cursor:pointer;

top:0;
left:0;
right:0;
bottom:0;

background:
rgba(255,255,255,0.12);

transition:0.25s;

border-radius:40px;
}

.slider::before{

position:absolute;

content:"";

height:26px;
width:26px;

left:4px;
bottom:4px;

background:white;

transition:0.25s;

border-radius:50%;
}

.switch input:checked + .slider{

background:#00ff99;

box-shadow:
0 0 18px rgba(0,255,153,0.3);
}

.switch input:checked + .slider::before{

transform:
translateX(30px);

background:black;
}

/* BADGES */

.badge-display-options{

display:none;

margin-top:18px;

padding-top:18px;

border-top:
1px solid rgba(255,255,255,0.08);
}

.badge-toggle-list{

display:flex;

flex-direction:column;

gap:14px;
}

/* SAVE */

.profile-save-section{

display:flex;

justify-content:flex-end;
}

.profile-save-button{

background:
linear-gradient(
135deg,
#00ff99,
#00d47f
);

color:black;

font-weight:700;
}

/* MOBILE */

.mobile-navbar-toggle{

display:none;
}

@media(max-width:768px){

.mobile-navbar-toggle{

position:fixed;

top:16px;
right:16px;

display:flex;

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

padding:
14px 18px;

border:none;

border-radius:18px;

background:
rgba(0,0,0,0.82);

backdrop-filter:
blur(18px);

border:
1px solid rgba(255,255,255,0.08);

color:#00ff99;

font-size:1rem;

font-weight:700;

z-index:100000;
}

.dashboard-navbar.hidden-navbar{

opacity:0;

pointer-events:none;
}

.profile-main{

padding:
120px 18px 70px;
}

.profile-banner{

height:180px;
}

.profile-avatar{

width:110px;
height:110px;
}

.profile-save-section{

justify-content:center;
}

.profile-save-button{

width:100%;
}

}

.profile-save-section{

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

flex-wrap:wrap;
}

.profile-preview-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:
14px 18px;

border-radius:18px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.08);

color:#d0d0d0;

text-decoration:none;

transition:0.25s;
}

.profile-preview-button:hover{

transform:
translateY(-2px);

border-color:#00ff99;

color:#00ff99;

box-shadow:
0 0 20px rgba(0,255,153,0.14);
}