.page-header{
    background-image: url("../src/images/desktop/desktop-header-password-recuperation.jpg");
}

/*Header Mobile*/
@media (max-width: 768px) {
  .page-header{
    background-image: url("../src/images/mobile/mobile-header-password-recuperation.jpg");/*Image mobile version*/
  }
}


.code-container {
    display: flex;
    gap: 15px; /* Space between input fields */
    justify-content: center;
    margin-bottom: 40px;
}

.code-input {
    width: 55px; /* Width of each input box */
    height: 70px; /* Height of each input box */
    border: none;
    border-bottom: 3px solid #ced4da; /* The line under the character */
    text-align: center;
    font-size: 2.8rem; /* Large font for the character */
    font-weight: 500;
    text-transform: uppercase; /* Ensure typed characters are uppercase */
    outline: none; /* Remove default focus outline */
    transition: border-color 0.3s ease;
    caret-color: #0d6efd; /* Color of the text cursor */
}

.code-input:focus {
    border-color: #0d6efd; /* Blue line on focus */
}

/* Hide spin buttons on number inputs for a cleaner look */
.code-input::-webkit-outer-spin-button,
.code-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.code-input[type=number] {
    -moz-appearance: textfield;
}

/* Styles for the new resend link container */
.resend-container {
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 0.95rem;
    color: #6c757d; /* Neutral gray color */
}

#resend-link {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* Style for the link when it's disabled (during countdown) */
#resend-link.disabled {
    color: #6c757d;
    cursor: not-allowed;
    text-decoration: none;
}