/* ===================================
BhadeKaar Main Stylesheet
=================================== */

:root{
--primary:#0F172A;
--secondary:#F97316;
--accent:#14B8A6;
--light:#F8FAFC;
--dark:#111827;
--gray:#64748B;
--white:#FFFFFF;
--border:#E5E7EB;
--shadow:0 10px 30px rgba(0,0,0,0.08);
}

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

html{
scroll-behavior:smooth;
}

body{
font-family:Inter, Arial, Helvetica, sans-serif;
background:#ffffff;
color:var(--dark);
line-height:1.6;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* =====================
Header
===================== */

.header{
position:sticky;
top:0;
z-index:1000;
background:var(--white);
border-bottom:1px solid var(--border);
}

.header .container{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
}

.logo img{
height:52px;
}

nav ul{
display:flex;
list-style:none;
gap:24px;
align-items:center;
}

nav a{
text-decoration:none;
color:var(--dark);
font-weight:600;
}

.login-btn{
background:var(--primary);
color:white !important;
padding:10px 18px;
border-radius:8px;
}

/* =====================
Hero
===================== */

.hero{
background:linear-gradient(135deg,#0F172A,#1E293B);
color:white;
padding:100px 0;
}

.hero-content{
text-align:center;
}

.hero h1{
font-size:3rem;
margin-bottom:20px;
line-height:1.2;
}

.hero p{
max-width:700px;
margin:auto;
font-size:1.15rem;
opacity:.9;
}

.search-box{
margin-top:40px;
background:white;
padding:18px;
border-radius:14px;
display:flex;
gap:12px;
box-shadow:var(--shadow);
}

.search-box select,
.search-box input{
flex:1;
padding:15px;
border:1px solid var(--border);
border-radius:8px;
font-size:15px;
}

.search-box button{
background:var(--secondary);
color:white;
border:none;
padding:15px 25px;
border-radius:8px;
cursor:pointer;
font-weight:700;
}

/* =====================
Sections
===================== */

section{
padding:80px 0;
}

section h2{
text-align:center;
margin-bottom:50px;
font-size:2.2rem;
}

/* =====================
Cards
===================== */

.category-grid,
.preview-grid,
.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.card,
.step{
background:white;
border-radius:14px;
padding:25px;
border:1px solid var(--border);
box-shadow:var(--shadow);
}

.card h3,
.step h3{
margin-bottom:15px;
}

.card ul{
list-style:none;
}

.card ul li{
padding:8px 0;
border-bottom:1px solid #f1f1f1;
}

.card ul li:last-child{
border-bottom:none;
}

/* =====================
Vendor CTA
===================== */

.vendors{
background:#F8FAFC;
text-align:center;
}

.vendors p{
max-width:700px;
margin:auto;
margin-bottom:30px;
}

.cta-btn{
display:inline-block;
text-decoration:none;
background:var(--secondary);
color:white;
padding:15px 30px;
border-radius:10px;
font-weight:700;
}

/* =====================
Dashboard Preview
===================== */

.dashboard-preview{
background:white;
}

/* =====================
Contact
===================== */

.contact{
background:#F8FAFC;
text-align:center;
}

.contact p{
margin-bottom:10px;
}

.whatsapp-btn{
display:inline-block;
margin-top:20px;
background:#25D366;
color:white;
text-decoration:none;
padding:14px 24px;
border-radius:10px;
font-weight:700;
}

/* =====================
Footer
===================== */

footer{
background:var(--primary);
color:white;
text-align:center;
padding:30px 0;
}

/* =====================
Forms
===================== */

.form-container{
max-width:500px;
margin:auto;
background:white;
padding:35px;
border-radius:16px;
box-shadow:var(--shadow);
}

.form-container input,
.form-container select,
.form-container textarea{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid var(--border);
border-radius:8px;
}

.form-container button{
width:100%;
background:var(--secondary);
color:white;
border:none;
padding:15px;
border-radius:8px;
font-weight:700;
cursor:pointer;
}

/* =====================
Dashboard Layout
===================== */

.dashboard{
display:flex;
min-height:100vh;
}

.sidebar{
width:260px;
background:var(--primary);
color:white;
padding:30px 20px;
}

.sidebar h2{
text-align:left;
margin-bottom:30px;
}

.sidebar ul{
list-style:none;
}

.sidebar li{
margin-bottom:18px;
}

.sidebar a{
color:white;
text-decoration:none;
}

.dashboard-content{
flex:1;
padding:30px;
background:#F8FAFC;
}

.stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.stat-card{
background:white;
padding:25px;
border-radius:12px;
box-shadow:var(--shadow);
}

.stat-card h3{
font-size:2rem;
color:var(--secondary);
}

/* =====================
Responsive
===================== */

@media(max-width:900px){

.search-box{
flex-direction:column;
}

.category-grid,
.preview-grid,
.steps,
.stats-grid{
grid-template-columns:1fr;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:2rem;
}

.dashboard{
flex-direction:column;
}

.sidebar{
width:100%;
}

}