/* ============================================================
   SOULMUTTS TORONTO — Native booking flow (YCBM replacement)
   Production CSS · all selectors scoped to #wbib-booking-app
   ------------------------------------------------------------
   Design language: register-redesign Direction B "Guided".
   Brand: pink #EB4E9B, purple #5A115E, Roboto everywhere
   (headings + body — matches the rest of the Soulmutts site),
   rounded cards, soft motion, mobile-first, prefers-reduced-motion
   honoured.

   Lifted from the clickable prototype at
   audit/ycbm-replacement/build/prototype/assets/booking.css
   with the standalone-page wrappers (body, mockup badge,
   paw wallpaper, footer note) removed and every rule
   re-prefixed with #wbib-booking-app so the module
   cannot bleed into the host WordPress theme.
   ============================================================ */

#wbib-booking-app{
  /* design tokens scoped to the module so they cannot leak */
  --wbib-pink:        #EB4E9B;
  --wbib-pink-hover:  #E62584;
  --wbib-purple:      #5A115E;
  --wbib-body:        #6B5570;
  --wbib-link:        #701576;
  --wbib-soft:        #F9CAE1;
  --wbib-wash:        #FDEDF5;
  --wbib-border:      #F0D6E6;
  --wbib-surface:     #FFFFFF;
  --wbib-green:       #2E9E4F;
  --wbib-green-soft:  #E4F4E9;
  --wbib-green-border:#B6E2C2;
  --wbib-danger:      #C8344A;
  --wbib-danger-soft: #FBE4E8;
  --wbib-r-card:      20px;
  --wbib-r-btn:       12px;
  --wbib-r-input:     10px;
  --wbib-shadow:      0 12px 32px rgba(90,17,94,.10);
  --wbib-shadow-sm:   0 4px 14px rgba(90,17,94,.08);
  --wbib-ease:        cubic-bezier(.22,.61,.36,1);

  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbib-body);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px 16px 64px;
  position:relative;
}

#wbib-booking-app *,
#wbib-booking-app *::before,
#wbib-booking-app *::after{
  box-sizing:border-box;
}

/* ====== Wordmark ====== */
#wbib-booking-app .wbib-brand{
  position:relative; z-index:1;
  text-align:center;
  margin:6px 0 18px;
}
#wbib-booking-app .wbib-brand .wbib-wordmark{
  font-family:'Roboto', system-ui, sans-serif;
  font-size:32px;
  font-weight:700;
  color:var(--wbib-purple);
  letter-spacing:-0.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
#wbib-booking-app .wbib-brand .wbib-wordmark .wbib-pawmark{
  display:inline-block;
  width:26px; height:26px;
  transform:translateY(2px);
}
#wbib-booking-app .wbib-brand .wbib-tagline{
  font-size:12.5px;
  color:var(--wbib-link);
  letter-spacing:.04em;
  margin-top:3px;
  font-weight:500;
}

/* ====== Card shell ======
   The card stretches to roughly the YCBM iframe footprint on the
   /join-our-dog-pack/ page so the new UI fills the same visual
   space when it replaces the iframe. On narrow viewports the
   card collapses to full width minus the outer padding. The
   inner layout (form vs date-picker) is what actually drives
   the per-screen feel — see .wbib-pick-grid and .wbib-form-grid
   for the multi-column treatments. */
#wbib-booking-app .wbib-card{
  position:relative; z-index:1;
  width:100%;
  max-width:1040px;
  background:var(--wbib-surface);
  border-radius:var(--wbib-r-card);
  box-shadow:var(--wbib-shadow);
  overflow:hidden;
}

/* ---- the mascot progress track ---- */
#wbib-booking-app .wbib-track-wrap{
  padding:26px 40px 10px;
  background:linear-gradient(180deg,#FFFFFF 0%, #FFF6FB 100%);
  border-bottom:1px solid var(--wbib-border);
}
#wbib-booking-app .wbib-track-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
}
#wbib-booking-app .wbib-track-head .wbib-step-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--wbib-pink);
}
#wbib-booking-app .wbib-track-head .wbib-step-count{
  font-size:12px;
  font-weight:500;
  color:var(--wbib-body);
}

#wbib-booking-app .wbib-track{
  position:relative;
  height:46px;
  margin:0 6px 4px;
}
#wbib-booking-app .wbib-track .wbib-rail{
  position:absolute;
  left:0; right:0;
  bottom:9px;
  height:8px;
  border-radius:999px;
  background:var(--wbib-soft);
  overflow:hidden;
}
#wbib-booking-app .wbib-track .wbib-rail-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#F488BE, var(--wbib-pink));
  transition:width .42s var(--wbib-ease);
}
#wbib-booking-app .wbib-track .wbib-dots{
  position:absolute;
  left:0; right:0;
  bottom:5px;
  display:flex;
  justify-content:space-between;
}
#wbib-booking-app .wbib-track .wbib-dot-node{
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--wbib-soft);
  transition:border-color .35s var(--wbib-ease), background .35s var(--wbib-ease), transform .35s var(--wbib-ease);
}
#wbib-booking-app .wbib-track .wbib-dot-node.wbib-done{
  border-color:var(--wbib-pink);
  background:var(--wbib-pink);
}
#wbib-booking-app .wbib-track .wbib-dot-node.wbib-current{
  border-color:var(--wbib-pink);
  background:#fff;
  transform:scale(1.18);
}
#wbib-booking-app .wbib-track .wbib-goal{
  position:absolute;
  right:-7px;
  bottom:-2px;
  font-size:24px;
  filter:drop-shadow(0 3px 4px rgba(90,17,94,.18));
  transition:transform .4s var(--wbib-ease);
}
#wbib-booking-app .wbib-track.wbib-at-goal .wbib-goal{
  transform:scale(1.25) translateY(-2px);
}

/* the mascot */
#wbib-booking-app .wbib-mascot{
  position:absolute;
  bottom:8px;
  left:0;
  width:46px;
  height:42px;
  transition:left .55s var(--wbib-ease);
  z-index:2;
}
#wbib-booking-app .wbib-mascot .wbib-mascot-svg{
  width:100%;
  height:100%;
  transform-origin:bottom center;
}
#wbib-booking-app .wbib-mascot.wbib-walking .wbib-mascot-svg{
  animation:wbib-hop .55s var(--wbib-ease);
}
@keyframes wbib-hop{
  0%  { transform:translateY(0)   rotate(0); }
  35% { transform:translateY(-9px) rotate(-6deg); }
  70% { transform:translateY(0)   rotate(3deg); }
  100%{ transform:translateY(0)   rotate(0); }
}
#wbib-booking-app .wbib-mascot .wbib-tail{
  transform-origin:14px 30px;
  animation:wbib-wag 1.1s ease-in-out infinite;
}
@keyframes wbib-wag{
  0%,100%{ transform:rotate(-12deg); }
  50%    { transform:rotate(20deg); }
}
#wbib-booking-app .wbib-mascot .wbib-speech{
  position:absolute;
  bottom:44px;
  left:50%;
  transform:translateX(-50%) scale(.6);
  opacity:0;
  background:var(--wbib-purple);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:8px;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity .3s var(--wbib-ease), transform .3s var(--wbib-ease);
}
#wbib-booking-app .wbib-mascot .wbib-speech::after{
  content:"";
  position:absolute;
  bottom:-4px; left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:var(--wbib-purple);
  border-bottom:0;
}
#wbib-booking-app .wbib-mascot.wbib-cheer .wbib-speech{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* ====== Screens ====== */
#wbib-booking-app .wbib-stage{
  position:relative;
  overflow:hidden;
}
#wbib-booking-app .wbib-screen{
  display:none;
  padding:40px 48px 38px;
}

/* The card stretches to ~1040px on desktop so the new UI fills
   the YCBM footprint, but stacked form fields look bad at that
   width — long lines + lots of empty space. So inside each
   screen the form-style content is centred with a sensible
   max-width. The merged pick step (.wbib-pick-grid) and the
   review/services/manage grids opt out via .wbib-screen-wide
   below so they can spread to the full card width.

   The intro block on the pick step (kicker/title/sub above the
   calendar) is centred too — but capped narrower so it reads as
   a deliberate header instead of a long sparse line. */
#wbib-booking-app .wbib-screen.wbib-active:not(.wbib-screen-wide) > *:not(.wbib-pick-grid):not(.wbib-screen-wide){
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}
#wbib-booking-app .wbib-screen.wbib-active{
  display:block;
}
#wbib-booking-app .wbib-screen.wbib-slide-in-right{ animation:wbib-slideInRight .32s var(--wbib-ease) both; }
#wbib-booking-app .wbib-screen.wbib-slide-in-left { animation:wbib-slideInLeft  .32s var(--wbib-ease) both; }
@keyframes wbib-slideInRight{
  from{ opacity:0; transform:translateX(34px); }
  to  { opacity:1; transform:translateX(0); }
}
@keyframes wbib-slideInLeft{
  from{ opacity:0; transform:translateX(-34px); }
  to  { opacity:1; transform:translateX(0); }
}

/* ---- conversational question ---- */
#wbib-booking-app .wbib-q-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wbib-pink);
  margin-bottom:10px;
}
#wbib-booking-app .wbib-q-title{
  font-family:'Roboto', system-ui, sans-serif;
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--wbib-purple);
  margin-bottom:10px;
}
#wbib-booking-app .wbib-q-sub{
  font-size:15px;
  line-height:1.55;
  color:var(--wbib-body);
  margin-bottom:26px;
}

/* ====== Calendar / day picker ====== */
#wbib-booking-app .wbib-cal{ position:relative; }
#wbib-booking-app .wbib-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
#wbib-booking-app .wbib-cal-month{
  font-family:'Roboto', system-ui, sans-serif;
  font-size:17px;
  font-weight:700;
  color:var(--wbib-purple);
  letter-spacing:-0.005em;
}
#wbib-booking-app .wbib-cal-nav{
  width:38px; height:38px;
  border-radius:50%;
  border:1.6px solid var(--wbib-border);
  background:#fff;
  color:var(--wbib-link);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease), transform .15s var(--wbib-ease);
}
#wbib-booking-app .wbib-cal-nav:hover:not(:disabled){
  border-color:var(--wbib-pink);
  background:var(--wbib-wash);
}
#wbib-booking-app .wbib-cal-nav:active:not(:disabled){ transform:scale(.92); }
#wbib-booking-app .wbib-cal-nav:disabled{
  opacity:.35;
  cursor:not-allowed;
}

#wbib-booking-app .wbib-cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
#wbib-booking-app .wbib-cal-dow{
  margin-bottom:6px;
}
#wbib-booking-app .wbib-cal-dow span{
  text-align:center;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--wbib-link);
  padding-bottom:2px;
}

#wbib-booking-app .wbib-cal-day{
  aspect-ratio:1/1;
  /* When the card stretches wide, each day cell would balloon to
     ~80px+ on aspect-ratio:1/1 — that wastes a lot of vertical
     space inside the merged pick step. Cap the cell height so
     the calendar stays a reasonable shape regardless of width. */
  max-height:64px;
  min-height:44px;
  border:1.6px solid transparent;
  border-radius:var(--wbib-r-input);
  background:transparent;
  font-family:'Roboto', sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--wbib-purple);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  position:relative;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease), transform .15s var(--wbib-ease), color .2s var(--wbib-ease);
}
#wbib-booking-app .wbib-cal-day.wbib-empty{
  cursor:default;
  pointer-events:none;
}
#wbib-booking-app .wbib-cal-day.wbib-available{
  background:var(--wbib-wash);
  border-color:var(--wbib-border);
}
#wbib-booking-app .wbib-cal-day.wbib-available:hover{
  border-color:var(--wbib-pink);
  background:#FCE3F0;
  transform:translateY(-2px);
}
#wbib-booking-app .wbib-cal-day.wbib-available .wbib-day-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:var(--wbib-pink);
}
#wbib-booking-app .wbib-cal-day.wbib-unavailable{
  color:#C9AFC2;
  cursor:not-allowed;
}
#wbib-booking-app .wbib-cal-day.wbib-unavailable .wbib-day-dot{
  width:5px; height:5px;
  border-radius:50%;
  background:#E2CBD9;
}
#wbib-booking-app .wbib-cal-day.wbib-past{
  color:#D4C2CE;
  cursor:not-allowed;
}
#wbib-booking-app .wbib-cal-day.wbib-selected{
  background:var(--wbib-pink);
  border-color:var(--wbib-pink);
  color:#fff;
  box-shadow:0 8px 18px rgba(235,78,155,.32);
}
#wbib-booking-app .wbib-cal-day.wbib-selected .wbib-day-dot{ background:#fff; }
#wbib-booking-app .wbib-cal-day.wbib-today::after{
  content:"";
  position:absolute;
  top:5px; right:6px;
  width:5px; height:5px;
  border-radius:50%;
  border:1.5px solid var(--wbib-link);
}
#wbib-booking-app .wbib-cal-day.wbib-selected.wbib-today::after{ border-color:#fff; }

#wbib-booking-app .wbib-cal-legend{
  display:flex;
  gap:18px;
  margin-top:16px;
  justify-content:center;
}
#wbib-booking-app .wbib-cal-legend .wbib-lg{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--wbib-body);
}
#wbib-booking-app .wbib-cal-legend .wbib-lg-dot{
  width:8px; height:8px;
  border-radius:50%;
}
#wbib-booking-app .wbib-cal-legend .wbib-lg-open{ background:var(--wbib-pink); }
#wbib-booking-app .wbib-cal-legend .wbib-lg-none{ background:#E2CBD9; }

/* loading state */
#wbib-booking-app .wbib-cal-loading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:30px 10px;
  font-size:13.5px;
  color:var(--wbib-body);
}
#wbib-booking-app .wbib-cal-loading.wbib-show{ display:flex; }
#wbib-booking-app .wbib-spinner{
  width:18px; height:18px;
  border:2.5px solid var(--wbib-soft);
  border-top-color:var(--wbib-pink);
  border-radius:50%;
  animation:wbib-spin .7s linear infinite;
}
@keyframes wbib-spin{ to{ transform:rotate(360deg); } }

/* ====== Time-slot picker ====== */
#wbib-booking-app .wbib-slots{ position:relative; }
#wbib-booking-app .wbib-slot-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
#wbib-booking-app .wbib-slot-btn{
  border:1.6px solid var(--wbib-border);
  border-radius:var(--wbib-r-input);
  background:var(--wbib-wash);
  padding:14px 12px;
  font-family:'Roboto', sans-serif;
  cursor:pointer;
  text-align:center;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease), transform .15s var(--wbib-ease);
  position:relative;
}
#wbib-booking-app .wbib-slot-btn:hover{
  border-color:var(--wbib-pink);
  background:#FCE3F0;
  transform:translateY(-2px);
}
#wbib-booking-app .wbib-slot-btn .wbib-slot-time{
  display:block;
  font-size:16px;
  font-weight:700;
  color:var(--wbib-purple);
}
#wbib-booking-app .wbib-slot-btn .wbib-slot-left{
  display:block;
  font-size:11.5px;
  color:var(--wbib-body);
  margin-top:2px;
}
#wbib-booking-app .wbib-slot-btn.wbib-selected{
  border-color:var(--wbib-pink);
  background:var(--wbib-pink);
  box-shadow:0 8px 18px rgba(235,78,155,.30);
}
#wbib-booking-app .wbib-slot-btn.wbib-selected .wbib-slot-time{ color:#fff; }
#wbib-booking-app .wbib-slot-btn.wbib-selected .wbib-slot-left{ color:#FBD8EB; }

#wbib-booking-app .wbib-slot-empty{
  display:none;
  text-align:center;
  padding:30px 16px;
}
#wbib-booking-app .wbib-slot-empty.wbib-show{ display:block; }
#wbib-booking-app .wbib-slot-empty .wbib-se-emoji{
  font-size:38px;
  display:block;
  margin-bottom:8px;
}
#wbib-booking-app .wbib-slot-empty .wbib-se-main{
  font-size:15px;
  font-weight:700;
  color:var(--wbib-purple);
}
#wbib-booking-app .wbib-slot-empty .wbib-se-sub{
  font-size:13px;
  color:var(--wbib-body);
  margin-top:3px;
}

/* ---- slot recap chip ---- */
#wbib-booking-app .wbib-slot-recap{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--wbib-green-soft);
  border:1.6px solid var(--wbib-green-border);
  border-radius:var(--wbib-r-input);
  padding:12px 14px;
  margin-bottom:20px;
}
#wbib-booking-app .wbib-slot-recap.wbib-slot-recap-muted{
  background:var(--wbib-wash);
  border-color:var(--wbib-border);
}
#wbib-booking-app .wbib-slot-recap .wbib-sr-icon{ font-size:18px; flex-shrink:0; }
#wbib-booking-app .wbib-slot-recap .wbib-sr-text{
  font-size:13.5px;
  font-weight:500;
  color:var(--wbib-purple);
}

/* ====== fields ====== */
#wbib-booking-app .wbib-field{
  margin-bottom:18px;
  position:relative;
}
#wbib-booking-app .wbib-field label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--wbib-purple);
  margin-bottom:6px;
}
#wbib-booking-app .wbib-field .wbib-hint{
  font-size:12px;
  color:var(--wbib-body);
  font-weight:400;
}
#wbib-booking-app .wbib-field input[type=text],
#wbib-booking-app .wbib-field input[type=email],
#wbib-booking-app .wbib-field input[type=tel],
#wbib-booking-app .wbib-field select{
  width:100%;
  font-family:'Roboto', sans-serif;
  font-size:15px;
  color:var(--wbib-purple);
  background:#fff;
  border:1.6px solid var(--wbib-border);
  border-radius:var(--wbib-r-input);
  padding:14px 40px 14px 16px;
  transition:border-color .25s var(--wbib-ease), box-shadow .25s var(--wbib-ease), background .25s var(--wbib-ease);
  -webkit-appearance:none;
  appearance:none;
}
#wbib-booking-app .wbib-field input::placeholder{ color:#C9AFC2; }
#wbib-booking-app .wbib-field input:focus,
#wbib-booking-app .wbib-field select:focus{
  outline:none;
  border-color:var(--wbib-pink);
  box-shadow:0 0 0 4px rgba(235,78,155,.13);
}
#wbib-booking-app .wbib-field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23701576' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
#wbib-booking-app .wbib-field-row{
  display:flex;
  gap:12px;
}
#wbib-booking-app .wbib-field-row .wbib-field{
  flex:1;
  margin-bottom:16px;
}

/* honeypot — fully hidden, off-screen, never receives focus */
#wbib-booking-app .wbib-hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* validation tick */
#wbib-booking-app .wbib-field .wbib-tick{
  position:absolute;
  right:13px;
  top:33px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--wbib-green);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.3);
  transition:opacity .25s var(--wbib-ease), transform .3s var(--wbib-ease);
  pointer-events:none;
}
#wbib-booking-app .wbib-field.wbib-valid .wbib-tick{
  opacity:1;
  transform:scale(1);
}
#wbib-booking-app .wbib-field .wbib-tick svg{ width:12px; height:12px; }
#wbib-booking-app .wbib-field.wbib-valid input,
#wbib-booking-app .wbib-field.wbib-valid select{
  border-color:var(--wbib-green-border);
}
#wbib-booking-app .wbib-field.wbib-has-hint .wbib-tick{ top:46px; }

/* ====== checkbox row (SMS consent) ====== */
#wbib-booking-app .wbib-check-row{
  display:flex;
  gap:11px;
  align-items:flex-start;
  background:var(--wbib-wash);
  border:1.6px solid var(--wbib-border);
  border-radius:var(--wbib-r-input);
  padding:14px 15px;
  margin-bottom:6px;
  cursor:pointer;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease);
}
#wbib-booking-app .wbib-check-row:hover{ border-color:#E7B9D3; }
#wbib-booking-app .wbib-check-row.wbib-checked{ border-color:var(--wbib-green-border); background:var(--wbib-green-soft); }
#wbib-booking-app .wbib-check-box{
  width:22px; height:22px;
  border-radius:6px;
  border:2px solid #D8B9CE;
  background:#fff;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--wbib-ease), border-color .2s var(--wbib-ease);
  margin-top:1px;
}
#wbib-booking-app .wbib-check-row.wbib-checked .wbib-check-box{
  background:var(--wbib-green);
  border-color:var(--wbib-green);
}
#wbib-booking-app .wbib-check-box svg{ width:12px; height:12px; opacity:0; transition:opacity .2s ease; }
#wbib-booking-app .wbib-check-row.wbib-checked .wbib-check-box svg{ opacity:1; }
#wbib-booking-app .wbib-check-row .wbib-check-text{
  font-size:13px;
  line-height:1.5;
  color:var(--wbib-body);
}

/* ====== services multi-select ====== */
#wbib-booking-app .wbib-services{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:20px;
}
#wbib-booking-app .wbib-svc-card{
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1.6px solid var(--wbib-border);
  border-radius:14px;
  padding:14px 15px;
  cursor:pointer;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease), transform .15s var(--wbib-ease);
}
#wbib-booking-app .wbib-svc-card:hover{
  border-color:#E7B9D3;
  transform:translateY(-1px);
}
#wbib-booking-app .wbib-svc-card.wbib-checked{
  border-color:var(--wbib-green-border);
  background:var(--wbib-green-soft);
}
#wbib-booking-app .wbib-svc-check{
  width:24px; height:24px;
  border-radius:7px;
  border:2px solid #D8B9CE;
  background:#fff;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--wbib-ease), border-color .2s var(--wbib-ease);
}
#wbib-booking-app .wbib-svc-card.wbib-checked .wbib-svc-check{
  background:var(--wbib-green);
  border-color:var(--wbib-green);
}
#wbib-booking-app .wbib-svc-check svg{ width:13px; height:13px; opacity:0; transition:opacity .2s ease; }
#wbib-booking-app .wbib-svc-card.wbib-checked .wbib-svc-check svg{ opacity:1; }
#wbib-booking-app .wbib-svc-emoji{
  font-size:24px;
  flex-shrink:0;
}
#wbib-booking-app .wbib-svc-text{ flex:1; }
#wbib-booking-app .wbib-svc-name{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--wbib-purple);
}
#wbib-booking-app .wbib-svc-sub{
  display:block;
  font-size:12px;
  color:var(--wbib-body);
  margin-top:1px;
}

/* ====== review box ====== */
#wbib-booking-app .wbib-review{
  background:var(--wbib-wash);
  border:1.6px solid var(--wbib-border);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:14px;
}
#wbib-booking-app .wbib-review-head{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--wbib-pink);
  margin-bottom:8px;
}
#wbib-booking-app .wbib-review-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:5px 0;
  font-size:13.5px;
}
#wbib-booking-app .wbib-review-row + .wbib-review-row{ border-top:1px dashed var(--wbib-border); }
#wbib-booking-app .wbib-review-row .wbib-rv-k{
  color:var(--wbib-body);
  flex-shrink:0;
}
#wbib-booking-app .wbib-review-row .wbib-rv-v{
  color:var(--wbib-purple);
  font-weight:500;
  text-align:right;
}

/* ====== form error ====== */
#wbib-booking-app .wbib-form-error{
  display:none;
  background:var(--wbib-danger-soft);
  border:1.6px solid #F0B8C2;
  border-radius:var(--wbib-r-input);
  padding:11px 14px;
  margin-bottom:14px;
  font-size:13px;
  color:var(--wbib-danger);
  font-weight:500;
}
#wbib-booking-app .wbib-form-error.wbib-show{ display:block; }

/* ====== nav buttons ====== */
#wbib-booking-app .wbib-nav{
  display:flex;
  gap:12px;
  margin-top:24px;
  align-items:center;
}
#wbib-booking-app .wbib-btn{
  font-family:'Roboto', sans-serif;
  font-size:15px;
  font-weight:700;
  border-radius:var(--wbib-r-btn);
  cursor:pointer;
  border:none;
  transition:transform .18s var(--wbib-ease), box-shadow .25s var(--wbib-ease), background .2s var(--wbib-ease), opacity .2s var(--wbib-ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#wbib-booking-app .wbib-btn-primary{
  background:var(--wbib-pink);
  color:#fff;
  padding:14px 22px;
  flex:1;
  box-shadow:0 8px 20px rgba(235,78,155,.32);
}
#wbib-booking-app .wbib-btn-primary:hover:not(:disabled){
  background:var(--wbib-pink-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(235,78,155,.40);
}
#wbib-booking-app .wbib-btn-primary:active:not(:disabled){ transform:translateY(0) scale(.99); }
#wbib-booking-app .wbib-btn-primary:disabled{
  background:#E7C6DA;
  box-shadow:none;
  cursor:not-allowed;
}
#wbib-booking-app .wbib-btn-back{
  background:#fff;
  color:var(--wbib-link);
  padding:14px 18px;
  border:1.6px solid var(--wbib-border);
}
#wbib-booking-app .wbib-btn-back:hover{
  border-color:#D8B9CE;
  background:var(--wbib-wash);
}
#wbib-booking-app .wbib-btn-join{
  background:linear-gradient(135deg,#EB4E9B,#E62584);
  font-size:16px;
  padding:16px 22px;
}
#wbib-booking-app .wbib-btn-danger{
  background:var(--wbib-danger);
  color:#fff;
  padding:14px 22px;
  flex:1;
  box-shadow:0 8px 20px rgba(200,52,74,.28);
}
#wbib-booking-app .wbib-btn-danger:hover:not(:disabled){
  background:#B12A3F;
  transform:translateY(-2px);
}
#wbib-booking-app .wbib-btn.wbib-loading{
  pointer-events:none;
  opacity:.85;
}
#wbib-booking-app .wbib-btn .wbib-btn-spin{
  width:15px; height:15px;
  border:2.4px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:wbib-spin .7s linear infinite;
}

/* ====== SUCCESS / confirmation ====== */
#wbib-booking-app .wbib-success-screen{
  text-align:center;
  padding:36px 30px 32px;
}
#wbib-booking-app .wbib-success-burst{
  font-size:56px;
  display:inline-block;
  animation:wbib-pop .6s var(--wbib-ease) both;
}
@keyframes wbib-pop{
  0%  { transform:scale(0) rotate(-25deg); opacity:0; }
  60% { transform:scale(1.25) rotate(8deg); }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
#wbib-booking-app .wbib-success-screen .wbib-s-title{
  font-family:'Roboto', system-ui, sans-serif;
  font-size:28px;
  font-weight:700;
  color:var(--wbib-purple);
  letter-spacing:-0.01em;
  margin:10px 0 8px;
}
#wbib-booking-app .wbib-success-screen .wbib-s-msg{
  font-size:14.5px;
  line-height:1.6;
  color:var(--wbib-body);
  max-width:400px;
  margin:0 auto 6px;
}
#wbib-booking-app .wbib-success-screen .wbib-s-paws{
  font-size:18px;
  letter-spacing:6px;
  margin:12px 0 4px;
}

/* confirmation detail card */
#wbib-booking-app .wbib-confirm-card,
#wbib-booking-app .wbib-cancel-card{
  background:var(--wbib-wash);
  border:1.6px solid var(--wbib-border);
  border-radius:14px;
  padding:16px;
  margin:18px 0 4px;
  text-align:left;
}
#wbib-booking-app .wbib-cancel-card{ margin-bottom:14px; }
#wbib-booking-app .wbib-cc-row{
  display:flex;
  align-items:center;
  gap:12px;
}
#wbib-booking-app .wbib-cc-icon{
  width:42px; height:42px;
  border-radius:11px;
  background:var(--wbib-pink);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
#wbib-booking-app .wbib-cancel-card .wbib-cc-icon{ background:var(--wbib-danger); }
#wbib-booking-app .wbib-cc-when{
  display:block;
  font-size:14.5px;
  font-weight:700;
  color:var(--wbib-purple);
  line-height:1.3;
}
#wbib-booking-app .wbib-cc-meta{
  display:block;
  font-size:12px;
  color:var(--wbib-body);
  margin-top:2px;
}
#wbib-booking-app .wbib-cc-divide{
  height:1px;
  background:var(--wbib-border);
  margin:14px 0;
}
#wbib-booking-app .wbib-cc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
}
#wbib-booking-app .wbib-cc-cell.wbib-cc-wide{ grid-column:1 / -1; }
#wbib-booking-app .wbib-cc-k{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--wbib-link);
  margin-bottom:2px;
}
#wbib-booking-app .wbib-cc-v{
  display:block;
  font-size:13.5px;
  color:var(--wbib-purple);
  font-weight:500;
  word-break:break-word;
}
#wbib-booking-app .wbib-confirm-card.wbib-confirm-card-slim{ padding:14px 16px; }

/* confetti (confirmation screen) */
#wbib-booking-app .wbib-confetti{
  position:absolute;
  top:-14px;
  width:9px; height:14px;
  border-radius:2px;
  opacity:0;
  pointer-events:none;
  z-index:5;
}
#wbib-booking-app .wbib-confetti.wbib-go{
  animation:wbib-fall 2.8s var(--wbib-ease) forwards;
}
@keyframes wbib-fall{
  0%  { opacity:1; transform:translateY(-20px) rotate(0); }
  100%{ opacity:0; transform:translateY(620px) rotate(540deg); }
}

/* manage links */
#wbib-booking-app .wbib-manage-links{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:18px;
}
#wbib-booking-app .wbib-manage-link{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  background:#fff;
  border:1.6px solid var(--wbib-border);
  border-radius:var(--wbib-r-input);
  padding:13px 15px;
  font-family:'Roboto', sans-serif;
  font-size:13.5px;
  color:var(--wbib-body);
  cursor:pointer;
  transition:border-color .2s var(--wbib-ease), background .2s var(--wbib-ease), transform .15s var(--wbib-ease);
}
#wbib-booking-app .wbib-manage-link strong{ color:var(--wbib-link); font-weight:700; }
#wbib-booking-app .wbib-manage-link:hover{
  border-color:var(--wbib-pink);
  background:var(--wbib-wash);
  transform:translateY(-1px);
}
#wbib-booking-app .wbib-manage-link .wbib-ml-icon{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--wbib-wash);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  flex-shrink:0;
}
#wbib-booking-app .wbib-manage-link.wbib-manage-link-cancel:hover{
  border-color:#F0B8C2;
  background:var(--wbib-danger-soft);
}
#wbib-booking-app .wbib-manage-link.wbib-manage-link-cancel strong{ color:var(--wbib-danger); }
#wbib-booking-app .wbib-manage-link.wbib-manage-link-cancel:hover .wbib-ml-icon{ background:#fff; }
#wbib-booking-app .wbib-manage-note{
  font-size:11.5px;
  color:var(--wbib-body);
  margin-top:12px;
  line-height:1.5;
  text-align:center;
}

/* reschedule day picker */
#wbib-booking-app .wbib-resched-cal{ position:relative; margin-bottom:4px; }
#wbib-booking-app .wbib-resched-slots{ margin-top:18px; }
#wbib-booking-app .wbib-resched-slot-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--wbib-pink);
  margin-bottom:10px;
}

/* ====== merged pick step (date + time on one screen) ======
   Two columns at >=640px: calendar on the left, times on the right.
   On wider viewports (the YCBM-replacement layout in the live
   /join-our-dog-pack/ container) the calendar grows so each day
   cell is comfortably tappable, and the slots panel keeps a
   sensible width on the right.
   Below 640px the layout collapses to a single column stack
   (calendar on top, times below) so the merged step still lives
   on one screen on phones — no return to the old separate
   "pick a time" screen. */
#wbib-booking-app .wbib-pick-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
  /* Centre the picker inside the wide card so the calendar
     visually balances with the centred intro above it.
     Capped at 880px so a 7-column calendar's day cells stay
     in the comfortable 55–65px range — wider and the cells
     turn into squares the size of a fingertip, narrower and
     they collide with each other on touch. */
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
#wbib-booking-app .wbib-pick-cal{ min-width:0; }
#wbib-booking-app .wbib-pick-slots{
  min-width:0;
  /* min-height keeps the slot panel from looking like a tiny
     box in a tall calendar column before the user has picked
     a day. Once a day is picked the slot list flexes taller. */
  min-height:320px;
  background:var(--wbib-wash);
  border:1.6px solid var(--wbib-border);
  border-radius:14px;
  padding:18px 18px 20px;
  position:relative;
}
#wbib-booking-app .wbib-pick-slots-head{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--wbib-pink);
  margin-bottom:4px;
}
#wbib-booking-app .wbib-pick-slots-day{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--wbib-purple);
  margin-bottom:12px;
  line-height:1.3;
}
/* the slot list inside the merged step — single column,
   nice and tappable, capped height so very busy days scroll. */
#wbib-booking-app .wbib-pick-slot-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:340px;
  overflow-y:auto;
  padding-right:2px;
  -webkit-overflow-scrolling:touch;
}
#wbib-booking-app .wbib-pick-slot-list .wbib-slot-btn{
  padding:11px 14px;
  text-align:left;
}
#wbib-booking-app .wbib-pick-slot-list .wbib-slot-btn .wbib-slot-time{
  font-size:15px;
  display:inline-block;
}
#wbib-booking-app .wbib-pick-slot-list .wbib-slot-btn .wbib-slot-left{
  display:inline-block;
  margin-top:0;
  margin-left:10px;
  font-size:11.5px;
  color:var(--wbib-body);
}
#wbib-booking-app .wbib-pick-slot-list .wbib-slot-btn.wbib-selected .wbib-slot-left{
  color:#FBD8EB;
}
#wbib-booking-app .wbib-pick-slots .wbib-cal-loading{
  padding:20px 8px;
}
#wbib-booking-app .wbib-pick-slots .wbib-slot-empty{
  padding:22px 6px 6px;
}
#wbib-booking-app .wbib-pick-slots .wbib-slot-empty .wbib-se-emoji{
  font-size:30px;
}
/* "pick a day on the left" placeholder when no day is selected */
#wbib-booking-app .wbib-pick-slots-hint{
  display:none;
  font-size:13px;
  color:var(--wbib-body);
  text-align:center;
  padding:18px 6px 6px;
}
#wbib-booking-app .wbib-pick-slots-hint.wbib-show{ display:block; }

/* ====== Step 0 — YCBM-mirrored intro layout ======
   The pick step opens with an info SIDEBAR on the left (the welcome
   text + address + parking + arrival instructions YCBM showed in its
   dark left panel) and the date/time PICKER on the right. The whole
   section uses .wbib-screen-wide so it can spread across the full
   1040px card; the picker keeps its own 880px internal cap on the
   right via .wbib-pick-grid's existing rules.

   On viewports below 1023px the sidebar stacks ABOVE the picker so
   the calendar gets the full width (touch targets stay comfortable).
   The .wbib-pick-grid itself collapses to a single column at <=639px
   via its existing rule lower in the file. */
#wbib-booking-app .wbib-intro-layout{
  display:grid;
  /* sidebar fixed at 300px so the right column has a reliable
     ~580px to host the cal+slots pick-grid inside the 1040px card
     (1040 - 48*2 padding - 300 sidebar - 32 gap = 568px). At wider
     viewports (>=1200px) the sidebar can breathe a bit more — see
     the media query lower in this file. */
  grid-template-columns:300px minmax(0, 1fr);
  gap:32px;
  /* was align-items:start which made each column its content-height;
     stretching means the right column (calendar + slots) grows to
     match the tall dark sidebar, so the times panel ends at the same
     bottom-line as the sidebar (visual symmetry). */
  align-items:stretch;
}
#wbib-booking-app .wbib-intro-main{
  min-width:0;
  /* Flex column so the inner pick-grid (calendar + slots) can grow to
     fill the stretched main column height (= sidebar height). Without
     this, the pick-grid stayed at calendar's natural height. */
  display:flex;
  flex-direction:column;
}
#wbib-booking-app .wbib-intro-main .wbib-pick-grid{
  /* The picker no longer needs to be centred — it lives inside the
     right column of the intro layout. Reset the auto margins the
     base rule applies, and tighten the calendar:slots ratio + gap
     so both panels fit in the ~568px right column without the slot
     panel getting squeezed into a vertical text column. */
  margin-left:0;
  margin-right:0;
  max-width:none;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  /* Equal gaps both sides: intro-layout uses gap:32px (sidebar →
     main column), so pick-grid uses the same 32px (calendar → slots
     column). Plus the .wbib-intro-main .wbib-cal-day override below
     adds min-width:0 so cells stop overflowing their grid columns
     (cells used to force themselves to 44×44 via min-height + aspect
     -ratio, but grid columns at this width are only ~40px — the
     rightmost cell ended up overflowing 26px into the gap, eating
     it down to 2px visible space). With min-width:0 the cells shrink
     to their column width (~40px) and the gap stays a true 32px. */
  gap:32px;
}
#wbib-booking-app .wbib-intro-main .wbib-cal-day{
  /* Override the base 44px min-height so cells shrink to their grid
     column width (~40px in this layout). Otherwise the aspect-ratio
     1/1 combined with min-height forces cells to 44×44, overflowing
     their 40px columns and eating 4px out of the right gap. With this
     override the rightmost (Sat) cell stays inside the calendar's
     bounds and the 32px gap to the times panel reads as a true 32px. */
  min-height:0;
  min-width:0;
}
#wbib-booking-app .wbib-intro-main .wbib-pick-slots{
  /* shrink the right-pane padding a touch so the "TIMES AVAILABLE"
     label and the slot list stay readable inside the narrower
     column the intro layout gives it. */
  padding:14px 14px 16px;
}
#wbib-booking-app .wbib-intro-main .wbib-pick-slots-day{
  font-size:14px;
}

/* ---- left sidebar ---- */
#wbib-booking-app .wbib-intro-side{
  min-width:0;
  background:linear-gradient(180deg, var(--wbib-purple) 0%, #480E4C 100%);
  color:#fff;
  border-radius:16px;
  padding:22px 20px 22px;
  position:relative;
  overflow:hidden;
}
#wbib-booking-app .wbib-intro-side .wbib-q-kicker{
  color:#FFC8E3;
  margin-bottom:8px;
}
#wbib-booking-app .wbib-intro-side .wbib-intro-title{
  color:#fff;
  font-size:21px;
  line-height:1.22;
  margin-bottom:10px;
}
#wbib-booking-app .wbib-intro-duration{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:#FFB8D9;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,184,217,.35);
  border-radius:999px;
  padding:5px 12px 5px 10px;
  margin-bottom:20px;
}
#wbib-booking-app .wbib-intro-duration .wbib-intro-dico{
  width:14px;
  height:14px;
  display:block;
  color:#FFB8D9;
}

#wbib-booking-app .wbib-intro-blocks{
  display:flex;
  flex-direction:column;
  gap:16px;
}
#wbib-booking-app .wbib-intro-block{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  align-items:start;
}
#wbib-booking-app .wbib-intro-block-icon{
  width:28px;
  height:28px;
  border-radius:9px;
  background:rgba(255, 0, 149, .22);
  color:#FFC8E3;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}
#wbib-booking-app .wbib-intro-block-icon svg{
  width:15px;
  height:15px;
  display:block;
}
#wbib-booking-app .wbib-intro-block-body{
  min-width:0;
}
#wbib-booking-app .wbib-intro-block-body p{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:#F4DDEE;
}
#wbib-booking-app .wbib-intro-block-body strong{
  color:#fff;
  font-weight:600;
}
#wbib-booking-app .wbib-intro-block-body a{
  color:#FFB8D9;
  text-decoration:underline;
  text-decoration-color:rgba(255,184,217,.5);
  text-underline-offset:2px;
}
#wbib-booking-app .wbib-intro-block-body a:hover{
  color:#fff;
  text-decoration-color:#fff;
}

#wbib-booking-app .wbib-intro-tip{
  margin-top:6px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:rgba(255,0,149,.12);
  border:1px solid rgba(255,184,217,.28);
  border-radius:10px;
  padding:10px 12px;
}
#wbib-booking-app .wbib-intro-tip-label{
  flex-shrink:0;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--wbib-pink);
  background:#fff;
  border-radius:5px;
  padding:3px 7px;
  line-height:1;
  margin-top:1px;
}
#wbib-booking-app .wbib-intro-tip-text{
  font-size:12.5px;
  line-height:1.5;
  color:#F4DDEE;
}

/* ---- contact bar (mirrors YCBM's footer line) ---- */
#wbib-booking-app .wbib-contact-bar{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--wbib-border);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 14px;
  font-size:13px;
  color:var(--wbib-body);
}
#wbib-booking-app .wbib-contact-bar .wbib-cb-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--wbib-link);
  text-decoration:none;
  font-weight:500;
  padding:4px 6px;
  border-radius:7px;
  transition:color .15s var(--wbib-ease), background .15s var(--wbib-ease);
}
#wbib-booking-app .wbib-contact-bar .wbib-cb-item:hover,
#wbib-booking-app .wbib-contact-bar .wbib-cb-item:focus-visible{
  color:var(--wbib-pink);
  background:var(--wbib-wash);
}
#wbib-booking-app .wbib-contact-bar .wbib-cb-ico{
  width:14px;
  height:14px;
  display:block;
  color:var(--wbib-pink);
}
#wbib-booking-app .wbib-contact-bar .wbib-cb-sep{
  color:var(--wbib-border);
  font-weight:400;
  user-select:none;
}

/* ====== responsive ====== */
/* merged pick step — collapse the two-column layout to one column
   (calendar on top, times below) on narrow viewports. Crucially the
   flow stays ONE step — there's no separate "pick a time" screen
   to fall back to. */
@media (max-width:639px){
  #wbib-booking-app .wbib-pick-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  /* override the intro-main scoped rule (specificity 0,3,0) so the
     pick-grid still collapses to a single column on phones */
  #wbib-booking-app .wbib-intro-main .wbib-pick-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
  #wbib-booking-app .wbib-pick-slot-list{
    max-height:none;
  }
}

/* Tablet — the card's max-width still applies, but the screen
   padding tightens so content has more horizontal room on a
   600-1023px window. */
@media (max-width:1023px){
  #wbib-booking-app .wbib-track-wrap{ padding:22px 28px 8px; }
  #wbib-booking-app .wbib-screen{ padding:32px 32px 30px; }
  #wbib-booking-app .wbib-q-title{ font-size:25px; }

  /* The 2-col sidebar+picker layout stacks: sidebar on top, picker
     below. On tablet the picker reclaims the wide-card width so the
     calendar's day cells stay finger-friendly. */
  #wbib-booking-app .wbib-intro-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  #wbib-booking-app .wbib-intro-side{
    padding:22px 22px 20px;
  }
  #wbib-booking-app .wbib-intro-side .wbib-intro-title{
    font-size:22px;
  }
  /* Once stacked, recentre the picker inside the now-full-width
     right column so it visually anchors to the card centre — matches
     the centred-picker behaviour the wide card has on every other
     step. */
  #wbib-booking-app .wbib-intro-main .wbib-pick-grid{
    max-width:880px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:430px){
  #wbib-booking-app{ padding:18px 11px 44px; }
  #wbib-booking-app .wbib-brand .wbib-wordmark{ font-size:27px; }
  #wbib-booking-app .wbib-track-wrap{ padding:18px 18px 6px; }
  #wbib-booking-app .wbib-screen{ padding:24px 20px 22px; }
  #wbib-booking-app .wbib-success-screen{ padding:30px 20px 26px; }
  #wbib-booking-app .wbib-q-title{ font-size:22px; }
  #wbib-booking-app .wbib-field-row{ flex-direction:column; gap:0; }
  #wbib-booking-app .wbib-slot-grid{ grid-template-columns:1fr 1fr; }
  #wbib-booking-app .wbib-cc-grid{ grid-template-columns:1fr; }
  #wbib-booking-app .wbib-nav{ gap:9px; }
  #wbib-booking-app .wbib-btn-primary,
  #wbib-booking-app .wbib-btn-danger{ padding:13px 16px; font-size:14.5px; }
  #wbib-booking-app .wbib-btn-back{ padding:13px 14px; }
  #wbib-booking-app .wbib-success-screen .wbib-s-title{ font-size:25px; }
  #wbib-booking-app .wbib-success-burst{ font-size:48px; }
  #wbib-booking-app .wbib-cal-grid{ gap:4px; }
  #wbib-booking-app .wbib-cal-day{ font-size:13.5px; }

  /* mobile sidebar tightens further */
  #wbib-booking-app .wbib-intro-layout{ gap:20px; }
  #wbib-booking-app .wbib-intro-side{
    padding:20px 18px 18px;
    border-radius:14px;
  }
  #wbib-booking-app .wbib-intro-side .wbib-intro-title{ font-size:20px; }
  #wbib-booking-app .wbib-intro-block-body p{ font-size:13px; }
  #wbib-booking-app .wbib-contact-bar{
    font-size:12.5px;
    gap:8px 10px;
  }
}

/* ====== reduced motion ====== */
@media (prefers-reduced-motion:reduce){
  #wbib-booking-app *,
  #wbib-booking-app *::before,
  #wbib-booking-app *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  #wbib-booking-app .wbib-mascot{ transition:left .001ms !important; }
  #wbib-booking-app .wbib-screen.wbib-slide-in-right,
  #wbib-booking-app .wbib-screen.wbib-slide-in-left{ animation:none !important; }
}

/* =========================================================
   CHANGE 291 — Force-login modal (identity unification)
   ---------------------------------------------------------
   The modal lives on document.body (NOT inside #wbib-booking-app)
   so it z-stacks above any host-page content. It reuses the
   wbib brand palette without leaning on the module's :root
   tokens (which are scoped to #wbib-booking-app), so the
   relevant colour values are baked in.
   ========================================================= */
.wbib-force-login-modal{
  position:fixed; inset:0;
  z-index:99999;
  display:none;
  align-items:center; justify-content:center;
  padding:24px 16px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
}
.wbib-force-login-modal.wbib-show{ display:flex; }
.wbib-force-login-modal .wbib-flm-backdrop{
  position:absolute; inset:0;
  background:rgba(46, 6, 50, 0.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  /* DELIBERATE: no click handler — spec requires modal stays open
     until the user picks Log in / Use a different email. */
}
.wbib-force-login-modal .wbib-flm-card{
  position:relative;
  width:100%; max-width:440px;
  background:#FFFFFF;
  border-radius:20px;
  padding:30px 28px 26px;
  box-shadow:0 24px 56px rgba(90,17,94,.28);
  text-align:center;
  outline:none;
  animation:wbib-flm-pop .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes wbib-flm-pop{
  from { opacity:0; transform:translateY(8px) scale(.97); }
  to   { opacity:1; transform:translateY(0)   scale(1); }
}
.wbib-force-login-modal .wbib-flm-icon{
  width:54px; height:54px;
  margin:0 auto 14px;
  border-radius:50%;
  background:#FDEDF5;
  color:#EB4E9B;
  display:flex; align-items:center; justify-content:center;
}
.wbib-force-login-modal .wbib-flm-icon svg{
  width:28px; height:28px;
}
.wbib-force-login-modal .wbib-flm-title{
  font-size:22px;
  font-weight:700;
  color:#5A115E;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.wbib-force-login-modal .wbib-flm-body{
  font-size:15px;
  line-height:1.5;
  color:#6B5570;
  margin:0 0 22px;
}
.wbib-force-login-modal .wbib-flm-body .wbib-flm-email{
  color:#5A115E;
  word-break:break-all;
}
.wbib-force-login-modal .wbib-flm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn{
  width:100%;
  padding:13px 18px;
  font-size:15px;
  font-weight:600;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn-primary{
  background:#EB4E9B;
  color:#FFFFFF;
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn-primary:hover{
  background:#E62584;
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn-primary:active{
  transform:translateY(1px);
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn-back{
  background:transparent;
  color:#701576;
  border:1px solid #F0D6E6;
}
.wbib-force-login-modal .wbib-flm-actions .wbib-btn-back:hover{
  background:#FDEDF5;
}

/* When the modal is open, block scroll on the host page so the
   customer can't sneak around it. */
body.wbib-flm-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .wbib-force-login-modal .wbib-flm-card{
    animation-duration:.001ms !important;
  }
}

/* ---------------- Change 299: slot panel stretches to calendar height ----------------
 * The base .wbib-pick-slot-list (line ~1124) is 
 * which works on a busy-day list of 12+ slots but caps it at a fixed 340px box even
 * when the calendar column is way taller. On the intro-booking-beta page the sidebar
 * is ~700px tall, the calendar is ~470px tall, but the slot panel was capped at
 * 340px — leaving ~150px dead space below the slot list and also creating the
 * appearance of asymmetric padding (calendar column visually taller than slot column).
 *
 * Fix: in the intro-main scope (where the YCBM-mirror layout lives), let the
 * pick-grid stretch its row heights, make the slot panel a flex column that fills
 * its grid cell, and let the slot list expand to fill the panel — scroll only if
 * it truly overflows the available height (almost never with a typical 8-12 slot
 * day). Cosmetic only, no markup change.
 */

#wbib-booking-app .wbib-intro-main .wbib-pick-grid {
  align-items: stretch;
  /* fill the stretched main column (which now = sidebar height) so the
     slots panel grows alongside the calendar */
  flex:1 1 auto;
}

/* Fixed: the actual class is .wbib-pick-slots, not .wbib-slots.
   Pre-existing rule never matched the DOM so the slots panel never
   stretched, leaving the left dark sidebar visually much taller than
   the right times panel. Equal-heights now active. */
#wbib-booking-app .wbib-intro-main .wbib-pick-grid > .wbib-pick-slots {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#wbib-booking-app .wbib-intro-main .wbib-pick-slot-list {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   Change 301 — Second-dog card + half-filled-warn (Deliverable A)
   ------------------------------------------------------------
   Two-card layout on Step 3 (the dog screen): the existing First Dog
   card gets a soft pink border + section heading, then a "+ Add a
   second dog" trigger that expands into a full mirror of the form.
   Mirrors the register-beta /register/ pattern visually (brand pink
   borders, section heads, Remove button at top-right). The
   wbib-dog2-warn rule is the styled half-filled notice (replaces
   register-beta's wbrbDog2Warn).
   ============================================================ */
#wbib-booking-app .wbib-dog-card{
  width:100%;
  max-width:560px;
  margin:0 auto 14px;
  padding:18px 18px 8px;
  border:1.5px solid var(--wbib-pink);
  border-radius:var(--wbib-r-card);
  background:var(--wbib-surface);
  box-shadow:var(--wbib-shadow-sm);
}
#wbib-booking-app .wbib-dog-card .wbib-dog-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:'Roboto', system-ui, sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--wbib-purple);
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:1px dashed var(--wbib-border);
}
#wbib-booking-app .wbib-dog-card-second[hidden]{
  display:none;
}
#wbib-booking-app .wbib-dog-card .wbib-field,
#wbib-booking-app .wbib-dog-card .wbib-field-row{
  margin-bottom:12px;
}
#wbib-booking-app .wbib-dog-card .wbib-field:last-of-type,
#wbib-booking-app .wbib-dog-card .wbib-field-row:last-of-type{
  margin-bottom:6px;
}

/* "+ Add a second dog" trigger — a dashed pink card you click. */
#wbib-booking-app .wbib-dog-add{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:560px;
  margin:0 auto 14px;
  padding:16px 18px;
  background:var(--wbib-wash);
  border:1.5px dashed var(--wbib-pink);
  border-radius:var(--wbib-r-card);
  color:var(--wbib-purple);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}
#wbib-booking-app .wbib-dog-add:hover{
  background:#FBDDEC;
  border-color:var(--wbib-pink-hover);
}
#wbib-booking-app .wbib-dog-add:active{
  transform:translateY(1px);
}
#wbib-booking-app .wbib-dog-add .wbib-dog-add-plus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--wbib-pink);
  color:#fff;
  font-size:24px;
  font-weight:300;
  line-height:1;
  flex:0 0 auto;
}
#wbib-booking-app .wbib-dog-add .wbib-dog-add-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
#wbib-booking-app .wbib-dog-add .wbib-dog-add-title{
  font-size:15px;
  font-weight:600;
  color:var(--wbib-purple);
}
#wbib-booking-app .wbib-dog-add .wbib-dog-add-sub{
  font-size:13px;
  color:var(--wbib-body);
}

/* "Remove second dog" button — ghost style with a danger tint. */
#wbib-booking-app .wbib-dog-remove{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1px solid var(--wbib-danger-soft);
  border-radius:999px;
  background:var(--wbib-danger-soft);
  color:var(--wbib-danger);
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
#wbib-booking-app .wbib-dog-remove:hover{
  background:#F8D2D8;
  border-color:#F0B3BC;
}
#wbib-booking-app .wbib-dog-remove svg{
  width:14px; height:14px;
  stroke-width:2;
}

/* Half-filled second-dog inline notice. */
#wbib-booking-app .wbib-dog2-warn{
  display:none;
  max-width:560px;
  margin:0 auto 14px;
  padding:12px 16px;
  background:var(--wbib-danger-soft);
  border:1px solid #F0B3BC;
  border-radius:var(--wbib-r-btn);
  color:var(--wbib-danger);
  font-size:14px;
  line-height:1.4;
}
#wbib-booking-app .wbib-dog2-warn.wbib-show{
  display:block;
}

/* Confirm-modal (styled replacement for native window.confirm —
   CLAUDE.md hard rule). Sister of the .wbib-force-login-modal above. */
.wbib-confirm-modal{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.wbib-confirm-modal.wbib-show{
  pointer-events:auto;
  opacity:1;
}
.wbib-confirm-modal .wbib-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(90,17,94,.45);
  backdrop-filter:blur(2px);
}
.wbib-confirm-modal .wbib-confirm-card{
  position:relative;
  z-index:2;
  background:var(--wbib-surface,#fff);
  border-radius:20px;
  box-shadow:0 24px 56px rgba(90,17,94,.30);
  max-width:380px;
  width:100%;
  padding:24px 24px 20px;
  font-family:'Roboto', system-ui, sans-serif;
  outline:none;
  transform:scale(.95);
  transition:transform .18s ease;
}
.wbib-confirm-modal.wbib-show .wbib-confirm-card{
  transform:scale(1);
}
.wbib-confirm-modal .wbib-confirm-title{
  font-size:18px;
  font-weight:700;
  color:#5A115E;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.wbib-confirm-modal .wbib-confirm-body{
  font-size:14px;
  line-height:1.5;
  color:#6B5570;
  margin:0 0 20px;
}
.wbib-confirm-modal .wbib-confirm-actions{
  display:flex;
  gap:8px;
}
.wbib-confirm-modal .wbib-confirm-actions .wbib-btn{
  flex:1 1 0;
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, color .15s ease, transform .12s ease;
}
.wbib-confirm-modal .wbib-confirm-ok{
  background:#EB4E9B;
  color:#fff;
}
.wbib-confirm-modal .wbib-confirm-ok:hover{
  background:#E62584;
}
.wbib-confirm-modal .wbib-confirm-ok-danger{
  background:#C8344A;
}
.wbib-confirm-modal .wbib-confirm-ok-danger:hover{
  background:#A8273A;
}
.wbib-confirm-modal .wbib-confirm-cancel{
  background:transparent;
  color:#701576;
  border:1px solid #F0D6E6;
}
.wbib-confirm-modal .wbib-confirm-cancel:hover{
  background:#FDEDF5;
}
@media (prefers-reduced-motion:reduce){
  .wbib-confirm-modal,
  .wbib-confirm-modal .wbib-confirm-card{
    transition:none;
  }
}

/* ============================================================
   Change 301 — Profile-overwrite warning (Deliverable B)
   ------------------------------------------------------------
   • A small ✎ "updating profile" PILL appended to a field label
     when its current value differs from the prefill snapshot.
   • A non-dismissible banner at the top of the visible step
     listing which fields are being changed.
   • Both styled with the brand palette (pink + purple) so they
     read as helpful, not alarming.
   ============================================================ */
#wbib-booking-app .wbib-pill-edit{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 8px;
  background:var(--wbib-wash);
  color:var(--wbib-pink-hover);
  border:1px solid var(--wbib-soft);
  border-radius:999px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:lowercase;
  vertical-align:middle;
  line-height:1.4;
  /* Soft scale-in so a freshly-marked field gets noticed. */
  animation:wbib-pill-in .25s var(--wbib-ease);
}
#wbib-booking-app .wbib-pill-edit .wbib-pill-mark{
  font-size:12px;
  line-height:1;
  color:var(--wbib-pink);
  font-weight:700;
}
#wbib-booking-app .wbib-pill-edit .wbib-pill-text{
  font-family:inherit;
}
@keyframes wbib-pill-in{
  from{ transform:scale(.8); opacity:0; }
  to  { transform:scale(1);   opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  #wbib-booking-app .wbib-pill-edit{ animation:none; }
}

#wbib-booking-app .wbib-profile-warn{
  display:none;
  align-items:flex-start;
  gap:12px;
  max-width:560px;
  margin:0 auto 18px;
  padding:14px 16px;
  background:linear-gradient(135deg, #FFF5FB 0%, #FDEDF5 100%);
  border:1.5px solid var(--wbib-soft);
  border-left:4px solid var(--wbib-pink);
  border-radius:var(--wbib-r-card);
  box-shadow:var(--wbib-shadow-sm);
  font-family:'Roboto', system-ui, sans-serif;
}
#wbib-booking-app .wbib-profile-warn.wbib-show{
  display:flex;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-bulb{
  font-size:22px;
  line-height:1;
  flex:0 0 auto;
  margin-top:1px;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-body{
  flex:1 1 auto;
  min-width:0;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-title{
  font-size:14.5px;
  font-weight:700;
  color:var(--wbib-purple);
  margin:0 0 4px;
  letter-spacing:-.005em;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-text{
  font-size:13px;
  line-height:1.45;
  color:var(--wbib-body);
  margin:0 0 8px;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-text .wbib-pill-inline{
  display:inline-block;
  padding:1px 6px;
  background:var(--wbib-surface);
  border:1px solid var(--wbib-soft);
  border-radius:999px;
  color:var(--wbib-pink-hover);
  font-size:11px;
  font-weight:700;
  vertical-align:middle;
}
#wbib-booking-app .wbib-profile-warn .wbib-profile-warn-list{
  font-size:12.5px;
  font-weight:600;
  color:var(--wbib-purple);
  background:rgba(255,255,255,.55);
  border-radius:8px;
  padding:6px 10px;
  display:inline-block;
}

/* ============================================================
   Change 307 — Inline "Welcome back!" login panel
   ------------------------------------------------------------
   Replaces the Change-296 full-screen .wbib-force-login-modal as
   the UX for an existing-customer email lookup. Inline below the
   email field, brand-pink card with 👋 icon, password input, "Sign
   in" button, and a "Forgot password?" link. NO "continue without
   signing in" bypass (per the owner's force-sign-in directive).
   Mirrors the register-beta .wbrb-login-panel pattern exactly so
   the visual is familiar to anyone who's used the registration form.

   The OLDER .wbib-force-login-modal rules above (around L1483) are
   left in place but unused — no JS now adds that class to the DOM.
   ============================================================ */
#wbib-booking-app .wbib-login-panel{
  background:linear-gradient(135deg, rgba(235,78,155,.10) 0%, rgba(157,0,255,.06) 100%);
  border:1.6px solid var(--wbib-pink);
  border-radius:14px;
  padding:18px 20px;
  margin:14px 0 18px;
  animation:wbib-login-fade .35s var(--wbib-ease) both;
  box-sizing:border-box;
}
@keyframes wbib-login-fade{
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
#wbib-booking-app .wbib-login-head{
  display:flex; gap:12px; align-items:flex-start;
}
#wbib-booking-app .wbib-login-icon{
  font-size:30px; line-height:1; flex-shrink:0;
}
#wbib-booking-app .wbib-login-title{
  font-weight:700;
  color:var(--wbib-purple);
  font-size:15.5px;
  line-height:1.25;
}
#wbib-booking-app .wbib-login-sub{
  font-size:13px;
  color:var(--wbib-body);
  margin-top:4px;
  line-height:1.5;
}
#wbib-booking-app .wbib-login-sub strong{
  color:var(--wbib-purple);
  word-break:break-all;
}
#wbib-booking-app .wbib-login-row{
  display:flex; gap:10px; margin-top:14px;
}
#wbib-booking-app .wbib-login-input{
  flex:1;
  padding:12px 14px;
  font-size:15px;
  font-family:inherit;
  border:2px solid var(--wbib-pink);
  border-radius:var(--wbib-r-input);
  background:#fff;
  color:var(--wbib-purple);
  box-sizing:border-box;
  transition:border-color .2s var(--wbib-ease), box-shadow .25s var(--wbib-ease);
}
#wbib-booking-app .wbib-login-input:focus{
  outline:none;
  border-color:var(--wbib-link);
  box-shadow:0 0 0 4px rgba(112,21,118,.12);
}
#wbib-booking-app .wbib-login-btn{
  padding:12px 22px;
  font-weight:700;
  font-size:14px;
  background:var(--wbib-pink);
  color:#fff;
  border:0;
  border-radius:var(--wbib-r-input);
  cursor:pointer;
  font-family:inherit;
  transition:background-color .15s var(--wbib-ease), transform .12s var(--wbib-ease);
  flex-shrink:0;
}
#wbib-booking-app .wbib-login-btn:hover{ background:var(--wbib-pink-hover); }
#wbib-booking-app .wbib-login-btn:active{ transform:scale(.98); }
#wbib-booking-app .wbib-login-btn[disabled]{ opacity:.55; cursor:wait; }
#wbib-booking-app .wbib-login-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:11px;
  font-size:12px;
  flex-wrap:wrap;
}
#wbib-booking-app .wbib-login-forgot{
  color:var(--wbib-pink);
  text-decoration:underline;
  align-self:center;
}
#wbib-booking-app .wbib-login-forgot:hover{ color:var(--wbib-pink-hover); }
#wbib-booking-app .wbib-login-hint{
  color:var(--wbib-body);
  font-size:12px;
  line-height:1.4;
}
#wbib-booking-app .wbib-login-err{
  margin-top:11px;
  padding:9px 12px;
  background:var(--wbib-danger-soft);
  border-left:3px solid var(--wbib-danger);
  color:var(--wbib-danger);
  font-size:13px;
  border-radius:6px;
}
#wbib-booking-app .wbib-login-ok{
  margin-top:11px;
  padding:9px 12px;
  background:var(--wbib-green-soft);
  border-left:3px solid var(--wbib-green);
  color:var(--wbib-green);
  font-size:13px;
  border-radius:6px;
}
#wbib-booking-app .wbib-login-busy .wbib-login-input{ opacity:.7; }

@media (max-width: 520px){
  #wbib-booking-app .wbib-login-row{ flex-direction:column; }
  #wbib-booking-app .wbib-login-btn{ width:100%; }
  #wbib-booking-app .wbib-login-actions{ flex-direction:column; align-items:flex-start; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  #wbib-booking-app .wbib-login-panel{ animation-duration:.001ms !important; }
}


/* ---------------- Change 314: branded success/confirmation screen + register CTA ---------------- */

/* Big green check ring (YCBM-style) — replaces the burst emoji */
#wbib-booking-app .wbib-success-check {
  display: flex;
  justify-content: center;
  margin: 8px 0 18px;
}
#wbib-booking-app .wbib-success-check-svg {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 4px 18px rgba(21, 196, 111, 0.35));
}

/* Clean centered slot-summary card (YCBM-style: big date, big time-range, three meta rows) */
#wbib-booking-app .wbib-confirm-slot-card {
  background: var(--wbib-wash);
  border: 1px solid var(--wbib-border);
  border-radius: 14px;
  padding: 22px 24px 20px;
  margin: 0 auto 22px;
  max-width: 460px;
  text-align: center;
}
#wbib-booking-app .wbib-cs-date {
  font-size: 14px;
  color: #6a5a76;
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
#wbib-booking-app .wbib-cs-time {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--wbib-purple);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
#wbib-booking-app .wbib-cs-meta {
  border-top: 1px solid var(--wbib-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
#wbib-booking-app .wbib-cs-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #4a3a55;
  line-height: 1.4;
}
#wbib-booking-app .wbib-cs-meta-row .wbib-cs-icon {
  flex: 0 0 22px;
  width: 22px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--wbib-pink);
}

/* Want a head start? — register CTA box */
#wbib-booking-app .wbib-success-cta {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--wbib-purple) 0%, #480E4C 100%);
  color: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  margin: 24px auto 18px;
  max-width: 540px;
}
#wbib-booking-app .wbib-cta-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wbib-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
#wbib-booking-app .wbib-cta-body {
  flex: 1 1 auto;
  min-width: 0;
}
#wbib-booking-app .wbib-cta-title {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}
#wbib-booking-app .wbib-cta-text {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.88);
}
#wbib-booking-app .wbib-cta-btn {
  display: inline-block;
  background: var(--wbib-pink);
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  transition: transform .15s ease, box-shadow .2s ease;
}
#wbib-booking-app .wbib-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 0, 149, 0.35);
  color: #fff;
}
@media (max-width: 520px) {
  #wbib-booking-app .wbib-success-cta {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  #wbib-booking-app .wbib-cta-body { text-align: center; }
}

/* ============================================================
   Change 326 — per-type colour layer on the time-list
   ------------------------------------------------------------
   - .wbib-slot-legend  → horizontal row of "● TYPE NAME" chips
     above the time list. Auto-hidden when only one type is
     enabled (JS sets display:none); stacks vertically on mobile.
   - .wbib-slot-btn.wbib-slot-single
     → a 4px coloured strip down the left edge using the slot's
     single type colour (via the --wbib-stype-color custom prop
     set inline). Text stays brand-navy on the pink wash.
   - .wbib-slot-btn.wbib-slot-multi
     → a 4px split strip (gradient at the midpoint) plus a row of
     coloured pills under the time so the type name is never
     colour-only (accessibility for colour-blind users).
   - .wbib-type-picker-modal → sister of .wbib-confirm-modal
     for the multi-type disambiguation. CLAUDE.md hard rule:
     NEVER native confirm/prompt — this is the styled replacement.
   ============================================================ */

#wbib-booking-app .wbib-slot-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  margin:-2px 0 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--wbib-body);
}
#wbib-booking-app .wbib-slot-legend .wbib-lg-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  line-height:1.2;
}
/* Owner ask: "make the sample colour bigger so its easier to notice" —
   bumped the dot to a 16px pill with a soft 2-pixel surrounding ring so
   the swatch reads as a deliberate sample, not a tiny bullet. */
#wbib-booking-app .wbib-slot-legend .wbib-lg-chip-dot{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  flex:0 0 16px;
  box-shadow:0 0 0 2px rgba(255,255,255,.85),
             0 0 0 3px rgba(42,10,61,.12);
}

/* Owner ask: "make the whole time pill the colour" — the prior 4px
   left-strip wasn't visually loud enough. Fill the WHOLE button with
   the type colour, white text on top, and override the generic
   .wbib-selected pink-fill so a TOUR & TRIAL slot doesn't lose its
   purple identity when picked.

   Single-type pill   → full background = that type's colour
   Multi-type pill    → split background = top-half type-A + bottom-half type-B
   Selected (either)  → keep the type colour, add a white inset ring
                        + soft outer glow so the selection is unmistakable
                        without throwing away the colour-coding. */

#wbib-booking-app .wbib-slot-btn.wbib-slot-typed{
  position:relative;
  /* no extra left-padding — full-fill no longer needs the strip inset */
}

#wbib-booking-app .wbib-slot-btn.wbib-slot-single{
  background:var(--wbib-stype-color, var(--wbib-pink));
  border-color:var(--wbib-stype-color, var(--wbib-pink));
}
#wbib-booking-app .wbib-slot-btn.wbib-slot-multi{
  background:linear-gradient(
    to bottom,
    var(--wbib-stype-a, var(--wbib-pink)) 0%,
    var(--wbib-stype-a, var(--wbib-pink)) 50%,
    var(--wbib-stype-b, var(--wbib-purple)) 50%,
    var(--wbib-stype-b, var(--wbib-purple)) 100%
  );
  border-color:var(--wbib-stype-a, var(--wbib-pink));
}

/* white text on the coloured pill */
#wbib-booking-app .wbib-slot-btn.wbib-slot-typed .wbib-slot-time{
  color:#ffffff;
}
#wbib-booking-app .wbib-slot-btn.wbib-slot-typed .wbib-slot-left{
  color:rgba(255,255,255,.88);
}

/* hover: slight darken (filter) + lift — works on either colour */
#wbib-booking-app .wbib-slot-btn.wbib-slot-typed:hover{
  filter:brightness(.92);
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.55);
}

/* SELECTED — keep the type colour (don't snap-pink for purple slots),
   add a white inset ring + soft glow as the "you picked me" cue. */
#wbib-booking-app .wbib-slot-btn.wbib-slot-typed.wbib-selected{
  background:var(--wbib-stype-color, var(--wbib-pink));
  border-color:#ffffff;
  box-shadow:0 0 0 3px var(--wbib-stype-color, var(--wbib-pink)),
             0 10px 22px rgba(42,10,61,.25);
}
#wbib-booking-app .wbib-slot-btn.wbib-slot-multi.wbib-selected{
  /* preserve the split-fill on selected too */
  background:linear-gradient(
    to bottom,
    var(--wbib-stype-a, var(--wbib-pink)) 0%,
    var(--wbib-stype-a, var(--wbib-pink)) 50%,
    var(--wbib-stype-b, var(--wbib-purple)) 50%,
    var(--wbib-stype-b, var(--wbib-purple)) 100%
  );
  box-shadow:0 0 0 3px var(--wbib-stype-a, var(--wbib-pink)),
             0 10px 22px rgba(42,10,61,.25);
}

/* tag pills for multi-type slots (colour-blind backup for the strip) */
#wbib-booking-app .wbib-slot-btn .wbib-slot-tags{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  margin-left:10px;
  vertical-align:middle;
}
#wbib-booking-app .wbib-slot-btn .wbib-slot-tag{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:999px;
  line-height:1.2;
  white-space:nowrap;
}
#wbib-booking-app .wbib-slot-btn.wbib-selected .wbib-slot-tag{
  /* selected slot background goes pink — drop the pill's per-type colour
     and use a translucent white chip so they're legible on the pink wash. */
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* mobile: stack the legend vertically + tighten the slot-btn padding */
@media (max-width: 520px){
  #wbib-booking-app .wbib-slot-legend{
    flex-direction:column;
    align-items:flex-start;
    gap:6px 0;
  }
}

/* ----- type-picker modal — sister of wbib-confirm-modal ----- */
.wbib-type-picker-modal{
  position:fixed;
  inset:0;
  z-index:10002;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.wbib-type-picker-modal.wbib-show{
  pointer-events:auto;
  opacity:1;
}
.wbib-type-picker-modal .wbib-confirm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(90,17,94,.45);
  backdrop-filter:blur(2px);
}
.wbib-type-picker-modal .wbib-type-picker-card{
  position:relative;
  z-index:2;
  background:var(--wbib-surface,#fff);
  border-radius:20px;
  box-shadow:0 24px 56px rgba(90,17,94,.30);
  max-width:420px;
  width:100%;
  padding:24px 24px 20px;
  font-family:'Roboto', system-ui, sans-serif;
  outline:none;
  transform:scale(.95);
  transition:transform .18s ease;
}
.wbib-type-picker-modal.wbib-show .wbib-type-picker-card{
  transform:scale(1);
}
.wbib-type-picker-modal .wbib-confirm-title{
  font-size:18px;
  font-weight:700;
  color:#5A115E;
  margin:0 0 6px;
  letter-spacing:-.01em;
}
.wbib-type-picker-modal .wbib-confirm-body{
  font-size:13px;
  line-height:1.5;
  color:#6B5570;
  margin:0 0 16px;
}
.wbib-type-picker-modal .wbib-type-picker-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.wbib-type-picker-modal .wbib-type-pick-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border:none;
  border-radius:12px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  text-align:left;
  transition:transform .12s ease, box-shadow .18s ease, opacity .18s ease;
  box-shadow:0 4px 14px rgba(90,17,94,.18);
}
.wbib-type-picker-modal .wbib-type-pick-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(90,17,94,.28);
}
.wbib-type-picker-modal .wbib-type-pick-btn:active{
  transform:translateY(0);
}
.wbib-type-picker-modal .wbib-type-pick-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  flex:0 0 10px;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
}
.wbib-type-picker-modal .wbib-type-pick-name{
  flex:1 1 auto;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.04em;
}
.wbib-type-picker-modal .wbib-type-picker-actions .wbib-btn{
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  border-radius:12px;
  border:1px solid #F0D6E6;
  background:transparent;
  color:#701576;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s ease, color .15s ease;
}
.wbib-type-picker-modal .wbib-type-picker-actions .wbib-btn:hover{
  background:#FDEDF5;
}
@media (prefers-reduced-motion:reduce){
  .wbib-type-picker-modal,
  .wbib-type-picker-modal .wbib-type-picker-card,
  .wbib-type-picker-modal .wbib-type-pick-btn{
    transition:none;
  }
}

/* ============================================================
   Change 328 — legend "?" tooltip button + anchored popover
   ------------------------------------------------------------
   Tiny circular question-mark button rendered after each
   legend chip whose appointment type has a description set in
   admin. Click toggles a styled popover anchored beneath the
   button containing the description text. Outside-click /
   Escape / second click dismiss. NO native dialogs — owner
   global rule (CLAUDE.md).
   ============================================================ */

#wbib-booking-app .wbib-slot-legend .wbib-lg-chip{
  position:relative; /* anchor reference */
  white-space:nowrap;
  flex:0 0 auto;
}
/* Owner: "the tooltip is wrapping and looks shitty" — the "TOUR & TRIAL
   ASSESSMENT" chip was too wide for the slot panel, so the ? button
   reflowed under the text. Stack chips vertically so each one gets its
   own row and the dot + name + ? always stay aligned on one line. */
#wbib-booking-app .wbib-slot-legend{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
/* Owner: "get rid of the whole header thing — the page already has a
   title". Hide the in-module Soulmutts brand + tagline header. The
   actual Bricks page on /join-our-dog-pack/ already owns the title. */
#wbib-booking-app .wbib-brand{
  display:none !important;
}
#wbib-booking-app .wbib-lg-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  margin-left:6px;
  padding:0;
  border-radius:50%;
  border:1.5px solid var(--wbib-purple, #5A115E);
  background:#fff;
  color:var(--wbib-purple, #5A115E);
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  vertical-align:middle;
  -webkit-appearance:none;
  appearance:none;
}
#wbib-booking-app .wbib-lg-tip:hover,
#wbib-booking-app .wbib-lg-tip:focus-visible,
#wbib-booking-app .wbib-lg-tip[aria-expanded="true"]{
  background:var(--wbib-pink, #EB4E9B);
  border-color:var(--wbib-pink, #EB4E9B);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}

/* the popover lives on <body> so it can escape any clipping/overflow
   on the slot-list scroll container; positioned in JS via top/left
   (page coords). High z-index so it sits above slot buttons & modals
   that aren't fullscreen overlays. */
.wbib-lg-tip-pop{
  position:absolute;
  z-index:10005;
  width:260px;
  max-width:calc(100vw - 16px);
  background:#fff;
  border:2px solid var(--wbib-purple, #5A115E);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(42,10,61,.18),
             0 2px 6px rgba(42,10,61,.10);
  padding:14px 16px;
  font-family:inherit;
  font-size:13px;
  line-height:1.45;
  color:#2A0A3D;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:auto;
}
.wbib-lg-tip-pop.wbib-show{
  opacity:1;
  transform:translateY(0);
}
.wbib-lg-tip-pop .wbib-lg-tip-body{
  white-space:pre-line;
}
.wbib-lg-tip-pop .wbib-lg-tip-arrow{
  position:absolute;
  top:-8px;
  left:20px;
  width:14px;
  height:14px;
  transform:translateX(-7px) rotate(45deg);
  background:#fff;
  border-left:2px solid var(--wbib-purple, #5A115E);
  border-top:2px solid var(--wbib-purple, #5A115E);
  border-top-left-radius:3px;
}
@media (prefers-reduced-motion:reduce){
  .wbib-lg-tip-pop,
  #wbib-booking-app .wbib-lg-tip{
    transition:none;
  }
}