/* ================= GLOBAL ================= */

body{
margin:0;
font-family:Arial, sans-serif;
background:#fafafa;
overflow-x:hidden;
}


/* ================= HEADER ================= */

header{
text-align:center;
padding-top:12px;
}

header h1{
margin:0;
font-size:26px;
letter-spacing:2px;
}

header h2{
margin:4px 0 0;
font-size:13px;
color:#666;
}


/* ================= PAGE SYSTEM ================= */

.page{
display:none;
padding-top:10px;
padding-bottom:90px; /* space for bottom nav */
}

.page.active{
display:block;
}


/* ================= OUTFIT CARD ================= */

.outfit{

position:relative;

width:240px;

margin:30px auto;

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

background:white;

padding:20px 0;

border-radius:20px;

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

overflow:visible;

transition:0.25s;
}

.outfit:hover{
transform:translateY(-6px);
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}


/* ================= CLOTHING ================= */

/* clothing */

.top{
width:220px;
position:relative;
z-index:2;
}

.bottom{
width:180px;
margin-top:-45px;
position:relative;
z-index:1;
}

.shoe{
width:135px;
margin-top:-10px;
position:relative;
z-index:0;
}

.top,
.bottom,
.shoe{
transition:transform .25s ease;
cursor:pointer;
}

/* hover animations */

.top:hover{
transform:scale(1.05);
}

.bottom:hover{
transform:scale(1.08);
z-index:5;
}

.shoe:hover{
transform:scale(1.05) translateY(-5px);
z-index:6;
}

/* ================= HISTORY PAGE ================= */

#historyContainer{
display:flex;
flex-direction:column;
gap:50px;
align-items:center;
}


/* ================= PRESETS ================= */

.preset-wrapper{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
margin-top:20px;
}

.preset-scroll{
display:flex;
overflow-x:auto;
overflow-y:hidden;
gap:40px;
padding:10px 20px;
scroll-behavior:smooth;
scroll-snap-type:x mandatory;
}

.preset-scroll .outfit{
flex:0 0 auto;
scroll-snap-align:center;
}


/* hide scrollbar */

.preset-scroll::-webkit-scrollbar{
display:none;
}


/* ================= PRESET BUILDER ================= */

#presetBuilder{

display:flex;
flex-direction:column;

align-items:center;

gap:20px;

margin-top:40px;

}

.picker{

width:220px;
height:80px;

border:2px dashed #bbb;

border-radius:12px;

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

font-size:18px;

cursor:pointer;

transition:0.2s;

background:white;

}

.picker:hover{
background:#f3f3f3;
border-color:black;
}


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



#itemChooser{

position:fixed;

bottom:120px;
left:50%;

transform:translateX(-50%);

background:white;

padding:25px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,0.2);

display:flex;
flex-wrap:wrap;

gap:20px;

justify-content:center;

z-index:500;

max-width:80vw;
}

#itemChooser img{

width:100px;

cursor:pointer;

transition:0.2s;

}

#itemChooser img:hover{
transform:scale(1.1);
}


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

#savePresetBtn,
#randomBtn{

position:fixed;

bottom:80px;
left:50%;

transform:translateX(-50%);

padding:14px 40px;

background:black;
color:white;

border:none;
border-radius:30px;

font-size:16px;

cursor:pointer;

transition:0.2s;

box-shadow:0 6px 15px rgba(0,0,0,0.2);

}

#savePresetBtn:hover,
#randomBtn:hover{
transform:translateX(-50%) scale(1.05);
}


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

#infoPanel{

position:fixed;

top:0;
right:-380px;

width:360px;
height:100vh;

background:#1f1f1f;
color:white;

padding:30px;

transition:0.35s;

text-align:center;

z-index:1000;

box-shadow:-10px 0 40px rgba(0,0,0,0.4);

box-sizing:border-box;

}

body.panel-open #infoPanel{
right:0;
}

#infoPanel img{

width:200px;

margin-top:10px;

background:white;

padding:10px;

border-radius:12px;

}

#infoPanel button{

margin-top:25px;

padding:10px 20px;

border:none;
border-radius:10px;

background:white;
cursor:pointer;

}


/* ================= INSTAGRAM STYLE NAV ================= */

#bottomNav{

position:fixed;

bottom:0;
left:0;

width:100%;
height:60px;

background:white;

display:flex;

justify-content:space-around;
align-items:center;

box-shadow:0 -5px 20px rgba(0,0,0,0.08);

z-index:200;

}

#bottomNav button{

border:none;
background:none;

cursor:pointer;

transition:0.2s;

}

#bottomNav button:hover{
transform:scale(1.2);
}

.material-symbols-outlined{
font-size:28px;
}