/* Libélula phone field (scripts/bk-phone.js, 9-oct-2026): country + number read as ONE field.
   Same box as booker's inputs; the dropdown copies the time zone picker (.bk-tzpop). */

.lbp {
  position: relative; display: flex; align-items: stretch; width: 100%; min-height: 46px;
  background: var(--bk-field, #f8f6f0); border: 1px solid var(--bk-line, #e6e0d2); border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.lbp:focus-within, .lbp.is-open { border-color: var(--bk-forest, #2F4A3A); background: #fff; }
.bk-field.has-err .lbp { border-color: #d3a594; }

/* booker's original input: still in the form, never seen */
.lbp .lbp-src {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important;
  margin: -1px !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0;
}

.lbp-btn {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px 0 13px; border: 0; border-radius: 7px 0 0 7px; background: transparent;
  font-size: 15px; color: var(--bk-ink, #2b322b); cursor: pointer; transition: background .15s;
}
.lbp-btn::after { content: ""; position: absolute; right: 0; top: 11px; bottom: 11px; width: 1px; background: var(--bk-line, #e6e0d2); }
.lbp-btn:hover, .lbp-btn[aria-expanded="true"] { background: #f4f1ea; }
.bk .lbp-btn:focus-visible { outline: 2px solid var(--bk-forest, #2F4A3A); outline-offset: -3px; }
.lbp-dial { font-variant-numeric: tabular-nums; }
.lbp-caret { width: 14px; height: 14px; margin-left: -1px; fill: none; stroke: var(--bk-forest, #2F4A3A); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lbp-btn[aria-expanded="true"] .lbp-caret { transform: rotate(180deg); }

.lbp-flag { font-size: 19px; line-height: 1; width: 22px; text-align: center; flex: 0 0 auto; }
.lbp-flag.is-txt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em; width: 24px; padding: 3px 0; border-radius: 4px;
  background: #ebe7dc; color: var(--bk-soft, #6e746b);
}

/* the number: beats booker's `.bk-field input[type="tel"]` (the box carries the border, not the input) */
.bk-field .lbp .lbp-num, .lbp .lbp-num {
  flex: 1 1 auto; min-width: 0; width: auto; min-height: 44px; margin: 0; padding: 11px 14px 11px 12px;
  border: 0; border-radius: 0 7px 7px 0; background: transparent; box-shadow: none; outline: none;
  font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--bk-ink, #2b322b); font-variant-numeric: tabular-nums;
}
.bk-field .lbp .lbp-num:focus, .bk-field.has-err .lbp .lbp-num { border: 0; background: transparent; }

/* dropdown: below the field, as wide as the field */
.lbp-pop {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30;
  background: #fff; border: 1px solid var(--bk-line, #e6e0d2); border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(31, 42, 34, .25); overflow: hidden;
}
.lbp-pop[hidden] { display: none; }
.lbp-search { position: relative; padding: 10px; border-bottom: 1px solid var(--bk-line, #e6e0d2); }
.lbp-search svg { position: absolute; left: 22px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--bk-soft, #6e746b); stroke-width: 1.8; stroke-linecap: round; }
.bk-field .lbp .lbp-q, .lbp .lbp-q {
  width: 100%; height: 40px; min-height: 0; padding: 0 12px 0 36px; margin: 0;
  border: 1px solid var(--bk-line, #e6e0d2); border-radius: 8px; background: var(--bk-field, #f8f6f0);
  font-family: inherit; font-size: 16px; color: var(--bk-ink, #2b322b);
}
.bk-field .lbp .lbp-q:focus { outline: none; border-color: var(--bk-forest, #2F4A3A); background: #fff; }
.lbp-list { list-style: none; margin: 0; max-height: 280px; overflow-y: auto; padding: 6px; scrollbar-width: thin; overscroll-behavior: contain; }
.lbp-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  font-size: 14px; color: var(--bk-ink, #2b322b); cursor: pointer;
}
.lbp-opt:hover, .lbp-opt.is-act { background: #f4f1ea; }
.lbp-opt.is-on { color: var(--bk-forest, #2F4A3A); font-weight: 600; }
.lbp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbp-code { flex: 0 0 auto; color: var(--bk-soft, #6e746b); font-weight: 400; font-variant-numeric: tabular-nums; }
.lbp-opt.is-on .lbp-code { color: var(--bk-forest, #2F4A3A); }
.lbp-empty { padding: 14px 10px; font-size: 14px; color: var(--bk-soft, #6e746b); }

@media (max-width: 640px) {
  .lbp-list { max-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .lbp, .lbp * { transition: none !important; } }