/* ---------------- RESET ---------------- */

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

body{
background:radial-gradient(circle at top,#3b0f16,#090104);
color:white;
min-height:100vh;
overflow-x:hidden;
}

/* ---------------- NAVBAR ---------------- */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 70px;
background:rgba(0,0,0,0.4);
border-bottom:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(8px);
}

.navbar h2{
color:#ffb6c9;
font-size:22px;
}

.menu{
display:flex;
align-items:center;
gap:20px;
}

.navbar a{
text-decoration:none;
color:#ddd;
font-size:14px;
transition:.3s;
}

.navbar a:hover{
color:#ff8fa3;
}

/* ---------------- HERO ---------------- */

.hero{
height:65vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

.heroBox{
background:rgba(255,255,255,0.05);
padding:60px;
border-radius:20px;
max-width:600px;
}

.hero h1{
font-size:46px;
color:#ffb6c9;
margin-bottom:10px;
}

.hero p{
color:#ccc;
margin-bottom:20px;
}

.heroBtn{
padding:12px 26px;
border:none;
border-radius:8px;
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
cursor:pointer;
}

/* ---------------- PRODUCTS ---------------- */

#products{
padding:60px;
}

.sectionTitle{
text-align:center;
margin-bottom:40px;
font-size:30px;
color:#ffb6c9;
}

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

/* PRODUCT CARD */

.card{
display:flex;
flex-direction:column;
background:linear-gradient(145deg,#1b070c,#120305);
border-radius:18px;
padding:20px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 30px rgba(255,0,80,0.15);
transition:.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 0 50px rgba(255,0,80,0.3);
}

.card img{
width:100%;
height:200px;
object-fit:cover;
border-radius:12px;
margin-bottom:15px;
}

.card h3{
margin-bottom:5px;
}

.card p{
color:#ff8fa3;
margin-bottom:10px;
}

/* PRODUCT BUTTONS */

.buttons{
display:flex;
gap:10px;
margin-top:10px;
}

.cartBtn{
flex:1;
height:40px;
border:none;
border-radius:6px;
background:#222;
color:white;
cursor:pointer;
}

.cartBtn:hover{
background:#333;
}

.orderBtn{
flex:1;
height:40px;
border:none;
border-radius:6px;
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
cursor:pointer;
display:flex;
justify-content:center;
align-items:center;
}

/* ---------------- CART ---------------- */

.cartIcon{
background:none;
border:none;
font-size:22px;
color:white;
cursor:pointer;
position:relative;
}

#cartCount{
position:absolute;
top:-6px;
right:-8px;
background:red;
font-size:12px;
padding:3px 6px;
border-radius:50%;
}

#cart{
position:fixed;
top:0;
right:-340px;
width:320px;
height:100%;
background:#120305;
padding:25px;
transition:.4s;
box-shadow:-10px 0 40px rgba(0,0,0,0.8);
}

#cart.open{
right:0;
}

#cartItems p{
display:flex;
justify-content:space-between;
border-bottom:1px solid #222;
padding:8px 0;
}

#cart input,
#cart textarea{
width:100%;
margin-top:10px;
padding:10px;
border:none;
border-radius:6px;
background:#1a0508;
color:white;
}

#cart button{
margin-top:15px;
width:100%;
padding:12px;
border:none;
border-radius:8px;
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
cursor:pointer;
}

/* ---------------- ADMIN DASHBOARD ---------------- */

.layout{
display:flex;
height:100vh;
}

.sidebar{
width:230px;
background:#1c1c24;
padding:25px;
border-right:1px solid rgba(255,255,255,0.05);
}

.sidebar h2{
color:#ff4fa3;
margin-bottom:30px;
}

.sidebar ul{
list-style:none;
}

.sidebar li{
padding:12px;
margin-bottom:10px;
cursor:pointer;
border-radius:8px;
transition:.3s;
}

.sidebar li:hover{
background:#ff4fa3;
transform:translateX(5px);
}

.main{
flex:1;
padding:30px;
overflow:auto;
}

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

.card{
background:#1c1c24;
padding:20px;
border-radius:12px;
}

table{
width:100%;
border-collapse:collapse;
}

th,td{
padding:10px;
border-bottom:1px solid #333;
}

/* ---------------- MODAL ---------------- */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
}

.modalBox{
background:#1c1c28;
padding:25px;
border-radius:10px;
width:300px;
}

.modalBox input{
width:100%;
padding:10px;
margin-bottom:10px;
border:none;
border-radius:6px;
background:#111;
color:white;
}

/* ---------------- LOGIN / REGISTER ---------------- */

.center{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.login-box,
.card{
width:420px;
padding:40px;
border-radius:20px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(20px);
box-shadow:0 0 60px rgba(255,0,80,0.4);
}

input{
width:100%;
padding:14px;
margin-bottom:12px;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.1);
color:white;
}

button{
width:100%;
padding:14px;
border:none;
border-radius:10px;
background:#ff2d75;
color:white;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#ff0055;
}

/* ---------------- FOOTER ---------------- */

footer{
text-align:center;
padding:40px;
color:#bbb;
margin-top:60px;
}

/* ---------------- MOBILE ---------------- */

@media(max-width:768px){

.navbar{
padding:15px 25px;
}

.hero h1{
font-size:34px;
}

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

.layout{
flex-direction:column;
}

.sidebar{
width:100%;
display:flex;
overflow-x:auto;
}

}
.searchBox{

display:block;

margin:0 auto 40px auto;

padding:12px 18px;

border-radius:25px;

border:none;

width:300px;

background:#1b070c;

color:white;

text-align:center;

}



#reviews{

padding:60px;

max-width:800px;

margin:auto;

}



.review{

background:rgba(255,255,255,0.05);

padding:20px;

border-radius:12px;

margin-bottom:15px;

border:1px solid rgba(255,255,255,0.05);

}



.review p{

margin:8px 0;

color:#ddd;

}



.review b{

color:#ff8fa3;

}
#cart{

position:fixed;

top:0;
right:-350px;

width:320px;
height:100%;

background:#120305;

padding:25px;

transition:0.4s;

box-shadow:-10px 0 40px rgba(0,0,0,0.8);

z-index:999;

}

#cart.open{

right:0;

}
#cart{

position:fixed;

top:0;
right:-340px;

width:320px;
height:100%;

background:#120305;

padding:25px;

transition:0.4s;

box-shadow:-10px 0 40px rgba(0,0,0,0.8);

z-index:9999;

}

#cart.open{

right:0;

}
.cartHeader{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.closeCart{

background:none;
border:none;
color:white;
font-size:20px;
cursor:pointer;

}

.closeCart:hover{

color:#ff4d6d;

}
.cartHeader{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.closeCart{

background:none;
border:none;

font-size:14px;   /* më i vogël */

color:white;

cursor:pointer;

padding:4px 6px;

}

.closeCart:hover{

color:#ff4d6d;

}

#cartItems button{

background:none;
border:none;

color:red;

font-size:12px;   /* X shumë i vogël */

cursor:pointer;

margin-left:8px;

}
.reviewBtn{

display:block;

margin:25px auto;

padding:12px 20px;

border:none;

border-radius:8px;

background:linear-gradient(45deg,#ff4d6d,#ff758f);

color:white;

cursor:pointer;

}

.modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

}

.modalBox{

background:#1c1c28;

padding:30px;

border-radius:10px;

width:320px;

}
/* REVIEWS SECTION */

.ratingBox{

text-align:center;
margin-bottom:25px;

}

.ratingBox span{

font-size:32px;
color:#ff8fa3;

}

.reviewSlider{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

}

.reviewsContainer{

display:flex;
gap:20px;

overflow:hidden;

max-width:800px;

}



/* REVIEW CARD */

.review{

min-width:260px;

background:linear-gradient(
145deg,
#1b070c,
#120305
);

border-radius:16px;

padding:20px;

box-shadow:
0 0 40px rgba(255,0,80,0.15);

border:1px solid rgba(255,255,255,0.05);

transition:.3s;

}

.review:hover{

transform:translateY(-6px);

box-shadow:
0 0 50px rgba(255,0,80,0.3);

}

.review b{

color:#ff8fa3;
font-size:16px;

}

.review p{

color:#ddd;
margin-top:6px;

}



/* SLIDER BUTTONS */

.sliderBtn{

background:#1b070c;

border:none;

color:white;

font-size:24px;

width:40px;
height:40px;

border-radius:50%;

cursor:pointer;

}

.sliderBtn:hover{

background:#ff4d6d;

}
/* REVIEW BUTTON */

.reviewBtn{

display:block;
margin:30px auto;

padding:12px 22px;

border:none;
border-radius:8px;

background:linear-gradient(45deg,#ff4d6d,#ff758f);

color:white;

cursor:pointer;

font-weight:600;

}



/* MODAL BACKGROUND */

.modal{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.65);

display:none;

align-items:center;
justify-content:center;

z-index:9999;

backdrop-filter:blur(6px);

}



/* MODAL BOX */

.reviewModalBox{

width:360px;

padding:30px;

border-radius:16px;

background:linear-gradient(
145deg,
#1b070c,
#120305
);

box-shadow:0 0 50px rgba(255,0,80,0.25);

border:1px solid rgba(255,255,255,0.05);

}



/* HEADER */

.reviewHeader{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:15px;

}

.reviewHeader h3{

color:#ff8fa3;

}



/* CLOSE BUTTON */

.modalClose{

background:none;
border:none;

color:white;

font-size:18px;

cursor:pointer;

}



/* INPUTS */

.reviewModalBox input,
.reviewModalBox select,
.reviewModalBox textarea{

width:100%;

padding:10px;

margin-top:10px;

border:none;

border-radius:8px;

background:#1a0508;

color:white;

}



.reviewModalBox textarea{

height:80px;
resize:none;

}



/* ACTION BUTTONS */

.reviewActions{

display:flex;
gap:10px;

margin-top:15px;

}



.postReviewBtn{

flex:1;

padding:10px;

border:none;

border-radius:8px;

background:linear-gradient(
45deg,
#ff4d6d,
#ff758f
);

color:white;

cursor:pointer;

}



.cancelReviewBtn{

flex:1;

padding:10px;

border:none;

border-radius:8px;

background:#222;

color:white;

cursor:pointer;

}



/* REVIEW CARDS */

.reviewsContainer{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:20px;

margin-top:30px;

}



.review{

background:linear-gradient(
145deg,
#1b070c,
#120305
);

padding:18px;

border-radius:12px;

box-shadow:0 0 40px rgba(255,0,80,0.15);

border:1px solid rgba(255,255,255,0.05);

}



.review b{

color:#ff8fa3;

}

.review p{

color:#ddd;

margin-top:6px;

}
/* RATING BOX */

.ratingBox{

text-align:center;

margin-bottom:25px;

}

.avgNumber{

font-size:34px;

color:#ff8fa3;

font-weight:600;

}



/* REVIEW SLIDER */

.reviewSlider{

overflow:hidden;

max-width:900px;

margin:auto;

}

.reviewsContainer{

display:flex;

gap:20px;

transition:0.5s;

}



/* REVIEW CARD */

.review{

min-width:260px;

background:linear-gradient(
145deg,
#1b070c,
#120305
);

padding:20px;

border-radius:14px;

box-shadow:0 0 40px rgba(255,0,80,0.15);

border:1px solid rgba(255,255,255,0.05);

transition:0.3s;

}

.review:hover{

transform:translateY(-6px);

box-shadow:0 0 50px rgba(255,0,80,0.3);

}

.review b{

color:#ff8fa3;

font-size:16px;

}

.review p{

margin-top:6px;

color:#ddd;

}
/* ================= GLOBAL RESPONSIVE ================= */

img{
max-width:100%;
height:auto;
}



/* ================= TABLET ================= */

@media (max-width:1024px){

.navbar{
padding:18px 40px;
}

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

.productsGrid{
grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));
}

.reviewSlider{
max-width:100%;
}

}



/* ================= MOBILE ================= */

@media (max-width:768px){

.navbar{
flex-direction:column;
gap:10px;
padding:15px 20px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
}

.hero{
height:auto;
padding:40px 20px;
}

.heroBox{
padding:35px;
}

.hero h1{
font-size:28px;
}

.hero p{
font-size:14px;
}

.productsGrid{
grid-template-columns:1fr;
gap:20px;
}

.searchBox{
width:90%;
}



/* PRODUCT CARD */

.card{
padding:15px;
}

.card img{
height:180px;
}



/* CART */

#cart{
width:100%;
right:-100%;
}

#cart.open{
right:0;
}



/* REVIEWS */

.reviewSlider{
flex-direction:column;
}

.reviewsContainer{
flex-direction:column;
}

.review{
min-width:100%;
}



/* MODAL */

.reviewModalBox{
width:90%;
padding:25px;
}

}



/* ================= SMALL PHONES ================= */

@media (max-width:480px){

.hero h1{
font-size:24px;
}

.heroBox{
padding:25px;
}

.sectionTitle{
font-size:24px;
}

.reviewModalBox{
width:95%;
}

.postReviewBtn,
.cancelReviewBtn{
font-size:14px;
}

}



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

#cart{

max-width:340px;

}

@media (max-width:768px){

#cart{

max-width:100%;

}

}



/* ================= REVIEW CARDS MOBILE ================= */

@media (max-width:600px){

.reviewsContainer{

display:block;

}

.review{

margin-bottom:15px;

}

}



/* ================= BUTTONS TOUCH ================= */

button{

touch-action:manipulation;

}



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

html,body{

scroll-behavior:smooth;

}
/* ================= TABLET ================= */

@media (max-width:1024px){

.loader{
width:420px;
}

.panel{
padding:30px;
}

h1{
font-size:50px;
}

p{
font-size:15px;
}

}

/* ================= MOBILE ================= */

@media (max-width:768px){

.panel{
width:90%;
padding:25px;
}

.loader{
width:320px;
}

h1{
font-size:38px;
}

.brand{
font-size:16px;
top:20px;
}

p{
font-size:14px;
}

}

/* ================= SMALL PHONES ================= */

@media (max-width:480px){

.loader{
width:260px;
}

h1{
font-size:30px;
}

p{
font-size:13px;
padding:0 10px;
}

.panel{
padding:20px;
}

}

/* ================= VERY SMALL DEVICES ================= */

@media (max-width:360px){

.loader{
width:220px;
}

h1{
font-size:26px;
}

p{
font-size:12px;
}

}
.hidden{
display:none;
}
.reviewAdmin{
background:#1c1c24;
padding:15px;
border-radius:10px;
margin-bottom:10px;
}

.reviewTop{
display:flex;
justify-content:space-between;
margin-bottom:8px;
color:#ff8fa3;
}

.reviewAdmin button{
margin-top:10px;
background:#ff2d75;
border:none;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}
/* ================= REVIEW SYSTEM UPGRADE ================= */

/* REVIEWS GRID */
.reviewsContainer{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-top:30px;
padding:0 20px;
}

/* REVIEW CARD */
.review{
background:linear-gradient(145deg,#1b070c,#120305);
padding:18px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 30px rgba(255,0,80,0.15);
transition:0.3s;
position:relative;
overflow:hidden;
}

.review:hover{
transform:translateY(-6px);
box-shadow:0 0 50px rgba(255,0,80,0.3);
}

.review b{
color:#ff8fa3;
font-size:16px;
display:block;
margin-bottom:6px;
}

.review p:nth-child(2){
color:#ffd166;
font-weight:600;
}

.review p:last-child{
color:#ddd;
font-size:14px;
line-height:1.4;
margin-top:6px;
}

.review::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:2px;
background:linear-gradient(90deg,#ff4d6d,#ff758f);
opacity:0.6;
}

/* ================= MODAL ================= */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
backdrop-filter:blur(6px);
}

.reviewModalBox{
width:380px;
padding:25px;
border-radius:16px;
background:linear-gradient(145deg,#1b070c,#120305);
box-shadow:0 0 60px rgba(255,0,80,0.3);
border:1px solid rgba(255,255,255,0.05);
animation:fadeIn 0.3s ease;
}

.reviewHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px;
}

.reviewHeader h3{
color:#ff8fa3;
}

.modalClose{
background:none;
border:none;
color:white;
font-size:18px;
cursor:pointer;
}

.reviewModalBox input,
.reviewModalBox select,
.reviewModalBox textarea{
width:100%;
padding:10px;
margin-top:10px;
border:none;
border-radius:8px;
background:#1a0508;
color:white;
}

.reviewModalBox textarea{
height:80px;
resize:none;
}

.reviewActions{
display:flex;
gap:10px;
margin-top:15px;
}

.postReviewBtn{
flex:1;
padding:10px;
border:none;
border-radius:8px;
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
cursor:pointer;
transition:0.3s;
}

.postReviewBtn:hover{
opacity:0.85;
}

.cancelReviewBtn{
flex:1;
padding:10px;
border:none;
border-radius:8px;
background:#222;
color:white;
cursor:pointer;
}

/* ================= ADMIN REVIEWS ================= */

.reviewAdmin{
background:linear-gradient(145deg,#1b070c,#120305);
padding:15px;
border-radius:12px;
margin-bottom:12px;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 25px rgba(255,0,80,0.15);
}

.reviewTop{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
}

.reviewTop b{
color:#ff8fa3;
}

.reviewTop span{
color:#ffd166;
}

.reviewAdmin p{
color:#ddd;
font-size:14px;
}

.reviewAdmin button{
margin-top:10px;
background:#ff2d75;
border:none;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.reviewAdmin button:hover{
background:#ff0055;
}

/* ================= ANIMATION ================= */

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ================= OPTIONAL AVATAR ================= */

.avatar{
width:35px;
height:35px;
border-radius:50%;
background:#ff4d6d;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-weight:bold;
margin-bottom:8px;
}

/* ================= GLOBAL COLOR UPGRADE ================= */

body{
background:radial-gradient(circle at top,#14050a,#050103);
color:#f5f5f5;
}

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

.navbar{
background:rgba(10,10,15,0.6);
border-bottom:1px solid rgba(255,255,255,0.06);
}

.navbar h2{
color:#ff6b9d;
}

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

.heroBox{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 40px rgba(255,0,120,0.2);
}

.hero h1{
color:#ff6b9d;
}

.heroBtn{
background:linear-gradient(45deg,#ff4d8d,#ff7ab6);
}

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

.sectionTitle{
color:#ff6b9d;
}

.card{
background:linear-gradient(145deg,#14050a,#0c0206);
border:1px solid rgba(255,255,255,0.04);
box-shadow:0 0 25px rgba(255,0,120,0.15);
}

.card:hover{
box-shadow:0 0 50px rgba(255,0,120,0.35);
}

.card p{
color:#ff7ab6;
}

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

button{
background:linear-gradient(45deg,#ff4d8d,#ff7ab6);
}

button:hover{
background:linear-gradient(45deg,#ff2d75,#ff5fa3);
}

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

#cart{
background:#0c0206;
}

#cartItems p{
border-bottom:1px solid rgba(255,255,255,0.05);
}

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

.sidebar{
background:#12121a;
}

.sidebar h2{
color:#ff6b9d;
}

.sidebar li:hover{
background:#ff4d8d;
}

.card{
background:#12121a;
}

/* ================= INPUTS ================= */

input,
textarea,
select{
background:#14050a;
border:1px solid rgba(255,255,255,0.05);
color:white;
}

/* ================= REVIEWS ================= */

.review{
background:linear-gradient(145deg,#14050a,#0c0206);
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 0 25px rgba(255,0,120,0.15);
}

.review:hover{
box-shadow:0 0 50px rgba(255,0,120,0.3);
}

.review b{
color:#ff6b9d;
}

.review p:nth-child(2){
color:#ffd166;
}

/* ================= MODAL ================= */

.reviewModalBox{
background:linear-gradient(145deg,#14050a,#0c0206);
box-shadow:0 0 60px rgba(255,0,120,0.25);
}

/* ================= ADMIN REVIEWS ================= */

.reviewAdmin{
background:linear-gradient(145deg,#14050a,#0c0206);
}

.reviewTop b{
color:#ff6b9d;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#ff4d8d,#ff7ab6);
border-radius:10px;
}

/* ================= SMOOTH TRANSITIONS ================= */

*{
transition:0.25s ease;
}

/* ================= LIGHT THEME UPGRADE ================= */

body{
background:linear-gradient(180deg,#fff5f8,#ffeef3);
color:#2a2a2a;
}

/* NAVBAR */
.navbar{
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(0,0,0,0.05);
}

.navbar h2{
color:#ff4d8d;
}

.navbar a{
color:#555;
}

.navbar a:hover{
color:#ff4d8d;
}

/* HERO */
.heroBox{
background:white;
box-shadow:0 10px 40px rgba(255,0,100,0.08);
}

.hero h1{
color:#ff4d8d;
}

.hero p{
color:#666;
}

/* PRODUCTS */
.sectionTitle{
color:#ff4d8d;
}

.card{
background:white;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
border:1px solid rgba(0,0,0,0.04);
}

.card p{
color:#ff4d8d;
}

/* BUTTONS */
button{
background:linear-gradient(45deg,#ff4d8d,#ff85b3);
color:white;
}

button:hover{
background:linear-gradient(45deg,#ff2d75,#ff6aa5);
}

/* INPUTS */
input, textarea, select{
background:white;
color:#333;
border:1px solid #eee;
}

/* CART */
#cart{
background:white;
color:#333;
}

#cartItems p{
border-bottom:1px solid #eee;
}

/* REVIEWS */
.review{
background:white;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
border:1px solid #f2f2f2;
}

.review b{
color:#ff4d8d;
}

.review p{
color:#555;
}

/* MODAL */
.reviewModalBox{
background:white;
color:#333;
box-shadow:0 20px 60px rgba(0,0,0,0.15);
}

/* ADMIN */
.sidebar{
background:#ffffff;
border-right:1px solid #eee;
}

.sidebar h2{
color:#ff4d8d;
}

.sidebar li:hover{
background:#ffe3ec;
color:#ff4d8d;
}

.main{
background:#fafafa;
}

/* ADMIN CARDS */
.card{
background:white;
color:#333;
}

/* ADMIN REVIEWS */
.reviewAdmin{
background:white;
border:1px solid #eee;
}

.reviewTop b{
color:#ff4d8d;
}

/* FOOTER */
footer{
color:#777;
}

/* SCROLLBAR */
::-webkit-scrollbar-thumb{
background:#ff85b3;
}

/* ================= SOFT DARK THEME ================= */

body{
background:linear-gradient(180deg,#1a0d12,#0f0508);
color:#eaeaea;
}

/* NAVBAR */
.navbar{
background:rgba(20,10,15,0.7);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,0.05);
}

.navbar h2{
color:#ff6b9d;
}

.navbar a{
color:#ccc;
}

.navbar a:hover{
color:#ff6b9d;
}

/* HERO */
.heroBox{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.06);
box-shadow:0 10px 40px rgba(255,0,100,0.15);
}

.hero h1{
color:#ff6b9d;
}

.hero p{
color:#bbb;
}

/* PRODUCTS */
.sectionTitle{
color:#ff6b9d;
}

.card{
background:#1e0f15;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.card:hover{
box-shadow:0 0 40px rgba(255,0,120,0.25);
}

.card p{
color:#ff85b3;
}

/* BUTTONS */
button{
background:linear-gradient(45deg,#ff4d8d,#ff7ab6);
}

button:hover{
background:linear-gradient(45deg,#ff2d75,#ff5fa3);
}

/* INPUTS */
input, textarea, select{
background:#14080c;
border:1px solid rgba(255,255,255,0.05);
color:#eee;
}

/* CART */
#cart{
background:#14080c;
}

#cartItems p{
border-bottom:1px solid rgba(255,255,255,0.05);
}

/* REVIEWS */
.review{
background:#1e0f15;
border:1px solid rgba(255,255,255,0.05);
box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.review:hover{
box-shadow:0 0 40px rgba(255,0,120,0.25);
}

.review b{
color:#ff6b9d;
}

.review p{
color:#ccc;
}

/* MODAL */
.reviewModalBox{
background:#1e0f15;
box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

/* ADMIN */
.sidebar{
background:#151018;
}

.sidebar h2{
color:#ff6b9d;
}

.sidebar li:hover{
background:#ff4d8d;
}

.main{
background:#12090d;
}

/* ADMIN CARDS */
.card{
background:#1a0d12;
}

/* ADMIN REVIEWS */
.reviewAdmin{
background:#1a0d12;
border:1px solid rgba(255,255,255,0.05);
}

/* FOOTER */
footer{
color:#aaa;
}

/* SCROLLBAR */
::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#ff4d8d,#ff7ab6);
border-radius:10px;
}

/* BACKGROUND BLUR */
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
backdrop-filter:blur(8px);
z-index:9999;
}

/* MODAL BOX */
.reviewModalPro{
width:420px;
padding:30px;
border-radius:20px;

background:rgba(255,255,255,0.05);
backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,0.1);

box-shadow:
0 0 80px rgba(0,0,0,0.8),
0 0 40px rgba(0,0,0,0.4);

text-align:center;
position:relative;
}

/* CLOSE BUTTON */
.closeBtn{
position:absolute;
top:15px;
right:15px;
background:rgba(255,255,255,0.1);
border:none;
border-radius:50%;
width:35px;
height:35px;
color:white;
cursor:pointer;
}

/* ICON */
.iconBox{
width:60px;
height:60px;
margin:0 auto 15px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.05);
font-size:24px;
}

/* TEXT */
.reviewModalPro h2{
color:white;
margin-bottom:5px;
}

.subtitle{
color:#aaa;
font-size:14px;
margin-bottom:15px;
}

.ratingText{
margin-top:10px;
color:#ccc;
}

/* STARS */
.stars{
display:flex;
justify-content:center;
gap:10px;
margin:15px 0;
font-size:30px;
cursor:pointer;
}

/* default */
.stars span{
color:#444;
transition:0.2s;
}

/* active stars */
.stars span.active{
color:#ffc107;
}

/* hover (LEFT → RIGHT FIXED) */
.stars span:hover,
.stars span:hover ~ span{
color:#444; /* reset */
}

.stars span:hover{
color:#ffc107;
}
/* HINT */
.hint{
color:#777;
font-size:12px;
margin-bottom:10px;
}

/* TEXTAREA */
.reviewModalPro textarea{
width:100%;
height:90px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.1);
background:rgba(255,255,255,0.05);
color:white;
padding:12px;
margin-top:10px;
resize:none;
}

/* BUTTONS */
.modalActions{
display:flex;
gap:10px;
margin-top:20px;
}

.cancelBtn{
flex:1;
background:rgba(255,255,255,0.1);
border:none;
border-radius:12px;
padding:12px;
color:white;
cursor:pointer;
}

.submitBtn{
flex:1;
background:linear-gradient(45deg,#6a5cff,#7c4dff);
border:none;
border-radius:12px;
padding:12px;
color:white;
cursor:pointer;
transition:0.3s;
}

.submitBtn:hover{
opacity:0.85;
}

/* STARS */
.stars{
display:flex;
justify-content:center;
gap:10px;
margin:15px 0;
font-size:32px;
cursor:pointer;
}

.stars span{
color:#444;
transition:0.2s ease;
}

/* ACTIVE */
.stars span.active{
color:#ffc107;
text-shadow:0 0 10px rgba(255,193,7,0.8);
}

/* HOVER SCALE */
.stars span:hover{
transform:scale(1.2);
}
/* ================= PREMIUM ALERT ================= */

.customAlert{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%) translateY(-20px);

background:rgba(20,10,15,0.95);
color:white;

padding:14px 22px;
border-radius:12px;

border:1px solid rgba(255,255,255,0.1);

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

opacity:0;
pointer-events:none;

transition:0.3s ease;
z-index:99999;
}

.customAlert.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}