/* PhoneInput Molecule - Country selector + formatted phone input */

.phone-input-wrapper {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}

/* Country selector */
.phone-input-country {
  flex: 0 0 auto;
  width: auto;
  min-width: 6rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--duration-200) var(--easing-out);
}

.phone-input-country:hover {
  border-color: var(--border-hover);
}

.phone-input-country:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring-shadow);
}

.phone-input-country:disabled {
  background-color: var(--bg-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Display input (formatted number) */
.phone-input-display {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-sans);
  font-size: var(--text-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--bg-surface);
  border: var(--border-width-1) solid var(--border-default);
  border-radius: var(--border-radius-md);
  transition: all var(--duration-200) var(--easing-out);
}

.phone-input-display:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring-shadow);
}

.phone-input-display:disabled {
  background-color: var(--bg-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.phone-input-display::placeholder {
  color: var(--text-muted);
}
/* Size variants */
.phone-input-sm .phone-input-country,
.phone-input-sm .phone-input-display {
  padding: var(--space-1_5) var(--space-2_5);
  font-size: var(--text-xs);
}

.phone-input-sm .phone-input-country {
  min-width: 5rem;
}

.phone-input-lg .phone-input-country,
.phone-input-lg .phone-input-display {
  padding: var(--space-2_5) var(--space-4);
  font-size: var(--text-base);
}

.phone-input-lg .phone-input-country {
  min-width: 6rem;
}

/* Disabled wrapper state */
.phone-input-disabled .phone-input-country,
.phone-input-disabled .phone-input-display {
  background-color: var(--bg-muted);
  cursor: not-allowed;
  opacity: 0.7;
}