/*
 * أشكال وشارات التصنيفات + شريط عنوان صفحات التصنيفات — v4.10.0
 * كل شكل يعتمد متغيرات CSS من التخصيص مع قيم افتراضية من القالب.
 * RTL كامل عبر الخصائص المنطقية، وآمن لأسماء التصنيفات الطويلة.
 */

/* =========================================================
 * 0) الأساس المشترك — لا يغيّر الشارة الافتراضية
 * ======================================================= */
.catb {
        --catb-text: var(--akhbar-primary-dark, #081c33);
        --catb-bg: var(--akhbar-accent, #d9a441);
        --catb-border: transparent;
        --catb-p1: var(--akhbar-accent, #d9a441);
        --catb-p2: var(--akhbar-primary, #0e2a47);
        --catb-g1: var(--akhbar-primary, #0e2a47);
        --catb-g2: var(--akhbar-accent, #d9a441);
        --catb-alpha: 1;
        --catb-fs: 11.5px;
        --catb-fw: 800;
        --catb-lh: 1.7;
        --catb-radius: 999px;
        --catb-bw: 0px;
        --catb-py: 3px;
        --catb-px: 10px;
        --catb-m: 0px;
        --catb-trans: 200ms;
        --catb-op: 100%;
        --catb-ico-s: 13px;
        --catb-ico-pos: before;
        position: relative;
        display: inline-block;
        font-size: var(--catb-fs);
        font-weight: var(--catb-fw);
        line-height: var(--catb-lh);
        color: var(--catb-text);
        background: var(--catb-bg);
        opacity: var(--catb-op);
        max-width: 78%;
        overflow-wrap: break-word;
        transition: background-color var(--catb-trans) ease, color var(--catb-trans) ease, transform var(--catb-trans) ease, box-shadow var(--catb-trans) ease, border-color var(--catb-trans) ease, opacity var(--catb-trans) ease;
        text-decoration: none;
        vertical-align: middle;
}
.catb--ico svg.catb-ico {
        width: var(--catb-ico-s);
        height: var(--catb-ico-s);
        fill: none;
        stroke: var(--catb-ico-color, currentColor);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: inline-block;
        vertical-align: -0.15em;
        margin-inline-start: 4px;
}
.catb--ico.catb--ico-before svg.catb-ico { margin-inline-start: 0; margin-inline-end: 4px; }
.catb--ico.catb--ico-after svg.catb-ico { margin-inline-start: 4px; margin-inline-end: 0; }

/* تعطيل كل المؤثرات (اختيار المدير). */
.catb[style*="--catb-fxoff:1"] { transition: none !important; }
.catb[style*="--catb-fxoff:1"]:hover { transform: none !important; filter: none !important; }

/* ظلال. */
.catb[style*="--catb-shadow:sm"] { box-shadow: 0 1px 4px rgba(8, 20, 33, .18); }
.catb[style*="--catb-shadow:md"] { box-shadow: 0 4px 12px rgba(8, 20, 33, .22); }
.catb[style*="--catb-shadow:lg"] { box-shadow: 0 8px 22px rgba(8, 20, 33, .3); }

/* تأثيرات الخلفية الزخرفية. */
.catb[style*="--catb-fxbg:dots"] {
        background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.4px);
        background-size: 6px 6px;
}
.catb[style*="--catb-fxbg:lines"] {
        background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 6px);
}
.catb[style*="--catb-fxbg:grid"] {
        background-image: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
        background-size: 8px 8px;
}

/* Hover الموحد حسب الاختيار. */
a.catb[style*="--catb-hover:darken"]:hover { filter: brightness(.82); }
a.catb[style*="--catb-hover:lift"]:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(8, 20, 33, .25); }
a.catb[style*="--catb-hover:glow"]:hover { box-shadow: 0 0 0 4px rgba(217, 164, 65, .25), 0 4px 12px rgba(8, 20, 33, .2); }
a.catb[style*="--catb-hover:invert"]:hover { background: var(--catb-text); color: var(--catb-bg); }
a.catb[style*="--catb-hover:scale"]:hover { transform: scale(1.06); }

/* محاذاة نصية داخل شارة بعرض محدد. */
.catb--align-start { text-align: start; }
.catb--align-center { text-align: center; }
.catb--align-end { text-align: end; }

/* شارات إضافية عند تفعيل أكثر من تصنيف. */
.cat-badge--extra { margin-inline-start: 6px; }

/* =========================================================
 * 1) المجموعة الكلاسيكية والعصرية
 * ======================================================= */

/* Classic Label — مستطيل حاد. */
.catb--classic {
        border-radius: 2px;
        background: var(--catb-bg);
        color: var(--catb-text);
}

/* Modern Badge — شارة بلمعة علوية. */
.catb--badge {
        border-radius: 6px;
        background: var(--catb-p1);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 6px rgba(8, 20, 33, .18);
}
.catb--badge[style*="--catb-text"] { color: var(--catb-text); }

/* Rounded — حواف دائرية واضحة. */
.catb--rounded { border-radius: 10px; background: var(--catb-bg); color: var(--catb-text); }

/* Outline — إطار خارجي فقط. */
.catb--outline {
        background: transparent;
        border: max(2px, var(--catb-bw, 2px)) solid var(--catb-p1);
        color: var(--catb-p1);
        border-radius: 6px;
}

/* Minimal — نص فقط مع نقطة. */
.catb--minimal {
        background: transparent;
        color: var(--catb-p1);
        font-weight: 900;
        padding-inline-start: 0;
        padding-inline-end: 0;
}
.catb--minimal::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background: var(--catb-p1);
        border-radius: 2px;
        margin-inline-end: 6px;
        vertical-align: 1px;
}

/* Compact — صغيرة مختصرة. */
.catb--compact {
        border-radius: 3px;
        font-size: max(9.5px, calc(var(--catb-fs) - 2px));
        padding: 1px 7px;
        background: var(--catb-p1);
        color: #fff;
        letter-spacing: .3px;
}

/* Bold — عريض بارز. */
.catb--bold {
        border-radius: 4px;
        background: var(--catb-p1);
        color: #fff;
        font-weight: 900;
        font-size: max(12.5px, calc(var(--catb-fs) + 1px));
        padding: 4px 13px;
        box-shadow: 0 3px 0 rgba(8, 20, 33, .22);
}

/* =========================================================
 * 2) المجموعة الصحفية والإخبارية
 * ======================================================= */

/* Magazine — ورقية بخط علوي. */
.catb--magazine {
        border-radius: 0;
        background: #fff;
        color: var(--catb-p1);
        border-top: 3px solid var(--catb-p1);
        border-bottom: 1px solid rgba(8, 20, 33, .14);
        padding: 3px 12px;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(8, 20, 33, .12);
}
.card-media .catb--magazine { background: #fff; }

/* News Ribbon — شريط بطية. */
.catb--ribbon {
        border-radius: 0;
        background: var(--catb-p1);
        color: #fff;
        padding: 4px 14px 4px 14px;
}
.catb--ribbon::after {
        content: "";
        position: absolute;
        inset-inline-end: -7px;
        top: 0;
        bottom: 0;
        width: 8px;
        background: var(--catb-p2, #0e2a47);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Editorial Label — سطران تحريريان. */
.catb--editorial {
        background: transparent;
        color: var(--catb-p1);
        border-top: 1px solid var(--catb-p1);
        border-bottom: 1px solid var(--catb-p1);
        border-radius: 0;
        padding: 2px 10px;
        letter-spacing: .8px;
}

/* Breaking — عاجلة بتدرج ونقطة. */
.catb--breaking {
        border-radius: 3px;
        background: linear-gradient(120deg, var(--catb-g1, #b3261e), var(--catb-g2, #7a1712));
        color: #fff;
        font-weight: 900;
        padding: 4px 12px;
}
.catb--breaking::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        background: #fff;
        border-radius: 50%;
        margin-inline-end: 6px;
        vertical-align: 1px;
}

/* Underline — خط زخرفي سفلي. */
.catb--underline {
        background: transparent;
        color: var(--catb-p1);
        padding-inline-start: 2px;
        padding-inline-end: 2px;
        border-radius: 0;
}
.catb--underline::after {
        content: "";
        display: block;
        height: 3px;
        margin-top: 1px;
        background: linear-gradient(90deg, var(--catb-p1) 0 70%, var(--catb-p2, transparent) 70% 100%);
        border-radius: 2px;
}

/* Side Accent — شريط جانبي. */
.catb--side {
        background: rgba(8, 20, 33, .05);
        border-inline-start: 4px solid var(--catb-p1);
        border-radius: 3px;
        color: var(--catb-p1);
        padding: 3px 12px;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
        .catb--side { background: color-mix(in srgb, var(--catb-p1) 12%, transparent); }
}

/* Double Color — نصفان بلونين. */
.catb--double {
        border-radius: 5px;
        background: linear-gradient(90deg, var(--catb-p1) 0 50%, var(--catb-p2) 50% 100%);
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

/* Premium News — فاخر بإطار مزدوج. */
.catb--premium {
        border-radius: 4px;
        background: var(--catb-p2, #0e2a47);
        color: var(--catb-p1, #d9a441);
        border: 1px solid var(--catb-p1, #d9a441);
        box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 3px 10px rgba(8, 20, 33, .3);
        padding: 3px 12px;
        letter-spacing: .5px;
}

/* =========================================================
 * 3) المجموعة الهندسية والمميزة
 * ======================================================= */

/* Corner Ribbon — ركن الصورة (يُفعَّل فوق الوسائط). */
.catb--corner { border-radius: 0; background: var(--catb-p1); color: #fff; }
.card-media .catb--corner,
.hb-media .catb--corner,
.catb-prev-media .catb--corner {
        top: 16px;
        inset-inline-start: -34px;
        z-index: 2;
        width: 150px;
        max-width: none;
        text-align: center;
        transform: rotate(-45deg);
        border-radius: 0;
        padding: 3px 0;
        box-shadow: 0 2px 6px rgba(8, 20, 33, .3);
}
.catb-prev-media { position: relative; overflow: hidden; }

/* Diagonal Ribbon — قطري مائل (النص يميل مع الشريط كشريط أخبار حقيقي). */
.catb--diagonal {
        border-radius: 2px;
        background: var(--catb-p1);
        color: #fff;
        transform: skewX(-12deg);
        padding: 3px 16px;
}

/* Geometric — هندسي بقصّتين. */
.catb--geometric {
        border-radius: 0;
        background: var(--catb-p1);
        color: #fff;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        padding: 4px 14px;
}

/* Cut Corner — زاوية مقطوعة واحدة. */
.catb--cut {
        border-radius: 0;
        background: var(--catb-p1);
        color: #fff;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
        padding: 4px 16px 4px 12px;
}

/* Arrow — طرف سهمي. */
.catb--arrow {
        border-radius: 0;
        background: var(--catb-p1);
        color: #fff;
        padding-inline-end: 20px;
        margin-inline-end: 8px;
}
.catb--arrow::after {
        content: "";
        position: absolute;
        inset-inline-end: -9px;
        top: 0;
        bottom: 0;
        width: 10px;
        background: var(--catb-p1);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Vertical Label — عمودي. */
.catb--vertical {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        border-radius: 3px;
        background: var(--catb-p1);
        color: #fff;
        padding: 10px 3px;
        max-height: 150px;
        overflow: hidden;
        vertical-align: top;
}

/* Hexagon — سداسي. */
.catb--hexagon {
        background: var(--catb-p1);
        color: #fff;
        clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
        padding: 5px 16px;
        border-radius: 0;
        min-width: 74px;
        text-align: center;
}

/* Floating — عائمة ظل حقيقي. */
.catb--floating {
        background: #fff;
        color: var(--catb-p1);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(8, 20, 33, .28), 0 0 0 1px rgba(8, 20, 33, .06);
        padding: 4px 13px;
        font-weight: 800;
}
.card-media .catb--floating { top: 14px; }

/* =========================================================
 * 4) المجموعة الحديثة والمؤثرات
 * ======================================================= */

/* Gradient — تدرج كامل. */
.catb--gradient {
        border-radius: 6px;
        background: linear-gradient(120deg, var(--catb-g1), var(--catb-g2));
        color: #fff;
        padding: 4px 13px;
}

/* Glass — زجاجي. */
.catb--glass {
        background: rgba(255, 255, 255, .18);
        border: 1px solid rgba(255, 255, 255, .55);
        color: #fff;
        border-radius: 8px;
        padding: 3px 12px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
}

/* Image Overlay — نص مباشر فوق الصورة. */
.catb--overlay {
        background: transparent;
        color: #fff;
        border-radius: 4px;
        font-weight: 900;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(0, 0, 0, .5);
        padding: 2px 6px;
}

/* Dark Premium — داكنة. */
.catb--dark {
        border-radius: 5px;
        background: linear-gradient(160deg, #101c2c, #070d16);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .14);
        padding: 4px 13px;
}

/* Icon Badge — تُدار عبر .catb--ico مع خلفية أساسية. */
.catb--iconb {
        border-radius: 6px;
        background: var(--catb-p1);
        color: #fff;
        padding: 4px 12px;
}

/* Gradient Border — إطار متدرج. */
.catb--gradborder {
        border-radius: 8px;
        color: var(--catb-p1);
        background:
                linear-gradient(#fff, #fff) padding-box,
                linear-gradient(120deg, var(--catb-g1, #d9a441), var(--catb-g2, #0e2a47)) border-box;
        border: 2px solid transparent;
        padding: 2px 12px;
        font-weight: 800;
}
@supports (background: conic-gradient(red, blue)) {
        .catb--gradborder[style*="--catb-text"] {
                background:
                        linear-gradient(var(--catb-text), var(--catb-text)) padding-box,
                        linear-gradient(120deg, var(--catb-g1, #d9a441), var(--catb-g2, #0e2a47)) border-box;
        }
}

/* Transparent — شفافة بخط رفيع. */
.catb--transparent {
        background: transparent;
        border: 1px solid var(--catb-p1);
        color: var(--catb-p1);
        border-radius: 4px;
        padding: 2px 10px;
}

/* Modern Accent — عصري بلمسة جانبية. */
.catb--accent {
        background: #fff;
        color: var(--catb-p1);
        border-inline-start: 4px solid var(--catb-p2, var(--catb-p1));
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(8, 20, 33, .16);
        padding: 3px 12px;
        font-weight: 800;
}
.card-media .catb--accent { background: #fff; }

/* ثبات الأشكال الهندسية فوق الوسائط (تُبقى في موضع الشارة القياسي). */
.card-media .catb--hexagon,
.card-media .catb--vertical { border-radius: 0; }

/* =========================================================
 * 5) شريط عنوان صفحات التصنيفات (Archive Title Bar)
 * ======================================================= */
.catb-bar {
        --catbb-text: inherit;
        --catbb-border: transparent;
        --catbb-ts: clamp(23px, 3vw, 30px);
        --catbb-tw: 800;
        --catbb-ta: start;
        --catbb-tp: start;
        --catbb-r: 0px;
        --catbb-h: auto;
        --catbb-py: 26px;
        --catbb-px: 0px;
        --catbb-gap: 4px;
        --catbb-shadow: none;
        background: var(--catbb-bg, transparent);
        border-bottom: 1px solid var(--catbb-border);
        border-radius: var(--catbb-r);
        color: var(--catbb-text);
}
.catb-bar[style*="--catbb-shadow:sm"] { box-shadow: 0 1px 6px rgba(8, 20, 33, .12); }
.catb-bar[style*="--catbb-shadow:md"] { box-shadow: 0 6px 18px rgba(8, 20, 33, .18); }
.catb-bar[style*="--catbb-shadow:lg"] { box-shadow: 0 12px 30px rgba(8, 20, 33, .26); }

.catb-bar > .container {
        display: flex;
        flex-direction: column;
        gap: var(--catbb-gap);
        padding-block: var(--catbb-py);
        min-height: var(--catbb-h);
        align-items: var(--catbb-tp);
        text-align: var(--catbb-ta);
}
.catb-bar .page-title {
        color: var(--catbb-text);
        font-size: var(--catbb-ts);
        font-weight: var(--catbb-tw);
        margin: 0;
}
.catb-bar .archive-desc { color: var(--catbb-text); opacity: .85; }
.catb-bar .archive-count { color: var(--catbb-text); opacity: .75; }

/* عرض الشاشة الكامل: الشريط يخرج من الحاوية. */
@media (min-width: 1024px) {
        .catb-bar[data-catbb] { }
}

/* أنواع الخلفية الخاصة. */
.catb-bar--t-image {
        position: relative;
        background-size: cover;
        background-position: center;
        overflow: hidden;
}
.catb-bar--t-image::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--catbb-bg, rgba(11, 22, 34, .55));
}
.catb-bar--t-image > .container { position: relative; }

.catb-bar--t-none { background: transparent; border-bottom-color: transparent; }
.catb-bar--t-transparent { background: transparent; }

/* أشكال الشريط. */
.catb-bar--rounded { border-radius: 14px; }
.catb-bar--rounded > .container { padding-inline: var(--catbb-px); }
.catb-bar--t-solid.catb-bar--rounded, .catb-bar--t-gradient.catb-bar--rounded { margin-top: 18px; }

.catb-bar--side { border-inline-start: 6px solid var(--catbb-g1, var(--akhbar-accent, #d9a441)); }

.catb-bar--underline { border-bottom: 3px solid var(--catbb-g1, var(--akhbar-accent, #d9a441)); }
.catb-bar--underline > .container { border-bottom: 1px solid rgba(8, 20, 33, .08); padding-bottom: calc(var(--catbb-py) - 10px); }

.catb-bar--outline { border: 2px solid var(--catbb-border, var(--catbb-g1, var(--akhbar-accent, #d9a441))); border-radius: var(--catbb-r, 12px); margin-top: 18px; }
.catb-bar--outline > .container { padding-inline: var(--catbb-px); }

.catb-bar--cut { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); border-radius: 0; }

.catb-bar--geo { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 32px) 100%, 0 100%); border-radius: 0; }

.catb-bar--ornament .page-title::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        background: var(--catbb-g1, var(--akhbar-accent, #d9a441));
        transform: rotate(45deg);
        margin-inline-end: 12px;
        vertical-align: 2px;
}

/* =========================================================
 * 6) تجاوب: الهاتف
 * ======================================================= */
@media (max-width: 640px) {
        .catb { max-width: 72%; font-size: max(10px, calc(var(--catb-fs) - 0.5px)); }
        .card-media .catb--corner { inset-inline-start: -40px; width: 160px; }
        .catb-bar { border-radius: 0; }
        .catb-bar > .container { padding-inline: 16px; }
        .catb--vertical { max-height: 120px; }
        .cat-badge--extra { display: none; }
}