/* ═══════════════════════════════════════════════════════════════
   WholesaleKit — Nordic phone input
   Shared by the admin dashboard and the frontend signup form.
   Uses --wk-* tokens where present, with neutral fallbacks so it
   also blends into a storefront theme.
   ═══════════════════════════════════════════════════════════════ */

/* Rutnät i stället för flex: landskoden får en fast spalt och kan inte
   svälla ut även om temat sätter `select { width: 100% }`. */
.gk-phone {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.gk-phone-cc {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
  background-color: var(--wk-surface-alt, #f7f7f8);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  text-align: left;
}

.gk-phone-nat {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* Keep the joined edge visually seamless when the text field is focused. */
.gk-phone:focus-within .gk-phone-cc {
  border-color: var(--wk-primary, #d90f44);
}