/**
 * Booking flow + Add Pet modal — extracted from Customer Portal public/css/homescreen.css.
 * --evs-* fallbacks keep layout usable if the main theme bundle does not define them.
 */
:root {
  --evs-font: "Arboria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --evs-neutral-white: #ffffff;
  --evs-gray-2: #333333;
  --evs-gray-4: #6b6b6b;
  --evs-gray-8: #cccccc;
  --evs-gray-9: #f3f4f6;
  --evs-base-brand-purple: #4b1e4c;
  --evs-base-brand-lavender: #a187c4;
  --evs-base-brand-red: #fc595b;
}

/* ─── Add Pet Modal ─── */
.evs-home-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.evs-add-pet-modal-overlay {
  z-index: 130;
}

.evs-home-modal {
  background: var(--evs-neutral-white);
  color: var(--evs-gray-2);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  padding: 32px;
  position: relative;
  font-family: var(--evs-font);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.evs-home-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--evs-gray-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s;
}

.evs-home-modal__close:hover {
  background: var(--evs-gray-9);
}

.evs-home-modal__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--evs-gray-2);
}

.evs-home-modal__field {
  margin-bottom: 20px;
}

.evs-home-modal__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--evs-base-brand-purple);
  margin-bottom: 4px;
}

.evs-home-modal__input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--evs-base-brand-purple);
  border-radius: 8px;
  font-family: var(--evs-font);
  font-size: 16px;
  color: var(--evs-gray-2);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.evs-home-modal__input:focus {
  border-color: var(--evs-base-brand-lavender);
}

.evs-home-modal__radio-group {
  margin-bottom: 24px;
}

.evs-home-modal__radio-question {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--evs-gray-2);
}

.evs-home-modal__radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 15px;
}

.evs-home-modal__radio-option input[type="radio"] {
  accent-color: var(--evs-base-brand-purple);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.evs-home-modal__divider {
  border: none;
  border-top: 1px solid var(--evs-gray-9);
  margin: 24px 0 20px;
}

.evs-home-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.evs-home-modal__cancel {
  background: none;
  border: none;
  color: var(--evs-base-brand-red);
  font-family: var(--evs-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
}

.evs-home-modal__cancel:hover {
  text-decoration: underline;
}

.evs-home-modal__save {
  background: var(--evs-base-brand-lavender);
  color: var(--evs-neutral-white);
  border: none;
  border-radius: 24px;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 32px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.evs-home-modal__save:hover:not(:disabled) {
  opacity: 0.88;
}

.evs-home-modal__save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Booking flow modal ─── */
.evs-booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Booking flow modal shell — Figma exam step frame: 640×, padding 40 48 48, column gap 24 */
.evs-booking-modal {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  --Base-Brand-Purple: var(--evs-base-brand-purple, #4b1e4c);
  --Base-Brand-Lavender: var(--evs-base-brand-lavender, #a187c4);
  --Color-Neutral-Gray-8: var(--evs-gray-8, #cccccc);
  width: 100%;
  max-width: 640px;
  /* Fit overlay (padding 24px × 2); avoid arbitrary 720px cap — it forced a scrollbar when
     content (e.g. typesError + pet step) was only slightly taller than 720px. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 40px 48px 48px 48px;
  border-radius: 40px;
  font-family: var(--evs-font);
  color: #4b1e4c;
  /* Brand Secondary / Secondary 40: 80% white over lavender; wave sits under the frost */
  background-color: var(--Base-Brand-Lavender, #a187c4);
  background-image:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.8) 100%
    ),
    url("../svg/wavy-line-purple.svg");
  background-repeat: no-repeat, no-repeat;
  /* Wave asset (Figma EVS modal — e.g. 182:1577) is 640-wide viewBox but the stroke
     does not span edge-to-edge; scale past 100% so the curve reads full-bleed; clipped
     by overflow-x + border-radius. */
  background-position: center center, center center;
  background-size:
    100% 100%,
    min(118%, 756px) auto;
  box-shadow:
    0 4px 6px 0 rgba(0, 0, 0, 0.24),
    0 6px 10px 0 rgba(0, 0, 0, 0.15);
}

.evs-booking-modal__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

/* Clear floating chrome: icon row ends at 20+48px; body starts after modal padding-top 40px → +28px */
.evs-booking-modal__body--floating-chrome {
  padding-top: 28px;
}

/* Figma 49:4489 — existing customer login sits tighter under back/close */
.evs-booking-modal__body--floating-chrome.evs-booking-modal__body--member-login-chrome {
  padding-top: 12px;
}

/* Single-step column (e.g. pet picker): matches Figma gap between header / content / footer */
.evs-booking-modal__step {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.evs-booking-modal__step .evs-booking-pet-grid {
  margin-top: 0;
}

/* modal-back-arrow & modal-close at 32×32 */
.evs-booking-back img,
.evs-booking-close img,
.evs-home-modal__close img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Figma EVS modal chrome: icons absolute to shell at top/left/right 20px (32px asset + 8px pad) */
.evs-booking-modal .evs-booking-back {
  top: 20px;
  left: 20px;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 9999px;
}

.evs-booking-modal .evs-booking-close {
  top: 20px;
  right: 20px;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 8px;
  border-radius: 9999px;
}

.evs-booking-modal .evs-booking-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.evs-booking-modal .evs-booking-error {
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
}

.evs-booking-modal .evs-booking-back:hover {
  background: rgba(255, 255, 255, 0.22);
}

.evs-booking-back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #4b1e4c;
  border-radius: 8px;
}

.evs-booking-back:hover {
  background: var(--evs-gray-9, #f3f4f6);
}

.evs-booking-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  border-radius: 8px;
}

.evs-booking-close:hover {
  background: var(--evs-gray-9, #f3f4f6);
}

.evs-booking-modal .evs-booking-title {
  margin: 0;
  padding: 16px 24px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  overflow-wrap: anywhere;
}

.evs-booking-title--pet {
  padding-bottom: 0;
}

/* Schedule step — Figma node 29:3681 (Heading 5 + hospital name) */
.evs-booking-title--schedule {
  padding-bottom: 8px;
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 0.02em;
}

/* Figma 29:3655 — wellness “What’s going on?” (Reason for visit) before pet */
.evs-booking-modal .evs-booking-title--wellness-reason {
  padding: 16px 24px 8px;
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-wellness-reason__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 544px;
  margin: 0 auto;
  box-sizing: border-box;
  min-height: 160px;
  padding: 0 24px;
}

.evs-booking-wellness-reason .evs-booking-select-custom__trigger {
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--Base-Brand-Lavender, #a187c4);
  border-radius: 4px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%),
    var(--Base-Brand-Lavender, #a187c4);
}

.evs-booking-wellness-reason .evs-booking-select-custom__value--placeholder {
  color: #6f4b70;
}

.evs-booking-wellness-reason .evs-booking-select-custom__chevron {
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-emergency-hint--wellness-reason {
  margin: 0;
  padding: 0;
}

.evs-booking-modal .evs-booking-actions--wellness-reason {
  margin-top: 24px;
  padding: 16px 24px 0;
  border-top: 1px solid #ccc;
  justify-content: center;
}

/* Figma 29:3703 — guest contact before pet picker */
.evs-booking-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.evs-booking-modal .evs-booking-title--guest-contact {
  padding: 16px 24px 8px;
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-guest-contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 544px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 24px 0;
}

.evs-booking-guest-contact__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 520px) {
  .evs-booking-guest-contact__row--split {
    grid-template-columns: 1fr;
  }
}

.evs-booking-guest-contact__field {
  min-width: 0;
}

.evs-booking-guest-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 16px;
  border: 1px solid var(--Base-Brand-Lavender, #a187c4);
  border-radius: 4px;
  background: #fff;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-guest-input::placeholder {
  color: #6f4b70;
}

.evs-booking-guest-input:focus {
  outline: 2px solid rgba(75, 30, 76, 0.25);
  outline-offset: 1px;
}

.evs-booking-modal .evs-booking-actions--guest-contact-continue {
  margin-top: 24px;
  padding: 0 24px;
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

.evs-booking-modal .evs-booking-primary--guest-contact-continue {
  width: 100%;
  max-width: 100%;
}

.evs-booking-modal .evs-booking-actions--guest-contact-login {
  margin-top: 0;
  padding: 16px 24px 0;
  border-top: 1px solid var(--Color-Neutral-Gray-8, #cccccc);
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

.evs-booking-guest-login-vetspire {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 100px;
  border: 1px solid var(--Base-Brand-Red, #fc595b);
  background: #fff;
  color: #973536;
  font-family: var(--evs-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.54px;
  cursor: pointer;
}

.evs-booking-guest-login-vetspire:hover {
  background: rgba(252, 89, 91, 0.06);
}

/* Figma 49:4489 — existing customer login */
.evs-booking-modal .evs-booking-title--member-login {
  padding: 4px 24px 0;
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-modal__step--member-login {
  gap: 16px;
}

.evs-booking-member-login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 544px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.evs-booking-member-login__field {
  width: 100%;
}

.evs-booking-member-login__shell {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 6px 16px;
  border: 1px solid var(--Base-Brand-Purple, #4b1e4c);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.evs-booking-member-login__shell--password {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 16px;
}

.evs-booking-member-login__password-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 0;
}

.evs-booking-member-login__caption {
  font-family: var(--evs-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #6f4b70;
}

.evs-booking-member-login__control {
  box-sizing: border-box;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  background: transparent;
}

.evs-booking-member-login__control:focus {
  outline: none;
}

.evs-booking-member-login__shell:focus-within {
  outline: 2px solid rgba(75, 30, 76, 0.25);
  outline-offset: 1px;
}

.evs-booking-member-login__toggle-pw {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #333;
  cursor: pointer;
  align-self: center;
}

.evs-booking-member-login__toggle-pw:hover {
  background: rgba(75, 30, 76, 0.06);
}

.evs-booking-modal .evs-booking-actions--member-login-footer {
  margin-top: 0;
  padding: 12px 24px 0;
  border-top: 1px solid var(--Color-Neutral-Gray-8, #cccccc);
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Figma 29:3719 — add pet when no pets returned from lookup / account */
.evs-booking-modal .evs-booking-title--add-inline-pet {
  padding: 16px 24px 8px;
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-add-inline-pet__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 544px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 24px 0;
  min-height: 120px;
}

.evs-booking-add-inline-pet__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.evs-booking-add-inline-pet__caption {
  font-family: var(--evs-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #6f4b70;
}

.evs-booking-add-inline-pet__field-shell {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 6px 16px 10px;
  border: 1px solid var(--Base-Brand-Purple, #4b1e4c);
  border-radius: 4px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.evs-booking-add-inline-pet__input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  margin: 0;
  padding: 0;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  background: transparent;
}

.evs-booking-add-inline-pet__input:focus {
  outline: none;
}

.evs-booking-add-inline-pet__field-shell:focus-within {
  outline: 2px solid rgba(75, 30, 76, 0.22);
  outline-offset: 1px;
}

.evs-booking-add-inline-pet__species {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.evs-booking-add-inline-pet__question {
  margin: 0;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-add-inline-pet__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.evs-booking-add-inline-pet__radio-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 6px 8px 6px 2px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  cursor: pointer;
  text-align: left;
}

.evs-booking-add-inline-pet__radio-row:hover {
  background: rgba(75, 30, 76, 0.04);
}

/* Figma 29:3717–3718 — thin purple ring; selected = inner dot + soft lavender halo */
.evs-booking-add-inline-pet__radio-indicator {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--Base-Brand-Purple, #4b1e4c);
  background: #fff;
  position: relative;
}

.evs-booking-add-inline-pet__radio-row--selected .evs-booking-add-inline-pet__radio-indicator {
  box-shadow: 0 0 0 3px rgba(161, 135, 196, 0.45);
}

.evs-booking-add-inline-pet__radio-row--selected .evs-booking-add-inline-pet__radio-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-add-inline-pet__radio-label {
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-add-inline-pet__radio-row--selected .evs-booking-add-inline-pet__radio-label {
  font-weight: 500;
}

.evs-booking-modal .evs-booking-actions--add-inline-pet-save {
  margin-top: 24px;
  padding: 16px 24px 0;
  border-top: 1px solid var(--Color-Neutral-Gray-8, #cccccc);
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

.evs-booking-add-inline-pet__save {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
}

.evs-booking-modal .evs-booking-title--center {
  padding-left: 24px;
  padding-right: 24px;
}

.evs-booking-modal .evs-booking-sub {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.92;
}

.evs-booking-modal .evs-booking-sub--center {
  text-align: center;
}

.evs-booking-error {
  color: #b91c1c;
  margin-bottom: 16px;
}

.evs-booking-title--exam {
  padding-bottom: 0;
}

.evs-booking-exam-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Stretch both exam cards to the same row height (taller copy sets the row). */
  align-items: stretch;
  margin-top: 0;
  width: 100%;
  min-height: 160px;
  box-sizing: border-box;
}

/* Exam type cards — Figma 1772:6498; badge sits inside card (absolute) so WebKit doesn’t drop flex children in <button> */
.evs-booking-exam {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
}

.evs-booking-exam:focus-visible {
  outline: 2px solid var(--Base-Brand-Purple, #4b1e4c);
  outline-offset: 4px;
  border-radius: 28px;
}

.evs-booking-exam__badge {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.evs-booking-exam__badge-ring {
  flex-shrink: 0;
  padding: 6px;
  border-radius: 1000px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}

.evs-booking-exam__badge-ring--illness {
  border: 1px solid rgba(51, 130, 188, 0.45);
}

.evs-booking-exam__badge-ring--wellness {
  border: 1px solid rgba(186, 203, 192, 0.85);
}

.evs-booking-exam__badge-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 100px;
}

/* Figma: 90% white over brand blue / green — keep enough tint that the disk reads vs the frosted card */
.evs-booking-exam__badge-inner--illness {
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    #3382bc;
}

.evs-booking-exam__badge-inner--wellness {
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    #bacbc0;
}

.evs-booking-exam__icon {
  display: block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

/* Span must be block-level — inline + background/padding draws “strip” fragments in some engines */
.evs-booking-exam__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  padding: 48px 32px 24px;
  border-radius: 24px;
  overflow: visible;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    var(--Base-Brand-Lavender, #a187c4);
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.08),
    inset 0 -16px 12px -16px rgba(0, 0, 0, 0.06),
    inset 0 4px 6px rgba(255, 255, 255, 0.2);
}

.evs-booking-exam:active .evs-booking-exam__card {
  opacity: 0.97;
}

.evs-booking-exam__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 7px 0;
  text-align: center;
}

.evs-booking-exam__title {
  display: block;
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-exam__desc {
  display: block;
  margin: 0;
  min-height: 34px;
  width: 100%;
  font-family: var(--evs-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  leading-trim: both;
  text-edge: cap;
}

.evs-booking-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--evs-base-brand-purple, #4b1e4c);
  margin-bottom: 6px;
}

/* Reason step: modal body uses flex gap between siblings; tuck the custom select under its label. */
.evs-booking-label + .evs-booking-select-custom {
  margin-top: -20px;
}

.evs-booking-select,
.evs-booking-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--evs-base-brand-purple, #4b1e4c);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
}

/* Custom reason dropdown — Figma Body/Body + Wellness list (white panel, #000 copy) */
.evs-booking-select-custom {
  --Spacers-16: 16px;
  --Spacer-16: 16px;
  --Spacer-4: 4px;
  position: relative;
  width: 100%;
}

.evs-booking-select-custom__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--evs-base-brand-purple, #4b1e4c);
  border-radius: 8px;
  background: #ffffff;
  font-family: var(--evs-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  leading-trim: both;
  text-edge: cap;
  cursor: pointer;
  text-align: left;
}

.evs-booking-select-custom__trigger:hover {
  background: rgba(255, 255, 255, 0.98);
}

.evs-booking-select-custom__trigger:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.evs-booking-select-custom__trigger--open {
  border-radius: 8px;
}

.evs-booking-select-custom__value {
  flex: 1;
  min-width: 0;
}

.evs-booking-select-custom__value--placeholder {
  flex: 1;
  min-width: 0;
  color: #000000;
  opacity: 0.45;
}

.evs-booking-select-custom__chevron {
  flex-shrink: 0;
  display: flex;
  color: #000000;
  transition: transform 0.15s ease;
}

.evs-booking-select-custom__trigger--open .evs-booking-select-custom__chevron {
  transform: rotate(180deg);
}

.evs-booking-select-custom__list {
  /* width is set in JS to match trigger — border-box keeps padding+border inside that width so R/L edges align with “Choose one…” */
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 24px 32px;
  list-style: none;
  max-height: min(360px, calc(100dvh - 48px));
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.1);
}

.evs-booking-select-custom__option {
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  align-self: stretch;
  gap: var(--Spacer-4, 4px);
  width: 100%;
  margin: 0;
  padding: var(--Spacers-16, 16px) var(--Spacer-16, 16px);
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--evs-font);
  text-align: left;
  cursor: pointer;
  color: #000000;
}

.evs-booking-select-custom__option-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--Spacer-4, 4px);
  flex: 1;
  min-width: 0;
}

.evs-booking-select-custom__option-title {
  display: block;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  leading-trim: both;
  text-edge: cap;
}

/* Subtitle — Figma caption under primary line */
.evs-booking-select-custom__option-sub {
  display: block;
  font-family: var(--evs-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
  leading-trim: both;
  text-edge: cap;
}

.evs-booking-select-custom__option:hover,
.evs-booking-select-custom__option--highlight {
  background: rgba(0, 0, 0, 0.04);
}

.evs-booking-select-custom__option:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 0;
  background: rgba(0, 0, 0, 0.06);
}

.evs-booking-emergency-hint {
  max-width: 544px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 8px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  text-align: center;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--evs-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

.evs-booking-field {
  margin-top: 16px;
}

.evs-booking-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.evs-booking-cal-nav-btn {
  border: none;
  background: #f3f4f6;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
}

.evs-booking-cal-nav-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.evs-booking-cal-label {
  font-weight: 600;
}

.evs-booking-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.evs-booking-cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.6;
}

.evs-booking-cal-cell {
  aspect-ratio: 1;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: #f9fafb;
  font-size: 14px;
  cursor: pointer;
}

.evs-booking-cal-cell--empty {
  background: transparent;
  cursor: default;
}

.evs-booking-cal-cell--avail:not(:disabled) {
  border-color: #c4d3c9;
  background: #fff;
  font-weight: 600;
}

.evs-booking-cal-cell--selected {
  border-color: var(--evs-base-brand-purple, #4b1e4c) !important;
  background: #f3e8ff !important;
}

.evs-booking-cal-cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.evs-booking-hint {
  font-size: 12px;
  opacity: 0.75;
  margin: 0 0 12px;
}

.evs-booking-muted {
  opacity: 0.7;
  font-size: 14px;
}

.evs-booking-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.evs-booking-time-btn {
  padding: 10px 16px;
  border-radius: 20px;
  border: 2px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.evs-booking-time-btn--selected {
  border-color: var(--evs-base-brand-purple, #4b1e4c);
  background: #faf5ff;
}

/* Booking — step 4 five-day schedule (Next Available) */
.evs-booking-schedule-card {
  width: 100%;
  max-width: 544px;
  margin: 0 auto 20px;
  box-sizing: border-box;
  padding: 24px 32px 32px;
  border-radius: 12px;
  overflow: visible;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%),
    var(--Base-Brand-Lavender, #a187c4);
  border: none;
}

.evs-booking-schedule-card--calendar-overlay {
  position: relative;
  overflow: visible;
  z-index: 1;
}

.evs-booking-schedule-cal-anchor {
  position: relative;
  flex-shrink: 0;
  z-index: 4;
}

.evs-booking-schedule-main {
  position: relative;
  min-height: 0;
}

.evs-booking-modal__schedule {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.evs-booking-schedule-main__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Reference: date line + slot grid read left-aligned inside the inner card */
  text-align: left;
}

.evs-booking-schedule-main--cal-open .evs-booking-schedule-main__content {
  user-select: none;
}

.evs-booking-schedule-main__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.evs-booking-date-picker {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--evs-base-brand-purple, #4b1e4c);
  border-radius: 8px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
}

.evs-booking-date-picker--popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  z-index: 5;
  width: min(360px, calc(100vw - 48px));
  max-width: none;
}

.evs-booking-date-picker__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.evs-booking-date-picker__month-wrap {
  flex: 1;
  min-width: 0;
}

.evs-booking-cal-month-select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 4px 28px 4px 0;
  border: none;
  background: transparent;
  font-family: var(--evs-font), "Arboria", Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.03em;
  color: var(--evs-base-brand-purple, #4b1e4c);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234b1e4c' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.evs-booking-date-picker__nav-arrows {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.evs-booking-date-picker__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 8px 12px;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  color: var(--evs-base-brand-purple, #4b1e4c);
}

.evs-booking-date-picker__icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.evs-booking-date-picker__chev-char {
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

.evs-booking-cal-dow-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.evs-booking-cal-dow--picker {
  text-align: center;
  font-family: var(--evs-font), "Arboria", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: var(--evs-base-brand-purple, #4b1e4c);
}

.evs-booking-cal-grid--picker {
  gap: 6px;
  margin-bottom: 0;
}

.evs-booking-cal-tile {
  box-sizing: border-box;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-family: var(--evs-font), "Arboria", Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--evs-base-brand-purple, #4b1e4c);
}

/* Pad cells share the grid—same min-size behavior as tiles so columns don’t overflow. */
.evs-booking-date-picker .evs-booking-cal-grid .evs-booking-cal-cell--empty {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.evs-booking-cal-tile--disabled {
  color: rgba(75, 30, 76, 0.35);
  cursor: not-allowed;
}

.evs-booking-cal-tile--available {
  background: rgba(252, 89, 91, 0.18);
  color: var(--evs-base-brand-purple, #4b1e4c);
  font-weight: 600;
}

.evs-booking-cal-tile--today:not(.evs-booking-cal-tile--disabled) {
  box-shadow: inset 0 0 0 2px var(--evs-base-brand-purple, #4b1e4c);
}

.evs-booking-cal-tile--selected:not(.evs-booking-cal-tile--disabled) {
  box-shadow: 0 0 0 2px var(--evs-base-brand-purple, #4b1e4c);
}

.evs-booking-schedule-card__top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evs-booking-schedule-card__top .evs-booking-schedule-card__header {
  margin-bottom: 0;
}

.evs-booking-schedule-card__top .evs-booking-schedule-days {
  margin-bottom: 0;
}

.evs-booking-schedule-main__content > .evs-booking-schedule-sub {
  margin: 28px 0 16px;
}

.evs-booking-schedule-main__content > .evs-booking-muted {
  margin-top: 16px;
}

.evs-booking-schedule-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.evs-booking-schedule-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  font-family: var(--evs-font);
}

.evs-booking-schedule-view-cal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-height: 33px;
  padding: 12px 18px;
  border-radius: 100px;
  border: 1px solid var(--Base-Brand-Red, #fc595b);
  background: none;
  color: #973536;
  font-family: var(--evs-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.42px;
  cursor: pointer;
}

.evs-booking-schedule-view-cal:hover {
  background: rgba(252, 89, 91, 0.06);
}

.evs-booking-schedule-view-cal__icon {
  flex-shrink: 0;
}

.evs-booking-schedule-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 16px;
}

.evs-booking-schedule-day {
  padding: 12px 14px;
  border-radius: 8px;
  border: none;
  outline: 1px solid rgba(75, 30, 76, 0.2);
  outline-offset: -1px;
  background: #fff;
  color: var(--Base-Brand-Purple, #4b1e4c);
  font-family: var(--evs-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.42px;
  cursor: pointer;
}

.evs-booking-schedule-day:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.evs-booking-schedule-day--selected {
  background: var(--Base-Brand-Purple, #4b1e4c);
  color: #fff;
  outline-color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-schedule-sub {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.48px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  font-family: var(--evs-font);
}

.evs-booking-schedule-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 114px));
  gap: 4px;
  align-items: stretch;
  justify-content: flex-start;
}

.evs-booking-schedule-slot-grid--scroll {
  max-height: min(40vh, 280px);
  overflow-y: auto;
  padding-right: 4px;
}

.evs-booking-schedule-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  border: none;
  outline: 1px solid var(--Base-Brand-Periwinkle, #d7cfe2);
  outline-offset: -1px;
  background: var(--Color-Neutral-White, #fff);
  font-family: var(--evs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  cursor: pointer;
  text-align: center;
}

.evs-booking-schedule-slot--selected {
  outline: none;
  background: var(--Base-Brand-Purple, #4b1e4c);
  color: rgba(255, 255, 255, 0.9);
}

.evs-booking-schedule-slot--selected .evs-booking-schedule-slot__clock,
.evs-booking-schedule-slot--selected .evs-booking-schedule-slot__period {
  color: inherit;
}

.evs-booking-schedule-slot__radio {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

/* No flex-grow: time must not fill the row or centered text sits far from the radio */
.evs-booking-schedule-slot__time {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
}

.evs-booking-schedule-slot__clock {
  font-weight: 500;
}

.evs-booking-schedule-slot__period {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.42px;
}

.evs-booking-schedule-show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  outline: 1px solid var(--Base-Brand-Periwinkle, #d7cfe2);
  outline-offset: -1px;
  background: var(--Color-Neutral-White, #fff);
  font-family: var(--evs-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.42px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  cursor: pointer;
}

.evs-booking-schedule-show-more:hover {
  background: rgba(75, 30, 76, 0.06);
}

.evs-booking-schedule-show-more__icon {
  flex-shrink: 0;
}

.evs-booking-schedule-show-more__label {
  font: inherit;
  letter-spacing: inherit;
}

.evs-booking-modal .evs-booking-primary--schedule:disabled {
  background: #e5e5e5;
  color: #808080;
  opacity: 1;
}

/* Booking — step 5 review / confirm (Figma 1772:6561) */
.evs-booking-confirm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 544px;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 16px;
}

.evs-booking-confirm__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.evs-booking-modal .evs-booking-confirm__header .evs-booking-title--confirm {
  padding: 0 24px 8px;
  margin: 0;
}

.evs-booking-success-tagline {
  margin: 0;
  padding: 0 24px 12px;
  text-align: center;
  font-family: var(--evs-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-card-outer {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 32px;
  background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.3) 100%
    ),
    var(--Base-Brand-Periwinkle, #d7cfe2);
}

.evs-booking-confirm-card-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 32px;
  box-sizing: border-box;
  border-radius: 24px;
  outline: 1px solid #ffffff;
  outline-offset: -1px;
  background: #f6f3f9;
  box-shadow:
    1px 2px 8px rgba(0, 0, 0, 0.05),
    1px 2px 8px rgba(255, 255, 255, 0.05) inset,
    -1px -2px 8px rgba(0, 0, 0, 0.05) inset;
  font-family: var(--evs-font);
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-pet-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.evs-booking-confirm-pet-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--color-neutral-white, #fff);
}

.evs-booking-confirm-pet-badge img {
  display: block;
  flex-shrink: 0;
}

.evs-booking-confirm-pet-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.evs-booking-confirm-exam {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-location {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.42px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-when {
  margin: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--Base-Brand-Purple, #4b1e4c);
}

.evs-booking-confirm-policy {
  margin: 0;
  text-align: center;
  font-family: var(--evs-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--Base-Brand-Purple, #4b1e4c);
  opacity: 0.9;
  padding: 0 8px;
}

.evs-booking-confirm-actions {
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--Color-Neutral-Gray-8, #cccccc);
  box-sizing: border-box;
}

.evs-booking-confirm-submit {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 14px 28px;
  box-sizing: border-box;
  border: none;
  border-radius: 100px;
  background: var(--Base-Brand-Red, #fc595b);
  color: var(--Color-Neutral-Black, #000000);
  font-family: var(--evs-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.evs-booking-confirm-submit:hover {
  filter: brightness(0.97);
}

.evs-booking-confirm-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Confirm + success primary — Figma contained (hug content, not full width) */
.evs-booking-confirm-submit--compact {
  display: inline-flex;
  width: auto;
  max-width: none;
  max-height: 48px;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 28px;
  letter-spacing: 0.54px;
}

.evs-booking-actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.evs-booking-modal .evs-booking-actions {
  margin-top: 0;
}

.evs-booking-actions--center {
  justify-content: center;
}

.evs-booking-modal .evs-booking-actions--after-schedule {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(75, 30, 76, 0.12);
}

.evs-booking-primary {
  background: var(--evs-base-brand-lavender, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 32px;
  cursor: pointer;
}

.evs-booking-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.evs-booking-modal .evs-booking-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  max-height: 48px;
  padding: 18px 28px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.54px;
  background: var(--Base-Brand-Red, #fc595b);
  color: var(--Color-Neutral-Black, #000000);
}

.evs-booking-modal .evs-booking-primary:disabled {
  background: var(--Color-Neutral-Gray-9, #e5e5e5);
  color: var(--Color-Neutral-Gray-5, #808080);
  opacity: 1;
  cursor: not-allowed;
}

.evs-booking-success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* Booking — pet picker (shared modal shell above) */
.evs-booking-pet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 160px;
  margin: 24px 0 0;
  width: 100%;
  box-sizing: border-box;
}

.evs-booking-pet-grid > *:only-child {
  grid-column: 1 / -1;
  max-width: min(100%, 320px);
  justify-self: center;
}

.evs-booking-pet-grid > *:nth-last-child(1):nth-child(odd):not(:only-child) {
  grid-column: 1 / -1;
  max-width: calc(50% - 8px);
  justify-self: center;
}

.evs-booking-pet-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.evs-booking-pet-select__badge {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-bottom: -42px;
}

.evs-booking-pet-select__badge-ring {
  flex-shrink: 0;
  padding: 6px;
  border: 1px solid #ffeeef;
  border-radius: 1000px;
  background: #a187c4;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}

.evs-booking-pet-select--selected .evs-booking-pet-select__badge-ring {
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 0 0 2px #4b1e4c;
}

.evs-booking-pet-select__badge-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 100px;
  background: #ffffff;
}

.evs-booking-pet-select__icon {
  display: block;
  width: 48px;
  height: 48px;
}

.evs-booking-pet-select__card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  padding: 48px 32px 24px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    #a187c4;
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.08),
    inset 0 -16px 12px -16px rgba(0, 0, 0, 0.06),
    inset 0 4px 6px rgba(255, 255, 255, 0.2);
}

.evs-booking-pet-select--selected .evs-booking-pet-select__card {
  box-shadow:
    0 6px 8px rgba(0, 0, 0, 0.12),
    0 2px 3px rgba(0, 0, 0, 0.08),
    inset 0 -16px 12px -16px rgba(0, 0, 0, 0.06),
    inset 0 4px 6px rgba(255, 255, 255, 0.2),
    0 0 0 2px #4b1e4c;
}

.evs-booking-pet-select__name {
  display: block;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #4b1e4c;
}

.evs-booking-pet-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--Color-Neutral-Gray-8, #cccccc);
}

.evs-booking-add-pet-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--Spacers-4, 4px);
  box-sizing: border-box;
  max-height: 48px;
  padding: 18px 28px;
  border: 1px solid #fc595b;
  border-radius: 100px;
  background: transparent;
  color: #973537;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.evs-booking-add-pet-cta:hover {
  opacity: 0.92;
}

.evs-booking-add-pet-cta__plus {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

/* ── Mobile (max-width: 600px) — booking modal (portal fix/mobile-booking-ui parity) ── */
@media (max-width: 600px) {
  .evs-booking-modal {
    padding: 40px 20px 40px;
  }

  .evs-booking-schedule-card__top .evs-booking-schedule-card__header {
    margin-bottom: 16px;
  }

  .evs-booking-modal .evs-booking-title {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 24px;
    line-height: 28px;
  }

  .evs-booking-modal .evs-booking-title--wellness-reason,
  .evs-booking-modal .evs-booking-title--guest-contact,
  .evs-booking-modal .evs-booking-title--member-login,
  .evs-booking-modal .evs-booking-title--add-inline-pet,
  .evs-booking-modal .evs-booking-title--schedule,
  .evs-booking-modal .evs-booking-title--pet,
  .evs-booking-modal .evs-booking-title--exam,
  .evs-booking-modal .evs-booking-title--center,
  .evs-booking-modal .evs-booking-exam__title,
  .evs-booking-modal .evs-booking-schedule-card__title,
  .evs-booking-modal .evs-booking-title--confirm {
    font-size: 17px;
    line-height: 22px;
  }

  .evs-booking-modal .evs-booking-exam__desc {
    font-size: 12px;
    line-height: 16px;
    min-height: 28px;
  }

  /* Mobile typography: step modal copy down one size for readability. */
  .evs-booking-modal .evs-booking-sub,
  .evs-booking-modal .evs-booking-member-login__control,
  .evs-booking-modal .evs-booking-guest-input,
  .evs-booking-modal .evs-booking-schedule-day,
  .evs-booking-modal .evs-booking-schedule-slot,
  .evs-booking-modal .evs-booking-schedule-sub,
  .evs-booking-modal .evs-booking-cal-month-select,
  .evs-booking-modal .evs-booking-cal-tile,
  .evs-booking-modal .evs-booking-confirm-exam,
  .evs-booking-modal .evs-booking-confirm-location,
  .evs-booking-modal .evs-booking-confirm-when,
  .evs-booking-modal .evs-booking-confirm-pet-name,
  .evs-booking-modal .evs-booking-success-tagline {
    font-size: 14px;
    line-height: 16px;
  }

  .evs-booking-add-pet-cta,
  .evs-booking-modal .evs-booking-primary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  /* Breathing room between the exam-step title and icon cards */
  .evs-booking-exam-row {
    margin-top: 10px;
  }

  /* Tighten the grey schedule card; five-day strip / time slots closer to card edges. */
  .evs-booking-schedule-card {
    padding: 16px 16px 20px;
  }

  /* Mobile: 3-column slot grid (desktop stays 4×114px). */
  .evs-booking-schedule-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .evs-booking-date-picker {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--evs-base-brand-purple, #4b1e4c);
    border-radius: 8px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
  }

  /* Center the calendar popover against the schedule card instead of the
     button wrapper so small-screen layout does not need per-device nudges. */
  .evs-booking-schedule-card__header {
    position: relative;
  }

  .evs-booking-schedule-cal-anchor {
    position: static;
  }

  .evs-booking-date-picker--popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    margin-top: 0;
    z-index: 5;
    width: min(360px, calc(100vw - 48px));
    max-width: calc(100% - 16px);
    transform: translateX(-50%);
  }

  /* Narrow popover: slightly smaller date glyphs so circles stay inside the 7-column grid. */
  .evs-booking-date-picker .evs-booking-cal-tile {
    font-size: 13px;
  }

  .evs-booking-exam__card {
    padding: 44px 10px 20px;
  }

  .evs-booking-pet-select {
    padding: 0 0 0px;
  }

  /* Match portal “Show more” affordance (text-only on small viewports). */
  .evs-booking-schedule-show-more__icon {
    display: none;
  }
}

@media (max-width: 420px) {
  .evs-booking-modal {
    padding: 40px 8px 40px;
  }

  .evs-booking-schedule-card {
    padding: 16px 8px 20px;
  }

  .evs-booking-exam__card {
    padding: 44px 8px 20px;
  }
}

/* WordPress widget: inner scroll clamp — layout lives here so centering does not depend on Tailwind. */
.evs-booking-widget-scroll {
  box-sizing: border-box;
  width: 100%;
  max-width: min(90vw, 720px);
  max-height: 95vh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* WordPress: above theme header/chrome; portal used a different stacking context. */
.evs-booking-overlay {
  z-index: 100000;
}

.evs-home-modal-overlay {
  z-index: 100090;
}

.evs-add-pet-modal-overlay {
  z-index: 100100;
}

/* WordPress widget: parent handles max-height + scroll; card is not double-clamped. */
.evs-booking-modal--wp-widget {
  max-height: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 4px 6px rgba(0, 0, 0, 0.12);
}