/*
==================================================
HireNova
Forgot Password Page
Professional Production CSS
Desktop + Tablet + Mobile
==================================================
*/


/* =================================================
   ROOT VARIABLES
================================================= */

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-deep: #1e3a8a;
    --primary-soft: #eff6ff;

    --text: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;

    --white: #ffffff;

    --background: #f8fafc;

    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --success: #15803d;
    --success-bg: #f0fdf4;
    --success-border: #bbf7d0;

    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;

    --warning: #b45309;
    --warning-bg: #fffbeb;
    --warning-border: #fde68a;

    --shadow-sm:
        0 4px 15px
        rgba(15, 23, 42, 0.06);

    --shadow-lg:
        0 25px 70px
        rgba(15, 23, 42, 0.12);

    --radius-lg: 28px;

    --radius-md: 16px;

    --radius-sm: 12px;

}


/* =================================================
   GLOBAL RESET
================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    min-height: 100%;

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;

    color:
        var(--text);

    background:
        var(--background);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


/* =================================================
   PAGE WRAPPER
================================================= */

.forgot-page {

    position: relative;

    width: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        50px 24px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(37, 99, 235, 0.08),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(79, 70, 229, 0.07),
            transparent 32%
        ),

        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eff6ff 50%,
            #f8fafc 100%
        );

}


/* =================================================
   BACKGROUND DECORATIVE SHAPES
================================================= */

.background-shape {

    position: absolute;

    z-index: 0;

    pointer-events: none;

    border-radius: 50%;

    filter:
        blur(2px);

}


.background-shape-one {

    width: 480px;

    height: 480px;

    top: -240px;

    left: -180px;

    background:
        rgba(
            37,
            99,
            235,
            0.07
        );

}


.background-shape-two {

    width: 550px;

    height: 550px;

    right: -250px;

    bottom: -280px;

    background:
        rgba(
            79,
            70,
            229,
            0.07
        );

}


/* =================================================
   MAIN CARD
================================================= */

.forgot-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1120px;

    min-height: 680px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    overflow: hidden;

    background:
        var(--white);

    border:
        1px solid
        rgba(
            226,
            232,
            240,
            0.9
        );

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-lg);

}


/* =================================================
   LEFT INFORMATION PANEL
================================================= */

.forgot-info {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        58px;

    overflow: hidden;

    color:
        var(--white);

    background:

        radial-gradient(
            circle at 85% 10%,
            rgba(
                255,
                255,
                255,
                0.14
            ),
            transparent 25%
        ),

        linear-gradient(
            145deg,
            #1e40af 0%,
            #2563eb 52%,
            #4338ca 100%
        );

}


/* Decorative glow */

.forgot-info::before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    right: -150px;

    top: -120px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.forgot-info::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    left: -120px;

    bottom: -120px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


/* =================================================
   MOBILE BRAND
================================================= */

.brand-mobile {

    display: none;

}


.brand-mobile img {

    width: 155px;

    max-width: 100%;

    height: auto;

}


/* =================================================
   INFORMATION CONTENT
================================================= */

.info-content {

    position: relative;

    z-index: 2;

    max-width: 450px;

    margin:
        auto 0;

}


.info-icon {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 20px;

    color:
        var(--white);

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    box-shadow:
        0 15px 35px
        rgba(
            0,
            0,
            0,
            0.08
        );

    font-size: 28px;

}


.info-content h1 {

    margin-bottom: 20px;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1.2px;

}


.info-content > p {

    margin-bottom: 38px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 15px;

    line-height: 1.8;

}


/* =================================================
   SECURITY FEATURES
================================================= */

.security-features {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.security-feature {

    display: flex;

    align-items: center;

    gap: 15px;

}


.feature-icon {

    width: 44px;

    height: 44px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius: 13px;

    background:
        rgba(
            255,
            255,
            255,
            0.1
        );

    font-size: 15px;

}


.security-feature strong {

    display: block;

    margin-bottom: 4px;

    font-size: 13px;

    font-weight: 700;

}


.security-feature span {

    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 11px;

    line-height: 1.5;

}


/* =================================================
   INFORMATION FOOTER
================================================= */

.info-footer {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 11px;

    line-height: 1.7;

}


/* =================================================
   RIGHT FORM PANEL
================================================= */

.forgot-form-panel {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px 60px;

    background:
        var(--white);

}


/* =================================================
   LOGO
================================================= */

.form-logo {

    margin-bottom: 40px;

}


.form-logo a {

    display: inline-flex;

    align-items: center;

}


.form-logo img {

    width: 165px;

    max-width: 100%;

    height: auto;

}


/* =================================================
   FORM HEADER
================================================= */

.form-header {

    margin-bottom: 30px;

}


.form-icon {

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border:
        1px solid
        #dbeafe;

    border-radius: 15px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size: 20px;

}


.form-header h2 {

    margin-bottom: 10px;

    color:
        var(--text);

    font-size: 30px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing:
        -0.7px;

}


.form-header p {

    max-width: 450px;

    color:
        var(--text-muted);

    font-size: 13px;

    line-height: 1.75;

}


/* =================================================
   ALERT SYSTEM
================================================= */

.form-alert {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 24px;

    padding:
        14px 16px;

    border:
        1px solid;

    border-radius:
        var(--radius-sm);

    font-size: 12px;

    line-height: 1.65;

}


.form-alert-success {

    color:
        var(--success);

    background:
        var(--success-bg);

    border-color:
        var(--success-border);

}


.form-alert-danger {

    color:
        var(--danger);

    background:
        var(--danger-bg);

    border-color:
        var(--danger-border);

}


.form-alert-info {

    color:
        var(--primary-dark);

    background:
        var(--primary-soft);

    border-color:
        #bfdbfe;

}


.alert-icon {

    flex-shrink: 0;

    padding-top: 2px;

    font-size: 15px;

}


.alert-content {

    flex: 1;

}


/* =================================================
   FORM
================================================= */

.forgot-form {

    width: 100%;

}


.form-group {

    margin-bottom: 22px;

}


.form-group label {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color:
        var(--text-secondary);

    font-size: 12px;

    font-weight: 700;

}


.form-group label i {

    color:
        var(--primary);

    font-size: 13px;

}


/* =================================================
   INPUT WRAPPER
================================================= */

.input-wrapper {

    position: relative;

    width: 100%;

}


/* =================================================
   INPUT ICON
================================================= */

.input-icon {

    position: absolute;

    top: 50%;

    left: 17px;

    z-index: 2;

    transform:
        translateY(
            -50%
        );

    color:
        #94a3b8;

    font-size: 15px;

    pointer-events: none;

    transition:
        color
        0.2s
        ease;

}


/* =================================================
   FORM CONTROL
================================================= */

.form-control {

    width: 100%;

    height: 56px;

    padding:
        0 18px 0 47px;

    outline: none;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-sm);

    color:
        var(--text);

    background:
        var(--white);

    font-family:
        inherit;

    font-size: 13px;

    transition:
        border-color
        0.2s
        ease,

        box-shadow
        0.2s
        ease,

        background
        0.2s
        ease;

}


.form-control::placeholder {

    color:
        #94a3b8;

}


.form-control:hover {

    border-color:
        #cbd5e1;

}


.form-control:focus {

    border-color:
        var(--primary);

    background:
        var(--white);

    box-shadow:
        0 0 0 4px
        rgba(
            37,
            99,
            235,
            0.1
        );

}


.input-wrapper:focus-within
.input-icon {

    color:
        var(--primary);

}


/* =================================================
   INPUT HELP
================================================= */

.input-help {

    margin-top: 8px;

    color:
        var(--text-muted);

    font-size: 10px;

    line-height: 1.6;

}


/* =================================================
   RESET BUTTON
================================================= */

.reset-button {

    position: relative;

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    overflow: hidden;

    border: none;

    border-radius:
        var(--radius-sm);

    color:
        var(--white);

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    box-shadow:
        0 10px 25px
        rgba(
            37,
            99,
            235,
            0.2
        );

    font-family:
        inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform
        0.2s
        ease,

        box-shadow
        0.2s
        ease;

}


.reset-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.15
            ),
            transparent
        );

    transform:
        translateX(
            -100%
        );

    transition:
        transform
        0.5s
        ease;

}


.reset-button:hover::before {

    transform:
        translateX(
            100%
        );

}


.reset-button:hover {

    transform:
        translateY(
            -2px
        );

    box-shadow:
        0 15px 32px
        rgba(
            37,
            99,
            235,
            0.3
        );

}


.reset-button:active {

    transform:
        translateY(
            0
        );

}


/* =================================================
   BACK TO LOGIN
================================================= */

.back-login {

    margin-top: 27px;

    text-align: center;

}


.back-login a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color:
        var(--text-secondary);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition:
        color
        0.2s
        ease;

}


.back-login a i {

    font-size: 11px;

}


.back-login a:hover {

    color:
        var(--primary);

}


/* =================================================
   REGISTER PROMPT
================================================= */

.register-prompt {

    margin-top: 22px;

    text-align: center;

    color:
        var(--text-muted);

    font-size: 11px;

    line-height: 1.7;

}


.register-prompt a {

    color:
        var(--primary);

    text-decoration: none;

    font-weight: 700;

}


.register-prompt a:hover {

    text-decoration:
        underline;

}


/* =================================================
   SECURITY FOOTER
================================================= */

.security-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid
        var(--border-light);

    color:
        #94a3b8;

    font-size: 9px;

    line-height: 1.6;

    text-align: center;

}


.security-footer i {

    color:
        var(--primary);

    font-size: 11px;

}


/* =================================================
   TABLET
================================================= */

@media (
    max-width: 1000px
) {

    .forgot-page {

        padding:
            35px 20px;

    }


    .forgot-container {

        max-width:
            700px;

        min-height:
            auto;

        grid-template-columns:
            1fr;

    }


    .forgot-info {

        display:
            none;

    }


    .forgot-form-panel {

        padding:
            50px;

    }

}


/* =================================================
   TABLET / SMALL LAPTOP
================================================= */

@media (
    min-width: 601px
)
and
(
    max-width: 1000px
) {

    .forgot-form-panel {

        max-width:
            620px;

        width:
            100%;

        margin:
            0 auto;

    }

}


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

@media (
    max-width: 600px
) {

    .forgot-page {

        min-height:
            100vh;

        align-items:
            flex-start;

        padding:
            15px;

    }


    .forgot-container {

        width:
            100%;

        margin:
            15px 0;

        border-radius:
            20px;

        box-shadow:
            0 15px 45px
            rgba(
                15,
                23,
                42,
                0.1
            );

    }


    .forgot-form-panel {

        padding:
            32px 22px;

    }


    .form-logo {

        margin-bottom:
            30px;

        text-align:
            center;

    }


    .form-logo img {

        width:
            150px;

    }


    .form-header {

        margin-bottom:
            25px;

        text-align:
            center;

    }


    .form-icon {

        width:
            50px;

        height:
            50px;

        margin:
            0 auto 16px;

        border-radius:
            14px;

        font-size:
            18px;

    }


    .form-header h2 {

        font-size:
            25px;

        letter-spacing:
            -0.5px;

    }


    .form-header p {

        font-size:
            12px;

        line-height:
            1.7;

    }


    .form-alert {

        padding:
            13px;

        font-size:
            11px;

    }


    .form-control {

        height:
            54px;

        font-size:
            13px;

    }


    .reset-button {

        min-height:
            54px;

    }


    .security-footer {

        margin-top:
            25px;

        font-size:
            9px;

    }

}


/* =================================================
   SMALL MOBILE
================================================= */

@media (
    max-width: 380px
) {

    .forgot-page {

        padding:
            10px;

    }


    .forgot-container {

        margin:
            10px 0;

        border-radius:
            17px;

    }


    .forgot-form-panel {

        padding:
            28px 18px;

    }


    .form-logo img {

        width:
            140px;

    }


    .form-header h2 {

        font-size:
            23px;

    }


    .form-header p {

        font-size:
            11px;

    }


    .form-group label {

        font-size:
            11px;

    }


    .input-help {

        font-size:
            9px;

    }


    .register-prompt {

        font-size:
            10px;

    }

}


/* =================================================
   ACCESSIBILITY
================================================= */

button:focus-visible,

a:focus-visible,

input:focus-visible {

    outline:
        3px solid
        rgba(
            37,
            99,
            235,
            0.3
        );

    outline-offset:
        3px;

}


/* =================================================
   REDUCED MOTION
================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    * {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}