.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    overflow: visible;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .modal {
        background: #ffffff;
        /* padding: 30px; */
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
        min-width: 300px;
        max-width: 500px;
        width: 100%;
        min-height: 100px;
        position: relative;
        z-index: 1001;
        overflow: hidden;

        /* Pulsing blue border animation */     
        &.animated-border {
            border: 3px solid #007bff;
            transition: border-color 0.3s ease;
            animation: pulseBorder 2s ease-in-out infinite;
        }

        .header {
            text-align: center;
            /* margin-bottom: 20px; */
            padding: 15px;
            background-color: #f5f5fc;

            h2 {
                margin: 0;
                font-size: 1.375rem;
                font-weight: 500;
                color: #555;

                .thumb{
                    vertical-align: top;
                    height: 25px;
                    width: 25px;
                    margin-right: 10px;
                    margin-left: -15px;
                    object-fit: contain;
                    display: inline-block;
                }
            }
            .close{
                position: absolute;
                right: 14px;
                top: 14px;
                font-size: 1rem;
                font-weight: 600;               
                cursor: pointer;
                padding: 6px;
                border-radius: 16px;
                background-color: transparent;
                color: #555;

                &:hover{
                    background-color: #f5f5f5;
                }
            }   
            &.loading{
                background: linear-gradient(90deg, #f5f5fc 25%, #dfdfeb 50%, #f5f5fc 75%);
                background-size: 200% 100%;
                animation: callingLoader 2.5s ease-in-out infinite;
            }
        }
        p{
            text-align: center;
            line-height: 1.5;
            margin: 0;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 25px 20px;
            .form{
                gap:20px;
            }
            &.tray{
                background-color: #f5f5fc;
                display: none;
                
                &.open{
                    display: flex;
                }
            }
        }

        .button {
    
            text-align: center;
            width: 100%;
            padding: 10px;
            background-color: #404499;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;

            &:hover {
                background-color: #0056b3;
            }

            span, img{
                vertical-align: text-bottom;
            }

            .icon{                
                margin-right: 7px;
                &.white{
                    filter: grayscale(1) brightness(20);
                }
            }
            .thumb{
                height: 20px;
                width: 20px;
                margin-right: 10px;
                object-fit: contain;
                display: inline-block;
            }
            &.disabled{
                opacity: 0.25;
                cursor: default;
                filter: grayscale(0.5);
            }
            &.grey{
                background-color: #666;
            }
            &.pale{
                background-color: #aaabbb;
            }
        }

        .separator {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 10px 0;

            .line {
                flex: 1;
                height: 1px;
                background-color: #ddd;
            }

            .or {
                color: #666;
                font-size: 0.875rem;
                font-weight: 500;
            }
        }

        .form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: #007bff;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
            }

            &::placeholder {
                color: #999;
            }
        }

        .inline_form {
            position: relative;
            display: flex;
            align-items: center;

            label {
                position: absolute;
                top: 8px;
                left: 12px;
                font-size: 0.75rem;
                color: #666;
                background: white;
                padding: 0;
                z-index: 2;
                pointer-events: none;
            }

            .input {
                flex: 1;
                padding: 30px 80px 10px 12px;
            }

            button {
                position: absolute;
                right: 10px;
                top: 12px;
          
                padding: 8px 16px;
                background-color: #0056b3;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                white-space: nowrap;
                transition: background-color 0.2s;
                z-index: 1;
                bottom: 12px;

                &:hover {
                    background-color: #034a96;
                }
                &.shadow{
                    opacity: 0.05;
                    filter: grayscale(1);
                    color: #666;
                    cursor: default;
                }
            }

            .icons{

                .tick {
                    position: absolute;
                    right: 29px;
                    top: 19px;
                    z-index: 2;
                    display: inline-block;           
                    color: #cdcdcd;
                    font-weight: bold;
                    font-size: 1rem;
                    border-radius: 20px;
                    background: #fff;
                    padding: 3px 6px;           
                    pointer-events: none;                   
                    opacity: 1;
                    transform: scale(1);
                    visibility: visible;
                    animation: tickBounce 0.5s ease forwards;                    
                }
            }
        }        
      
    }
}

@keyframes tickBounce {
    0% {                
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    /* 100% {
        transform: scale(0.5);
        opacity: 0;
    } */
}

@keyframes pulseBorder {
    0% {
        border-color: #007bff;
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    50% {
        border-color: #00bfff;
        box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
    }
    100% {
        border-color: #007bff;
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
}