/* ================= */
/* GLOBAL */
/* ================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
background:#0e0e0e;
color:white;
overflow-x:hidden;
}

/* ================= */
/* NAVBAR */
/* ================= */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 10%;
position:fixed;
top:0;
width:100%;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(10px);
z-index:100;
}

.logo-container{
display:flex;
align-items:center;
gap:10px;
}

.logo-img{
width:40px;
height:40px;
}

.logo-text{
font-size:22px;
font-weight:600;
color:#ff5c7c;
}

.nav{
display:flex;
gap:30px;
list-style:none;
}

.nav a{
text-decoration:none;
color:white;
opacity:.8;
transition:.3s;
}

.nav a:hover{
color:#ff5c7c;
}

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

.cart-icon{
cursor:pointer;
font-size:20px;
position:relative;
}

.cart-icon span{
position:absolute;
top:-8px;
right:-10px;
background:#ff5c7c;
color:white;
font-size:12px;
padding:2px 6px;
border-radius:50%;
}

/* ================= */
/* HERO */
/* ================= */

.hero{
height:90vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.7)),
url("../css/img/background.jpg");

background-size:cover;
background-position:center;

padding:0 20px;
}

.hero-title{
font-size:64px;
font-weight:700;
margin-bottom:15px;
}

.hero-title span{
background:linear-gradient(45deg,#ff5c7c,#ff9aa8);
-webkit-background-clip:text;
color:transparent;
}

.hero-sub{
opacity:.9;
font-size:18px;
margin-bottom:30px;
}

.hero-btn{
background:#ff5c7c;
padding:12px 28px;
border-radius:30px;
text-decoration:none;
color:white;
font-weight:500;
transition:.3s;
}

.hero-btn:hover{
background:#ff3e63;
transform:translateY(-3px);
}

/* ================= */
/* STORE */
/* ================= */

.store{
padding:120px 10%;
text-align:center;
}

.store-title{
font-size:36px;
margin-bottom:30px;
}

/* ================= */
/* SEARCH BAR */
/* ================= */

.search-wrapper{
position:relative;
max-width:420px;
margin:0 auto 40px;
}

.search-input{
width:100%;
height:48px;
padding:0 50px 0 20px;
border-radius:40px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.06);
backdrop-filter:blur(10px);
color:white;
font-size:15px;
outline:none;
transition:.3s;
box-shadow:0 6px 18px rgba(0,0,0,.5);
}

.search-input::placeholder{
color:rgba(255,255,255,.6);
}

.search-input:focus{
border:1px solid #ff5c7c;
box-shadow:
0 0 10px rgba(255,92,124,.4),
0 8px 25px rgba(0,0,0,.6);
}

.search-icon{
position:absolute;
right:18px;
top:50%;
transform:translateY(-50%);
font-size:18px;
pointer-events:none;
opacity:.7;
}

/* ================= */
/* FILTER BUTTONS */
/* ================= */

.filters{
margin-bottom:30px;
}

.filters button{
padding:8px 16px;
border:none;
background:#ff5c7c;
color:white;
border-radius:20px;
margin:5px;
cursor:pointer;
transition:.25s;
}

.filters button:hover{
background:#ff3e63;
transform:scale(1.05);
}

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

.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.product{
background:#1a1a1a;
padding:15px;
border-radius:12px;
transition:.35s;
box-shadow:0 8px 25px rgba(0,0,0,.4);
}

.product:hover{
transform:translateY(-8px) scale(1.03);
box-shadow:0 12px 30px rgba(0,0,0,.5);
}

.product img{
width:100%;
border-radius:8px;
}

.product h3{
margin:10px 0;
}

.product button{
padding:8px 16px;
background:#ff5c7c;
border:none;
color:white;
border-radius:20px;
cursor:pointer;
transition:.3s;
}

.product button:hover{
background:#ff3e63;
transform:scale(1.05);
}

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

.cart{
position:fixed;
right:-360px;
top:0;
width:340px;
height:100vh;
background:#111;
padding:25px;
transition:.35s ease;
z-index:200;
display:flex;
flex-direction:column;
box-shadow:-8px 0 30px rgba(0,0,0,.6);
}

.cart.open{
right:0;
}

.cart-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
border-bottom:1px solid #333;
padding-bottom:10px;
}

.cart-close{
background:none;
border:none;
font-size:20px;
color:white;
cursor:pointer;
}

.cart-close:hover{
color:#ff5c7c;
}

#cart-items{
list-style:none;
flex:1;
overflow-y:auto;
margin-top:10px;
}

#cart-items li{
display:flex;
justify-content:space-between;
padding:10px;
border-bottom:1px solid #222;
}

.cart-footer{
border-top:1px solid #333;
padding-top:15px;
}

.checkout-btn{
display:block;
text-align:center;
padding:12px;
background:#ff5c7c;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:500;
}

.checkout-btn:hover{
background:#ff3e63;
}

/* ================= */
/* ADMIN PANEL */
/* ================= */

.admin-container{
max-width:1200px;
margin:auto;
padding:40px;
}

.admin-container h1{
margin-bottom:20px;
}

/* ADMIN STATS */

.admin-stats{
display:flex;
gap:20px;
margin-bottom:30px;
}

.stat-card{
background:#1a1a1a;
padding:20px;
border-radius:10px;
width:200px;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,.4);
}

.stat-card h3{
font-size:16px;
opacity:.7;
}

.stat-card p{
font-size:28px;
color:#ff5c7c;
margin-top:10px;
}

/* ADMIN FORM */

.admin-form{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}

.admin-form input{
padding:10px;
border-radius:6px;
border:none;
background:#1a1a1a;
color:white;
}

.admin-form button{
background:#ff5c7c;
border:none;
padding:10px 16px;
border-radius:6px;
color:white;
cursor:pointer;
transition:.2s;
}

.admin-form button:hover{
background:#ff3e63;
}

/* IMAGE PREVIEW */

.image-preview{
margin:20px 0;
}

.image-preview img{
width:120px;
border-radius:8px;
}

/* ADMIN TABLE */

.admin-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.admin-table th{
text-align:left;
padding:12px;
background:#111;
}

.admin-table td{
padding:12px;
border-bottom:1px solid #333;
}

.admin-product-img{
width:60px;
border-radius:6px;
}

/* BUTTONS */

.edit-btn{
background:#3498db;
border:none;
padding:6px 12px;
border-radius:6px;
color:white;
cursor:pointer;
margin-right:5px;
}

.edit-btn:hover{
background:#2980b9;
}

.delete-btn{
background:#e74c3c;
border:none;
padding:6px 12px;
border-radius:6px;
color:white;
cursor:pointer;
}

.delete-btn:hover{
background:#c0392b;
}

/* ================= */
/* CONTACT PAGE */
/* ================= */

.contact-hero{

height:60vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;

background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)),
url("../css/img/background.jpg");

background-size:cover;
background-position:center;

margin-top:70px;

}

.contact-hero h1{
font-size:52px;
margin-bottom:10px;
}

.contact-hero p{
opacity:.8;
font-size:18px;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
padding:80px 10%;
}

.contact-info{
background:#1a1a1a;
padding:30px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.contact-info h2{
margin-bottom:20px;
color:#ff5c7c;
}

.contact-info p{
margin:10px 0;
opacity:.85;
}

.contact-hours{
margin-top:20px;
}

.contact-form{
background:#1a1a1a;
padding:30px;
border-radius:12px;
display:flex;
flex-direction:column;
gap:15px;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.contact-form input,
.contact-form textarea{
padding:12px;
border:none;
border-radius:8px;
background:#111;
color:white;
}

.contact-form textarea{
height:120px;
resize:none;
}

.contact-form button{
background:#ff5c7c;
border:none;
padding:12px;
border-radius:8px;
color:white;
cursor:pointer;
font-weight:500;
transition:.2s;
}

.contact-form button:hover{
background:#ff3e63;
transform:scale(1.03);
}

/* ================= */
/* RESPONSIVE */
/* ================= */

@media(max-width:900px){

.nav{
display:none;
}

.hero-title{
font-size:42px;
}

.products{
grid-template-columns:1fr;
}

.admin-stats{
flex-direction:column;
}

.contact-container{
grid-template-columns:1fr;
}

.contact-hero h1{
font-size:38px;
}

} /* ================= */
/* CHECKOUT PAGE */
/* ================= */

.checkout-hero{

height:40vh;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

background:
linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.8)),
url("../css/img/background.jpg");

background-size:cover;
background-position:center;

margin-top:70px;

}

.checkout-hero h1{

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

}

.checkout-hero p{

opacity:.8;

}



.checkout-container{

display:grid;

grid-template-columns:1.3fr 1fr;

gap:40px;

padding:80px 10%;

}



.checkout-box{

background:#1a1a1a;

padding:40px;

border-radius:14px;

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

}



.checkout-box h2{

margin-bottom:20px;

color:#ff5c7c;

}



.checkout-box input,
.checkout-box select{

width:100%;

padding:12px;

margin-bottom:15px;

border:none;

border-radius:8px;

background:#111;

color:white;

}



.checkout-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}



.checkout-box button{

width:100%;

padding:14px;

border:none;

border-radius:8px;

background:#ff5c7c;

color:white;

font-size:16px;

cursor:pointer;

transition:.25s;

}



.checkout-box button:hover{

background:#ff3e63;

transform:scale(1.02);

}



/* ORDER SUMMARY */

.order-summary{

background:#1a1a1a;

padding:35px;

border-radius:14px;

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

}



.order-summary h2{

margin-bottom:20px;

}



.order-summary ul{

list-style:none;

margin-bottom:20px;

}



.order-summary li{

display:flex;

justify-content:space-between;

padding:10px 0;

border-bottom:1px solid #333;

}



.summary-total{

font-size:22px;

font-weight:600;

color:#ff5c7c;

}



/* RESPONSIVE */

@media(max-width:900px){

.checkout-container{

grid-template-columns:1fr;

}

.checkout-grid{

grid-template-columns:1fr;

}

}

/* ================= */
/* ORDER SUMMARY */
/* ================= */

.summary-items{
display:flex;
flex-direction:column;
gap:15px;
margin-bottom:20px;
}

.summary-item{
display:flex;
align-items:center;
gap:15px;
background:#111;
padding:12px;
border-radius:8px;
}

.summary-img{
width:60px;
height:60px;
object-fit:cover;
border-radius:6px;
}

.summary-details{
flex:1;
}

.summary-name{
font-weight:500;
}

.summary-price{
opacity:.8;
font-size:14px;
}

.summary-pricing{
border-top:1px solid #333;
padding-top:15px;
}

.summary-pricing p{
display:flex;
justify-content:space-between;
margin:8px 0;
opacity:.9;
}

.summary-pricing h3{
display:flex;
justify-content:space-between;
margin-top:15px;
color:#ff5c7c;
font-size:20px;
}