/*==========================================================
    Gooexa Voice Search v3
==========================================================*/


/*==========================================================
    Popup Overlay
==========================================================*/

.goo-voice-popup{

    position:fixed;

    left:0;

    top:0;

    width:100%;

    height:100%;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    z-index:999999;

    overflow:hidden;

}


/*==========================================================
    Popup Box
==========================================================*/

.goo-voice-box{

    width:100%;

    max-width:560px;

    padding:40px;

    text-align:center;

    position:relative;

    animation:gooPopup .35s ease;

}


/*==========================================================
    Popup Animation
==========================================================*/

@keyframes gooPopup{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
    Close Button
==========================================================*/

.goo-close{

    position:absolute;

    top:15px;

    right:15px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    color:#666;

    font-size:28px;

    cursor:pointer;

    transition:.25s;

}

.goo-close:hover{

    background:#e6e6e6;

    color:#000;

}

/*==========================================================
    Microphone Area
==========================================================*/

.goo-logo{

    width:180px;

    height:180px;

    margin:30px auto;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==========================================================
    Microphone Circle
==========================================================*/

.goo-mic{

    width:160px;

    height:160px;

    border-radius:50%;

    background:#4285f4;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:
        0 15px 35px rgba(66,133,244,.35);

}

.goo-mic:hover{

    transform:scale(1.05);

}


/*==========================================================
    Microphone Icon
==========================================================*/

.goo-mic i{

    font-size:64px;

    color:#fff;

}


/*==========================================================
    Pulse Animation
==========================================================*/

.goo-mic.active{

    animation:gooPulse 1.5s infinite;

}

@keyframes gooPulse{

    0%{

        transform:scale(1);

        box-shadow:
        0 0 0 0 rgba(66,133,244,.55);

    }

    70%{

        transform:scale(1.08);

        box-shadow:
        0 0 0 35px rgba(66,133,244,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
        0 0 0 0 rgba(66,133,244,0);

    }

}


/*==========================================================
    Ripple Effect
==========================================================*/

.goo-mic::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    border:2px solid rgba(66,133,244,.25);

    animation:gooRipple 2.5s infinite;

}

@keyframes gooRipple{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    100%{

        transform:scale(1.6);

        opacity:0;

    }

}

/*==========================================================
    Voice Title
==========================================================*/

#gooVoiceTitle{

    margin-top:30px;

    font-size:36px;

    font-weight:700;

    color:#222;

    line-height:1.3;

}


/*==========================================================
    Voice Subtitle
==========================================================*/

#gooVoiceText{

    margin-top:15px;

    font-size:20px;

    color:#666;

    line-height:1.5;

}


/*==========================================================
    Transcript
==========================================================*/

#gooTranscript{

    margin-top:40px;

    min-height:70px;

    font-size:28px;

    font-weight:500;

    color:#111;

    line-height:1.5;

    word-break:break-word;

    transition:.3s;

}


/*==========================================================
    Searching Effect
==========================================================*/

#gooTranscript.searching{

    color:#4285f4;

}


/*==========================================================
    Error
==========================================================*/

#gooTranscript.error{

    color:#e53935;

}


/*==========================================================
    Success
==========================================================*/

#gooTranscript.success{

    color:#34a853;

}


/*==========================================================
    Loading Dots
==========================================================*/

.goo-loading{

    display:inline-flex;

    gap:8px;

    justify-content:center;

    align-items:center;

}

.goo-loading span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4285f4;

    animation:gooDots 1.2s infinite;

}

.goo-loading span:nth-child(2){

    animation-delay:.2s;

}

.goo-loading span:nth-child(3){

    animation-delay:.4s;

}

@keyframes gooDots{

    0%{

        transform:translateY(0);

        opacity:.5;

    }

    50%{

        transform:translateY(-8px);

        opacity:1;

    }

    100%{

        transform:translateY(0);

        opacity:.5;

    }

}

/*==========================================================
    Tablet Responsive
==========================================================*/

@media (max-width:992px){

    .goo-voice-box{

        max-width:90%;

        padding:35px;

    }

    .goo-logo{

        width:160px;

        height:160px;

    }

    .goo-mic{

        width:140px;

        height:140px;

    }

    .goo-mic::after{

        width:140px;

        height:140px;

    }

    .goo-mic i{

        font-size:56px;

    }

    #gooVoiceTitle{

        font-size:30px;

    }

    #gooVoiceText{

        font-size:18px;

    }

    #gooTranscript{

        font-size:24px;

    }

}


/*==========================================================
    Mobile Responsive
==========================================================*/

@media (max-width:768px){

    .goo-voice-box{

        width:100%;

        padding:30px 20px;

    }

    .goo-logo{

        width:130px;

        height:130px;

        margin:20px auto;

    }

    .goo-mic{

        width:120px;

        height:120px;

    }

    .goo-mic::after{

        width:120px;

        height:120px;

    }

    .goo-mic i{

        font-size:46px;

    }

    #gooVoiceTitle{

        font-size:26px;

    }

    #gooVoiceText{

        font-size:17px;

    }

    #gooTranscript{

        margin-top:25px;

        font-size:21px;

        min-height:55px;

    }

    .goo-close{

        width:40px;

        height:40px;

        font-size:24px;

        right:10px;

        top:10px;

    }

}


/*==========================================================
    Small Mobile
==========================================================*/

@media (max-width:480px){

    .goo-logo{

        width:110px;

        height:110px;

    }

    .goo-mic{

        width:100px;

        height:100px;

    }

    .goo-mic::after{

        width:100px;

        height:100px;

    }

    .goo-mic i{

        font-size:40px;

    }

    #gooVoiceTitle{

        font-size:22px;

    }

    #gooVoiceText{

        font-size:16px;

    }

    #gooTranscript{

        font-size:18px;

    }

}

/*==========================================================
    Gooexa Premium Finish
==========================================================*/

.goo-voice-popup.show{

    animation:gooFadeIn .35s ease forwards;

}

.goo-voice-popup.hide{

    animation:gooFadeOut .25s ease forwards;

}

@keyframes gooFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes gooFadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}


/*==========================================================
    Microphone Active Glow
==========================================================*/

.goo-mic.active{

    background:#4285f4;

    box-shadow:

        0 0 25px rgba(66,133,244,.45),

        0 0 70px rgba(66,133,244,.25),

        0 0 120px rgba(66,133,244,.18);

}


/*==========================================================
    Searching Animation
==========================================================*/

.searching-animation{

    animation:gooSearching .9s linear infinite;

}

@keyframes gooSearching{

    0%{

        opacity:.3;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.3;

    }

}


/*==========================================================
    Selection
==========================================================*/

#gooTranscript::selection{

    background:#4285f4;

    color:#fff;

}


/*==========================================================
    Scrollbar
==========================================================*/

#gooTranscript::-webkit-scrollbar{

    width:6px;

}

#gooTranscript::-webkit-scrollbar-thumb{

    background:#4285f4;

    border-radius:20px;

}


/*==========================================================
    Disable Text Selection
==========================================================*/

.goo-voice-popup{

    user-select:none;

    -webkit-user-select:none;

}


/*==========================================================
    Reduce Motion
==========================================================*/

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/*==========================================================
    End Of File
==========================================================*/