/* ============================================================
   CHATKARO ONLINE CHATROOMS
   Modern custom dropdown version
   ============================================================ */

:root {

    --ck-green: #087a4b;
    --ck-green-dark: #055c38;
    --ck-green-soft: #eaf8f1;

    --ck-text: #17212b;
    --ck-muted: #71808c;

    --ck-bg: #f6f9f8;
    --ck-white: #ffffff;

    --ck-border: #e1e9e5;

    --ck-shadow:
        0 18px 50px rgba(15, 23, 42, .08);

}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html,
body {

    margin: 0;
    padding: 0;

    width: 100%;

}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        var(--ck-bg);

    color:
        var(--ck-text);

    line-height:
        1.6;

}

button {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}


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

.ck-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

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

    border-bottom:
        1px solid var(--ck-border);

    backdrop-filter:
        blur(18px);

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

}


.ck-header-inner {

    width:
        min(1180px, calc(100% - 32px));

    min-height:
        70px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.ck-logo {

    font-size:
        25px;

    font-weight:
        800;

    letter-spacing:
        -1.2px;

}


.ck-logo-chat {
    color: #17212b;
}

.ck-logo-karo {
    color: var(--ck-green);
}


.ck-header-nav {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.ck-header-nav a {

    padding:
        9px 13px;

    border-radius:
        9px;

    color:
        #40505c;

    font-size:
        13px;

    font-weight:
        600;

}


.ck-header-nav a:hover {

    background:
        var(--ck-green-soft);

    color:
        var(--ck-green);

}


.ck-home-btn {

    background:
        var(--ck-green) !important;

    color:
        #fff !important;

}


.ck-home-btn:hover {

    background:
        var(--ck-green-dark) !important;

}


/* ============================================================
   HERO
   ============================================================ */

.ck-hero {

    padding:
        78px 20px
        65px;

    text-align:
        center;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(8,122,75,.13),
            transparent 33%
        ),

        radial-gradient(
            circle at 85% 10%,
            rgba(255,183,3,.09),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #effaf5,
            #f7faf9
        );

}


.ck-hero-inner {

    width:
        min(800px,100%);

    margin:
        auto;

}


.ck-hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        7px 14px;

    margin-bottom:
        17px;

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

    border:
        1px solid #cfe7da;

    border-radius:
        50px;

    color:
        var(--ck-green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


.ck-hero h1 {

    margin:
        0 0 14px;

    font-size:
        clamp(40px,6vw,64px);

    line-height:
        1.03;

    letter-spacing:
        -2.8px;

    font-weight:
        800;

}


.ck-hero h1 span {

    color:
        var(--ck-green);

}


.ck-hero p {

    max-width:
        680px;

    margin:
        auto;

    color:
        var(--ck-muted);

    font-size:
        clamp(15px,2vw,18px);

}


/* ============================================================
   SELECTOR
   ============================================================ */

.ck-selector-section {

    padding:
        48px 20px
        55px;

}


.ck-selector-card {

    width:
        min(700px,100%);

    margin:
        auto;

    padding:
        32px;

    background:
        #fff;

    border:
        1px solid var(--ck-border);

    border-radius:
        22px;

    box-shadow:
        var(--ck-shadow);

}


.ck-selector-heading {

    text-align:
        center;

    margin-bottom:
        25px;

}


.ck-selector-heading h2 {

    margin:
        0 0 6px;

    font-size:
        clamp(25px,4vw,34px);

    line-height:
        1.2;

    letter-spacing:
        -1px;

}


.ck-selector-heading p {

    margin:
        0;

    color:
        var(--ck-muted);

    font-size:
        13px;

}


/* ============================================================
   CUSTOM DROPDOWN
   ============================================================ */

.ck-dropdown {

    position:
        relative;

    width:
        100%;

}


.ck-dropdown-button {

    width:
        100%;

    min-height:
        58px;

    padding:
        9px 50px
        9px 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid #cedbd4;

    border-radius:
        13px;

    background:
        #fff;

    color:
        var(--ck-text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.ck-dropdown-button:hover {

    border-color:
        #9dcbb3;

}


.ck-dropdown.open
.ck-dropdown-button {

    border-color:
        var(--ck-green);

    box-shadow:
        0 0 0 4px
        rgba(8,122,75,.09);

}


.ck-dropdown-main-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--ck-green-soft);

    font-size:
        18px;

}


.ck-dropdown-selected {

    min-width:
        0;

    flex:
        1;

}


.ck-dropdown-selected-title {

    display:
        block;

    font-size:
        14px;

    font-weight:
        700;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.ck-dropdown-selected-sub {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--ck-muted);

    font-size:
        10px;

}


.ck-dropdown-arrow {

    position:
        absolute;

    right:
        17px;

    top:
        50%;

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    color:
        var(--ck-green);

    font-size:
        17px;

    transition:
        transform .2s ease;

}


.ck-dropdown.open
.ck-dropdown-arrow {

    transform:
        translateY(-50%)
        rotate(180deg);

}


/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.ck-dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 8px);

    left:
        0;

    right:
        0;

    z-index:
        500;

    padding:
        7px;

    background:
        #fff;

    border:
        1px solid var(--ck-border);

    border-radius:
        15px;

    box-shadow:
        0 20px 45px
        rgba(15,23,42,.13);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-5px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;

}


.ck-dropdown.open
.ck-dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.ck-dropdown-group {

    padding:
        6px 9px 5px;

    color:
        #87939b;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

}


.ck-dropdown-option {

    width:
        100%;

    min-height:
        56px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        8px 10px;

    border:
        0;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--ck-text);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        background .15s ease;

}


.ck-dropdown-option:hover {

    background:
        #f2f8f5;

}


.ck-dropdown-option.selected {

    background:
        var(--ck-green-soft);

}


.ck-option-icon {

    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #f1f5f3;

    font-size:
        15px;

    font-weight:
        700;

}


.ck-dropdown-option.selected
.ck-option-icon {

    background:
        #fff;

}


.ck-option-text {

    flex:
        1;

    min-width:
        0;

}


.ck-option-name {

    display:
        block;

    font-size:
        13px;

    font-weight:
        700;

}


.ck-option-sub {

    display:
        block;

    margin-top:
        1px;

    color:
        #89959d;

    font-size:
        10px;

}


.ck-option-channel {

    flex:
        0 0 auto;

    padding:
        4px 7px;

    border-radius:
        6px;

    background:
        #f2f5f4;

    color:
        #718078;

    font-family:
        monospace;

    font-size:
        9px;

}


.ck-dropdown-option.selected
.ck-option-channel {

    background:
        #fff;

    color:
        var(--ck-green);

}


/* ============================================================
   CONNECT
   ============================================================ */

.ck-connect {

    width:
        100%;

    height:
        55px;

    margin-top:
        14px;

    border:
        0;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            #087a4b,
            #06643f
        );

    color:
        #fff;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 11px 25px
        rgba(8,122,75,.18);

    transition:
        .2s ease;

}


.ck-connect:hover {

    transform:
        translateY(-1px);

}


.ck-connect:disabled {

    opacity:
        .45;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


/* ============================================================
   STATUS
   ============================================================ */

.ck-status {

    min-height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        11px;

    color:
        var(--ck-muted);

    font-size:
        12px;

    text-align:
        center;

}


.ck-status-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        #b8c2c8;

}


.ck-status-dot.active {

    background:
        #16a34a;

    box-shadow:
        0 0 0 4px
        rgba(22,163,74,.10);

}


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

.ck-loading {

    display:
        none;

    width:
        min(900px,calc(100% - 40px));

    margin:
        0 auto 15px;

    padding:
        15px 18px;

    border:
        1px solid #d6e8de;

    border-radius:
        12px;

    background:
        #f7fcf9;

    color:
        #5f7269;

    text-align:
        center;

    font-size:
        12px;

}


.ck-loading.visible {

    display:
        block;

}


.ck-spinner {

    display:
        inline-block;

    width:
        15px;

    height:
        15px;

    margin-right:
        7px;

    vertical-align:
        -3px;

    border:
        2px solid #cde3d7;

    border-top-color:
        var(--ck-green);

    border-radius:
        50%;

    animation:
        ckSpin .8s linear infinite;

}


@keyframes ckSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   CHAT SECTION
   ============================================================ */

.ck-chat-section {

    display:
        none;

    padding:
        0 20px
        45px;

}


.ck-chat-section.visible {

    display:
        block;

}


.ck-chat-box {

    width:
        min(1500px,100%);

    height:
        calc(100vh - 145px);

    min-height:
        600px;

    margin:
        auto;

    overflow:
        hidden;

    background:
        #111;

    border:
        1px solid #dfe7e3;

    border-radius:
        17px;

    box-shadow:
        0 22px 55px
        rgba(15,23,42,.15);

}


.ck-chat-toolbar {

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 14px;

    background:
        #fff;

    border-bottom:
        1px solid var(--ck-border);

}


.ck-current-room {

    min-width:
        0;

}


.ck-current-label {

    display:
        block;

    color:
        #89959d;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


.ck-current-name {

    display:
        block;

    color:
        #202d36;

    font-size:
        13px;

    font-weight:
        800;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.ck-change {

    padding:
        7px 11px;

    border:
        1px solid var(--ck-border);

    border-radius:
        8px;

    background:
        #fff;

    color:
        #53616d;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

}


.ck-change:hover {

    color:
        var(--ck-green);

    background:
        #f4f8f6;

}


/* ============================================================
   IFRAME
   ============================================================ */

.ck-iframe-wrapper {

    width:
        100%;

    height:
        calc(100% - 56px);

    background:
        #111;

}


.ck-iframe {

    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

}


/* ============================================================
   FULLSCREEN BUTTON
   ============================================================ */

.ck-fullscreen-area {

    display:
        flex;

    justify-content:
        center;

    padding:
        11px 0 0;

}


.ck-fullscreen {

    padding:
        7px 12px;

    border:
        1px solid #dce5e0;

    border-radius:
        8px;

    background:
        #fff;

    color:
        #596771;

    font-size:
        10px;

    font-weight:
        700;

    cursor:
        pointer;

}


.ck-fullscreen:hover {

    color:
        var(--ck-green);

    border-color:
        #a9cdb8;

}


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

.ck-connected {

    margin:
        9px auto 0;

    text-align:
        center;

    color:
        #697871;

    font-size:
        12px;

}


.ck-connected strong {

    color:
        var(--ck-green);

}


/* ============================================================
   FOOTER
   ============================================================ */

.ck-footer {

    padding:
        26px 20px;

    background:
        #101820;

    color:
        #95a2ac;

    text-align:
        center;

    font-size:
        11px;

}


.ck-footer-logo {

    display:
        inline-block;

    margin-bottom:
        4px;

    color:
        #fff;

    font-size:
        19px;

    font-weight:
        800;

}


.ck-footer-logo span {

    color:
        var(--ck-green);

}


.ck-footer p {

    margin:
        0;

}


/* ============================================================
   MOBILE KEYBOARD-SAFE FULLSCREEN
   ============================================================ */
@media (max-width: 768px) {
    body.ck-mobile-chat-fullscreen { overflow:hidden !important; position:fixed !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; }
    body.ck-mobile-chat-fullscreen .ck-header,
    body.ck-mobile-chat-fullscreen .ck-hero,
    body.ck-mobile-chat-fullscreen .ck-selector-section,
    body.ck-mobile-chat-fullscreen .ck-loading,
    body.ck-mobile-chat-fullscreen .ck-footer { display:none !important; }
    body.ck-mobile-chat-fullscreen .ck-chat-section { position:fixed !important; inset:0 !important; z-index:999999 !important; width:100% !important; height:var(--ck-visual-height,100dvh) !important; min-height:0 !important; padding:0 !important; margin:0 !important; display:block !important; background:#111 !important; overflow:hidden !important; }
    body.ck-mobile-chat-fullscreen .ck-chat-box { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
    body.ck-mobile-chat-fullscreen .ck-chat-toolbar { flex:0 0 53px !important; height:53px !important; min-height:53px !important; position:relative !important; z-index:20 !important; }
    body.ck-mobile-chat-fullscreen .ck-iframe-wrapper { flex:1 1 auto !important; width:100% !important; height:auto !important; min-height:0 !important; overflow:hidden !important; background:#111 !important; }
    body.ck-mobile-chat-fullscreen .ck-iframe { display:block !important; width:100% !important; height:100% !important; min-height:0 !important; border:0 !important; }
    body.ck-mobile-chat-fullscreen .ck-fullscreen-area,
    body.ck-mobile-chat-fullscreen .ck-connected { display:none !important; }
    body.ck-mobile-chat-fullscreen .ck-current-room { max-width:calc(100% - 135px); }
    body.ck-mobile-chat-fullscreen .ck-change { flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:420px) { body.ck-mobile-chat-fullscreen .ck-chat-toolbar { flex-basis:50px !important; height:50px !important; min-height:50px !important; } }

/* ============================================================
   MOBILE FULLSCREEN CLOSE BUTTON
   ============================================================ */

.ck-mobile-close {
    display: none;
}

@media (max-width: 768px) {

    body.ck-mobile-chat-fullscreen .ck-mobile-close {
        display: flex !important;
        position: fixed !important;
        top: max(8px, env(safe-area-inset-top)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        z-index: 1000000 !important;

        width: 34px !important;
        height: 34px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 1px solid rgba(255,255,255,.25) !important;
        border-radius: 9px !important;

        background: rgba(17,24,29,.86) !important;
        color: #fff !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        box-shadow: 0 4px 16px rgba(0,0,0,.25) !important;

        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    body.ck-mobile-chat-fullscreen .ck-mobile-close:active {
        transform: scale(.94);
        background: var(--ck-green) !important;
    }

    /*
     * Make the mobile toolbar compact so the iframe gets
     * as much usable height as possible.
     */
    body.ck-mobile-chat-fullscreen .ck-chat-toolbar {
        padding-right: 52px !important;
    }

    body.ck-mobile-chat-fullscreen .ck-current-room {
        max-width: calc(100% - 115px) !important;
    }

    body.ck-mobile-chat-fullscreen .ck-current-label {
        font-size: 8px !important;
    }

    body.ck-mobile-chat-fullscreen .ck-current-name {
        font-size: 12px !important;
    }

    body.ck-mobile-chat-fullscreen .ck-change {
        padding: 6px 8px !important;
        font-size: 9px !important;
        border-radius: 7px !important;
        max-width: 112px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * On phones, don't use the old 500px minimum height.
     * It is one of the reasons the frame can look too small.
     */
    .ck-chat-box {
        min-height: 0 !important;
    }

    .ck-iframe-wrapper {
        min-height: 0 !important;
    }
}

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



@media (max-width: 700px) {

    .ck-header-inner {

        min-height:
            64px;

    }


    .ck-header-nav a {

        display:
            none;

    }


    .ck-home-btn {

        display:
            inline-flex !important;

        padding:
            8px 11px !important;

        font-size:
            10px !important;

    }


    .ck-hero {

        padding:
            55px 16px
            44px;

    }


    .ck-hero h1 {

        font-size:
            39px;

        letter-spacing:
            -1.9px;

    }


    .ck-selector-section {

        padding:
            30px 12px
            42px;

    }


    .ck-selector-card {

        padding:
            22px 15px;

        border-radius:
            17px;

    }


    .ck-dropdown-menu {

        max-height:
            70vh;

        overflow-y:
            auto;

    }


    .ck-chat-section {

        padding:
            0 7px
            30px;

    }


    .ck-chat-box {

        height:
            calc(100dvh - 91px);

        min-height:
            0;

        border-radius:
            10px;

    }


    .ck-chat-toolbar {

        height:
            53px;

        padding:
            0 10px;

    }


    .ck-iframe-wrapper {

        height:
            calc(100% - 53px);

    }

}


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

@media (max-width: 420px) {

    .ck-logo {

        font-size:
            22px;

    }


    .ck-home-btn {

        font-size:
            9px !important;

    }


    .ck-hero h1 {

        font-size:
            35px;

    }


    .ck-selector-heading h2 {

        font-size:
            25px;

    }


    .ck-dropdown-option {

        min-height:
            54px;

    }


    .ck-option-channel {

        display:
            none;

    }


    .ck-chat-box {

        height:
            calc(100dvh - 88px);

    }

}