/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

/*body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}*/
body {
    min-height: 100vh;
    background: #0f172a;
    color: #1e1e20;
    display: grid;
    place-items: center;
    padding: 20px;
}

    /* Animated subtle background - finance friendly */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background-image: url('../images/nepal_style_1024x585.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        /* Subtle zoom/fade animation for images (Alternative to gradientFlow) */
        animation: slowPan 20s ease-in-out infinite alternate;
    }

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }s

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.container {
    position: relative;
    max-width: 822px;
    width: 100%;
/*    background: #ffffff;*/
    padding: 40px 30px;
    border-radius: 16px;
/*    box-shadow: 0 15px 40px rgba(0,0,0,0.12);*/
    overflow: hidden;
    perspective: 2800px;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

    .container:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.18);
    }

    /* ─── Cover (flipping side) ─── */
    .container .cover {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: 50%;
        z-index: 98;
        transition: all 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform-origin: left;
        transform-style: preserve-3d;
    }

    .container #flip:checked ~ .cover {
        transform: rotateY(-180deg);
    }

    .container .cover .front,
    .container .cover .back {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        backface-visibility: hidden;
    }

.cover .back {
    transform: rotateY(180deg);
}

.container .cover::before,
.container .cover::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
/*    background: linear-gradient(135deg, #7d2ae8, #a16ee8);*/
    opacity: 0.58;
    z-index: 12;
    transition: opacity 0.4s ease;
}

.container .cover:hover::before {
    opacity: 0.68;
}

.container .cover::after {
    opacity: 0.38;
    transform: rotateY(180deg);
/*    background: linear-gradient(135deg, #a16ee8, #7d2ae8);*/
}

.container .cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
}

/* Cover text */
.cover .text {
    position: absolute;
    z-index: 130;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    text-align: center;
}

    .cover .text .text-1 {
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }

    .cover .text .text-2 {
        font-size: 16px;
        font-weight: 500;
/*        color: rgba(255,255,255,0.9);*/
    }

/* ─── Forms ─── */
.container .forms {
    height: 100%;
    width: 100%;
/*    background: #fff;*/
}

.form-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.login-form,
.signup-form {
    width: calc(50% - 25px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.container #flip:checked ~ .forms .login-form {
    opacity: 0;
    transform: translateX(-30px);
    pointer-events: none;
}

.container #flip:checked ~ .forms .signup-form {
    opacity: 1;
    transform: translateX(0);
}

/* Title */
.form-content .title {
    position: relative;
    font-size: 26px;
    font-weight: 600;
    color: #222;
    margin-bottom: 35px;
}

    .form-content .title:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        height: 4px;
        width: 40px;
        background: #7d2ae8;
        border-radius: 4px;
        transition: width 0.4s ease;
    }

    .form-content .title:hover:before {
        width: 70px;
    }

/* Inputs */
.input-boxes {
    margin-top: 20px;
}

.input-box {
    position: relative;
    height: 54px;
    margin: 16px 0;
    transition: all 0.3s ease;
}

    .input-box input {
        height: 100%;
        width: 100%;
        outline: none;
        border: none;
        background: #f9f9ff;
        padding: 0 48px 0 20px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 10px;
        border: 2px solid transparent;
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    }

        .input-box input:focus,
        .input-box input:valid {
            border-color: #7d2ae8;
/*            background: #ffffff;
            color: rgba(0,0,0,0.9);*/
            box-shadow: 0 0 0 4px rgba(125, 42, 232, 0.18);
            transform: translateY(-2px);
        }

    .input-box i {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #7d2ae8;
        font-size: 18px;
        transition: transform 0.3s ease;
    }

    .input-box:hover i {
        transform: translateY(-50%) scale(1.15);
    }

/* Button */
.button {
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}

    .button input {
        width: 100%;
        height: 52px;
        color: white;
        background: #7d2ae8;
        border: none;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
    }

        .button input:hover {
            background: #5f20c2;
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(125, 42, 232, 0.35);
        }

        .button input:active {
            transform: translateY(0);
            box-shadow: 0 5px 15px rgba(125, 42, 232, 0.25);
        }

        /* Ripple effect on button */
        .button input::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            color: #000000;
            background: rgba(255,255,255,0.25);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
            z-index: -1;
            pointer-events: none;
        }

        .button input:hover::before {
            width: 300px;
            height: 300px;
        }

/* Text links */
.form-content .text {
    font-size: 14.5px;
    color: #555;
    text-align: center;
    margin-top: 24px;
}

    .form-content .text a {
        color: #7d2ae8;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .form-content .text a:hover {
            color: #5f20c2;
            text-decoration: underline;
        }

/* Hide checkbox */
#flip {
    display: none;
}

/* ─── Responsive ─── */
@media (max-width: 730px) {
    .container .cover {
        display: none;
    }

    .form-content {
        justify-content: center;
    }

    .login-form,
    .signup-form {
        width: 100%;
    }

    .signup-form {
        display: none;
    }

    #flip:checked ~ .forms .signup-form {
        display: block;
    }

    #flip:checked ~ .forms .login-form {
        display: none;
    }
}