/* ===== Shiksite Custom PopUp ===== */

.scp-no-scroll { overflow: hidden; }

/* the widget element itself takes no space — only the overlay matters */
.scp-widget { display: contents; }

/* ---------- Overlay (always present; fades in/out) ---------- */
.scp-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	background: rgba(80, 90, 100, 0.85);
	box-sizing: border-box;

	/* hidden state */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	/* gentle fade — duration is controllable via --scp-fade (Style tab) */
	transition:
		opacity var(--scp-fade, 0.35s) ease,
		visibility 0s linear var(--scp-fade, 0.35s);
}
.scp-overlay.scp-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--scp-fade, 0.35s) ease,
		visibility 0s linear 0s;
}

/* text direction follows the site language */
body.rtl       .scp-overlay { direction: rtl; }
body:not(.rtl) .scp-overlay { direction: ltr; }

/* ---------- Modal (subtle rise while fading) ---------- */
.scp-modal {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
	transform: translateY(10px);
	transition: transform var(--scp-fade, 0.35s) ease;
}
.scp-overlay.scp-open .scp-modal { transform: translateY(0); }

/* inner scroller — keeps the (overflowing) close button visible */
.scp-modal-body {
	max-height: 90vh;
	overflow-y: auto;
	padding: 40px;
	border-radius: 8px;
	box-sizing: border-box;
}

.scp-content { width: 100%; }

/* ---------- Close button (fixed top-left in both languages) ---------- */
.scp-close {
	position: absolute;
	top: -16px;
	left: -16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #1f6fb2;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	z-index: 2;
}
.scp-close > span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #fff;
}
.scp-close > span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.scp-close > span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Mobile ---------- */
@media ( max-width: 768px ) {
	.scp-overlay { padding: 16px; }
	.scp-modal-body { padding: 24px 18px; }
}

/* respect users who prefer reduced motion */
@media ( prefers-reduced-motion: reduce ) {
	.scp-overlay,
	.scp-modal { transition: none; }
	.scp-modal { transform: none; }
}

/* ===================================================================
 *  EDITOR MODE — show the content inline so the drop zone is editable
 * =================================================================== */
.scp-overlay.scp-edit {
	position: relative;
	inset: auto;
	display: block;
	padding: 0;
	z-index: auto;
	background: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}
.scp-overlay.scp-edit .scp-modal {
	max-width: none;
	box-shadow: none;
	transform: none;
}
.scp-overlay.scp-edit .scp-modal-body {
	max-height: none;
	overflow: visible;
}
.scp-overlay.scp-edit .scp-close { display: none; }

/* give the empty drop zone a comfortable target height in the editor */
.scp-overlay.scp-edit .scp-content { min-height: 120px; }