/* ==========================================
   FMC BROILER MOBILE V13
   SETTING PANEL
========================================== */

/* FAB SETTINGS */

#fabSetting{

    position:fixed;

    right:18px;
    bottom:90px;

    width:58px;
    height:58px;

    border:none;
    border-radius:50%;

    background:linear-gradient(
        135deg,
        #15b45b,
        #0B8F43
    );

    color:#fff;

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

    box-shadow:
        0 10px 25px rgba(11,143,67,.35),
        0 4px 10px rgba(0,0,0,.18);

    cursor:pointer;

    transition:.25s;
    z-index:999;
}

#fabSetting:hover{

    transform:translateY(-2px);

}

#fabSetting:active{

    transform:scale(.94);

}

#fabSetting .material-symbols-rounded{

    font-size:28px;

}

/* ==========================================
   PANEL
========================================== */

#settingPanel{

    position:fixed;

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

    background:#ffffff;

    border-radius:28px 28px 0 0;

    box-shadow:
        0 -8px 30px rgba(0,0,0,.15);

    transform:translateY(105%);

    transition:.35s cubic-bezier(.22,.61,.36,1);

    z-index:998;

    padding:18px 20px 110px;

    max-height:85vh;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}

#settingPanel.show{

    transform:translateY(0);

}

/* ==========================================
   HANDLE
========================================== */

.panelHandle{

    width:70px;

    height:6px;

    border-radius:20px;

    background:#d5d5d5;

    margin:0 auto 18px;

}

/* ==========================================
   JUDUL
========================================== */

#settingPanel h2{

    text-align:center;

    margin-bottom:18px;

    color:#0B8F43;

}

/* ==========================================
   ITEM
========================================== */

.settingItem{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:16px;

    margin-bottom:10px;

    background:#f7f9fb;

    transition:.2s;

}

.settingItem:active{

    background:#e8f6ee;

    transform:scale(.98);

}

.settingItem .material-symbols-rounded{

    color:#0B8F43;

}

/* ==========================================
   MODE AKTIF
========================================== */

.modeActive{

    color:#0B8F43 !important;

}

/* ==========================================
   BACKDROP BLUR
========================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.15);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:997;

}

body.setting-open::before{

    opacity:1;

    visibility:visible;

}

/* ==========================================
   SETTING DIVIDER
========================================== */

#settingPanel hr{

    border:none;

    height:1px;

    background:rgba(0,0,0,.08);

    margin:12px 0;

}

body.dark #settingPanel hr{

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

}