/*! bl-phone.css — international phone input (2026-08-22)
    Self-contained and namespaced .blp-*, because this loads inside the booking
    widget (which has its own design language) AND the CRM (which has another).
    It inherits font and colour from whatever wraps it rather than imposing
    either, so it looks native in both. */
.blp{ position:relative; display:flex; align-items:stretch; width:100%;
  border:1.5px solid var(--blp-border,#d4d4d8); border-radius:var(--blp-radius,12px);
  background:var(--blp-bg,#fff); overflow:visible; font:inherit; }
.blp:focus-within{ border-color:var(--blp-focus,#6E2639);
  box-shadow:0 0 0 3px var(--blp-ring,rgba(110,38,57,.10)); }
.blp.blp-bad{ border-color:#DC2626 }

.blp-btn{ display:flex; align-items:center; gap:6px; flex:none; border:0; cursor:pointer;
  background:transparent; padding:0 10px 0 12px; font:inherit; color:inherit;
  border-right:1px solid var(--blp-border,#e4e4e7); border-radius:inherit; }
.blp-flag{ font-size:17px; line-height:1 }
.blp-code{ font-size:14px; font-weight:600; color:var(--blp-ink,#3f3f46); font-variant-numeric:tabular-nums }
.blp-caret{ font-size:9px; opacity:.5 }

.blp-input{ flex:1; min-width:0; border:0; outline:0; background:transparent;
  padding:13px 14px; font:inherit; font-size:16px; color:var(--blp-ink,#18181b); }
.blp-input::placeholder{ color:var(--blp-muted,#a1a1aa); opacity:1 }

/* the picker floats — it must clear the field, not push the form around */
.blp-pop{ display:none; position:absolute; z-index:70; top:calc(100% + 6px); left:0;
  width:min(320px,100%); max-height:290px; overflow:hidden; flex-direction:column;
  background:var(--blp-bg,#fff); border:1px solid var(--blp-border,#e4e4e7);
  border-radius:12px; box-shadow:0 12px 34px rgba(16,18,27,.18); }
.blp-open .blp-pop{ display:flex }
/* 16px, not 14 — iOS zooms the entire page the instant a field under 16px takes
   focus, and this one is inside a popover, so the zoom lands the visitor
   somewhere else entirely. Every input in this component is 16px for that one
   reason. */
.blp-search{ border:0; border-bottom:1px solid var(--blp-border,#e4e4e7); outline:0;
  padding:12px 13px; font:inherit; font-size:16px; background:transparent; color:inherit }
.blp-list{ overflow-y:auto; overscroll-behavior:contain }
.blp-item{ display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; font-size:14px }
.blp-item:hover{ background:var(--blp-hover,rgba(0,0,0,.05)) }
.blp-item.on{ background:var(--blp-sel,rgba(110,38,57,.09)); font-weight:600 }
.blp-i-f{ font-size:16px; flex:none }
.blp-i-n{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.blp-i-c{ color:var(--blp-muted,#a1a1aa); font-variant-numeric:tabular-nums; flex:none }
.blp-none{ padding:16px 13px; font-size:13px; color:var(--blp-muted,#a1a1aa) }

/* 16px on the visible field is deliberate — anything smaller makes iOS zoom the
   whole page the moment it is focused */
@media (max-width:760px){ .blp-pop{ width:100% } }

/* ── the picker must never sit on top of the form's primary button ────────────
   It opened directly below the field, which on the contact step is exactly
   where Continue is: measured popup y 359-649 against a button at y 402-455,
   with elementFromPoint over the button returning a country row. Tapping
   Continue therefore selected a country instead of submitting, and the form
   read as frozen.

   On phones it is now a bottom sheet — anchored to the viewport, above
   everything, with its own backdrop. It cannot be mistaken for the button
   underneath and a tap on the backdrop dismisses it. */
@media (max-width: 767px) {
  .blp-open::before {
    content: ""; position: fixed; inset: 0; z-index: 9999995;
    background: rgba(0,0,0,.45);
  }
  .blp-open .blp-pop {
    position: fixed; z-index: 9999996;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none; max-height: 62vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.45);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .blp-open .blp-search { font-size: 16px; padding: 15px 16px; }
  .blp-open .blp-item { padding: 13px 16px; min-height: 44px; }
}
/* Desktop: keep the dropdown, but cap it so it cannot swallow the button below. */
@media (min-width: 768px) { .blp-pop { max-height: 240px; } }