/*
|--------------------------------------------------------------------------
| Hide theme back-to-top
|--------------------------------------------------------------------------
*/

#zdf-back-to-top {
    display: none !important;
}

#eltdf-back-to-top {
	display: none !important;
}


/*
|--------------------------------------------------------------------------
| Moka Contact
|--------------------------------------------------------------------------
*/

.moka-contact {
    --moka-gold: #c9a74d;
    --moka-gold-hover: #d4b15b;
    --moka-gold-dark: #b69234;

    --moka-cream: #f6f1e6;

    --moka-dark: #111111;
    --moka-muted: #8d8476;

    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 999999;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/*
|--------------------------------------------------------------------------
| Main button
|--------------------------------------------------------------------------
*/

.moka-contact__button {
    appearance: none;

    min-width: 170px;
    height: 56px;

    padding: 0 20px;

    border:
        1px solid
        rgba(201, 167, 77, 0.35);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;

    background:
        var(--moka-dark);

    color:
        #ffffff;

    border-radius:
        2px;

    cursor:
        pointer;

    box-shadow:
        0
        10px
        25px
        rgba(0, 0, 0, .18);

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.moka-contact__button:hover {
    background:
        #181818;

    border-color:
        var(--moka-gold);

    transform:
        translateY(-2px);

    box-shadow:
        0
        14px
        30px
        rgba(0, 0, 0, .22);
}


.moka-contact__button:focus-visible {
    outline:
        2px solid
        var(--moka-gold);

    outline-offset:
        4px;
}


/*
|--------------------------------------------------------------------------
| Button text
|--------------------------------------------------------------------------
*/

.moka-contact__button-text {
    font-weight: 500;
}


/*
|--------------------------------------------------------------------------
| Button icon
|--------------------------------------------------------------------------
*/

.moka-contact__button-icon {
    position:
        relative;

    width:
        25px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 25px;

    background:
        transparent;
}


.moka-icon {
    position:
        absolute;

    width:
        22px;

    height:
        22px;

    fill:
        none;

    stroke:
        var(--moka-gold);

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.moka-icon--close {
    opacity:
        0;

    transform:
        rotate(-90deg);
}


.moka-contact.is-open
.moka-icon--chat {
    opacity:
        0;

    transform:
        rotate(90deg);
}


.moka-contact.is-open
.moka-icon--close {
    opacity:
        1;

    transform:
        rotate(0);
}


/*
|--------------------------------------------------------------------------
| Panel
|--------------------------------------------------------------------------
*/

.moka-contact__panel {
    position:
        absolute;

    right:
        0;

    bottom:
        calc(100% + 14px);

    width:
        min(
            340px,
            calc(100vw - 40px)
        );

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

    overflow-y:
        auto;

    background:
        var(--moka-cream);

    border:
        1px solid
        rgba(
            201,
            167,
            77,
            .5
        );

    box-shadow:
        0
        20px
        55px
        rgba(0, 0, 0, .17);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

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

    transform-origin:
        bottom right;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}


.moka-contact.is-open
.moka-contact__panel {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0)
        scale(1);
}


/*
|--------------------------------------------------------------------------
| Panel header
|--------------------------------------------------------------------------
*/

.moka-contact__header {
    padding:
        25px
        25px
        21px;

    border-bottom:
        1px solid
        rgba(0, 0, 0, .08);
}


.moka-contact__eyebrow {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--moka-gold-dark);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .18em;
}


.moka-contact__title {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--moka-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        22px;

    font-weight:
        400;

    line-height:
        1.25;
}


.moka-contact__subtitle {
    display:
        block;

    color:
        var(--moka-muted);

    font-size:
        13px;

    line-height:
        1.5;
}


/*
|--------------------------------------------------------------------------
| Contact methods
|--------------------------------------------------------------------------
*/

.moka-contact__links {
    padding:
        9px;
}


.moka-contact__link {
    min-height:
        68px;

    padding:
        11px
        12px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    color:
        var(--moka-dark) !important;

    text-decoration:
        none !important;

    border-radius:
        2px;

    transition:
        background-color .2s ease;
}


.moka-contact__link:hover {
    background:
        rgba(
            201,
            167,
            77,
            .10
        );
}


.moka-contact__link-icon {
    width:
        42px;

    height:
        42px;

    flex:
        0 0 42px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--moka-gold-dark);

    border:
        1px solid
        rgba(
            201,
            167,
            77,
            .75
        );

    border-radius:
        50%;
}


.moka-contact__link-icon svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.moka-contact__link-content {
    min-width:
        0;

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;
}


.moka-contact__link-label {
    margin-bottom:
        2px;

    font-size:
        14px;

    font-weight:
        500;
}


.moka-contact__link-value {
    color:
        var(--moka-muted);

    font-size:
        12px;

    line-height:
        1.4;
}


.moka-contact__arrow {
    color:
        var(--moka-gold-dark);

    font-size:
        18px;

    transition:
        transform .2s ease;
}


.moka-contact__link:hover
.moka-contact__arrow {
    transform:
        translateX(3px);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .moka-contact {
        left:
            auto;

        right:
            16px;

        bottom:
            calc(
                16px +
                env(safe-area-inset-bottom)
            );

        z-index:
            999999;
    }


    .moka-contact__button {
        min-width:
            0;

        width:
            50px;

        height:
            50px;

        padding:
            0;

        display:
            grid;

        place-items:
            center;

        background:
            var(--moka-dark);

        color:
            #ffffff;

        border:
            1px solid
            rgba(
                201,
                167,
                77,
                .5
            );

        border-radius:
            50%;

        box-shadow:
            0
            8px
            20px
            rgba(0, 0, 0, .22);
    }


    .moka-contact__button:hover {
        background:
            var(--moka-dark);

        transform:
            none;
    }


    .moka-contact__button-icon {
        width:
            24px;

        height:
            24px;

        flex:
            0 0 24px;

        background:
            transparent;
    }


    .moka-icon {
        width:
            21px;

        height:
            21px;

        stroke:
            var(--moka-gold);
    }


    .moka-contact__button-text {
        display:
            none;
    }


    .moka-contact__panel {
        right:
            0;

        left:
            auto;

        width:
            min(
                300px,
                calc(100vw - 24px)
            );

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

        transform-origin:
            bottom right;
    }


    .moka-contact__header {
        padding:
            20px
            20px
            16px;
    }


    .moka-contact__title {
        font-size:
            20px;
    }


    .moka-contact__subtitle {
        font-size:
            12px;
    }


    .moka-contact__link {
        min-height:
            60px;

        padding:
            10px;

        gap:
            12px;
    }


    .moka-contact__link-icon {
        width:
            38px;

        height:
            38px;

        flex:
            0 0 38px;
    }


    .moka-contact__link-label {
        font-size:
            13px;

        font-weight:
            500;
    }


    .moka-contact__link-value {
        font-size:
            11px;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

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

    .moka-contact *,
    .moka-contact *::before,
    .moka-contact *::after {
        transition:
            none !important;
    }

}