/* Demo booking calendar on /schedule-demo. Uses the site's DM Sans and the VETport red. */
#vp-booking { font-family: 'DM Sans', system-ui, sans-serif; color: #1a191e; }
#vp-booking *, #vp-booking *::before, #vp-booking *::after { box-sizing: border-box; }
.vpb-loading, .vpb-empty { padding: 40px 20px; text-align: center; color: #5a6072; font-size: 16px; }
.vpb-grid { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.vpb-cal { flex: 1 1 320px; min-width: 300px; }
.vpb-times { flex: 0 1 260px; min-width: 220px; }
.vpb-monthbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; }
.vpb-nav { border: 1px solid #e3e6ee; background: #fff; border-radius: 8px; width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; color: #1a191e; }
.vpb-nav:disabled { opacity: .35; cursor: default; }
.vpb-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; letter-spacing: .04em; color: #8a90a2; margin-bottom: 6px; }
.vpb-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vpb-cell { aspect-ratio: 1 / 1; }
.vpb-day { width: 100%; height: 100%; border: 0; border-radius: 50%; background: transparent; color: #b9bdc9; font: inherit; font-size: 15px; cursor: default; }
.vpb-day.has { background: #fdeced; color: #EB464B; font-weight: 600; cursor: pointer; }
.vpb-day.has:hover { background: #fadadc; }
.vpb-day.sel { background: #EB464B; color: #fff; }
.vpb-times-head { font-weight: 600; margin-bottom: 10px; font-size: 15px; }
.vpb-times-list { max-height: 330px; overflow-y: auto; display: grid; gap: 8px; padding-right: 4px; }
.vpb-time { border: 1px solid #EB464B; background: #fff; color: #EB464B; border-radius: 8px; padding: 11px 8px; font: inherit; font-weight: 600; cursor: pointer; }
.vpb-time:hover { background: #fdeced; }
.vpb-time.sel { background: #EB464B; color: #fff; }
.vpb-tz, .vpb-none { font-size: 13px; color: #8a90a2; margin-top: 12px; }
.vpb-form { margin-top: 30px; border-top: 1px solid #eceef4; padding-top: 24px; }
.vpb-chosen { background: #fbf6f6; border-left: 4px solid #EB464B; padding: 12px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 15px; }
.vpb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.vpb-fields label { display: block; font-size: 14px; }
.vpb-fields label.vpb-full { grid-column: 1 / -1; }
.vpb-fields span { display: block; margin-bottom: 6px; color: #3d4152; }
.vpb-fields b { color: #EB464B; }
.vpb-fields em { color: #8a90a2; font-style: normal; }
.vpb-fields input, .vpb-fields select, .vpb-fields textarea { width: 100%; border: 1px solid #dfe3ec; border-radius: 8px; padding: 11px 12px; font: inherit; font-size: 15px; background: #fff; color: #1a191e; }
.vpb-fields input:focus, .vpb-fields select:focus, .vpb-fields textarea:focus { outline: 2px solid #EB464B; outline-offset: 1px; border-color: #EB464B; }
.vpb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vpb-captcha { margin: 18px 0 6px; }
.vpb-error { background: #fdeced; color: #b3181d; border-radius: 8px; padding: 11px 14px; font-size: 14px; margin-bottom: 12px; }
.vpb-submit { background: #EB464B; color: #fff; border: 0; border-radius: 8px; padding: 14px 30px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.vpb-submit:hover { background: #d43a3f; }
.vpb-submit:disabled { opacity: .6; cursor: default; }
.vpb-done { text-align: center; padding: 30px 16px; }
.vpb-tick { width: 58px; height: 58px; border-radius: 50%; background: #e6f4ea; color: #1e7e34; font-size: 30px; line-height: 58px; margin: 0 auto 16px; }
.vpb-done h3 { margin: 0 0 8px; font-size: 22px; }
.vpb-when { font-weight: 600; font-size: 17px; margin: 0 0 10px; }
.vpb-cal-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.vpb-cal-links a { color: #EB464B; font-weight: 600; font-size: 14px; }
@media (max-width: 767px) {
  .vpb-grid { gap: 20px; }
  .vpb-times { flex: 1 1 100%; }
  .vpb-times-list { grid-template-columns: repeat(2, 1fr); max-height: none; }
  .vpb-fields { grid-template-columns: 1fr; }
}

/* Phone: the code and the number are one control with one border, because a text input's
   content box is taller than a span's and two separate boxes will not agree on a height.
   The select is laid over the code, transparent: a native select is as wide as its longest
   option, and "United Arab Emirates (+971)" does not fit beside a number box on a phone. It
   keeps its own focus, its label and the full-screen picker phones already give it. */
.vpb-phone {
  display: flex; align-items: stretch;
  border: 1px solid #dfe3ec; border-radius: 8px; background: #fff; overflow: hidden;
}
.vpb-phone:focus-within { outline: 2px solid #EB464B; outline-offset: 1px; border-color: #EB464B; }
.vpb-dial {
  position: relative; flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 24px 0 12px; border-right: 1px solid #dfe3ec;
  font-size: 15px; color: #1a191e; white-space: nowrap; background: #fbfbfd;
}
.vpb-dial b { font-weight: 400; color: #1a191e; }
/* the caret, drawn rather than relying on the select's own */
.vpb-dial::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px;
  margin-top: -5px; border-right: 2px solid #8a90a2; border-bottom: 2px solid #8a90a2;
  transform: rotate(45deg); pointer-events: none;
}
.vpb-fields .vpb-dial select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}
.vpb-fields .vpb-phone input {
  flex: 1 1 auto; min-width: 0;
  border: 0; border-radius: 0; background: transparent;
}
.vpb-fields .vpb-phone input:focus { outline: none; }

/* The Zoho SalesIQ bubble is fixed to the bottom right with the highest z-index there is.
   On a wide screen the booking widget sits in the left column and nothing collides. Below
   that the widget goes full width, and the bubble then sits over real controls: measured on
   the live page, 15 of them at 768px and 22 at 375px, including the next-month arrow, the
   Sunday column and the right column of times. There is no corner it can move to, because
   the form spans the width; bottom left would cover the Confirm button and the Monday
   column instead. So it stands down on this page only, at the widths where it would be in
   the way. Delete this block to bring it back. */
@media (max-width: 991px) {
  .zsiq_floatmain { display: none !important; }
}