@import url('/request-appointment/css/theme-tokens.css');

.contact-verification {
  background: #f6faf9;
  border: 1px solid #cbded8;
  border-left: 4px solid #11718a;
  border-radius: 6px;
  margin: 1rem 0 0;
  padding: 1rem;
}

.contact-verification-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.contact-verification-heading strong {
  color: var(--pp-heading-text);
  display: block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 1rem;
}

.contact-verification-heading p {
  color: var(--pp-muted-text);
  font-size: .9rem;
  margin: .2rem 0 0;
}

.contact-verification-badge {
  background: #e8eef1;
  border-radius: 999px;
  color: #536873;
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 800;
  padding: .3rem .55rem;
  text-transform: uppercase;
}

.contact-verification-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .85rem;
}

.contact-verification-methods {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.contact-verification-methods label {
  margin: 0;
}

.contact-verification-methods input {
  opacity: 0;
  position: absolute;
}

.contact-verification-methods span {
  align-items: center;
  background: #fff;
  border: 1px solid #bdccd1;
  border-radius: 4px;
  color: #243f4b;
  cursor: pointer;
  display: inline-flex;
  font-size: .88rem;
  font-weight: 700;
  gap: .4rem;
  min-height: 40px;
  padding: .45rem .75rem;
}

.contact-verification-methods input:checked + span {
  border-color: #11718a;
  box-shadow: inset 0 0 0 1px #11718a;
  color: #07596d;
}

.contact-verification-methods input:focus + span {
  box-shadow: 0 0 0 .2rem rgba(17, 113, 138, .2);
}

.contact-verification-methods input:disabled + span {
  cursor: not-allowed;
  opacity: .45;
}

.contact-verification-send {
  min-height: 40px;
}

.contact-verification-code {
  margin-top: .85rem;
}

.contact-verification-code > label {
  color: var(--pp-heading-text);
  display: block;
  font-size: .86rem;
  font-weight: 800;
  margin-bottom: .35rem;
}

.contact-verification-code > div {
  display: flex;
  gap: .5rem;
}

.contact-verification-code input {
  font-size: 1.1rem;
  letter-spacing: 0;
  max-width: 12rem;
  min-height: 42px;
}

.contact-verification-code .btn {
  min-height: 42px;
}

.contact-verification-status {
  color: var(--pp-muted-text);
  font-size: .86rem;
  font-weight: 700;
  margin: .75rem 0 0;
}

.contact-verification.is-pending {
  border-left-color: #b7791f;
}

.contact-verification.is-pending .contact-verification-badge {
  background: #fff4d6;
  color: #72510d;
}

.contact-verification.is-verified {
  border-left-color: #27604f;
}

.contact-verification.is-verified .contact-verification-badge {
  background: #e2f3e9;
  color: #1f4d3f;
}

.contact-verification.is-verified .contact-verification-status {
  color: #1f4d3f;
}

.contact-verification.is-error {
  border-left-color: var(--pp-danger);
}

.contact-verification.is-error .contact-verification-status {
  color: #8a1f16;
}

.contact-verification--appointment-step {
  border-left-width: 3px;
  margin-top: .75rem;
  padding: .85rem;
}

.contact-verification--appointment-step .contact-verification-heading {
  align-items: center;
}

.contact-verification--appointment-step .contact-verification-heading p {
  font-size: .84rem;
}

.contact-verification--appointment-step .contact-verification-methods {
  display: none;
}

.contact-verification--appointment-step .contact-verification-controls {
  margin-top: .7rem;
}

.contact-verification--appointment-step.is-verified .contact-verification-controls,
.contact-verification--appointment-step.is-verified .contact-verification-code {
  display: none;
}

.contact-verification--appointment-step .contact-verification-status {
  margin-top: .55rem;
}

@media (max-width: 575.98px) {
  .contact-verification-heading,
  .contact-verification-code > div {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-verification-badge {
    align-self: flex-start;
  }

  .contact-verification-controls,
  .contact-verification-methods,
  .contact-verification-send,
  .contact-verification-code input,
  .contact-verification-code .btn {
    max-width: none;
    width: 100%;
  }

  .contact-verification-methods label {
    flex: 1 1 0;
  }

  .contact-verification-methods span {
    justify-content: center;
    width: 100%;
  }

  .contact-verification--appointment-step .contact-verification-heading {
    align-items: flex-start;
  }
}