body{

font-family:'Poppins',sans-serif;


}

/* HERO */

.reserve-hero{
height:300px;
background:url('../img/image_site/hero.jpg') center/cover no-repeat;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.reserve-hero .overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
}

.hero-content{
position:relative;
color:white;
text-align:center;
}

.hero-content h1{
font-size:40px;
}

.hero-content p{
opacity:0.9;
}

/* CONTAINER */

.reserve-container{
padding:60px 20px;
background:#f9fafb;
}

/* GRID */

.reserve-grid{
display:grid;
grid-template-columns:1fr 2fr;
gap:30px;
max-width:1000px;
margin:auto;
}

/* VEHICLE CARD */

.vehicle-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.vehicle-card .price{
font-size:22px;
color:#17c3b2;
font-weight:bold;
}

/* FORM */

.reserve-form{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
animation:fadeUp 0.8s ease;
}

.reserve-form h3{
margin-bottom:15px;
color:#17c3b2;
}

/* GRID INPUT */

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.form-grid input,
.reserve-form input,
.reserve-form textarea{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:15px;
}

.reserve-form textarea{
min-height:100px;
}

/* BUTTON */

.btn-submit{
background:linear-gradient(120deg,#f59e0b,#fbbf24);
color:white;
padding:14px;
border:none;
border-radius:8px;
cursor:pointer;
width:100%;
transition:0.3s;
}

.btn-submit:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
}

/* SUCCESS */

.success-box{
background:#ecfdf5;
border-left:5px solid #17c3b2;
padding:15px;
margin-bottom:20px;
border-radius:6px;
}

/* ANIMATION */

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

/* MOBILE */

@media(max-width:900px){

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

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

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

}

/* ============================
NEW: Reservation helpers (steps, deposit, docs, FAQ)
============================ */

/* ensure the intro panels sit in the right column of the grid */
.reserve-intro{
	grid-column:2 / 3;
	display:flex;
	flex-direction:column;
	gap:18px;
	align-self:start;
}

.steps-card{
	position:relative;
	background:linear-gradient(180deg, rgba(255,255,255,0.96), #ffffff);
	padding:20px;
	border-radius:14px;
	border:1px solid rgba(17,24,39,0.04);
	box-shadow:0 20px 50px rgba(2,6,23,0.06);
	overflow:visible;
}
.steps-card, .deposit-card{grid-column:1 / -1}
.steps-card h3{margin:0 0 14px 0;color:#0f172a;font-size:20px;letter-spacing:0.2px}

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

.steps-card-top{animation:fadeUp .6s ease both}

.step{
	display:flex;
	gap:14px;
	align-items:flex-start;
	background:linear-gradient(180deg,#ffffff,#fbfdff);
	padding:14px;
	border-radius:12px;
	border:1px solid rgba(2,6,23,0.04);
	transition:transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;
	transform:translateY(0);
	position:relative;
}
.step:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(2,6,23,0.08)}

.step-icon{width:52px;height:52px;flex:0 0 52px;background:linear-gradient(180deg,#fff,#f7f7fb);border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(2,6,23,0.03)}
.step-body strong{display:block;margin-bottom:6px;color:#0b1220}
.step-body p{margin:0;color:#4b5563;font-size:14px}

/* numbered badge overlay */
.step:before{
	content:"";
}
.step .step-badge{
	position:absolute;right:18px;top:-12px;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(180deg,#111827,#0f172a);color:#fff;font-weight:800;margin-right:8px;font-size:13px;box-shadow:0 6px 18px rgba(2,6,23,0.12)}

/* staggered entrance for each step */
.steps-grid .step{opacity:0;transform:translateY(12px)}
.steps-grid .step:nth-child(1){animation:staggerIn .45s .05s both}
.steps-grid .step:nth-child(2){animation:staggerIn .45s .12s both}
.steps-grid .step:nth-child(3){animation:staggerIn .45s .19s both}
.steps-grid .step:nth-child(4){animation:staggerIn .45s .26s both}

@keyframes staggerIn{
	to{opacity:1;transform:translateY(0)}
}


.deposit-card{
	display:flex;
	gap:18px;
	align-items:center;
	justify-content:space-between;
	background:linear-gradient(90deg,#fffaf0,#ffffff);
	padding:14px 18px;
	border-radius:12px;
	box-shadow:0 8px 26px rgba(245,158,11,0.06);
}
.deposit-left h4{margin:0;color:#92400e}
.deposit-amount{font-size:20px;font-weight:800;color:#b45309;margin-top:6px}
.deposit-meta{font-size:13px;color:#6b7280}
.deposit-right p{margin:0;color:#374151}
.deposit-right .muted{color:#6b7280;font-size:13px}

.reserve-top-note{background:linear-gradient(90deg,rgba(23,195,178,0.04),transparent);padding:10px;border-radius:8px;margin-bottom:12px;font-size:15px}

.doc-note{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:8px;background:#fff7ed;border-left:4px solid #f59e0b;margin:14px 0}
.doc-note .doc-icon{flex:0 0 24px;margin-top:4px}
.doc-note strong{display:block}
.doc-note p{margin:4px 0 0 0;color:#374151}

/* FAQ styles */
.faq-full{grid-column:1 / -1;background:transparent;padding:22px 0;margin-top:20px}
.faq-full h3{margin-bottom:12px;color:#111827}
.faq-full details{background:#ffffff;border-radius:10px;padding:12px 16px;margin-bottom:10px;box-shadow:0 8px 24px rgba(2,6,23,0.04);}
.faq-full summary{cursor:pointer;font-weight:700;list-style:none;outline:none;display:flex;justify-content:space-between;align-items:center}
.faq-full summary::-webkit-details-marker{display:none}
.faq-full summary:after{content:'+';font-weight:700;color:#6b7280}
.faq-full details[open] summary:after{content:'−';}
.faq-body{margin-top:10px;color:#374151;line-height:1.6}

/* Responsive: ensure intro and steps collapse nicely */
@media(max-width:900px){
	.reserve-intro{grid-column:1/ -1}
	.steps-grid{grid-template-columns:1fr}
	.deposit-card{flex-direction:column;align-items:flex-start}
	.steps-card{padding:16px}
	.step{padding:12px}
}