.bl-fullscreen-bg {
    position: relative;
    z-index: var(--bl-fs-bg-z, 0);
    display: flex;
    width: 100%;
    min-height: var(--bl-fs-bg-height, 100vh);
    background-image: var(--bl-fs-bg-image);
    background-size: var(--bl-fs-bg-size, cover);
    background-position: var(--bl-fs-bg-position, center center);
    background-repeat: no-repeat;
    overflow: hidden;
    isolation: isolate;
}

.bl-fullscreen-bg__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--bl-fs-bg-overlay, transparent);
    pointer-events: none;
}

.bl-fullscreen-bg__content {
    position: relative;
    z-index: 1;
    width: min(100%, var(--bl-fs-bg-content-width, 1200px));
    padding: var(--bl-fs-bg-padding, 40px);
    box-sizing: border-box;
}

.bl-fullscreen-bg--top-left { align-items: flex-start; justify-content: flex-start; }
.bl-fullscreen-bg--top-center { align-items: flex-start; justify-content: center; text-align: center; }
.bl-fullscreen-bg--top-right { align-items: flex-start; justify-content: flex-end; text-align: right; }
.bl-fullscreen-bg--center-left { align-items: center; justify-content: flex-start; }
.bl-fullscreen-bg--center-center { align-items: center; justify-content: center; text-align: center; }
.bl-fullscreen-bg--center-right { align-items: center; justify-content: flex-end; text-align: right; }
.bl-fullscreen-bg--bottom-left { align-items: flex-end; justify-content: flex-start; }
.bl-fullscreen-bg--bottom-center { align-items: flex-end; justify-content: center; text-align: center; }
.bl-fullscreen-bg--bottom-right { align-items: flex-end; justify-content: flex-end; text-align: right; }


.bl-fullscreen-bg--position-relative {
    position: relative;
}

.bl-fullscreen-bg--position-absolute {
    position: absolute;
    inset: 0 auto auto 0;
}

.bl-fullscreen-bg--position-fixed {
    position: fixed;
    inset: 0;
    width: 100vw;
}

@media (max-width: 1024px) {
    .bl-fullscreen-bg {
        z-index: var(--bl-fs-bg-z-tablet, var(--bl-fs-bg-z, 0));
    }
}

@media (max-width: 640px) {
    .bl-fullscreen-bg {
        z-index: var(--bl-fs-bg-z-mobile, var(--bl-fs-bg-z-tablet, var(--bl-fs-bg-z, 0)));
    }
}

@supports (min-height: 100svh) {
    .bl-fullscreen-bg[style*="--bl-fs-bg-height:100vh"] {
        min-height: 100svh;
    }
}

/* Background Layer mode --------------------------------------------------
 * Turns the Avada column wrapper into a local stacking context. The
 * fullscreen image sits at layer 0 and sibling Avada elements sit above it.
 */
.bl-fullscreen-bg-host {
    position: relative !important;
    isolation: isolate;
}

.bl-fullscreen-bg--position-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: var(--bl-fs-bg-height, 100vh);
    z-index: 0 !important;
    pointer-events: none;
}

.bl-fullscreen-bg-host > .bl-fullscreen-bg-foreground {
    position: relative;
    z-index: 1;
}

/* Keep links, buttons and controls in foreground Avada elements interactive. */
.bl-fullscreen-bg-host > .bl-fullscreen-bg-foreground,
.bl-fullscreen-bg-host > .bl-fullscreen-bg-foreground * {
    pointer-events: auto;
}


/* v1.3.0: Avada may wrap each builder element in an extra direct child.
 * In Background Layer mode that carrier must also leave document flow,
 * otherwise it reserves vertical space before the next element.
 */
.bl-fullscreen-bg-host > .bl-fullscreen-bg-carrier {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.bl-fullscreen-bg-host > .bl-fullscreen-bg-carrier > .bl-fullscreen-bg--position-background,
.bl-fullscreen-bg-host > .bl-fullscreen-bg-carrier .bl-fullscreen-bg--position-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: var(--bl-fs-bg-height, 100vh) !important;
    min-height: var(--bl-fs-bg-height, 100vh) !important;
    margin: 0 !important;
}

/* v1.4.0: Parent Container scope -----------------------------------------
 * Allows the fullscreen element to live in a separate Avada 1/1 column.
 * JS moves the rendered background layer to the nearest Avada Container,
 * so it no longer participates in column layout and can sit behind all
 * sibling columns in that Container.
 */
.bl-fullscreen-bg-container-host {
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
}

.bl-fullscreen-bg-container-host > .bl-fullscreen-bg-container-layer {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--bl-fs-bg-height, 100vh) !important;
    min-height: var(--bl-fs-bg-height, 100vh) !important;
    margin: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.bl-fullscreen-bg-container-host > .bl-fullscreen-bg-foreground {
    position: relative;
    z-index: 1;
}

/* The source 1/1 column only existed to hold the background element.
 * Once the rendered background has been moved to the Container it must not
 * reserve height, margin, padding or gap in the layout.
 */
.bl-fullscreen-bg-source-column,
.bl-fullscreen-bg-source-wrapper {
    min-height: 0 !important;
    height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}

.bl-fullscreen-bg-source-column {
    margin-bottom: 0 !important;
}

/* v1.5.0: a Background Layer is purely visual.
 * It must never set the height of the Avada column/container. Its own
 * --bl-fs-bg-height (100vh by default) controls only the painted layer.
 */
.bl-fullscreen-bg-container-host,
.bl-fullscreen-bg-host {
    min-height: 0 !important;
}

.bl-fullscreen-bg-container-host > .bl-fullscreen-bg-container-layer {
    top: 0 !important;
    bottom: auto !important;
    height: var(--bl-fs-bg-height, 100vh) !important;
    min-height: var(--bl-fs-bg-height, 100vh) !important;
}