/* ==========================================
   MIRROR MATCH BOOKING V2
========================================== */

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

body{

background:#050505;

color:#fff;

font-family:Arial,sans-serif;

}

.bookingHeader{

padding:30px 20px;

text-align:center;

background:#111;

border-bottom:1px solid #333;

}

.bookingHeader h1{

font-family:'Allura',cursive;

font-size:72px;

margin-bottom:10px;

}

.bookingHeader p{

opacity:.75;

font-size:18px;

}

.progressContainer{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

overflow-x:auto;

gap:10px;

background:#0d0d0d;

border-bottom:1px solid #222;

}

.progressStep{

min-width:120px;

padding:12px;

border-radius:15px;

background:#181818;

text-align:center;

border:1px solid #333;

transition:.3s;

}

.progressStep.active{

background:#ffffff;

color:#000;

font-weight:bold;

}

.bookingContainer{

max-width:1200px;

margin:auto;

padding:25px;

display:grid;

gap:20px;

}

.bookingCard{

background:#111;

border:1px solid #333;

border-radius:18px;

padding:22px;

}

.bookingCard h2{

font-family:'Cinzel',serif;

margin-bottom:15px;

}

.bookingOptions{

display:grid;

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

gap:15px;

}

.bookingOptions button{

padding:18px;

font-size:17px;

border-radius:14px;

border:none;

cursor:pointer;

background:#fff;

color:#000;

font-weight:bold;

transition:.25s;

}

.bookingOptions button:hover{

transform:scale(1.03);

}

.serviceCard{

padding:15px;

border:1px solid #444;

border-radius:15px;

margin-bottom:12px;

cursor:pointer;

transition:.25s;

}

.serviceCard:hover{

background:#202020;

}

#bookingCart{

display:grid;

gap:12px;

}

.cartItem{

padding:15px;

border-radius:15px;

background:#181818;

border:1px solid #333;

}

.timeButton{

padding:12px 18px;

margin:6px;

border-radius:999px;

border:none;

cursor:pointer;

background:#fff;

color:#000;

font-weight:bold;

}

.summaryCard{

background:#181818;

border-radius:15px;

padding:18px;

line-height:1.8;

}

.primaryButton{

width:100%;

padding:18px;

margin-top:20px;

border:none;

border-radius:999px;

background:#fff;

color:#000;

font-size:18px;

font-weight:bold;

cursor:pointer;

}

.primaryButton:hover{

opacity:.9;

}

@media(max-width:768px){

.bookingHeader h1{

font-size:52px;

}

.progressContainer{

justify-content:flex-start;

}

.bookingContainer{

padding:15px;

}

}