/* =====================================
   X-Rider v0.1
   Main Theme
===================================== */


* {
    box-sizing: border-box;
}


/* GLOBAL */

body {

    margin: 0;

    padding: 0;

    min-height: 100vh;

    background: #121212;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

}



/* APP */

#app {

    min-height: 100vh;

    padding-bottom: 90px;

}




/* HEADER */

.top-header {

    padding: 25px 20px 15px;

}


.top-header h1 {

    margin: 0;

    font-size: 34px;

    font-weight: 700;

    letter-spacing: 1px;

}


.top-header p {

    margin-top: 6px;

    color: #bdbdbd;

    font-size: 15px;

}





/* MAIN */

#page-content {

    padding: 10px 20px;

}





/* GENERAL CARD */


.card {

    background: #1e1e1e;

    border: 2px solid #D4AF37;

    border-radius: 20px;

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

}





/* VEHICLE CARD */


.vehicle-card {

    text-align: center;

    padding: 25px 15px;

}



.main-icon {

    font-size: 65px;

    color: #D4AF37;

}



.vehicle-card h2 {

    margin: 15px 0 20px;

    font-size: 22px;

}



.vehicle-info {

    display: grid;

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

    gap: 10px;

}



.vehicle-info div {

    display:flex;

    flex-direction:column;

}



.vehicle-info strong {

    color:#D4AF37;

    font-size:18px;

}



.vehicle-info span {

    font-size:12px;

    color:#bdbdbd;

    margin-top:5px;

}





/* STATISTICS */


.stats-grid {

    display:grid;

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

    gap:15px;

    margin-top:20px;

}



.stat-card {

    padding:18px;

    text-align:center;

}



.stat-card .material-icons {

    color:#D4AF37;

    font-size:32px;

}



.stat-card h3 {

    margin:10px 0 5px;

    font-size:22px;

}



.stat-card p {

    margin:0;

    color:#bdbdbd;

    font-size:13px;

}





/* ACTION BUTTONS */


.actions-grid {

    display:grid;

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

    gap:15px;

    margin-top:20px;

}



.action-button {


    min-height:110px;


    border-radius:20px;


    border:2px solid #D4AF37;


    background:#1e1e1e;


    color:white;


    font-size:16px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


}



.action-button .material-icons {


    color:#D4AF37;


    font-size:38px;


    margin-bottom:8px;


}





/* BOTTOM NAVIGATION */


.bottom-navigation {


    position:fixed;


    bottom:0;


    left:0;


    right:0;


    height:75px;


    background:#1e1e1e;


    border-top:2px solid #D4AF37;


    display:flex;


    justify-content:space-around;


    align-items:center;


}



.bottom-navigation button {


    background:none;


    border:none;


    color:white;


    display:flex;


    flex-direction:column;


    align-items:center;


    font-size:11px;


}



.bottom-navigation .material-icons {


    color:#D4AF37;


    font-size:26px;


    margin-bottom:3px;


}





/* MOBILE OPTIMIZATION */


@media(max-width:380px){


    .vehicle-info {

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

    }


}



@media(min-width:700px){


    #page-content {

        max-width:600px;

        margin:auto;

    }


}