:root{
  --bg:#4f4a4a;
  --fg:#fafafa;
  --muted:#a8a8a8;
  --card:rgba(255,255,255,.03);
  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.25);
  --primary:#efb5c8;
  --primary-dark:#e79ab5;
  --primary-ink:#20141a;
  --radius:14px;
  --heading:"Cormorant Garamond", serif;
  --body:"Manrope", sans-serif;
  --logo:"Great Vibes", cursive;
}
*{
  box-sizing:border-box
  }
html,body{
  margin:0;padding:0
 }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--body); font-size:15px; line-height:1.55;
  min-height:100vh;
}
h1,h2,h3{
  font-family:var(--heading); 
  font-weight:500; 
  letter-spacing:.01em;
   margin:0
  }

a{
  color:inherit; 
  text-decoration:none
}

.booking-page section{
    padding:0;
}
/* Hero */
header.hero{
  position:relative; padding:160px 10% 64px; min-height:60vh;
  display:flex; align-items:flex-end;
  background:var(--bg);
}
.eyebrow{
  font-size:11px;
  letter-spacing:6px; 
  text-transform:uppercase; 
  color:var(--primary); 
  margin:0 0 14px
}

.hero h1{
  font-size:clamp(48px,8vw,104px); 
  line-height:.95
}

.hero h1 em{
  font-family:var(--logo); 
  color:var(--primary);
  font-style:normal
}

.hero p{
  color:var(--fg);
  max-width:560px;
  margin-top:22px
}

/* Layout */
form.book{
  display:grid; gap:40px;
  padding:0 10% 128px;
  grid-template-columns:1fr;
}

@media (min-width:1024px){
   form.book{grid-template-columns:1.6fr 1fr} 
  }

section.step{margin-bottom:48px}
.step-head{
  display:flex; 
  align-items:baseline;
   gap:16px;
   margin-bottom:20px
  }

.step-num{
  font-family:var(--heading); 
  color:var(--primary); 
  font-size:14px;
   letter-spacing:4px
  }

.step-title{
  font-size:32px
}

/* Chips */
.chips{
  display:flex; 
  flex-wrap:wrap;
  gap:12px
}

.chip{
  border:1px solid #fff; 
  background:rgba(255,255,255,.05);
  color:#fff; 
  padding:12px 24px;
  border-radius:999px;
  font-family:var(--heading); 
  font-size:18px;
  cursor:pointer; 
  transition:.2s;
}

.chip:hover{
  border-color:rgba(239,181,200,.6); 
  background:rgba(255,255,255,.1)
}
.chip.active{
  background:var(--primary); 
  color:var(--primary-ink); 
  border-color:var(--primary)
}

/* Service groups */

.group-title{
  font-size:24px; 
  color:var(--primary);
   margin-bottom:12px
  }

.services{
  display:grid; 
  gap:8px;
  margin-bottom:28px
}

@media (min-width:640px){
   .services{grid-template-columns:1fr 1fr} }

.service{

  display:flex;
  align-items:center; 
  justify-content:space-between;
  padding:12px 16px;
  border:1px solid #fff;
  background:rgba(255,255,255,.03);
   border-radius:10px; 
  cursor:pointer;
  transition:.2s;
}

.service:hover{
  border-color:var(--border-strong)
}

.service.checked{
  border-color:var(--primary); 
  background:rgba(239,181,200,.1)
}

.service .name{
  display:flex; 
  align-items:
  center; 
  gap:12px; 
  font-size:14px
}

.service input[type=checkbox]{
  accent-color:var(--primary); 
  width:16px; 
  height:16px
}

.service .price{
  font-family:var(--heading); 
  font-size:18px; 
  color:var(--primary)
}

/* Artists */

.artists{
  display:grid;
  gap:16px
  }
@media (min-width:640px){ 
  .artists{grid-template-columns:1fr 1fr} }

.artist{
  text-align:left; 
  padding:24px; 
  border-radius:14px; 
  cursor:pointer;
  border:1px solid #fff; 
  background:rgba(255,255,255,.03);
  transition:.2s; color:inherit; font:inherit;
}

.artist:hover{
  border-color:var(--border-strong)
}

.artist.active{
  border-color:var(--primary);
  background:rgba(239,181,200,.1)
}

.artist .label{
  font-size:10px; 
  letter-spacing:3px;
   text-transform:uppercase; 
   color:var(--primary); 
   margin-bottom:8px
  }

.artist .aname{
  font-family:var(--heading); 
  font-size:24px}

.artist .role{
  color:var(--fg);
   font-size:14px; 
   margin-top:4px}

/* Date + time */

.datetime{
  display:grid; 
  gap:24px
}

@media (min-width:640px){ 
  .datetime{grid-template-columns:240px 1fr}
 }

.field-label{
  font-size:11px; 
  text-transform:uppercase;
  letter-spacing:3px; 
  color:#fff; 
  display:block; 
  margin-bottom:8px
}

.input::placeholder {
    color: #fff;
}

.input{
  width:100%; 
  padding:12px 16px;
   border-radius:10px;
  border:1px solid #fff;
   background:rgba(255,255,255,.05);
  color:#fff; 
  font:inherit; 
  outline:none; 
  transition:.2s;
}

.input:focus{
  border-color:var(--primary)
}

textarea.input{
  resize:none; 
  min-height:100px;
}

.times{display:flex; flex-wrap:wrap; gap:8px}
.time{
  border:1px solid rgba(255, 255, 255, 0.844); background:rgba(255,255,255,.05);
  color:#fff; padding:8px 20px; border-radius:999px;
  font-family:var(--heading); font-size:18px; cursor:pointer; transition:.2s;
}
.time:hover{border-color:rgba(239,181,200,.6)}
.time.active{background:var(--primary); color:var(--primary-ink); border-color:var(--primary)}

.details{display:grid; gap:16px}
@media (min-width:640px){ .details{grid-template-columns:1fr 1fr} .span-2{grid-column:span 2} }

/* Summary */

aside.summary{
  position:sticky; 
  top:32px; 
  align-self:start
  
}

.summary-card{

  border:1px solid #fff; 
 background: #4f4a4a;
 border-radius:20px; 
 padding:32px;
 backdrop-filter:blur(8px);
}

.summary .eyebrow{
  margin-bottom:8px; 
  letter-spacing:4px
}

.summary h2{
  font-size:36px; 
  margin-bottom:24px
}

.row{
  display:flex;
   justify-content:
   space-between; 
   gap:12px; 
   font-size:14px;
   padding:6px 0
  }

.row .k{
  color:var(--fg); 
  text-transform:uppercase;
   letter-spacing:2px; 
   font-size:11px
  }

.row .v{
  text-align:right
}

hr.sep{
  border:0; 
  height:1px;
  background:#fff;
  margin:20px 0
}

.svc-list{
  list-style:none; 
  padding:0; margin:0; 
  display:grid; gap:8px
}


.svc-list li{
  display:flex; 
  justify-content:space-between; 
  gap:12px; 
  font-size:14px
}


.svc-list .g{
  color:var(--fg)
}


.svc-list .p{
  color:var(--primary); 
  white-space:nowrap
}


.total{
  display:flex; 
  justify-content:space-between; 
  align-items:baseline; 
  border-top:1px solid #fff; 
  padding-top:20px; margin-top:24px
}


.total .k{
  font-size:11px; 
  letter-spacing:4px; 
  text-transform:uppercase; 
  color:var(--fg)
}


.total .v{
  font-family:var(--heading); 
  font-size:36px; color:var(--primary)
}

.btn-submit{
  width:100%; 
  margin-top:24px; 
  padding:16px; 
  border-radius:999px;
  border:0;
  background:var(--primary); 
  color:var(--primary-ink); 
  font-family:var(--heading);
  font-size:18px; 
  letter-spacing:2px; 
  text-transform:uppercase; 
  cursor:pointer; 
  transition:.2s;
}

.btn-submit:hover:not(:disabled){
  background:var(--primary-dark)
}

.btn-submit:disabled{
  opacity:.5; cursor:not-allowed}
.hidden{display:none}
.note{color:var(--fg); font-size:14px}
.note.warn{color:var(--primary)}


input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    opacity: 1;
}