/* PinField container styles */
.metlife-pinfield {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 450px; /* Set a maximum width for larger screens */
  margin: 0 auto; /* Center the component */
  padding: 0;
  box-sizing: border-box;
}

/* Responsive design for smaller screens */
@media screen and (max-width: 449px) {
  .metlife-pinfield {
    max-width: 100%;
  }
}

/* Container for pin inputs */
.metlife-pininput-container {
  display: flex;
  gap: var(--size-4);
  flex-wrap: nowrap;
  justify-content: space-between; /* Distribute space evenly */
}

/* Individual pin input styles */
.metlife-pininput {
  flex: 1; /* Allow inputs to grow and shrink */
  min-width: var(--size-4xl);
  max-width: var(--size-7xl);
  height: var(--size-6xl);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-24);
  font-weight: 400;
  color: var(--color-darkestgray);
  border: none;
  border-bottom: 1.5px solid var(--color-darkmediumgray);
  border-radius: 8px 8px 0 0;
  outline: none;
  background: var(--color-white);
  transition: border-bottom-color 0.25s ease;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.metlife-pininput[type='password'] {
  -webkit-text-security: disc;
  font-family: text-security-disc, var(--font-body);
}

.metlife-pininput:focus {
  border-bottom: 2.5px solid var(--color-mlblue2);
}

.metlife-pininput.metlife-pininput-error {
  border-bottom: 2.5px solid var(--color-basered);
}

.metlife-pininput.metlife-pininput-error:focus {
  border-bottom: 2.5px solid var(--color-basered);
}

/* Hide password reveal button in IE and Edge */
.metlife-pininput::-ms-reveal,
.metlife-pininput::-ms-clear {
  display: none;
}

/* Description and error message styles */
.metlife-pindesc-container {
  padding-top: var(--size-xs);
}

.metlife-description {
  font-family: var(--font-body);
  font-size: var(--font-size-14);
  font-weight: 400;
  color: var(--color-darkestgray);
}

.metlife-description-func {
  font-family: var(--font-body);
  font-size: var(--font-size-16);
  font-weight: 700;
  color: var(--color-mlblue2);
}

.metlife-errormessage {
  font-family: var(--font-body);
  font-size: var(--font-size-12);
  font-weight: 400;
  color: var(--color-basered);
  padding-top: var(--size-xs);
}