:root{
  --vv-staff-navy:#103f73;
  --vv-staff-blue:#0a9dce;
  --vv-staff-text:#15233a;
  --vv-staff-line:#c9d6e4;
}

/* V38: patient-style first booking step, scoped to admin/registrar only. */
body.viaviva-staff-booking-modern #patientView #bookingCard{
  min-height:min(620px,calc(100dvh - 150px));
  padding:clamp(20px,4vw,34px)!important;
  border-radius:20px;
  background:#fff;
}
body.viaviva-staff-booking-modern #bookingCard>h2{margin-bottom:8px!important}
body.viaviva-staff-booking-modern #wizardChoice h3{
  margin:0 0 20px;
  color:var(--vv-staff-navy);
  font-size:clamp(22px,3vw,30px);
  line-height:1.2;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
}
body.viaviva-staff-booking-modern #wizardChoice .field{position:relative;min-width:0}
body.viaviva-staff-booking-modern #wizardChoice .field>label{
  display:block;
  margin:0 0 7px!important;
  color:#35445b;
  font-size:15px;
  font-weight:700;
}
body.viaviva-staff-booking-modern #wizardChoice .vv-staff-combobox{
  display:block!important;
  position:relative;
  margin-bottom:8px!important;
}
body.viaviva-staff-booking-modern #wizardChoice .vv-staff-combobox input{
  box-sizing:border-box;
  width:100%!important;
  min-width:0;
  min-height:52px!important;
  padding:12px 58px 12px 52px!important;
  border:1.5px solid var(--vv-staff-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--vv-staff-text)!important;
  box-shadow:0 1px 2px rgba(16,47,91,.03)!important;
  font:inherit;
}
body.viaviva-staff-booking-modern #wizardChoice .vv-staff-combobox input:focus{
  outline:3px solid rgba(10,157,206,.16)!important;
  border-color:var(--vv-staff-blue)!important;
}
.vv-staff-combobox-leading{
  position:absolute;
  z-index:2;
  left:16px;
  top:50%;
  width:23px;
  height:23px;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--vv-staff-blue);
}
.vv-staff-combobox-leading svg{
  display:block;
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.viaviva-staff-booking-modern #wizardChoice .vv-staff-combobox .search-icon-btn{
  position:absolute!important;
  z-index:3;
  right:3px;
  top:3px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:10px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:var(--vv-staff-blue)!important;
  box-shadow:none!important;
}
body.viaviva-staff-booking-modern #wizardChoice .vv-staff-combobox .search-icon-btn svg{
  display:block!important;
  width:24px!important;
  height:24px!important;
  margin:auto!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.vv-staff-native-select-hidden{
  display:none!important;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-suggestions{
  position:absolute!important;
  z-index:40;
  left:0;
  right:0;
  margin:2px 0 0!important;
  max-height:min(42dvh,320px)!important;
  overflow:auto;
  border:1px solid var(--vv-staff-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(16,47,91,.2)!important;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-suggestions button{
  display:block;
  width:100%;
  min-height:48px!important;
  padding:11px 14px!important;
  border:0!important;
  border-bottom:1px solid #edf0f3!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--vv-staff-text)!important;
  text-align:left;
  font-weight:600!important;
  line-height:1.3!important;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-suggestions button:hover,
body.viaviva-staff-booking-modern #wizardChoice .wizard-suggestions button:focus-visible{
  background:#eaf7fc!important;
}
.vv-staff-info-action{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  width:max-content!important;
  min-height:38px!important;
  margin:4px 0 0!important;
  padding:7px 10px!important;
  border:0!important;
  background:transparent!important;
  color:var(--vv-staff-blue)!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:750!important;
}
.vv-staff-info-action svg{
  display:block;
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vv-staff-info-action[hidden]{display:none!important}
.vv-staff-empty-context-host:empty{display:none!important}
body.viaviva-staff-booking-modern #wizardChoice .wizard-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
  gap:12px!important;
  margin-top:24px!important;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-actions button{
  width:100%!important;
  min-height:54px!important;
  border-radius:14px!important;
  font-weight:700;
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-actions .primary{
  border-color:var(--vv-staff-navy)!important;
  background:var(--vv-staff-navy)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(16,47,91,.16);
}
body.viaviva-staff-booking-modern #wizardChoice .wizard-actions button:disabled{
  opacity:.48!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  body.viaviva-staff-booking-modern #patientView #bookingCard{
    min-height:0;
    padding:20px 16px!important;
    border-radius:18px;
  }
  body.viaviva-staff-booking-modern #wizardChoice .wizard-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  body.viaviva-staff-booking-modern #wizardChoice .wizard-actions{
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)!important;
  }
}

@media(max-width:390px){
  body.viaviva-staff-booking-modern #wizardChoice .wizard-actions{
    grid-template-columns:1fr!important;
  }
}