/* CALCULATE FROM JS */
#placardly-body {
    --existing-top-margin: 0px;
    --existing-bottom-margin: 0px;
    --existing-left-margin: 0px;
    --existing-right-margin: 0px;
    --placard-height: initial;
    --placard-sidebar-width: initial;
}
/* END OF CALCULATE FROM JS */

#placardly-body {
    --landscape-max-width: 100%;

    --widget-head-width: 75px;

    --container-vertical-padding: 7px;
    --container-horizontal-padding: 7px;
    --button-vertical-padding: 6px;
    --button-horizontal-padding: 12px;

    --container-font-family: Helvetica, Arial, sans-serif;

    --container-font-size: 16px;
    --title-font-size: initial;
    --message-font-size: initial;
    --button-font-size: initial;

    --container-vertical-gap: 7px;
    --container-horizontal-gap: 10px;

    --container-vertical-margin: 10px;
    --container-horizontal-margin: 10px;

    --button-border-width: 4px;

    --extra-padding: 15px;

    --chatbubble-tail-width: 10px;
    --chatbubble-tail-offset: 15px;
}

#placardly-body.placardly-placement-outside.placardly-container-background-off #placardly-inner {
    --container-text-color: var(--body-text-color);

    --container-vertical-padding: 0px;
    --container-horizontal-padding: 0px;

    --container-border-radius: 0px;
    --container-border-radius-small: 0px;
}

#placardly-body.placardly-button-background-off.placardly-button-border-off #placardly-inner {
    --button-vertical-padding: 0px;
    --button-horizontal-padding: 0px;

    --button-border-radius: 0px;
}

#placardly-inner {
    --widget-head-width-final: var(--widget-head-width);
    --chathead-side-length: calc(var(--widget-head-width-final) + var(--container-vertical-padding) * 2);
    
    --title-font-size-final: var(--title-font-size, var(--container-font-size));
    --message-font-size-final: var(--message-font-size, var(--container-font-size));
    --button-font-size-final: var(--button-font-size, var(--container-font-size));
    
    --placard-height: var(--placard-height, var(--chathead-side-length));
    --placard-sidebar-width: var(--placard-sidebar-width, var(--portrait-max-width));
}

/*
 * Reset to normal
 */
#placardly-body * {
    padding: 0;
    margin: 0;
}

/*
 * Set default value
 */
#placardly-body *,
#placardly-body *:before {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*
 * PAGE BODY
 */

/* body.placardly-page-body {
    position: relative;
} */


/*
 * PLACARD BODY
 */
.placardly-placard-off {
    display: none !important;
}

#placardly-body.placardly-attachment-off.placardly-title-off.placardly-message-off.placardly-action-off {
    display: none;
}

#placardly-body {
    position: fixed;
    z-index: 99999;
    box-sizing: border-box;
}

#placardly-body * {
    box-sizing: inherit;
}

.placardly-placement-overlay#placardly-body {
    pointer-events: none;
}

.placardly-placement-outside#placardly-body {
    background-image: var(--body-background-image);
}

.placardly-primary-layout-widget.placardly-landscape-vertical-position-top#placardly-body,
.placardly-primary-layout-widget.placardly-landscape-vertical-position-middle#placardly-body,
.placardly-primary-layout-widget.placardly-landscape-vertical-position-bottom#placardly-body {
    left: 0;
    right: 0;
}

.placardly-primary-layout-widget.placardly-landscape-vertical-position-top#placardly-body {
    margin-top: var(--existing-top-margin);
    top: 0;
}

.placardly-primary-layout-widget.placardly-landscape-vertical-position-middle#placardly-body {
    top: calc((50vh - 50%) * -1);
    transform: translate(0, calc(50vh - 50%));
}

.placardly-primary-layout-widget.placardly-landscape-vertical-position-bottom#placardly-body {
    margin-bottom: var(--existing-bottom-margin);
    bottom: 0;
}

.placardly-primary-layout-tile.placardly-portrait-horizontal-position-left#placardly-body,
.placardly-primary-layout-tile.placardly-portrait-horizontal-position-center#placardly-body,
.placardly-primary-layout-tile.placardly-portrait-horizontal-position-right#placardly-body {
    top: var(--placardly-adminbar-height, 0px);
    bottom: 0;
}

.placardly-primary-layout-tile.placardly-portrait-horizontal-position-left#placardly-body {
    margin-left: var(--existing-left-margin);
    left: 0;
}

.placardly-primary-layout-tile.placardly-portrait-horizontal-position-center#placardly-body {
    left: calc((50vw - 50%) * -1);
    transform: translate(calc(50vw - 50%));
}

.placardly-primary-layout-tile.placardly-portrait-horizontal-position-right#placardly-body {
    margin-right: var(--existing-right-margin);
    right: 0;
}




/*
 * INNER
 */

#placardly-inner {
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;
    padding: var(--container-vertical-margin) var(--container-horizontal-margin);
}

.placardly-primary-layout-widget #placardly-inner {
    max-width: var(--landscape-max-width);
    max-height: var(--portrait-max-width);
}

.placardly-primary-layout-widget.placardly-landscape-horizontal-position-left #placardly-inner {
    justify-content: start;
}

.placardly-primary-layout-widget.placardly-landscape-horizontal-position-center #placardly-inner {
    justify-content: center;
}

.placardly-primary-layout-widget.placardly-landscape-horizontal-position-right #placardly-inner {
    justify-content: end;
}

.placardly-primary-layout-tile #placardly-inner {
    max-height: var(--landscape-max-width);
    max-width: var(--portrait-max-width);
}

.placardly-primary-layout-tile.placardly-portrait-vertical-position-top #placardly-inner {
    align-items: start;
}

.placardly-primary-layout-tile.placardly-portrait-vertical-position-middle #placardly-inner {
    align-items: center;
}

.placardly-primary-layout-tile.placardly-portrait-vertical-position-bottom #placardly-inner {
    align-items: end;
}



/*
 * CONTAINER
 */

#placardly-container {
    display: grid;
    row-gap: var(--container-vertical-gap);
    column-gap: var(--container-horizontal-gap);
    font-family: var(--container-font-family);
    font-size: var(--container-font-size);
    line-height: 1.2;
    cursor: unset;
    text-decoration: none;
}

#placardly-body:not(.placardly-placement-outside):not(.placardly-primary-layout-widget.placardly-widget-layout-chat) #placardly-container {
    box-shadow: 0 0 10px #00000088;
}

#placardly-body #placardly-container {
    color: var(--container-text-color);
}

#placardly-body:not(.placardly-primary-layout-widget.placardly-widget-layout-chat):not(.placardly-placement-outside.placardly-container-background-off) #placardly-container {
    background-image: var(--container-background-image);
}

#placardly-body:not(.placardly-primary-layout-widget.placardly-widget-layout-chat) #placardly-container {
    padding: var(--container-vertical-padding) var(--container-horizontal-padding);
}

#placardly-body.placardly-primary-layout-widget:not(.placardly-widget-layout-chat).placardly-container-border-radius-full #placardly-container {
    padding-right: calc(var(--container-horizontal-padding) + var(--extra-padding));
}

#placardly-body.placardly-primary-layout-widget:not(.placardly-widget-layout-chat).placardly-container-border-radius-full.placardly-attachment-off #placardly-container {
    padding-left: calc(var(--container-horizontal-padding) + var(--extra-padding));
}

.placardly-primary-layout-widget:not(.placardly-widget-layout-chat) #placardly-container {
    border-radius: var(--container-border-radius);
}

.placardly-primary-layout-tile #placardly-container {
    border-radius: var(--container-border-radius-small);
}

.placardly-primary-layout-widget #placardly-container {
    max-width: var(--landscape-max-width);
    grid-auto-flow: column;
    grid-auto-columns: auto minmax(10px, 1fr);
}

.placardly-primary-layout-tile #placardly-container {
    max-width: var(--portrait-max-width);
    grid-auto-flow: row;
}


/*
 * ATTACHMENT
 */

#placardly-attachment-wrapper {
    line-height: 0;
}

.placardly-attachment-off #placardly-attachment-wrapper {
    display: none;
}

.placardly-primary-layout-widget:not(.placardly-widget-layout-chat.placardly-container-border-radius-small) #placardly-attachment-wrapper {
    align-self: center;
}

.placardly-primary-layout-widget.placardly-widget-layout-chat #placardly-attachment-wrapper {
    align-self: start;
}


/*
 * MEDIA
 */

.placardly-media-element {
    width: 100%;
    border-radius: var(--media-border-radius);
    pointer-events: auto;
    cursor: pointer;
}

.placardly-primary-layout-widget:not(.placardly-widget-layout-chat).placardly-container-border-radius-full .placardly-media-element {
    border-radius: 9999px;
}

.placardly-primary-layout-widget .placardly-media-element {
    object-fit: cover;
}

.placardly-primary-layout-widget:not(.placardly-widget-layout-chat) .placardly-media-element {
    height: var(--widget-head-width-final);
    width: var(--widget-head-width-final);
}

.placardly-primary-layout-widget.placardly-widget-layout-chat .placardly-media-element {
    height: var(--chathead-side-length);
    width: var(--chathead-side-length);
}

/*
 * CONTEXT
 */

.placardly-title-off.placardly-message-off.placardly-action-off #placardly-context-wrapper {
    display: none;
}

#placardly-context-wrapper {
    display: grid;
    row-gap: var(--container-vertical-gap);
    column-gap: var(--container-horizontal-gap);
}

#placardly-body:not(.placardly-placement-outside).placardly-primary-layout-widget.placardly-widget-layout-chat #placardly-context-wrapper {
    box-shadow: 0 0 10px #00000088;
}

.placardly-primary-layout-widget.placardly-widget-layout-chat:not(.placardly-placement-outside.placardly-container-background-off) #placardly-context-wrapper {
    background-image: var(--container-background-image);
}

.placardly-primary-layout-widget.placardly-widget-layout-chat #placardly-context-wrapper {
    padding: var(--container-vertical-padding) var(--container-horizontal-padding);
    border-radius: var(--container-border-radius);
}

#placardly-body.placardly-primary-layout-widget.placardly-widget-layout-chat.placardly-container-border-radius-full #placardly-context-wrapper {
    padding-left: calc(var(--container-horizontal-padding) + var(--extra-padding));
    padding-right: calc(var(--container-horizontal-padding) + var(--extra-padding));
}

.placardly-primary-layout-widget:not(.placardly-widget-layout-layer) #placardly-context-wrapper {
    grid-auto-flow: column;
}

.placardly-primary-layout-widget.placardly-widget-layout-layer #placardly-context-wrapper {
    grid-auto-flow: row;
}

.placardly-primary-layout-tile #placardly-context-wrapper {
    grid-auto-flow: row;
}

.placardly-primary-layout-widget.placardly-container-border-radius-full:not(.placardly-widget-layout-chat) #placardly-attachment-wrapper:empty + #placardly-context-wrapper {
    margin-left: var(--extra-padding);
}

.placardly-primary-layout-widget.placardly-widget-layout-chat:not(.placardly-container-border-radius-full) #placardly-context-wrapper {
    position: relative;
    margin-left: var(--container-horizontal-gap);
}

.placardly-primary-layout-widget.placardly-widget-layout-chat:not(.placardly-container-border-radius-full):not(.placardly-placement-outside.placardly-container-background-off) #placardly-context-wrapper::before {
    content: "";
    position: absolute;
    left: calc(var(--chatbubble-tail-width) * -0.9);
    height: calc(var(--chatbubble-tail-width) * 2);
    width: var(--chatbubble-tail-width);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    background-image: var(--container-background-image);
    background-size: 2000%;
    background-position: left;
}

.placardly-primary-layout-widget.placardly-widget-layout-chat:not(.placardly-container-border-radius-full):not(.placardly-placement-outside.placardly-container-background-off) #placardly-context-wrapper::before {
    top: 50%;
    transform: translateY(-50%);
}

.placardly-attachment-on.placardly-primary-layout-widget.placardly-widget-layout-chat:not(.placardly-container-border-radius-full):not(.placardly-placement-outside.placardly-container-background-off) #placardly-context-wrapper::before {
    top: var(--chatbubble-tail-offset);
}


/*
 * TEXT
 */

.placardly-title-off.placardly-message-off #placardly-text-wrapper {
    display: none;
}

#placardly-text-wrapper {
    display: grid;
    grid-auto-flow: row;
    row-gap: var(--container-vertical-gap);
    column-gap: var(--container-horizontal-gap);
    align-items: center;
}

/*
 * TITLE & MESSAGE
 */

#placardly-title-element, #placardly-message-element {
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    pointer-events: auto;
    cursor: pointer;
}

/*
 * TITLE
 */

.placardly-title-off #placardly-title-element {
    display: none;
}

#placardly-title-element {
    font-size: var(--title-font-size-final);
    font-weight: bold;
}

/*
 * MESSAGE
 */

.placardly-message-off #placardly-message-element {
    display: none;
}

#placardly-message-element {
    font-size: var(--message-font-size-final);
}


/*
 * ACTION
 */

.placardly-action-off #placardly-action-wrapper {
    display: none;
}

#placardly-action-wrapper {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.placardly-primary-layout-widget.placardly-widget-layout-layer #placardly-action-wrapper{
    justify-items: start;
}

/*
 * BUTTON
 */

#placardly-button-element {
    display: inline-block;
    font-family: inherit;
    font-size: var(--button-font-size-final);
    line-height: inherit;
    text-align: center;
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    border-radius: var(--button-border-radius);
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
}

.placardly-primary-layout-tile #placardly-button-element {
    width: 100%;
}

#placardly-body:not(.placardly-button-background-on.placardly-button-border-off) #placardly-button-element {
    color: inherit;
}

.placardly-button-background-on.placardly-button-border-off #placardly-button-element {
    color: var(--button-text-color);
    background-image: var(--button-background-image);
}

/* .placardly-button-background-off.placardly-button-border-off #placardly-button-element {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
} */

.placardly-button-border-on #placardly-button-element {
    position: relative;
    border: var(--button-border-width) solid transparent;
    z-index: 1;
}

.placardly-button-border-on #placardly-button-element::before {
    content:"";
    position: absolute;
    inset: calc(var(--button-border-width) * -1);
    border-radius: var(--button-border-radius);
    padding: var(--button-border-width);
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-clip: content-box, padding-box;
    -webkit-mask-composite: destination-out;
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-clip: content-box, padding-box;
    mask-composite: exclude;
    z-index: -1;
}

.placardly-button-background-on.placardly-button-border-on #placardly-button-element::before {
    background-image: var(--button-background-image);
}

.placardly-button-background-off.placardly-button-border-on #placardly-button-element::before {
    background-image: linear-gradient(var(--container-text-color), var(--container-text-color));
}


@media only screen and (max-width: 768px) {

    #placardly-inner {
        --widget-head-width-final: calc(var(--widget-head-width) * 0.85);
        --chathead-side-length: calc((var(--widget-head-width-final) + var(--container-vertical-padding) * 2) * 0.85);
        
        --title-font-size-final: calc(var(--title-font-size, var(--container-font-size)) * 0.85);
        --message-font-size-final: calc(var(--message-font-size, var(--container-font-size)) * 0.85);
        --button-font-size-final: calc(var(--button-font-size, var(--container-font-size)) * 0.85);
    }
}

/*
 * UTILITY CLASS
 */

.placardly-hidden {
    display: none !important;
}

/*
 * COMPATIBILITY WITH THEMES AND PLUGINS
 */
.placardly-topbar .navbar.navbar-scroll-point, .placardly-topbar .navbar.navbar-fixed-top, /* Hestia (push down sticky top header position) */
.placardly-topbar #sticky-navigation, /* GeneratePress (push down sticky top header position) */
.placardly-topbar #header-grid.has-sticky-rows--desktop, .placardly-topbar #header-grid.has-sticky-rows--mobile, /* Neve (push down sticky top header position) */
.placardly-topbar .is-sticky #site-header, /* OceanWP (push down sticky top header position) */
.placardly-topbar [data-sticky*='yes'], .placardly-topbar [data-sticky*='fixed'], /* Blocksy (push down sticky top header position) */
.placardly-topbar #ast-fixed-header, /* Astra (push down sticky top header position) */
.placardly-topbar.fl-fixed-header .fl-page-header, /* Beaver (theme) (push down sticky top header position) */
.placardly-topbar .elementor-location-header .elementor-sticky.elementor-sticky--active, /* Elementor (push down sticky top header position) */
.placardly-topbar .bricks-sticky-header .bricks-header-wrapper, /* Bricks (push down sticky top header position) */
.placardly-topbar .oxy-header.oxy-sticky-header.oxy-sticky-header-active, /* Oxygen (push down sticky top header position) */
.placardly-topbar.et_fixed_nav #main-header, /* Divi (push down top header position) */
.placardly-topbar .et-fixed-header, /* Divi (push down sticky top header position) (may not be necessary) */
.placardly-topbar .bricks-header-position-left .bricks-header-wrapper, /* Bricks (shrink sticky left header height) */
.placardly-topbar .bricks-header-position-right .bricks-header-wrapper { /* Bricks (shrink sticky right header height) */
    top: var(--placardly-topbar-height) !important;
}

.placardly-leftbar .bricks-header-position-left .bricks-header-wrapper, /* Bricks (push sticky left header to right direction) */
.placardly-leftbar .navbar.navbar-scroll-point, .placardly-leftbar .navbar.navbar-fixed-top, /* Hestia (shrink sticky header width) */
.placardly-leftbar #sticky-navigation, /* GeneratePress (shrink sticky top header width) */
.placardly-leftbar [data-sticky*='yes'], .placardly-leftbar [data-sticky*='fixed'], /* Blocksy (shrink sticky top header width) */
.placardly-leftbar #ast-fixed-header, /* Astra (shrink sticky top header width) */
.placardly-leftbar .oxy-header.oxy-sticky-header.oxy-sticky-header-active { /* Oxygen (shrink sticky top header width) */
    left: var(--placardly-leftbar-width) !important;
}
.placardly-leftbar #sticky-navigation, /* GeneratePress (shrink sticky header width) */
.placardly-leftbar #header-grid.has-sticky-rows--desktop, .placardly-topbar #header-grid.has-sticky-rows--mobile, /* Neve (shrink sticky header width) */
.placardly-leftbar #ast-fixed-header, /* Astra (theme) (shrink sticky header width) */
.placardly-leftbar.fl-fixed-header .fl-page-header, /* Beaver (theme) (shrink sticky header width) */
.placardly-leftbar.et_fixed_nav #main-header, /* Divi (shrink sticky header width) */
.placardly-leftbar .et-fixed-header, /* Divi (shrink sticky top header width) (may not be necessary) */
.placardly-leftbar .bricks-sticky-header .bricks-header-wrapper { /* Bricks (shrink sticky top header width) */
    max-width: calc(100% - var(--placardly-leftbar-width)) !important;
}

.placardly-rightbar .bricks-header-position-right .bricks-header-wrapper, /* Bricks (push sticky right header to left direction) */
.placardly-rightbar .navbar.navbar-scroll-point, .placardly-rightbar .navbar.navbar-fixed-top, /* Hestia (shrink sticky header width) */
.placardly-rightbar #sticky-navigation, /* GeneratePress (shrink sticky header width) */
.placardly-rightbar [data-sticky*='yes'], .placardly-rightbar [data-sticky*='fixed'], /* Blocksy (shrink sticky top header width) */
.placardly-rightbar #ast-fixed-header, /* Astra (shrink sticky top header width) */
.placardly-rightbar .oxy-header.oxy-sticky-header.oxy-sticky-header-active { /* Oxygen (shrink sticky top header width) */
    right: var(--placardly-rightbar-width) !important;
}
.placardly-rightbar #sticky-navigation, /* GeneratePress (shrink sticky header width) */
.placardly-rightbar #header-grid.has-sticky-rows--desktop, .placardly-topbar #header-grid.has-sticky-rows--mobile, /* Neve (shrink sticky header width) */
.placardly-rightbar #ast-fixed-header, /* Astra (theme) (shrink sticky header width) */
.placardly-rightbar.fl-fixed-header .fl-page-header, /* Beaver (theme) (shrink sticky header width) */
.placardly-rightbar.et_fixed_nav #main-header, /* Divi (shrink sticky header width) */
.placardly-rightbar .et-fixed-header, /* Divi (shrink sticky top header width) (may not be necessary) */
.placardly-rightbar .bricks-sticky-header .bricks-header-wrapper { /* Bricks (shrink sticky top header width) */
    max-width: calc(100% - var(--placardly-rightbar-width)) !important;
}


.placardly-topbar .navbar.navbar-scroll-point, .placardly-topbar .navbar.navbar-fixed-top, /* Hestia (push down sticky top header position) */
.placardly-topbar #sticky-navigation { /* GeneratePress (push down sticky top header position) */
    margin-top: 0px !important;
}
.placardly-leftbar.fl-fixed-header .fl-page-header, /* Beaver (theme) (shrink sticky header width) */
.placardly-rightbar.fl-fixed-header .fl-page-header { /* Beaver (theme) (shrink sticky header width) */
    min-width: unset;
    width: 100%;
}