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

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


/* ===== PREMIUM BACKGROUND ===== */

body{
font-family:Arial;
padding:30px;
min-height:100vh;
color:#f5f5f5;

background:linear-gradient(135deg,#0f0f0f,#0d1b2a,#1b5e20,#d4af37);
background-size:400% 400%;
animation:gradientShift 20s ease infinite;
overflow-x:hidden;
}

@keyframes gradientShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* GOLD PARTICLES */

body::before{
content:"";
position:fixed;
width:200%;
height:200%;
background:radial-gradient(circle,#d4af3730 1px,transparent 1px);
background-size:60px 60px;
animation:moveParticles 40s linear infinite;
pointer-events:none;
}

@keyframes moveParticles{
from{transform:translate(0,0);}
to{transform:translate(-200px,-200px);}
}



/* SEARCH BOX */

.search-box{
max-width:600px;
margin:auto;
position:relative;
}

#searchInput{
width:100%;
padding:12px;
font-size:16px;
border-radius:8px;
border:1px solid rgba(212,175,55,.5);
background:rgba(0,0,0,.45);
color:white;
outline:none;
backdrop-filter:blur(10px);
}


/* SUGGESTIONS */

#suggestions{
position:absolute;
background:rgba(13,27,42,.9);
width:100%;
border:1px solid rgba(212,175,55,.5);
display:none;
max-height:300px;
overflow-y:auto;
z-index:999;
border-radius:8px;
}

.suggestion-item{
padding:10px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.08);
}

.suggestion-item:hover{
background:rgba(212,175,55,.15);
}


/* FILTERS */

.filters{
margin-top:20px;
text-align:center;
}

select{
padding:8px;
margin:5px;
border-radius:6px;
border:1px solid rgba(212,175,55,.5);
background:rgba(0,0,0,.45);
color:white;
}


/* PRODUCT GRID */

#products{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
margin-top:30px;
}


/* PRODUCT CARD */

.card{
background:rgba(13,27,42,.7);
padding:15px;
border-radius:10px;
border:1px solid rgba(212,175,55,.4);
box-shadow:0 0 18px rgba(212,175,55,.15);
text-align:center;
backdrop-filter:blur(12px);
transition:.3s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 0 25px rgba(212,175,55,.35);
}

.card img{
width:120px;
height:120px;
object-fit:contain;
}


/* BUY BUTTON */

.buy-btn{
display:inline-block;
margin-top:10px;
padding:8px 12px;
background:linear-gradient(45deg,#1b5e20,#d4af37);
color:white;
text-decoration:none;
border-radius:4px;
}


.highlight{
background:#d4af37;
color:black;
padding:2px 4px;
border-radius:3px;
}


/* BUTTON GROUP */

.buttons{
margin-top:10px;
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:center;
}

.buttons a{
padding:6px 10px;
font-size:12px;
border-radius:4px;
text-decoration:none;
color:white;
}

.details{
background:#0073e6;
}

.whatsapp{
background:#25D366;
}

.email{
background:#666;
}

.buy{
background:#ff9900;
}



/* PROFILE */

.profile-pic{
width:100px;
height:100px;
margin:0 auto 18px auto;
border-radius:50%;
padding:4px;
background:linear-gradient(45deg,#1b5e20,#d4af37);
display:flex;
justify-content:center;
align-items:center;
animation:glow 4s ease-in-out infinite alternate;
overflow:hidden;
}

.profile-pic img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
}

@keyframes glow{
from{box-shadow:0 0 10px #d4af37;}
to{box-shadow:0 0 25px #d4af37;}
}



/* BRAND */

.brand{
text-align:center;
margin-bottom:15px;
}

.brand h1{
font-size:28px;
font-weight:600;
background:linear-gradient(90deg,#d4af37,#f1c40f,#1b5e20);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.brand h5{
font-weight:400;
color:#e0e0e0;
margin-top:4px;
}



/* FOOTER */

.footer{
margin-top:30px;
font-size:13px;
color:#d4af37;
font-style:italic;
text-align:center;
}



/* BREADCRUMB */

#breadcrumb{
margin-top:5px;
font-size:14px;
color:#d4af37;
text-align:center;
}

#breadcrumb span{
cursor:pointer;
color:#d4af37;
}

#breadcrumb span:hover{
text-decoration:underline;
}



/* SECTION TITLE */

.section-title{
text-align:center;
margin-bottom:15px;
font-size:22px;
font-weight:600;
background:linear-gradient(90deg,#d4af37,#f1c40f,#1b5e20);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:1px;
}



/* DEVICE GRID */

#deviceContainer{
margin:25px auto 0 auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
max-width:900px;
width:100%;
justify-content:center;
}

 /* ===== ACCORDION ===== */

.accordion{
max-width:900px;
margin:10px auto;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(212,175,55,.5);
background:rgba(0,0,0,.35);
backdrop-filter:blur(10px);
}


/* ACCORDION HEADER */

.accordion-header{
padding:14px 16px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
font-weight:600;
color:#f5f5f5;
border-bottom:1px solid rgba(255,255,255,.05);
transition:.3s;
}

.accordion-header:hover{
background:rgba(212,175,55,.15);
}


/* ARROW ICON */

.accordion-header::after{
content:"▼";
font-size:12px;
color:#d4af37;
transition:.3s;
}


/* CONTENT WRAPPER */

.accordion-content{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .4s ease;
}

.accordion-content-inner{
overflow:hidden;
padding:0 16px;
}


/* WHEN ACTIVE */

.accordion.active .accordion-content{
grid-template-rows:1fr;
}

.accordion.active .accordion-header::after{
transform:rotate(180deg);
}


/* CONTENT TEXT */

.accordion-content-inner p{
padding:10px 0;
line-height:1.6;
color:#ddd;
}

.accordion-content-inner ul{
padding:10px 0 15px 18px;
color:#ddd;
}

.accordion-content-inner li{
margin-bottom:6px;
}