/* =========================================================
   مكتبة أشكال التصنيفات — Category Shapes Library
   akhbar-news-pro v4.9.0
   ---------------------------------------------------------
   كل شكل تصميم مستقل يُطبَّق عبر الصنف cat-shape-{key}
   الذي تطبعه akhbar_news_first_category(). الأشكال تعمل في
   سياقين: داخل صندوق الصورة (بطاقات/وحدات) وفي السياق النصي
   (شرائح السلايدر، رأس الخبر، البطل). اللون يأتي من
   --badge-c/--badge-c2 المعرَّفين داخل كل شارة (لون التصنيف
   المخصص) أو من لون التمييز العام للموقع.
   ========================================================= */

/* ---------- المتغيرات الأساسية (بلا تأثير بصري) ---------- */
.cat-badge {
	--badge-c: var(--akhbar-accent, #c9a227);
	--badge-c2: rgba(8, 20, 40, 0.85);
	--badge-ink: #081c33;
}

/* تمرير لطيف موحّد لكل الأشكال (الروابط فقط) */
a.cat-badge:hover {
	filter: brightness(0.93);
}

/* الشكل الافتراضي مع لون تصنيف مخصص: نفس الحبّة بلون التصنيف */
.cat-badge.cat-badge--colored {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
}

/* =========================================================
   1) الشريط المستطيل الكلاسيكي — ribbon-classic
   ========================================================= */
.cat-badge.cat-shape-ribbon-classic {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 0;
	padding: 3px 14px;
	font-weight: 900;
}

:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-classic {
	top: 0;
	inset-inline-start: 0;
	z-index: 2;
	padding: 4px 16px;
}

/* طيّة داكنة تحت طرف الشريط (سياق الصورة فقط) */
:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-classic::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline-end: 0;
	border-block-start: 5px solid rgba(0, 0, 0, 0.42);
	border-inline-start: 5px solid transparent;
}

/* =========================================================
   2) الشارة البيضاوية — oval
   ========================================================= */
.cat-badge.cat-shape-oval {
	background: #ffffff;
	color: var(--badge-c, var(--akhbar-accent, #c9a227));
	border: 2px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	box-shadow: inset 0 0 0 2px #ffffff, 0 1px 8px rgba(0, 0, 0, 0.22);
	border-radius: 50%;
	padding: 6px 19px;
	font-weight: 900;
}

/* =========================================================
   3) الشريط الركني — ribbon-corner
   ========================================================= */
.cat-badge.cat-shape-ribbon-corner {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 0;
	padding: 4px 10px;
	transform: skewX(-12deg);
}

[dir="rtl"] .cat-badge.cat-shape-ribbon-corner {
	transform: skewX(12deg);
}

:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-corner {
	top: 17px;
	inset-inline-start: -40px;
	width: 170px;
	padding: 4px 0;
	text-align: center;
	transform: rotate(-45deg);
	z-index: 3;
}

[dir="rtl"] :is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-corner {
	transform: rotate(45deg);
}

/* =========================================================
   4) الشريط القطري المائل — ribbon-diagonal
   ========================================================= */
.cat-badge.cat-shape-ribbon-diagonal {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 2px;
	padding: 3px 16px;
	transform: skewX(-14deg);
	box-shadow: -7px 7px 0 0 var(--badge-c2, rgba(8, 20, 40, 0.32));
}

[dir="rtl"] .cat-badge.cat-shape-ribbon-diagonal {
	transform: skewX(14deg);
	box-shadow: 7px 7px 0 0 var(--badge-c2, rgba(8, 20, 40, 0.32));
}

:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-diagonal {
	top: 16px;
	inset-inline-start: -8px;
	z-index: 2;
}

/* =========================================================
   5) الشارة الشفافة فوق الصورة — translucent
   ========================================================= */
.cat-badge.cat-shape-translucent {
	background: rgba(10, 16, 28, 0.48);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 6px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   6) الشارة ذات التدرج اللوني — gradient
   ========================================================= */
.cat-badge.cat-shape-gradient {
	background-color: var(--badge-c, var(--akhbar-accent, #c9a227));
	background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.06) 44%, rgba(0, 0, 0, 0.28) 100%);
	color: var(--badge-ink, #081c33);
	border-radius: 8px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   7) الشارة ذات الإطار الخارجي — outline
   ========================================================= */
.cat-badge.cat-shape-outline {
	background: rgba(8, 16, 30, 0.32);
	color: #ffffff;
	border: 2px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	border-radius: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   8) التصنيف العمودي على جانب الصورة — vertical
   ========================================================= */
.cat-badge.cat-shape-vertical {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 3px;
	padding: 3px 12px;
}

:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-vertical {
	top: 50%;
	inset-inline-start: 0;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	padding: 14px 8px;
	border-radius: 0 4px 4px 0;
	z-index: 2;
}

[dir="rtl"] :is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-vertical {
	border-radius: 4px 0 0 4px;
}

/* =========================================================
   9) التصنيف المصحوب بأيقونة — icon
   ========================================================= */
.cat-badge.cat-shape-icon {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 12px;
	border-radius: 7px;
}

.cat-badge.cat-shape-icon::before {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   10) التصنيف الصحفي بخط زخرفي — press
   ========================================================= */
.cat-badge.cat-shape-press {
	background: #ffffff;
	color: #101820;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 1px 14px;
	border-block-start: 2px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	border-block-end: 2px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	border-radius: 2px;
}

.cat-badge.cat-shape-press::before {
	content: "◆";
	color: var(--badge-c, var(--akhbar-accent, #c9a227));
	font-size: 8px;
	margin-inline-end: 7px;
	vertical-align: 2px;
	letter-spacing: 0;
}

/* =========================================================
   11) الشارة ثنائية اللون — duotone
   ========================================================= */
.cat-badge.cat-shape-duotone {
	background-image: linear-gradient(to right, var(--badge-c, var(--akhbar-accent, #c9a227)) 0 55%, var(--badge-c2, rgba(8, 20, 40, 0.85)) 55% 100%);
	color: var(--badge-ink, #081c33);
	border-radius: 3px;
	padding: 3px 14px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

[dir="rtl"] .cat-badge.cat-shape-duotone {
	background-image: linear-gradient(to left, var(--badge-c, var(--akhbar-accent, #c9a227)) 0 55%, var(--badge-c2, rgba(8, 20, 40, 0.85)) 55% 100%);
}

/* =========================================================
   12) الشارة الزجاجية — glass
   ========================================================= */
.cat-badge.cat-shape-glass {
	background: rgba(255, 255, 255, 0.16);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	padding: 3px 14px;
	-webkit-backdrop-filter: blur(7px) saturate(1.5);
	backdrop-filter: blur(7px) saturate(1.5);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* في السياق النصي الفاتح تُعمَّق الخلفية لتبقى مقروءة */
.entry-header .cat-badge.cat-shape-glass,
.pick-body .cat-badge.cat-shape-glass {
	background: rgba(14, 42, 71, 0.74);
}

/* =========================================================
   13) الشارة ذات الزاوية المقطوعة — cut-corner
   ========================================================= */
.cat-badge.cat-shape-cut-corner {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 0;
	padding: 4px 16px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}

/* =========================================================
   14) الشارة ذات الطرف السهمي — arrow
   ========================================================= */
.cat-badge.cat-shape-arrow {
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	color: var(--badge-ink, #081c33);
	border-radius: 0;
	padding: 4px 20px 4px 14px;
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

[dir="rtl"] .cat-badge.cat-shape-arrow {
	padding: 4px 14px 4px 20px;
	clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}

/* =========================================================
   15) التصنيف داخل إطار هندسي — geo-frame
   ========================================================= */
.cat-badge.cat-shape-geo-frame {
	background: rgba(8, 16, 30, 0.36);
	color: #ffffff;
	border-radius: 0;
	padding: 4px 14px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.cat-badge.cat-shape-geo-frame::before,
.cat-badge.cat-shape-geo-frame::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	border: 2px solid var(--badge-c, var(--akhbar-accent, #c9a227));
}

.cat-badge.cat-shape-geo-frame::before {
	top: -2px;
	inset-inline-start: -2px;
	border-inline-end: 0;
	border-block-end: 0;
}

.cat-badge.cat-shape-geo-frame::after {
	bottom: -2px;
	inset-inline-end: -2px;
	border-inline-start: 0;
	border-block-start: 0;
}

/* في السياق النصي تحتاج موضعًا نسبيًا لرسم الأقواس */
.entry-header .cat-badge.cat-shape-geo-frame,
.dp-slide-cap .cat-badge.cat-shape-geo-frame,
.hero-content .cat-badge.cat-shape-geo-frame,
.pick-body .cat-badge.cat-shape-geo-frame {
	position: relative;
}

/* =========================================================
   16) الشارة العائمة فوق الصورة — float
   ========================================================= */
.cat-badge.cat-shape-float {
	background: #ffffff;
	color: var(--badge-c, var(--akhbar-accent, #c9a227));
	border-block-start: 3px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	border-radius: 9px;
	padding: 3px 14px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	font-weight: 900;
}

/* =========================================================
   17) التصنيف بخلفية داكنة ونص بارز — dark
   ========================================================= */
.cat-badge.cat-shape-dark {
	background: #0b1220;
	color: #ffffff;
	border-radius: 6px;
	padding: 4px 13px;
	font-weight: 900;
	letter-spacing: 0.3px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.cat-badge.cat-shape-dark::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--badge-c, var(--akhbar-accent, #c9a227));
	margin-inline-end: 7px;
	vertical-align: 1px;
}

/* =========================================================
   18) التصنيف بخط سفلي ملون — underline
   ========================================================= */
.cat-badge.cat-shape-underline {
	background: transparent;
	color: var(--badge-c, var(--akhbar-accent, #c9a227));
	border-radius: 0;
	padding: 1px 2px 3px;
	border-block-end: 3px solid var(--badge-c, var(--akhbar-accent, #c9a227));
	font-weight: 900;
}

:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-underline {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   حاويات بلا تموضع نسبي: تُفعَّل فقط عند وجود شكل يحتاجها
   (:has مدعوم في المتصفحات الحديثة؛ في الأقدم تبقى الشارة
   بلا إزاحة — تدهور رشيق دون أي كسر).
   ========================================================= */
.cu-media:has(> .cat-badge.cat-shape-ribbon-classic),
.cu-media:has(> .cat-badge.cat-shape-ribbon-corner),
.cu-media:has(> .cat-badge.cat-shape-ribbon-diagonal),
.cu-media:has(> .cat-badge.cat-shape-vertical),
.pick-media:has(> .cat-badge.cat-shape-ribbon-classic),
.pick-media:has(> .cat-badge.cat-shape-ribbon-corner),
.pick-media:has(> .cat-badge.cat-shape-ribbon-diagonal),
.pick-media:has(> .cat-badge.cat-shape-vertical) {
	position: relative;
	overflow: hidden;
}

/* =========================================================
   الجوال: تقليص الأشرطة الركنية والقطريّة وحشو العمودي
   ========================================================= */
@media (max-width: 640px) {
	:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-corner {
		top: 12px;
		inset-inline-start: -34px;
		width: 138px;
		font-size: 10.5px;
	}

	:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-diagonal {
		top: 12px;
		padding: 2px 12px;
		box-shadow: -5px 5px 0 0 var(--badge-c2, rgba(8, 20, 40, 0.32));
	}

	[dir="rtl"] :is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-ribbon-diagonal {
		box-shadow: 5px 5px 0 0 var(--badge-c2, rgba(8, 20, 40, 0.32));
	}

	:is(.card-media, .hb-media, .ccd-media, .pick-media, .cu-media, .cspv-media) > .cat-badge.cat-shape-vertical {
		padding: 10px 6px;
	}

	.cat-badge.cat-shape-oval {
		padding: 4px 14px;
	}
}