/* ==============================
   TREKGO COMMON CSS
   Global + Layout + Components
================================ */


/* ROOT VARIABLES */

:root{

    --forest-950:#0f2417;
    --forest-800:#173a24;
    --forest-700:#1f4d2e;
    --forest-600:#28633a;
    --forest-500:#357a49;

    --sand-50:#faf8f3;
    --sand-100:#f2efe6;

    --line:#e4e1d6;

    --ink:#1c231d;
    --ink-soft:#5c6b5e;

    --ok:#2f7d46;
    --warn:#b7791f;
    --danger:#a3372f;
    --gold:#c99b2d;

    --warn-bg:#fdecec;
    --warn-ink:#a3372f;


    font-family:
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    sans-serif;

}



/* RESET */

*{

    box-sizing:border-box;
    margin:0;
    padding:0;

}



html{

    width:100%;
    height:100%;

}



body{

    background:#12261a;

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

    min-height:100vh;

    padding:0;

    font-family:
    'Segoe UI',
    Arial,
    sans-serif;

}



/* ==============================
      APP FRAME
      (was a fake phone-bezel mockup;
      now fills the real device screen
      on mobile, and shows as a plain
      centered column on desktop)
================================ */


#phone{

    width:100%;

    max-width:480px;

    min-height:100vh;
    min-height:100dvh;

    margin:0 auto;

    background:var(--sand-50);

    position:relative;

    overflow:hidden;

    color:var(--ink);

    border-radius:0;

    border:none;

    box-shadow:none;

    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);

}


/* PAGE SCREEN SYSTEM */

.screen{

    position:absolute;

    inset:0;

    display:none;

    flex-direction:column;

    overflow-y:auto;

    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);

}



.screen.active{

    display:flex;

}



/* MAIN CONTENT WRAPPER */

.content{
    padding:18px 20px 90px;
}



/* ==============================
        TEXT
================================ */


h1,
h2,
h3,
h4{

    color:var(--ink);

}



p{

    color:var(--ink-soft);

    font-size:13.5px;

    line-height:1.5;

}



/* ==============================
        BUTTON
================================ */


.btn{

    width:100%;

    padding:14px;

    border-radius:10px;

    border:none;

    font-size:13.5px;

    font-weight:700;

    cursor:pointer;

    text-align:center;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}



.btn-primary{

    background:var(--forest-700);

    color:white;

}



.btn-primary:hover{

    background:var(--forest-600);

}



.btn-outline{

    background:white;

    color:var(--forest-700);

    border:1.5px solid var(--forest-700);

}



/* ==============================
        FORM
================================ */


.field{

    margin-bottom:14px;

}



.field label{

    display:block;

    margin-bottom:5px;

    font-size:11.5px;

    font-weight:700;

    color:var(--ink-soft);

}



.field input{

    width:100%;

    padding:12px 14px;

    border-radius:10px;

    border:1.3px solid var(--line);

    background:white;

    font-size:13px;

}



.field input:focus{

    outline:none;

    border-color:var(--forest-600);

}



/* ==============================
        TOP BAR
================================ */


.topbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px;

}



/* ==============================
        BOTTOM NAVIGATION
================================ */


.bottom-nav,
.bottomnav{


    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:70px;

    background:white;

    border-top:1px solid var(--line);

    display:flex;

    justify-content:space-around;

    align-items:center;

    z-index:50;


}



.bottom-nav a,
.bottomnav a{


    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:3px;


    text-decoration:none;

    color:var(--ink-soft);

    font-size:11px;

    font-weight:600;

}



.bottom-nav a.active,
.bottomnav a.active{

    color:var(--forest-700);

}



.bottom-nav svg,
.bottomnav svg{

    width:19px;

    height:19px;

}



/* ==============================
        CARD BASIC
================================ */


.card{

    background:white;

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

    border-radius:12px;

    padding:14px;

}



/* ==============================
        BADGE
================================ */


.badge{

    padding:4px 10px;

    border-radius:20px;

    font-size:10px;

    font-weight:700;

    background:white;

}



/* ==============================
        SCROLL
================================ */


::-webkit-scrollbar{

    width:5px;

    height:5px;

}



::-webkit-scrollbar-thumb{

    background:#b7b7b7;

    border-radius:10px;

}