/* Raja Popup Pro - Frontend Styles */

/* ── Wrap ── */
.raja-popup-wrap {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
}

.raja-popup-wrap.is-visible {
	pointer-events: auto;
}

/* ── Overlay ── */
.raja-popup-overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
}

.raja-popup-wrap.is-visible .raja-popup-overlay {
	opacity: 1;
}

/* ── Container ── */
.raja-popup-container {
	position: absolute;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Positions */
.raja-pos-center        { inset: 0; }
.raja-pos-top-left      { top: 0; left: 0; }
.raja-pos-top-center    { top: 0; left: 0; right: 0; align-items: flex-start; }
.raja-pos-top-right     { top: 0; right: 0; }
.raja-pos-center-left   { top: 0; bottom: 0; left: 0; }
.raja-pos-center-right  { top: 0; bottom: 0; right: 0; }
.raja-pos-bottom-left   { bottom: 0; left: 0; }
.raja-pos-bottom-center { bottom: 0; left: 0; right: 0; align-items: flex-end; }
.raja-pos-bottom-right  { bottom: 0; right: 0; }

/* ── Inner ── */
.raja-popup-inner {
	position: relative;
	width: 100%;
	max-width: 90vw;
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
}

.raja-popup-inner.has-shadow {
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 8px 20px rgba(0, 0, 0, .4);
}

.raja-popup-wrap.is-visible .raja-popup-inner {
	opacity: 1;
	transform: none !important;
}

/* ── Image ── */
.raja-popup-image-wrap {
	position: relative;
	line-height: 0;
}

.raja-popup-img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.raja-popup-image-wrap a {
	display: block;
	line-height: 0;
}

/* ── Close Button ── */
.raja-close-btn {
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, .75);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: background .2s, transform .2s;
}

.raja-close-btn:hover {
	background: #e60000;
	transform: scale(1.1);
}

.raja-close-inside {
	top: 8px;
	right: 8px;
}

.raja-close-outside {
	bottom: calc(100% + 8px);
	right: 0;
}

/* ── Animations - Initial States ── */

/* fadeScale */
[data-animation="fadeScale"] .raja-popup-inner {
	transform: scale(.8);
}

/* slideDown */
[data-animation="slideDown"] .raja-popup-inner {
	transform: translateY(-60px);
}

/* slideUp */
[data-animation="slideUp"] .raja-popup-inner {
	transform: translateY(60px);
}

/* slideLeft */
[data-animation="slideLeft"] .raja-popup-inner {
	transform: translateX(80px);
}

/* slideRight */
[data-animation="slideRight"] .raja-popup-inner {
	transform: translateX(-80px);
}

/* bounceIn - handled by keyframe */
[data-animation="bounceIn"] .raja-popup-inner {
	transform: scale(.3);
}
.raja-popup-wrap.is-visible[data-animation="bounceIn"] .raja-popup-inner {
	animation: rajaBounceIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
	opacity: 1;
}

@keyframes rajaBounceIn {
	0%   { transform: scale(.3); opacity: 0; }
	60%  { transform: scale(1.08); opacity: 1; }
	80%  { transform: scale(.96); }
	100% { transform: scale(1); }
}

/* flipIn */
[data-animation="flipIn"] .raja-popup-inner {
	transform: perspective(600px) rotateX(-45deg);
}

/* rotateIn */
[data-animation="rotateIn"] .raja-popup-inner {
	transform: rotate(-10deg) scale(.8);
}

/* fade */
[data-animation="fade"] .raja-popup-inner {
	transform: none;
}

/* ── Mobile ── */
@media (max-width: 600px) {
	.raja-popup-container {
		padding: 12px;
	}
}