:root {

    --primary:#0057A8;
    --dark:#003B73;
    --yellow:#F4C400;
    --white:#ffffff;
    --text:#333333;

}


body {

    font-family:'Poppins',sans-serif;
    background:#f8f9fa;
    color:var(--text);

}



/* Header */

.main-header {

    background:var(--primary);
    color:white;
    padding:15px;

}



/* Button */

.btn-smart {

    background:var(--primary);
    color:white;
    border-radius:25px;

}


.btn-smart:hover {

    background:var(--dark);
    color:white;

}



/* Product Card */

.product-card {

    border:none;
    border-radius:15px;
    overflow:hidden;

}


.product-card img {

    width:100%;
    height:200px;
    object-fit:cover;

}



/* Mobile Bottom Menu */

.mobile-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

height:75px;

background:white;

box-shadow:0 -3px 15px rgba(0,0,0,.15);

z-index:999;

}



.mobile-nav-container{

height:100%;

display:flex;

justify-content:space-around;

align-items:center;

}



.mobile-nav a{

flex:1;

text-align:center;

text-decoration:none;

color:#0057A8;

font-size:12px;

}



.mobile-nav i{

font-size:24px;

display:block;

margin-bottom:3px;

}



.mobile-nav span{

font-size:11px;

}





.notify-menu{

position:relative;

}



.notification-badge{

position:absolute;

top:-5px;

right:25%;

background:red;

color:white;

font-size:10px;

padding:3px 6px;

border-radius:50%;

}




/* Desktop */

@media(min-width:768px){

.mobile-nav{
    display:none;
}

}


.splash{

height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:white;

}


.logo{

width:130px;
margin-bottom:20px;

}


.splash h1{

color:var(--primary);
font-weight:700;

}


.splash p{

color:#777;

}



.smart-header{

background:var(--primary);
color:white;

padding:12px;

display:flex;

justify-content:space-between;

align-items:center;

font-weight:bold;

}



.category-scroll{

display:flex;
overflow-x:auto;
gap:10px;

}


.category-btn{

background:var(--yellow);
padding:8px 15px;

border-radius:20px;

text-decoration:none;

color:#333;

white-space:nowrap;

}



.product-card{

border-radius:20px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

background:white;

}


.product-card img{

height:160px;

object-fit:cover;

}


.admin-menu{

background:#003B73;
min-height:100vh;
padding:20px;

}


.admin-menu a{

display:block;
color:white;
text-decoration:none;
padding:12px;
border-radius:10px;
margin-bottom:8px;

}


.admin-menu a:hover{

background:#0057A8;

}


.admin-logo{

color:white;
text-align:center;
margin-bottom:20px;

}



/* ADMIN PANEL */


.admin-sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#003B73;

padding:20px;

z-index:1000;

}



.admin-brand{

display:flex;

align-items:center;

gap:15px;

color:white;

margin-bottom:30px;

}



.admin-brand img{

width:55px;

background:white;

border-radius:10px;

padding:5px;

}



.admin-brand h5{

margin:0;

color:#F4C400;

}



.admin-sidebar a{

display:block;

padding:12px 15px;

color:white;

text-decoration:none;

border-radius:10px;

margin-bottom:8px;

transition:.3s;

}



.admin-sidebar a:hover{

background:#0057A8;

}



.logout{

position:absolute;

bottom:20px;

width:85%;

}



/* CONTENT */


.admin-content{

margin-left:260px;

padding:25px;

}



/* DASHBOARD CARD */


.dashboard-card{

border:none;

border-radius:20px;

padding:20px;

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

background:white;

}



.dashboard-card h3{

color:#0057A8;

font-weight:bold;

}




@media(max-width:768px){


.admin-sidebar{

position:relative;

width:100%;

height:auto;

}


.admin-content{

margin-left:0;

}


.logout{

position:relative;

}


}


.dashboard-card{

background:white;
border-radius:20px;
padding:25px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;

}


.dashboard-card:hover{

transform:translateY(-5px);

}


.dashboard-card .icon{

font-size:35px;
margin-bottom:10px;

}


.dashboard-card h3{

color:#0057A8;
font-weight:bold;

}




.topbar{

background:white;

padding:15px 25px;

display:flex;

justify-content:space-between;

box-shadow:0 2px 10px #ddd;

}


.notification{

position:relative;

font-size:22px;

text-decoration:none;

}



.notification span{

position:absolute;

top:-10px;

right:-10px;

background:#F4C400;

color:#000;

border-radius:50%;

font-size:12px;

padding:4px 7px;

}




/* ADMIN PREMIUM UI */


.admin-sidebar{

position:fixed;

top:0;

left:0;

width:260px;

height:100vh;

background:#003B73;

padding:25px 15px;

}



.admin-brand{

display:flex;

align-items:center;

gap:15px;

color:white;

margin-bottom:35px;

}



.admin-brand img{

width:55px;

background:white;

border-radius:12px;

padding:5px;

}



.admin-brand h5{

color:#F4C400;

margin:0;

}



.admin-sidebar a{

display:flex;

align-items:center;

gap:12px;

padding:13px 15px;

margin-bottom:8px;

border-radius:12px;

color:white;

text-decoration:none;

transition:.3s;

}



.admin-sidebar a:hover{

background:#0057A8;

}



.admin-sidebar i{

font-size:20px;

}



.sidebar-bottom{

position:absolute;

bottom:20px;

width:85%;

}



.admin-content{

margin-left:260px;

padding:30px;

}




.dashboard-card{

border:none;

border-radius:20px;

background:white;

padding:25px;

box-shadow:

0 8px 25px rgba(0,0,0,.08);

}



.dashboard-card h3{

color:#0057A8;

font-weight:700;

}




@media(max-width:768px){


.admin-sidebar{

position:relative;

width:100%;

height:auto;

}


.sidebar-bottom{

position:relative;

}


.admin-content{

margin-left:0;

padding:15px;

}


}



.admin-topbar{

height:60px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 25px;

margin-left:260px;

box-shadow:0 2px 10px #ddd;

}


@media(max-width:768px){

.admin-topbar{

margin-left:0;

}

}




/* CUSTOMER MOBILE APP */


.customer-header{

background:#0057A8;

color:white;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

border-radius:0 0 20px 20px;

}



.customer-header img{

width:40px;

background:white;

border-radius:8px;

padding:3px;

}



.customer-header div:first-child{

display:flex;

align-items:center;

gap:10px;

font-weight:bold;

}




.welcome-box{

background:#0057A8;

color:white;

margin:20px 0;

padding:20px;

border-radius:20px;

}



.search-box a{

display:block;

background:white;

padding:15px;

border-radius:15px;

box-shadow:0 5px 15px #ddd;

color:#777;

text-decoration:none;

}



.section-title{

margin-top:25px;

font-weight:700;

color:#003B73;

}




.category-scroll{

display:flex;

gap:12px;

overflow-x:auto;

}



.category-item{

min-width:90px;

background:#F4C400;

padding:15px;

border-radius:15px;

text-align:center;

}




.mobile-product-card{

background:white;

border-radius:20px;

padding:10px;

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

}



.mobile-product-card img{

width:100%;

height:130px;

object-fit:cover;

border-radius:15px;

}



.mobile-product-card h6{

margin-top:10px;

font-size:14px;

}



.mobile-product-card p{

color:#0057A8;

font-weight:bold;

}



.customer-page{

padding-bottom:80px;

}



.customer-page .form-control{

border-radius:20px;

padding:12px;

}



.category-item{

text-decoration:none;

color:#003B73;

background:#F4C400;

padding:10px 18px;

border-radius:25px;

font-size:14px;

white-space:nowrap;

}



.mobile-product-card{

height:100%;

transition:.3s;

}



.mobile-product-card:hover{

transform:translateY(-5px);

}



.mobile-product-card p{

font-size:18px;

margin:5px 0;

}



.product-detail-image{

background:white;

border-radius:25px;

padding:15px;

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

}



.product-detail-image img{

width:100%;

height:300px;

object-fit:cover;

border-radius:20px;

}



.product-info h3{

font-weight:700;

color:#003B73;

}



.product-price{

color:#0057A8;

font-weight:700;

}



.quantity-box input{

border-radius:15px;

}



@media(max-width:576px){

.product-detail-image img{

height:230px;

}

}


/* CART UI */


.cart-item{

background:white;

padding:15px;

border-radius:20px;

margin-bottom:15px;

box-shadow:

0 5px 15px rgba(0,0,0,.08);

}



.cart-item img{

width:100%;

height:100px;

object-fit:cover;

border-radius:15px;

}



.cart-item h6{

font-weight:700;

color:#003B73;

}



.cart-item .price{

color:#0057A8;

font-weight:bold;

}



.quantity-control{

display:flex;

gap:8px;

align-items:center;

}



.quantity-control input{

width:70px;

border-radius:10px;

}





.cart-summary{

position:sticky;

bottom:75px;

background:white;

padding:20px;

border-radius:20px;

box-shadow:

0 -5px 20px rgba(0,0,0,.1);

margin-top:20px;

}




.empty-cart{

padding:50px 20px;

}


.empty-cart i{

font-size:60px;

color:#0057A8;

}


/* CHECKOUT */


.checkout-card{

background:white;

padding:20px;

border-radius:20px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}



.checkout-card h5{

color:#003B73;

font-weight:700;

}




.checkout-product{

display:flex;

align-items:center;

gap:15px;

margin-bottom:15px;

}



.checkout-product img{

width:70px;

height:70px;

object-fit:cover;

border-radius:15px;

}



.payment-option{

background:#f8f9fa;

padding:15px;

border-radius:15px;

margin-bottom:10px;

}


/* PAYMENT */


.payment-card{

background:white;

padding:20px;

border-radius:20px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}



.payment-qr{

width:220px;

height:220px;

object-fit:contain;

display:block;

margin:auto;

}



.payment-card h5{

color:#003B73;

font-weight:700;

}


/* ORDER TRACKING */


.order-card{

background:white;

padding:20px;

border-radius:20px;

margin-bottom:20px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}



.order-status{

background:#F4C400;

padding:6px 12px;

border-radius:20px;

font-size:12px;

}



.order-info{

display:flex;

justify-content:space-between;

}



.order-track{

display:flex;

align-items:center;

justify-content:center;

}



.step{

text-align:center;

font-size:12px;

color:#aaa;

}



.step i{

font-size:22px;

}



.step.active{

color:#0057A8;

font-weight:bold;

}



.line{

height:3px;

width:35px;

background:#ddd;

margin:0 5px;

}



@media(max-width:576px){

.order-track{

overflow-x:auto;

justify-content:flex-start;

}

}


/* PROFILE */


.profile-card{

background:white;

padding:20px;

border-radius:20px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}



.profile-avatar i{

font-size:80px;

color:#0057A8;

}



.profile-menu{

display:flex;

align-items:center;

gap:15px;

padding:15px;

border-bottom:1px solid #eee;

text-decoration:none;

color:#003B73;

font-weight:500;

}



/* NOTIFICATION */


.notification-card{

background:white;

padding:15px;

border-radius:18px;

display:flex;

gap:15px;

margin-bottom:15px;

box-shadow:

0 5px 15px rgba(0,0,0,.08);

}



.notification-card i{

font-size:28px;

color:#0057A8;

}



.notification-card h6{

margin:0;

color:#003B73;

}



.notification-card p{

margin:5px 0;

color:#666;

}


/* CUSTOMER HOME */


.customer-app{

padding-bottom:90px;

background:#f8f9fa;

min-height:100vh;

}



.mobile-header{

background:#0057A8;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

color:white;

}



.brand{

display:flex;

align-items:center;

gap:12px;

}



.brand img{

width:45px;

height:45px;

background:white;

border-radius:10px;

padding:5px;

}



.cart-icon{

color:white;

font-size:24px;

}





.welcome-card{

background:#0057A8;

color:white;

margin-top:20px;

padding:20px;

border-radius:25px;

}



.search-bar{

display:block;

background:white;

color:#777;

padding:14px;

border-radius:20px;

text-decoration:none;

margin-top:15px;

}





.home-title{

margin-top:25px;

font-weight:700;

color:#003B73;

}





.category-wrapper{

display:flex;

gap:12px;

overflow-x:auto;

}



.category-box{

background:#F4C400;

min-width:100px;

padding:15px;

border-radius:18px;

text-align:center;

text-decoration:none;

color:#003B73;

}



.category-box i{

font-size:25px;

display:block;

}





.product-home-card{

background:white;

padding:12px;

border-radius:20px;

height:100%;

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

}



.product-home-card img{

width:100%;

height:140px;

object-fit:cover;

border-radius:15px;

}



.product-home-card h6{

margin-top:10px;

font-weight:700;

}



.product-home-card small{

color:#777;

}



.product-home-card .price{

font-size:18px;

font-weight:bold;

color:#0057A8;

margin:8px 0;

}


.login-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
#003B73,
#0057A8
);

padding:20px;

}



.login-box{

width:100%;

max-width:400px;

background:white;

padding:35px 25px;

border-radius:30px;

box-shadow:0 15px 40px rgba(0,0,0,.25);

}



.login-logo{

text-align:center;

}



.login-logo img{

width:100px;

padding:8px;

}



.login-logo h2{

color:#0057A8;

font-weight:800;

}



.login-logo p{

color:#777;

}



.input-group{

display:flex;

align-items:center;

background:#f2f5f8;

border-radius:18px;

padding:12px 15px;

margin-bottom:15px;

}



.input-group i{

color:#0057A8;

font-size:20px;

margin-right:10px;

}



.input-group input{

border:0;

background:none;

outline:none;

width:100%;

}



.login-btn{

width:100%;

padding:14px;

border:none;

border-radius:20px;

background:#F4C400;

color:#003B73;

font-weight:bold;

font-size:16px;

}



.login-error{

background:#ffe5e5;

color:#b30000;

padding:12px;

border-radius:15px;

margin-bottom:15px;

}



.login-footer{

text-align:center;

margin-top:25px;

}



.login-footer a{

color:#0057A8;

font-weight:bold;

}


.register-success{

background:#e6fff0;

color:#00802b;

padding:12px;

border-radius:15px;

margin-bottom:15px;

}



/* SPLASH PAGE */


.splash-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(
135deg,
#003B73,
#0057A8
);

padding:20px;

}



.splash-card{

background:white;

width:100%;

max-width:420px;

text-align:center;

padding:40px 25px;

border-radius:35px;

box-shadow:

0 20px 50px rgba(0,0,0,.25);

}



.splash-logo{

width:120px;

margin-bottom:20px;

}



.splash-card h1{

color:#0057A8;

font-weight:800;

font-size:40px;

}



.splash-card h4{

color:#F4C400;

font-weight:bold;

}



.splash-card p{

color:#777;

margin:20px 0;

}



.splash-feature{

display:flex;

justify-content:space-around;

margin:30px 0;

}



.splash-feature i{

font-size:30px;

color:#0057A8;

}



.splash-feature div{

font-size:12px;

font-weight:bold;

}



.splash-login{

display:block;

background:#F4C400;

color:#003B73;

padding:15px;

border-radius:25px;

font-weight:bold;

text-decoration:none;

margin-bottom:12px;

}



.splash-register{

display:block;

border:2px solid #0057A8;

color:#0057A8;

padding:13px;

border-radius:25px;

font-weight:bold;

text-decoration:none;

}


.pickup-box{

background:#f8f9fa;

padding:15px;

border-radius:15px;

margin:15px 0;

}



.pickup-box h6{

color:#0057A8;

font-weight:bold;

}



.pickup-box p{

margin-bottom:5px;

font-size:14px;

}


.notification-card{

background:white;

padding:15px;

border-radius:18px;

display:flex;

gap:15px;

margin-bottom:15px;

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

}


.notification-icon i{

font-size:28px;

color:#0057A8;

}


.notification-card h6{

margin:0;

color:#003B73;

font-weight:bold;

}


.notification-card p{

margin:5px 0;

color:#555;

}