*{
box-sizing:border-box;
}

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;


margin:0;
padding:20px;

}

/* MAIN CONTAINER */

.container{

max-width:520px;
height:550px;
margin:0 auto;

background:white;

padding:30px;

border-radius:16px;

box-shadow:
0 0px 10px rgba(0,0,0,.08),
0 0px 10px rgba(0,0,0,.10);

}

/* HEADINGS */

h1{
text-align:center;
margin-top:0;
font-size:28px;
}

h3{
text-align:center;
color:#444;
margin-top:10px;
}

/* STEP VISIBILITY */

.step{
display:none;
}

.step.active{
display:block;
}

/* GRID */

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

margin-top:25px;

}

/* MATERIAL CARDS */

.card{

border:2px solid #eee;

border-radius:12px;

cursor:pointer;

overflow:hidden;

background:white;

transition:.25s;

}

.card:hover{

border-color:#0077ff;

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,.08);

}

.card img{

width:100%;

height:120px;

object-fit:cover;

display:block;

}

.card span{

display:block;

padding:12px;

font-weight:600;

text-align:center;

}

/* BUTTONS */

button{

width:100%;

padding:16px;

border:none;

border-radius:10px;

font-size:17px;

margin-top:15px;

cursor:pointer;

background:linear-gradient(135deg,#0077ff,#00a2ff);

color:white;

font-weight:600;

transition:.2s;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(0,119,255,.25);

}

button.secondary{

background:#e6e6e6;

color:#333;

box-shadow:none;

}

button.secondary:hover{

background:#dcdcdc;

transform:none;

}

/* FORM INPUTS */

input,
select,
textarea{

width:100%;

padding:14px;

margin-top:12px;

border-radius:10px;

border:1px solid #ccc;

font-size:16px;

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:#0077ff;

box-shadow:0 0 0 3px rgba(0,119,255,.1);

}

/* SLIDER */

input[type=range]{

width:100%;

height:6px;

background:#e5e7eb;

border-radius:10px;

appearance:none;

}

input[type=range]::-webkit-slider-thumb{

appearance:none;

width:20px;

height:20px;

background:#0077ff;

border-radius:50%;

cursor:pointer;

}

/* SLIDER VALUE */

.slider-value{

text-align:center;

font-size:24px;

margin-top:12px;

font-weight:bold;

color:#0077ff;

}

/* PROGRESS BAR */

.progress{

height:8px;

background:#eee;

border-radius:10px;

margin-bottom:20px;

overflow:hidden;

}

.progress-bar{

height:8px;

background:linear-gradient(90deg,#0077ff,#00a2ff);

width:0%;

border-radius:10px;

transition:.4s;

}

/* LOADER */

.loader{

border:5px solid #eee;

border-top:5px solid #0077ff;

border-radius:50%;

width:40px;

height:40px;

animation:spin 1s linear infinite;

margin:30px auto;

}

@keyframes spin{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}

.center{
text-align:center;
}

/* MOBILE */

@media(max-width:500px){

.container{
padding:24px;
}

.card img{
height:100px;
}

}
input, select, textarea{
transition:border .2s ease;

.size-options{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:15px;
}

.size-card{
cursor:pointer;
border-radius:10px;
overflow:hidden;
border:2px solid #eee;
text-align:center;
background:#fff;
transition:.2s;
}

.size-card:hover{
transform:scale(1.03);
border-color:#1976d2;
}

.size-card img{
width:100%;
height:100px;
object-fit:cover;
}

.size-card span{
display:block;
padding:8px;
font-size:14px;
}