/* Ad Manager — frontend styles */

/* ---- Multi-slot layout (Horizontal / Vertical) ---- */
.bx-ads-items { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.bx-ads-items--vertical { flex-direction: column; flex-wrap: nowrap; align-items: center; }
.bx-ads-items--horizontal { flex-direction: row; }
.bx-ads-items > * { flex: 0 1 auto; min-width: 0; }

/* ---- A single ad unit (image + optional "Advertisement" caption) ---- */
.bx-ad-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bx-ad-unit picture,
.bx-ad-unit img,
.bx-ads-items img,
.bx-ads-items picture { max-width: 100%; height: auto; display: block; }
.bx-ad-label {
	display: block; text-align: center; line-height: 1.4;
	font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #9aa0a6;
}

/* ---- Skip-ad / pop-up modal (also inlined critically in the footer) ---- */
.bx-skip-ad {
	display: none; position: fixed; inset: 0; z-index: 99999;
	background: rgba( 8, 10, 15, .78 );
	-webkit-backdrop-filter: blur( 6px ); backdrop-filter: blur( 6px );
	padding: 24px; box-sizing: border-box;
	align-items: center; justify-content: center; overflow: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0; transition: opacity .25s ease;
}
.bx-skip-ad.is-open { display: flex; opacity: 1; }
body.bx-skip-ad-open { overflow: hidden; }

.bx-skip-ad-content {
	position: relative; background: #fff; border-radius: 16px; box-sizing: border-box;
	width: 100%; max-width: 600px; max-height: 92vh; overflow: hidden;
	display: flex; flex-direction: column;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, .45 );
	transform: translateY( 14px ) scale( .98 );
	transition: transform .3s cubic-bezier( .2, .8, .2, 1 ), opacity .3s ease;
}
.bx-skip-ad.is-open .bx-skip-ad-content { transform: none; }
.bx-skip-ad.is-closing { opacity: 0; }
.bx-skip-ad.is-closing .bx-skip-ad-content { transform: translateY( -40px ) scale( .97 ); opacity: 0; }

.bx-skip-ad-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 16px; border-bottom: 1px solid #eef0f2;
}
.bx-skip-ad-header img, .bx-skip-ad-logo img { max-height: 40px; width: auto; display: block; }
.bx-skip-ad-tag {
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9aa0a6;
	border: 1px solid #e3e6e9; border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

.bx-skip-ad-body { padding: 0; overflow: auto; }
.bx-skip-ad-body .bx-ad-unit { width: 100%; }
.bx-skip-ad-body img, .bx-skip-ad-body picture { max-width: 100%; height: auto; display: block; margin: 0 auto; }

.bx-skip-ad-foot {
	display: flex; align-items: center; justify-content: flex-end; gap: 12px;
	padding: 12px 16px; border-top: 1px solid #eef0f2; background: #fafbfc;
}
.bx-skip-ad-skip {
	display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
	background: #e31c28; color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
	padding: 11px 18px; border-radius: 999px;
	transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.bx-skip-ad-skip:hover { background: #c01620; transform: translateX( 2px ); }
.bx-skip-ad-skip[disabled] { background: #c9ccd1; cursor: default; transform: none; }
.bx-skip-ad-skip .bx-skip-ad-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
	background: rgba( 255, 255, 255, .25 ); font-size: 12px;
}
.bx-skip-ad-skip .bx-skip-ad-arrow { font-size: 18px; line-height: 1; }

.bx-skip-ad-close {
	position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
	border: none; border-radius: 50%; background: rgba( 17, 17, 17, .55 ); color: #fff;
	font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; z-index: 3;
	transition: background .15s ease, transform .15s ease;
}
.bx-skip-ad-close:hover { background: rgba( 17, 17, 17, .85 ); transform: scale( 1.06 ); }
.bx-skip-ad-close:focus { outline: 2px solid #fff; outline-offset: 2px; }

@media ( max-width: 600px ) {
	.bx-skip-ad { padding: 12px; }
	.bx-skip-ad-content { max-width: 100%; border-radius: 14px; max-height: 94vh; }
}