/******************************************************************/
/* RESET.CSS - Password reset page styles                         */
/* Version: 0.0.2                                                 */
/******************************************************************/

/* ================================================================
   MESSAGE POSITIONING FIX
   Prevents error/success message from overlapping form content
   when the form expands (security question/answer fields shown).
   ================================================================ */

/* Make the UpdatePanel content a flex container for reordering */
.login-card form > div > [id$="Reset"] {
    display: flex;
    flex-direction: column;
}

/* Override absolute positioning - place message above form content */
.login-card [id$="Reset"] .login-message-below {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
    order: -1;
    margin-bottom: 1rem;
}

/* ================================================================
   MOBILE STYLES
   ================================================================ */

@media (max-width: 768px) {
    /* Stack input and button without shrinking the textbox */
    #Form_Content .input-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    #Form_Content .input-group .form-control {
        width: 100%;
    }

    /* Reuse .btn-login styles 1:1 for GO */
    .btn-login,
    #get_question_Button {
        background: linear-gradient(135deg, #2E86AB 0%, #4A9BC7 100%);
        border: none;
        border-radius: 10px;
        padding: 12px;
        font-weight: 600;
        color: #fff;
        width: 100%;
    }

    .btn-login:hover,
    #get_question_Button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(46, 134, 171, 0.4);
        background: linear-gradient(135deg, #1B5E7F 0%, #2E86AB 100%);
        color: #fff;
    }

    .btn-login:focus-visible,
    #get_question_Button:focus-visible {
        outline: 2px solid #000;
        outline-offset: 2px;
        box-shadow: 0 0 0 0.2rem rgba(107, 205, 255, 0.5);
    }

    /* Message positioning for mobile */
    .login-card [id$="Reset"] .login-message-below {
        padding-left: 0;
        padding-right: 0;
    }
}