/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

/* BODY */

body{
background:#f5f7fb;
}


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

.app-header{
position:fixed;
top:0;
left:0;
right:0;
height:65px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
z-index:1000;
}

.logo{
font-size:19px;
font-weight:700;
color:#0f766e;
}

.profile-btn{
background:#0f766e;
color:white;
padding:8px 14px;
border-radius:10px;
text-decoration:none;
font-size:14px;
}


/* ================= PRODUCTS ================= */

.products{
padding:15px;
margin-top:80px;
margin-bottom:90px;
}

.product-card{
background:white;
padding:18px;
border-radius:16px;
margin-bottom:20px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.product-title{
font-size:18px;
font-weight:700;
margin-bottom:6px;
}

.product-desc{
color:#555;
font-size:14px;
margin-bottom:10px;
}

.price{
color:#0f766e;
font-size:21px;
font-weight:700;
}

.buy-btn{
margin-top:12px;
width:100%;
height:48px;
border:none;
background:#0f766e;
color:white;
border-radius:12px;
font-size:16px;
font-weight:600;
}

.buy-btn:active{
transform:scale(.98);
}


/* ================= BOTTOM NAV ================= */

.bottom-nav{
position:fixed;
bottom:0;
left:0;
right:0;
height:70px;
background:white;
display:flex;
justify-content:space-around;
align-items:center;
box-shadow:0 -4px 12px rgba(0,0,0,.05);
}

.nav-btn{
text-decoration:none;
color:#333;
font-size:13px;
font-weight:600;
text-align:center;
}

.nav-btn span{
display:block;
font-size:20px;
}


/* ================= FORM UI ================= */

.form-card{
background:white;
margin:90px 15px;
padding:20px;
border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

input{
width:100%;
height:48px;
border-radius:10px;
border:1px solid #ddd;
padding-left:12px;
margin-top:12px;
font-size:15px;
}

button{
width:100%;
height:50px;
margin-top:16px;
border:none;
background:#0f766e;
color:white;
font-size:16px;
border-radius:12px;
font-weight:700;
}


/* ================= TABLE (Orders) ================= */

table{
width:100%;
background:white;
margin-top:90px;
border-collapse:collapse;
}

th,td{
padding:12px;
text-align:center;
border-bottom:1px solid #eee;
}

th{
background:#f1f5f9;
}