/* Sticky (fixed) banner, ported from casinotop-5 (swell-child _styles.scss). Markup: inc/fixed-banner.php */
.oct_fixed_banner {
	position: fixed;
	bottom: 0;
	left: 0;
	/* Same layer as SWELL's .p-fixBtnWrap: below the SP bottom menu (100), SP drawer (101) and modals */
	z-index: 99;
	text-align: center;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
}

.oct_fixed_banner a {
	display: block;
	padding: 0 30px;
}

.oct_fixed_banner picture {
	display: block;
}

.oct_fixed_banner img {
	display: block;
	height: 90px;
	width: auto;
	margin: 0 auto;
	object-fit: contain;
}

.oct_fixed_banner .oct_close_icon {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 28px;
	color: #fff;
	cursor: pointer;
}

.oct_fixed_banner .oct_close_icon:hover {
	opacity: 0.8;
}

/* Keep the page end and SWELL's fixed buttons (page top / TOC) above the banner (90px image + 10px gap) */
body:has(.oct_fixed_banner) #body_wrap {
	margin-bottom: 90px;
}

body:has(.oct_fixed_banner) .p-fixBtnWrap {
	bottom: 100px;
}

/*
 * SP: SWELL's fixed bottom menu (#fix_bottom_menu, 50px + safe area) is hidden below the screen
 * until the page is scrolled ([data-scrolled=true] #fix_bottom_menu { bottom: 0 }, transition: bottom .4s).
 * The banner rests at the very bottom and moves up together with the menu, with the same transition.
 */
@media not all and (min-width: 960px) {
	body:has(#fix_bottom_menu) .oct_fixed_banner {
		transition: bottom .4s;
	}

	[data-scrolled=true] body:has(#fix_bottom_menu) .oct_fixed_banner {
		bottom: calc(50px + env(safe-area-inset-bottom) * .5);
	}

	/* SWELL: #fix_bottom_menu + .p-fixBtnWrap { bottom: 64px } -> + banner height */
	body:has(.oct_fixed_banner) #fix_bottom_menu + .p-fixBtnWrap {
		bottom: 164px;
	}
}