*{
box-sizing:border-box;
}

:root{
--primary:#2563eb;
--primary2:#06b6d4;
--bg:#f5f7fb;
--card:#ffffff;
--text:#1f2937;
--muted:#6b7280;
}
/* BODY */

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
margin:0;
padding:20px;

color:var(--text);
}

/* CONTAINER */

.container{
max-width:520px;
min-height:550px;
margin:0 auto;

background:var(--card);

padding:30px;

border-radius:18px;

border:1px solid #e5e7eb;

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

/* HEADINGS */

h1{
text-align:center;
margin-top:0;
font-size:28px;
font-weight:800;
color:var(--text);
}

h3{
text-align:center;
color:var(--muted);
margin-top:10px;
font-weight:500;
}

/* STEPS */

.step{
display:none;
}

.step.active{
display:block;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:25px;
}

/* CARDS */

.card{
border:1px solid #e5e7eb;
border-radius:14px;
cursor:pointer;
overflow:hidden;
background:#fff;
transition:.2s;
}

.card:hover{
border-color:var(--primary);
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(37,99,235,.15);
}

.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:12px;

font-size:16px;

margin-top:15px;

cursor:pointer;

background:linear-gradient(135deg,var(--primary),var(--primary2));

color:white;
font-weight:700;

transition:.2s;

box-shadow:0 10px 20px rgba(37,99,235,.2);
}

button:hover{
transform:translateY(-2px);
box-shadow:0 15px 30px rgba(6,182,212,.25);
}

button.secondary{
background:#f3f4f6;
color:var(--text);
box-shadow:none;
}

button.secondary:hover{
background:#e5e7eb;
transform:none;
}

/* INPUTS */

input,
select,
textarea{
width:100%;
padding:14px;

margin-top:12px;

border-radius:10px;

border:1px solid #d1d5db;

font-size:16px;

background:#fff;
color:var(--text);

transition:border .2s ease;
}

input:focus,
select:focus,
textarea:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* SLIDER */

input[type=range]{
width:100%;
height:6px;
background:#e5e7eb;
border-radius:10px;
appearance:none;
}

input[type=range]::-webkit-slider-thumb{
appearance:none;
width:18px;
height:18px;
background:var(--primary);
border-radius:50%;
cursor:pointer;
}

/* SLIDER VALUE */

.slider-value{
text-align:center;
font-size:24px;
margin-top:12px;
font-weight:bold;
color:var(--primary);
}

/* PROGRESS */

.progress{
height:8px;
background:#e5e7eb;
border-radius:10px;
margin-bottom:20px;
overflow:hidden;
}

.progress-bar{
height:8px;
background:linear-gradient(90deg,var(--primary),var(--primary2));
width:0%;
border-radius:10px;
transition:.4s;
}

/* LOADER */

.loader{
border:5px solid #e5e7eb;
border-top:5px solid var(--primary);
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;
}

/* SIZE OPTIONS */

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

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

.size-card:hover{
transform:scale(1.02);
border-color:var(--primary);
box-shadow:0 10px 20px rgba(37,99,235,.12);
}

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

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

/* MOBILE */

@media(max-width:500px){
.container{
padding:24px;
}

.card img{
height:100px;
}
}