/* ==========================================================================
   Al Afifah — country code + phone number field
   --------------------------------------------------------------------------
   Layout only. The two controls carry the host page's own input classes
   (.input on the panel, .auth-input on the sign-in pages), so the field
   inherits whichever look it lands in and this file never has to know which.

   Rules are written as `.phone-field .phone-field__x` rather than on the
   single class: auth.css sets width on `.auth-form .auth-input`, and a
   one-class selector would lose to it and leave the country select full
   width. Two classes match that weight, and this file loads afterwards.
   ========================================================================== */

.phone-field {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* Fixed width, so a long country name cannot push the number input down to
   nothing. Room for the number is bought by giving the field a full-width row
   on register.php instead of by trimming the label.

   NO "overflow: hidden" here, ever. On the public pages main.js runs
   $("select").niceSelect(), which replaces this select with a div and copies
   the select's classes onto it — so every rule below lands on that div too,
   and its dropdown is a "position: absolute; top: 100%" list *inside* it.
   Clipping the box clips the list to nothing, and the field reads as a
   dropdown that refuses to open. */
.phone-field .phone-field__cc {
  flex: 0 0 auto;
  width: 178px;
  min-width: 0;
  white-space: nowrap;

  /* auth.css strips the native arrow with appearance:none, panel.css does
     not — drawn here so the select looks the same on both. */
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c89a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px 15px;
}

.phone-field .phone-field__num {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ------------------------------------------- Nice Select, where it runs -- */

/* The public pages hand every select to jQuery Nice Select. Nothing here
   fights that — the plugin keeps the real select in sync and phone-field.js
   reads it as before — but its list is one <li> per country with no height
   limit, which for two hundred countries is a menu several screens long.
   Capped and scrolled, and only for this field. */
.phone-field .nice-select .list {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* The plugin draws its own caret, and the div inherited ours along with the
   class — two arrows on one box. Ours stands down where the plugin runs. */
.phone-field .nice-select.phone-field__cc {
  background-image: none;
}

/* The panel pages (place-order.php, customer/profile.php) never load main.js,
   so there the same markup stays a native select and none of this applies. */

/* Doubles as the "still too short" warning, so it changes colour rather than
   a second element appearing and shifting the form as you type. */
.phone-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #7c89a5;
}

.phone-hint.is-short {
  color: #9c2020;
}

/* The two used to stack below this width. They stay on one line now — that is
   the layout that was asked for — and the country box gives up the width
   instead, since the number is the half you have to be able to read back.
   The name clips; the open list is where it is read in full anyway. */
@media (max-width: 520px) {
  .phone-field { gap: 6px; }
  .phone-field .phone-field__cc { width: 128px; padding-right: 26px; }
}