.gfc-box {
	position: fixed;
	background: var(--gfc-bg, #fff);
	color: var(--gfc-color, #222);
	border-radius: var(--gfc-radius, 8px);
	z-index: var(--gfc-z, 999999);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	padding: 16px 20px;
	display: none;
	font-size: 14px;
	line-height: 1.6;
	box-sizing: border-box;
	direction: rtl;
	text-align: center;
}

.gfc-box.gfc-visible { display: block; }

/* ===== شكل: نافذة منبثقة (دايمًا في المنتصف) ===== */
.gfc-style-popup {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90vw;
	max-height: 90vh;
}
/* السكرول بيبقى على المحتوى جوه بس، مش على الصندوق نفسه،
   عشان زر الإغلاق (اللي طالع برّه حافة الصندوق) ميتقصّش. */
.gfc-style-popup .gfc-content {
	max-height: calc(90vh - 40px);
	overflow: auto;
}

/* ===== شكل: شريط كامل العرض ===== */
.gfc-style-bar.gfc-pos-top {
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	border-radius: 0;
	text-align: center;
}
.gfc-style-bar.gfc-pos-bottom {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	border-radius: 0;
	text-align: center;
}

/* ===== شكل: صندوق عائم - 6 مواضع ===== */
.gfc-style-box.gfc-pos-top_left {
	top: 20px;
	left: 20px;
}
.gfc-style-box.gfc-pos-top_right {
	top: 20px;
	right: 20px;
}
.gfc-style-box.gfc-pos-bottom_left {
	bottom: 20px;
	left: 20px;
}
.gfc-style-box.gfc-pos-bottom_right {
	bottom: 20px;
	right: 20px;
}
.gfc-style-box.gfc-pos-top_center {
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}
.gfc-style-box.gfc-pos-bottom_center {
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.gfc-close-btn {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 30px;
	height: 30px;
	display: block;
	line-height: 0;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}
.gfc-close-btn img {
	display: block;
	width: 30px;
	height: 30px;
}

.gfc-style-bar .gfc-close-btn,
.gfc-style-popup .gfc-close-btn {
	top: -15px;
	right: -15px;
}

.gfc-content {
	overflow-wrap: break-word;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
/* أي عنصر جوه المحتوى (إعلان، صورة، iframe...) بيتوسط تلقائيًا حتى لو عرضه أصغر من عرض الصندوق.
   الـ !important هنا مقصودة عشان تكسر أي "style" داخلي محتمل يحطه سكريبت الإعلان نفسه (زي width بدون margin). */
.gfc-content > * {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===== حركات الظهور ===== */
.gfc-animate.gfc-style-box,
.gfc-animate.gfc-style-popup {
	animation: gfc-fade-up 0.35s ease-out;
}
.gfc-animate.gfc-style-bar.gfc-pos-top {
	animation: gfc-slide-down 0.35s ease-out;
}
.gfc-animate.gfc-style-bar.gfc-pos-bottom {
	animation: gfc-slide-up 0.35s ease-out;
}

@keyframes gfc-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* حفاظ على المنتصف الأفقي في المواضع الوسطى بعد الأنيميشن */
.gfc-animate.gfc-style-popup { animation-name: gfc-fade-up-center; }
@keyframes gfc-fade-up-center {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}
.gfc-animate.gfc-pos-top_center,
.gfc-animate.gfc-pos-bottom_center {
	animation-name: gfc-fade-up-hcenter;
}
@keyframes gfc-fade-up-hcenter {
	from { opacity: 0; transform: translate(-50%, 20px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes gfc-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@keyframes gfc-slide-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

/* طبقة خلفية عند فتح أي بوب أب */
body.gfc-popup-open::after {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999998;
}

@media (max-width: 600px) {
	.gfc-box { max-width: 92vw !important; }
}