/* ==========================================================================
   BLADE PHONE FIELD
   ==========================================================================
   The country picker on the server-rendered forms — registration and public
   support. The React application has its own, in index.css; this is the same
   idea for pages that have no build step, and it matches .input-group so the two
   do not look like different applications.

   The arrangement is the one react-phone-number-input uses, and for the same
   reason. A <select> is what a person actually operates: it is keyboard
   navigable, it is announced correctly, and it works on a phone. So the real
   select is laid transparently over a drawn flag, and what looks like a button
   is a select underneath.

   Transparent, not display:none. A hidden select cannot be clicked, and one
   removed from the tab order cannot be reached at all — which would take the
   country choice away from exactly the people a native select is there for. The
   flag beside it is marked decorative, because the select is what carries the
   country and what gets announced. */

.blade-phone-field__control {
  position: relative;
  display: flex;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.blade-phone-field__control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.25);
  background: rgba(0, 0, 0, 0.4);
}

/* The flag. Sits inside the field rather than beside a border of its own, so it
   needs its own left padding — there is no box around it to pad. */
.blade-phone-field__flag {
  align-self: center;
  margin-left: 12px;
  margin-right: 6px;
  border-radius: 2px;
  pointer-events: none;
  /* Hidden until the script has read which country to draw, so a visitor with
     JavaScript off does not see a gap where the flag would be. */
}

.blade-phone-field__flag[hidden] {
  display: none;
}

/* The invisible select over the flag. Transparent rather than hidden, because a
   hidden select cannot be clicked. */
.blade-phone-field__country {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.blade-phone-field__country:disabled {
  cursor: default;
}

/* The select is 46px wide, and it has to stay that way.
   auth.css lays every control inside `.auth-form` out at `width: 100%`, and
   `.auth-form select` is (0,1,1) against this rule's (0,1,0) — so the generic
   rule won, the select became as wide as the whole field, and it covered the
   number input completely. Measured on /register: the select was 396px wide
   over a 356px number field, and all 94 sample points across that field
   returned the select. Clicking the phone field opened the country list and no
   number could be typed.

   Scoping to the control makes this (0,2,0), which beats the generic rule on
   specificity alone — and specificity is the only thing left to settle it.
   auth.css ships inside the Vite bundle, whose <link> register.blade.php emits
   *after* the one for this file, so the generic rule is later in document order
   too and wins on that count as well. Nothing about the loading order favours
   this file. Reaching for !important would be the wrong trade: what both rules
   disagree about is the width of this field, and the narrower selector is
   exactly that claim. */
.blade-phone-field__control .blade-phone-field__country {
  width: 46px;
}

/* The number. Shares the field's surface with the flag, so it has no border of
   its own — a second one would read as a second input inside the first. */
.blade-phone-field__control input[type='tel'] {
  flex: 1;
  min-width: 0;
  padding: 12px 16px 12px 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-main);
}

.blade-phone-field__control input[type='tel']:focus {
  outline: none;
}

.blade-phone-field__control input[type='tel']::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.blade-phone-field__hint {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}