/**
 * Urban Essentials Products
 *
 * @package   urban-essentials-products
 * @author    Jerry Simmons <jerry@ferventsolutions.com>
 * @copyright 2023 Jerry Simmons
 * @license   GPL-2.0+
 **/


.fwbgmm_image_on_click {
    cursor: pointer;
}
#fwbgmm_wrapper {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    /* padding: 5vh 5% 5vh; */
    background-color: transparent;
    z-index: -1;
    transition: background-color .05s ease;
}
@media( max-width: 980px ) {
    #fwbgmm_wrapper {
        /* padding: 10vh 5% 5vh; */
    }
}

#fwbgmm_wrapper.fwbgmm_active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.95); /* Consider using a CSS variable with rgba if available */
    z-index: 999999;
    display: flex;
	flex-flow: column;
    align-items:center;
    justify-content: center;
}
#fwbgmm_wrapper img {
    max-width: clamp( 100px, 80%, 2000px );
    max-height: calc(90% - 50px);
	margin-bottom: 10px;
}
.fwbgmm_image_svg {
    background-color: var(--fw-true-white);
    padding: 20px;
}

/* ACTION BAR */
.fwbgmm_action_bar {
    position: absolute;
    bottom: 0px;
    display: flex;
    justify-content: space-around;
	align-items: center;
    width: 100%;
    background-color: var(--fw-red);
	padding: 10px 0px;
}
.fwbgmm_action_bar p {
	cursor: pointer;
    color: var(--fw-true-white);
	padding: 10px 20px !important;
	border: solid 1px var(--fw-true-white);
	margin: 0px 5px;
    font-size: clamp(12px, 1vw, 14px);
    text-transform: uppercase;
    text-align: center;
    transition: all .35s ease;
}
.fwbgmm_action_bar p:hover {
    background-color: var(--fw-black);
}



/* YOUTUBE ON CLICK */

.fwbgmm_youtube_on_click {
    position: relative;
    cursor: pointer;
    background-color: rgba(60, 60, 60, .75);
	border-radius: var(--border-radius-large);
	overflow: hidden;
}
.fwbgmm_youtube_on_click > img {
	width: 100%;
	height: auto;
	object-fit: contain;
	z-index: 2;
}
.fwbgmm_youtube_on_click_hover_wrapper, .fwbgmm_youtube_on_click_hover_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .35);
	z-index: 1;
}
.fwbgmm_youtube_on_click_hover_overlay {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
}
.fwbgmm_youtube_on_click_hover_overlay img {
	width: 75px;
}

.fwbgmm_youtube_on_click_hover_wrapper {
	display: flex;
	flex-flow: column;
	justify-content: end;
	padding: var(--padding);
}
.fwbgmm_youtube_on_click_hover_wrapper * {
	z-index: 2;
}


.fwbgmm_youtube_on_click_hover_wrapper {
    opacity: 0;
    transition: all var(--transition-time) ease;
}
.fwbgmm_youtube_on_click:hover .fwbgmm_youtube_on_click_hover_wrapper {
    opacity: 1;
}
.fwbgmm_youtube_on_click > img {
    margin-bottom: -10px;
    transition: all 1.35s ease;
}
.fwbgmm_youtube_on_click:hover > img {
    transform: scale( var(--hover-scale) );
}



.fwbgmm_html_wrapper {
	width: 100%;
	padding: 40px 40px 150px;
	overflow: scroll;
	background-color: var(--fw-true-white);
}
.fwbgmm_html_wrapper > * {
	margin: auto;
	width: 800px;
	max-width: 100%;
}

.fwbgmm_html_wrapper + .fwbgmm_action_bar {
	background-color: var(--fw-blue);
}