/* =========================
SETTINGS SCREEN
========================= */

.settingsScreen{

padding:20px;
min-height:100vh;
background:#f5f5f5;

}

.settingsHeader{

display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;

}

.settingsBackBtn{

width:42px;
height:42px;
border:none;
border-radius:12px;
background:#fff;
font-size:18px;

}

.settingsHeader h2{

margin:0;
font-size:22px;

}

.settingsHeader p{

margin:2px 0 0;
color:#777;
font-size:13px;

}

.settingsList{

display:flex;
flex-direction:column;
gap:15px;

}

.settingItem{

background:#fff;
border-radius:18px;
padding:18px;
display:flex;
justify-content:space-between;
align-items:center;

}

.settingLeft{

display:flex;
align-items:center;
gap:15px;

}

.settingIcon{

width:45px;
height:45px;
border-radius:14px;
background:#f1f1f1;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;

}

.settingTitle{

font-weight:700;

}

.settingSub{

font-size:12px;
color:#777;
margin-top:3px;

}

/* =========================
SWITCH
========================= */

.switch{

position:relative;
display:inline-block;
width:52px;
height:28px;

}

.switch input{

opacity:0;
width:0;
height:0;

}

.slider{

position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#ccc;
transition:.3s;
border-radius:50px;

}

.slider:before{

position:absolute;
content:"";
height:22px;
width:22px;
left:3px;
bottom:3px;
background:white;
transition:.3s;
border-radius:50%;

}

input:checked + .slider{

background:#111;

}

input:checked + .slider:before{

transform:translateX(24px);

}

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

body.darkMode{

background:#111;
color:#fff;

}

body.darkMode .settingsScreen{

background:#111;

}

body.darkMode .settingItem{

background:#1d1d1d;

}

body.darkMode .settingsBackBtn{

background:#1d1d1d;
color:#fff;

}

body.darkMode .settingIcon{

background:#2a2a2a;

}

body.darkMode .settingSub{

color:#aaa;

}
/* =========================
SETTINGS BACK BUTTON FIX
========================= */

.settingsBackBtn{

width:42px;
height:42px;

border:none;

border-radius:12px;

background:#ffffff;

color:#111111;

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

font-size:18px;

cursor:pointer;

}

/* DARK MODE */

body.darkMode .settingsBackBtn{

background:#2a2a2a !important;

color:#ffffff !important;

border:1px solid #3a3a3a;

}

/* ICON FIX */

body.darkMode .settingsBackBtn i{

color:#ffffff !important;

}

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

body.darkMode{

background:#111 !important;
color:#fff !important;

}

/* MAIN STORE */

body.darkMode #onePageStore,
body.darkMode #homeView,
body.darkMode #categoryView,
body.darkMode #cartView,
body.darkMode #accountView,
body.darkMode #productDetailView,
body.darkMode #searchScreen{

background:#111 !important;
color:#fff !important;

}

/* TOP BAR */

body.darkMode #searchContainer{

background:#1a1a1a !important;
border-bottom:1px solid #2a2a2a;

}

/* BOTTOM MENU */

body.darkMode #storeBottomMenu{

background:#1a1a1a !important;
border-top:1px solid #2a2a2a;

}

/* MENU BUTTONS */

body.darkMode .menuBtn{

color:#ddd !important;

}

body.darkMode .menuBtn.active{

color:#fff !important;

}

/* PRODUCT CARD */

body.darkMode .productCard{

background:#1c1c1c !important;
color:#fff !important;
border:1px solid #2b2b2b;

}

/* PRODUCT TITLE */

body.darkMode .productTitle{

color:#fff !important;

}

/* PRICE */

body.darkMode .productPrice{

color:#00ff95 !important;

}

/* CATEGORY BAR */

body.darkMode #categoryTopBar{

background:#111 !important;

}

/* CATEGORY BUTTON */

body.darkMode .categoryBtn{

background:#1f1f1f !important;
color:#fff !important;
border:1px solid #333;

}

/* CART ITEMS */

body.darkMode .cartItem{

background:#1c1c1c !important;
color:#fff !important;

}

/* INPUTS */

body.darkMode input,
body.darkMode textarea,
body.darkMode select{

background:#1d1d1d !important;
color:#fff !important;
border:1px solid #333 !important;

}

/* PLACEHOLDER */

body.darkMode input::placeholder,
body.darkMode textarea::placeholder{

color:#aaa !important;

}

/* POPUPS */

body.darkMode .popupBox,
body.darkMode .contactPopupBox,
body.darkMode .customerPopupBox{

background:#1a1a1a !important;
color:#fff !important;

}

/* ACCOUNT CARDS */

body.darkMode .accCard,
body.darkMode .supportCard,
body.darkMode .walletBanner,
body.darkMode .statBox{

background:#1d1d1d !important;
color:#fff !important;

}

/* SETTINGS */

body.darkMode .settingsScreen{

background:#111 !important;

}

body.darkMode .settingItem{

background:#1c1c1c !important;

}