/* =========================
BOOKING PROGRESS FORM
========================= */

.booking-progress{
padding:100px 0;
background:linear-gradient(135deg,#f0f9ff,#e0f7fa);
}

.booking-title{
font-family:'Quintessential',serif;
font-size:42px;
margin-bottom:60px;
color:darkcyan;
}

/* =========================
PROGRESS BAR
========================= */

.progress-wrapper{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
margin-bottom:60px;
max-width:800px;
margin-left:auto;
margin-right:auto;
}

.progress-line{
position:absolute;
height:4px;
background:darkcyan;
width:0%;
top:22px;
left:0;
z-index:1;
transition:0.4s ease;
}

.progress-wrapper::before{
content:"";
position:absolute;
height:4px;
width:100%;
background:#e0e0e0;
top:22px;
left:0;
z-index:0;
}

.progress-step{
text-align:center;
position:relative;
z-index:2;
}

.progress-step span{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#e0e0e0;
font-weight:600;
transition:0.3s;
}

.progress-step.active span{
background:darkcyan;
color:white;
}

.progress-step p{
margin-top:8px;
font-size:14px;
}

/* =========================
FORM CONTAINER
========================= */

#bookingForm{
max-width:800px;
margin:auto;
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 10px 35px rgba(0,0,0,0.08);
}

body[data-theme="dark"] #bookingForm{
background:#1e293b;
color:#e2e8f0;
}

/* =========================
FORM STEPS
========================= */

.form-step{
display:none;
animation:fade 0.4s ease;
}

.form-step.active{
display:block;
}

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

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

.form-control{
border-radius:8px;
padding:12px;
border:1px solid #ddd;
}

.form-control:focus{
border-color:darkcyan;
box-shadow:0 0 0 0.15rem rgba(0,139,139,0.2);
}

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

.form-navigation{
display:flex;
justify-content:space-between;
margin-top:30px;
}

.form-navigation button{
padding:10px 28px;
border-radius:8px;
}

/* =========================
PAYMENT AREA
========================= */

.payment-info{
background:#f1f5f9;
padding:15px;
border-radius:8px;
margin-bottom:20px;
}

body[data-theme="dark"] .payment-info{
background:#334155;
}

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

@media(max-width:768px){

.booking-title{
font-size:32px;
}

.progress-step p{
font-size:12px;
}

#bookingForm{
padding:25px;
}

.form-navigation{
flex-direction:column;
gap:10px;
}

}

/* =========================
INPUT ERROR UI
========================= */

.input-error{
border:2px solid #e63946 !important;
animation:shake 0.3s;
}

.error-text{
color:#e63946;
font-size:12px;
display:block;
margin-top:4px;
}

@keyframes shake{
0%{transform:translateX(0)}
25%{transform:translateX(-4px)}
50%{transform:translateX(4px)}
75%{transform:translateX(-4px)}
100%{transform:translateX(0)}
}

/* ================================
BOOKING FORM VISIBILITY CONTROL
================================ */

/* Hidden by default */

#booking-form-section{
display:none;
opacity:0;
transform:translateY(40px);
transition:all 0.5s ease;
}

/* When activated */

#booking-form-section.active{
display:block;
opacity:1;
transform:translateY(0);
}


/* Optional smooth hide for services */

.services.hidden{
opacity:0;
transform:translateY(-30px);
pointer-events:none;
transition:all 0.4s ease;
}

.booking-close{
position:absolute;
top:20px;
right:20px;
font-size:22px;
cursor:pointer;
background:#fff;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
transition:0.3s;
}

.booking-close:hover{
transform:scale(1.1);
}
/* SUCCESS SCREEN */

.success-screen{
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;
}

.success-box{
background:#111;
padding:40px;
border-radius:15px;
text-align:center;
color:#fff;
animation:fadeIn 0.5s ease;
}

/* CHECKMARK */

.checkmark{
width:80px;
height:80px;
border-radius:50%;
border:4px solid #00ff88;
position:relative;
margin:0 auto 20px;
}

.checkmark::after{
content:'';
position:absolute;
left:22px;
top:35px;
width:20px;
height:10px;
border-left:4px solid #00ff88;
border-bottom:4px solid #00ff88;
transform:rotate(-45deg);
}

/* RECEIPT */

.receipt-section{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000000cc;
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.receipt-box{
background:#fff;
color:#000;
padding:30px;
border-radius:10px;
width:90%;
max-width:500px;
}

@keyframes fadeIn{
from{opacity:0; transform:scale(0.9);}
to{opacity:1; transform:scale(1);}
}