/* =========================
   RESET & BASE
========================= */
*{
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
    user-select: none;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
/*html, body{
    height:100%;
    font-family:Poppins, sans-serif;
    background: #0f4c75;
}*/

html, body{
    font-family:Poppins, sans-serif;
    min-height:100%;
    /*
    height: 100dvh;
    overflow-y:auto;*/
    
}

/* LIGHT */
html.light body{
    background:#f1f5f9;
    color:#111;
    background-image:url('../img/bg-pattern.png');
    background-size:contain;
    
}

/* DARK */
html.dark body{
    background:#020617;
    color:#fff;
    background-image:url('../img/black-pattern.png');
    background-size:contain;
    
}
:root{
    --wallet-bg:#eef2f7;
    --bg-card:#fff;
    --bg-Nav:#fff;
    --btn:#fff;
    --text:#111;
    --text-b:#444;
    --border:#ddd;
    --textNote:blue!important;
    

    --select-bg:#ffffff;
    --searchBox:#f1f1f1;
    --search-border:#e5e7eb;
    
    --topbar-bg: linear-gradient(
        to bottom,
        rgba(255,255,255,0) calc(env(safe-area-inset-top)),
        rgba(255,255,255,0.3) calc(env(safe-area-inset-top) + 20px),
        rgba(255,255,255,1) calc(env(safe-area-inset-top) + 40px)
    );
}

html.dark{
    --wallet-bg:#0f4c75!important;
    --bg-card:#0f172a;
    --bg-Nav:#020617;
    --btn:#000;
    --text:#fff;
    --text-b: #e5e5e5;
    --border:#334155;
    --textNote:red!important;

    --select-bg:#1e293b;
    --searchBox:#334155;
    --search-border:rgba(255,255,255,0.15);
    
    --topbar-bg: linear-gradient(
        to bottom,
        rgba(15,23,42,0) calc(env(safe-area-inset-top)),
        rgba(15,23,42,0.4) calc(env(safe-area-inset-top) + 20px),
        rgba(15,23,42,1) calc(env(safe-area-inset-top) + 40px)
    );
}

.card{
    background:var(--bg-card);
    color:var(--text);
}
button, a{
    color:var(--text);
    outline: none;
}

/* =========================
   ROOT (GLOBAL VARIABLE)
========================= */
:root{
    --header-height: clamp(60px, 8vh, 90px);
    --space: clamp(10px, 2vw, 20px);
    --filter-height: 100px;
}
:root{
    --space-sm: clamp(10px, 3vw, 16px);
    --space-md: clamp(14px, 4vw, 24px);
    --space-xs: 6px;

  
    --space-lg: 30px;
    /*
    --header-height: 60px;
    --topbar-height: 150px;*/
    
    --topbar-height: clamp(120px, 15vh, 200px);
}
.title{
    font-size:14px;
    font-weight:600;
    margin-bottom:2px;
}
.titleBox{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
}
.barText{
    font-size:12px;
    opacity:0.9;
}
/* ELEMENT TARGET */
.ripple-btn{
    position: relative;
    overflow: hidden;
}

/* RIPPLE */
.ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(255,255,255,0.35);
    animation:rippleAnim 0.5s ease-out;
    pointer-events:none;
}

/* ANIMASI */
@keyframes rippleAnim{
    to{
        transform:scale(3);
        opacity:0;
    }
}

/* EFEK TEKAN */
.ripple-btn:active{
    transform: scale(0.96);
    transition: 0.1s;
}
/* =========================
   HEADER (FIXED)
========================= */
.header{
    position: fixed;
    top:0;
    left:0;
    right:0;
    height: calc(var(--header-height) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    
    background: linear-gradient(180deg, #0f4c75, #3282b8)!important;box-shadow: 0 4px 12px #0f4c75!important;
    
    color:white;

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


    transition: all .25s ease;
    z-index: 1000;
}

.backBtn{
    position:absolute;
    left:15px;
    color:#fff;
    font-size:22px;
    text-decoration:none;
}

/* =========================
   WRAPPER (KUNCI UTAMA)
========================= */
.safe-area{
    background:var(--bg-card);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.wrapper{
    height:100dvh;
    padding-top: calc(env(safe-area-inset-top) + var(--header-height) + 12px);
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    
    overflow-y:auto;
}
/* =========================
   CONTAINER
========================= */
.container{
    padding: var(--space);
    width:100%;
}
.card{
    border-radius:20px;
    padding:15px;
    padding-top: 16px;
    margin-bottom:10px;/*Jarak antara container*/
    box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* =========================
   BOTTOM NAV FINAL FIX
========================= */

.bottomNav{
    position: fixed;

    bottom:0; /* 🔥 biar radius keliatan */

    left: 50%;
    transform: translateX(-50%);

    width: calc(100%);
    max-width: 1200px;

    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));

    background: #fff;

    display: grid;
    grid-template-columns: repeat(5,1fr);

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
     z-index: 999;
}

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

.navItem{
    text-decoration:none;

    font-size:11px;

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

    padding:6px 4px;
}

.navItem.active{
    color: var(--textNote) !important;
    font-weight:600;
    background:rgba(37, 99, 235, 0.3);
    border-radius:16px;
}
.navItem.active img{
    /*transform:scale(1.1);*/
    opacity:0.7;
}
/* ICON */
.navItem i{
    width:20px;
    height:20px;
    color:#fff;
    margin-bottom:2px;
}
.navItem svg{
    width:20px;
    height:20px;
    color:var(--input-text);
    margin-bottom:2px;
}
.center{text-align:center;}

/* ICON */
.checkmark{
width:80px;
height:80px;

border-radius:50%;
border:4px solid #16a34a;
display:flex;
align-items:center;
justify-content:center;
}
.checkmark:after{
content:'';
width:25%;
height:50%;

border-right:4px solid #16a34a;
border-bottom:4px solid #16a34a;
transform:rotate(45deg);
}
/* =========================
   CENTER BUTTON
========================= */

.centerBtn{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:-25px;

    width:55px;
    height:55px;

    border-radius:50%;
    background:#16a34a;

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

    text-decoration:none;
    font-size:26px;
    color:white;

    border:4px solid white;

    box-shadow:0 6px 18px rgba(0,0,0,0.3);

    animation:ojolIdle 1.5s infinite;
}

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

@keyframes ojolIdle{
    0%{ transform:translateX(-50%) translateY(0px) rotate(0deg); }
    25%{ transform:translateX(-50%) translateY(-2px) rotate(-1deg); }
    50%{ transform:translateX(-50%) translateY(0px) rotate(1deg); }
    75%{ transform:translateX(-50%) translateY(-1px) rotate(-1deg); }
    100%{ transform:translateX(-50%) translateY(0px) rotate(0deg); }
}

/* =========================
   MOBILE FULL WIDTH
========================= */

@media (max-width:768px){
    .bottomNav{
        max-width:100%;
        
    }
}


.modalLokasi{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    display:none;
    z-index:9999;
}

.modalSheet{
    position:absolute;
    bottom:0;
    width:100%;
    background:#1e293b;
    border-radius:20px 20px 0 0;
    padding:15px;
    animation:slideUp 0.3s ease;
}
/* =========================
   PREVENT SHIFT
========================= */
.sheetOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:none;
    z-index:99999;
}

.sheetEdit{
    position:absolute;
    bottom:0;
    left:0;
    right:0;

    background:white;
    border-radius:20px 20px 0 0;

    transform: translateY(100%);
    transition:0.3s ease;

    max-height:90vh;
    overflow:auto;
}

.sheetOverlay.show .sheetEdit{
    transform: translateY(0);
}

.dragBar{
    width:50px;
    height:5px;
    background:#ccc;
    border-radius:10px;
    margin:10px auto;
}

.sheetContent{
    padding:15px;
}




.btn{
    display:block;
    width:100%;

    margin-top:12px;
    padding:14px;

    border-radius:12px;
    border:none;

    text-decoration:none;
    text-align:center;
    font-weight:600;

    
    color:#fff;
    /*background:#16a34a;  default */

    position:relative;
    overflow:hidden;

    cursor:pointer;

    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-blue{ background: linear-gradient(180deg, #0f4c75, #3282b8);box-shadow: 0 4px 12px #0f4c75;}
.btn-red{ background: linear-gradient(135deg, #ef4444, #dc2626);box-shadow: 0 4px 12px rgba(239,68,68,.7);}
.btn-gray{ background: linear-gradient(135deg, #64748b, #475569);box-shadow: 0 4px 12px rgba(100,100,100,.7);}
.btn-green{ background: linear-gradient(135deg, #22c55e, #16a34a)!important;box-shadow: 0 4px 12px rgba(34,255,94,.7);}
.btn-yellow{ background: linear-gradient(135deg, rgb(251,191,36), rgb(234,179,8)); box-shadow: 0 4px 12px rgba(251,191,36,.7);}
.btn-purple{ background: linear-gradient(135deg, #7c3aed, #9333ea); box-shadow: 0 4px 12px rgba(124,58,237,.7);}
.btn-gold{ background: linear-gradient(135deg, rgb(255,215,0), rgb(184,134,11)); box-shadow: 0 4px 12px rgba(255,215,0,.7);}
.btn-pink{ background: linear-gradient(135deg, rgb(236,72,153), rgb(219,39,119)); box-shadow: 0 4px 12px rgba(236,72,153,.7);}
.btn-stabilo{ background: linear-gradient(135deg, rgb(163,230,53), rgb(250,204,21)); box-shadow: 0 4px 12px rgba(163,230,53,.7);}

.col-blue{ color: #0f4c75;}
.col-red{ color: #ef4444;}
.col-gray{ color: #475569;}
.col-green{ color: #16a34a!important;}
.col-yellow{ color:rgb(251,191,36);}
.col-purple{ color: #7c3aed;}
.col-gold{ color: rgb(255,215,0);}
.col-pink{ color: rgb(236,72,153);}
.col-stabilo{ color: rgb(163,230,53);}
/* 🔥 efek tekan */
.btn:active{
    transform: scale(0.97);
}
/*refres page*/
/* AREA */
#pullArea{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: 0;
    overflow: visible;

    display:flex;
    justify-content:center;

    z-index:9999;
    pointer-events:none;
}

/* BOX */
#pullBox{
    margin-top: calc(env(safe-area-inset-top) + 10px);

    padding:10px 14px;
    border-radius:20px;
background:var(--select-bg);
    /*background: rgba(255,255,255,0.95);*/
    backdrop-filter: blur(10px);

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

    box-shadow:0 6px 20px rgba(0,0,0,0.15);

    transform: translateY(-80px) scale(0.9);
    opacity:0;

    transition: all 0.25s ease;
}

/* ACTIVE */
#pullBox.show{
    opacity:1;
}

/* SPINNER */
.spinner{
    width:16px;
    height:16px;

    border:2.5px solid #ccc;
    border-top:2.5px solid #16a34a;

    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

/* TEXT */
.pullText{
    color:var(--input-text);
    font-size:12px;
    
}


#pullLoader{
    position:fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    left:50%;

    transform: translateX(-50%);

    width:28px;
    height:28px;

    border:3px solid rgba(0,0,0,0.1);
    border-top:3px solid #22c55e;

    background: white;
    padding:6px;
    border-radius:50%;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);

    animation:spin 0.7s linear infinite;

    display:none;
    z-index:999999;
}

@keyframes spin{
    0%{transform:translateX(-50%) rotate(0deg);}
    100%{transform:translateX(-50%) rotate(360deg);}
}

#themeSelect{
    background:transparent;
    border:none;
    color:var(--text); /* 🔥 ini kunci */
    font-size:14px;
}

body{
    overflow-x:hidden;
}

/* RESET SELECT */
select{
    background:var(--select-bg);
    color:var(--input-text);
    border:1px solid var(--border);
}
/* OPTION */
select option{
    background:var(--select-bg);
    color:var(--input-text);
}