/* =========================================================
SECTION 1 - MOBILE DEFAULTS
========================================================= */

.mobile-selectors{

display:none;

}

.burger-btn{

display:none;

}

.mobile-menu{

display:none;

}

.desktop-build-profile{

display:block;

}

/* =========================================================
SECTION 2 - MOBILE LAYOUT - QUERY
========================================================= */

@media (max-width:768px){

/* =====================================================
2A - GLOBAL WIDTHS
===================================================== */

.desktop-target-class,
.desktop-target-class *,
.desktop-target-pi,
.desktop-target-pi *{

    display:none !important;

}

.container{

padding-top:100px;

}

.sidebar{

width:100% !important;

max-width:none !important;

margin-left:0 !important;

margin-right:0 !important;

}

.control-card{

width:100% !important;

max-width:none !important;

margin:0;

}

.output{

width:100%;

max-width:none;

padding:16px;

min-height:auto;

}

.container{

width:100%;

max-width:none;

padding:120px 8px 0 8px;

}

/* =====================================================
2B - HEADER
===================================================== */

.header{

width:calc(100% - 10px);

padding:12px 14px;

}

.header-right{

display:none;

}

.burger-btn{

display:block;

background:none;

border:none;

color:white;

font-size:28px;

cursor:pointer;

flex-shrink:0;

}

.account-menu > .account-menu-btn{

display:none;

}

/* =====================================================
2C - MOBILE MENU
===================================================== */

.mobile-menu{

position:fixed;

top:90px;

left:20px;

right:20px;

bottom:20px;

background:

rgba(
8,
17,
31,
.95
);

backdrop-filter:blur(
20px
);

border-radius:24px;

padding:20px;

display:none;

flex-direction:column;

gap:12px;

z-index:99999;

max-height:calc(100dvh - 110px);

overflow-y:auto;

overscroll-behavior:contain;

-webkit-overflow-scrolling:touch;

}

.mobile-menu.open{

display:flex;

}

.account-menu-panel{

position:fixed;

top:90px;

left:20px;

right:20px;

width:auto;

max-height:calc(100dvh - 110px);

overflow-y:auto;

overscroll-behavior:contain;

-webkit-overflow-scrolling:touch;

}

#mobileAccountStatus{

color:#cbd5e1;

font-weight:700;

}

/* =====================================================
2D - MOBILE SELECTORS
===================================================== */

.mobile-selectors{

display:flex;

flex-direction:column;

gap:14px;

width:100%;

padding:0;

margin-bottom:20px;

}

.mobile-select{

width:100%;

padding:16px;

font-size:16px;

background:#0f172a;

color:white;

border:1px solid rgba(
255,
255,
255,
.08
);

border-radius:16px;

}

/* =====================================================
2E - HIDE DESKTOP SELECTORS
===================================================== */

.selector-row{

display:none;

}

.build-pill-row{

display:none;

}

/* =====================================================
2F - CARD LAYOUT
===================================================== */

.result-grid{

grid-template-columns:1fr;

}

.info-card{

padding:18px;

}

.info-title{

font-size:20px;

}

.info-text{

font-size:14px;

line-height:1.8;

}

.desktop-build-profile{

display:none;

}

.control-card{

background:none !important;

border:none !important;

box-shadow:none !important;

padding:0 !important;

margin-top:10px;

}

/* =====================================================
VEHICLE SPEC CARD
===================================================== */

.vehicle-spec-layout{

display:flex;

flex-direction:column-reverse;

gap:16px;

}

.vehicle-spec-image{

width:100%;

height:auto;

}

.vehicle-spec-image img{

width:100%;

height:auto;

display:block;

}

.vehicle-spec-grid{

grid-template-columns:1fr;

}

/* =====================================================
2G - FOOTER
===================================================== */

.footer{

padding:40px 20px;

}

.footer-logo-img{

height:56px;

}

.footer-disclaimer{

font-size:11px;

}

}

.logo-text{

font-size:13px;

letter-spacing:1px;

}

.footer-logo-text{

font-size:14px;

letter-spacing:2px;

}