/**
 * Custom styles for password reset forms in the Exotic React App
 * Provides dark theme styling consistent with the application design
 */

/* Main form container with dark background */
.password-reset-form {
    background: #000;
    color: #fff;
}

/* Input field styling with dark theme */
.password-reset-form input {
    background: #1A1820;                    /* Dark input background */
    border: 1px solid #1A1820;              /* Matching border */
    border-bottom: 2px solid transparent;    /* Transparent bottom border for focus effect */
    transition: border-bottom-color 0.2s ease;
}

/* Focus state with brand color accent */
.password-reset-form input:focus {
    border-bottom: 2px solid #AC99FF;       /* Brand blue bottom border on focus */
    outline: none;                          /* Remove default outline */
}

/* Primary button with gradient background */
.password-reset-form .btn-primary {
    background: linear-gradient(251.65deg, #732DCD -46.78%, #7E4EFA 72.2%);
}

/* Hover effect for primary button */
.password-reset-form .btn-primary:hover {
    opacity: 0.9;                           /* Slight opacity change on hover */
}

/* Back link styling with muted color */
.password-reset-form .back-link {
    color: #8D8D9C;                         /* Muted gray color */
    transition: color 0.2s ease;           /* Smooth color transition */
}

/* Hover effect for back link */
.password-reset-form .back-link:hover {
    color: #fff;                            /* White color on hover */
}