/* File name = booking.css */
.pill, .empCard, .slot { cursor:pointer; }
.pill.on,
.empCard.on {
  outline: 2px solid rgba(100,200,255,0.7);
  background: rgba(100,200,255,0.14);
}
.slotBtn {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.05s ease;
}
.slotBtn:hover { transform: translateY(-1px); }
.slotBtn.on {
  outline: 3px solid rgba(100,200,255,0.85);
  background: rgba(100,200,255,0.22);
  border-color: rgba(100,200,255,0.55);
  box-shadow: 0 0 0 4px rgba(100,200,255,0.12);
}
.slotBtn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Time slots layout (longer labels like “11:00 AM – 12:00 PM”) */
.slotgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

/* Wizard visibility */
.stepCard { display:none; }
.stepCard.active { display:block; }

/* Make steps feel full-width even though grid2 exists */
.stepCard { grid-column: 1 / -1; }

/* Step nav row */
.stepNav{
  margin-top: 14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.stepNav .left,
.stepNav .right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Employee services line */
.empMeta{
  margin-top: 6px;
  font-size: 12px;
  opacity: .85;
}

/* Employee list (match the “staff + short description” look) */
.empRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.empRadio{
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  box-sizing:border-box;
  flex:0 0 auto;
}
.empCard.on .empRadio{
  background: rgba(100,200,255,0.85);
  border-color: rgba(100,200,255,0.85);
  box-shadow: 0 0 0 4px rgba(100,200,255,0.12);
}
.empAvatar{
width:80px;
height:80px;
border-radius:999px;
object-fit:cover;
border:1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.08);
flex:0 0 auto;
}
.empAvatar.placeholder{
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size: 22px;
letter-spacing:.5px;
text-transform:uppercase;
}
.empName{
font-size: 18px;
font-weight: 900;
}
.empMeta{
font-size: 13px;
opacity: .85;
}

.empInfo{ min-width:0; }

/* Logged-in user pill (top-right) */
.userPill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.userLabel{ font-weight: 900; }

/* Step 2 layout: time (left) + staff (right) */
.staffTimeLayout{
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 10px;
  align-items: start;
}
.timeCol,
.staffCol{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px;
}

.timeHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:6px;
  flex-wrap:wrap;
}

/* Scroll behavior similar to the reference UI */
#slotGrid{
  max-height: calc(100vh - 430px);
  overflow:auto;
  padding-right: 4px;
}
#employeeList{
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 430px);
  overflow:auto;
  padding-right: 4px;
}

@media (max-width: 900px){
  .staffTimeLayout{ grid-template-columns: 1fr; }
  #slotGrid, #employeeList{ max-height: none; }
}

/* Tiny progress pill */
.wizPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  font-size: 12px;
}

/* Review box */
.reviewBox{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
  line-height: 1.55;
}
.reviewBox b{ font-weight: 800; }
.reviewGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .reviewGrid{ grid-template-columns: 1fr; }
}


/* Notifications banner (non-blocking; safe if disabled) */
.notifBanner{position: sticky; top: 0; z-index: 80; padding: 10px 14px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,.08);}
.notifInner{max-width: 1120px; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between;}
.notifText{min-width: 0;}
.notifTitle{font-weight: 800; letter-spacing: .2px;}
.notifDesc{font-size: 12px; color: rgba(0,0,0,.65); margin-top: 2px;}
.notifActions{display: flex; gap: 8px; align-items: center;}
.notifBtn{padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.04); cursor: pointer; font-weight: 700;}
.notifBtn:hover{background: rgba(0,0,0,.06);}
.notifLink{padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: transparent; cursor: pointer;}

/* ===== Step 1 Services (clean + professional) ===== */
.svcPanel{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 14px;
}

.svcPanelTop{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.svcTitle{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 14px;
}

.svcSub{
  margin-top: 2px;
  font-size: 12px;
  opacity: .85;
}

.svcTools{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.svcSearch{
  width: min(360px, 70vw);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.20);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.svcSearch:focus{
  border-color: rgba(100,200,255,.55);
  box-shadow: 0 0 0 3px rgba(100,200,255,.18);
}

.btnGhost{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

/* Scroll area + grid so it doesn’t explode the page */
.svcGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}


/* -------- Services UX upgrade: grouped + scan-friendly -------- */
.svcGroups{display:flex; flex-direction:column; gap:10px;}
.svcGroup .svcGrid{max-height:none; overflow:visible;}
.svcGroup{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 16px; overflow:hidden;}
.svcGroup > summary{list-style:none; cursor:pointer; padding:12px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.svcGroup > summary::-webkit-details-marker{display:none;}
.svcGroupHead{display:flex; align-items:center; gap:10px;}
.svcGroupIcon{width:32px; height:32px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.06);}
.svcGroupName{font-weight:800;}
.svcGroupMeta{font-size:12px; color: rgba(255,255,255,.70);}
.svcGroupCount{font-size:12px; padding:6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);}
.svcGroupBody{padding: 0 12px 12px;}
.svcGroupHint{font-size:12px; color: rgba(255,255,255,.68); margin: 6px 0 10px;}

.svcSelectedBar{
  margin-top:12px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.svcSelectedTitle{font-weight:800; opacity:.92; padding-top:2px;}
.svcSelectedChips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1;}
.svcChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size: 12px;
}
.svcChip button{
  all:unset;
  cursor:pointer;
  width:18px;
  height:18px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}
.svcChip button:hover{background: rgba(255,255,255,.12);}

@media (max-width: 980px){
  .svcGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .svcGrid{ grid-template-columns: 1fr; max-height: 360px; }
}

/* Service “pill” becomes a tidy card */
.pill{
  text-align:left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}
.pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
}
.pill.on{
  border-color: rgba(100,200,255,.65);
  background: rgba(100,200,255,.12);
  outline: none;
}
.pill .svcName{
  display:block;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 6px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.pill .svcMeta{
  display:flex;
  gap: 10px;
  font-size: 12px;
  opacity: .88;
  flex-wrap: wrap;
}
.pill .svcMeta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space: nowrap;
}

/* Duration-based tinting */
.svcGrid .svcPill.durShort{
  background: rgba(80, 200, 120, .08);
  border-color: rgba(80, 200, 120, .22);
}
.svcGrid .svcPill.durLong{
  background: rgba(96, 165, 250, .08);
  border-color: rgba(96, 165, 250, .22);
}
.svcGrid .pill.svcPill.on{
  box-shadow: 0 0 0 3px rgba(94,234,212,.18);
  border-color: rgba(94,234,212,.35);
}

/* ===== FORCE multi-column grid (overrides any .pills flex from styles.css) ===== */
#serviceList, #serviceList * { box-sizing: border-box; }

#serviceList .svcGrid,
.pills.svcGrid,
.svcGroupBody .svcGrid{
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch;
  gap: 12px;
}

/* 3 columns on wide screens, 2 on medium, 1 on mobile */
@media (min-width: 1100px){
  #serviceList .svcGrid,
  .pills.svcGrid,
  .svcGroupBody .svcGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 760px) and (max-width: 1099px){
  #serviceList .svcGrid,
  .pills.svcGrid,
  .svcGroupBody .svcGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 759px){
  #serviceList .svcGrid,
  .pills.svcGrid,
  .svcGroupBody .svcGrid{ grid-template-columns: 1fr !important; }
}

/* Make each card fill its grid cell nicely */
#serviceList .svcGrid .svcPill{ height: 100%; }

/* === FIX: remove dead space on right in Step 1 (cardbody grid from assets) === */
#step1Card .cardbody > *{
  grid-column: 1 / -1 !important;
}
#step1Card .svcPanel,
#step1Card .svcSelectedBar,
#step1Card .row2{
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 980px){
  .svcGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .svcGrid{ grid-template-columns: 1fr; max-height: 360px; }
}

/* Service “pill” becomes a tidy card */
.pill{
  text-align:left;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}

.pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
}

.pill.on{
  border-color: rgba(100,200,255,.65);
  background: rgba(100,200,255,.12);
  outline: none; /* your outline looked a bit “loud” */
}

.pill .svcName{
  display:block;
  font-weight: 750;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill .svcMeta{
  display:flex;
  gap: 10px;
  font-size: 12px;
  opacity: .88;
}

.pill .svcMeta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space: nowrap;
}

  
/* ===== Step 1: appointment date in header ===== */
.step1HeadRow{
  display:flex;
  gap: 14px;
  align-items:flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.apptDateBox{
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 220px;
}
.apptDateLabel{
  font-size: 12px;
  font-weight: 800;
  opacity: .85;
}
.apptDateBox input[type="date"]{
  min-width: 220px;
}

/* Holiday / closed-day message */
.dateNotice{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, .25);
  background: rgba(255,255,255,.86);
  color: rgba(220, 38, 38, 1);
  font-weight: 800;
}


/* === UI tweaks per reference app === */
.topbar.topbarRight{justify-content:flex-end;}
.topbar.topbarRight .actions{margin-left:auto; gap:10px;}

/* Welcome note under progress bar */
.welcomeNote{
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}
.welcomeNote .welcomeSub{
  font-size: 13px;
  opacity: .92;
}

/* Appointment closed notice - warm (not harsh red) */
.dateNotice{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.14);
  color: rgba(120,53,15,1);
  font-weight: 700;
}

/* Selected service stands out clearly */
.svcGrid .pill.svcPill.on{
  transform: scale(1.03);
  border-color: rgba(245,158,11,.75) !important;
  background: rgba(245,158,11,.16) !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.18) !important;
}
.svcGrid .pill.svcPill.on .svcMeta{opacity:.95;}
.svcGrid .pill.svcPill.on .svcName{opacity:1;}
/* Keep hover subtle on selected */
.svcGrid .pill.svcPill.on:hover{transform: scale(1.035);}

/* Hide legacy bottom nav (we use a sticky footer CTA instead) */
.stepNav{display:none !important;}

/* Sticky footer CTA (always visible while scrolling) */
.stickyCta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  padding: 10px 12px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0,0,0,.08);
}
.stickyCtaInner{
  max-width: 1120px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.stickySummary{
  min-width: 0;
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  align-items:center;
}
.stickySummary b{font-weight:800;}
.stickySummary .val{color: rgba(0,0,0,.72); font-weight:700;}
.stickyActions{display:flex; gap:10px; align-items:center;}
.stickyActions .btn.primary{ padding: 12px 18px; border-radius: 14px; font-weight: 900; }

@media (max-width: 720px){
  .stickyCtaInner{flex-direction:column; align-items:stretch;}
  .stickyActions{justify-content: space-between;}
}

/* Prevent content from hiding behind sticky bar */
.container{padding-bottom: 96px;}

#step3Card .row2{
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
#step3Card input{
  height: 42px;
}

/* --- Make buttons LOOK disabled but still clickable (so we can show guidance) --- */
.btn.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: saturate(.7);
}
.btn.is-disabled:hover{ transform:none !important; }

/* Green “ready” Continue */
.btn.primary.is-ready{
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

/* Orange Back button */
.btn.backBtn{
  background: rgba(245,158,11,.18) !important;
  border-color: rgba(245,158,11,.35) !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 900 !important;
}

/* Make hidden actually hide (some CSS frameworks break [hidden]) */
[hidden]{ display:none !important; }

/* Top-right buttons: bigger, bold, orange */
#loginBtn, #myBookingsBtn, #logoutBtn{
  font-weight: 900 !important;
  font-size: 16px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;

  /* muted professional orange */
  background: rgba(245,158,11,.22) !important;
  border: 1px solid rgba(245,158,11,.40) !important;
  color: #111827 !important;

  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
}
#loginBtn:hover, #myBookingsBtn:hover, #logoutBtn:hover{
  background: rgba(245,158,11,.30) !important;
  transform: translateY(-1px);
}


/* Signed in pill: bigger */
.userPill{
  font-size: 14px !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
}

#date{
  font-size: 16px !important;
  font-weight: 900 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}
#datePretty{
  font-size: 14px !important;
  opacity: .95;
}

/* Step 3: visible confirm controls (NOT hidden like .stepNav) */
.confirmActions{
  margin-top: 12px;
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}

.confirmActions .left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

.confirmActions .right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.termsRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  max-width: 520px;
  text-align: right;
}

.termsRow input[type="checkbox"]{
  width:18px;
  height:18px;
  margin-top: 2px;
}

.termsRow a{ font-weight: 900; }

@media (max-width: 720px){
  .confirmActions{ align-items:stretch; }
  .confirmActions .right{ align-items:stretch; }
  .termsRow{ text-align:left; max-width: none; }
}

/* Step 3: Terms row — clean, full-width, left aligned */
.termsInlineWrap{
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
}

.termsRowInline{
  display: flex;
  align-items: center;
  justify-content: flex-start; /* ✅ force left */
  gap: 10px;
  margin: 0;
  text-align: left;            /* ✅ force left */
}

.termsRowInline input{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Keep it one-line on desktop, wrap nicely on small screens */
@media (min-width: 900px){
  .termsRowInline span{
    white-space: nowrap;       /* ✅ one line on desktop */
  }
}
@media (max-width: 899px){
  .termsRowInline span{
    white-space: normal;       /* ✅ wrap on mobile */
  }
}

/* Step 3: hide duplicated buttons inside the card, keep sticky ribbon buttons */
#step3Card .confirmActions{
  display: none !important;
}
/* Step 3: make the terms bar look tighter */
#step3Card .termsInlineWrap{
  margin-top: 12px;
  margin-bottom: 0;
}

/* ---------- Step 3 Review: nicer layout ---------- */
.rvWrap{ display:flex; flex-direction:column; gap:12px; }
.rvTitle{ font-weight:900; font-size:16px; }
.rvHint{ opacity:.85; font-size:13px; }

.rvSection{
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.52);
  border-radius: 14px;
  padding: 12px;
}

.rvSectionHead{
  font-weight:900;
  margin-bottom:10px;
  opacity:.92;
}

.rvRow3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.rvRow2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.rvRow1{ display:block; }

@media (max-width: 900px){
  .rvRow3{ grid-template-columns: 1fr; }
  .rvRow2{ grid-template-columns: 1fr; }
}

.rvItem{
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
}

.rvLabel{ font-size:12px; opacity:.70; font-weight:800; }
.rvValue{ font-size:14px; font-weight:900; margin-top:4px; }

/* subtle highlights */
.rvDate{ background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.18); }
.rvTime{ background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.18); }
.rvStaff{ background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.18); }
.rvService{ background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.18); }

.rvPolicy{ opacity:.9; font-size:13px; line-height:1.4; }
.rvEmailNote{ margin-top:10px; font-size:12px; opacity:.85; font-weight:800; }


/* ===== Clean neutral background (remove image) ===== */
html, body{
  background: #F6F7FB !important;  /* soft neutral */
  background-image: none !important;
}

/* If your theme uses a ::before overlay for the image, kill it */
body::before, .bg::before, .pageBg::before{
  background-image: none !important;
  content: none !important;
}

/* Make cards look crisp on flat background */
.card, .reviewBox, .svcPanel, .timeCol, .staffCol{
  background: #ffffffcc !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(10px);
}

/* ===== Login modal ===== */
.modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(17,24,39,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.modalCard{
  width: min(520px, 92vw);
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.25);
  overflow: hidden;
}

.modalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.modalTitle{ font-weight: 900; font-size: 18px; }
.modalSub{ font-size: 13px; opacity: .75; margin-top: 4px; }

.modalClose{
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-weight: 900;
}

.modalBody{ padding: 14px 16px 16px; }

.modalDivider{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 12px 0;
  opacity: .7;
}
.modalDivider:before, .modalDivider:after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(0,0,0,0.10);
}
.modalDivider span{ font-size: 12px; font-weight: 800; }

.modalRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.modalRow input{
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px 12px;
}
@media (max-width: 520px){
  .modalRow{ flex-direction: column; align-items: stretch; }
}


/* ==========================
   Premium Login Modal (Pro)
   ========================== */

.modalOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

/* Wide, premium card */
.modalCardPro{
  width: min(980px, 96vw);
  min-height: 520px;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 22px 70px rgba(0,0,0,0.35);
}

/* Left brand panel */
.modalBrand{
  padding: 22px;
  color: #0f172a;
  background:
    radial-gradient(1200px 500px at 10% 10%, rgba(236,72,153,0.10), transparent 60%),
    radial-gradient(900px 500px at 80% 40%, rgba(59,130,246,0.12), transparent 55%),
    linear-gradient(180deg, rgba(248,250,252,1), rgba(243,246,251,1));
  border-right: 1px solid rgba(0,0,0,0.06);
}

.modalBrandTop{
  display: flex;
  gap: 14px;
  align-items: center;
}

.modalLogo{
  width: 88px;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.06);
}

.modalBrandText{ min-width: 0; }
.modalBrandName{
  font-weight: 1000;
  font-size: 18px;
  line-height: 1.2;
}
.modalBrandTag{
  margin-top: 4px;
  font-size: 13px;
  opacity: 0.78;
  font-weight: 700;
}

.modalBrandInfo{
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.modalInfoRow{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.05);
}

.modalInfoDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(16,185,129,1);
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.16);
  flex: 0 0 auto;
}

.modalInfoTitle{
  font-weight: 950;
  font-size: 14px;
}
.modalInfoSub{
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.35;
}

.modalTrust{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.78;
}
.modalTrust a{
  font-weight: 900;
  text-decoration: underline;
}

/* Right actions panel */
.modalActions{
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #ffffff;
}

.modalClosePro{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  font-weight: 1000;
}
.modalClosePro:hover{
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.modalActionsHead{
  padding-right: 56px;
}
.modalTitlePro{
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: -0.2px;
}
.modalSubPro{
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.78;
  line-height: 1.4;
}

/* Google button */
.btnGooglePro{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid rgba(37,99,235,0.22);
  background: rgba(37,99,235,0.08);
  font-weight: 950;
}
.btnGooglePro:hover{
  background: rgba(37,99,235,0.12);
  transform: translateY(-1px);
}

.googleImg{
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.10));
}
.googleBtnText{
  font-size: 16px;
  font-weight: 1000;
  color: #0f172a;
}

/* Divider */
.modalDividerPro{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  opacity: 0.75;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.modalDividerPro::before,
.modalDividerPro::after{
  content:"";
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.10);
}
.modalDividerPro span{
  white-space: nowrap;
}

/* Email row */
.emailRowPro{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.emailInputPro{
  height: 46px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  outline: none;
}
.emailInputPro:focus{
  border-color: rgba(37,99,235,0.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.btnEmailPro{
  height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 950;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
}
.btnEmailPro:hover{
  background: rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.modalHintPro{
  font-size: 12px;
  opacity: 0.78;
  font-weight: 800;
}

/* Status message */
.modalMsgPro{
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.18);
  font-size: 12px;
  font-weight: 900;
  color: rgba(120,53,15,1);
  min-height: 18px;
}

/* Mobile */
@media (max-width: 900px){
  .modalCardPro{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .modalBrand{
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .emailRowPro{
    grid-template-columns: 1fr;
  }
  .btnEmailPro{ width: 100%; }
  .googleImg{ height: 30px; }
}
/* Step 3: list all selected services (chips) */
.svcChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 8px;
}

.svcChipPro{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.18);
  color: rgba(15,23,42,0.95);
}

.svcMetaLine{
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.85;
  font-weight: 800;
}

/* ===============================
   Thank You / Booking Modal
================================ */
.thankModal[hidden]{ display:none !important; }
.thankModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.thankBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
}

.thankCard{
  position: relative;
  max-width: 720px;
  margin: 10vh auto;
  background: #fff;
  color: #111;
  border-radius: 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  padding: 22px 22px 18px;
}

@media (max-width: 760px){
  .thankCard{ margin: 8vh 14px; padding: 18px 16px 14px; }
}

.thankClose{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  font-size: 22px;
  cursor: pointer;
}
.thankClose:hover{ background: rgba(0,0,0,.10); }

.thankHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.thankLogo{
  height: 56px;
  width: auto;
  object-fit: contain;
}
.thankNamaste{
  height: 64px;
  width: auto;
  object-fit: contain;
}

.thankTitle{
  margin: 8px 0 6px;
  font-size: 34px;
  letter-spacing: .2px;
}
.thankLead{
  margin: 0 0 14px;
  font-size: 16px;
  color: #222;
}

.thankInfo{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.02);
  margin-bottom: 14px;
}
.thankRow{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.thankRow:last-child{ border-bottom: none; }
.thankLabel{ color:#555; font-size: 13px; }
.thankValue{ color:#111; font-size: 14px; text-align:right; }

.thankNote{
  margin: 0 0 14px;
  color: #222;
  font-size: 15px;
}

.thankActions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}

.btnPrimary{
  border: none;
  background: #10b981;
  color: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btnPrimary:hover{ filter: brightness(0.97); }

.btnGhost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  color: #111;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  cursor:pointer;
}
.btnGhost:hover{ background: rgba(0,0,0,.10); }

.thankFooter{
  margin-top: 12px;
  font-size: 12px;
  color: #666;
}

/* Premium entrance animation */
.thankCard{
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  animation: thankIn 260ms ease-out forwards;
}
@keyframes thankIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Confetti */
.thankConfetti{
  pointer-events:none;
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius: 20px;
}
.confettiPiece{
  position:absolute;
  top:-12px;
  width:10px;
  height:14px;
  opacity:0.95;
  border-radius: 3px;
  animation: confettiFall 900ms ease-out forwards;
}
@keyframes confettiFall{
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(520px) rotate(340deg); opacity: 0; }
}

/* Make the info rows look nicer with long text */
.thankValue{
  max-width: 60%;
  overflow-wrap: anywhere;
}
@media (max-width: 760px){
  .thankValue{ max-width: 55%; }
}

/* Slight “success” emphasis */
.thankTitle{
  background: linear-gradient(90deg, #10b981, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===============================
   Standard Message Modal
================================ */
.msgModal[hidden]{ display:none !important; }
.msgModal{ position:fixed; inset:0; z-index:99999; }

.msgBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
}

.msgCard{
  position:relative;
  max-width: 620px;
  margin: 12vh auto;
  background:#fff;
  color:#111;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.25);
  padding: 18px 18px 16px;
  transform: translateY(14px);
  opacity: 0;
  animation: msgIn 220ms ease-out forwards;
}
@keyframes msgIn{ to{ transform: translateY(0); opacity: 1; } }
@media (max-width: 760px){
  .msgCard{ margin: 10vh 14px; }
}

.msgClose{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border:none; border-radius: 12px;
  background: rgba(0,0,0,.06);
  font-size: 22px;
  cursor:pointer;
}
.msgClose:hover{ background: rgba(0,0,0,.10); }

.msgHead{
  display:flex; align-items:center; gap:12px;
  margin-bottom: 12px;
}
.msgLogo{ height: 44px; width:auto; object-fit:contain; }

.msgTitle{
  font-size: 20px;
  font-weight: 900;
  margin: 0;
}
.msgSubtitle{
  font-size: 13px;
  color:#555;
  margin-top: 2px;
}

.msgBody{
  font-size: 15px;
  color:#222;
  line-height: 1.55;
  padding: 10px 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
}

.msgActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 14px;
}

/* tone helpers */
.msgCard.is-error .msgTitle{ color:#b91c1c; }
.msgCard.is-warn .msgTitle{ color:#b45309; }
.msgCard.is-info .msgTitle{ color:#111; }


/* =========================
   Mobile-safe responsiveness (Booking)
   - Layout only, no functional changes
   ========================= */

@media (max-width: 560px){
  /* Top actions row: allow full-width buttons */
  .topbar.topbarRight .actions{
    width: 100%;
    justify-content: flex-end;
  }

  /* Step 1 header: date box should never force horizontal scroll */
  .apptDateBox{ min-width: 0; width: 100%; }
  .apptDateBox input[type="date"]{ min-width: 0; width: 100%; }

  /* Services search: keep within viewport */
  .svcSearch{ width: 100%; min-width: 0; }

  /* Staff cards: reduce avatar size on very small phones */
  .empAvatar{ width: 64px; height: 64px; }
  .empName{ font-size: 16px; }
}

@media (max-width: 420px){
  .slotgrid{ grid-template-columns: 1fr; }
}

/* If a long service name exists, allow wrapping on small screens (no cut-offs) */
@media (max-width: 560px){
  .pill .svcName{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
}

@media (max-width: 760px){

  /* 1) Force the main layout to never exceed the viewport width */
  html, body { overflow-x: hidden; }
  .container { max-width: 100%; }
  .grid2 { grid-template-columns: 1fr !important; } /* ensure no phantom right column */

  /* 2) Fix logo sitting under the sticky progress bar
        Your <a class="siteLogoLink"> is outside .container.
        Make it a normal block on mobile (not fixed/absolute). */
  .siteLogoLink{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    display: block !important;
    width: min(220px, 70vw) !important;
    height: 52px !important;
    margin: 10px auto 8px !important;

    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
  }

  /* Progress bar stays sticky but should not overlap content */
  .ab-progress{
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    margin-top: 0 !important;
  }

  /* 3) Step 1 services: stop “bleeding” / over-wide cards */
  #serviceList,
  .svcPanel,
  .svcGroup,
  .svcGroupBody{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Make the search row not force horizontal overflow */
  .svcPanelTop{ gap: 10px; }
  .svcTools{ width: 100%; }
  .svcSearch{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Slightly tighter service cards on phones */
  .pill{
    padding: 10px 10px !important;
    border-radius: 14px !important;
  }

  /* IMPORTANT: allow wrapping (your CSS currently uses nowrap in places) */
  .pill .svcName{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  .pill .svcMeta{
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 8px !important;
  }

  /* If any parent has negative margins/padding causing width bleed */
  .card, .cardbody, .svcPanel, .welcomeNote{
    max-width: 100% !important;
  }
}

/* =========================================================
   MOBILE FIXES:
   1) Prevent sticky footer overlap (Terms checkbox visible)
   2) Make Login modal fit (scrollable, not too tall)
   Paste at VERY BOTTOM of booking.css
   ========================================================= */

/* -------- 1) Sticky footer overlap fix -------- */
:root{
  /* Adjust once if your sticky bar gets taller */
  --sticky-cta-h: 140px;
}

/* Always reserve space so bottom content isn't hidden */
.container{
  padding-bottom: calc(var(--sticky-cta-h) + 24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Extra safety on Step 3 (where the checkbox sits) */
#step3Card{
  padding-bottom: calc(var(--sticky-cta-h) + 30px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Make sure the terms wrapper can’t end up behind the bar */
#step3Card .termsInlineWrap,
#step3Card .termsRowInline,
#step3Card .confirmActions,
#step3Card .rvWrap{
  margin-bottom: 14px;
}

/* On small phones the sticky bar can wrap -> reserve more */
@media (max-width: 420px){
  :root{ --sticky-cta-h: 175px; }
}

/* -------- 2) Login modal fits nicely on mobile -------- */
@media (max-width: 900px), (max-height: 760px){

  /* Overlay: allow the page to scroll the modal if needed */
  .modalOverlay{
    align-items: flex-start !important;    /* instead of center */
    padding: 12px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Card: never exceed viewport height */
  .modalCardPro{
    width: min(520px, 96vw) !important;    /* prevent super-wide on phone */
    grid-template-columns: 1fr !important; /* stack brand + actions */
    min-height: auto !important;
    max-height: calc(100vh - 24px) !important;
    overflow: hidden !important;           /* internal panel scroll handles content */
  }

  /* Brand panel becomes compact (so actions are visible) */
  .modalBrand{
    padding: 14px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }
  .modalBrandInfo{ gap: 10px !important; }
  .modalInfoRow{ padding: 10px !important; }

  /* Right panel scrolls */
  .modalActions{
    padding: 14px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 140px) !important; /* keeps close button + header visible */
  }

  /* Tighten typography a bit */
  .modalTitlePro{ font-size: 18px !important; }
  .modalSubPro{ font-size: 12px !important; }

  /* Make buttons/inputs comfortable but not huge */
  .btnGooglePro{ padding: 12px 12px !important; border-radius: 14px !important; }
  .googleImg{ height: 28px !important; }
  .emailInputPro,
  .btnEmailPro{ height: 44px !important; border-radius: 12px !important; }

  /* Close button always accessible */
  .modalClosePro{
    position: sticky !important;
    top: 10px !important;
    margin-left: auto;
    z-index: 2;
  }
}

/* Ultra short screens (landscape / small devices): make modal even more scroll-friendly */
@media (max-height: 620px){
  .modalCardPro{
    max-height: calc(100vh - 16px) !important;
  }
  .modalActions{
    max-height: none !important;
  }
}


.dateNotice{
  display:block;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 950;
  font-size: 14px;
  line-height: 1.45;

  border: 2px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: rgba(127, 29, 29, 1);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.dateNotice::before{
  content: "⛔ ";
}

@media (max-width: 560px){
  .dateNotice{
    padding: 12px 12px;
    border-radius: 14px;
    font-size: 13px;
  }
}