/* Minimal, Bootstrap-friendly styles for the phone widget */
.phone-field { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; }

.phone-field .flag-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(0,0,0,.125); border-radius: .375rem; background: #fff;
  padding: .375rem .5rem; line-height: 1.5; cursor: pointer; min-width: 9rem;
}
.phone-field .flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.phone-field .caret { margin-left: .25rem; font-size: .85em; }

.phone-field .tel-input { width: 100%; }
.phone-field .len { color: #6c757d; }

.phone-field .cc-menu[hidden] { display: none !important; }
.phone-field .cc-menu {
  position: absolute; z-index: 1050; top: calc(100% + 4px); left: 0; right: auto; min-width: 280px; max-width: 420px;
  background: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  max-height: 320px; overflow: auto; padding: .5rem; grid-column: 1 / span 2;
}

.phone-field .cc-search { padding: .25rem; position: sticky; top: 0; background: #fff; }
.phone-field .cc-search input {
  width: 100%; border: 1px solid rgba(0,0,0,.125); border-radius: .375rem; padding: .375rem .5rem;
}

.phone-field .cc-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.phone-field .cc-item {
  display: grid; grid-template-columns: 22px 1fr auto; gap: .5rem; align-items: center;
  padding: .375rem .5rem; border-radius: .375rem; cursor: pointer;
}
.phone-field .cc-item:hover, .phone-field .cc-item[aria-selected="true"] { background: #f8f9fa; }

.phone-field .pf-debug { margin-top: .25rem; color: #6c757d; font-size: .875rem; }