/* ============================================================
   MAPSIV - FORGOT PASSWORD
   Premium Page Styling
   ============================================================ */

/* -----------------------------
   GLOBAL
----------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    animation: pageFadeIn 0.5s ease-in-out;
}

/* -----------------------------
   PAGE ANIMATION
----------------------------- */

@keyframes pageFadeIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -----------------------------
   MAIN CARD
----------------------------- */

body > div {
    animation: cardEnter 0.6s ease-out;
}

@keyframes cardEnter {

    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* -----------------------------
   EMAIL INPUT
----------------------------- */

#resetEmail {
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

#resetEmail:hover {
    border-color: #93c5fd;
}

#resetEmail:focus {
    border-color: #2563eb;
    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.10);
    transform: translateY(-1px);
}


/* -----------------------------
   SEND OTP BUTTON
----------------------------- */

#sendOtpBtn {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#sendOtpBtn:hover:not(:disabled) {
    transform: translateY(-2px);

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

#sendOtpBtn:active:not(:disabled) {
    transform: translateY(0);
}

#sendOtpBtn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}


/* -----------------------------
   BUTTON SHINE EFFECT
----------------------------- */

#sendOtpBtn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left 0.6s ease;
}

#sendOtpBtn:hover::before {
    left: 130%;
}


/* -----------------------------
   MESSAGE BOX
----------------------------- */

#messageBox {
    animation: messageSlide 0.25s ease-out;
}

@keyframes messageSlide {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -----------------------------
   LOADING TEXT
----------------------------- */

#sendOtpLoader {
    animation: loadingPulse 1.2s infinite ease-in-out;
}

@keyframes loadingPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}


/* -----------------------------
   BACK TO LOGIN
----------------------------- */

a {
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

a:hover {
    color: #1d4ed8;
}


/* -----------------------------
   MOBILE
----------------------------- */

@media (max-width: 640px) {

    body {
        padding: 15px;
    }

    body > div {
        padding: 24px !important;
        border-radius: 22px !important;
    }

    #resetEmail {
        font-size: 16px;
    }

    #sendOtpBtn {
        min-height: 48px;
    }
}


/* -----------------------------
   ACCESSIBILITY
----------------------------- */

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}


/* -----------------------------
   REDUCED MOTION
----------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}