/* ============================================================
 * כריכה מקורית — פופאפים ובאנרים (frontend)
 * ============================================================ */

#kpop-root { position: relative; z-index: 999999; }

/* ---------- overlay משותף לפופאפים ---------- */
.kpop-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.kpop-overlay.is-open { opacity: 1; pointer-events: auto; }

/* modal — מרכזי עם רקע כהה */
.kpop-type-modal {
	background: rgba(0, 0, 0, 0.65);
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.kpop-type-modal .kpop-box {
	max-width: 600px;
	width: 100%;
	transform: scale(0.92);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.kpop-type-modal.is-open .kpop-box { transform: scale(1); }

/* slide-in — פינה תחתונה */
.kpop-type-slidein {
	align-items: flex-end;
	justify-content: flex-start;
	padding: 20px;
	background: transparent;
}
.kpop-type-slidein .kpop-box {
	max-width: 360px;
	transform: translateY(40px);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.kpop-type-slidein.is-open .kpop-box { transform: translateY(0); }

/* bottom — פס תחתון על כל הרוחב */
.kpop-type-bottom {
	align-items: flex-end;
	justify-content: center;
	background: transparent;
}
.kpop-type-bottom .kpop-box {
	max-width: 100%;
	width: 100%;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.25);
}
.kpop-type-bottom.is-open .kpop-box { transform: translateY(0); }

/* ---------- תיבת התוכן ---------- */
.kpop-box {
	position: relative;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}
.kpop-type-bottom .kpop-box { border-radius: 0; }

.kpop-content { display: block; line-height: 0; }
.kpop-content .kpop-img,
.kpop-content img { width: 100%; height: auto; display: block; }
.kpop-content .kpop-link { display: block; }

/* ---------- כפתור סגירה ---------- */
.kpop-close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.kpop-close:hover { background: rgba(0, 0, 0, 0.8); }
.kpop-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- באנרים דביקים ---------- */
.kpop-bar {
	position: fixed;
	inset-inline: 0;
	z-index: 999998;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.kpop-type-bar_top { top: 0; transform: translateY(-100%); }
.kpop-type-bar_bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15); }
.kpop-bar.is-open { transform: translateY(0); }
.kpop-bar .kpop-content { width: 100%; line-height: 0; }
.kpop-bar .kpop-content img { width: 100%; height: auto; object-fit: cover; max-height: 120px; }
.kpop-bar .kpop-close {
	position: relative;
	top: auto;
	inset-inline-end: auto;
	margin: 0 10px;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.35);
}

/* ---------- באנר inline (שורטקוד) ---------- */
.kpop-inline-banner { width: 100%; line-height: 0; }
.kpop-inline-banner img { width: 100%; height: auto; display: block; border-radius: 6px; }
.kpop-inline-banner a { display: block; }

/* ---------- רספונסיבי ---------- */
@media (max-width: 640px) {
	.kpop-type-modal .kpop-box { max-width: 92vw; }
	.kpop-type-slidein { padding: 10px; }
	.kpop-type-slidein .kpop-box { max-width: 88vw; }
	.kpop-bar .kpop-content img { max-height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	.kpop-overlay, .kpop-box, .kpop-bar { transition: opacity 0.2s ease; }
	.kpop-box { transform: none !important; }
}

/* picture responsive (mobile/desktop) */
.kpop-content .kpop-picture{display:block;line-height:0;}
.kpop-content .kpop-picture img{width:100%;height:auto;display:block;}