/* ==========================================
   OJA EDE SETTINGS
========================================== */

:root{

    --primary:#0F9D58;
    --primary-dark:#087443;

    --danger:#E53935;

    --background:#F5F7FA;

    --card:#FFFFFF;

    --text:#222222;

    --text-light:#7B7B7B;

    --border:#ECECEC;

    --shadow:
    0 12px 30px rgba(0,0,0,.08);

    --radius:24px;

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

    background:var(--background);

    font-family:Poppins,sans-serif;

    color:var(--text);

    padding:22px 18px 130px;

}

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

.settings-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.settings-header h2{

    font-size:24px;

    font-weight:700;

}

.back-btn{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:var(--shadow);

    cursor:pointer;

    font-size:18px;

}

/* ==========================================
SECTION
========================================== */

.settings-section{

    background:var(--card);

    border-radius:24px;

    padding:22px;

    margin-bottom:22px;

    box-shadow:var(--shadow);

}

.settings-section h3{

    margin-bottom:18px;

    font-size:18px;

    font-weight:700;

}

/* ==========================================
LIST
========================================== */

.settings-list{

    display:flex;

    flex-direction:column;

}

.settings-list a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    text-decoration:none;

    color:inherit;

    padding:16px 0;

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

    transition:.25s;

}

.settings-list a:last-child{

    border-bottom:none;

}

.settings-list a:hover{

    transform:translateX(5px);

}

.settings-list a i:first-child{

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EDF8F2;

    color:var(--primary);

    margin-right:15px;

    flex-shrink:0;

}

.settings-list span{

    flex:1;

    font-size:15px;

    font-weight:500;

}

.fa-chevron-right{

    color:#BDBDBD;

}

/* ==========================================
SWITCHES
========================================== */

.setting-switch{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 0;

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

}

.setting-switch:last-child{

    border-bottom:none;

}

.setting-switch>div{

    display:flex;

    align-items:center;

    flex:1;

}

.setting-switch i{

    width:42px;

    height:42px;

    border-radius:14px;

    background:#EDF8F2;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:15px;

}

.switch{

    position:relative;

    width:55px;

    height:30px;

}

.switch input{

    display:none;

}

.slider{

    position:absolute;

    inset:0;

    border-radius:50px;

    background:#CFCFCF;

    transition:.3s;

}

.slider::before{

    content:"";

    position:absolute;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#fff;

    left:3px;

    top:3px;

    transition:.3s;

}

.switch input:checked+.slider{

    background:var(--primary);

}

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

    transform:translateX(25px);

}

/* ==========================================
DANGER
========================================== */

.danger-btn{

    width:100%;

    border:none;

    border-radius:18px;

    padding:16px;

    margin-top:12px;

    background:var(--danger);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.danger-btn:hover{

    background:#C62828;

    transform:translateY(-2px);

}

.danger-btn i{

    margin-right:8px;

}

/* ==========================================
ANIMATION
========================================== */

.settings-section{

    animation:fadeUp .5s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
DARK MODE
========================================== */

body.dark{

    --background:#101418;

    --card:#1D2228;

    --text:#F4F4F4;

    --text-light:#B8B8B8;

    --border:#343A40;

}

body.dark .back-btn{

    background:var(--card);

    color:var(--text);

}

body.dark .settings-section{

    background:var(--card);

}

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

@media(max-width:768px){

.settings-header h2{

    font-size:22px;

}

.settings-section{

    padding:18px;

}

}