/* =========================================================
           PAGE
        ========================================================= */
        .main-footer {
            padding-left: 30px;
        }
        
        /* =========================================================
           LOGIN 3D FLIP
        ========================================================= */
        
        .login-flip-container {
            width: 100%;
            perspective: 1400px;
            min-height: 650px;
        }
        
        
        /* =========================================================
           FLIP CARD
        ========================================================= */
        
        .login-flip-card {
            position: relative;
            width: 100%;
            transform-style: preserve-3d;
            transition: transform 0.85s cubic-bezier(.4, .2, .2, 1);
            min-height: 550px;
        }
        
        
        /* =========================================================
           FLIPPED STATE
        ========================================================= */
        
        .login-flip-card.flipped {
            transform: rotateY(180deg);
        }
        
        
        /* =========================================================
           BOTH SIDES
        ========================================================= */
        
        .login-flip-face {
            width: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform-style: preserve-3d;
        }
        
        
        /* =========================================================
           FRONT
        ========================================================= */
        
        .login-flip-front {
            position: relative;
        }
        
        
        /* =========================================================
           BACK
        ========================================================= */
        
        .login-flip-back {
            position: absolute;
            top: 0;
            left: 0;
            transform: rotateY(180deg);
        }
        
        
        /* =========================================================
           REMOVE CARD MARGIN
        ========================================================= */
        
        .login-flip-face .card {
            margin-bottom: 0;
        }
        
        
        /* =========================================================
           FORGOT PASSWORD ICON
        ========================================================= */
        
        .forgot-password-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(
                    145deg,
                    #f0f3ff,
                    #e1e7ff
                );
            box-shadow: 0 10px 25px rgba(102, 126, 234, .20);
            animation: forgotIconFloat 3s ease-in-out infinite;
        }
        
        .forgot-password-icon-inner {
            font-size: 31px;
            filter: drop-shadow(
                    0 4px 4px
                    rgba(0,0,0,.10)
                );
        }
        
        @keyframes forgotIconFloat {
        
            0%,
            100% {
                transform: translateY(0)
                    rotate(0deg);
            }
        
            50% {
                transform: translateY(-5px)
                    rotate(-3deg);
            }
        }
        
        
        /* =========================================================
           DESCRIPTION
        ========================================================= */
        
        .forgot-password-description {
            text-align: center;
            color: #6c757d;
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        
        /* =========================================================
           METHOD LABEL
        ========================================================= */
        
        .forgot-method-label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 13px;
            color: #343a40;
        }
        
        
        /* =========================================================
           METHOD CONTAINER
        ========================================================= */
        
        .forgot-methods {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        
        /* =========================================================
           METHOD
        ========================================================= */
        
        .forgot-method {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 62px;
            padding: 10px 12px;
            margin: 0;
            border: 1px solid #e1e5ef;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            transition: all .25s ease;
        }
        
        .forgot-method:hover {
            border-color: #6777ef;
            background: #f8f9ff;
            transform: translateY(-1px);
        }
        
        
        /* =========================================================
           HIDE RADIO
        ========================================================= */
        
        .forgot-method input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        
        /* =========================================================
           RADIO
        ========================================================= */
        
        .forgot-method-radio {
            width: 19px;
            height: 19px;
            flex-shrink: 0;
            border: 2px solid #cbd2df;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
            transition: .2s ease;
        }
        
        .forgot-method.active
        .forgot-method-radio {
            border-color: #6777ef;
        }
        
        .forgot-method.active
        .forgot-method-radio::after {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            top: 3px;
            left: 3px;
            border-radius: 50%;
            background: #6777ef;
            animation: radioPop .2s ease;
        }
        
        @keyframes radioPop {
        
            0% {
                transform: scale(0);
            }
        
            100% {
                transform: scale(1);
            }
        }
        
        
        /* =========================================================
           METHOD ICON
        ========================================================= */
        
        .forgot-method-icon {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            border-radius: 8px;
            background: #f1f3f9;
            font-size: 17px;
        }
        
        
        /* =========================================================
           METHOD CONTENT
        ========================================================= */
        
        .forgot-method-content {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        
        .forgot-method-content strong {
            font-size: 13px;
            color: #343a40;
            font-weight: 600;
        }
        
        .forgot-method-content small {
            margin-top: 2px;
            font-size: 11px;
            color: #8992a0;
        }
        
        
        /* =========================================================
           ACTIVE METHOD
        ========================================================= */
        
        .forgot-method.active {
            border-color: #6777ef;
            background: rgba(103,119,239,.045);
            box-shadow: 0 5px 15px
                rgba(103,119,239,.08);
        }
        
        
        /* =========================================================
           BACK BUTTON
        ========================================================= */
        
        .forgot-back-btn {
            margin-top: 5px;
            color: #6c757d !important;
            font-size: 13px;
            text-decoration: none !important;
        }
        
        .forgot-back-btn:hover {
            color: #6777ef !important;
        }
        
        
        /* =========================================================
           FORGET PASSWORD BUTTON
        ========================================================= */
        
        #forget-pwd {
            transition: transform .2s ease,
                box-shadow .2s ease;
        }
        
        #forget-pwd:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px
                rgba(0,0,0,.12);
        }
        
        
        /* =========================================================
           MOBILE
        ========================================================= */
        
        @media (max-width: 480px) {
        
            .forgot-method {
                min-height: 58px;
            }
        }

        /* =========================================================
           VERIFY OTP
        ========================================================= */
        .forgot-otp-container {
            display: flex;
            justify-content: center;
            gap: 7px;
            margin: 20px 0;
        }
        
        .forgot-otp-input {
            width: 42px;
            height: 50px;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            outline: none;
            transition: all .2s ease;
        }
        
        .forgot-otp-input:focus {
            border-color: #6777ef;
            box-shadow: 0 0 0 3px rgba(103, 119, 239, .12);
            transform: translateY(-3px);
        }
        
        .forgot-otp-input.is-invalid {
            border-color: #dc3545;
            animation: otpShake .3s ease;
        }
        
        @keyframes otpShake {
        
            0%, 100% {
                transform: translateX(0);
            }
        
            25% {
                transform: translateX(-5px);
            }
        
            75% {
                transform: translateX(5px);
            }
        
        }
        
        .forgot-otp-timer {
            text-align: center;
            color: #6c757d;
            font-size: 12px;
        }
        
        .forgot-otp-timer span {
            color: #dc3545;
            font-weight: 600;
        }
        
        .password-toggle-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            color: #6777ef;
            font-size: 12px;
            cursor: pointer;
        }
        
        .forgot-password-rules {
            margin-top: 8px;
            font-size: 11px;
            color: #8992a0;
        }
        
        .password-rule {
            margin-bottom: 3px;
        }
        
        .password-rule.valid {
            color: #28a745;
        }
        
        @media (max-width: 400px) {
        
            .forgot-otp-container {
                gap: 5px;
            }
        
            .forgot-otp-input {
                width: 39px;
                height: 48px;
            }
        
        }