/* Status of phoneNumberVerified, drawn beside phoneNumber on the user page.
   Login profile forms (update profile after the activation email included)
   have no account-console wrapper, so the raw true/false row is hidden. */

html.login-pf .pf-v5-c-form__group:has(label[for="phoneNumberVerified"]),
html.login-pf .pf-v6-c-form__group:has(label[for="phoneNumberVerified"]),
html.login-pf .pf-c-form__group:has(label[for="phoneNumberVerified"]) {
  display: none !important;
}

.pf-v5-c-form__group-control:has(> .acmonza-phone-status),
.pf-v6-c-form__group-control:has(> .acmonza-phone-status),
.pf-c-form__group-control:has(> .acmonza-phone-status) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.65rem;
  row-gap: 0.75rem;
}

.pf-v5-c-form__group-control:has(> .acmonza-phone-status) > .pf-v5-c-form-control,
.pf-v6-c-form__group-control:has(> .acmonza-phone-status) > .pf-v6-c-form-control,
.pf-c-form__group-control:has(> .acmonza-phone-status) > .pf-c-form-control,
.pf-v5-c-form__group-control:has(> .acmonza-phone-status) > input,
.pf-v6-c-form__group-control:has(> .acmonza-phone-status) > input,
.pf-c-form__group-control:has(> .acmonza-phone-status) > input {
  flex: 1 1 12rem;
  width: auto;
  min-width: min(100%, 12rem);
}

.pf-v5-c-form__group-control:has(> .acmonza-phone-status) > :not(input):not(select):not(textarea):not(.pf-v5-c-form-control):not(.pf-v6-c-form-control):not(.pf-c-form-control):not(.acmonza-phone-status):not(#acmonza-phone-change),
.pf-v6-c-form__group-control:has(> .acmonza-phone-status) > :not(input):not(select):not(textarea):not(.pf-v5-c-form-control):not(.pf-v6-c-form-control):not(.pf-c-form-control):not(.acmonza-phone-status):not(#acmonza-phone-change),
.pf-c-form__group-control:has(> .acmonza-phone-status) > :not(input):not(select):not(textarea):not(.pf-v5-c-form-control):not(.pf-v6-c-form-control):not(.pf-c-form-control):not(.acmonza-phone-status):not(#acmonza-phone-change) {
  flex: 1 0 100%;
  margin-top: 0;
}

.pf-v5-c-form__group-control:has(> .acmonza-phone-status) > #acmonza-phone-change,
.pf-v6-c-form__group-control:has(> .acmonza-phone-status) > #acmonza-phone-change,
.pf-c-form__group-control:has(> .acmonza-phone-status) > #acmonza-phone-change {
  flex: 0 0 100%;
  width: fit-content;
  max-width: max-content;
  margin-top: 0;
}

.acmonza-phone-status {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: help;
}

.acmonza-phone-status:focus {
  outline: none;
}

.acmonza-phone-status:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

.acmonza-phone-status[data-state="verified"] {
  color: #0c5c32;
  background: #e5f6ec;
  border-color: #9dceb0;
}

.acmonza-phone-status[data-state="verified"]:hover,
.acmonza-phone-status[data-state="verified"]:focus-visible {
  background: #d7f0e2;
}

.acmonza-phone-status[data-state="unverified"] {
  color: #7a3400;
  background: #fff4e4;
  border-color: #e6c49a;
}

.acmonza-phone-status[data-state="unverified"]:hover,
.acmonza-phone-status[data-state="unverified"]:focus-visible {
  background: #ffe8c7;
}

.acmonza-phone-status__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.acmonza-phone-status__tip {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% + 0.45rem);
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: 0.4rem 0.6rem;
  border-radius: 2px;
  background: #111111;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.acmonza-phone-status:hover .acmonza-phone-status__tip,
.acmonza-phone-status:focus .acmonza-phone-status__tip {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .acmonza-phone-status__tip {
    transition: none;
  }
}