@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

* {
        box-sizing: border-box
}

html, body {
        height: 100%
}

body {
        margin: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(90deg,#000,#050553);
        font-family: Poppins,system-ui,-apple-system,Segoe UI,Roboto
}

.container {
        position: relative;
        width: 850px;
        max-width: 92vw;
        height: 550px;
        background: #fff;
        margin: 20px;
        border-radius: 30px;
        box-shadow: 0 0 30px rgba(0,0,0,.2);
        overflow: hidden;
        transition: transform .3s;
        min-width: 320px
}

        .container h1 {
                font-size: 36px;
                margin: -10px 0
        }

        .container p {
                font-size: 14.5px;
                margin: 15px 0
        }

form {
        width: 100%
}

.form-box {
        position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
        background: #fff;
        display: flex;
        align-items: center;
        color: #333;
        text-align: center;
        padding: 40px;
        z-index: 1;
        transition: .6s ease-in-out 1.2s,visibility 0s 1s
}

.container.active .form-box {
        right: 50%
}

.form-box.register {
        visibility: hidden
}

.container.active .form-box.register {
        visibility: visible
}

.input-box {
        position: relative;
        margin: 22px 0
}

        .input-box input {
                width: 100%;
                padding: 13px 16px;
                background: #eee;
                border-radius: 10px;
                border: 1px solid #ddd;
                outline: none;
                font-size: 16px;
                color: #333
        }

        .input-box .validation {
                display: block;
                color: #e5484d;
                font-size: .8rem;
                margin-top: 6px
        }

.form-row {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        margin: 6px 0 14px
}

.checkbox {
        display: flex;
        gap: .5rem;
        align-items: center;
        color: #333
}

.muted {
        color: #666;
        text-decoration: none
}

.btn {
        width: 100%;
        height: 48px;
        background: #7494ec;
        border-radius: 10px;
        border: 0;
        cursor: pointer;
        font-size: 16px;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 6px 14px rgba(0,0,0,.1)
}

        .btn:active {
                transform: translateY(1px)
        }

.social-icons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 12px
}

        .social-icons a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 8px 12px;
                border: 1px solid #ccc;
                border-radius: 8px;
                font-size: 14px;
                color: #333;
                text-decoration: none
        }

.toggle-box {
        position: absolute;
        inset: 0
}

        .toggle-box::before {
                content: "";
                position: absolute;
                left: -250%;
                width: 300%;
                height: 100%;
                background: #7494ec;
                border-radius: 150px;
                z-index: 2;
                transition: 1.8s ease-in-out
        }

.container.active .toggle-box::before {
        left: 50%
}

.toggle-panel {
        position: absolute;
        width: 50%;
        height: 100%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2;
        transition: .6s ease-in-out
}

        .toggle-panel.toggle-left {
                left: 0;
                transition-delay: 1.2s
        }

.container.active .toggle-panel.toggle-left {
        left: -50%;
        transition-delay: .6s
}

.toggle-panel.toggle-right {
        right: -50%;
        transition-delay: .6s
}

.container.active .toggle-panel.toggle-right {
        right: 0;
        transition-delay: 1.2s
}

.toggle-panel .btn {
        width: 160px;
        background: transparent;
        border: 2px solid #fff;
        box-shadow: none
}

/* Tablet and smaller screens */
@media (max-width: 1024px) {
        .container {
                width: 95vw;
                max-width: 600px;
                height: auto;
                min-height: 500px;
        }

        .form-box {
                padding: 30px 25px;
        }

        .container h1 {
                font-size: 28px;
        }

        .container p {
                font-size: 13px;
        }
}

/* Mobile landscape and small tablets */
@media (max-width: 768px) {
        .container {
                width: 98vw;
                max-width: 500px;
                height: auto;
                min-height: 450px;
                margin: 10px;
        }

        .form-box {
                padding: 25px 20px;
        }

        .container h1 {
                font-size: 24px;
                margin: -5px 0;
        }

        .container p {
                font-size: 12px;
                margin: 10px 0;
        }

        .input-box {
                margin: 18px 0;
        }

                .input-box input {
                        padding: 12px 14px;
                        font-size: 15px;
                }

        .btn {
                height: 44px;
                font-size: 15px;
        }
}

/* Mobile portrait */
@media (max-width: 650px) {
        .container {
                height: calc(100vh - 20px);
                width: 100vw;
                max-width: 100vw;
                margin: 10px 0;
                border-radius: 20px;
        }

        .form-box {
                bottom: 0;
                width: 100%;
                height: 70%;
                padding: 20px 15px;
        }

        .container.active .form-box {
                right: 0;
                bottom: 30%;
        }

        .toggle-box::before {
                left: 0;
                top: -270%;
                width: 100%;
                height: 300%;
                border-radius: 20vw;
        }

        .container.active .toggle-box::before {
                left: 0;
                top: 70%;
        }

        .container.active .toggle-panel.toggle-left {
                left: 0;
                top: -30%;
        }

        .toggle-panel {
                width: 100%;
                height: 30%;
        }

                .toggle-panel.toggle-left {
                        top: 0;
                }

                .toggle-panel.toggle-right {
                        right: 0;
                        bottom: -30%;
                }

        .container.active .toggle-panel.toggle-right {
                bottom: 0;
        }

        .container h1 {
                font-size: 22px;
                margin: -3px 0;
        }

        .container p {
                font-size: 11px;
                margin: 8px 0;
        }

        .input-box {
                margin: 15px 0;
        }

                .input-box input {
                        padding: 10px 12px;
                        font-size: 14px;
                }

        .btn {
                height: 42px;
                font-size: 14px;
        }

        .toggle-panel .btn {
                width: 140px;
                height: 40px;
                font-size: 13px;
        }
}

/* Landscape orientation for mobile devices */
@media (max-height: 500px) and (orientation: landscape) {
        .container {
                height: 100vh;
                width: 100vw;
                margin: 0;
                border-radius: 0;
        }

        .form-box {
                padding: 15px 20px;
        }

        .container h1 {
                font-size: 18px;
                margin: -2px 0;
        }

        .container p {
                font-size: 10px;
                margin: 5px 0;
        }

        .input-box {
                margin: 10px 0;
        }

                .input-box input {
                        padding: 8px 12px;
                        font-size: 13px;
                }

        .btn {
                height: 36px;
                font-size: 13px;
        }

        .toggle-panel .btn {
                width: 100px;
                height: 32px;
                font-size: 11px;
        }
}

/* Touch-friendly improvements for mobile */
@media (pointer: coarse) {
        .btn {
                min-height: 44px; /* Apple's recommended minimum touch target */
        }

        .password-toggle {
                min-width: 44px;
                min-height: 44px;
        }

        .social-icons a {
                min-height: 44px;
                padding: 12px 16px;
        }

        .toggle-panel .btn {
                min-height: 44px;
        }
}

/* Composite input row */
.form-box .input-box,
#auth-combined .input-box {
        display: flex;
        align-items: center; /* vertical centering */
        gap: 10px;
        height: 48px; /* input height */
        padding: 0 12px; /* horizontal padding for icons */
        border: 1px solid #d1d5db;
        border-radius: 10px;
        background: #eee;
        box-sizing: border-box;
        position: relative;
        margin: 20px 0;
}

        /* Make the real <input> fill the row */
        .form-box .input-box input,
        #auth-combined .input-box input {
                flex: 1 1 auto;
                min-width: 0;
                height: 100%;
                border: none;
                outline: none;
                background: transparent;
                padding: 0; /* spacing handled by container */
                font-size: 16px;
                color: #333;
        }

        /* Left icon (user/email/lock) — works for <span.field-icon> or <i> (boxicons) */
        .form-box .input-box .field-icon,
        #auth-combined .input-box .field-icon,
        .form-box .input-box i,
        #auth-combined .input-box i {
                width: 20px;
                height: 20px;
                display: inline-flex;
                align-items: center; /* vertical centering */
                justify-content: center; /* horizontal centering */
                color: rgba(17,24,39,.8);
                /* neutralize any previous absolute/grid rules */
                position: static !important;
                transform: none !important;
        }

        /* Right toggle (eye/lock) */
        .form-box .input-box.password .password-toggle,
        #auth-combined .input-box.password .password-toggle {
                width: 32px;
                height: 32px;
                display: inline-flex;
                align-items: center; /* vertical centering */
                justify-content: center;
                border: 0;
                background: transparent;
                cursor: pointer;
                color: rgba(17,24,39,.85);
                position: static !important; /* override old absolute rules */
        }

        /* Remove old padding hacks (since container holds spacing) */
        .form-box .input-box.has-icon input,
        #auth-combined .input-box.has-icon input,
        .form-box .input-box.password input[data-password],
        #auth-combined .input-box.password input[data-password] {
                padding: 0 !important;
        }

        /* Focus state only */
        .form-box .input-box:focus-within,
        #auth-combined .input-box:focus-within {
                border-color: #4f7fff;
                box-shadow: 0 0 0 3px rgba(79,127,255,.15);
                background: #fff;
        }

/* Eye swap remains */
.password-toggle .icon {
        display: none;
}

.password-toggle .eye {
        display: inline;
}

.input-box.password.showing .password-toggle .eye {
        display: none;
}

.input-box.password.showing .password-toggle .eye-off {
        display: inline;
}

/* Dark mode */
html.dark .input-box {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.18);
}

        html.dark .input-box input {
                color: #e5e7eb;
        }

        html.dark .input-box .field-icon,
        html.dark .password-toggle {
                color: rgba(229,231,235,.92);
        }