/* Improve overall look and feel for the Forgot Password page - aligned with main header */
:root {
    --tf-bg: #f5f6fa;
    --tf-text: #2b2d42;
    --tf-muted: #6c757d;
    --tf-primary: #7D0A0A; /* header maroon */
    --tf-primary-dark: #5a0808;
    --tf-accent: #00cfc9; /* site accent */
    --tf-danger: #e03131;
    --tf-card: #ffffff;
    --tf-border: #e9ecef;
    --tf-shadow: 0 10px 30px rgba(0,0,0,.07);
}

.auth-section {
    background: #fafafa;
    padding: 6vh 0;
}

.email-check-prompt {
    display: none;
    background-color: #fff7f7;
    border: 1px solid var(--tf-border);
    border-left: 4px solid var(--tf-primary);
    border-radius: 8px;
    padding: 16px 18px;
    margin-top: 20px;
    text-align: center;
    box-shadow: var(--tf-shadow);
    animation: fadeIn .3s ease-out;
}

.email-check-prompt i {
    font-size: 24px;
    color: var(--tf-primary);
    margin-bottom: 10px;
}

.email-check-prompt p {
    margin-bottom: 10px;
}

.email-check-prompt .email-address {
    font-weight: bold;
    color: var(--tf-text);
}
.container {
    width: min(520px, 92%);
    padding: 4vh 4vw;
    background: var(--tf-card);
    border: 1px solid var(--tf-border);
    border-radius: 14px;
    box-shadow: var(--tf-shadow);
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 6vh auto;
    position: relative;
}
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tf-primary);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.login-content {
    text-align: center;
    line-height: 2;
}
.login-content h2 {
    font-size: 2rem;
}
.login a {
    color: black;
    text-decoration: none;
}
.login h2 a {
    color: var(--tf-text);
}
.login h2 a:hover { text-decoration: none; }

.login h2 {
    text-align: center;
    margin-bottom: 1vh;
}

.login p {
    color: var(--tf-muted);
    text-align: center;
}
p {
    font-size: 1rem;
}
form {
    margin-top: 5vh;
}
#forgot-password-form .input-container {
    margin-bottom: 16px;
}
#forgot-password-form label {
    font-weight: 600;
    color: var(--tf-text);
}
#email {
    height: 48px;
    width: 100%;
    border-radius: 10px;
    margin-top: 8px;
    border: 1px solid var(--tf-border);
    padding: 0 14px;
    background-color: #fff;
    transition: box-shadow .2s ease, border-color .2s ease, transform .05s ease;
}
#email:hover {
    border-color: #d5d9dc;
}
#email:focus {
    outline: none;
    border-color: var(--tf-primary);
    box-shadow: 0 0 0 4px rgba(125, 10, 10, .15);
}
.reset-container {
    display: flex;
    justify-content: center;
    margin-top: 3vh;
}
#reset-password {
    height: 48px;
    width: 70%;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    border: none;
    border-radius: 12px;
    background-color: var(--tf-primary);
    box-shadow: 0 8px 16px rgba(125, 10, 10, .24);
    transition: transform .06s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease;
    cursor: pointer;
}
#reset-password:hover {
    filter: brightness(.98);
    background-color: var(--tf-primary-dark);
    box-shadow: 0 10px 20px rgba(90, 8, 8, .28);
}
#reset-password:active {
    transform: translateY(1px);
}
.error {
    margin-top: 1vh;
    color: var(--tf-danger);
    font-size: .9rem;
}
.links{
    text-align: center;
    margin-top: 3vh;
}
.links a { color: var(--tf-primary); }
.links a:hover {
    text-decoration: underline;
}

.success-message {
    background: #e6fcf5;
    border: 1px solid #c3fae8;
    color: #0c857c;
    padding: 12px 14px;
    border-radius: 10px;
    margin: 16px 0 0;
    text-align: center;
    box-shadow: var(--tf-shadow);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .container {
        padding: 24px;
        margin: 3vh auto;
        width: 94%;
    }
    .login-content {
        line-height: 1;
    }
    .login-content h2 {
        font-size: 1.4rem;
        margin-bottom: 2vh;
    }
    #reset-password {
        height: 44px;
        font-size: .95rem;
    }
    .links {
        margin-top: 1vh;
    }
}