@charset "UTF-8";
/* ============================================================
   custom.css -- Al-Yaqoobi site custom styles
   Loaded last to override all other stylesheets
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */

/* ── Base: dark green + Islamic geometric star pattern ── */
#header {
    position: relative;
    z-index: 999;
    background-color: var(--brand-dark, #0d3d2e);

    /*
     * Islamic 8-point star lattice — SVG tile + gradient overlay
     * Technique: two layers (gradient on top, pattern beneath)
     */
    background-image:
        linear-gradient(to bottom, rgba(13,61,46,0.10) 0%, rgba(6,22,14,0.45) 100%),
        url('../img/islamic-pattern.svg');
    background-size: auto, 110px 110px;
    background-position: center, top left;
    background-repeat: no-repeat, repeat;
}

/* Thin gold line at very top */
#header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to left, transparent 0%, var(--brand-gold, #c9a227) 25%, var(--brand-gold-light, #f0d060) 50%, var(--brand-gold, #c9a227) 75%, transparent 100%);
    z-index: 30;
}

/* ── 3-column flex layout ── */
.hdr-inner {
    display: flex;
    flex-direction: row;          /* RTL handled by body dir=rtl */
    align-items: stretch;
    width: 100%;
    min-height: 260px;
    position: relative;
    z-index: 1001;
}

/* Each column stretches full height and uses flex-column internally */
.hdr-wrap {
    display: flex;
    align-self: stretch;
}
.hdr-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* ── LEFT column: social icons ── */
.hdr-col-left {
    
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 0 21px 24px;
}

/* ── CENTER column: logo fills available space, bottom-aligned ── */
.hdr-col-center {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 6px;
}

/* ── RIGHT column: language + date, side by side in one line ── */
.hdr-col-right {
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 24px 21px 0;
    gap: 18px;
}

/* ── Logo image ── */
.hdr-logo a { display: block; line-height: 0; }
.hdr-logo img {
    height: 240px;
    width: auto;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
}

/* Override old .logo img rule */
.logo img { height: 250px; width: auto; }

/* ── Social icons ── */
.hdr-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.hdr-social ul li { display: block; }

.hdr-social ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-gold, #c9a227);
    color: var(--brand-gold, #c9a227);
    font-size: 15px;
    background: rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
}

.hdr-social ul li a:hover {
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    box-shadow: 0 0 10px rgba(201, 162, 39, 0.55);
    transform: translateY(-2px);
    border-color: var(--brand-gold-light, #f0d060);
}

/* ── Language dropdown ── */
.hdr-lang {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 35px;
    overflow: visible;
}
#CutomMenu { display: flex; }

#CutomMenu .dropbtn {
    color: #e8d8a0;
    background: transparent;
    border: none;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 6px;
    font-family: inherit;
    letter-spacing: 0.3px;
}

#CutomMenu .dropbtn:hover,
#CutomMenu .dropbtn:focus { color: var(--brand-gold, #c9a227); outline: none; }

#CutomMenu .lang-dropdown { position: relative; display: inline-block; }

#CutomMenu .dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
    left: auto;
    top: 32px;
    background: #0a2e22;
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 8px;
    min-width: 150px;
    max-width: calc(100vw - 20px);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

#CutomMenu .dropdown-content a {
    display: block;
    color: #e8d8a0;
    padding: 9px 16px;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s;
}

#CutomMenu .dropdown-content a:hover {
    background: rgba(201,162,39,0.15);
    color: var(--brand-gold, #c9a227);
}

#CutomMenu .show { display: block; }

/* ── Hijri date ── */
.hdr-date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 35px;
    text-align: right;
    color: #e8d8a0;
    font-size: 14px;
    letter-spacing: 0.3px;
}

.hdr-date #hijri_date_json { display: flex; align-items: center; color: #e8d8a0; }
.hdr-date .fa-calendar { margin-left: 5px; color: var(--brand-gold, #c9a227); }


/* ══════════════════════════════════════════════════════════════
   HERO SLIDER — خلفية بيضاء، صورة يمين، نص يسار
   ══════════════════════════════════════════════════════════════ */

#slider_div { width: 100%; overflow: hidden; }

/* ── حاوية الشريحة: flex row بارتفاع ثابت ── */
section#Slider .owl-item .item.hs-item {
    display: flex !important;
    flex-direction: row;
    height: 640px !important;
    overflow: hidden;
    background: #f3e8c8;
    position: relative !important;
}

/* خط ذهبي رفيع في الأعلى */
section#Slider .owl-item .item.hs-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227) 30%, var(--brand-gold-light, #f0d060) 50%, var(--brand-gold, #c9a227) 70%, transparent);
    z-index: 20;
}

/* خط ذهبي رفيع في الأسفل */
section#Slider .owl-item .item.hs-item::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227) 30%, var(--brand-gold-light, #f0d060) 50%, var(--brand-gold, #c9a227) 70%, transparent);
    z-index: 20;
}

/* ── الصورة (تظهر يميناً في RTL كأول عنصر) ── */
.hs-img {
    width: 48%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* تدرج على الحافة اليسرى للصورة (يمزج مع منطقة النص) */
.hs-img::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -5px;
    width: 260px;
    background: linear-gradient(to right,
        #f3e8c8 0%,
        rgba(243,232,200,0.75) 45%,
        rgba(243,232,200,0.15) 80%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

.hs-img img {
    width: 100% !important;
    height: 640px !important;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ── منطقة النص (تظهر يساراً في RTL كعنصر ثانٍ) ── */
.hs-text {
    flex: 1;
    background: #f3e8c8;
    display: flex;
    align-items: center;
    padding: 0 48px 0 24px;
    position: relative;
    z-index: 5;
    overflow: hidden;
    min-width: 0;
}

/* نقش إسلامي خفيف في الخلفية — يتلاشى تدريجياً قرب حافة الصورة لتجنّب ظهور خط فاصل حاد */
.hs-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/islamic-pattern.svg');
    background-size: 90px 90px;
    background-repeat: repeat;
    opacity: 0.08;
    filter: invert(1);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 70px);
    mask-image: linear-gradient(to left, transparent 0, #000 70px);
}

.hs-content {
    width: 100%;
    text-align: center;
    font-family: "Droid Arabic Kufi", sans-serif;
    position: relative;
    z-index: 2;
    padding: 30px;
}

/* ── شارة "خبر اليوم" ── */
.hs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.hs-badge-line {
    flex: 1;
    max-width: 55px;
    height: 1px;
    background: var(--brand-gold, #c9a227);
    opacity: 0.6;
}
.hs-gem {
    color: var(--brand-gold, #c9a227);
    font-size: 8px;
}
.hs-badge-txt {
    font-size: 18px;
    color: #8a6d1e;
    font-family: "Droid Arabic Kufi";
    letter-spacing: 0.5px;
}

/* ── عنوان المقالة الرئيسي ── */
.hs-title {
    font-size: 26px;
    color: var(--brand-dark, #0d3d2e);
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 12px;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-shadow: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── وصف / العنوان الفرعي ── */
.hs-desc {
    color: #4a4a3f;
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 22px;
    font-family: "Droid Arabic Kufi";
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── زر اقرأ المزيد — أخضر داكن بحدود ذهبية ── */
.hs-btn {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.2s;
}
.hs-btn-cap {
    height: 100%;
    aspect-ratio: 489.01 / 766;
    display: block;
    flex-shrink: 0;
    fill: var(--brand-dark, #0d3d2e);
    stroke-width: 19;
    transition: fill 0.2s ease;
}
.hs-btn-cap-lead { transform: rotate(180deg); margin-left: -1px; }
.hs-btn-cap-trail { margin-right: -1px; }
.hs-btn-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
    background: var(--brand-dark, #0d3d2e);
    color: var(--brand-gold, #c9a227) !important;
    font-size: 14px;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: bold;
    white-space: nowrap;
}
.hs-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(201,162,39,0.5);
    text-decoration: none !important;
}
.hs-btn:hover .hs-btn-cap { fill: var(--brand-gold, #c9a227); }
.hs-btn:hover .hs-btn-label {
    background: var(--brand-gold, #c9a227);
    border-color: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e) !important;
}

/* ── أسهم التنقل المخصصة ── */

section#Slider {
    position: relative !important;
}

/* أخفِ nav الافتراضي لـ Owl (nav: false في JS، هذا للأمان) */
section#Slider .owl-nav {
    display: none !important;
}

/* أزرار التنقل والإيقاف — دائرة خضراء داكنة بحدود ذهبية */
.hs-nav-btn,
#hs-btn-pause {
    position: absolute;
    transition: opacity 0.3s, background 0.2s, color 0.2s, transform 0.15s;
    z-index: 100;
    cursor: pointer;
    border: 1.6px solid var(--brand-gold, #c9a227);
    background: var(--brand-dark, #0d3d2e);
    color: var(--brand-gold, #c9a227);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(13,61,46,0.35);
}

/* زرا التنقل (السابق/التالي) ظاهران دائماً */
.hs-nav-btn {
    opacity: 1;
    pointer-events: all;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 2px;
}
.hs-nav-btn:hover {
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    transform: translateY(-50%) scale(1.08);
}
#hs-btn-prev { right: 18px; }
#hs-btn-next { left: 18px; }

/* زر الإيقاف / التشغيل — وسط الشريحة، يظهر فقط عند التمرير فوق الشريحة */
#hs-btn-pause {
    opacity: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 14px;
}
section#Slider:hover #hs-btn-pause {
    opacity: 1;
    pointer-events: all;
}
#hs-btn-pause:hover {
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    transform: translate(-50%, -50%) scale(1.1);
}

/* ── نقاط التنقل ── */
section#Slider .owl-dots {
    position: absolute !important;
    bottom: 16px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 50 !important;
    margin: 0 !important;
    line-height: 1;
}
section#Slider .owl-dot {
    display: inline-block !important;
    margin: 0 !important;
}
section#Slider .owl-dot span {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.25) !important;
    border: 2px solid rgba(201,162,39,0.65) !important;
    margin: 0 5px !important;
    transition: background 0.25s, transform 0.25s;
}
section#Slider .owl-dot.active span {
    background: var(--brand-gold, #c9a227) !important;
    border-color: var(--brand-gold, #c9a227) !important;
    transform: scale(1.3);
}

/* ── استجابة الشاشات ── */
@media (max-width: 991px) {
    section#Slider .owl-item .item.hs-item { height: 460px !important; }
    .hs-img img { height: 460px !important; }
    .hs-img { width: 45%; }
    .hs-title { font-size: 21px; }
    .hs-text { padding: 0 32px 0 16px; }
}
@media (max-width: 767px) {
    section#Slider .owl-item .item.hs-item {
        flex-direction: column !important;
        height: auto !important;
    }
    .hs-img {
        width: 100%;
        height: 320px;
        flex-shrink: 0;
    }
    .hs-img img { height: 320px !important; }
    .hs-img::after {
        top: auto; left: 0; right: 0; bottom: 0;
        width: auto;
        height: 100px;
        background: linear-gradient(to top, #f3e8c8, transparent);
    }
    .hs-text { padding: 20px 20px 40px; }
    .hs-title { font-size: 17px; -webkit-line-clamp: 4; overflow: visible; }
    .hs-desc { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   HOMEPAGE
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   ARTICLES
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .hdr-col-left,
    .hdr-col-right { width: 20%; }
    .hdr-logo img { height: 180px; }
    .hdr-social ul li a { width: 30px; height: 30px; font-size: 13px; }
}

@media (max-width: 1024px) {
    /* يشمل الآن الأجهزة اللوحية (768-1024) أيضًا وليس فقط الجوال، بحيث يظهر الهيدر
       مضغوطًا في عمود واحد بالمنتصف بدل الأعمدة الثلاثة المتراصة أفقياً التي كانت
       تُظهر الأيقونات والتاريخ بشكل متراكب وضيق على التابلت */
    .hdr-inner { flex-direction: column; min-height: auto; }

    /* .hdr-wrap-* are the real flex items (Bootstrap col-xs-12 wrappers);
       order/width must target them, not the nested .hdr-col-* divs */
    .hdr-wrap { width: 100% !important; float: none !important; padding: 0; }
    .hdr-wrap-center { order: 1; }
    .hdr-wrap-right  { order: 2; }
    .hdr-wrap-left   { order: 3; }

    .hdr-col {
        width: 100% !important;
        padding: 10px 15px;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
    }

    .hdr-logo img { height: 150px; }

    .hdr-col-right {
        flex-direction: row;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .hdr-lang {
        justify-content: center;
        height: auto;
    }
    #CutomMenu { justify-content: center; }
    #CutomMenu .dropbtn {
        border: 1px solid rgba(201,162,39,0.5);
        border-radius: 20px;
        padding: 5px 16px;
    }
    #CutomMenu .dropdown-content {
        right: 0;
        left: auto;
    }

    .hdr-date { text-align: center; }
    .hdr-date #hijri_date_json { display: flex; align-items: center; justify-content: center; gap: 6px; }

    .hdr-social ul {
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ===== Pillar-shaped category cards (five_cat) ===== */
#home-section-icons {
    width: 100%;

    background-size: 110px 110px;
    background-repeat: repeat;
}
.tq-pillars-wrapper {
    width: 100%;
    padding: 20px 0 40px;
    position: relative;
}
.tq-pillars-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.tq-pillar-box-wrap {
    width: 220px;
    max-width: 42%;
    opacity: 0;
    transform: translateY(30px);
    animation: tqPillarIn 0.6s ease forwards;
}
/* Tablet: 3 per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .tq-pillar-box-wrap { width: calc((100% - 2 * 24px) / 3); max-width: none; }
}
/* Desktop: force all 6 onto a single row */
@media (min-width: 1200px) {
    .tq-pillars-row { flex-wrap: nowrap; }
    .tq-pillar-box-wrap { width: calc((100% - 5 * 24px) / 6); max-width: 220px; }
}
.tq-pillar-box-wrap:nth-child(1) { animation-delay: 0.05s; }
.tq-pillar-box-wrap:nth-child(2) { animation-delay: 0.2s; }
.tq-pillar-box-wrap:nth-child(3) { animation-delay: 0.35s; }
.tq-pillar-box-wrap:nth-child(4) { animation-delay: 0.5s; }
@keyframes tqPillarIn {
    to { opacity: 1; transform: translateY(0); }
}

.tq-pillar-box {
    position: relative;
    width: 100%;
    min-height: 470px;
    padding: 0 14px 60px;
    text-align: center;
    transition: transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.tq-pillar-box-wrap:hover .tq-pillar-box {
    transform: translateY(-10px);
}
.tq-pillar-box .tq-shape-top,
.tq-pillar-box .tq-shape-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 53%;
    z-index: 0;
    transition: fill 0.3s ease;
}
.tq-pillar-box .tq-shape-top { top: 0; }
.tq-pillar-box .tq-shape-bottom { bottom: 0; }
.tq-pillar-box .tq-shape-top path,
.tq-pillar-box .tq-shape-bottom path {
    fill: #f3e8c8;
}
.tq-pillar-box-wrap:hover .tq-shape-top path,
.tq-pillar-box-wrap:hover .tq-shape-bottom path {
    fill: var(--brand-gold-light, #f0d060);
}

.tq-pillar-head,
.tq-pillar-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tq-pillar-deco {
    display: block;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
}
.tq-pillar-deco svg {
    width: 100%;
    height: 100%;
    color: var(--brand-gold, #c9a227);
    animation: tqDecoSpin 14s linear infinite;
    transform-origin: 50% 50%;
}
.tq-pillar-box-wrap:hover .tq-pillar-deco svg {
    color: var(--brand-dark, #0d3d2e);
}
@keyframes tqDecoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.tq-pillar-head h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-dark, #0d3d2e);
    margin: 0 0 6px;
}
.tq-pillar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}
.tq-pillar-circle {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--brand-gold, #c9a227);
    margin-bottom: 12px;
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.tq-pillar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.tq-pillar-box-wrap:hover .tq-pillar-circle {
    border-color: var(--brand-dark, #0d3d2e);
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.tq-pillar-box-wrap:hover .tq-pillar-circle img {
    transform: scale(1.12);
}
.tq-pillar-body p {
    margin: 0;
    font-size: 16px;
}
.tq-pillar-body p,
.tq-pillar-link {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 700;
}
.tq-pillar-box-wrap:hover .tq-pillar-body p {
    color: var(--brand-gold, #c9a227);
}

@media (max-width: 767px) {
    .tq-pillar-box-wrap { width: 150px; max-width: 46%; }
    .tq-pillar-box { min-height: 340px; padding: 25px 8px 20px; }
    .tq-pillar-circle { width: 95px; height: 95px; }
    .tq-pillar-head h4 { font-size: 14px; }
}

/* ===== Tabligh block (photo + text, no frame, unified background) ===== */
.tq-tabligh-wrapper {
    width: 100%;
    padding: 55px 0;
    background-color: var(--brand-tabligh-bg, #fdf3ec);
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
}
.tq-tabligh-box {
    display: flex;
    align-items: center;
    gap: 55px;
    opacity: 0;
    transform: translateY(24px);
    animation: tqPillarIn 0.7s ease forwards;
}
.tq-tabligh-photo {
    position: relative;
    flex: 0 0 30%;
    max-width: 30%;
    align-self: stretch;
    margin-right: -60px;
    z-index: 2;
    order: 2;
}
.tq-tabligh-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
    mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}
.tq-tabligh-card {
    position: relative;
    order: 1;
    flex: 1 1 auto;
    text-align: center;
    padding: 15px 40px 20px 55px;
}
.tq-tabligh-heading {
    color: var(--brand-dark, #064542);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}
.tq-tabligh-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px 0 24px;
}
.tq-tabligh-divider-line {
    flex: 1 1 auto;
    max-width: 320px;
    height: 2px;
    background: linear-gradient(to left, transparent 0%, var(--brand-gold, #c49343) 50%, transparent 100%);
}
.tq-tabligh-text {
    text-align: justify;
    font-size: 16px;
    line-height: 2;
    color: #333;
    margin: 0 0 26px;
}
.tq-tabligh-text p {
    margin: 0 0 10px;
}
.tq-tabligh-text p:last-child {
    margin-bottom: 0;
}

/* شارة/زر اسم المرجع بالشكل العضوي */
.tq-tabligh-badge-wrap {
    display: flex;
    justify-content: center;
}
.tq-tabligh-badge-img {
    max-height: 50px;
    width: auto;
}
.tq-tabligh-badge {
    position: relative;
    width: 190px;
    height: 77px;
    background: var(--brand-dark, #064542);
    clip-path: url(#tq-badge-shape);
    -webkit-clip-path: url(#tq-badge-shape);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tq-tabligh-badge-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tq-tabligh-badge-text em {
    font-style: normal;
    font-weight: 400;
    font-size: 10.5px;
    color: var(--brand-gold-light, #e8cf8a);
    border-right: 1px solid rgba(255,255,255,0.35);
    padding-right: 8px;
}

@media (max-width: 991px) {
    .tq-tabligh-box { flex-direction: column; gap: 30px; padding: 0 20px; }
    .tq-tabligh-photo {
        flex: 0 0 auto;
        max-width: 220px;
        width: 220px;
        height: 260px;
        margin-right: 0;
    }
    .tq-tabligh-card { padding: 70px 24px 30px; }
    .tq-tabligh-heading { font-size: 19px; }
    .tq-tabligh-text { font-size: 15px; line-height: 1.95; }
}
@media (max-width: 1024px) {
    /* يشمل الآن الأجهزة اللوحية (768-1024) أيضًا وليس فقط الجوال، بحيث تظهر صورة
       التبليغ دائرية أعلى النص بدل الشكل المستطيل المقصوص الذي كان يظهر على التابلت */
    .tq-tabligh-box { gap: 6px; }
    .tq-tabligh-photo {
        order: 0;
        width: 110px;
        height: 110px;
        max-width: 110px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid var(--brand-gold, #c9a227);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        margin: 0 auto;
    }
    .tq-tabligh-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .tq-tabligh-card { order: 1; padding: 20px 20px 30px; }
}
@media (max-width: 480px) {
    .tq-tabligh-heading { font-size: 17px; }
    .tq-tabligh-text { font-size: 13.5px; }
    .tq-tabligh-badge { width: 160px; height: 65px; }
    .tq-tabligh-badge-text { font-size: 11px; }
}

/* ===== App promo block (icon + name, description, phone mockups, store badges) ===== */
.tq-app-wrapper {
    width: 100%;
    padding: 55px 0 60px;
    background-color: #faf7f5;
    text-align: center;
	border-bottom: 1px solid #e2d3a2;
}

/* ── Carousel shell (multiple apps) ── */
.tq-app-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}
.tq-app-slide {
    display: none;
    text-align: center;
}
.tq-app-slide.is-active {
    display: block;
    animation: tqAppFadeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tqAppFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.tq-app-nav {
    position: absolute;
    top: 240px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    color: #c6c6cc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: color 0.25s ease, transform 0.2s ease;
}
.tq-app-nav svg { width: 34px; height: 34px; display: block; }
.tq-app-nav:hover {
    color: var(--brand-gold, #c9a227);
    transform: scale(1.12);
}
.tq-app-prev { right: 0; }
.tq-app-next { left: 0; }

.tq-app-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
}
.tq-app-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8d8de;
    cursor: pointer;
    transition: background 0.25s, transform 0.2s;
}
.tq-app-dot:hover { background: var(--brand-gold-light, #f0d060); }
.tq-app-dot.is-active { background: var(--brand-gold, #c9a227); transform: scale(1.2); }

.tq-app-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.tq-app-head h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--brand-dark, #0d3d2e);
}
.tq-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    overflow: hidden;
    background: var(--brand-dark, #0d3d2e);
    flex-shrink: 0;
}
.tq-app-icon img { width: 100%; height: 100%; object-fit: cover; }

.tq-app-desc {
    max-width: 620px;
    margin: 14px auto 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.9;
}

/* ── Phone mockups: CSS-built device frames around uploaded screenshots ── */
.tq-app-phones {
    display: flex;
    direction: ltr; /* keep left/right image slots physically left/right regardless of page RTL */
    align-items: center;
    justify-content: center;
    margin: 50px auto 0;
    max-width: 900px;
}
.tq-phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 34px;
    border: 4px solid #1a1a1a;
    overflow: hidden;
    box-shadow: 0 25px 45px -12px rgba(0,0,0,0.35);
}
.tq-phone-frame::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    height: 16px;
    background: #111;
    border-radius: 10px;
    z-index: 2;
}
.tq-phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tq-phone-main {
    position: relative;
    width: 230px;
    height: 470px;
    z-index: 3;
}

.tq-phone-side {
    position: relative;
    width: 190px;
    height: 390px;
    z-index: 1;
    opacity: 0.55;
    filter: grayscale(20%);
}
.tq-phone-side .tq-phone-frame { box-shadow: 0 18px 32px -14px rgba(0,0,0,0.25); }
.tq-phone-left  { margin-left: -55px; transform: rotate(-9deg) translateY(20px); }
.tq-phone-right { margin-right: -55px; transform: rotate(9deg) translateY(20px); }

/* ── Store badges ── */
.tq-app-stores { margin-top: 46px; }
.tq-app-stores-label {
    display: block;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 14px;
}
.tq-app-store-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.tq-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1px solid #d8d8de;
    border-radius: 10px;
    background: #fff;
    color: var(--brand-dark, #0d3d2e);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.tq-store-btn:hover {
    border-color: var(--brand-gold, #c9a227);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    color: var(--brand-dark, #0d3d2e);
}
.tq-store-ico { width: 20px; height: 20px; font-size: 20px; line-height: 1; }

@media (max-width: 767px) {
    .tq-app-wrapper { padding: 40px 0 44px; }
    .tq-app-carousel { padding: 0 38px; }
    .tq-app-nav { width: 30px; height: 30px; top: 150px; }
    .tq-app-nav svg { width: 26px; height: 26px; }
    .tq-app-head h3 { font-size: 19px; }
    .tq-app-desc { font-size: 13.5px; padding: 0 20px; }
    .tq-app-phones { margin-top: 30px; }
    .tq-phone-main { width: 150px; height: 306px; }
    .tq-phone-side { width: 110px; height: 224px; }
    .tq-phone-left  { margin-left: -34px; }
    .tq-phone-right { margin-right: -34px; }
    .tq-app-stores { margin-top: 30px; }
    .tq-store-btn { padding: 9px 16px; font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════
   AUDIO LIBRARY — قسم دروس البحث الخارج / الصوتيات
   ══════════════════════════════════════════════════════════════ */

.aq-audio-wrapper {
    position: relative;
    padding: 45px 24px 0px;
    border-radius: 18px;
    margin: 0 0 6px;
    overflow: hidden;
}

.aq-audio-header {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0;
    margin-bottom: 26px;
}
.aq-audio-icon {
    display: block;
    color: var(--brand-gold, #c9a227);
    font-size: 22px;
    margin-bottom: 8px;
}
.aq-audio-header a {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 28px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
}
.aq-audio-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.aq-audio-divider-line {
    width: 70px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
}
.aq-audio-divider .aq-audio-divider-line:last-child {
    background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227));
}
.aq-audio-divider-gem {
    color: var(--brand-gold, #c9a227);
    font-size: 10px;
}
.aq-audio-subtitle {
    margin: 14px 0 0;
    color: #6b5d45;
    font-size: 14px;
    font-family: "Droid Arabic Kufi";
}

.aq-audio-list {
    position: relative;
    z-index: 2;
    counter-reset: aqrow;
    max-width: 900px;
    margin: 0 auto;
}

.aq-audio-row {
    background: #fff;
    border: 1px solid rgba(201,162,39,0.18);
    border-radius: 12px;
    padding: 11px 18px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.aq-audio-row:hover {
    box-shadow: 0 6px 18px rgba(13,61,46,0.1);
    border-color: rgba(201,162,39,0.4);
    transform: translateY(-1px);
}
.aq-audio-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.aq-row-right {
    display: flex;
    align-items: center;
    min-width: 0;
}
.aq-title {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 15px;
    font-weight: 600;
    font-family: "Droid Arabic Kufi";
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aq-row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.aq-action {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
    background: var(--brand-gold, #c9a227);
    border: none;
    border-radius: 22px;
    padding: 8px 18px;
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.15s;
}
.aq-listen {
    background: var(--brand-dark, #0d3d2e);
}
.aq-action .aq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--brand-dark, #0d3d2e);
}
.aq-listen .aq-icon { color: var(--brand-gold-light, #f0d060); }
.aq-listen.is-playing {
    background: var(--brand-gold, #c9a227);
}
.aq-listen.is-playing .aq-icon { color: var(--brand-dark, #0d3d2e); }
.aq-action:hover { opacity: 0.88; transform: translateY(-1px); }
.aq-label {
    font-size: 13px;
    font-weight: bold;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
}
.aq-listen .aq-label { color: var(--brand-gold-light, #f0d060); }

/* نبضة صوتية على زر الاستماع أثناء التشغيل */
.aq-listen.is-playing .aq-icon i {
    animation: aqPulse 1s ease-in-out infinite;
}
@keyframes aqPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* شريط التقدّم — يظهر فقط للدرس قيد التشغيل حالياً */
.aq-progress {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.aq-audio-row.is-active .aq-progress {
    display: flex;
    max-height: 30px;
    opacity: 1;
}
.aq-progress-track {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(201,162,39,0.15);
    overflow: hidden;
    position: relative;
}
.aq-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(to left, var(--brand-gold, #c9a227), var(--brand-gold-light, #f0d060));
    transition: width 0.2s linear;
}
.aq-audio-row.is-active.is-playing-state .aq-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.5), transparent);
    animation: aqShimmer 1.4s linear infinite;
}
@keyframes aqShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.aq-progress-time {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--brand-dark, #0d3d2e);
    font-weight: bold;
    direction: ltr;
    font-family: "Droid Arabic Kufi";
    min-width: 88px;
    text-align: left;
}

.aq-audio-archive {
    text-align: center;
    margin: 0px 0 30px;
}
.aq-audio-archive a.plus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-dark, #0d3d2e) !important;
    color: var(--brand-gold-light, #f0d060) !important;
    border: none !important;
    padding: 12px 34px !important;
    border-radius: 28px !important;
    font-size: 14px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.15s;
}
.aq-audio-archive a.plus:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    .aq-audio-wrapper { padding: 32px 14px 20px; border-radius: 0; }
    .aq-audio-header a { font-size: 21px; }
    .aq-audio-row-main { flex-direction: column; align-items: stretch; gap: 10px; }
    .aq-row-actions { justify-content: flex-end; gap: 10px; }
    .aq-title { white-space: normal; }
}
@media (max-width: 480px) {
    .aq-audio-header a { font-size: 18px; }
    .aq-title { font-size: 13.5px; }
    .aq-label { font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════
   VIDEO CARDS — المكتبة المرئية (fornews2)
   ══════════════════════════════════════════════════════════════ */

.vc-wrapper { position: relative; }

.vc-header {
    position: relative;
    text-align: center;
    padding: 0 !important;
    margin-bottom: 20px !important;
}
.vc-header-icon {
    display: block;
    color: var(--brand-gold, #c9a227);
    font-size: 20px;
    margin-bottom: 6px;
}
.vc-header a {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 22px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
}
.vc-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
.vc-divider-line {
    width: 55px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
}
.vc-divider .vc-divider-line:last-child {
    background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227));
}
.vc-divider-gem { color: var(--brand-gold, #c9a227); font-size: 9px; }

.vc-grid { margin: 0 -6px; }
.vc-grid .col-lg-6 { padding: 0 6px; margin-bottom: 12px; }

.vc-card { display: block; text-decoration: none !important; }
.vc-thumb {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--brand-dark, #0d3d2e);
    box-shadow: 0 6px 16px rgba(13,61,46,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vc-card:hover .vc-thumb { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(13,61,46,0.25); }
.vc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vc-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,61,46,0.85) 0%, rgba(13,61,46,0.05) 55%, rgba(13,61,46,0) 100%);
}
.vc-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: transform 0.2s, background 0.2s;
}
.vc-card:hover .vc-play { transform: translate(-50%, -50%) scale(1.12); background: var(--brand-gold-light, #f0d060); }
.vc-card-title {
    position: absolute;
    right: 0; left: 0; bottom: 0;
    padding: 8px 12px 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: "Droid Arabic Kufi";
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-archive { text-align: center; margin: 16px 0 6px; }
.vc-archive a.plus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-dark, #0d3d2e) !important;
    color: var(--brand-gold-light, #f0d060) !important;
    border: none !important;
    padding: 10px 28px !important;
    border-radius: 24px !important;
    font-size: 13px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.15s;
}
.vc-archive a.plus:hover { opacity: 0.88; transform: translateY(-2px); }

@media (max-width: 767px) {
    .vc-header a { font-size: 19px; }
    .vc-card-title { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   VIDEO LIBRARY — المكتبة المرئية (مشغّل رئيسي + قائمة، عرض كامل)
   ══════════════════════════════════════════════════════════════ */

.vl-wrapper {
    position: relative;
    padding: 40px 24px 30px;
}

.vl-header {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}
.vl-header-icon {
    display: block;
    color: var(--brand-gold, #c9a227);
    font-size: 22px;
    margin-bottom: 8px;
}
.vl-header a {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 28px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
}
.vl-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.vl-divider-line {
    width: 70px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
}
.vl-divider .vl-divider-line:last-child {
    background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227));
}
.vl-divider-gem {
    color: var(--brand-gold, #c9a227);
    font-size: 10px;
}

.vl-list {
    max-width: 1100px;
    margin: 0 auto;
}

/* المشغّل الرئيسي */
.vl-hero {
    display: block;
    cursor: pointer;
    margin-bottom: 22px;
}
.vl-hero-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand-dark, #0d3d2e);
    box-shadow: 0 10px 30px rgba(13,61,46,0.25);
}
.vl-hero-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.vl-hero-thumb {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vl-hero-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13,61,46,0.75) 0%, rgba(13,61,46,0.1) 45%, rgba(13,61,46,0.35) 100%);
}
.vl-hero-play {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.2s, background 0.2s;
}
.vl-hero:hover .vl-hero-play {
    transform: scale(1.1);
    background: var(--brand-gold-light, #f0d060);
}
.vl-hero-title {
    margin: 12px 0 0;
    text-align: center;
    color: var(--brand-dark, #0d3d2e);
    font-size: 17px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
}

/* قائمة الفيديوهات */
.vl-row {
    background: #fff;
    border: 1px solid rgba(201,162,39,0.18);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s, background 0.2s;
}
.vl-row:hover {
    box-shadow: 0 6px 18px rgba(13,61,46,0.1);
    border-color: rgba(201,162,39,0.4);
    transform: translateY(-1px);
}
.vl-row.is-active { background: rgba(201,162,39,0.1); }
.vl-row-hidden { display: none !important; }
.vl-row-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    text-decoration: none !important;
}
.vl-row-thumb {
    flex-shrink: 0;
    position: relative;
    width: 40x;
    height: 40x;
    border-radius: 50px;
    background: rgba(13,61,46,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}
.vl-row-play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand-dark, #0d3d2e);
    color: var(--brand-gold, #c9a227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.vl-row:hover .vl-row-thumb { background: rgba(13,61,46,0.1); transform: scale(1.03); }
.vl-row:hover .vl-row-play { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e); }
.vl-row.is-active .vl-row-thumb { box-shadow: 0 0 0 2px var(--brand-gold, #c9a227); }
.vl-row.is-active .vl-row-play { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e); }
.vl-row-title {
    color: var(--brand-dark, #0d3d2e);
    font-size: 14.5px;
    font-weight: 600;
    font-family: "Droid Arabic Kufi";
    line-height: 1.6;
}
.vl-row.is-active .vl-row-title { color: var(--brand-gold, #c9a227) !important; }

.vl-archive {
    text-align: center;
    margin: 20px 0 10px;
}
.vl-archive a.plus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-dark, #0d3d2e) !important;
    color: var(--brand-gold-light, #f0d060) !important;
    border: none !important;
    padding: 12px 34px !important;
    border-radius: 28px !important;
    font-size: 14px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.15s;
}
.vl-archive a.plus:hover { opacity: 0.88; transform: translateY(-2px); }

@media (max-width: 767px) {
    .vl-wrapper { padding: 28px 14px 20px; }
    .vl-header a { font-size: 21px; }
    .vl-row-thumb { width: 48px; height: 48px; }
    .vl-row-play { width: 28px; height: 28px; font-size: 11px; }
    .vl-row-title { font-size: 13px; }
}
@media (max-width: 480px) {
    .vl-header a { font-size: 18px; }
    .vl-hero-play { width: 56px; height: 56px; font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════
   PUBLICATIONS — المؤلفات
   ══════════════════════════════════════════════════════════════ */

/* أوسع من باقي أقسام الرئيسية (التي تلتزم بعرض #container 1200px) */
#home-section-publications #container { max-width: 1650px; }

.pb-wrapper {
    position: relative;
    padding: 40px 24px 30px;
}

.pb-header {
    position: relative;
    text-align: center;
    margin-bottom: 24px;
}
.pb-header-icon {
    display: block;
    color: var(--brand-gold, #c9a227);
    font-size: 22px;
    margin-bottom: 8px;
}
.pb-header a {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 28px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
}
.pb-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.pb-divider-line {
    width: 70px;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
}
.pb-divider .pb-divider-line:last-child {
    background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227));
}
.pb-divider-gem { color: var(--brand-gold, #c9a227); font-size: 10px; }
.pb-subtitle {
    margin: 12px 0 0;
    color: #6b5d45;
    font-size: 14px;
    font-family: "Droid Arabic Kufi";
}

.pb-carousel-wrap {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 54px;
}

/* ── Minimal chevron nav (shared look with .tq-app-nav) ── */
.pb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    padding: 0;
    color: #c6c6cc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: color 0.25s ease, transform 0.2s ease;
}
.pb-nav svg { width: 34px; height: 34px; display: block; }
.pb-nav:hover {
    color: var(--brand-gold, #c9a227);
    transform: translateY(-50%) scale(1.12);
}
.pb-prev { right: 0; }
.pb-next { left: 0; }

.pb-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.pb-track::-webkit-scrollbar { display: none; }

.pb-card {
    flex: 0 0 calc((100% - 5 * 18px) / 6);
    width: calc((100% - 5 * 18px) / 6);
    background: #fff;
    border: 1px solid rgba(201,162,39,0.18);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    scroll-snap-align: start;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.pb-card:hover {
    box-shadow: 0 8px 20px rgba(13,61,46,0.12);
    border-color: rgba(201,162,39,0.4);
    transform: translateY(-3px);
}
.pb-card-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    margin-bottom: 14px;
}
.pb-card-img img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    
}
.pb-card-title {
    color: var(--brand-dark, #0d3d2e);
    font-size: 14px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    line-height: 1.5;
    min-height: 42px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pb-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-dark, #0d3d2e);
    color: var(--brand-gold-light, #f0d060) !important;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.pb-card-btn:hover { opacity: 0.85; }

.pb-archive {
    text-align: center;
    margin: 22px 0 6px;
}
.pb-archive a.plus {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-dark, #0d3d2e) !important;
    color: var(--brand-gold-light, #f0d060) !important;
    border: none !important;
    padding: 12px 34px !important;
    border-radius: 28px !important;
    font-size: 14px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.15s;
}
.pb-archive a.plus:hover { opacity: 0.88; transform: translateY(-2px); }

/* تابلت: عمود مرن ثابت العرض بدل صيغة الأعمدة الستة الضيقة */
@media (max-width: 1199px) and (min-width: 768px) {
    #home-section-publications #container { max-width: 100%; }
    .pb-carousel-wrap { padding: 0 44px; }
    .pb-card { flex: 0 0 190px; width: 190px; }
}

@media (max-width: 767px) {
    .pb-wrapper { padding: 28px 14px 20px; }
    .pb-header a { font-size: 21px; }
    .pb-carousel-wrap { padding: 0 38px; }
    .pb-card { flex: 0 0 140px; width: 140px; }
    .pb-card-img { height: 150px; }
    .pb-nav { width: 30px; height: 30px; }
    .pb-nav svg { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
    .pb-header a { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   ISTIFTA TOPICS (homepage pill grid)
   ══════════════════════════════════════════════════════════════ */

#home-section-istifta { padding: 30px 0 40px; }

.ist-block { margin: 0 5px; }

#home-section-istifta .pb-header { margin: 10px 0 30px; }

.ist-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.ist-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    color: #1c1c1c !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ist-pill:hover { border-color: transparent; box-shadow: 0 10px 22px rgba(13,61,46,0.16); transform: translateY(-1px); }

.ist-dot {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease, background 0.5s ease;
}
.ist-pill:hover .ist-dot { transform: scale(90); background: var(--brand-dark, #0d3d2e); }

.ist-pill-text { position: relative; z-index: 1; transition: transform 0.3s ease, color 0.3s ease; }
.ist-pill:hover .ist-pill-text { color: #fff; transform: translateX(6px); }

.ist-pill-more { background: #f7f1dc; border-color: #f7f1dc; color: #a3822c !important; }
.ist-pill-more .ist-dot { background: #a3822c; }

@media (max-width: 640px) {
    .ist-grid { gap: 8px; }
    .ist-pill { padding: 10px 14px; font-size: 13.5px !important; }
}

/* ══════════════════════════════════════════════════════════════
   TREE NAV SIDEBAR (site-wide, box/treenav.tpl)
   ══════════════════════════════════════════════════════════════ */

.tree-menu {
    background: linear-gradient(180deg, var(--brand-dark, #0d3d2e), #0a2b20) !important;
}

.tree-menu-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.tree-menu-title {
    color: var(--brand-gold-light, #f0d060);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}
.tree-orn-line { width: 26px; height: 1px; background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227)); }
.tree-menu-head .tree-orn-line:last-child { background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227)); }

/* ── القسم متعدد المستويات (له فروع تتفرّع بدورها): التصميم القديم كما هو، ألوان فقط ── */
.tree-menu li a { border-color: var(--brand-gold, #c9a227) !important; color: #fff !important; }
.tree-menu li a i { color: var(--brand-gold-light, #f0d060) !important; }
.tree-menu li a.hover,
.tree-menu li a:hover { background-color: var(--brand-gold, #c9a227) !important; color: var(--brand-dark, #0d3d2e) !important; }
.tree-menu li a.hover i,
.tree-menu li a:hover i { color: var(--brand-dark, #0d3d2e) !important; }
.tree-menu li:before,
.tree-menu a.addBorderBefore:before { border-color: var(--brand-gold, #c9a227) !important; }
.tree-menu ul,
.tree-menu li { border-right-color: var(--brand-gold, #c9a227) !important; }
/* عناصر الأيقونة/السهم الجديدة تبقى مخفية في القوائم متعددة المستويات */
.tree-menu.tree-multilevel .tree-item-icon,
.tree-menu.tree-multilevel .tree-item-chevron { display: none !important; }

/* ── القسم أحادي المستوى (بلا تفرعات إضافية): صف بحدود وأيقونة مخصصة لكل قسم ── */
.tree-menu.tree-flat li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    top: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(201,162,39,0.45) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.03);
}
.tree-menu.tree-flat ul { padding: 0 !important; margin: 0 !important; border-right: none !important; }
.tree-menu.tree-flat li { list-style: none; margin-bottom: 8px !important; padding-bottom: 0 !important; }
.tree-menu.tree-flat li:last-child { margin-bottom: 0 !important; }
.tree-menu.tree-flat li:before,
.tree-menu.tree-flat a.addBorderBefore:before { display: none !important; }
.tree-menu.tree-flat li a.hover .tree-item-icon,
.tree-menu.tree-flat li a:hover .tree-item-icon { background: rgba(13,61,46,0.15); border-color: rgba(13,61,46,0.35); }
.tree-menu.tree-flat li a.hover .tree-item-chevron,
.tree-menu.tree-flat li a:hover .tree-item-chevron { color: var(--brand-dark, #0d3d2e) !important; }

.tree-item-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(201,162,39,0.15);
    border: 1px solid rgba(201,162,39,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-gold-light, #f0d060);
    font-size: 13px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.tree-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.tree-item-label { font-size: 13.5px; font-family: "Droid Arabic Kufi"; line-height: 1.5; }
.tree-item-chevron { flex-shrink: 0; color: var(--brand-gold, #c9a227); font-size: 12px; transition: color 0.2s ease; }

.tree-menu-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.tree-orn-line-sm { width: 30px; height: 1px; background: var(--brand-gold, #c9a227); opacity: 0.4; }
.tree-orn-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-gold, #c9a227); flex-shrink: 0; }
.tree-orn-svg { width: 14px; height: 14px; color: var(--brand-gold, #c9a227); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   INFOGRAPHIC GATEWAY (portal-style subcategory cards)
   ══════════════════════════════════════════════════════════════ */

/* faithful port of the bdt-ep-image-accordion widget: all items are structurally
   identical <a> panes in one flex row, all equal width at rest (5 per row).
   Hovering any item grows it and shrinks its row-mates, matching the
   widget's mouseover-driven accordion behaviour. */
.ifg-gateway {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 30px;
}

.ifg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 19%;
    min-width: 130px;
    height: 460px;
    background: #e9ebee;
    text-decoration: none !important;
    overflow: hidden;
    border-radius: 6px;
    transition: flex-grow 0.4s ease, flex-basis 0.4s ease;
}
/* on hover anywhere in the row, shrink everyone slightly, then grow only the hovered pane */
.ifg-gateway:hover .ifg-card { flex: 0.8 1 14%; }
.ifg-gateway:hover .ifg-card:hover { flex: 2.4 1 34%; }

.ifg-card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-color: #e9ebee;
    transition: transform 0.4s ease;
}
.ifg-card:hover .ifg-card-bg { transform: scale(1.05); }
.ifg-card-bg-empty {
    display: flex; align-items: center; justify-content: center;
    color: var(--brand-gold, #c9a227);
    font-size: 40px;
}

.ifg-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(13,61,46,0) 0%, rgba(13,61,46,0.85) 70%);
}
.ifg-card-title {
    color: #fff;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 16px;
    line-height: 1.45;
}
.ifg-card-btn {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.55);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ifg-card:hover .ifg-card-btn { background: var(--brand-gold, #c9a227); border-color: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e); }

@media (max-width: 900px) {
    .ifg-card { flex: 1 1 44%; height: 340px; }
    .ifg-gateway:hover .ifg-card, .ifg-gateway:hover .ifg-card:hover { flex: 1 1 44%; }
    .ifg-card-title { font-size: 14px; }
}
@media (max-width: 600px) {
    .ifg-card { flex: 1 1 100%; height: 260px; }
    .ifg-gateway:hover .ifg-card, .ifg-gateway:hover .ifg-card:hover { flex: 1 1 100%; }
    .ifg-card-title { font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   MAGAZINE GRID (نشرة الصادقين issue cards)
   ══════════════════════════════════════════════════════════════ */

.mz-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 0 30px; }

.mz-card {
    position: relative;
    width: 205px;
    border-radius: 20px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
}
.mz-card:hover { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(13,61,46,0.14); }

.mz-cover { width: 100%; aspect-ratio: 715 / 1024; padding: 10px; background: #e9ebee; box-sizing: border-box; }
.mz-cover img { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; display: block; }
.mz-cover-placeholder {
    width: 100%; height: 100%;
    border-radius: 14px;
    background: #eef6f0;
    color: var(--brand-gold, #c9a227);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}

.mz-title {
    position: relative;
    padding: 12px 10px;
    text-align: center;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--brand-dark, #0d3d2e) !important;
    background: #fff;
    transition: color 0.25s ease;
}
.mz-title::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 2px;
    background: linear-gradient(to left, var(--brand-gold, #c9a227), var(--brand-gold-light, #f0d060));
}
.mz-card:hover .mz-title { color: var(--brand-gold, #c9a227) !important; }

@media (max-width: 640px) {
    .mz-grid { gap: 10px; justify-content: center; }
    .mz-card { width: 44%; }
}

/* ══════════════════════════════════════════════════════════════
   ISTIFTA Q&A LIST + CONTACT CARD (leaf category page)
   ══════════════════════════════════════════════════════════════ */

.ist-qa-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 24px 20px;
    margin: 10px 0 30px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}

.ist-qa-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ist-qa-head-line {
    flex: 1;
    height: 1px;
    position: relative;
    background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
}
.ist-qa-head-line:last-child { background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227)); }
.ist-qa-head-line::before {
    content: '\25C6';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    color: var(--brand-gold, #c9a227);
    font-size: 10px;
}
.ist-qa-head-line:first-child::before { left: 0; }
.ist-qa-head-line:last-child::before { right: 0; }
.ist-qa-head-badge {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: #eef6f0;
    color: var(--brand-dark, #0d3d2e);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.ist-qa-head-title {
    flex-shrink: 0;
    margin: 0;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;
}

.ist-qa-list { display: flex; flex-direction: column; }
.ist-qa-item { border: 1px solid #eee; border-radius: 10px; margin-top: 5px; }
.ist-qa-item:last-child { border-bottom: 0; }

.ist-qa-btn.collapsible {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 6px;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    text-align: right;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 600;
    color: #2a2a2a !important;
    transition: background 0.2s ease;
}
.ist-qa-btn.collapsible.active,
.ist-qa-btn.collapsible:hover { background: #f6faf7; color: #2a2a2a !important; }

.ist-qa-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #eef6f0;
    color: var(--brand-dark, #0d3d2e);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: background 0.25s ease, color 0.25s ease;
}
.ist-qa-btn.active .ist-qa-icon { background: var(--brand-dark, #0d3d2e); color: #fff; }
.ist-qa-title { flex: 1; line-height: 1.5; }
.ist-qa-chevron { flex-shrink: 0; display: inline-flex; color: #b8b8b8; font-size: 13px; transition: transform 0.25s ease; }
.ist-qa-btn.active .ist-qa-chevron { transform: rotate(-90deg); color: var(--brand-gold, #c9a227); }

.ist-qa-item .content.ist-qa-body {
    padding: 0 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ist-qa-tools { margin-top: 20px; margin-bottom: 18px; }
#social_bookmarksnew {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 8px;
    height: auto !important;
    font-size: 14px !important;
    text-align: right !important;
    position: static !important;
}
#social_bookmarksnew span {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid #e2e2e2 !important;
    background: #fff !important;
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    cursor: default;
}
#social_bookmarksnew a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important; height: 36px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid #e2e2e2;
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
#social_bookmarksnew a:hover { border-color: var(--brand-gold, #c9a227); color: var(--brand-gold, #c9a227) !important; background: #fdf9ee !important; }
#social_bookmarksnew a.ist-social-sep { border-right: 1px solid #e2e2e2; margin-right: 14px !important; }

.ist-qa-ornament { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.ist-qa-ornament .ist-orn-line { width: 90px; height: 1px; background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227)); }
.ist-qa-ornament .ist-orn-line:last-child { background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227)); }
.ist-qa-ornament .ist-orn-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-gold, #c9a227); }

.ist-orn-svg { width: 15px; height: 15px; flex-shrink: 0; }

.ist-qa-body-card {
    background: #fff;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 26px;
}
.ist-qa-body-text { color: #333; font-size: 14.5px; line-height: 2; }
.ist-qa-body-text p { margin: 0 0 14px; }
.ist-qa-body-text p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .ist-qa-head-title { font-size: 17px; }
    .ist-qa-item .content.ist-qa-body { padding: 0 12px; }
    .ist-qa-body-card { padding: 16px; }
    .ist-qa-ornament .ist-orn-line { width: 40px; }
}

/* Contact card */
.ist-contact-card {
    position: relative;
    background: #fdfcf9;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 34px 30px 26px;
    margin: 10px 0 30px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}

.ist-contact-ornament { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 18px; }
.ist-orn-line { width: 90px; height: 1px; background: linear-gradient(to left, transparent, var(--brand-gold, #c9a227)); }
.ist-contact-ornament .ist-orn-line:last-child { background: linear-gradient(to right, transparent, var(--brand-gold, #c9a227)); }
.ist-orn-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-gold, #c9a227); }

.ist-contact-title {
    margin: 0 0 6px;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 28px;
}
.ist-contact-sub { margin: 0; color: #6a6a6a; font-size: 14.5px; }

.ist-contact-cols {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 32px;
}
.ist-contact-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 26px;
    border-left: 1px solid #ececec;
    flex: 1;
    min-width: 150px;
}
.ist-contact-c:last-child { border-left: 0; }
.ist-contact-c > i { color: var(--brand-gold, #c9a227); font-size: 26px; }
.ist-c-label { color: var(--brand-dark, #0d3d2e) !important; font-weight: 700; font-size: 15px; }
.ist-c-value {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #6a6a6a !important;
    font-size: 13.5px;
    text-align: center;
    direction: ltr;
}
.ist-c-value a { color: #6a6a6a !important; text-decoration: none !important; }
.ist-c-value a:hover { color: var(--brand-gold, #c9a227) !important; }
.ist-c-text { direction: rtl; line-height: 1.6; }

.ist-contact-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid #f1f1f1;
}
.ist-orn-line-sm { width: 70px; height: 1px; background: var(--brand-gold, #c9a227); opacity: 0.4; }
.ist-orn-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-gold, #c9a227); flex-shrink: 0; }
.ist-contact-hours { color: #5a5a5a !important; font-size: 13.5px; }
.ist-contact-hours i { color: var(--brand-gold, #c9a227); margin: 0 6px; }

@media (max-width: 768px) {
    .ist-contact-c { flex: 0 0 50%; max-width: 50%; border-left: 0; border-bottom: 1px solid #ececec; padding: 18px 10px; }
    .ist-contact-c:nth-child(2n) { border-left: 1px solid #ececec; }
    .ist-contact-c:nth-last-child(-n+2) { border-bottom: 0; }
    .ist-orn-line, .ist-orn-line-sm { width: 44px; }
    .ist-contact-footer { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .ist-contact-c { flex: 0 0 100%; max-width: 100%; border-left: 0 !important; }
    .ist-contact-c:nth-last-child(-n+2) { border-bottom: 1px solid #ececec; }
    .ist-contact-c:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */

.ftr-wrapper {
    position: relative;
    background-color: var(--brand-dark, #0d3d2e);
    background-image: url('../img/islamic-pattern.svg');
    background-size: 160px 160px;
    background-position: top right;
    background-repeat: repeat;
    padding: 55px 0 0;
}
.ftr-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(to left, transparent 0%, var(--brand-gold, #c9a227) 25%, var(--brand-gold-light, #f0d060) 50%, var(--brand-gold, #c9a227) 75%, transparent 100%);
}

.ftr-ornament {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--brand-gold, #c9a227);
    font-size: 22px;
    margin-bottom: 30px;
}

.ftr-main {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 24px 35px;
}

.ftr-col { flex: 1 1 0; min-width: 200px; }
.ftr-col-brand { flex: 1.4 1 0; min-width: 240px; }

.ftr-logo img { max-height: 80px; width: auto; }
.ftr-about {
    color: rgba(255,255,255,0.75);
    font-size: 13.5px;
    line-height: 1.9;
    margin: 16px 0 20px;
    font-family: "Droid Arabic Kufi";
}

.ftr-social ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
}
.ftr-social ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-gold, #c9a227);
    color: var(--brand-gold, #c9a227);
    font-size: 15px;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ftr-social ul li a:hover {
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e);
    transform: translateY(-2px);
}

.ftr-col-title {
    color: var(--brand-gold-light, #f0d060);
    font-size: 16px;
    font-weight: bold;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ftr-col-links ul { list-style: none; margin: 0; padding: 0; }
.ftr-col-links ul li { margin-bottom: 10px; }
.ftr-col-links ul li a {
    color: rgba(255,255,255,0.82);
    font-size: 13.5px;
    font-family: "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: color 0.2s, padding-right 0.2s;
    display: inline-block;
}
.ftr-col-links ul li a i { color: var(--brand-gold, #c9a227); margin-left: 4px; }
.ftr-col-links ul li a:hover { color: var(--brand-gold-light, #f0d060); padding-right: 4px; }

.ftr-apps-text {
    color: rgba(255,255,255,0.7);
    font-size: 12.5px;
    line-height: 1.8;
    margin: 0 0 16px;
    font-family: "Droid Arabic Kufi";
}
.ftr-apps-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ftr-app-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(201,162,39,0.35);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s;
}
.ftr-app-badge i { color: var(--brand-gold, #c9a227); font-size: 18px; }
.ftr-app-badge:hover { background: rgba(201,162,39,0.15); border-color: var(--brand-gold, #c9a227); }

.ftr-bottom {
    position: relative;
    z-index: 2;
    margin-top: 40px;
    background: #fdf3ec;
    background-image: url('../img/islamic-pattern.svg');
    background-size: 90px 90px;
    background-repeat: repeat;
}
.ftr-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 30px;
    padding: 16px 24px;
}
.ftr-bottom-item {
    color: var(--brand-dark, #0d3d2e);
    font-size: 13px;
    font-family: "Droid Arabic Kufi";
}
.ftr-bottom-item a { color: var(--brand-dark, #0d3d2e); text-decoration: none !important; }
.ftr-bottom-item i { color: var(--brand-gold, #c9a227); margin-left: 4px; }
.ftr-bottom-copy {
    color: #6b5d45;
    font-size: 12.5px;
    font-family: "Droid Arabic Kufi";
}
.ftr-bottom-emblem { flex-shrink: 0; }
.ftr-bottom-emblem img {
    height: 34px;
    width: auto;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .ftr-main { padding: 0 16px; gap: 26px; }
    .ftr-col { flex: 1 1 100%; }
    .ftr-bottom-inner { flex-direction: column; text-align: center; gap: 8px; }
}
div#home-section-publications {
    background: #faf7f5;
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY / NEWS LISTING PAGE
   ══════════════════════════════════════════════════════════════ */

.box_breadcrumb {
    background: #fdf3ec;
    border: 1px solid rgba(201,162,39,0.25);
    border-bottom: 1px solid rgba(201,162,39,0.25);
    border-radius: 10px;
    color: #6b5d45;
    font-size: 13px;
    padding: 12px 20px;
    margin: 16px 5px;
}
.box_breadcrumb a { color: #0d3d2e; font-weight: 600; text-decoration: none; }
.box_breadcrumb a:hover { color: #c9a227; }

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB — سلسلة أشرطة متصلة (مقتبس من https://www.imamali.net)
   ══════════════════════════════════════════════════════════════ */

.bc-crumbs {
    direction: rtl;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 16px 0 22px;
}
.bc-item {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    height: 28px;
    text-decoration: none !important;
    user-select: none;
    transition: color 0.2s ease;
}
.bc-cap {
    height: 100%;
    aspect-ratio: 489.01 / 766;
    display: block;
    flex-shrink: 0;
    fill: #fff;
    stroke: #e2e2e2;
    stroke-width: 30;
    transition: fill 0.2s ease, stroke 0.2s ease;
}
.bc-cap-lead { transform: rotate(180deg); margin-left: -1px; }
.bc-cap-trail { margin-right: -1px; }
.bc-item-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 9px;
    background: #fff;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    color: var(--brand-dark, #0d3d2e);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.bc-item:hover .bc-item-label { color: var(--brand-gold, #c9a227); border-color: rgba(201,162,39,0.45); }
a.bc-item:hover .bc-cap { stroke: rgba(201,162,39,0.45); }

.bc-item-active .bc-cap { fill: var(--brand-dark, #0d3d2e); stroke-width: 0; }
.bc-item-active .bc-item-label {
    background: var(--brand-dark, #0d3d2e);
    border-color: var(--brand-dark, #0d3d2e);
    color: #fff;
    cursor: default;
}

.bc-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin: 0 4px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e2e2;
    z-index: 1;
}
.bc-dot-active {
    background: var(--brand-dark, #0d3d2e);
    border-color: var(--brand-dark, #0d3d2e);
}
.bc-item:has(> .bc-item-label:empty) { display: none; }
.bc-dot:has(+ .bc-item > .bc-item-label:empty) { display: none; }

@media (max-width: 767px) {
    .bc-crumbs { margin: 12px 0 18px; }
    .bc-item { height: 24px; }
    .bc-item-label { padding: 0 5px; font-size: 10.5px; }
}

#homepage_boxestefta {
    height: auto;
    margin: 0 5px 25px;
    padding: 0;
    border: none;
}
.header-searchnew {
    display: flex;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(13,61,46,0.06);
}
.header-searchnew form {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 10px;
}
.header-searchnew form .col-xs-10,
.header-searchnew form .col-xs-2 {
    padding: 0;
    float: none;
    width: auto;
}
.header-searchnew form .col-xs-10 { flex: 1; }
.header-searchnew form .col-xs-2 { flex: 0 0 90px; }
.search-inputnew {
    border: 1px solid rgba(201,162,39,0.35) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    padding: 11px 16px !important;
    font-size: 14px;
    color: #0d3d2e;
    height: 46px;
}
.search-inputnew:focus { border-color: #c9a227 !important; outline: none; }
.search-buttonnew {
    background-color: #0d3d2e !important;
    background-image: none !important;
    border-radius: 10px !important;
    border: none !important;
    width: 100%;
    height: 46px;
    color: #f3e8c8 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    opacity: 1 !important;
    filter: none !important;
    transition: background-color 0.2s;
}
.search-buttonnew:hover { background-color: #114e42 !important; }

.page_title {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    color: #0d3d2e;
    padding-bottom: 12px;
    margin: 10px 5px 22px;
    border-bottom: 3px solid #c9a227;
}
.cat_image img {
    border-radius: 12px;
    margin-bottom: 16px;
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE PAGE — شريط المعلومات، إطار الصورة، شريط المشاركة
   ══════════════════════════════════════════════════════════════ */

.story_stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 5px 22px;
    text-align: center;
}
.art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.art-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid rgba(201,162,39,0.35);
    border-radius: 20px;
    color: #8a6d1e;
    font-size: 13px;
    font-weight: 600;
    font-family: "Droid Arabic Kufi";
    white-space: nowrap;
}
.art-meta-chip i {
    color: var(--brand-gold, #c9a227);
    font-size: 13px;
}
.art-meta-author {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 600;
}
.art-meta-author .story_author a { color: var(--brand-dark, #0d3d2e) !important; font-weight: 700; }

/* إطار الصورة الرئيسية */
.articleimg .image {
    position: relative;
    margin-bottom: 6px;
}
.articleimg .image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(13,61,46,0.16);
    display: block;
}
.image_caption {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #8a7d63;
    font-size: 13px;
    font-family: "Droid Arabic Kufi";
}

/* شريط أزرار المشاركة */
.aricle_share {
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    margin: 18px 0 24px;
}

.news-list {
    margin: 0 5px;
}
.news-row-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a7d63;
    font-size: 12px;
    margin-bottom: 6px;
}
.news-row-tag i { color: #c9a227; font-size: 11px; }
.news-row-more { color: #0d3d2e; font-weight: 700; text-decoration: none; }
.news-row-more:hover { color: #c9a227; }
.news-row-meta { justify-content: flex-end; border-top: none; padding-top: 0; }

.short1 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #fff;
    border: 1px solid rgba(201,162,39,0.15);
    border-radius: 14px;
    padding: 16px;
    margin: 0 5px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.short1:hover {
    box-shadow: 0 12px 28px rgba(13,61,46,0.1);
    transform: translateY(-2px);
    border-color: rgba(201,162,39,0.4);
}
.short1 > a {
    display: block;
}
.short1 .image {
    position: relative;
    flex: 0 0 220px;
    width: 220px;
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
}
.short1 .image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.short1 .play_large {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(13,61,46,0.65);
    border: 2px solid #f3e8c8;
}
.short1 .play_large::after {
    content: "\f04b";
    font-family: FontAwesome;
    color: #f3e8c8;
    font-size: 15px;
    position: absolute;
    top: 50%; left: 54%;
    transform: translate(-50%, -50%);
}
.short1 .text { flex: 1; min-width: 0; }

/* إطار خفيف حول كل خبر ضمن قوائم "أخبار ونشاطات" (subcategory_headlinesmz*.tpl) */
.shortmz {
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fff;
}
.shortmz:last-child { margin-bottom: 0; }

.article_title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 8px;
}
/* شارة الأيقونة قبل العنوان */
.article_title > i {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(201,162,39,0.15);
    border: 1px solid rgba(201,162,39,0.4);
    color: var(--brand-gold, #c9a227);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.article_title a { color: #0d3d2e; text-decoration: none; }
.article_title a:hover { color: #c9a227; }
.article_summary {
    color: #5c5347;
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 12px;
}
.media-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #8a7d63;
    border-top: 1px dashed rgba(201,162,39,0.35);
    padding-top: 10px;
}
.media-meta i { color: #c9a227; margin-left: 5px; }
.media-meta a { color: #0d3d2e; font-weight: 700; text-decoration: none; }
.media-meta a:hover { color: #c9a227; }

@media (max-width: 640px) {
    .short1 { flex-direction: column; align-items: stretch; }
    .short1 > a { width: 100%; }
    .short1 .image { width: 100%; flex-basis: auto; height: 180px; }
    .header-searchnew form { flex-direction: row; }
    .news-row-meta { justify-content: flex-start; }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 5px 30px;
}
.pagination a,
.pagination .page_active,
.pagination span:not(.page_active) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(201,162,39,0.3);
    color: #0d3d2e;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    background: #fff;
    transition: all 0.2s ease;
}
.pagination a:hover {
    background: #0d3d2e;
    border-color: #0d3d2e;
    color: #f3e8c8;
}
.pagination .page_active {
    background: #c9a227;
    border-color: #c9a227;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SUBCATEGORY CARDS — شبكة بطاقات الأقسام الفرعية (مكتبة الكتب وغيرها)
   ══════════════════════════════════════════════════════════════ */

.sc-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 10px 0 30px;
}

.sc-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(211,211,211,0.8);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 0 6px -3px rgba(0,0,0,0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(13,61,46,0.14);
    border-color: rgba(201,162,39,0.4);
}
.sc-card:hover .sc-card-title { color: var(--brand-gold, #c9a227); }

.sc-card-img {
    position: relative;
    width: 100%;
    height: 230px;
    padding: 9px;
    background: #e2e3e4;
}
.sc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    transition: transform 0.4s ease;
}
.sc-card:hover .sc-card-img img { transform: scale(1.04); }
.sc-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    border-radius: 14px;
    color: var(--brand-gold, #c9a227);
    background: linear-gradient(160deg, #f7f2e3, #eee3c4);
}

.sc-card-body {
    position: relative;
    padding: 6px 10px 10px;
    background: #fff;
}
.sc-card-body::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 2px;
    background: linear-gradient(to left, var(--brand-gold-light, #f0d060), var(--brand-gold, #c9a227));
}

.sc-card-title {
    display: block;
    color: var(--brand-dark, #0d3d2e);
    font-size: 14.5px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    line-height: 1.7;
    text-align: center;
    padding: 6px 4px 8px;
    transition: color 0.25s ease;
}

.sc-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(226,227,228,0.9);
    border-radius: 20px;
    font-size: 11.5px;
    color: #6d7075;
}
.sc-card-meta-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sc-card-meta-item i { color: var(--brand-gold, #c9a227); font-size: 12.5px; }

@media (max-width: 1024px) and (min-width: 768px) {
    .sc-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .sc-cards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
    .sc-card { border-radius: 14px; }
    .sc-card-img { height: 165px; padding: 6px; }
    .sc-card-title { font-size: 12.5px; padding: 5px 4px 6px; }
    .sc-card-meta { font-size: 10px; padding: 5px 8px; }
}

/* ══════════════════════════════════════════════════════════════
   BOOK GRID — قائمة الكتب داخل قسم فرعي (لا يحتوي أقسام فرعية أخرى)
   ══════════════════════════════════════════════════════════════ */

.bk-page { padding: 18px 0 40px; }

.bk-headbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0ead9;
}
.bk-page-title {
    position: relative;
    margin: 0;
    padding-right: 16px;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
}
.bk-page-title::before {
    content: '';
    position: absolute;
    right: 0; top: 4px; bottom: 4px;
    width: 5px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand-gold, #c9a227), var(--brand-gold-light, #f0d060));
}
.bk-search {
    display: flex;
    align-items: center;
    width: 320px;
    max-width: 100%;
    height: 42px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(13,61,46,0.05);
}
.bk-search-input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0 16px;
    font-size: 13px;
    color: #333;
    text-align: right;
}
.bk-search-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-dark, #0d3d2e);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}
.bk-search-btn:hover { background: var(--brand-gold, #c9a227); }

.bk-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
}
.bk-pill {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    color: var(--brand-dark, #0d3d2e);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.bk-pill:hover { border-color: rgba(201,162,39,0.5); color: var(--brand-gold, #c9a227); }
.bk-pill-all, .bk-pill-active {
    background: var(--brand-dark, #0d3d2e);
    border-color: var(--brand-dark, #0d3d2e);
    color: #fff;
    cursor: default;
}
a.bk-pill-all:hover { background: var(--brand-gold, #c9a227); border-color: var(--brand-gold, #c9a227); color: #fff; }

.bk-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}
.bk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f4f6f4;
    border-radius: 20px;
    padding: 18px 14px 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bk-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(13,61,46,0.12); }

.bk-cover {
    position: relative;
    width: 100%;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.bk-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(13,61,46,0.22));
    transition: transform 0.3s ease;
}
.bk-card:hover .bk-cover img { transform: translateY(-3px) scale(1.03); }
.bk-cover-placeholder {
    display: none;
    width: 118px;
    height: 150px;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--brand-gold, #c9a227);
    background: linear-gradient(160deg, #f7f2e3, #eee3c4);
    border-radius: 10px;
    box-shadow: 0 10px 14px rgba(13,61,46,0.18);
}
.bk-cover-broken .bk-cover-placeholder { display: flex; }

.bk-card-title {
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.5;
    min-height: 22px;
    margin-bottom: 6px;
}
.bk-card-reads {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #7a7a7a;
    font-size: 11.5px;
    margin-bottom: 14px;
}
.bk-card-reads i { color: var(--brand-gold, #c9a227); font-size: 12px; }

.bk-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
.bk-btn-read {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border-radius: 999px;
    background: var(--brand-dark, #0d3d2e);
    color: #fff !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s ease;
}
.bk-btn-read:hover { background: var(--brand-gold, #c9a227); }
.bk-btn-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    color: var(--brand-dark, #0d3d2e);
    font-size: 13px;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.bk-btn-icon:hover { border-color: rgba(201,162,39,0.5); color: var(--brand-gold, #c9a227); }

.bk-qr-pop {
    display: none;
    position: absolute;
    bottom: 62px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(13,61,46,0.2);
    z-index: 5;
}
.bk-qr-pop.bk-qr-pop-open { display: block; }

.bk-empty {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

@media (max-width: 767px) {
    .bk-page-title { font-size: 20px; }
    .bk-search { width: 100%; }
    .bk-cards-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .bk-cover { height: 130px; }
    .bk-card { padding: 14px 10px 12px; border-radius: 16px; }
    .bk-btn-read { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════
   BOOK ARTICLE — صفحة الكتاب المفردة (نموذج مقال مخصص للكتب)
   ══════════════════════════════════════════════════════════════ */

.bka-page { padding: 20px 0 50px; text-align: right; }

.bka-hero {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0ead9;
}
.bka-cover {
    position: relative;
    flex-shrink: 0;
    width: 260px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6f0;
    border-radius: 20px;
    padding: 24px;
}
.bka-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(13,61,46,0.25));
}
.bka-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 180px;
    font-size: 46px;
    color: var(--brand-gold, #c9a227);
    background: linear-gradient(160deg, #f7f2e3, #eee3c4);
    border-radius: 10px;
    box-shadow: 0 10px 16px rgba(13,61,46,0.18);
}

.bka-info { flex: 1; min-width: 0; position: relative; }
.bka-title {
    margin: 0 0 8px;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 30px;
    line-height: 1.4;
}
.bka-subtitle { color: #555; font-size: 15px; margin-bottom: 8px; }

.bka-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.bka-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    font-size: 12.5px;
    color: #6a6a6a;
}
.bka-stat i { color: var(--brand-gold, #c9a227); font-size: 12px; }

.bka-actions { display: flex; flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.bka-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    color: #fff !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bka-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.bka-btn-read { background: var(--brand-dark, #0d3d2e); }
.bka-btn-word { background: #2f6fd1; }
.bka-btn-pdf { background: #d5352f; }
.bka-btn-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    color: var(--brand-dark, #0d3d2e);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.bka-btn-icon:hover { border-color: rgba(201,162,39,0.5); color: var(--brand-gold, #c9a227); }
/* أيقونة QR/المشاركة تبدو صغيرة داخل الدائرة — نكبّرها؛ التوسيط يبقى
   بالاعتماد على flex الخاص بـ .bka-btn-icon نفسه */
.bka-btn-icon i { font-size: 20px; line-height: 1; }

.bka-qr-pop, .bka-share-pop {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 10px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(13,61,46,0.2);
    z-index: 6;
}
.bka-qr-pop { left: 0; }
.bka-share-pop { left: 0; padding: 14px 16px; }
.bka-qr-pop.bka-pop-open, .bka-share-pop.bka-pop-open { display: block; }
.bka-share-pop #box_article_tools .box_title_holder { display: none; }

.bka-source {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    min-width: 220px;
    padding: 0 18px;
    background: #eef6f0;
    border: 1px solid #dcece1;
    border-radius: 999px;
    color: var(--brand-dark, #0d3d2e);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.bka-source:hover { border-color: rgba(201,162,39,0.5); color: var(--brand-gold, #c9a227); }
.bka-source i { color: var(--brand-gold, #c9a227); font-size: 12px; }

.bka-section { margin-bottom: 36px; }
.bka-section-title {
    position: relative;
    margin: 0 0 18px;
    padding-right: 14px;
    color: var(--brand-dark, #0d3d2e);
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    font-weight: 700;
    font-size: 20px;
}
.bka-section-title::before {
    content: '';
    position: absolute;
    right: 0; top: 3px; bottom: 3px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--brand-gold, #c9a227), var(--brand-gold-light, #f0d060));
}
.bka-body {
    color: #333;
    font-size: 15.5px;
    line-height: 2;
}
.bka-body img { max-width: 100%; height: auto; }

.bka-related-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}
.bka-related-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f4f6f4;
    border-radius: 16px;
    padding: 14px 10px;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bka-related-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(13,61,46,0.12); }
.bka-related-cover {
    width: 100%;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.bka-related-cover img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(13,61,46,0.2));
}
.bka-related-cover .bka-cover-placeholder { width: 80px; height: 100px; font-size: 26px; }
.bka-related-title {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .bka-hero { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .bka-cover { width: 190px; height: 220px; }
    .bka-title { font-size: 22px; }
    .bka-stats, .bka-actions { justify-content: center; }
    .bka-qr-pop, .bka-share-pop { left: 50%; transform: translateX(-50%); }
    .bka-section-title { text-align: center; padding-right: 0; }
    .bka-section-title::before { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SUBCATEGORY HEADLINES 4 — بطاقات "تصفح الأقسام" (فرعية بلا صور)
   ══════════════════════════════════════════════════════════════ */

.sch4-row { margin: 0 -7px; }
.sch4-row > .col-xs-12 { padding: 0 7px; margin-bottom: 18px; }
/* عند وجود عمود "تصفح الأقسام" (tree)، تُلَفّ البطاقات بعمود داخلي مستقل
   (col-10) له صفّه الخاص (row متداخل) حتى لا يعتمد التفاف البطاقات على
   ارتفاع القائمة الجانبية — القاعدة أعلاه (selector مباشر >) لا تطال
   البطاقات في هذه الحالة لأنها لم تعد أبناء مباشرين لـ .sch4-row */
.sch4-row .row > .col-xs-12 { padding: 0 7px; margin-bottom: 18px; }
/* الصفّ المتداخل نفسه (.row الذي يضمّ البطاقات) كان يستخدم هامش بوت ستراب
   الافتراضي -15px بينما بقية النظام هنا يعتمد اصطلاح -7px/+7px، فينتج عن ذلك
   فراغ غير متساوٍ بين آخر بطاقة وعمود القائمة (~6px) مقارنة بالفراغ بين
   البطاقات نفسها (14px). نوحّد الهامش هنا مع باقي النظام فيتساوى التباعد
   تلقائياً على كل المقاسات (هاتف وحاسوب) دون أي استثناء لعمود القائمة */
.sch4-row .row { margin: 0 -7px; }

.sch4-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(13,61,46,0.08);
    border: 1px solid rgba(13,61,46,0.06);
}

.sch4-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--brand-dark, #0d3d2e);
    text-decoration: none !important;
}
.sch4-header-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(201,162,39,0.18);
    border: 1px solid rgba(201,162,39,0.55);
    color: var(--brand-gold, #c9a227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.sch4-header-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* إبطال تنسيق main_title القديم (اللون التركوازي) لصالح تصميم البطاقة الجديد */
.sch4-header-title.main_title {
    flex: 1;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
}

.sch4-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 6px 18px 16px;
}
/* بطاقة المقال الأول المصوّرة (subcategory_headlines.tpl فقط) */
.sch4-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(13,61,46,0.15);
    text-decoration: none !important;
}
.sch4-feature-thumb {
    flex-shrink: 0;
    width: 100%;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    background: #e9ebee;
}
.sch4-feature-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.sch4-feature:hover .sch4-feature-thumb img { transform: scale(1.05); }
.sch4-feature-title {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.6;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sch4-feature:hover .sch4-feature-title { color: #8a6d1e; }
@media (max-width: 767px) {
    .sch4-feature-thumb { height: 130px; }
}
.sch4-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sch4-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(13,61,46,0.12);
}
.sch4-list li:last-child { border-bottom: none; }
.sch4-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
}
.sch4-list li a.short_url {
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 13.5px;
    font-family: "Droid Arabic Kufi";
    line-height: 1.7;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.sch4-list li a.short_url:hover { color: var(--brand-gold, #8a6d1e) !important; }

.sch4-archive.mornewshomblok2 {
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    margin-top: 12px;
    padding: 6px 18px;
    background: #fff;
    border: 1.4px solid rgba(201,162,39,0.5);
    border-radius: 20px;
    color: #8a6d1e !important;
    font-size: 12.5px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sch4-archive.mornewshomblok2:hover {
    background: var(--brand-gold, #c9a227);
    border-color: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e) !important;
}
.sch4-archive i { font-size: 11px; }

@media (max-width: 767px) {
    .sch4-header-title.main_title { font-size: 14.5px; }
    .sch4-list li a.short_url { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   MZ TITLE PILL — عنوان صفحة/عدد (box/subcategory_headlinesmz*.tpl)
   شريط ذهبي زخرفي + شارة على شكل شريط بأطراف مدببة (نفس SVG المستخدم في hs-btn/bc-item)
   ══════════════════════════════════════════════════════════════ */

.mz-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}
.mz-title-line {
    flex: 1 1 0;
    min-width: 20px;
    height: 1px;
    background-image: linear-gradient(to left, transparent, var(--brand-gold, #c9a227));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.mz-title-row .mz-title-line:last-of-type {
    background-image: linear-gradient(to right, transparent, var(--brand-gold, #c9a227));
}
.mz-title-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
}
.mz-title-pill {
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    flex-shrink: 0;
    text-decoration: none !important;
}
.mz-title-cap {
    height: 100%;
    aspect-ratio: 489.01 / 766;
    display: block;
    flex-shrink: 0;
    fill: var(--brand-dark, #0d3d2e);
}
.mz-title-cap-lead { transform: rotate(180deg); margin-left: -1px; }
.mz-title-cap-trail { margin-right: -1px; }
.mz-title-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 22px;
    background: var(--brand-dark, #0d3d2e);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    white-space: nowrap;
}
@media (max-width: 480px) {
    .mz-title-line { display: none; }
    .mz-title-label { padding: 0 16px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   VIDEO HEADLINES PLAYER (box/plugin_video_headlines.tpl)
   ══════════════════════════════════════════════════════════════ */

.box_video {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(13,61,46,0.08);
    padding: 18px;
    margin: 0 0 20px;
}
.box_video .cat_title {
    color: var(--brand-dark, #0d3d2e);
    font-size: 19px;
    font-weight: 700;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    margin-bottom: 14px;
}
.headline_video_player {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: var(--brand-dark, #0d3d2e);
    margin-bottom: 16px;
}
#video_headlines_title {
    display: none;
}
.vp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.video_play { text-decoration: none !important; }
.video_headlines_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 13.5px;
    font-weight: 600;
    font-family: "Droid Arabic Kufi";
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(13,61,46,0.05);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.video_headlines_item:hover { background: #fdf3d8; border-color: rgba(201,162,39,0.5); transform: none; }
.vp-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-dark, #0d3d2e);
    color: var(--brand-gold, #c9a227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vp-title { flex: 1; }
.video_play.vp-active .video_headlines_item {
    background: var(--brand-dark, #0d3d2e);
    border-color: var(--brand-dark, #0d3d2e);
    color: #fff !important;
}
.video_play.vp-active .vp-icon { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e); }

@media (max-width: 480px) {
    .vp-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SOUND CATEGORY CARDS (box/subcategory_headlines3.tpl) — بطاقات
   بمحراب/قوس إسلامي، صورة الشيخ، وزر تشغيل ذهبي
   ══════════════════════════════════════════════════════════════ */

.snd-row { margin: 0 -8px; }
.snd-row > div { padding: 0 8px; margin-bottom: 22px; }
/* عند وجود عمود "تصفح الأقسام" (tree)، تُلَفّ البطاقات بعمود داخلي مستقل
   له صفّه الخاص (row متداخل) — القاعدة أعلاه لا تطال البطاقات حينها لأنها
   لم تعد أبناء مباشرين لـ .snd-row */
.snd-row .row > div { padding: 0 8px; margin-bottom: 22px; }

.sound_cat {
    display: block;
    background: #fff;
    border: 1px solid rgba(201,162,39,0.3);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(13,61,46,0.08);
    text-decoration: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sound_cat:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(13,61,46,0.18); }

.snd-arch {
    position: relative;
    aspect-ratio: 4 / 3.2;
    overflow: hidden;
    background: linear-gradient(160deg, #0f4a3a 0%, #0d3d2e 60%, #0a2e22 100%);
}
.snd-arch img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
/* شريط سفلي: أيقونة سماعة + موجة صوتية، فوق تظليل متدرّج */
.snd-audio-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(to top, rgba(8,38,29,0.95) 0%, rgba(8,38,29,0.65) 55%, transparent 100%);
}
.snd-audio-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    border: 2px solid var(--brand-gold, #c9a227);
    color: var(--brand-gold, #c9a227);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.25s ease, color 0.25s ease;
}
.snd-wave {
    flex: 0 1 auto;
    width: 100px;
    max-width: calc(100% - 44px);
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70'%3E%3Cg fill='%23f0d060'%3E%3Crect x='0' y='28' width='5' height='14' rx='2'/%3E%3Crect x='10' y='18' width='5' height='34' rx='2'/%3E%3Crect x='20' y='8' width='5' height='54' rx='2'/%3E%3Crect x='30' y='22' width='5' height='26' rx='2'/%3E%3Crect x='40' y='14' width='5' height='42' rx='2'/%3E%3Crect x='50' y='24' width='5' height='22' rx='2'/%3E%3Crect x='60' y='6' width='5' height='58' rx='2'/%3E%3Crect x='70' y='20' width='5' height='30' rx='2'/%3E%3Crect x='80' y='12' width='5' height='46' rx='2'/%3E%3Crect x='90' y='26' width='5' height='18' rx='2'/%3E%3Crect x='100' y='16' width='5' height='38' rx='2'/%3E%3Crect x='110' y='24' width='5' height='22' rx='2'/%3E%3Crect x='120' y='10' width='5' height='50' rx='2'/%3E%3Crect x='130' y='22' width='5' height='26' rx='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat right center / contain;
    opacity: 0.9;
}
.sound_cat:hover .snd-audio-icon { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e); }

.snd-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 16px 10px 18px;
}
.snd-title-text {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 700;
    font-size: 15px;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
    line-height: 1.5;
}
.sound_cat:hover .snd-title-text { color: #8a6d1e; }
.snd-title-deco { display: flex; align-items: center; gap: 6px; }
.snd-title-line { width: 20px; height: 1px; background: rgba(201,162,39,0.55); }
.snd-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--brand-gold, #c9a227);
    transform: rotate(45deg);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .snd-audio-icon { width: 28px; height: 28px; font-size: 11px; }
    .snd-title-text { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════
   SOUND ARTICLE LIST CARDS (category/sound.tpl) — بطاقات تحميل/استماع
   ══════════════════════════════════════════════════════════════ */

.snd-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(13,61,46,0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.snd-card:hover { box-shadow: 0 12px 28px rgba(13,61,46,0.16); transform: translateY(-2px); }

/* الشريط الجانبي (يسارًا بصريًا): زرا تحميل/استماع بعرض ارتفاع البطاقة كاملاً */
.snd-side {
    flex-shrink: 0;
    width: 92px;
    background: var(--brand-dark, #0d3d2e);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px 8px;
}
.snd-side-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600;
    transition: opacity 0.2s ease;
}
.snd-side-btn i { color: var(--brand-gold, #c9a227); font-size: 20px; }
.snd-side-btn:hover { opacity: 0.8; }

/* المحتوى الأوسط: العنوان + صف الوقت/التاريخ، ممركزان */
.snd-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 20px 16px;
}
.snd-title-link {
    display: block;
    color: var(--brand-dark, #0d3d2e) !important;
    font-weight: 700;
    font-size: 17px !important;
    line-height: 1.6;
    text-decoration: none !important;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
}
.snd-card:hover .snd-title-link { color: #8a6d1e !important; }

.snd-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-dark, #0d3d2e);
    font-size: 13px;
    font-weight: 600;
}
.snd-meta-row i { color: var(--brand-dark, #0d3d2e); margin: 0 4px; }
.snd-meta-sep { color: var(--brand-gold, #c9a227); font-weight: 400; }

/* الجهة اليمنى: شارة الرقم على شكل ريبون + دائرة النوتة الموسيقية */
.snd-right {
    position: relative;
    flex-shrink: 0;
    width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.snd-idx {
    position: absolute;
    top: 0;
    right: 18px;
    min-width: 34px;
    background: var(--brand-dark, #0d3d2e);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    padding: 8px 8px 16px;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.snd-note-wrap { position: relative; }
.snd-note {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 2px solid var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 32px !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.snd-card:hover .snd-note { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e) !important; }

@media (max-width: 640px) {
    .snd-card { flex-wrap: wrap; }
    .snd-side { width: 100%; flex-direction: row; padding: 12px; order: 3; }
    .snd-side-btn { flex-direction: row; gap: 6px; }
    .snd-right { width: 100%; order: 1; padding-top: 14px; }
    .snd-idx { right: 14px; }
    .snd-content { order: 2; padding: 14px; }
}

/* ===================== AUDIO PERMALINK PLAYER (article.tpl, article.mp3) ===================== */
.snd-player {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-dark, #0d3d2e) 0%, var(--brand-dark2, #0b3326) 100%);
    border-radius: 22px;
    padding: 30px 34px 24px;
    margin: 18px 0 0;
    box-shadow: 0 16px 40px rgba(13,61,46,0.28);
}
.snd-player-top {
    display: flex;
    align-items: center;
    gap: 26px;
}
.snd-player-side {
    order: 3;
    flex: 0 0 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    border: 1px solid rgba(201,162,39,0.35);
    border-radius: 16px;
    padding: 18px 8px;
}
.snd-player-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.snd-player-action:hover { opacity: 0.8; transform: translateY(-2px); }
.snd-player-action-icon { font-size: 20px; color: var(--brand-gold, #c9a227); }
.snd-player-mid {
    order: 2;
    flex: 1;
    min-width: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.snd-player-orn { color: var(--brand-gold, #c9a227); width: 24px; height: 24px; opacity: 0.9; }
.snd-player-orn svg { width: 100%; height: 100%; }
.snd-player-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-gold-light, #f0d060);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.snd-player-kicker-line { width: 26px; height: 1px; background: rgba(201,162,39,0.5); display: inline-block; }
.snd-player-title {
    color: #fff !important;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.6;
    margin: 0;
    font-family: "Droid Arabic Kufi Bold", "Droid Arabic Kufi";
}
.snd-player-deco { display: flex; align-items: center; gap: 8px; }
.snd-player-deco-line { width: 40px; height: 1px; background: rgba(201,162,39,0.4); display: inline-block; }
.snd-player-deco-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-gold, #c9a227); display: inline-block; }
.snd-player-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.85);
    font-size: 13.5px;
    font-weight: 600;
}
.snd-player-meta i { color: var(--brand-gold, #c9a227); margin: 0 4px; }
.snd-player-meta-sep { color: var(--brand-gold, #c9a227); font-weight: 400; }
.snd-player-photo-wrap {
    order: 1;
    position: relative;
    flex: 0 0 220px;
    width: 220px;
    height: 220px;
    border-radius: 50% 50% 6px 6px / 60% 60% 6px 6px;
    overflow: hidden;
    border: 2px solid var(--brand-gold, #c9a227);
    background: radial-gradient(circle at 50% 40%, rgba(201,162,39,0.25), transparent 70%);
}
.snd-player-photo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.snd-player-wave {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    background-image: repeating-linear-gradient(90deg, var(--brand-gold, #c9a227) 0 3px, transparent 3px 9px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 78%);
}
.snd-player-controls {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    gap: 14px;
}
.snd-ctrl-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none !important;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.snd-ctrl-btn:hover { background: rgba(255,255,255,0.08); }
.snd-ctrl-step.is-disabled { opacity: 0.35; pointer-events: none; }
.snd-ctrl-play {
    width: 42px;
    height: 42px;
    background: var(--brand-gold, #c9a227);
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 16px;
}
.snd-ctrl-play:hover { background: var(--brand-gold-light, #f0d060); }
.snd-ctrl-time {
    flex: 0 0 auto;
    color: rgba(255,255,255,0.8);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.snd-ctrl-progress {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 20px;
    display: flex;
    align-items: center;
}
.snd-ctrl-progress-track {
    position: absolute;
    inset: 0;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
    overflow: hidden;
}
.snd-ctrl-progress-fill { height: 100%; width: 0%; background: var(--brand-gold, #c9a227); }
.snd-ctrl-seek {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.snd-ctrl-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    border: 2px solid #fff;
    margin-top: 0;
}
.snd-ctrl-seek::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    border: 2px solid #fff;
}
.snd-ctrl-seek::-moz-range-track { background: transparent; }
.snd-ctrl-volume {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.8);
}
.snd-ctrl-vol-range {
    width: 70px;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: rgba(255,255,255,0.25);
    border-radius: 3px;
    cursor: pointer;
}
.snd-ctrl-vol-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
}
.snd-ctrl-vol-range::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--brand-gold, #c9a227);
    border: none;
}

.snd-player-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid rgba(201,162,39,0.2);
    border-radius: 16px;
    padding: 14px 22px;
    margin: 14px 0 0;
    box-shadow: 0 6px 20px rgba(13,61,46,0.08);
}
.snd-foot-qr { display: flex; align-items: center; gap: 14px; }
.snd-foot-qr-img { flex: 0 0 auto; line-height: 0; }
.snd-foot-qr-img img { display: block; border-radius: 6px; }
.snd-foot-qr-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-dark, #0d3d2e);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
.snd-foot-qr-text i { font-size: 34px; color: var(--brand-gold, #c9a227); }
.snd-foot-nav { display: flex; align-items: center; gap: 12px; }
.snd-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--brand-gold, #c9a227);
    border-radius: 999px;
    color: var(--brand-dark, #0d3d2e) !important;
    font-size: 13.5px !important;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.snd-foot-btn:hover { background: var(--brand-gold, #c9a227); color: var(--brand-dark, #0d3d2e) !important; }
.snd-foot-btn.is-disabled { opacity: 0.4; pointer-events: none; }

@media (max-width: 767px) {
    .snd-player { padding: 22px 18px 18px; }
    .snd-player-top { flex-wrap: wrap; justify-content: center; }
    .snd-player-side { order: 3; flex-direction: row; width: 100%; }
    .snd-player-mid { order: 2; width: 100%; }
    .snd-player-photo-wrap { order: 1; }
    .snd-player-controls { flex-wrap: wrap; }
    .snd-ctrl-progress { order: 5; flex: 1 1 100%; }
    .snd-player-foot { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   عرض بعرض الشاشة الكامل لقسمَي "انفوجرافيك" و"معرض الصور" فقط
   (قالب category/gallery.tpl يضيف class="tq-full-bleed" على #container
   الخارجي؛ القائمة الجانبية والمحتوى يبقيان بنفس التخطيط الحالي، فقط
   يُلغى قيد max-width:1200px العام الموروث من #container في style.css)
   ══════════════════════════════════════════════════════════════ */
#container.tq-full-bleed {
    max-width: 100%;
    padding: 0 24px;
}
@media (max-width: 767px) {
    #container.tq-full-bleed { padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════════
   حشوة داخلية لـ #container العادي (بدون full-bleed): #container
   الأساسي في style.css بلا padding، فيَخرج صفّ Bootstrap (margin:-15px)
   عن حدوده ويُقصّ (overflow:hidden) نصّه من الطرفين — يظهر جليًا في
   صفحات الكتب (article/book_article.tpl) حيث النص يلامس حافة الشاشة
   مباشرة. لا نُعدّل #container نفسه لأن نفس المعرّف يُستخدم لعناصر
   أخرى غير مرتبطة (كـ .yaq-footer-bottom-inner)، فنضيف كلاسًا اختياريًا */
#container.tq-inset { padding: 0 15px; }

/* ══════════════════════════════════════════════════════════════
   صندوق البحث الذكي (AI Search) — نافذة منبثقة تظهر عند الضغط على
   أيقونة البحث في الهيدر
   ══════════════════════════════════════════════════════════════ */
.tq-ai-search-btn i { transition: transform 0.15s ease; }
.tq-ai-search-btn:hover i { transform: scale(1.15); }

.tq-ai-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 61, 46, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.tq-ai-search-overlay.tq-open {
    opacity: 1;
    visibility: visible;
}
.tq-ai-search-box {
    background: #fff;
    width: 92%;
    max-width: 640px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    overflow: hidden;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    direction: rtl;
}
.tq-ai-search-head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 6px 10px;
}
.tq-ai-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 17px;
    padding: 14px 10px;
    font-family: inherit;
    background: transparent;
}
.tq-ai-search-close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 6px 10px;
}
.tq-ai-search-close:hover { color: #c0392b; }
.tq-ai-search-results {
    overflow-y: auto;
    padding: 6px 0;
}
.tq-ai-search-item {
    display: block;
    padding: 12px 18px;
    text-decoration: none !important;
    border-bottom: 1px solid #f3f3f3;
}
.tq-ai-search-item:hover { background: #f8f6f1; }
.tq-ai-search-item-title {
    color: var(--brand-dark, #0d3d2e);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}
.tq-ai-search-item-summary {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tq-ai-search-loading, .tq-ai-search-empty {
    padding: 24px;
    text-align: center;
    color: #999;
    font-size: 14px;
}
.tq-ai-search-viewall {
    display: block;
    text-align: center;
    padding: 14px;
    font-weight: 700;
    font-size: 14px;
    color: var(--brand-dark, #0d3d2e);
    text-decoration: none !important;
    border-top: 1px solid #f0f0f0;
    background: #faf8f2;
}
.tq-ai-search-viewall:hover { color: var(--brand-gold, #c9a227); }