/* ==========================================================================
   GOODMUMS MESSENGER — WPCODE CSS
   ========================================================================== */


/* ==========================================================================
   1. EASY CONTROLS
   ========================================================================== */

:root {

    /* --------------------------------------------------------------
       GOODMUMS COLORS
       -------------------------------------------------------------- */

    --gm-msg-moss: #5C6B5A;

    --gm-msg-moss-dark: #4A5748;

    --gm-msg-sage: #A8C3A0;

    --gm-msg-sage-soft: #DCE8D8;

    --gm-msg-honey: #E8B87E;

    --gm-msg-honey-dark: #C99555;

    --gm-msg-cream: #F7E8D4;

    --gm-msg-ivory: #FDF8F0;

    --gm-msg-text: #4A5748;

    --gm-msg-muted: #6D796B;

    --gm-msg-border:
        rgba(92, 107, 90, 0.16);

    --gm-msg-shadow:
        0 18px 48px
        rgba(47, 59, 46, 0.16);



    /* --------------------------------------------------------------
       POSITION — DESKTOP
       -------------------------------------------------------------- */

    --gm-msg-desktop-right: 24px;

    --gm-msg-desktop-bottom: 24px;



    /* --------------------------------------------------------------
       POSITION — TABLET
       -------------------------------------------------------------- */

    --gm-msg-tablet-right: 20px;

    --gm-msg-tablet-bottom: 20px;



    /* --------------------------------------------------------------
       POSITION — MOBILE
       -------------------------------------------------------------- */

    --gm-msg-mobile-right: 16px;

    --gm-msg-mobile-bottom: 16px;



    /* --------------------------------------------------------------
       ARRIVAL ANIMATION
       -------------------------------------------------------------- */

    --gm-msg-arrival-duration: 420ms;

    --gm-msg-arrival-distance: 12px;

}



/* ==========================================================================
   2. SHARED
   ========================================================================== */


.gm-messenger,
.gm-messenger * {

    box-sizing: border-box;

}


.gm-messenger {

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

    color:
        var(--gm-msg-text);

}


.gm-messenger button,
.gm-messenger a {

    font: inherit;

}



/* ==========================================================================
   3. FLOATING POSITION
   ========================================================================== */


.gm-messenger--floating {

    position: fixed !important;

    right:
        var(--gm-msg-desktop-right);

    bottom:
        var(--gm-msg-desktop-bottom);

    /* Cross-component z-index is managed in goodmums-z-index.css. */


    /*
     * Normal visible state.
     */
    opacity: 1;

    visibility: visible;


    transition:
        opacity
        var(--gm-msg-arrival-duration)
        ease;

}



/* ==========================================================================
   4. ARRIVAL STATE
   ========================================================================== */


/*
 * PHP renders floating widgets with this class.
 *
 * JavaScript removes it only after:
 *
 * page fully loaded
 * +
 * configured delay
 */
.gm-messenger--floating.gm-messenger--booting {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/*
 * Keep the arrival movement, but apply it to the launcher instead of
 * the fixed-position wrapper. This avoids creating a transformed
 * stacking context on the fixed element itself.
 */
.gm-messenger--floating.gm-messenger--booting
.gm-messenger__launcher {

    transform:
        translateY(
            var(--gm-msg-arrival-distance)
        );

}


/*
 * Explicit arrived state.
 */
.gm-messenger--floating.gm-messenger--arrived {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/*
 * Session hidden always wins.
 */
.gm-messenger--session-hidden {

    display: none !important;

}



/* ==========================================================================
   5. LAUNCHER
   ========================================================================== */


.gm-messenger__launcher {

    -webkit-appearance: none !important;

    appearance: none !important;


    display: inline-flex !important;

    align-items: center;

    justify-content: center;


    gap: 9px;


    min-width: 58px;

    height: 58px;


    margin: 0 !important;

    padding: 0 !important;


    border: 0 !important;

    border-radius: 999px !important;


    background:
        var(--gm-msg-moss) !important;


    color:
        var(--gm-msg-ivory) !important;


    box-shadow:
        0 10px 30px
        rgba(47, 59, 46, 0.22);


    cursor: pointer !important;


    line-height: 1 !important;


    transition:

        transform 180ms ease,

        opacity 180ms ease,

        background-color 180ms ease,

        box-shadow 180ms ease !important;

}


.gm-messenger__launcher:hover {

    background:
        var(--gm-msg-moss-dark);


    transform:
        translateY(-2px);


    box-shadow:
        0 14px 34px
        rgba(47, 59, 46, 0.26);

}


.gm-messenger__launcher:focus-visible {

    outline:
        3px solid
        rgba(168, 195, 160, 0.58);


    outline-offset: 4px;

}


.gm-messenger__launcher-icon {

    width: 27px;

    height: 27px;


    flex:
        0 0 27px;


    display: inline-flex;

    align-items: center;

    justify-content: center;

}


.gm-messenger__launcher-icon svg {

    width: 100%;

    height: 100%;


    display: block;


    fill:
        currentColor;

}



/* ==========================================================================
   6. EMBEDDED VERSION
   ========================================================================== */


.gm-messenger--embedded {

    position: relative;


    width: 100%;

}


.gm-messenger--embedded .gm-messenger__launcher {

    width: auto;

    min-width: 0;


    height: auto;

    min-height: 46px;


    padding:
        10px 16px;


    box-shadow: none;

}


.gm-messenger--embedded .gm-messenger__launcher-icon {

    width: 20px;

    height: 20px;


    flex-basis: 20px;

}


.gm-messenger__launcher-text {

    font-size: 14px;

    font-weight: 700;

    line-height: 1.3;

}



/* ==========================================================================
   7. POPOVER
   ========================================================================== */


.gm-messenger__popover {

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

}


.gm-messenger__popover[hidden] {

    display: none !important;

}



/*
 * Floating panel.
 */
.gm-messenger--floating
.gm-messenger__popover {

    position: absolute;


    right: 0;

    bottom: 72px;


    display: flex;

    flex-direction: column;


    align-items: flex-end;


    gap: 8px;


    transform-origin:
        bottom right;

}



/*
 * Embedded panel.
 */
.gm-messenger--embedded
.gm-messenger__popover {

    position: relative;


    margin-top: 12px;


    width: 100%;

    max-width: 420px;


    transform-origin:
        top left;

}



/* ==========================================================================
   8. CHAT OPEN ANIMATION
   ========================================================================== */


.gm-messenger.is-open
.gm-messenger__popover {

    animation:
        gmMessengerPopoverIn
        180ms
        ease-out;

}


@keyframes gmMessengerPopoverIn {


    from {

        opacity: 0;


        transform:
            translateY(8px)
            scale(0.98);

    }


    to {

        opacity: 1;


        transform:
            translateY(0)
            scale(1);

    }


}



/* ==========================================================================
   9. CHAT CARD
   ========================================================================== */


.gm-messenger__panel {

    width: 100%;


    overflow: hidden;


    border:
        1px solid
        var(--gm-msg-border);


    border-radius: 20px;


    background:
        var(--gm-msg-ivory);


    box-shadow:
        var(--gm-msg-shadow);

}



/* ==========================================================================
   10. HEADER
   ========================================================================== */


.gm-messenger__head {

    min-height: 78px;


    display: flex;

    align-items: center;


    gap: 12px;


    padding:
        16px
        16px
        15px
        18px;


    border-bottom:
        1px solid
        rgba(92, 107, 90, 0.10);


    background:
        var(--gm-msg-sage-soft);

}



.gm-messenger__avatar {

    width: 44px;

    height: 44px;


    flex:
        0 0 44px;


    display: grid;

    place-items: center;


    border-radius: 50%;


    background:
        var(--gm-msg-moss);


    color:
        var(--gm-msg-ivory);


    font-family:
        "Comfortaa",
        "Mulish",
        sans-serif;


    font-size: 18px;

    font-weight: 700;

    line-height: 1;


    letter-spacing:
        -0.04em;

    overflow: hidden;

}


.gm-messenger__avatar-image {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

}



.gm-messenger__identity {

    min-width: 0;


    flex:
        1 1 auto;

}



.gm-messenger__name {

    margin: 0;


    color:
        var(--gm-msg-moss);


    font-family:
        "Comfortaa",
        "Mulish",
        sans-serif;


    font-size: 16px;

    font-weight: 700;

    line-height: 1.25;

}



.gm-messenger__status {

    display: flex;

    align-items: center;


    gap: 7px;


    margin-top: 4px;


    color:
        var(--gm-msg-muted);


    font-size: 12px;

    font-weight: 600;

    line-height: 1.4;

}



.gm-messenger__status-dot {

    width: 7px;

    height: 7px;


    flex:
        0 0 7px;


    border-radius: 50%;


    background:
        var(--gm-msg-sage);


    box-shadow:
        0 0 0 3px
        rgba(168, 195, 160, 0.22);

}



/* ==========================================================================
   11. CLOSE BUTTON
   ========================================================================== */


.gm-messenger__close {

    -webkit-appearance: none !important;

    appearance: none !important;


    width: 36px !important;

    height: 36px !important;


    flex:
        0 0 36px !important;


    display: grid !important;

    place-items: center !important;


    margin: 0 !important;

    padding: 0 !important;


    border: 0 !important;

    border-radius: 50% !important;


    background:
        transparent !important;


    color:
        var(--gm-msg-moss) !important;


    cursor: pointer !important;


    transition:

        background-color
        160ms ease,

        color
        160ms ease !important;

}


.gm-messenger__close:hover {

    background:
        rgba(
            92,
            107,
            90,
            0.09
        ) !important;


    color:
        var(--gm-msg-moss-dark) !important;

}


.gm-messenger__close:focus-visible {

    outline:
        3px solid
        rgba(
            92,
            107,
            90,
            0.20
        );


    outline-offset: 1px;

}


.gm-messenger__close svg {

    width: 18px;

    height: 18px;


    display: block;


    fill: none;


    stroke:
        currentColor;


    stroke-width: 2;

    stroke-linecap: round;

}



/* ==========================================================================
   12. CONTENT
   ========================================================================== */


.gm-messenger__body {

    padding:
        20px
        18px
        18px;

}



.gm-messenger__bubble {

    margin: 0;


    padding:
        13px 14px;


    border:
        1px solid
        rgba(
            92,
            107,
            90,
            0.10
        );


    border-radius:
        16px
        16px
        16px
        5px;


    background:
        #FFFFFF;


    color:
        var(--gm-msg-text);


    font-size: 14px;

    font-weight: 500;

    line-height: 1.55;

}



.gm-messenger__hint {

    margin:
        12px
        2px
        16px !important;


    color:
        var(--gm-msg-muted);


    font-size: 12px !important;

    font-weight: 500;

    line-height: 1.5 !important;

}



/* ==========================================================================
   13. MESSENGER CTA
   ========================================================================== */


.gm-messenger__cta,
.gm-messenger__cta:visited {

    width: 100%;

    min-height: 46px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 9px;


    padding:
        11px 16px;


    border-radius:
        999px;


    background:
        var(--gm-msg-honey);


    color:
        #4A3213;


    font-size: 14px;

    font-weight: 700;

    line-height: 1.35;


    text-align: center;

    text-decoration: none;


    transition:

        background-color
        180ms ease,

        color
        180ms ease,

        transform
        180ms ease;

}



.gm-messenger__cta:hover {

    background:
        var(--gm-msg-honey-dark);


    color:
        #4A3213;


    text-decoration: none;


    transform:
        translateY(-1px);

}



.gm-messenger__cta:focus-visible {

    outline:
        3px solid
        rgba(
            168,
            195,
            160,
            0.55
        );


    outline-offset: 3px;

}



.gm-messenger__cta-icon {

    width: 19px;

    height: 19px;


    flex:
        0 0 19px;


    display: inline-flex;

}



.gm-messenger__cta-icon svg {

    width: 100%;

    height: 100%;


    display: block;


    fill:
        currentColor;

}



/* ==========================================================================
   14. HIDE CHAT FOR THIS VISIT
   --------------------------------------------------------------------------
   This is intentionally OUTSIDE the actual chat box.

   It exists inside .gm-messenger__popover, therefore it is visible only
   while the visitor has the chat interface open.
   ========================================================================== */


.gm-messenger__hide-outside {

    display: flex;

    justify-content: flex-end;


    width: 100%;


    padding-right: 4px;

}



.gm-messenger__hide-session {

    -webkit-appearance: none !important;

    appearance: none !important;


    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;


    min-height: 28px !important;


    margin: 0 !important;


    padding:
        4px 8px !important;


    border: 0 !important;

    border-radius:
        999px !important;


    background:
        rgba(
            253,
            248,
            240,
            0.96
        ) !important;


    color:
        var(--gm-msg-muted) !important;


    box-shadow:
        0 3px 12px
        rgba(
            47,
            59,
            46,
            0.08
        ) !important;


    cursor: pointer !important;


    font-size: 11px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;


    text-align: center !important;


    text-decoration:
        underline !important;


    text-decoration-thickness:
        1px !important;


    text-underline-offset:
        3px !important;


    transition:

        color
        160ms ease,

        background-color
        160ms ease !important;

}



.gm-messenger__hide-session:hover {

    background:
        var(--gm-msg-ivory) !important;


    color:
        var(--gm-msg-moss-dark) !important;

}



.gm-messenger__hide-session:focus-visible {

    outline:
        2px solid
        rgba(
            92,
            107,
            90,
            0.28
        );


    outline-offset: 2px;

}



/* ==========================================================================
   15. HIDE ANIMATION
   ========================================================================== */


.gm-messenger--hiding {

    pointer-events: none;

}


.gm-messenger--hiding
.gm-messenger__launcher {

    opacity: 0;


    transform:
        translateY(8px)
        scale(0.94);

}



/* ==========================================================================
   16. TABLET
   768px — 1024px
   ========================================================================== */


@media
(max-width: 1024px) {


    .gm-messenger--floating {

        right:
            var(--gm-msg-tablet-right);


        bottom:
            var(--gm-msg-tablet-bottom);

    }


    .gm-messenger--floating
    .gm-messenger__popover {

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

    }


}



/* ==========================================================================
   17. MOBILE
   0 — 767px
   ========================================================================== */


@media
(max-width: 767px) {


    .gm-messenger--floating {

        right:
            var(--gm-msg-mobile-right);


        bottom:
            var(--gm-msg-mobile-bottom);

    }



    .gm-messenger--floating
    .gm-messenger__launcher {

        min-width: 56px;

        height: 56px;

    }



    .gm-messenger--floating
    .gm-messenger__launcher-icon {

        width: 26px;

        height: 26px;


        flex-basis: 26px;

    }



    .gm-messenger--floating
    .gm-messenger__popover {

        right: 0;

        bottom: 68px;


        width:
            min(
                330px,
                calc(100vw - 32px)
            );

    }



    .gm-messenger__head {

        min-height: 74px;


        padding:
            15px
            14px
            14px
            16px;

    }



    .gm-messenger__avatar {

        width: 42px;

        height: 42px;


        flex-basis: 42px;


        font-size: 17px;

    }



    .gm-messenger__body {

        padding:
            18px
            16px
            17px;

    }



    .gm-messenger__hide-outside {

        padding-right: 2px;

    }



    .gm-messenger--embedded
    .gm-messenger__popover {

        width: 100%;

        max-width: 100%;

    }


}



/* ==========================================================================
   18. REDUCED MOTION
   ========================================================================== */


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


    .gm-messenger--floating,
    .gm-messenger__launcher,
    .gm-messenger__close,
    .gm-messenger__cta,
    .gm-messenger__hide-session {

        transition: none;

    }


    .gm-messenger.is-open
    .gm-messenger__popover {

        animation: none;

    }


    .gm-messenger__launcher:hover,
    .gm-messenger__cta:hover {

        transform: none;

    }


}