/* =============================================================================
 *  register-beta.css  —  the production "register-beta" form styling.
 *
 *  The Direction-B "Guided" design language, adapted from the approved
 *  prototype  audit/register-redesign/register-beta.html.  Every rule is
 *  SCOPED under  #wbrb-wrap  (or a .wbrb-* class that only this form emits)
 *  so it cannot leak into the surrounding WordPress theme. Class names match
 *  the .wbrb-* contract shared with class-weptile-booking-register-beta.php
 *  and register-beta.js.
 * ===========================================================================*/

/* the form's design tokens — scoped to the wrapper */
#wbrb-wrap{
  --wbrb-pink:        #EB4E9B;
  --wbrb-pink-hover:  #E62584;
  --wbrb-brand-pink:  #FF0095;
  --wbrb-purple:      #5A115E;
  --wbrb-body:        #6B5570;
  --wbrb-link:        #701576;
  --wbrb-soft:        #F9CAE1;
  --wbrb-wash:        #FDEDF5;
  --wbrb-border:      #F0D6E6;
  --wbrb-surface:     #FFFFFF;
  --wbrb-green:       #2E9E4F;
  --wbrb-green-soft:  #E4F4E9;
  --wbrb-green-bd:    #B6E2C2;
  --wbrb-r-card:      20px;
  --wbrb-r-btn:       12px;
  --wbrb-r-input:     10px;
  --wbrb-shadow:      0 12px 32px rgba(90,17,94,.10);
  --wbrb-shadow-sm:   0 4px 14px rgba(90,17,94,.08);
  --wbrb-ease:        cubic-bezier(.22,.61,.36,1);

  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbrb-body);
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  padding:20px 12px 40px;
  box-sizing:border-box;
}

/* Fonts: NO Google Fonts here — the site theme already loads Roboto
   site-wide. The entire form (headings + body + inputs + buttons) uses
   the 'Roboto', system-ui, -apple-system stack. No @import, no cursive. */

#wbrb-wrap *,#wbrb-wrap *::before,#wbrb-wrap *::after{ box-sizing:border-box; }
#wbrb-wrap button{ font-family:'Roboto', system-ui, -apple-system, sans-serif; }
/* Change 253: with the new semantic heading hierarchy (.wbrb-wordmark =
   <h1>, .wbrb-q-title = <h2>, .wbrb-section-head + .wbrb-dogs-heading =
   <h3>, .wbrb-tagline = <p>, plus the existing <p class="wbrb-q-sub">
   and <p class="wbrb-field-desc">), zero the browser default margins on
   these elements inside the wrap. The per-class rules later in this file
   carry the same (0,1,1,0) specificity and come after these in the
   source, so they correctly override where margin IS wanted (q-sub's
   bottom-22, section-head's 26/14, tagline's top-3, etc.). */
#wbrb-wrap h1,
#wbrb-wrap h2,
#wbrb-wrap h3,
#wbrb-wrap h4,
#wbrb-wrap p{
  margin:0;
}

/* ====== BETA badge ====== */
#wbrb-wrap .wbrb-beta-badge{
  align-self:flex-end;
  background:var(--wbrb-purple);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 13px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(90,17,94,.30);
  display:flex; align-items:center; gap:6px;
  user-select:none;
  margin-bottom:6px;
}
#wbrb-wrap .wbrb-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--wbrb-pink);
  box-shadow:0 0 0 0 rgba(235,78,155,.6);
  animation:wbrb-pulse 2.4s infinite;
}
@keyframes wbrb-pulse{
  0%{ box-shadow:0 0 0 0 rgba(235,78,155,.55); }
  70%{ box-shadow:0 0 0 9px rgba(235,78,155,0); }
  100%{ box-shadow:0 0 0 0 rgba(235,78,155,0); }
}

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

/* ====== Card shell ====== */
#wbrb-wrap .wbrb-card{
  width:100%;
  max-width:620px;
  background:var(--wbrb-surface);
  border-radius:var(--wbrb-r-card);
  box-shadow:var(--wbrb-shadow);
  overflow:hidden;
  position:relative;
}

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

#wbrb-wrap .wbrb-track{
  position:relative;
  height:46px;
  margin:0 6px 4px;
}
#wbrb-wrap .wbrb-rail{
  position:absolute;
  left:0; right:0;
  bottom:9px;
  height:8px;
  border-radius:999px;
  background:var(--wbrb-soft);
  overflow:hidden;
}
#wbrb-wrap .wbrb-rail-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#F488BE, var(--wbrb-pink));
  transition:width .42s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-dots{
  position:absolute;
  left:0; right:0;
  bottom:5px;
  display:flex;
  justify-content:space-between;
}
#wbrb-wrap .wbrb-dot-node{
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--wbrb-soft);
  transition:border-color .35s var(--wbrb-ease), background .35s var(--wbrb-ease), transform .35s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-dot-node.done{
  border-color:var(--wbrb-pink);
  background:var(--wbrb-pink);
}
#wbrb-wrap .wbrb-dot-node.current{
  border-color:var(--wbrb-pink);
  background:#fff;
  transform:scale(1.18);
}
#wbrb-wrap .wbrb-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(--wbrb-ease);
}
#wbrb-wrap .wbrb-track.at-goal .wbrb-goal{
  transform:scale(1.25) translateY(-2px);
}

/* the mascot */
#wbrb-wrap .wbrb-mascot{
  position:absolute;
  bottom:8px;
  left:0;
  width:46px;
  height:42px;
  transition:left .55s var(--wbrb-ease);
  z-index:2;
}
#wbrb-wrap .wbrb-mascot-svg{
  width:100%;
  height:100%;
  transform-origin:bottom center;
}
#wbrb-wrap .wbrb-mascot.walking .wbrb-mascot-svg{
  animation:wbrb-hop .55s var(--wbrb-ease);
}
@keyframes wbrb-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); }
}
#wbrb-wrap .wbrb-tail{
  transform-origin:14px 30px;
  animation:wbrb-wag 1.1s ease-in-out infinite;
}
@keyframes wbrb-wag{
  0%,100%{ transform:rotate(-12deg); }
  50%    { transform:rotate(20deg); }
}
#wbrb-wrap .wbrb-speech{
  position:absolute;
  bottom:44px;
  left:50%;
  transform:translateX(-50%) scale(.6);
  opacity:0;
  background:var(--wbrb-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(--wbrb-ease), transform .3s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-speech::after{
  content:"";
  position:absolute;
  bottom:-4px; left:50%;
  transform:translateX(-50%);
  border:4px solid transparent;
  border-top-color:var(--wbrb-purple);
  border-bottom:0;
}
#wbrb-wrap .wbrb-mascot.cheer .wbrb-speech{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* ====== Screens ====== */
#wbrb-wrap .wbrb-stage{
  position:relative;
  overflow:hidden;
}
#wbrb-wrap .wbrb-screen{
  display:none;
  padding:30px 30px 28px;
}
#wbrb-wrap .wbrb-screen.wbrb-active{
  display:block;
}
#wbrb-wrap .wbrb-screen.wbrb-slide-in-right{ animation:wbrb-slideInRight .32s var(--wbrb-ease) both; }
#wbrb-wrap .wbrb-screen.wbrb-slide-in-left { animation:wbrb-slideInLeft  .32s var(--wbrb-ease) both; }
@keyframes wbrb-slideInRight{
  from{ opacity:0; transform:translateX(34px); }
  to  { opacity:1; transform:translateX(0); }
}
@keyframes wbrb-slideInLeft{
  from{ opacity:0; transform:translateX(-34px); }
  to  { opacity:1; transform:translateX(0); }
}

/* ---- conversational heading ---- */
#wbrb-wrap .wbrb-q-kicker{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wbrb-pink);
  margin-bottom:8px;
}
#wbrb-wrap .wbrb-q-title{
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:30px;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:var(--wbrb-purple);
  margin-bottom:8px;
}
#wbrb-wrap .wbrb-q-sub{
  font-size:14.5px;
  line-height:1.55;
  color:var(--wbrb-body);
  margin-bottom:22px;
}

/* ---- embedded rich-text description / explainers ---- */
#wbrb-wrap .wbrb-richtext{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  padding:18px 20px;
  margin-bottom:22px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--wbrb-body);
}
#wbrb-wrap .wbrb-richtext p{ margin:0 0 9px; }
#wbrb-wrap .wbrb-richtext p:last-child{ margin-bottom:0; }
#wbrb-wrap .wbrb-richtext ol,#wbrb-wrap .wbrb-richtext ul{ margin:4px 0 11px 20px; }
#wbrb-wrap .wbrb-richtext li{ margin-bottom:3px; }
#wbrb-wrap .wbrb-richtext strong{ color:var(--wbrb-purple); }
#wbrb-wrap .wbrb-richtext a{ color:var(--wbrb-link); font-weight:500; }
#wbrb-wrap .wbrb-richtext span[style*="underline"]{ text-decoration:underline; }

/* ---- section sub-heading inside a step ---- */
#wbrb-wrap .wbrb-section-head{
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:21px;
  letter-spacing:-0.01em;
  color:var(--wbrb-purple);
  margin:26px 0 14px;
  padding-bottom:7px;
  border-bottom:2px solid var(--wbrb-border);
}
#wbrb-wrap .wbrb-section-head:first-of-type{ margin-top:4px; }
#wbrb-wrap .wbrb-section-spacer{ height:8px; }

/* ---- fields ---- */
#wbrb-wrap .wbrb-field{
  margin-bottom:16px;
  position:relative;
}
/* an actual <input>/<select> inside a .wbrb-field wrapper carries the class
   too — reset the wrapper-only spacing on the control itself */
#wbrb-wrap input.wbrb-field,
#wbrb-wrap select.wbrb-field{
  margin-bottom:0;
}
#wbrb-wrap .wbrb-field > label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--wbrb-purple);
  margin-bottom:6px;
}
#wbrb-wrap .wbrb-req{ color:var(--wbrb-brand-pink); font-weight:700; }
#wbrb-wrap .wbrb-optional{
  color:var(--wbrb-body); font-weight:400; font-size:11.5px;
  letter-spacing:.02em;
}
#wbrb-wrap .wbrb-field-desc{
  font-size:12px;
  line-height:1.5;
  color:var(--wbrb-body);
  margin:6px 0 0;
  font-style:italic;
}
#wbrb-wrap input.wbrb-field[type=text],
#wbrb-wrap input.wbrb-field[type=email],
#wbrb-wrap input.wbrb-field[type=tel],
#wbrb-wrap input.wbrb-field[type=date],
#wbrb-wrap input.wbrb-field[type=number],
#wbrb-wrap select.wbrb-field{
  width:100%;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--wbrb-purple);
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  border-radius:var(--wbrb-r-input);
  padding:13px 40px 13px 14px;
  transition:border-color .25s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease), background .25s var(--wbrb-ease);
  -webkit-appearance:none;
  appearance:none;
}
#wbrb-wrap input.wbrb-field::placeholder{ color:#C9AFC2; }
#wbrb-wrap input.wbrb-field:focus,
#wbrb-wrap select.wbrb-field:focus{
  outline:none;
  border-color:var(--wbrb-pink);
  box-shadow:0 0 0 4px rgba(235,78,155,.13);
}
#wbrb-wrap select.wbrb-field{
  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;
}
#wbrb-wrap .wbrb-field-row{
  display:flex;
  gap:12px;
}
#wbrb-wrap .wbrb-field-row .wbrb-field{
  flex:1;
  margin-bottom:16px;
}

/* validation tick */
#wbrb-wrap .wbrb-tick{
  position:absolute;
  right:13px;
  top:33px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--wbrb-green);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.3);
  transition:opacity .25s var(--wbrb-ease), transform .3s var(--wbrb-ease);
  pointer-events:none;
}
#wbrb-wrap .wbrb-field.wbrb-valid > .wbrb-tick{
  opacity:1;
  transform:scale(1);
}
#wbrb-wrap .wbrb-tick svg{ width:12px; height:12px; }
#wbrb-wrap .wbrb-field.wbrb-valid input.wbrb-field,
#wbrb-wrap .wbrb-field.wbrb-valid select.wbrb-field{
  border-color:var(--wbrb-green-bd);
}
#wbrb-wrap .wbrb-field.wbrb-invalid input.wbrb-field,
#wbrb-wrap .wbrb-field.wbrb-invalid select.wbrb-field,
#wbrb-wrap input.wbrb-field.wbrb-invalid-field,
#wbrb-wrap select.wbrb-field.wbrb-invalid-field{
  border-color:#E98C8C;
}
#wbrb-wrap .wbrb-field-error{
  display:none;
  font-size:11.5px;
  font-weight:500;
  color:#C0392B;
  margin-top:5px;
}
#wbrb-wrap .wbrb-field.wbrb-invalid > .wbrb-field-error{ display:block; }

/* ---- locked / gated fields (email-gate + address autocomplete) ---- */
#wbrb-wrap .wbrb-field input.wbrb-field:disabled,
#wbrb-wrap .wbrb-field select.wbrb-field:disabled{
  opacity:.5;
  background:var(--wbrb-wash);
  cursor:not-allowed;
}
#wbrb-wrap .wbrb-field.wbrb-addr-locked input.wbrb-field,
#wbrb-wrap input.wbrb-field.wbrb-addr-locked{
  background:var(--wbrb-green-soft);
  border-color:var(--wbrb-green-bd);
  cursor:not-allowed;
  opacity:.92;
}

/* ---- gate notice ---- */
#wbrb-wrap .wbrb-gate-note{
  display:none;
  align-items:flex-start;
  gap:8px;
  background:rgba(255,0,149,.08);
  border:1.5px solid #F4A8D2;
  border-radius:10px;
  padding:10px 13px;
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.5;
  font-weight:500;
  color:var(--wbrb-link);
}
#wbrb-wrap .wbrb-gate-note.wbrb-show{ display:flex; }
#wbrb-wrap .wbrb-gn-icon{ flex-shrink:0; }

/* ---- save-progress banner ---- */
#wbrb-wrap .wbrb-save-note{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  background:var(--wbrb-wash);
  border:1.5px solid var(--wbrb-border);
  border-radius:12px;
  padding:13px 16px;
  margin-bottom:22px;
  color:var(--wbrb-body);
  font-size:13px;
  line-height:1.55;
}
#wbrb-wrap .wbrb-sn-body{ width:100%; }
#wbrb-wrap .wbrb-save-note strong{ color:var(--wbrb-purple); }
#wbrb-wrap .wbrb-save-note em{ color:var(--wbrb-link); }
#wbrb-wrap .wbrb-clear-draft{
  align-self:flex-start;
  padding:8px 13px;
  font:600 12.5px/1.2 'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbrb-pink);
  background:#fff;
  border:1px solid var(--wbrb-pink);
  border-radius:8px;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
#wbrb-wrap .wbrb-clear-draft:hover{ background:var(--wbrb-pink); border-color:var(--wbrb-pink); color:#fff; }

/* ---- address autocomplete ---- */
#wbrb-wrap .wbrb-addr-search-block{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  padding:16px 18px;
  margin:4px 0 20px;
}
#wbrb-wrap .wbrb-addr-search-label{
  display:block;
  color:var(--wbrb-brand-pink);
  font-weight:700;
  font-size:14.5px;
  margin-bottom:8px;
}
#wbrb-wrap .wbrb-autocomplete{ position:relative; }
#wbrb-wrap .wbrb-addr-search{
  width:100%;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--wbrb-purple);
  background:#fff;
  border:2px solid var(--wbrb-brand-pink);
  border-radius:var(--wbrb-r-input);
  padding:13px 14px;
  box-sizing:border-box;
  transition:border-color .25s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-addr-search:focus{
  outline:none;
  border-color:#9D00FF;
  box-shadow:0 0 0 4px rgba(157,0,255,.12);
}
#wbrb-wrap .wbrb-addr-hint{
  margin-top:9px;
  font-size:12px;
  line-height:1.5;
  color:var(--wbrb-body);
}
#wbrb-wrap .wbrb-addr-reset{
  margin-left:7px;
  padding:3px 9px;
  font:600 11px/1.2 'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbrb-brand-pink);
  background:transparent;
  border:1px solid var(--wbrb-brand-pink);
  border-radius:5px;
  cursor:pointer;
  vertical-align:middle;
}
#wbrb-wrap .wbrb-addr-reset:hover{ background:var(--wbrb-brand-pink); color:#fff; }
/* the Google Places suggestion dropdown floats above the card */
.pac-container{ z-index:100000; }

/* ---- Change 290: vet autocomplete (twin of the mailing-address block) ---- */
#wbrb-wrap .wbrb-vet-search-block{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  padding:16px 18px;
  margin:4px 0 20px;
}
#wbrb-wrap .wbrb-vet-search-label{
  display:block;
  color:var(--wbrb-brand-pink);
  font-weight:700;
  font-size:14.5px;
  margin-bottom:8px;
}
#wbrb-wrap .wbrb-vet-search{
  width:100%;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:15px;
  color:var(--wbrb-purple);
  background:#fff;
  border:2px solid var(--wbrb-brand-pink);
  border-radius:var(--wbrb-r-input);
  padding:13px 14px;
  box-sizing:border-box;
  transition:border-color .25s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-vet-search:focus{
  outline:none;
  border-color:#9D00FF;
  box-shadow:0 0 0 4px rgba(157,0,255,.12);
}
#wbrb-wrap .wbrb-vet-hint{
  margin-top:9px;
  font-size:12px;
  line-height:1.5;
  color:var(--wbrb-body);
}
#wbrb-wrap .wbrb-vet-reset{
  margin-left:7px;
  padding:3px 9px;
  font:600 11px/1.2 'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbrb-brand-pink);
  background:transparent;
  border:1px solid var(--wbrb-brand-pink);
  border-radius:5px;
  cursor:pointer;
  vertical-align:middle;
}
#wbrb-wrap .wbrb-vet-reset:hover{ background:var(--wbrb-brand-pink); color:#fff; }

/* ---- Change 295: inline login panel for returning customers ---- */
#wbrb-wrap .wbrb-login-panel{
  background:linear-gradient(135deg, rgba(235,78,155,.10) 0%, rgba(157,0,255,.06) 100%);
  border:1.6px solid var(--wbrb-brand-pink);
  border-radius:14px;
  padding:18px 20px;
  margin:14px 0 18px;
  animation:wbrb-fadeUp .35s var(--wbrb-ease) both;
}
#wbrb-wrap .wbrb-login-head{
  display:flex; gap:12px; align-items:flex-start;
}
#wbrb-wrap .wbrb-login-icon{ font-size:30px; line-height:1; flex-shrink:0; }
#wbrb-wrap .wbrb-login-title{
  font-weight:700; color:var(--wbrb-purple);
  font-size:15.5px;
}
#wbrb-wrap .wbrb-login-sub{
  font-size:13px; color:var(--wbrb-body);
  margin-top:3px; line-height:1.5;
}
#wbrb-wrap .wbrb-login-row{
  display:flex; gap:10px; margin-top:14px;
}
#wbrb-wrap .wbrb-login-input{
  flex:1;
  padding:12px 14px;
  font-size:15px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  border:2px solid var(--wbrb-brand-pink);
  border-radius:var(--wbrb-r-input);
  background:#fff;
  color:var(--wbrb-purple);
  box-sizing:border-box;
  transition:border-color .2s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-login-input:focus{
  outline:none; border-color:#9D00FF;
  box-shadow:0 0 0 4px rgba(157,0,255,.12);
}
#wbrb-wrap .wbrb-login-btn{
  padding:12px 22px;
  font-weight:700; font-size:14px;
  background:var(--wbrb-brand-pink); color:#fff;
  border:0; border-radius:var(--wbrb-r-input);
  cursor:pointer;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  transition:background-color .15s var(--wbrb-ease), transform .12s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-login-btn:hover{ background:#d93887; }
#wbrb-wrap .wbrb-login-btn:active{ transform:scale(.98); }
#wbrb-wrap .wbrb-login-btn[disabled]{ opacity:.55; cursor:wait; }
#wbrb-wrap .wbrb-login-actions{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:11px; font-size:12px;
}
#wbrb-wrap .wbrb-login-forgot{
  color:var(--wbrb-brand-pink);
  text-decoration:underline;
  align-self:center;
}
/* Change 306: .wbrb-login-skip removed alongside the "Continue without
 * signing in" button. Sign-in is now forced; the only escape is to change
 * the email above. .wbrb-login-hint is the small grey text that replaces
 * the skip button in the action row + reminds the customer how to escape. */
#wbrb-wrap .wbrb-login-hint{
  color:var(--wbrb-body);
  font-size:12px;
  font-style:italic;
  align-self:center;
  opacity:0.85;
}
#wbrb-wrap .wbrb-login-err{
  margin-top:11px; padding:9px 12px;
  background:rgba(220,53,69,.12); border-left:3px solid #DC3545;
  color:#DC3545; font-size:13px; border-radius:6px;
}

/* ---- Change 295/300/302: signed-in banner shown above the wizard ----
 * Change 300 promotes this from a soft-green welcome to an amber UPDATE-MODE
 * warning that makes clear the submit will OVERWRITE the existing customer
 * record (per owner's "we need to warn them any changes in their account
 * will be updated and overwritten"). The visual now matches the seriousness
 * of the action.
 *
 * Change 303 adds position:relative + z-index:50 so the page-template logo
 * (Bricks renders a centered SOULMUTTS logo image with its own stacking
 * context that previously overlapped the banner) doesn't cover the banner
 * text + buttons. Also lifts the "Not you? Sign out" link clear of any
 * page-level overlays that were intercepting its click. */
/* Change 315: tighten visual containment. Previously the banner sprawled
 * full-width of #wbrb-wrap (~1100 px), visually disconnected from the
 * centered form card. Constrain to a max width that matches the wizard's
 * inner content (~520 px) and centre it. Adds box-shadow so it reads as
 * the form's own banner rather than a page-level notification strip. */
#wbrb-wrap .wbrb-loggedin-banner{
  position:relative;
  z-index:50;
  max-width:520px;
  margin:8px auto 20px auto;
  background:linear-gradient(135deg, rgba(255,176,32,.14) 0%, rgba(255,138,0,.06) 100%);
  border:1.6px solid #FF8A00;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  font-size:13px;
  color:var(--wbrb-purple);
  flex-wrap:wrap;
  box-shadow:0 6px 18px rgba(255,138,0,.10);
}
#wbrb-wrap .wbrb-loggedin-head{
  display:flex; gap:12px; align-items:flex-start;
  flex:1; min-width:240px;
}
#wbrb-wrap .wbrb-loggedin-icon{ font-size:24px; line-height:1; flex-shrink:0; }
#wbrb-wrap .wbrb-loggedin-title{
  font-weight:700; color:var(--wbrb-purple);
  font-size:14.5px;
  line-height:1.35;
}
#wbrb-wrap .wbrb-loggedin-sub{
  margin-top:4px; font-size:12.5px; line-height:1.5;
  color:var(--wbrb-body);
}
#wbrb-wrap .wbrb-loggedin-sub strong{ color:#B14E00; }
#wbrb-wrap .wbrb-loggedin-link{
  position:relative;
  z-index:51;                /* one above the banner so the click always lands */
  font-size:12px;
  color:var(--wbrb-brand-pink);
  text-decoration:underline;
  cursor:pointer;
  flex-shrink:0;
  align-self:flex-start;
  padding:4px 8px;           /* enlarged tap target — was padding-top:2px only */
  margin:-4px -8px;          /* keep visual position but extend the click area */
  border-radius:4px;
  pointer-events:auto;       /* explicit — guard against an ancestor's pointer-events:none */
}
#wbrb-wrap .wbrb-loggedin-link:hover{
  color:#d93887;
  background:rgba(235,78,155,.06);
}

/* Change 300 — card-on-file: when WBRB.has_valid_card is true, the credit
 * card fields are hidden + their validators stripped, so submit doesn't
 * trip on empty card inputs that the customer doesn't need to fill. */
#wbrb-wrap .wbrb-card-hidden{
  display:none !important;
}

/* Change 311 — Step-1 ID on-file card. Shown when wbrbSetIdMode(true) and
 * the customer has either (a) just uploaded an ID this session or (b)
 * logged in with an existing personal_profile_identification on file.
 * Replaces the two upload-option cards while ID is on file; the customer
 * can click "Replace" to re-open the camera or file picker. */
#wbrb-wrap .wbrb-opt-card.wbrb-opt-onfile{
  background:linear-gradient(135deg, rgba(76,175,80,.12) 0%, rgba(35,180,124,.06) 100%);
  border:1.8px solid #4CAF50;
  box-shadow:0 6px 16px rgba(76,175,80,.18);
  cursor:default;
}
#wbrb-wrap .wbrb-opt-card.wbrb-opt-onfile .wbrb-opt-main{ color:#1B5E20; }
#wbrb-wrap .wbrb-opt-card.wbrb-opt-onfile .wbrb-opt-sub{ color:#2E7D32; }
#wbrb-wrap .wbrb-opt-card.wbrb-opt-onfile .wbrb-opt-emoji{
  width:46px; height:46px;
  background:#4CAF50;
  border-radius:13px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:22px;
  margin-right:14px;
  box-shadow:0 6px 14px rgba(76,175,80,.30);
}
#wbrb-wrap .wbrb-opt-card.wbrb-opt-onfile .wbrb-opt-tag.wbrb-opt-tag-on{
  background:#4CAF50;
}
#wbrb-wrap .wbrb-idreplace-row{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
#wbrb-wrap .wbrb-idreplace-btn{
  flex:1;
  min-width:180px;
  padding:10px 12px;
  font-size:13px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  color:var(--wbrb-brand-pink);
  background:transparent;
  border:1.4px solid var(--wbrb-brand-pink);
  border-radius:10px;
  cursor:pointer;
  transition:background-color .15s var(--wbrb-ease), color .15s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-idreplace-btn:hover{
  background:var(--wbrb-brand-pink);
  color:#fff;
}
#wbrb-wrap .wbrb-idreplace-btn.wbrb-idreplace-alt{
  color:var(--wbrb-body);
  border-color:var(--wbrb-border);
}
#wbrb-wrap .wbrb-idreplace-btn.wbrb-idreplace-alt:hover{
  background:var(--wbrb-body);
  color:#fff;
  border-color:var(--wbrb-body);
}
@media (max-width:480px){
  #wbrb-wrap .wbrb-idreplace-row{ flex-direction:column; gap:8px; }
}

/* Change 305 — autofill detection hook.
 *
 * Every modern browser autofill applies a vendor-specific pseudo-class
 * (`:-webkit-autofill` in Chrome/Safari, `:-moz-autofill` in Firefox, the
 * `:autofill` standard in newer specs). We hang a no-op animation off each
 * so that whenever the browser autofills any of our inputs, an
 * `animationstart` event fires with animationName="wbrb-autofill-detect".
 * register-beta.js listens for it and calls wbrbResyncMask() on the
 * triggering element, feeding the autofilled raw value back through IMask
 * so the on-screen value gets formatted correctly + cardnumber_mask's
 * currentMask is populated for brand-detection. */
@keyframes wbrb-autofill-detect{ from{} to{} }
#wbrb-wrap input:-webkit-autofill,
#wbrb-wrap input:-webkit-autofill:hover,
#wbrb-wrap input:-webkit-autofill:focus,
#wbrb-wrap input:-webkit-autofill:active{
  animation-name: wbrb-autofill-detect;
  animation-duration: .001s;
  animation-fill-mode: both;
}
/* Firefox 109+ standard pseudo-class */
#wbrb-wrap input:autofill{
  animation-name: wbrb-autofill-detect;
  animation-duration: .001s;
  animation-fill-mode: both;
}
/* Soften the bright-yellow Chrome autofill background so the form's
 * styling stays consistent — the browser default is a high-contrast
 * yellow that clashes with the pink card border. The shadow inset
 * trick is the standard fix; -webkit-text-fill-color preserves text
 * colour the IMask reformats wouldn't restore otherwise. */
#wbrb-wrap input:-webkit-autofill,
#wbrb-wrap input:-webkit-autofill:hover,
#wbrb-wrap input:-webkit-autofill:focus,
#wbrb-wrap input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--wbrb-purple) !important;
  caret-color: var(--wbrb-purple);
  transition: background-color 5000s ease-in-out 0s;
}

/* Change 303 — UPLOADS-on-file: when a returning customer's existing
 * personal_profile_identification / vaccinations files are surfaced by
 * the prefill, the upload card renders in a distinct "on-file" state
 * so they can tell the file is accounted for + that clicking REPLACES
 * rather than uploads-for-the-first-time. */
#wbrb-wrap .wbrb-uploader.wbrb-up-onfile{
  border-color:#4CAF50;
  background:rgba(76,175,80,.06);
}
#wbrb-wrap .wbrb-uploader.wbrb-up-onfile .wbrb-up-check::before{
  content:'\01F4CE';   /* 📎 paperclip - "file on file" affordance */
}
#wbrb-wrap .wbrb-doc-onfile-hint{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.4;
  color:#4CAF50;
}

/* mobile compaction for the login panel + banner */
@media (max-width: 480px){
  #wbrb-wrap .wbrb-login-row{ flex-direction:column; }
  #wbrb-wrap .wbrb-login-btn{ width:100%; }
  #wbrb-wrap .wbrb-login-actions{ flex-direction:column; gap:8px; }
}

/* ---- upload zone ---- */
#wbrb-wrap .wbrb-uploader{
  border:2px dashed #E7B9D3;
  border-radius:14px;
  background:var(--wbrb-wash);
  padding:22px 18px;
  text-align:center;
  cursor:pointer;
  transition:border-color .25s var(--wbrb-ease), background .25s var(--wbrb-ease), transform .2s var(--wbrb-ease);
  position:relative;
}
#wbrb-wrap .wbrb-uploader:hover{
  border-color:var(--wbrb-brand-pink);
  background:#FCE3F0;
}
#wbrb-wrap .wbrb-uploader.dragover{
  border-color:var(--wbrb-brand-pink);
  background:#FBD8EB;
  transform:scale(1.015);
}
#wbrb-wrap .wbrb-uploader.done{
  border-style:solid;
  border-color:var(--wbrb-green-bd);
  background:var(--wbrb-green-soft);
}
#wbrb-wrap .wbrb-up-icon{
  font-size:28px;
  display:block;
  margin-bottom:7px;
  transition:transform .3s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-uploader:hover .wbrb-up-icon{ transform:translateY(-3px); }
#wbrb-wrap .wbrb-up-main{
  font-size:14px;
  font-weight:700;
  color:var(--wbrb-purple);
}
#wbrb-wrap .wbrb-up-sub{
  font-size:12px;
  color:var(--wbrb-body);
  margin-top:3px;
  display:block;
}
#wbrb-wrap .wbrb-up-file{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13.5px;
  font-weight:500;
  color:var(--wbrb-green);
}
#wbrb-wrap .wbrb-uploader.done .wbrb-up-default{ display:none; }
#wbrb-wrap .wbrb-uploader.done .wbrb-up-file{ display:flex; }
#wbrb-wrap .wbrb-up-uploading{
  display:none;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:13px;
  font-weight:500;
  color:var(--wbrb-link);
}
#wbrb-wrap .wbrb-uploader.uploading .wbrb-up-default{ display:none; }
#wbrb-wrap .wbrb-uploader.uploading .wbrb-up-uploading{ display:flex; }
#wbrb-wrap .wbrb-up-spin{
  width:16px; height:16px;
  border:2.5px solid #F0C9E0;
  border-top-color:var(--wbrb-brand-pink);
  border-radius:50%;
  animation:wbrb-spin .7s linear infinite;
}
@keyframes wbrb-spin{ to{ transform:rotate(360deg); } }
#wbrb-wrap .wbrb-up-check{
  width:20px; height:20px;
  border-radius:50%;
  background:var(--wbrb-green);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
#wbrb-wrap .wbrb-up-check svg{ width:11px; height:11px; }
#wbrb-wrap .wbrb-up-remove{
  margin-left:4px;
  background:none;
  border:none;
  color:var(--wbrb-link);
  font:600 12px/1 'Roboto', system-ui, -apple-system, sans-serif;
  text-decoration:underline;
  cursor:pointer;
}
#wbrb-wrap .wbrb-up-remove:hover{ color:var(--wbrb-brand-pink); }
#wbrb-wrap .wbrb-field.wbrb-invalid .wbrb-uploader{ border-color:#E98C8C; }

/* Change 256: vaccination uploads now use two stacked Step-1-style option
   cards (camera primary + upload secondary). The .wbrb-up-camera-btn from
   Change 254 was a thin white text-link that looked orphaned next to the
   bold drag-drop zone — same complaint as the original styling
   inconsistency. Both cards now share the .wbrb-opt-card vocabulary that
   Step-1's ID picker already established. */
#wbrb-wrap .wbrb-upload-options{
  display:flex;
  flex-direction:column;
  gap:11px;
  margin-top:6px;
}
/* Both .wbrb-opt-card siblings inside the options group lose their default
   margin-bottom (the parent's gap carries the spacing). */
#wbrb-wrap .wbrb-upload-options .wbrb-opt-card{ margin-bottom:0; }

/* The camera card uses .wbrb-opt-primary's existing pink-gradient styling
   from Step-1; the data-camera-for attribute is what JS reads. The .wbrb-
   opt-text wrapper keeps the main+sub labels on their own line, leaving
   the right-side .wbrb-opt-tag visible. */
#wbrb-wrap .wbrb-opt-text{ display:flex; flex-direction:column; flex:1; }

/* The .wbrb-uploader re-skinned as a Step-1-secondary card. Override the
   centred drop-zone styling from earlier in this file (text-align:center
   + padding 22/18 + var(--wbrb-wash) background) so it matches .wbrb-opt-
   upload — horizontal flex, left-aligned content, white background, the
   same hover lift Step-1 has. Drag/drop functionality is unchanged
   because data-upload still drives the JS wiring. */
#wbrb-wrap .wbrb-upload-options .wbrb-uploader{
  text-align:left;
  padding:16px;
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  box-shadow:var(--wbrb-shadow-sm);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:14px;
}
#wbrb-wrap .wbrb-upload-options .wbrb-uploader:hover{
  border-color:var(--wbrb-pink);
  background:#fff;       /* override the earlier hover that used --wash */
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(235,78,155,.18);
}
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.dragover{
  border-color:var(--wbrb-brand-pink);
  background:#FBD8EB;
  transform:scale(1.01);
}
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.done{
  border-style:solid;
  border-color:var(--wbrb-green-bd);
  background:var(--wbrb-green-soft);
}
/* The upload card's emoji uses the same Step-1 emoji-tile look as
   .wbrb-opt-upload — white background, pink border, pink icon. */
#wbrb-wrap .wbrb-upload-options .wbrb-uploader .wbrb-opt-emoji{
  background:#fff;
  color:var(--wbrb-pink);
  border:1.6px solid var(--wbrb-pink);
  box-shadow:none;
  width:46px; height:46px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
/* In the .uploading state the card still needs vertical centering of the
   spinner+text; in .done it shows the check + filename + remove button. */
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.uploading,
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.done{
  justify-content:center;   /* center the .wbrb-up-uploading / .wbrb-up-file rows */
}
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.done .wbrb-opt-emoji,
#wbrb-wrap .wbrb-upload-options .wbrb-uploader.uploading .wbrb-opt-emoji{
  display:none;             /* the state row carries its own icon */
}

/* the doc-status line register-beta.js writes the upload token result into */
#wbrb-wrap .wbrb-doc-status{
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
}
#wbrb-wrap .wbrb-doc-ok{
  display:inline-block;
  background:var(--wbrb-green-soft);
  border:1px solid var(--wbrb-green-bd);
  border-radius:6px;
  padding:4px 9px;
  color:var(--wbrb-green);
  font-weight:600;
}
#wbrb-wrap .wbrb-doc-err{ color:#C0392B; }
#wbrb-wrap .wbrb-doc-remove{ color:#C0392B; margin-left:3px; }

/* "ID on file" pill */
#wbrb-wrap .wbrb-onfile{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--wbrb-green-soft);
  border:1.6px solid var(--wbrb-green-bd);
  border-radius:var(--wbrb-r-input);
  padding:15px 16px;
  margin-bottom:16px;
}
#wbrb-wrap .wbrb-of-badge{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--wbrb-green);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
#wbrb-wrap .wbrb-of-badge svg{ width:16px; height:16px; }
#wbrb-wrap .wbrb-of-main{ font-size:14px; font-weight:700; color:var(--wbrb-purple); }
#wbrb-wrap .wbrb-of-sub{ font-size:12.5px; color:var(--wbrb-body); margin-top:1px; }

/* ---- ID-scan accelerator (Step 1) ---- */
#wbrb-wrap .wbrb-scan-offer{
  display:none;
  margin-top:8px;
  animation:wbrb-fadeUp .4s var(--wbrb-ease) both;
}
#wbrb-wrap .wbrb-scan-offer.wbrb-show{ display:block; }
@keyframes wbrb-fadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}
#wbrb-wrap .wbrb-scan-offer-head{
  font-size:13px;
  font-weight:700;
  color:var(--wbrb-purple);
  margin-bottom:6px;
}
/* Change 284: short helper paragraph under the head — explains WHY the ID is
   required + which forms are accepted now that the autoscan/OCR language has
   been removed and the bypass killed (ID upload is mandatory to advance). */
#wbrb-wrap .wbrb-scan-offer-sub{
  font-size:12.5px;
  line-height:1.5;
  color:var(--wbrb-body);
  margin:0 0 12px 0;
}
#wbrb-wrap .wbrb-opt-card{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  width:100%;
  padding:16px;
  border-radius:14px;
  cursor:pointer;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  transition:transform .2s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease), border-color .2s var(--wbrb-ease);
  margin-bottom:11px;
}
#wbrb-wrap .wbrb-opt-card:active{ transform:scale(.985); }
#wbrb-wrap .wbrb-opt-primary{
  background:linear-gradient(135deg,#FCE3F0 0%, #FBD3E8 100%);
  border:1.8px solid var(--wbrb-pink);
  box-shadow:var(--wbrb-shadow-sm);
}
#wbrb-wrap .wbrb-opt-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(235,78,155,.22);
}
#wbrb-wrap .wbrb-opt-emoji{
  width:46px; height:46px;
  background:var(--wbrb-pink);
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
  box-shadow:0 6px 14px rgba(235,78,155,.35);
}
#wbrb-wrap .wbrb-opt-main{ display:block; font-size:15px; font-weight:700; color:var(--wbrb-purple); }
#wbrb-wrap .wbrb-opt-sub{ display:block; font-size:12.5px; line-height:1.4; color:var(--wbrb-link); margin-top:3px; }
#wbrb-wrap .wbrb-opt-tag{
  margin-left:auto;
  flex-shrink:0;
  background:var(--wbrb-pink);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
}
#wbrb-wrap .wbrb-opt-manual{
  background:transparent;
  border:none;
  width:100%;
  text-align:center;
  color:var(--wbrb-link);
  font-size:13.5px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  padding:6px;
  cursor:pointer;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
}
#wbrb-wrap .wbrb-opt-manual:hover{ color:var(--wbrb-pink); }

/* ISSUE 3 — "Upload a photo of my ID" — secondary card next to the camera
   primary card; same shape, gentler styling. */
#wbrb-wrap .wbrb-opt-upload{
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  box-shadow:var(--wbrb-shadow-sm);
}
#wbrb-wrap .wbrb-opt-upload:hover{
  transform:translateY(-2px);
  border-color:var(--wbrb-pink);
  box-shadow:0 12px 26px rgba(235,78,155,.18);
}
#wbrb-wrap .wbrb-opt-upload .wbrb-opt-emoji{
  background:#fff;
  color:var(--wbrb-pink);
  border:1.6px solid var(--wbrb-pink);
  box-shadow:none;
}

/* ISSUE 3 — live camera capture modal (the live <video> preview + Capture). */
#wbrb-wrap .wbrb-camera-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(20,8,28,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
#wbrb-wrap .wbrb-camera-card{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:var(--wbrb-r-card);
  box-shadow:var(--wbrb-shadow);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#wbrb-wrap .wbrb-camera-head{
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--wbrb-purple);
  text-align:center;
}
#wbrb-wrap .wbrb-camera-stage{
  position:relative;
  width:100%;
  background:#10101A;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
}
#wbrb-wrap .wbrb-camera-video,
#wbrb-wrap .wbrb-camera-canvas{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#wbrb-wrap .wbrb-camera-status{
  font-size:12.5px;
  color:var(--wbrb-link);
  text-align:center;
  min-height:18px;
}
#wbrb-wrap .wbrb-camera-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
#wbrb-wrap .wbrb-camera-actions .wbrb-btn{ flex:1; min-width:140px; }

/* ID scan overlay */
#wbrb-wrap .wbrb-scan-overlay{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.97);
  z-index:30;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  border-radius:var(--wbrb-r-card);
}
#wbrb-wrap .wbrb-scan-overlay.wbrb-show{ display:flex; }
#wbrb-wrap .wbrb-scan-card{
  width:220px;
  height:138px;
  border-radius:14px;
  background:linear-gradient(135deg,#F7E4F0,#FBD3E8);
  border:1.6px solid var(--wbrb-soft);
  position:relative;
  overflow:hidden;
  box-shadow:var(--wbrb-shadow);
  margin-bottom:22px;
}
#wbrb-wrap .wbrb-id-row{
  position:absolute;
  height:9px;
  border-radius:4px;
  background:rgba(90,17,94,.14);
}
#wbrb-wrap .wbrb-id-photo{
  position:absolute;
  left:14px; top:16px;
  width:46px; height:58px;
  border-radius:7px;
  background:rgba(90,17,94,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
#wbrb-wrap .wbrb-scan-beam{
  position:absolute;
  left:0; right:0;
  height:30px;
  background:linear-gradient(180deg, rgba(235,78,155,0), rgba(235,78,155,.55), rgba(235,78,155,0));
  top:-30px;
  animation:wbrb-beam 1.25s linear infinite;
}
@keyframes wbrb-beam{
  0%  { top:-30px; }
  100%{ top:138px; }
}
#wbrb-wrap .wbrb-scan-status{
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:22px;
  color:var(--wbrb-purple);
  letter-spacing:-0.02em;
  margin-bottom:6px;
  text-align:center;
}
#wbrb-wrap .wbrb-scan-sub{
  font-size:13px;
  color:var(--wbrb-body);
  text-align:center;
}
#wbrb-wrap .wbrb-scan-dots{ margin-top:8px; }
#wbrb-wrap .wbrb-scan-dots span{
  display:inline-block;
  width:6px; height:6px;
  margin:0 2px;
  border-radius:50%;
  background:var(--wbrb-pink);
  animation:wbrb-scandot 1s infinite ease-in-out;
}
#wbrb-wrap .wbrb-scan-dots span:nth-child(2){ animation-delay:.16s; }
#wbrb-wrap .wbrb-scan-dots span:nth-child(3){ animation-delay:.32s; }
@keyframes wbrb-scandot{
  0%,100%{ transform:translateY(0); opacity:.4; }
  50%    { transform:translateY(-6px); opacity:1; }
}

/* prefilled note ribbon */
#wbrb-wrap .wbrb-prefill-note{
  display:none;
  align-items:center;
  gap:9px;
  background:var(--wbrb-green-soft);
  border:1.4px solid var(--wbrb-green-bd);
  border-radius:10px;
  padding:10px 13px;
  margin-bottom:18px;
  font-size:12.5px;
  color:var(--wbrb-green);
  font-weight:500;
}
#wbrb-wrap .wbrb-prefill-note.wbrb-show{ display:flex; }

/* ---- two-dog cards ---- */
#wbrb-wrap .wbrb-dogs-heading{
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--wbrb-purple);
  margin:4px 0 6px;
}
#wbrb-wrap .wbrb-dogs-sub{
  font-size:13px;
  line-height:1.5;
  color:var(--wbrb-body);
  margin-bottom:16px;
}
#wbrb-wrap .wbrb-dog-card{
  border:1.6px solid var(--wbrb-brand-pink);
  border-radius:14px;
  padding:18px 18px 4px;
  background:rgba(255,0,149,.02);
  margin-bottom:18px;
}
#wbrb-wrap .wbrb-dog-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}
#wbrb-wrap .wbrb-dog-card-title{
  font-weight:700;
  font-size:16px;
  color:var(--wbrb-brand-pink);
  display:flex; align-items:center; gap:8px;
}
#wbrb-wrap .wbrb-dct-emoji{ font-size:18px; }

/* a section heading inside a dog card is smaller than a step heading */
#wbrb-wrap .wbrb-dog-card .wbrb-section-head{
  font-size:18px;
  margin-top:18px;
}

/* ===== Two-column dog layout =====
   Desktop: First Dog (col 1) + add-second-dog OR second-dog form (col 2)
   side by side. Mobile: stacked. The form card widens specifically on
   step 3 to give the grid room to breathe. */
#wbrb-wrap .wbrb-dogs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
/* In the grid, the cards no longer need their own bottom margin --
   the grid gap handles inter-card spacing. */
#wbrb-wrap .wbrb-dogs-grid .wbrb-dog-card{ margin-bottom:0; }
/* Both columns top-align so they read as a clean two-column layout.
   We deliberately do NOT use position:sticky on the slot: once the
   user expands the second-dog card it becomes a full form, and a
   sticky form column makes scrolling feel "glued" in a confusing
   way. The collapsed add-warning is highly visible at the top of
   the column anyway. */
#wbrb-wrap .wbrb-dog-slot{ align-self:start; }
/* Stack vertically below 760 px (the breakpoint roughly matches the
   point where two columns + the card padding become uncomfortably
   narrow). */
@media (max-width:759px){
  #wbrb-wrap .wbrb-dogs-grid{ grid-template-columns:1fr; }
  #wbrb-wrap .wbrb-dogs-grid .wbrb-dog-card{ margin-bottom:0; }
}
/* Widen the card specifically on step 3 ("Your dog(s)") so the two
   columns have real room. Other steps stay at the original 620 px
   reading-width. :has() is supported in all evergreen browsers; older
   browsers fall back to the default card width and the grid columns
   simply become narrower. */
@media (min-width:920px){
  #wbrb-wrap:has(.wbrb-screen[data-screen="3"].wbrb-active) .wbrb-card{
    max-width:960px;
  }
}

/* ===== "Add a second dog" -- AMBER warning palette =====
   Visually distinct from the pink "fill this out" cards so the user
   has to stop and decide whether they actually have a second dog
   before clicking. The header pill ("Only one dog? Skip this.") is
   the load-bearing copy. */
#wbrb-wrap .wbrb-dog2-add{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  width:100%;
  min-height:240px;
  padding:24px 20px;
  border:3px dashed #E6A532;        /* amber, NOT brand pink */
  border-radius:14px;
  background:rgba(230,165,50,.07);
  color:#7A4F08;
  cursor:pointer;
  text-align:center;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  margin-bottom:0;
  transition:border-color .15s ease, background-color .15s ease, transform .15s ease;
}
#wbrb-wrap .wbrb-dog2-add:hover{
  background:rgba(230,165,50,.16);
  transform:translateY(-2px);
}
#wbrb-wrap .wbrb-dog2-add-warning{
  display:inline-block;
  padding:7px 14px;
  border:2px solid #E6A532;
  border-radius:8px;
  background:#FDF3DE;
  color:#7A4F08;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
#wbrb-wrap .wbrb-dog2-add-label{
  font-size:17px;
  font-weight:700;
  color:var(--wbrb-purple);
  letter-spacing:-0.01em;
  margin-top:4px;
}
#wbrb-wrap .wbrb-dog2-add-sub{
  font-size:13px;
  line-height:1.5;
  color:var(--wbrb-link);
  max-width:280px;
}
#wbrb-wrap .wbrb-dog2-add-sub strong{ color:var(--wbrb-purple); }

#wbrb-wrap .wbrb-dog2-delete{
  padding:6px 12px;
  font:600 12px/1.2 'Roboto', system-ui, -apple-system, sans-serif;
  color:#E0556B;
  background:transparent;
  border:1px solid rgba(224,85,107,.55);
  border-radius:7px;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
#wbrb-wrap .wbrb-dog2-delete:hover{ background:#E0556B; border-color:#E0556B; color:#fff; }

#wbrb-wrap .wbrb-dog2-warn{
  display:none;
  margin:0 0 14px;
  padding:11px 14px;
  border:1.5px solid var(--wbrb-brand-pink);
  border-radius:9px;
  background:rgba(255,0,149,.10);
  color:var(--wbrb-link);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
}
#wbrb-wrap .wbrb-dog2-warn.wbrb-show{ display:block; }

/* ---- vet permission custom control ---- */
#wbrb-wrap .wbrb-permission{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:var(--wbrb-r-input);
  padding:16px 17px;
  margin-bottom:16px;
}
#wbrb-wrap .wbrb-perm-label{
  font-size:13px;
  font-weight:700;
  color:var(--wbrb-purple);
  margin-bottom:9px;
}
#wbrb-wrap .wbrb-perm-text{
  font-size:13px;
  line-height:1.75;
  color:var(--wbrb-body);
}
#wbrb-wrap input.wbrb-perm-name-input{
  display:inline-block;
  width:170px;
  max-width:60vw;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:13.5px;
  color:var(--wbrb-purple);
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  border-radius:7px;
  padding:5px 9px;
  margin:0 3px;
  vertical-align:baseline;
}
#wbrb-wrap input.wbrb-perm-name-input:focus{
  outline:none;
  border-color:var(--wbrb-pink);
  box-shadow:0 0 0 3px rgba(235,78,155,.13);
}
#wbrb-wrap .wbrb-dollar-wrap{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  border-radius:7px;
  padding:2px 4px 2px 9px;
  margin:0 2px;
  vertical-align:baseline;
  transition:border-color .25s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-dollar-wrap:focus-within{
  border-color:var(--wbrb-pink);
  box-shadow:0 0 0 3px rgba(235,78,155,.13);
}
#wbrb-wrap .wbrb-sign{
  font-size:13.5px; font-weight:700; color:var(--wbrb-purple);
}
#wbrb-wrap .wbrb-dollar-wrap input.wbrb-field{
  border:none !important;
  outline:none;
  width:62px;
  padding:5px 4px !important;
  font-size:13.5px;
  font-weight:500;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--wbrb-purple);
}

/* ---- credit card control ---- */
#wbrb-wrap .wbrb-cc-block{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
}
#wbrb-wrap .wbrb-cc-visual{
  width:100%;
  max-width:320px;
  margin:0 auto 18px;
  aspect-ratio:1.586/1;
  border-radius:14px;
  background:linear-gradient(135deg,#5A115E 0%, #8A2A7E 55%, #EB4E9B 120%);
  box-shadow:0 14px 30px rgba(90,17,94,.30);
  padding:18px 20px;
  color:#fff;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#wbrb-wrap .wbrb-cc-visual::after{
  content:"";
  position:absolute;
  right:-40px; top:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
#wbrb-wrap .wbrb-cc-chip{
  width:42px; height:31px;
  border-radius:6px;
  background:linear-gradient(135deg,#F4D58D,#D4A857);
}
#wbrb-wrap .wbrb-cc-brand{
  position:absolute;
  top:18px; right:20px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  opacity:.92;
}
#wbrb-wrap .wbrb-cc-num{
  font-size:18px;
  letter-spacing:.10em;
  font-weight:500;
  margin-top:8px;
}
#wbrb-wrap .wbrb-cc-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-size:11px;
}
#wbrb-wrap .wbrb-cc-cap{
  font-size:8.5px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.7;
  display:block;
  margin-bottom:2px;
}
#wbrb-wrap .wbrb-cc-val{ font-size:12.5px; font-weight:500; letter-spacing:.04em; }
#wbrb-wrap .wbrb-cc-secure-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  background:#fff;
  border:1.4px solid var(--wbrb-green-bd);
  border-radius:10px;
  padding:11px 13px;
  margin-top:6px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--wbrb-green);
  font-weight:500;
}

/* ---- explainer paragraph (rich italic note) ---- */
#wbrb-wrap .wbrb-note-italic{
  font-size:11.5px;
  line-height:1.6;
  color:var(--wbrb-body);
  font-style:italic;
  margin-top:11px;
}
#wbrb-wrap .wbrb-note-italic a{ color:var(--wbrb-link); font-weight:500; }

/* ---- terms-and-conditions scrollable box ---- */
#wbrb-wrap .wbrb-tac-box{
  max-height:240px;
  overflow-y:auto;
  background:#fff;
  border:1.6px solid var(--wbrb-border);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:8px;
  font-size:12px;
  line-height:1.6;
  color:var(--wbrb-body);
}
#wbrb-wrap .wbrb-tac-box p{ margin:0 0 8px; }
#wbrb-wrap .wbrb-tac-box p:last-child{ margin-bottom:0; }
#wbrb-wrap .wbrb-tac-box::-webkit-scrollbar{ width:10px; }
#wbrb-wrap .wbrb-tac-box::-webkit-scrollbar-track{ background:var(--wbrb-wash); border-radius:8px; }
#wbrb-wrap .wbrb-tac-box::-webkit-scrollbar-thumb{ background:#E7B9D3; border-radius:8px; }
#wbrb-wrap .wbrb-tac-scroll-hint{
  font-size:11.5px;
  color:var(--wbrb-link);
  text-align:center;
  margin-bottom:14px;
  font-weight:500;
}
/* Change 252: T&C scroll-gate — the Accept row stays locked + greyed-out
   until the user has scrolled through the terms box. JS releases the lock
   on scroll-to-bottom (or immediately if the content fits without scrolling). */
#wbrb-wrap .wbrb-check-row.wbrb-tc-locked{
  opacity:.45;
  pointer-events:none;
  cursor:not-allowed;
  filter:grayscale(.4);
  transition:opacity .25s ease, filter .25s ease;
}

/* ---- terms checkbox row ---- */
#wbrb-wrap .wbrb-check-row{
  display:flex;
  gap:11px;
  align-items:flex-start;
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:var(--wbrb-r-input);
  padding:14px 15px;
  margin-bottom:16px;
  cursor:pointer;
  transition:border-color .2s var(--wbrb-ease), background .2s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-check-row:hover{ border-color:#E7B9D3; }
#wbrb-wrap .wbrb-check-row.checked{ border-color:var(--wbrb-green-bd); background:var(--wbrb-green-soft); }
#wbrb-wrap .wbrb-check-row.wbrb-invalid{ border-color:#E98C8C; }
#wbrb-wrap .wbrb-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(--wbrb-ease), border-color .2s var(--wbrb-ease);
  margin-top:1px;
}
#wbrb-wrap .wbrb-check-row.checked .wbrb-check-box{
  background:var(--wbrb-green);
  border-color:var(--wbrb-green);
}
#wbrb-wrap .wbrb-check-box svg{ width:12px; height:12px; opacity:0; transition:opacity .2s ease; }
#wbrb-wrap .wbrb-check-row.checked .wbrb-check-box svg{ opacity:1; }
#wbrb-wrap .wbrb-check-text{
  font-size:13px;
  line-height:1.5;
  color:var(--wbrb-purple);
  font-weight:500;
}
#wbrb-wrap .wbrb-terms-error{ margin:-10px 0 14px; }

/* ---- invisible-recaptcha note ---- */
#wbrb-wrap .wbrb-recaptcha-note{
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:center;
  font-size:11px;
  color:var(--wbrb-body);
  margin:10px 0 4px;
}

/* ====== START screen hero ====== */
#wbrb-wrap .wbrb-start-hero{
  text-align:center;
  padding-top:2px;
  margin-bottom:6px;
}
#wbrb-wrap .wbrb-hi-emoji{
  font-size:40px;
  display:block;
  margin-bottom:6px;
  animation:wbrb-floaty 3s ease-in-out infinite;
}
@keyframes wbrb-floaty{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-7px) rotate(3deg); }
}
#wbrb-wrap .wbrb-start-trust{
  margin-top:6px;
  font-size:12px;
  color:var(--wbrb-body);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

/* ====== nav buttons ====== */
#wbrb-wrap .wbrb-nav{
  display:flex;
  gap:12px;
  margin-top:24px;
  align-items:center;
  flex-wrap:wrap;
}
#wbrb-wrap .wbrb-btn{
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:15px;
  font-weight:700;
  border-radius:var(--wbrb-r-btn);
  cursor:pointer;
  border:none;
  transition:transform .18s var(--wbrb-ease), box-shadow .25s var(--wbrb-ease), background .2s var(--wbrb-ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#wbrb-wrap .wbrb-btn-primary{
  background:var(--wbrb-pink);
  color:#fff;
  padding:14px 22px;
  flex:1;
  min-width:160px;
  box-shadow:0 8px 20px rgba(235,78,155,.32);
}
#wbrb-wrap .wbrb-btn-primary:hover{
  background:var(--wbrb-pink-hover);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(235,78,155,.40);
}
#wbrb-wrap .wbrb-btn-primary:active{ transform:translateY(0) scale(.99); }
#wbrb-wrap .wbrb-btn-primary:disabled{
  background:#E7C3D9;
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}
#wbrb-wrap .wbrb-btn-back{
  background:#fff;
  color:var(--wbrb-link);
  padding:14px 18px;
  border:1.6px solid var(--wbrb-border);
}
#wbrb-wrap .wbrb-btn-back:hover{
  border-color:#D8B9CE;
  background:var(--wbrb-wash);
}
#wbrb-wrap .wbrb-btn-ghost{
  background:#fff;
  color:var(--wbrb-link);
  padding:14px 16px;
  border:1.6px dashed var(--wbrb-pink);
  font-size:13.5px;
}
#wbrb-wrap .wbrb-btn-ghost:hover{
  background:var(--wbrb-wash);
  border-style:solid;
}
#wbrb-wrap .wbrb-btn-join{
  background:linear-gradient(135deg,#EB4E9B,#E62584);
  font-size:16px;
  padding:16px 22px;
}

/* ====== SUCCESS ====== */
#wbrb-wrap .wbrb-success-screen{
  text-align:center;
  padding:38px 30px 34px;
}
#wbrb-wrap .wbrb-success-burst{
  font-size:58px;
  display:inline-block;
  animation:wbrb-pop .6s var(--wbrb-ease) both;
}
@keyframes wbrb-pop{
  0%  { transform:scale(0) rotate(-25deg); opacity:0; }
  60% { transform:scale(1.25) rotate(8deg); }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
#wbrb-wrap .wbrb-s-title{
  font-family:'Roboto', system-ui, -apple-system, sans-serif; font-weight:700;
  font-size:32px;
  color:var(--wbrb-purple);
  letter-spacing:-0.02em;
  margin:10px 0 8px;
}
#wbrb-wrap .wbrb-s-msg{
  font-size:14.5px;
  line-height:1.6;
  color:var(--wbrb-body);
  max-width:400px;
  margin:0 auto 8px;
}
#wbrb-wrap .wbrb-s-paws{
  font-size:20px;
  letter-spacing:6px;
  margin:14px 0 6px;
}
#wbrb-wrap .wbrb-success-card-mini{
  background:var(--wbrb-wash);
  border:1.6px solid var(--wbrb-border);
  border-radius:14px;
  padding:14px 16px;
  margin:18px auto 4px;
  max-width:400px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
}

/* Change 316 — Book your Free Assessment CTA on the success screen, shown
 * ONLY when the customer has no intro booking on file (queried server-side
 * against wp_wbib_bookings). Brand-pink gradient card with arrow so it
 * reads as the next ACTION. The "What happens next" card sits below it
 * as the timeline; this is the next ASK. */
#wbrb-wrap .wbrb-book-cta{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  background:linear-gradient(135deg, #FCE3F0 0%, #FBD3E8 100%);
  border:1.8px solid var(--wbrb-pink);
  border-radius:14px;
  padding:16px 18px;
  margin:18px auto 6px;
  max-width:400px;
  text-align:left;
  box-shadow:0 8px 22px rgba(235,78,155,.18);
  transition:transform .18s var(--wbrb-ease), box-shadow .22s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-book-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(235,78,155,.26);
}
#wbrb-wrap .wbrb-book-cta:active{ transform:scale(.985); }
#wbrb-wrap .wbrb-bc-emoji{
  width:46px; height:46px;
  border-radius:13px;
  background:var(--wbrb-pink);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
  color:#fff;
  box-shadow:0 6px 14px rgba(235,78,155,.35);
}
#wbrb-wrap .wbrb-bc-text{ display:flex; flex-direction:column; flex:1; }
#wbrb-wrap .wbrb-bc-main{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--wbrb-purple);
  line-height:1.25;
}
#wbrb-wrap .wbrb-bc-sub{
  display:block;
  font-size:12.5px;
  line-height:1.45;
  color:var(--wbrb-link);
  margin-top:3px;
}
#wbrb-wrap .wbrb-bc-arrow{
  font-size:22px;
  color:var(--wbrb-pink);
  font-weight:700;
  flex-shrink:0;
  transition:transform .18s var(--wbrb-ease);
}
#wbrb-wrap .wbrb-book-cta:hover .wbrb-bc-arrow{ transform:translateX(4px); }
#wbrb-wrap .wbrb-scm-icon{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--wbrb-pink);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  flex-shrink:0;
}
#wbrb-wrap .wbrb-scm-main{ font-size:13.5px; font-weight:700; color:var(--wbrb-purple); }
#wbrb-wrap .wbrb-scm-sub{ font-size:12px; color:var(--wbrb-body); margin-top:1px; }

/* confetti */
#wbrb-wrap .wbrb-confetti{
  position:absolute;
  top:-12px;
  width:9px; height:14px;
  border-radius:2px;
  opacity:0;
  pointer-events:none;
  z-index:40;
}
#wbrb-wrap .wbrb-confetti.go{ animation:wbrb-fall 2.6s var(--wbrb-ease) forwards; }
@keyframes wbrb-fall{
  0%  { opacity:1; transform:translateY(-20px) rotate(0); }
  100%{ opacity:0; transform:translateY(640px) rotate(540deg); }
}

/* footer note */
#wbrb-wrap .wbrb-foot{
  margin-top:20px;
  font-size:11.5px;
  color:var(--wbrb-link);
  text-align:center;
  max-width:620px;
  line-height:1.5;
}
#wbrb-wrap .wbrb-foot strong{ color:var(--wbrb-purple); }

/* the invisible reCAPTCHA host must never take up layout space */
#wbrb-recaptcha{ display:none !important; }

/* ====== responsive ====== */
@media (max-width:430px){
  #wbrb-wrap{ padding:14px 8px 36px; }
  #wbrb-wrap .wbrb-wordmark{ font-size:27px; }
  #wbrb-wrap .wbrb-track-wrap{ padding:18px 18px 6px; }
  #wbrb-wrap .wbrb-screen{ padding:24px 20px 22px; }
  #wbrb-wrap .wbrb-q-title{ font-size:25px; }
  #wbrb-wrap .wbrb-field-row{ flex-direction:column; gap:0; }
  #wbrb-wrap .wbrb-section-head{ font-size:19px; }
  #wbrb-wrap .wbrb-dogs-heading{ font-size:19px; }
  #wbrb-wrap .wbrb-hi-emoji{ font-size:34px; }
  #wbrb-wrap .wbrb-opt-tag{ display:none; }
  #wbrb-wrap .wbrb-nav{ gap:9px; }
  #wbrb-wrap .wbrb-btn-primary{ padding:13px 16px; font-size:14.5px; min-width:140px; }
  #wbrb-wrap .wbrb-btn-back{ padding:13px 14px; }
  #wbrb-wrap .wbrb-s-title{ font-size:27px; }
  #wbrb-wrap .wbrb-success-burst{ font-size:50px; }
  #wbrb-wrap .wbrb-beta-badge{ font-size:10px; padding:6px 10px; }
  #wbrb-wrap input.wbrb-perm-name-input{ width:140px; }
  #wbrb-wrap .wbrb-cc-num{ font-size:15px; }
}

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

/* =============================================================================
 *  wbrbModal — styled HTML modal that replaces the native alert/confirm dialogs
 *  (Change 251, per the user-level "no native browser dialogs ever" rule).
 *
 *  These rules deliberately live OUTSIDE the #wbrb-wrap scope — the modal is
 *  appended to <body> so its position:fixed is anchored to the viewport (not
 *  a transformed/contained #wbrb-wrap ancestor) and its z-index escapes any
 *  stacking context the form might create.
 * ===========================================================================*/
.wbrb-modal-backdrop{
  position:fixed; inset:0; z-index:2147483600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(90,17,94,.55);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  padding:20px;
  opacity:0;
  transition:opacity .22s cubic-bezier(.22,.61,.36,1);
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
}
.wbrb-modal-backdrop.wbrb-modal-show{ opacity:1; }
.wbrb-modal-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 24px 60px rgba(90,17,94,.35), 0 4px 14px rgba(90,17,94,.18);
  max-width:480px;
  width:100%;
  padding:30px 30px 24px;
  transform:translateY(20px) scale(.96);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.1);
  color:#6B5570;
  box-sizing:border-box;
}
.wbrb-modal-backdrop.wbrb-modal-show .wbrb-modal-card{
  transform:translateY(0) scale(1);
}
.wbrb-modal-title{
  font-size:21px;
  font-weight:700;
  color:#5A115E;
  letter-spacing:-0.01em;
  margin-bottom:14px;
  line-height:1.25;
}
.wbrb-modal-body{
  font-size:15px;
  line-height:1.55;
  color:#6B5570;
  margin-bottom:24px;
  white-space:normal;
}
.wbrb-modal-actions{
  display:flex; gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.wbrb-modal-btn{
  border:none;
  border-radius:12px;
  font-family:'Roboto', system-ui, -apple-system, sans-serif;
  font-size:14.5px;
  font-weight:600;
  padding:12px 22px;
  min-width:110px;
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wbrb-modal-btn:focus{
  outline:2px solid #EB4E9B;
  outline-offset:2px;
}
.wbrb-modal-btn-primary{
  background:#EB4E9B;
  color:#fff;
  box-shadow:0 8px 20px rgba(235,78,155,.32);
}
.wbrb-modal-btn-primary:hover{
  background:#E62584;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(235,78,155,.40);
}
.wbrb-modal-btn-danger{
  background:#E0556B;
  color:#fff;
  box-shadow:0 8px 20px rgba(224,85,107,.32);
}
.wbrb-modal-btn-danger:hover{
  background:#CC4457;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(224,85,107,.42);
}
.wbrb-modal-btn-cancel{
  background:#fff;
  color:#701576;
  border:1.6px solid #F0D6E6;
}
.wbrb-modal-btn-cancel:hover{
  background:#FDEDF5;
  border-color:#D8B9CE;
}
@media (max-width:480px){
  .wbrb-modal-card{
    padding:24px 22px 20px;
    border-radius:14px;
  }
  .wbrb-modal-title{ font-size:19px; }
  .wbrb-modal-actions{ flex-direction:column-reverse; }
  .wbrb-modal-actions .wbrb-modal-btn{ width:100%; }
}

/* =========================================================================
 *  Change 332 — hide the redundant bare <h1>Register</h1> the page emits
 *  right above the form. It's rendered by the Bricks/theme page-header layer
 *  (post_title with no class) and is redundant with the in-form wordmark
 *  ("Soulmutts" + the brand paw) plus the page <title>. Scoped to body.
 *  page-id-553656 so it never affects /register-old/ or any other page that
 *  legitimately wants its post_title H1.
 * ====================================================================== */
body.page-id-553656 h1:not([class]) {
  display: none !important;
}

/* =========================================================================
 *  Change 333 — hide the IN-FORM .wbrb-brand block (the "Soulmutts" wordmark
 *  + paw mark + "TORONTO · your dog is happier here" tagline that sits at
 *  the top of the form card). The Bricks site header right above the form
 *  ALREADY shows the Soulmutts logo + brand, so the in-form copy is purely
 *  redundant.
 *
 *  Change 334 — clear the Bricks sticky-header overlap properly. The
 *  brx-sticky on-scroll header on this site is 156px tall (top row 36px +
 *  main row 120px) and the wrapping div has `header-overlap--bottom`,
 *  which uses NEGATIVE margin to pull the page's first section under the
 *  header (a pattern designed for hero-image sections that should sit
 *  *behind* a transparent header). /register/ has no hero — the form is
 *  the first content — so the overlap dragged the form's progress bar
 *  underneath the nav menu (owner caught it: "negative it isnt respecting
 *  the header??? you need to add padding").
 *
 *  Fix: push #wbrb-wrap down by 180px (156px header + 24px breathing). Pure
 *  padding on the FORM container (not the article) so the header-overlap
 *  background-image trick the rest of the site uses still works elsewhere.
 *  Page-id-scoped so /register-old/ is untouched.
 * ====================================================================== */
body.page-id-553656 #wbrb-wrap .wbrb-brand {
  display: none !important;
}
body.page-id-553656 #wbrb-wrap {
  margin-top: 240px;        /* Change 335: was 180px (44px breathing) — too tight, "kissing"
                               the header per owner. 240px = 156 header + 84 breathing. */
  scroll-margin-top: 180px; /* anchor scroll lands cleanly below the sticky header + small gap */
}
/* On phones the header collapses to ~70px (top row hidden, just the
   hamburger row); use a proportional ~60px breathing room there. */
@media only screen and (max-width: 768px) {
  body.page-id-553656 #wbrb-wrap {
    margin-top: 130px;       /* Change 335: was 88px — bump for proportional breathing */
    scroll-margin-top: 110px;
  }
}