/**
 * Style dasar tampilan ads di frontend.
 * Tahap 2: posisi fixed top/bottom + margin, ukuran wajar,
 * tombol close. Efek animasi (fade/slide/tada) ditambahkan
 * terpisah di effects.css pada Tahap 4 - file ini sengaja
 * TIDAK diisi animasi apa pun.
 */

.noticespot-ad {
	position: fixed;
	z-index: 999999;
	/* min() = pilih yang lebih kecil antara "lebar target dari Setting
	   Global" dan "90% lebar layar" - jadi otomatis mengecil di layar
	   sempit tanpa perlu media query terpisah. Fallback 512px kalau
	   CSS variable-nya belum sempat di-set (misal JS gagal load). */
	max-width: min( var( --ns-max-width, 512px ), 90vw );
}

.noticespot-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-style: solid;
	border-width: var( --ns-img-bw, 0px );
	border-color: var( --ns-img-bc, transparent );
	border-radius: var( --ns-img-radius, 4px );
	box-shadow: var( --ns-img-shadow, none );
}

.noticespot-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: none;
	background: var( --ns-close-bg, #222222 );
	color: var( --ns-close-color, #ffffff );
	border-radius: var( --ns-close-radius, 50% );
	font-size: var( --ns-close-size, 13px );
	font-weight: var( --ns-close-weight, 700 );
	font-family: Arial, sans-serif;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}

.noticespot-close-hidden {
	opacity: 0;
	pointer-events: none;
}

.noticespot-close:hover {
	opacity: 0.85;
}

.noticespot-link {
	display: block;
}