/* ActiveClinic shared PhoneField (country + national) */
.ac-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ac-phone-field {
  display: block;
  width: 100%;
  min-width: 0;
}

.ac-phone-field__row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.ac-phone-field__country {
  position: relative;
  flex: 0 0 auto;
  min-width: 6.25rem;
  max-width: 42%;
}

.ac-country-picker .ac-phone-field__country {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.ac-phone-field__country-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: var(--ac-control-h, var(--ac-touch, 2.75rem));
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--acp-border, var(--ac-border, #d5e0e3));
  border-radius: var(--ac-radius-md, 10px);
  background: var(--acp-surface, var(--ac-surface, #fff));
  color: var(--acp-ink, var(--ac-ink, #1a2b2f));
  font: inherit;
  cursor: pointer;
}

.ac-phone-field__country-btn:focus-visible {
  outline: 3px solid var(--ac-focus, #1d59c1);
  outline-offset: 2px;
}

.ac-phone-field__flag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
  flex: 0 0 auto;
}

.ac-phone-field__code {
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-country-picker .ac-phone-field__code {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.ac-phone-field__chevron {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.75rem;
  flex: 0 0 auto;
}

.ac-phone-field__national {
  flex: 1 1 auto;
  min-width: 0;
}

.ac-phone-field__input {
  width: 100%;
  min-height: var(--ac-control-h, var(--ac-touch, 2.75rem));
}

.ac-phone-field__input.is-invalid {
  border-color: var(--ac-danger, #b42318);
}

.ac-phone-field__backdrop {
  display: none;
}

.ac-phone-field__popover {
  position: absolute;
  z-index: var(--ac-z-popover, 40);
  top: calc(100% + 0.25rem);
  left: 0;
  width: min(22rem, 85vw);
  max-height: 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--acp-border, var(--ac-border, #d5e0e3));
  border-radius: var(--ac-radius-md, 12px);
  background: var(--acp-surface, var(--ac-surface, #fff));
  box-shadow: var(--ac-shadow-sm, 0 12px 28px rgba(15, 40, 45, 0.12));
}

.ac-phone-field__popover[hidden],
.ac-phone-field__backdrop[hidden] {
  display: none !important;
}

.ac-phone-field__search {
  width: 100%;
  min-height: 2.75rem;
}

.ac-phone-field__options {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-height: 12rem;
}

.ac-phone-field__option {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ac-phone-field__option:hover,
.ac-phone-field__option:focus-visible {
  background: rgba(0, 60, 144, 0.08);
  outline: 3px solid var(--ac-focus, #1d59c1);
  outline-offset: -2px;
}

.ac-phone-field__option.is-selected {
  background: rgba(0, 60, 144, 0.12);
  font-weight: 600;
}

.ac-phone-field__option-flag {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.8;
}

.ac-phone-field__option-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ac-phone-field__option-code {
  color: var(--ac-muted, #5b6d72);
  white-space: nowrap;
}

.ac-phone-field__mode-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--ac-warning, #b54708);
}

.ac-phone-field__hint,
.ac-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ac-muted, #5b6d72);
}

.ac-field-error {
  margin: 0.35rem 0 0;
  color: var(--ac-danger, #b42318);
  font-size: 0.875rem;
}

body.ac-phone-sheet-open {
  overflow: hidden;
}

/* Phase 8 — keep country + national on one row at 360–480 */
@media (max-width: 480px) {
  .ac-phone-field__row {
    flex-direction: row;
  }
  .ac-phone-field__country {
    min-width: 5.5rem;
    max-width: 38%;
  }
}

/* Phase 8 — full-bleed country bottom sheet */
@media (max-width: 430px) {
  .ac-phone-field__backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(11, 28, 48, 0.42);
  }

  .ac-phone-field__popover {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--ac-keyboard-inset, 0px);
    width: auto;
    max-width: none;
    max-height: min(70vh, 28rem);
    z-index: 80;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.75rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  .ac-phone-field__options {
    max-height: min(48vh, 18rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ac-phone-field__option {
    min-height: 2.75rem;
  }
}