/* ============================================================
   FEROCIA — Phone field styles
   ------------------------------------------------------------
   Companion to country-codes.js. Kept in its own file so the
   component can be dropped into admin.html or subscribe.html
   without either page growing another inline <style> block.

   Everything is namespaced under .fp- so it cannot collide with
   the existing .ap-, .t- or .form- prefixes.

   Colours come from design-tokens.css. The visual language
   deliberately mirrors .ap-input (9px/12px padding, 8px radius,
   13px/600 Inter, blue focus ring) so the field looks native in
   every form it lands in.
   ============================================================ */

.fp-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  position: relative;
  /* Grid items default to min-width:auto, so a two-column .form-row will
     not let this shrink below its content and the modal overflows
     sideways. Both this and .fp-number need min-width:0 to opt out. */
  min-width: 0;
}

/* ─── Country button ───────────────────────────────────────── */

.fp-country {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 9px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  background: white;
  border: 1px solid var(--divider-color, #ECECEC);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  white-space: nowrap;
}

.fp-country:hover {
  background: rgba(23, 76, 204, 0.015);
  border-color: #c5d6f5;
}

.fp-country:focus-visible {
  outline: none;
  border-color: var(--primary, #174CCC);
  box-shadow: 0 0 0 4px rgba(23, 76, 204, 0.08);
}

.fp-country[aria-expanded="true"] {
  border-color: var(--primary, #174CCC);
  box-shadow: 0 0 0 4px rgba(23, 76, 204, 0.08);
}

.fp-flag { font-size: 15px; line-height: 1; }

.fp-dial {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #6B7280);
}

.fp-caret {
  color: var(--text-light, #9CA3AF);
  flex: 0 0 auto;
  transition: transform .15s;
}

.fp-country[aria-expanded="true"] .fp-caret { transform: rotate(180deg); }

/* ─── Number input ─────────────────────────────────────────── */
/* The consumer passes its own class (.ap-input, .t-new-input …),
   so only layout is set here. Anything that styles the box itself
   would override the host form. */

.fp-number {
  /* basis 0, NOT auto. With `auto` the input claims its intrinsic width
     (~177px by default) as its base size, which together with the country
     button exceeded the column and pushed a horizontal scrollbar into the
     Edit Player modal. */
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

/* Fallback for a mount with no inputClass — keeps the field usable
   instead of falling back to the browser default. */
.fp-number:not([class*="input"]) {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border: 1px solid var(--divider-color, #ECECEC);
  border-radius: 8px;
  color: var(--text-primary, #111827);
  background: white;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.fp-number:not([class*="input"]):focus {
  border-color: var(--primary, #174CCC);
  box-shadow: 0 0 0 4px rgba(23, 76, 204, 0.08);
}

/* ─── Hint line ────────────────────────────────────────────── */
/* Empty by default and collapsed to nothing, so an inactive field
   does not reserve vertical space in tight forms. */

.fp-hint {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 0;
  min-height: 0;
  color: var(--text-secondary, #6B7280);
  transition: min-height .12s;
}

.fp-hint:not(:empty) { margin-top: 5px; min-height: 15px; }
.fp-hint.is-warn { color: #C04A0E; }
.fp-hint.is-info { color: var(--text-secondary, #6B7280); }

/* ─── Dropdown ─────────────────────────────────────────────── */

.fp-menu {
  /* FIXED, not absolute, and positioned from JavaScript.
     Absolute positioning resolves against the nearest positioned
     ancestor. This markup sits inside modals and scroll containers that
     do not always provide one, so the menu was landing at the bottom of
     the page — and where an ancestor had overflow:hidden it was clipped
     or painted underneath the sidebar. Fixed positioning escapes every
     ancestor's stacking and clipping context. openMenu() sets top/left. */
  position: fixed;
  top: 0;
  left: 0;
  /* Above the highest z-index in admin.html (10001). */
  z-index: 10050;
  width: 280px;
  background: white;
  border: 1px solid var(--divider-color, #ECECEC);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
  overflow: hidden;
}

.fp-menu[hidden] { display: none; }

.fp-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  background: var(--neutral-bg, #F8FAFC);
  border: 0;
  border-bottom: 1px solid var(--divider-color, #ECECEC);
  outline: none;
}

.fp-search::placeholder { color: var(--text-light, #9CA3AF); font-weight: 500; }

.fp-list { max-height: 240px; overflow-y: auto; padding: 4px; }

.fp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}

.fp-opt:hover { background: rgba(23, 76, 204, 0.06); }

.fp-opt.is-active {
  background: var(--primary-light, rgba(23, 76, 204, 0.10));
  color: var(--primary, #174CCC);
}

.fp-opt-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fp-opt-dial {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #6B7280);
  font-size: 12px;
}

.fp-opt.is-active .fp-opt-dial { color: var(--primary, #174CCC); }

/* Divider between the pinned countries and the alphabetical rest. */
.fp-sep {
  height: 1px;
  margin: 5px 9px;
  background: var(--divider-color, #ECECEC);
}

.fp-empty {
  padding: 14px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light, #9CA3AF);
  text-align: center;
}

/* ─── Narrow screens ───────────────────────────────────────── */

@media (max-width: 520px) {
  .fp-menu { width: 100%; }
  .fp-country { padding: 9px 8px; }
  .fp-dial { font-size: 12px; }
}