/* ================= GLOBAL ================= */
/* redeploy */
body{
margin:0;
font-family:'Segoe UI',sans-serif;
min-height:100vh;

background:url("background.png");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

color:white;
}

/* ================= APP CONTAINER ================= */

.app-container{
max-width:520px;
margin:40px auto;
padding:20px;
}

/* ================= TITLE ================= */

h1{
font-family:'Orbitron',sans-serif;
font-size:42px;
color:#1e73ff;
letter-spacing:3px;

background:white;
padding:10px 30px;
border-radius:14px;

display:table;
margin:0 auto 10px auto;
}

/* ================= SUBTITLE ================= */

.project-tag{

display:table;
margin:10px auto 25px auto;

background:white;
color:#ffd400;

font-weight:bold;
letter-spacing:2px;

padding:6px 18px;
border-radius:10px;

}

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

.card{

background:rgba(0,70,140,0.65);
padding:22px;

border-radius:18px;

backdrop-filter:blur(10px);

margin:20px auto;
width:100%;

box-shadow:0 0 20px rgba(0,150,255,0.35);

}

/* ================= LABEL ================= */

label{

display:block;
margin-top:15px;
margin-bottom:5px;

color:#ffd400;
font-weight:bold;

}

/* ================= INPUT ================= */

input,
select{

width:100%;
padding:12px 14px;

box-sizing:border-box;

border-radius:12px;
border:2px solid #ffd400;

background:rgba(0,0,0,0.55);
color:white;

font-size:15px;
outline:none;

}

/* ================= INPUT FOCUS ================= */

input:focus,
select:focus{

border-color:#1e90ff;
box-shadow:0 0 10px rgba(30,144,255,0.7);

}

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

button{

width:100%;
padding:14px;
margin-top:20px;

border-radius:12px;
border:none;

background:linear-gradient(45deg,#ffd400,#ffb300);
color:black;

font-weight:bold;
font-size:16px;

cursor:pointer;
transition:0.3s;

}

button:hover{

transform:scale(1.03);
background:linear-gradient(45deg,#ffe74a,#ffd400);

}

/* ================= CART ================= */

.cart-heading{

color:#ffd400;
margin-bottom:10px;

}

#cartList{

margin-top:10px;

}

#cartList div{

font-size:15px;
margin-bottom:12px;

padding:12px;

background:rgba(0,0,0,0.45);
border-radius:10px;

border-left:4px solid #ffd400;

}

/* REMOVE BUTTON */

#cartList button{

background:#1e73ff;
color:white;

border:none;
padding:6px 12px;

border-radius:6px;
cursor:pointer;

margin-top:8px;
width:auto;

}

#cartList button:hover{

background:#004ecb;

}

/* ================= RESULT ================= */

.result-card{

background:rgba(0,70,140,0.65);
padding:20px;

border-radius:18px;
margin-top:20px;

backdrop-filter:blur(10px);

box-shadow:0 0 20px rgba(0,150,255,0.35);

}

.result-card h3{

color:#ffd400;

}

/* ================= SCROLL ================= */

html{

scroll-behavior:smooth;

}