/* =====================================================
   BODY
===================================================== */

html{
    margin-top:0 !important;
}

body{
    margin:0;
    background:#15264b;
    overflow-x:hidden;
    font-family:sans-serif;
    top:0 !important;
    position:static !important;
}

body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:
        radial-gradient(
            white 1px,
            transparent 1px
        );

    background-size:50px 50px;

    opacity:.05;

    pointer-events:none;
}


/* =====================================================
   BOTTOM WIDGETS
===================================================== */

#bottomWidgets{

    position:fixed;

    left:15px;
    bottom:15px;

    z-index:99999;

    display:flex;

    align-items:flex-end;

    gap:5px;
}


/* =====================================================
   SMALL BUTTON
===================================================== */

.bottom-widget{

    width:62px;
    height:52px;

    border-radius:10px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-sizing:border-box;

    transition:.2s ease;

    user-select:none;

    box-shadow:
        0 5px 15px rgba(0,0,0,.25);
}


.bottom-widget:hover{

    background:#1f2937;

    transform:translateY(-2px);

}


/* =====================================================
   ICON
===================================================== */

.widget-icon{

    font-size:19px;

    line-height:20px;

    margin-bottom:2px;

}


/* =====================================================
   TEXT
===================================================== */

.widget-text{

    font-size:9px;

    font-weight:500;

    line-height:11px;

}


/* =====================================================
   LANGUAGE
===================================================== */

#langWidget{

    position:relative;

}


.lang-dropdown{

    position:absolute;

    bottom:57px;

    left:0;

    display:none;

    width:135px;

    background:#111827;

    border-radius:9px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);
}


#langWidget.active .lang-dropdown{

    display:block;

}


.lang-dropdown div{

    padding:10px 12px;

    color:#fff;

    cursor:pointer;

    font-size:12px;

}


.lang-dropdown div:hover{

    background:#1f2937;

}


/* =====================================================
   CHATBOT WINDOW
===================================================== */

#chatbotWindow{

    position:fixed;

    left:15px;
    bottom:77px;

    width:350px;

    max-width:
        calc(100vw - 30px);

    height:500px;

    max-height:
        calc(100vh - 100px);

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    display:none;

    flex-direction:column;

    z-index:99998;

    box-shadow:
        0 20px 60px rgba(0,0,0,.4);

    animation:chatOpen .2s ease;

}


@keyframes chatOpen{

    from{

        opacity:0;

        transform:
            translateY(15px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =====================================================
   CHAT HEADER
===================================================== */

.chat-header{

    background:#111827;

    color:#fff;

    padding:13px 15px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.chat-header-left{

    display:flex;

    align-items:center;

    gap:9px;

}


.bot-avatar{

    width:38px;
    height:38px;

    background:#263b70;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}


.bot-title{

    font-weight:bold;

    font-size:14px;

}


.bot-status{

    font-size:10px;

    opacity:.65;

    margin-top:2px;

}


.chat-close{

    cursor:pointer;

    font-size:22px;

    opacity:.8;

    line-height:1;

}


.chat-close:hover{

    opacity:1;

}


/* =====================================================
   CHAT MESSAGES
===================================================== */

#chatMessages{

    flex:1;

    padding:14px;

    overflow-y:auto;

    background:#f5f7fb;

}


/* =====================================================
   MESSAGE
===================================================== */

.message{

    display:flex;

    margin-bottom:11px;

}


.message.bot{

    justify-content:flex-start;

}


.message.user{

    justify-content:flex-end;

}


.message-bubble{

    max-width:82%;

    padding:9px 12px;

    border-radius:12px;

    font-size:12.5px;

    line-height:1.5;

}


.message.bot .message-bubble{

    background:#fff;

    color:#1f2937;

    border:1px solid #e5e7eb;

    border-bottom-left-radius:4px;

}


.message.user .message-bubble{

    background:#15264b;

    color:#fff;

    border-bottom-right-radius:4px;

}


/* =====================================================
   FAQ BUTTON
===================================================== */

.faq-container{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:5px;

    margin-bottom:10px;

}


.faq-button{

    width:100%;

    padding:9px 11px;

    text-align:left;

    border-radius:9px;

    border:1px solid #dfe3ea;

    background:#fff;

    cursor:pointer;

    color:#1f2937;

    font-size:12px;

    transition:.15s;

}


.faq-button:hover{

    background:#eef2ff;

    border-color:#c7d2fe;

}


/* =====================================================
   CHAT INPUT
===================================================== */

.chat-input-area{

    padding:9px;

    background:#fff;

    border-top:1px solid #e5e7eb;

    display:flex;

    gap:6px;

}


#chatInput{

    flex:1;

    min-width:0;

    border:1px solid #d1d5db;

    outline:none;

    border-radius:9px;

    padding:9px;

    font-size:12px;

    box-sizing:border-box;

}


#chatInput:focus{

    border-color:#64748b;

}


#sendMessage{

    border:0;

    background:#15264b;

    color:#fff;

    width:40px;

    border-radius:9px;

    cursor:pointer;

    font-size:16px;

}


#sendMessage:hover{

    background:#1e356b;

}

/* =====================================================
   GOOGLE TRANSLATE (HIDE ALL GOOGLE UI & ICONS)
===================================================== */

.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.skiptranslate,
.goog-tooltip,
.goog-tooltip:hover,
.goog-logo-link,
.goog-te-combo,
#google_translate_element,
.goog-te-gadget-icon,        /* Sembunyikan Icon G-Translate */
#goog-gt-tt,                 /* Sembunyikan Tooltip Pop-up */
.goog-te-balloon-frame,      /* Sembunyikan Pop-up Balloon */
div.goog-te-popup {          /* Sembunyikan Pop-up Kontainer */
    display:none !important;
}

.goog-text-highlight{
    background:none !important;
    box-shadow:none !important;
}

.goog-te-gadget{
    color:transparent !important;
    font-size:0 !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:500px){

    #bottomWidgets{

        left:10px;

        bottom:10px;

        gap:4px;

    }


    .bottom-widget{

        width:58px;

        height:49px;

        border-radius:9px;

    }


    .widget-icon{

        font-size:18px;

    }


    .widget-text{

        font-size:8px;

    }


    .lang-dropdown{

        bottom:54px;

    }


    #chatbotWindow{

        left:10px;

        bottom:70px;

        width:
            calc(100vw - 20px);

        height:70vh;

        max-height:none;

    }

}