/*=============== ANIMATION ===============*/


/*=============== REGISTER ===============*/
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0;
    overflow-x: hidden;

    .register_container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        .register__content {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-content: center;
            width: 100%;

            .register_text {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 55px;
                background-color: white;
                height: 630.278076171875px;

                .header_text {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-direction: column;
                    text-align: center;
                    width: 460px;
                    gap: 1rem;

                    h2 {
                        font-size: var(--title-size);
                        font-weight: var(--font-bold);
                        color: var(--blue-normal);

                        span {
                            color: var(--yellow-normal);
                        }
                    }

                    p {
                        font-size: var(--paragraph-size);
                        font-weight: var(--font-medium);
                        color: #6E7176;
                    }
                }

                .register_cards_container {
                    width: 490px;
                    margin: 0 auto;
                    position: relative;

                    .register_cards {
                        position: relative;
                        width: 100%;
                        height: auto;

                        .register_card {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            flex-direction: column;
                            align-items: center;
                            justify-content: flex-start;
                            padding: 26px 29px;
                            border-radius: 12px;
                            box-shadow: 0px 0px 14px 0px #B1AEAE1F;
                            opacity: 0;
                            pointer-events: none;
                            transform: translateY(20px) scale(0.95);
                            transition: all 0.4s ease;

                            &.active {
                                display: flex;
                                opacity: 1;
                                transform: translateY(0) scale(1);
                                pointer-events: auto;
                            }

                            &.exit {
                                display: flex;
                                opacity: 0;
                                transform: translateY(-20px) scale(0.95);
                                pointer-events: none;
                            }


                            i {
                                font-size: 65px;
                                color: var(--blue-light-active);
                            }

                            h3 {
                                font-size: var(--paragraph-size);
                                font-weight: var(--font-bold);
                                color: var(--blue-normal);
                                margin-bottom: 13px;
                            }

                            p {
                                font-size: var(--note-size);
                                font-weight: var(--font-medium);
                                color: #9CA3AA;
                                text-align: center;
                                width: 342px;
                            }

                            a {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                width: 299px;
                                height: 52px;
                                background-color: var(--blue-normal);
                                border-radius: 32px;
                                color: white;
                                font-size: var(--paragraph-size);
                                font-weight: var(--font-bold);
                                transition: background-color 0.3s ease;
                                margin-top: 34px;

                                &:hover {
                                    background-color: var(--blue-normal-hover);
                                }

                                &:active {
                                    background-color: var(--blue-normal-active);
                                }
                            }
                        }
                    }

                    .pagination_wrapper {
                        position: absolute;
                        bottom: -350px;
                        left: 50%;
                        transform: translate(-50%);
                        display: flex;
                        gap: 25px;

                        .arrow {
                            color: var(--blue-light-active);
                            font-size: 25px;
                            cursor: pointer;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            transition: color 0.3s ease;
                            background-color: transparent;

                            &:hover {
                                color: var(--blue-normal);
                            }
                        }

                        .pagination {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 24px;

                            button {
                                position: relative;
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                border: none;
                                background-color: var(--blue-light-active);
                                cursor: pointer;
                                transition: all 0.3s ease;

                                &:nth-child(1) {

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        display: none;
                                        inset: -10px;
                                        border-radius: 50%;
                                        padding: 4px;
                                        background: conic-gradient(#2a77b3 0deg 120deg, transparent 120deg 360deg);
                                        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                    }
                                }

                                &:nth-child(2) {

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        inset: -10px;
                                        display: none;
                                        border-radius: 50%;
                                        padding: 4px;
                                        background: conic-gradient(#2a77b3 0deg 240deg, transparent 240deg 360deg);
                                        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                    }
                                }

                                &:nth-child(3) {

                                    &::after {
                                        content: "";
                                        position: absolute;
                                        inset: -10px;
                                        display: none;
                                        border-radius: 50%;
                                        padding: 4px;
                                        background: conic-gradient(#2a77b3 0deg 360deg, transparent 360deg 360deg);
                                        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), black calc(100% - 5px));
                                    }
                                }

                                &.active {
                                    width: 12px;
                                    height: 12px;
                                    background-color: var(--blue-normal);

                                    &::after {
                                        display: block;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .register_form_container {
                display: flex;
                justify-content: center;
                align-items: center;

                .register_form {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    gap: 53px;
                    box-shadow: 0px 0px 14px 0px #B1AEAE1F;
                    padding: 26px 52px;
                    background-color: white;
                    width: 490px;
                    border-radius: 12px;

                    .header_form {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        text-align: center;

                        i {
                            font-size: 60px;
                            color: var(--blue-light-active);
                        }

                        h2 {
                            font-size: var(--paragraph-size);
                            font-weight: var(--font-bold);
                            color: var(--blue-normal);
                            margin-bottom: 13px;
                        }

                        p {
                            font-size: var(--note-size);
                            font-weight: var(--font-medium);
                            color: #9CA3AA;
                            width: 342px;
                        }
                    }

                    .header_form_otp {
                        gap: 18px;

                        i {
                            color: var(--blue-normal);
                        }

                        h2 {
                            color: #1E1E1E;
                        }
                    }

                    .form {
                        width: 100%;

                        form {
                            display: flex;
                            justify-content: start;
                            align-items: center;
                            flex-direction: column;
                            gap: 33px;

                            .input_group {
                                display: flex;
                                justify-content: center;
                                align-items: start;
                                flex-direction: column;
                                gap: 14px;
                                width: 100%;

                                label {
                                    font-size: var(--paragraph-size);
                                    font-weight: var(--font-regular);
                                    color: #1E1E1E;
                                }

                                .input {
                                    display: flex;
                                    justify-content: start;
                                    align-items: center;
                                    gap: 16px;
                                    width: 100%;
                                    height: 52px;
                                    border-radius: 8px;
                                    background-color: #F6F7FB;
                                    padding: 0 16px;
                                    transition: all 0.3s ease;

                                    input {
                                        width: 100%;
                                        height: 100%;
                                        background-color: transparent;
                                        font-size: 18px;
                                        font-weight: var(--font-regular);
                                        color: #444444;
                                    }

                                    i {
                                        font-size: 18px;
                                        color: #444444;
                                    }

                                    &:focus-within {
                                        background-color: white;
                                        border: 1px solid var(--light-blue-normal);
                                        box-shadow: 0px 0px 14px 0px #B1AEAE1F;

                                        i {
                                            color: var(--light-blue-normal);
                                        }
                                    }
                                }

                                .phone {
                                    width: 100%;

                                    input {
                                        text-align: right;
                                    }

                                    .iti {
                                        width: 100%;
                                    }
                                }

                                .remember_me {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    gap: 12px;

                                    label {
                                        font-size: var(--note-size);
                                        font-weight: var(--font-regular);
                                        color: #444444;
                                        cursor: pointer;
                                    }
                                }

                                /* From Uiverse.io by varoonrao */
                                .checkbox-con input[type="checkbox"] {
                                    appearance: none;
                                    width: 40px;
                                    height: 20px;
                                    border-radius: 20px;
                                    background: #EAF1F7;
                                    position: relative;
                                    box-sizing: border-box;
                                    cursor: pointer;
                                }

                                .checkbox-con input[type="checkbox"]::before {
                                    content: "";
                                    width: 16px;
                                    height: 16px;
                                    background: #9CA3AA;
                                    border-radius: 50%;
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    transform: translate(13%, 15%);
                                    transition: all 0.3s ease-in-out;
                                }

                                .checkbox-con input[type="checkbox"]:checked {
                                    background: #47A3D180;
                                }

                                .checkbox-con input[type="checkbox"]:checked::before {
                                    background: #47A3D1;
                                    transform: translate(133%, 13%);
                                    transition: all 0.3s ease-in-out;
                                }


                            }

                            .input_group_otp {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 10px;
                                direction: ltr;


                                input {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    text-align: center;
                                    width: 66px;
                                    height: 60px;
                                    background-color: #EAF1F7;
                                    border: 1px solid var(--light-blue-normal);
                                    font-size: 35px;
                                    font-weight: 500;
                                    color: #444444;
                                    border-radius: 4px;
                                }

                            }

                            button {
                                width: 100%;
                                height: 58px;
                                background-color: var(--blue-normal);
                                color: white;
                                font-size: var(--paragraph-size);
                                font-weight: var(--font-semi-bold);
                                border-radius: 32px;
                                transition: background-color 0.3s ease;
                                cursor: pointer;
                                margin-top: 20px;


                                &:hover {
                                    background-color: var(--blue-normal-hover);
                                }

                                &:active {
                                    background-color: var(--blue-normal-active);
                                }
                            }

                            p {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 10px;
                                font-size: var(--note-size);
                                font-weight: var(--font-regular);
                                color: #444444;

                                a {
                                    position: relative;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    gap: 6px;
                                    color: var(--blue-normal);
                                    transition: color 0.3s ease;

                                    span {
                                        text-decoration: underline;
                                    }

                                    i {
                                        font-size: 14px
                                    }

                                    &:hover {
                                        color: var(--blue-normal-hover);
                                    }

                                    &:active {
                                        color: var(--blue-normal-active);
                                    }

                                    &::before {
                                        content: "";
                                        position: absolute;
                                        width: 8px;
                                        height: 14px;
                                        right: -3px;
                                        background-image: url(../image/half-border.svg);
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                    }
                                }
                            }

                            #resend-btn {
                                background: none;
                                border: none;
                                font-size: var(--note-size);
                                font-weight: var(--font-regular);
                                text-decoration: underline;
                                transition: color 0.3s;
                                margin-top: 0;
                            }

                            #resend-btn.active {
                                color: var(--blue-normal);
                                cursor: pointer;
                            }

                            .forget_pass {
                                font-size: var(--note-size);
                                font-weight: var(--font-regular);
                                color: #C5C5C5;
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }

        }

    }
}

/*=============== REGISTER RIGHT ===============*/
.register_right {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: 49px 95px;
    width: 766px;
    gap: 61px;
    background-color: var(--green-normal);

    &::after {
        content: "";
        position: absolute;
        top: -400px;
        right: -250px;
        width: 803.1867731227693px;
        height: 803.1867731227693px;
        border-radius: 50%;
        z-index: 0;
        background: linear-gradient(180deg, rgba(247, 250, 252, 0.4) 0%, rgba(237, 242, 247, 0) 100%);
    }


    .header_logo {
        width: 163px;
        height: 185px;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0px 4px 24px #FFFFFF40);
            object-fit: contain;
        }
    }

    .register_group {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 33px;
        z-index: 1;

        .img {
            position: relative;
            width: 525px;
            height: 334px;
            border-radius: 10px;
            margin-bottom: 79px;
            box-shadow: 0px 0px 14px 0px #B1AEAE1F;

            img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover;
            }

            .numbers_student {
                position: absolute;
                left: -50px;
                bottom: -40px;
                display: flex;
                justify-content: start;
                align-items: center;
                background-color: #F7FAFC;
                border-radius: 10px;
                width: 287px;
                height: 94px;
                padding: 20px 24px 14px 24px;
                gap: 11px;

                .num {
                    display: flex;
                    justify-content: center;
                    align-items: start;
                    flex-direction: column;

                    h3 {
                        font-size: var(--h2-font-size);
                        font-weight: var(--font-bold);
                        color: var(--yellow-normal);
                        line-height: 0.8;
                    }

                    p {
                        font-size: var(--note-size);
                        font-weight: var(--font-regular);
                        color: var(--yellow-normal);
                    }
                }

                .icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    background-color: var(--yellow-light-hover);

                    i {
                        font-size: 25px;
                        color: var(--yellow-normal);
                    }
                }
            }
        }

        .register_group_text {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            gap: 15px;
            height: 124px;

            h3 {
                font-size: var(--title-size);
                font-weight: var(--font-bold);
                color: white;
            }

            p {
                font-size: var(--paragraph-size);
                font-weight: var(--font-regular);
                color: var(--blue-light);
                width: 445px;
            }
        }

        .register_group_types {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;

            .type {
                display: flex;
                justify-content: start;
                align-items: center;
                padding: 4px 8px;
                height: 34px;
                border-radius: 4px;
                gap: 8px;
                background-color: white;

                i {
                    font-size: 20px;
                    color: var(--blue-normal);
                }

                h4 {
                    font-size: 14px;
                    font-weight: var(--font-medium);
                    color: #6B6B6B;
                }
            }
        }
    }
}

/* ==========================================================================
   RESPONSIVENESS (MEDIA QUERIES)
   ========================================================================== */

/* Tablet & Smaller Desktops */
@media (max-width: 1400px) {
    .register .register_container .register__content {
        grid-template-columns: 1fr 1fr;
    }
    
    .register_right {
        width: auto !important;
        flex: 1;
        padding: 40px !important;
    }
    
    .register_form_container {
        flex: 1;
    }
}

/* Mobile Devices (Portrait and Landscape) */
@media (max-width: 991px) {
    .register .register_container .register__content {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column;
    }
    
    .register_right {
        width: 100% !important;
        padding: 30px 20px !important;
        gap: 30px !important;
    }
    
    .register_right::after {
        display: none; /* Simplify background on mobile */
    }
    
    .register_right .header_logo {
        width: 120px !important;
        height: auto !important;
        margin: 0 auto;
    }
    
    .register_right .register_group {
        gap: 20px !important;
    }
    
    /* Hide some heavy elements on mobile to improve UX */
    .register_right .register_group .img,
    .register_right .register_group_types,
    .register_right .register_group_text p {
        display: none !important;
    }
    
    .register_right .register_group_text {
        height: auto !important;
        gap: 5px !important;
    }
    
    .register_right .register_group_text h3 {
        font-size: 24px !important;
    }
    
    .register_form_container {
        width: 100% !important;
        padding: 30px 15px !important;
    }
    
    .register_form_container .register_form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 20px !important;
        box-shadow: none !important; /* Flat design for mobile */
        gap: 30px !important;
    }
    
    .register_form_container .register_form .header_form i {
        font-size: 40px !important;
    }
    
    .register_form_container .register_form .header_form p {
        width: 100% !important;
        font-size: 14px !important;
    }
    
    .register_form_container .register_form .header_form h2 {
        font-size: 22px !important;
    }
}

/* Small Screens (Optimizing Forms) */
@media (max-width: 576px) {
    .register_form_container .register_form .form form {
        gap: 20px !important;
    }
    
    .register_form_container .register_form .form form .input_group label {
        font-size: 14px !important;
    }
    
    .register_form_container .register_form .form form button {
        height: 50px !important;
        font-size: 16px !important;
    }
    
    /* For OTC/OTP inputs if present */
    .register_form_container .register_form .form form .input_group_otp input {
        width: 45px !important;
        height: 50px !important;
        font-size: 20px !important;
    }
}