/* ============================================================
   أقسام المعاهد — التخطيط الأساسي
   ------------------------------------------------------------
   The institutes assemble their own home page from three
   sections. This file gives those sections a working default;
   each theme then restates whichever parts it wants different,
   and it loads after this one so it always wins.

   Institute never loads this file — it keeps its own home page.
   ============================================================ */

.inst-tiles,
.inst-values,
.inst-assoc { padding: 64px 0; }

.inst-values { background: #f6f8fa; }

/* --- البلاطات: العدد بيتحدد بعدد بنود $tiles الفعلي (تلاتة زائد
   أي بلاطة من site_extra_tiles())، مش رقم عمود ثابت زي قبل كده —
   عمود ثابت كان بيسيب فراغ فاضي أول ما العدد يختلف عن المفروض. */
.inst-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.inst-tiles-grid--4 { grid-template-columns: repeat(4, 1fr); }

.inst-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e3e8ee;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.inst-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20, 30, 45, .12); text-decoration: none; }

.inst-tile-icon { width: 56px; height: 56px; object-fit: contain; }

.inst-tile-label { font-size: 1.12rem; font-weight: 800; line-height: 1.3; }

.inst-tile-more {
    margin-top: auto;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--site-primary, #244298);
}

/* --- القيم --- */
.inst-values-head { max-width: 62ch; margin: 0 0 34px; }
.inst-values-head h2 { font-size: 2rem; font-weight: 800; margin: 0 0 12px; }
.inst-values-head p { color: #5a6a7c; margin: 0; }

.inst-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 40px;
}

.inst-values-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    line-height: 1.6;
}

.inst-values-list img { width: 44px; height: 44px; flex: 0 0 44px; }

.inst-values-foot { margin: 34px 0 0; color: #5a6a7c; }
.inst-values-foot a { color: var(--site-primary, #244298); font-weight: 700; }

/* --- الجمعيات --- */
.inst-assoc h2 { font-size: 1.9rem; font-weight: 800; margin: 0 0 14px; }
.inst-assoc p { color: #5a6a7c; max-width: 78ch; margin: 0 0 20px; }

/* شريط شعارات الجهات المانحة للاعتماد — رمادي وهي ساكنة، بيرجع
   لونها الطبيعي وقت المرور عليها، نفس أسلوب "trusted by" المعتاد. */
.inst-assoc-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}
.inst-assoc-logos li { flex: none; }
.inst-assoc-logos img {
    display: block;
    max-height: 46px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease;
}
.inst-assoc-logos a:hover img { filter: grayscale(0); opacity: 1; }

.inst-assoc-link {
    display: inline-block;
    padding: 12px 26px;
    background: var(--site-primary, #244298);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.inst-assoc-link:hover { background: var(--site-accent, #0096d4); color: #fff; text-decoration: none; }

@media (max-width: 991px) {
    .inst-tiles, .inst-values, .inst-assoc { padding: 40px 0; }
    .inst-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .inst-values-list { grid-template-columns: 1fr; }
    .inst-assoc-logos { gap: 20px; }
    .inst-assoc-logos img { max-height: 34px; max-width: 100px; }
    .inst-tile { padding: 20px; }
}

@media (max-width: 575px) {
    .inst-tiles-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   معالجة الصور
   ------------------------------------------------------------
   The city photographs and course images come from the shared
   database, so all eleven sites draw on the same files. New
   photography is not something a stylesheet can supply, but the
   treatment can differ: each institute states its own below, and
   the same photograph reads as a different site's.

   Institute loads none of this and its images are untouched.
   ============================================================ */

.widget-icon,
.common-banner-image,
.course-image {
    position: relative;
    overflow: hidden;
}

.widget-icon img,
.common-banner-image img,
.course-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.citymain-listing-wrap-box:hover .widget-icon img,
.courselisting:hover .course-image img { transform: scale(1.05); }

/* ============================================================
   بنر الصفحات الداخلية — أساس مشترك
   ------------------------------------------------------------
   Institute floats the image left at a fixed 210px with the text
   beside it, on all eighty-six inner pages. Floats cannot be
   rearranged, so the block becomes a flex container here and
   each institute states its own arrangement below.
   ============================================================ */

.common-banner-section-box {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 26px 0;
}

.common-banner-section-box .common-banner-image,
.common-banner-section-box .common-banner-text { float: none !important; }

.common-banner-section-box .common-banner-image {
    flex: 0 0 210px;
    width: 210px;
}

.common-banner-section-box .common-banner-text { flex: 1; min-width: 0; }

@media (max-width: 767px) {
    .common-banner-section-box { flex-direction: column; align-items: stretch; gap: 18px; }
    .common-banner-section-box .common-banner-image { flex-basis: auto; width: 100%; max-width: 260px; }
}

/* ============================================================
   قسما التصنيفات والدورات القادمة
   ------------------------------------------------------------
   Both draw on data the controller already loads and Institute's
   home page ignores. Other training sites lead with exactly
   this — a reader who does not know what to search for picks a
   subject, and a dated list is the most useful thing a training
   site can put on its front page.
   ============================================================ */

.inst-categories,
.inst-upcoming { padding: 64px 0; }

.inst-categories-head h2,
.inst-upcoming-head h2 { font-size: 2rem; font-weight: 800; margin: 0 0 26px; }

/* التيزر بقى برابط "عرض الكل" جنب العنوان — نفس صف .inst-upcoming-head
   بالظبط، مادام التصنيفات بقت محدودة العدد ومحتاجة تشاور على الباقي. */
.inst-categories-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.inst-categories-head a { font-weight: 700; color: var(--site-primary, #244298); white-space: nowrap; }

/* --- التصنيفات: شبكة أعمدة --- */
.inst-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.inst-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e3e8ee;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.inst-category:hover {
    text-decoration: none;
    border-color: var(--site-primary, #244298);
    background: #fbfcfe;
}

.inst-category-icon { width: 34px; height: 34px; flex: 0 0 34px; }

.inst-category-title { flex: 1; min-width: 0; }

.inst-category-go { color: var(--site-primary, #244298); font-size: 1.4rem; line-height: 1; }

[dir="rtl"] .inst-category-go { transform: scaleX(-1); }

/* --- الدورات القادمة: صفوف مؤرّخة --- */
.inst-upcoming-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.inst-upcoming-head a { font-weight: 700; color: var(--site-primary, #244298); white-space: nowrap; }

.inst-upcoming-list { list-style: none; margin: 0; padding: 0; }

.inst-upcoming-list li { border-bottom: 1px solid #e3e8ee; }
.inst-upcoming-list li:first-child { border-top: 1px solid #e3e8ee; }

.inst-upcoming-list a {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 4px;
    color: inherit;
    text-decoration: none;
}

.inst-upcoming-list a:hover { text-decoration: none; background: #f8fafc; }

/* بادج التاريخ: رقم اليوم كبير فوق اسم الشهر مختصر — لون كل معهد
   بيحدده لنفسه (افتراضي: لون العلامة). */
.inst-upcoming-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 54px;
    height: 54px;
    background: var(--site-primary, #244298);
    color: #fff;
    line-height: 1.1;
}
.inst-upcoming-day { font-size: 1.15rem; font-weight: 800; }
.inst-upcoming-month { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }

.inst-upcoming-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.inst-upcoming-title { font-weight: 700; line-height: 1.4; }

.inst-upcoming-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    font-size: .88rem;
    color: #5a6a7c;
}

.inst-upcoming-city { font-weight: 600; color: var(--site-primary, #244298); }

/* الصورة موجودة في الـmarkup دايمًا لو الدورة عندها صورة، لكن مخفية
   افتراضيًا — المعاملة القياسية (صف نصي) ما كانتش محتاجاها، ومعهد
   زي almawred بس بيقلبها لكارت-صورة عبر إظهارها. */
.inst-upcoming-thumb { display: none; }

/* نفس المبدأ: عناصر إضافية (بادج NEW، قائمة meta أغنى، زرار Book
   Now) موجودة في الـmarkup دايمًا لو البيانات موجودة، مخفية
   افتراضيًا — معهد زي almawred بيظهرها بدل المعاملة القياسية. */
.inst-upcoming-new,
.inst-upcoming-meta2,
.inst-upcoming-book,
.inst-upcoming-morewrap { display: none; }

@media (max-width: 991px) {
    .inst-categories, .inst-upcoming { padding: 40px 0; }
    .inst-categories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- بالأرقام: institute/home/numbers.php --- */
.inst-numbers { padding: 56px 0; background: var(--site-primary, #244298); color: #fff; }
.inst-numbers-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 26px; text-align: center; opacity: .92; }

.inst-numbers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    text-align: center;
}

.inst-numbers-value { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1.15; }
.inst-numbers-label { display: block; font-size: .82rem; opacity: .82; margin-top: 4px; }

@media (max-width: 991px) {
    .inst-numbers { padding: 36px 0; }
    .inst-numbers-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 14px; }
}
@media (max-width: 575px) {
    .inst-numbers-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   الدورات الرائجة + أبرز المدن — صف واحد بعمودين
   institute/home/trending_locations.php. عمود الدورات أعرض
   (كروت صورة داكنة، أسلوب مباشر من leoron.com)، عمود المدن أضيق
   (شبكة صور مدن حقيقية من CityModel).
   ============================================================ */
.inst-trend-wrap { padding: 64px 0; background: #fff; }

.inst-trend-grid-outer {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 44px;
    align-items: start;
}

.inst-trend-head h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 20px; }

.inst-trend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.inst-trend-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 160px;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
}

.inst-trend-card-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 20, 35, 0) 35%, rgba(8, 16, 28, .88) 100%);
}

.inst-trend-card-title {
    position: relative;
    padding: 14px;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.35;
}

.inst-trend-card:hover .inst-trend-card-title { text-decoration: underline; }

.inst-trend-more {
    display: inline-block;
    margin-top: 18px;
    font-weight: 700;
    color: var(--site-primary, #244298);
}

.inst-loc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.inst-loc-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 92px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    background: #eef1f5;
}

.inst-loc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inst-loc-name {
    position: relative;
    width: 100%;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(10, 20, 35, 0) 0%, rgba(8, 16, 28, .82) 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
}

/* بديل بشارة علم دائرية بدل صورة المبنى — لما site_city_flag_code()
   يرجّع كود حقيقي (gulf، almawred). الكارت نفسه بيبقى أبيض عادي،
   مش صورة خلفية. */
.inst-loc-card--flag {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 150px;
    padding: 22px 10px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
}
.inst-loc-flag {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    flex: none;
}
.inst-loc-flag .fi {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 0;
}
.inst-loc-card--flag .inst-loc-name {
    position: static;
    background: none;
    color: #1a1a1a;
    text-align: center;
    padding: 0;
    font-size: .82rem;
}

@media (max-width: 991px) {
    .inst-trend-wrap { padding: 40px 0; }
    .inst-trend-grid-outer { grid-template-columns: 1fr; gap: 32px; }
    .inst-trend-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .inst-trend-grid { grid-template-columns: 1fr; }
    .inst-loc-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   المدن المتاحة — institute/home/cities.php.
   نفس كروت .inst-loc-card (مبنية أصلاً لعمود ضيق جنب الدورات
   الرائجة)، بس هنا مستقلة وبعدد أعمدة أكبر لعرض القسم الكامل.
   ============================================================ */
.inst-cities { padding: 56px 0; background: #f6f8fa; }
.inst-cities-head { text-align: center; margin: 0 0 26px; }
.inst-cities-head h2 { font-size: 1.7rem; font-weight: 800; margin: 0; }

.inst-cities-grid { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 991px) {
    .inst-cities { padding: 36px 0; }
    .inst-cities-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    .inst-cities-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Value Proposition + كارت ثقة عام — صف واحد بعمودين
   institute/home/values_testimonial.php.
   ============================================================ */
.inst-values-trust-wrap { padding: 64px 0; background: #f6f8fa; }

.inst-values-trust-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 44px;
    align-items: start;
}

.inst-trust-card {
    background: #fff;
    border: 1px solid #e3e8ee;
    padding: 30px 26px;
    text-align: center;
}

.inst-trust-stars { display: block; color: #f0ad00; font-size: 1.1rem; letter-spacing: 3px; margin: 0 0 16px; }

.inst-trust-note { font-size: 1.02rem; line-height: 1.7; color: #33414f; margin: 0 0 18px; }

.inst-trust-link { font-weight: 700; color: var(--site-primary, #244298); }

@media (max-width: 991px) {
    .inst-values-trust-wrap { padding: 40px 0; }
    .inst-values-trust-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Request a Call Back — institute/home/callback.php.
   ============================================================ */
.inst-callback { padding: 64px 0; }

.inst-callback-box {
    background: var(--site-primary, #244298);
    color: #fff;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 36px;
    align-items: center;
}

.inst-callback-copy h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 10px; }
.inst-callback-copy p { margin: 0; opacity: .88; }

.inst-callback-message:empty { display: none; }
.inst-callback-message { margin: 0 0 12px; }

.inst-callback-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0 0 16px;
}

.inst-callback-fields input {
    border: 0;
    padding: 13px 14px;
    font-size: .92rem;
    color: #1a1a1a;
}

.inst-callback-submit {
    border: 0;
    background: var(--site-accent, #0096d4);
    color: #fff;
    font-weight: 700;
    padding: 13px 30px;
    cursor: pointer;
}

@media (max-width: 991px) {
    .inst-callback { padding: 40px 0; }
    .inst-callback-box { grid-template-columns: 1fr; padding: 30px 24px; }
    .inst-callback-fields { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .inst-categories-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   بنر الصفحات الداخلية — الأساس الاحترافي
   ------------------------------------------------------------
   Institute lays the heading and a justified paragraph straight onto
   a flat fill of one colour. Reproduced in eleven colours that
   reads as unfinished, and justifying a paragraph inside a
   narrow column leaves the ragged word spacing that made the
   first attempt look wrong.

   So: the institute's own artwork behind, a scrim already baked
   into it for contrast, text set left at a readable measure, and
   the category icon given a proper badge instead of floating
   loose. Each theme then varies the composition — but starts
   from something finished.
   ============================================================ */

#common-banner-section-icon,
#common-banner-section-image {
    position: relative;
    overflow: hidden;
    background-image: var(--site-banner);
    background-size: cover;
    /* Anchored right: the text sits left, so the photograph is framed on the
       side that stays visible. */
    background-position: right center;
    background-color: var(--site-primary, #244298);
}

/* Text does not go on top of a photograph.
   ------------------------------------------------------------
   A stock photograph has a face in the middle of it, and a heading laid over
   that is unreadable and looks careless — which is exactly how it looked.
   Instead the institute's colour is laid on solid across the reading side and
   fades out before the photograph, so the text sits on a clean field and the
   picture keeps the rest of the band. It holds whatever the photograph turns
   out to contain, which a scrim tuned to one image does not. */
#common-banner-section-icon::before,
#common-banner-section-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        var(--site-primary, #244298) 0%,
        var(--site-primary, #244298) 52%,
        color-mix(in srgb, var(--site-primary, #244298) 82%, transparent) 66%,
        color-mix(in srgb, var(--site-primary, #244298) 30%, transparent) 100%);
    pointer-events: none;
}

/* color-mix is recent; older engines get a plain fade to the same colour. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    #common-banner-section-icon::before,
    #common-banner-section-image::before {
        background: linear-gradient(
            to right,
            var(--site-primary, #244298) 0%,
            var(--site-primary, #244298) 54%,
            rgba(0, 0, 0, .45) 100%);
    }
}

[dir="rtl"] #common-banner-section-icon,
[dir="rtl"] #common-banner-section-image { background-position: left center; }

[dir="rtl"] #common-banner-section-icon::before,
[dir="rtl"] #common-banner-section-image::before { transform: scaleX(-1); }

#common-banner-section-icon > .container,
#common-banner-section-image > .container { position: relative; z-index: 1; }

/* The text keeps to the solid side and never reaches the photograph, and it
   always begins at the container edge — a heading that starts a third of the
   way across an empty band of colour looks like a mistake, because it is. */
#common-banner-section-icon .common-banner-text,
#common-banner-section-image .common-banner-text {
    max-width: 58%;
    margin-inline-end: auto;
}

@media (max-width: 991px) {
    /* Too narrow to hold both: the photograph goes behind a solid wash. */
    #common-banner-section-icon::before,
    #common-banner-section-image::before {
        background: var(--site-primary, #244298);
        opacity: .93;
    }
    #common-banner-section-icon .common-banner-text,
    #common-banner-section-image .common-banner-text { max-width: none; }
}

/* The inline fill on the inner box is Institute's brand blue, written into
   eighty-six templates. Clearing it lets the artwork show through. */
#common-banner-section-icon .box.background-listing,
#common-banner-section-image .box.background-listing {
    background: transparent !important;
    padding: 0;
}

#common-banner-section-icon .common-banner-section-box,
#common-banner-section-image .common-banner-section-box {
    display: flex;
    /* Aligned to the top, not the middle: these descriptions run long, and a
       badge floating level with the middle of a paragraph reads as stray. */
    align-items: flex-start;
    gap: 26px;
    /* Sized against how category headers are actually built: a compact band,
       not a hero. Coursera's equivalent page has no hero at all — a title, a
       short description, then the grid. */
    padding: 28px 0 32px;
}

/* Justified text in a column this narrow leaves rivers of white space. */
#common-banner-section-icon .common-banner-text,
#common-banner-section-image .common-banner-text {
    flex: 1;
    min-width: 0;
    text-align: start;
}

#common-banner-section-icon .common-banner-text h1,
#common-banner-section-image .common-banner-text h1 {
    font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.2rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 14px;
    color: #fff;
}

#common-banner-section-icon .common-banner-text p,
#common-banner-section-image .common-banner-text p {
    text-align: start !important;   /* .text-justify is in the markup */
    /* No measure cap: capping it left a narrow column of text stacked down
       one side of a wide banner, with the rest of the row empty. Running the
       full width also cuts the number of lines, so the banner is shorter. */
    max-width: none;
    margin: 0;
    font-size: .95rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .90);
}

/* The description is shown in full. Clipping it to a few lines made the
   banner the right height and the page wrong: a reader who wants to know what
   the category covers is left with a sentence that stops mid-word. The height
   is controlled by the measure and the type size instead. */

/* The category icon, given a badge instead of floating on the colour.
   Institute offsets it with position:relative and left:-32px so it hangs outside
   the container; inside a flex row that just pushes it off the page edge. */
.common-banner-icon {
    position: static !important;
    inset: auto !important;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .95);
    padding: 15px;
    float: none !important;
}

.common-banner-icon img { width: 100%; height: 100%; object-fit: contain; }

/* The breadcrumb is a Bootstrap <ol> with a light grey fill, which becomes a
   pale slab lying across the artwork. It reads better as plain text on it. */
#common-banner-section-icon .breadcrumb,
#common-banner-section-image .breadcrumb {
    background: transparent !important;
    padding-inline: 0;
    margin-bottom: 0;
}

#common-banner-section-icon .breadcrumb,
#common-banner-section-icon .breadcrumb a,
#common-banner-section-image .breadcrumb,
#common-banner-section-image .breadcrumb a {
    color: rgba(255, 255, 255, .82) !important;
    font-size: .86rem;
}

#common-banner-section-icon .breadcrumb a:hover,
#common-banner-section-image .breadcrumb a:hover { color: #fff !important; }

@media (max-width: 767px) {
    #common-banner-section-icon .common-banner-section-box,
    #common-banner-section-image .common-banner-section-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 36px 0;
        min-height: 0;
    }
    .common-banner-icon { flex-basis: 64px; width: 64px; height: 64px; padding: 11px; }
}

/* ── مقدّمة التصنيف تحت البنر ── */
.inst-cat-intro { padding: 26px 0 6px; }

.inst-cat-intro p {
    margin: 0;
    max-width: 88ch;
    color: #4d5a68;
    line-height: 1.75;
    font-size: 1rem;
}

#common-banner-section-icon .inst-banner-lead,
#common-banner-section-image .inst-banner-lead {
    font-size: 1.04rem;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, .94);
}

/* The back link sits over the photograph side, where the colour has faded
   out; a shadow keeps it legible whatever the picture is doing under it. */
#common-banner-section-icon a[href]:not(.breadcrumb a),
#common-banner-section-image a[href]:not(.breadcrumb a) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* ============================================================
   الشريط العلوي — أساس مشترك
   ------------------------------------------------------------
   Institute's bar is a slogan, seven links and its own five social
   accounts. Each institute replaces it with its own arrangement;
   this only sets what they all need — a single row that does not
   wrap, and links that behave like links.
   ============================================================ */

/* ============================================================
   الشريط العلوي — أساس مشترك
   ------------------------------------------------------------
   The eleven bars share no anatomy: one is a search field, one
   a city selector, one a phone number, one a single sentence.
   All this sets is the band itself — one row, fixed height,
   links that behave like links — so each theme is free to put
   whatever it likes inside.

   Institute loads none of it and keeps its own bar.
   ============================================================ */

.dt-top-section-wrap[class*="-topbar"] { padding: 0; }

/* Institute's strip is fixed at 32px and its header is pinned to top:32px just
   beneath it. These bars are taller, so the two numbers move together — the
   band and the header it carries. */
.dt-top-section-wrap[class*="-topbar"] {
    /* Institute fixes the strip's height and pads the row inside it. Both are
       forced here: measured before this, the row stood 52px inside a 40px
       band and hung twelve pixels past its bottom edge. */
    height: auto !important;
    min-height: 40px;
}

/* (2026-09-18) top:40px اتشالت: #dt-header-section بقى في تدفق عادي جوّه
   #dt-fixed-chrome (شوف header.php/fullcss.css) بدل ما يكون fixed لوحده،
   فمحتاجش يعوّض ارتفاع الشريط العلوي بنفسه — بيترصّ تحته تلقائي. */

/* Addressed through the id: Institute pads this row from `#dt-top-section
   .container`, which outranks a class-only selector however important it is
   declared. */
#dt-top-section[class*="-topbar"] [class$="-row"] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 40px;
    /* Room above and below: without it a pill or a chip stands the full
       height of the band and reads as stuck to its edges. */
    padding-block: 6px !important;
    font-size: .78rem;
    /* The row is the full height of the band and its children are centred in
       it, so nothing sits on an edge whatever its own height turns out to be. */
    align-content: center;
}

/* Every child of the row centres on the band's own axis, not on the text
   baseline it happens to inherit. */
[class*="-topbar"] [class$="-row"] > * {
    align-self: center;
    margin-block: 0;
}

/* Anything button-shaped keeps to the height the padding leaves, so the band
   holds it rather than being filled by it. */
[class*="-topbar"] [class$="-cta"],
[class*="-topbar"] [class$="-solid"],
[class*="-topbar"] [class$="-ghost"],
[class*="-topbar"] [class$="-pill"],
[class*="-topbar"] [class$="-dl"],
[class*="-topbar"] [class$="-tag"],
[class*="-topbar"] [class$="-picker"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    line-height: 1.1;
    /* Held to the height the band leaves. Measured before this, the pills
       stood 29px in a 36px band and hung two pixels past its bottom edge. */
    padding-block: 5px;
    max-height: 28px;
    font-size: .74rem;
}

[class*="-topbar"] [class$="-ico"] { width: 26px; height: 26px; max-height: 26px; font-size: .8rem; }

/* Nothing in the band may be taller than the room the band leaves, whatever
   its own padding says. */
[class*="-topbar"] [class$="-row"] > *,
[class*="-topbar"] [class$="-row"] input,
[class*="-topbar"] [class$="-row"] button,
[class*="-topbar"] [class$="-row"] select { max-height: 28px; }

/* Every bar carries at least one icon; they sit on the text baseline rather
   than dragging the band taller. */
[class*="-topbar"] .bi { font-size: .92em; line-height: 1; }

[class*="-topbar"] a { color: inherit; text-decoration: none; }

/* The generated repaint sets `a:hover { color: var(--site-primary) }` across
   the whole site, and most of these bars are already standing on that colour
   — so hovering a link painted it the colour of the ground behind it and it
   vanished. Inside the bar the link keeps the colour it had; the hover reads
   through the underline instead. */
[class*="-topbar"] a:hover,
[class*="-topbar"] a:focus {
    color: inherit !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The ones that are buttons already have their own hover, and an underline on
   a filled button is wrong. */
[class*="-topbar"] [class$="-cta"]:hover,
[class*="-topbar"] [class$="-solid"]:hover,
[class*="-topbar"] [class$="-ghost"]:hover,
[class*="-topbar"] [class$="-dl"]:hover,
[class*="-topbar"] [class$="-ico"]:hover,
[class*="-topbar"] [class$="-pill"]:hover { text-decoration: none; }
[class*="-topbar"] a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

[class*="-topbar"] [class$="-lang"] {
    margin-inline-start: auto;
    align-self: center;
    font-weight: 700;
    font-size: .82rem;
    white-space: nowrap;
}

/* (2026-09-18) طلب صريح: الشريط العلوي يفضل ظاهر حتى على الموبايل
   (زي الموقع القديم https://www.almawred-uae.com/ بالظبط) — قاعدة
   الإخفاء على الشاشات الضيقة اتشالت. */

/* الصف فوق (السطر 826) اتعمل "صف واحد ملوش لف" — افتراض بُني وقت
   ما كان الشريط كله display:none تحت 991px، يعني مكنش ليه وجود على
   الموبايل أصلاً. دلوقتي بقى ظاهر، وبعض المعاهد فيها 3-5 عناصر في
   نفس الصف (الخليج: إيميل+تليفون+تنزيلات+مقالات، ليدرز 5 عناصر...)
   فعلى شاشة ضيقة العناصر الأخيرة بتخرج برّه حدود الشاشة وتتقص بدل
   ما تلف — زي ما ظهر في السكرين شوت (خليج وGlobal). الحل: يلف
   العناصر اللي مش قادرة تتاخد في سطر واحد. */
@media (max-width: 575.98px) {
    #dt-top-section[class*="-topbar"] [class$="-row"] {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 4px;
        font-size: .72rem;
    }
    /* بعض المعاهد بتستعمل margin-inline-start:auto على عنصر واحد
       (زي البريد أو زرار Downloads أو زرار Online في السعودي) عشان
       يتدفع لطرف الصف وهو صف واحد. لما الصف بيلف، الدفع التلقائي ده
       بيكسب على justify-content:center (auto margin بتاخد الأولوية في
       حساب المسافة الفاضية) فبيدفع العنصر لطرف سطره الجديد — سطر
       متمركز وسطر تاني ملزّق على الطرف، يعني الصفوف بقت مش متراصة على
       بعض. بنصفّرها على الموبايل عشان كل سطر يتمركز بنفس الطريقة.
       !important لازم: قاعدة الثيم (body.theme-x .y-item) بتبقى أخص من
       سيلكتور العنصر العام ده (خُطّين attribute بس)، فمن غيرها بتكسب. */
    [class*="-topbar"] [class$="-row"] > * {
        margin-inline-start: 0 !important;
    }
}

/* (2026-09-18) "أسماء الدورات داخلة على التواريخ" (جلوماك، بلس، أبفا) على الموبايل:
   الثيمات بتحط ارتفاع ثابت على .course-title (٤٧px/٦٠px) مع line-clamp:2،
   بس قاعدة body.pg-training-courses .course-title في الملف ده بتلغي الـclamp
   والـoverflow بـ!important (عشان العنوان يبان كامل) والارتفاع الثابت بيفضل —
   فالسطر التالت والرابع بيكمّلوا فوق التاريخ واللغة. على الموبايل العنوان
   بياخد ارتفاعه الطبيعي. "html" زيادة عشان تتغلب على سيلكتورات الثيم اللي
   فيها id بنفس القوة (وهي بتيجي بعد الملف ده). */
@media (max-width:767px){
    html body[class*="theme-"].pg-training-courses #course_list .course-title,
    html body[class*="theme-"].pg-training-courses #category_course_list .course-title,
    html body[class*="theme-"].pg-training-courses #category_course_list_by_name .course-title,
    html body[class*="theme-"].pg-training-courses #coursefinder_list_courses .course-title{
        height:auto!important;max-height:none!important;overflow:visible!important}
}

/* ============================================================
   أزرار الإجراءات تحت البنر في صفحة تفاصيل الدورة — موبايل
   ------------------------------------------------------------
   (2026-09-18) القالب بيرسم "سجّل الآن" مرتين: مرة جوّه .custom-outline-box
   (form.pull-right — للديسك توب، بعد "أعد الاتصال بي") ومرة تانية في
   .second-menu-eight جنب "روابط سريعة" (float). على الموبايل الاتنين ظاهرين
   والـfloat بيخلّي الصفوف مسننة (زر صغير فوق زر كبير، وأعرض بأطوال مختلفة).
   هنا: الأزرار الأربعة الصغيرة شبكة ٢×٢ بعرض متساوي، وتحتها صف واحد
   "سجّل الآن | روابط سريعة"، والنسخة المكرّرة تتخفي.
   ============================================================ */
@media (max-width:767px){
    html body.pg-training-courses .custom-outline-box{
        display:flex!important;flex-wrap:wrap!important;gap:8px!important;float:none!important;
        align-items:stretch!important;justify-content:stretch!important}
    /* نسخة "سجّل الآن" المكرّرة = الفورم اللي زرّه btn-primary (الباقي btn-primary-outline).
       pull-left/right بتتبدّل في العربي فمينفعش نعتمد عليهم. */
    html body.pg-training-courses .custom-outline-box > form:has(> button.btn-primary){display:none!important}
    html body.pg-training-courses .custom-outline-box > form,
    html body.pg-training-courses .custom-outline-box > a.btn,
    html body.pg-training-courses .custom-outline-box > button.btn{
        flex:1 1 calc(50% - 4px)!important;min-width:0;float:none!important;margin:0!important;width:auto!important;
        display:flex!important}
    html body.pg-training-courses .custom-outline-box .btn{
        width:100%!important;margin:0!important;justify-content:center;align-items:center;text-align:center;
        white-space:normal;line-height:1.25}

    html body.pg-training-courses .second-menu-eight{
        display:flex!important;gap:8px!important;align-items:stretch;flex-wrap:nowrap;margin-top:8px!important}
    html body.pg-training-courses .second-menu-eight > form{
        flex:0 0 calc(50% - 4px)!important;max-width:calc(50% - 4px)!important;order:1;float:none!important;margin:0!important;display:flex}
    html body.pg-training-courses .second-menu-eight > form .btn{width:100%!important;margin:0!important;justify-content:center}
    html body.pg-training-courses .second-menu-eight > a.dropdown-toggle{
        flex:0 0 calc(50% - 4px)!important;max-width:calc(50% - 4px)!important;order:2;float:none!important;margin:0!important;
        box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center}
}

/* ============================================================
   المنيو الجانبي على الموبايل (#navbar_main.mobile-offcanvas) — كل المعاهد
   ------------------------------------------------------------
   (2026-09-18) طلب صريح: شكل المنيو الجانبي وحش في كل المواقع. السبب إن
   قواعد الثيم المكتوبة للمنيو الأفقي (nav.navbar .container{display:flex;
   justify-content:space-between}، .navbar-nav{align-items:center}، حدود
   وبادينج .nav-link الصغيرة) بتتسرّب على نفس عنصر nav#navbar_main اللي
   هو اللوحة الجانبية — فالبنود بتتلمّ في نص العرض وتتوسّط، وسهم القايمة
   المنسدلة (.menu-icon، float:right) بيتراكب على آخر حرف. هنا بنرجّعها
   عمود كامل العرض: صف لكل بند بخط فاصل، السهم في طرف الصف.
   leaders ليه نسخته الخاصة في leaders.css وبتكسب بترتيب الملفات.
   ============================================================ */
@media (max-width: 991.98px) {
    body[class*="theme-"] #navbar_main.mobile-offcanvas {
        width: 82%;
        max-width: 340px;
        padding: 0 !important;
        background: #fff;
        border-top: 4px solid var(--site-primary, #244298);
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas > .container {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas br { display: none; }

    /* زرار القفل عند الطرف البعيد للّغة، مش عايم ولا مقصوص. */
    body[class*="theme-"] #navbar_main.mobile-offcanvas .offcanvas-header {
        display: flex;
        justify-content: flex-end;
        padding: 12px 14px 4px;
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas .offcanvas-header .btn {
        float: none;
        margin: 0;
    }

    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav {
        display: flex;
        flex-direction: column !important;
        align-items: stretch;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px 0 24px;
        /* السعودي (وغيره) بيلبّس .navbar-nav كبسولة/حاوية مدوّرة للمنيو
           الأفقي — على اللوحة الجانبية بتطلع بيضاوي أخضر كبير ورا البنود. */
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .07);
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li > .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin: 0 !important;
        padding: 14px 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #1f2933 !important;
        font-size: .95rem;
        font-weight: 600;
        letter-spacing: 0;
        text-align: start;
        box-sizing: border-box;
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li > .nav-link:hover,
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li > .nav-link:focus,
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li > .nav-link.active {
        color: var(--site-primary, #244298) !important;
        background: rgba(0, 0, 0, .03) !important;
    }
    /* أيقونة السهم اللي قبل كل بند: جوه الصف بالعادي، مش position نسبي. */
    body[class*="theme-"] #navbar_main.mobile-offcanvas .navbar-nav > li > .nav-link > i.bi-arrow-right-short {
        position: static !important;
        top: 0 !important;
        flex: none;
        color: var(--site-primary, #244298) !important;
    }
    /* سهم القايمة المنسدلة في آخر الصف بدل ما يتراكب على الحرف الأخير. */
    body[class*="theme-"] #navbar_main.mobile-offcanvas .nav-link > i.menu-icon {
        float: none !important;
        position: static !important;
        margin-inline-start: auto;
        flex: none;
        opacity: .6;
    }
    /* بند اللغة: نفس مقاس وإزاحة باقي البنود (كان له line-height وtop:-5px
       من تصميم الزرار الصغير في الصف الأفقي). */
    body[class*="theme-"] #navbar_main.mobile-offcanvas .nav-link.custom-languagenew {
        line-height: 1.4 !important;
        padding-inline-start: 18px !important;
        color: var(--site-primary, #244298) !important;
    }
    /* طلب صريح: علم اللغة العربية يتشال من المنيو الجانبي (glomac وplus
       بيرسموه بـ::before على .custom-languagenew للصف الأفقي، وبيتسرّب هنا). */
    body[class*="theme-"] #navbar_main.mobile-offcanvas .nav-link.custom-languagenew::before {
        content: none !important;
        display: none !important;
    }
    body[class*="theme-"] #navbar_main.mobile-offcanvas .nav-link.custom-languagenew span {
        top: 0;
        position: static;
        font-size: .95rem;
    }
    /* الصفحة العربية: اللوحة تنزلق من اليمين — نفس منطق ليدرز. المكوّن
       الأصلي بيفتح من الشمال دايمًا (ملوش نسخة RTL). */
    body[class*="theme-"][dir="rtl"] #navbar_main.mobile-offcanvas {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    body[class*="theme-"][dir="rtl"] #navbar_main.mobile-offcanvas.show {
        transform: translateX(0);
        box-shadow: rgba(0, 0, 0, .09) -110px -3px 8px 0;
    }
    body[class*="theme-"][dir="rtl"] #navbar_main.mobile-offcanvas .nav-link > i.bi-arrow-right-short {
        transform: scaleX(-1);
    }
}

/* ============================================================
   القائمة الرئيسية — تصفير مشترك
   ------------------------------------------------------------
   Institute dresses individual items in the bar: the last two carry
   red outlines, several carry their own background and radius,
   and the brand image is sized for Institute's own logo file.

   Each institute rebuilds this bar its own way, and it cannot
   start from a clean surface while that chrome is still on. So
   the chrome comes off here and every theme states what it
   wants instead. Institute loads none of this and keeps all of it.
   ============================================================ */

body[class*="theme-"] #dt-header-section .navbar-nav > li > a,
body[class*="theme-"] #dt-header-section .navbar-nav > li > .nav-link {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    white-space: nowrap;
}

/* The two utility items at the end are outlined boxes in Institute's bar. */
body[class*="theme-"] #dt-header-section .navbar-nav > li:nth-last-child(-n+3) > a {
    border: 0 !important;
    background: transparent !important;
    padding-inline: 12px;
}

/* The real marks arrive at every size from 127x40 to 1200x280 and at ratios
   from square to seven-to-one. They are trimmed and redrawn to one height on
   disk; here they are simply held inside a box, and whichever of the two
   limits binds first decides the size. No ratio is declared — these are
   raster files and their own is reliable, unlike the generated SVG they
   replace, which had to be told. */
body[class*="theme-"] .navbar-brand {
    width: auto;
    max-width: none;
    flex: none;
    display: flex;
    align-items: center;
}

body[class*="theme-"] .navbar-brand img,
body[class*="theme-"] .navbar-brand picture,
body[class*="theme-"] .navbar-brand picture img {
    height: auto;
    width: auto;
    /* Institute draws its own logo at 233 by 69 in an 87px header, and it reads
       clearly at that size. These are held to the same room. Whichever limit
       binds first decides: a wide mark stops at the width, a square one at
       the height. */
    max-height: 62px;
    /* Two of these marks run seven and a half to one — a long wordmark with a
       line under it. At 250 they came out half the height of the rest, so the
       width is opened enough for them to stand at a comparable size. */
    max-width: 290px;
    flex: none;
    min-width: 0;
    object-fit: contain;
}

/* The header grows to hold them, as Institute's does. */
body[class*="theme-"] #dt-header-section nav.navbar { padding-block: 8px; }
body[class*="theme-"] #dt-header-section .navbar-brand { padding-block: 0; }

body[class*="theme-"] .navbar-nav { align-items: center; }

/* ── التحويم في القائمة الرئيسية ──────────────────────────────
   The generated repaint sets `a:hover { color: var(--site-primary) }` across
   the whole site. In the bar that paints the link the colour of the ground it
   stands on — glomac's dark red on its near-black bar — and it vanishes.

   `inherit` was the first answer and it was wrong: an item that carries its
   own colour, like glomac's outlined search, inherited the row's instead and
   vanished a different way. So each theme states its bar's ink once, and both
   the resting and the hovered link take that same value. An item that wants
   another colour states its own hover beside it.
   ─────────────────────────────────────────────────────────── */

body[class*="theme-"] #dt-header-section .navbar-nav > li > a:hover,
body[class*="theme-"] #dt-header-section .navbar-nav > li > a:focus,
body[class*="theme-"] #dt-header-section .navbar-nav > li > .nav-link:hover,
body[class*="theme-"] #dt-header-section .navbar-nav > li > .nav-link:focus {
    color: var(--nav-ink, currentColor) !important;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 currentColor;
}

/* The items that are already a filled block or an outlined button carry their
   own hover; a rule under them would be a second, contradictory signal. */
body[class*="theme-"] #dt-header-section .navbar-nav > li.has-megamenu > .nav-link:hover,
body[class*="theme-"] #dt-header-section .navbar-nav > li > .nav-link.active:hover {
    box-shadow: none;
}

/* Dropdown items sit on a white panel of their own, so there the primary
   colour is exactly right — only the bar itself is the problem. */
body[class*="theme-"] #dt-header-section .dropdown-menu a:hover {
    color: var(--site-primary, #244298) !important;
    box-shadow: none;
}

/* ── لون الرابط في الشريط: متغيّر واحد ───────────────────────
   The colour was being fought over by four rules — the theme's own, the
   film-header's white, the scrolled state's dark — each more specific than
   the last, and the winner was not the one that should have won.

   So the link reads one value and the states change that value instead of
   restating the colour. A theme declares its ink once; a state that needs a
   different ink redeclares the variable, not the rule.
   ─────────────────────────────────────────────────────────── */

body[class*="theme-"] #dt-header-section .navbar-nav > li > a {
    color: var(--nav-ink, inherit) !important;
}

/* ─────────────────────────────────────────────────────────────
   لون الوقوف على الروابط

   _brand.css فيه  a:hover { color: var(--site-primary) !important }
   وده تمام على خلفية بيضا. بس أي لوح ملوّن بلون المعهد نفسه
   بيبقى لون الوقوف هو نفس لون الخلفية — الكلام بيختفي.

   حصلت في التوب بار، وفي المنيو الرئيسي، وتالت مرة في لوحة
   مواعيد القادة. فبدل ما تتصلح كل مرة في مكان: القاعدة بتقرا
   من متغيّر، وأي لوح ملوّن بيعلن المتغيّر لنفسه والروابط جواه
   بترثه. الافتراضي هو نفس سلوك _brand.css بالظبط.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] a:hover,
body[class*="theme-"] a:focus {
    color: var(--link-hover-ink, var(--site-primary, #244298)) !important;
}

/* ─────────────────────────────────────────────────────────────
   شريط الإعلانات المتحرك

   الصور دي creatives كاملة — كل واحدة جواها العنوان والزرار
   بتاعها — فمينفعش تتحط ورا كلام البنر: هيبقى فيه عنوانين فوق
   بعض. فلها شريط لوحدها.

   الشرائح مركّبة فوق بعض ودايماً موجودة في التخطيط، والانتقال
   بالشفافية. لو استعملنا display:none كان الإطار هيرقص مع كل
   شريحة لو مقاساتهم مختلفة بشعرة.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] .inst-slides { padding: 34px 0; }

body[class*="theme-"] .inst-slides-frame {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #f2f4f6;
}

body[class*="theme-"] .inst-slide {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease;
}

/* الأولى في السياق العادي وهي اللي بتحدد ارتفاع الإطار،
   والباقي فوقها. كدا الشريط مبياخدش ارتفاع ثابت مخمّن. */
body[class*="theme-"] .inst-slide + .inst-slide {
    position: absolute;
    inset: 0;
}

body[class*="theme-"] .inst-slide.is-on { opacity: 1; visibility: visible; }

body[class*="theme-"] .inst-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[class*="theme-"] .inst-slides-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .88);
    color: #1c2b36;
    font-size: 1.15rem; line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
}

body[class*="theme-"] .inst-slides-frame:hover .inst-slides-nav,
body[class*="theme-"] .inst-slides-nav:focus-visible { opacity: 1; }

body[class*="theme-"] .inst-slides-nav:hover { background: #fff; }

/* inline-start/end مش left/right: نفس القاعدة بتشتغل في الاتجاهين. */
body[class*="theme-"] .inst-slides-nav.is-prev { inset-inline-start: 14px; }
body[class*="theme-"] .inst-slides-nav.is-next { inset-inline-end: 14px; }

/* الشيفرون نفسه لازم ينعكس، لأنه رسمة مش حرف. */
[dir="rtl"] body[class*="theme-"] .inst-slides-nav i,
body[class*="theme-"] [dir="rtl"] .inst-slides-nav i { transform: scaleX(-1); }

body[class*="theme-"] .inst-slides-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 12px;
    display: flex; justify-content: center; gap: 8px;
}

body[class*="theme-"] .inst-slides-dots button {
    width: 9px; height: 9px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}

body[class*="theme-"] .inst-slides-dots button.is-on {
    width: 24px; border-radius: 5px;
    background: #fff;
}

@media (max-width: 767px) {
    body[class*="theme-"] .inst-slides { padding: 22px 0; }
    body[class*="theme-"] .inst-slides-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body[class*="theme-"] .inst-slide { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   عنوان مقروء للبحث وقارئ الشاشة، غير مرسوم على الصفحة

   بنر القادة بقى شرائح، والشريحة عنوانها محروق جوة الصورة —
   يعني الصفحة فضلت من غير h1، وجوجل بياخد منه العنوان الأساسي.

   الطريقة المستعملة هنا هي نمط الوصولية المتعارف عليه: العنصر
   بيفضل في التخطيط بمقاس واحد بكسل ومقصوص، مش display:none ولا
   visibility:hidden — الاتنين دول بيخفوه عن قارئ الشاشة كمان،
   وجوجل بيتعامل معاهم كنص مخفي.

   ونصّه هو نفس العنوان اللي كان مكتوب على الصفحة قبل الشرائح،
   مش كلمات مفتاحية متحطة عشان البحث.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] .inst-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────────
   اللوجو لما يبقى SVG جوّه الصفحة

   الـSVG بتتحط inline مش كـ<img> عشان النص العربي جواها يتشكّل
   بخطوط الصفحة — محمّلة كصورة كانت بتطلع لوحة فاضية وحرف تايه.
   بس القواعد اللي كانت بتحكم المقاس كانت مكتوبة لـimg، فالـSVG
   طلعت بمقاسها الأصلي 336×72 والاسم خرج بره الشريط.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] svg.main-logo {
    display: block;
    width: auto;
    height: 62px;
    max-width: 290px;
}

@media (max-width: 991px) {
    body[class*="theme-"] svg.main-logo { height: 46px; max-width: 210px; }
}

/* ─────────────────────────────────────────────────────────────
   لون التوب بار

   _brand.css بيتولّد من ستايل المعهد الأساسي، والنسخة العربية منه
   فيها تلات قواعد للتوب بار بدل واحدة — الزيادة بتحط تدرّج
   (أخضر ← وردي) بـ!important بعد القاعدة اللي بتحط اللون الصافي،
   فبتغلبها. النتيجة: توب بار بلونه في الإنجليزي وبتدرّج وردي في
   العربي.

   الملف دا بيتحمّل بعد _brand.css، فقاعدة هنا بنفس الأهمية
   وبخصوصية أعلى بتحسمها. والمعهد برّه لأنه مالوش كلاس ثيم.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] #dt-top-section,
body[class*="theme-"] #dt-copyright-section {
    background: var(--topbar-bg, var(--site-primary, #244298)) !important;

    /* والأرضية دي هي --site-primary نفسه، و_brand.css بيلوّن أي رابط
       عند الوقوف عليه بنفس المتغيّر — يعني كل رابط في كل شريط علوي
       في الـ11 كان بيختفي وقت الوقوف. الشريط بيقول حبر وقوفه هنا
       مرة واحدة، وأي ثيم عايز لون تاني بيعيد تعريف المتغيّر. */
    --link-hover-ink: #fff;
}

/* ─────────────────────────────────────────────────────────────
   بند المنيو النشط

   نفس حكاية التوب بار: _brand.css العربي فيه قاعدة مش موجودة في
   الإنجليزي —

       .navbar-expand-lg .navbar-nav .nav-item .active {
           border: 1px solid var(--site-primary) !important;
       }

   — فبتحط إطار كامل حوالين البند النشط. والثيمات بتشيل الحدّ
   التحتاني بس عشان تحط خطها، فالنتيجة صندوق مفتوح من تحت حوالين
   (الصفحة الرئيسية) في العربي وخط نضيف في الإنجليزي.

   الإطار بيتشال هنا كله، والثيم يحط اللي هو عايزه بعده.
   ───────────────────────────────────────────────────────────── */

body[class*="theme-"] #dt-header-section .navbar-nav .nav-item .active {
    border: 0 !important;
}

/* ── العنوان الظاهر الجديد: واحد لكل معهد، والقديم فوقه مخفي عن العين لجوجل ──
   النمط محايد ومبني على متغيرات الموقع، فكل ثيم بياخد لونه وخطه من نفسه،
   وأي ثيم عايز يغيّر بيعمل override بعد الملف دا. */
body[class*="theme-"] .inst-h1 {
    margin: 0 0 .55rem;
    font-family: var(--display-font, inherit);
    font-size: clamp(1.65rem, 1.05rem + 2.1vw, 3rem);
    font-weight: 700;
    line-height: 1.18;
    text-wrap: balance;
    /* يورث محاذاة حاويته: اللي بتوسّط باقي كلامها بتوسّطه معاه. */
    text-align: inherit;
    color: var(--hero-ink, inherit);
}

body[class*="theme-"] .inst-lede {
    margin: 0 0 1.1rem;
    max-width: 56ch;
    font-size: clamp(.95rem, .87rem + .38vw, 1.13rem);
    line-height: 1.65;
    text-align: inherit;
    color: var(--hero-ink, inherit);
    opacity: .88;
}

/* لو العنوان الظاهر اتقفل على موقع معيّن (بلس) بياخد .inst-sr كمان،
   والقواعد اللي فوق بتيجي بعد .inst-sr وبنفس القوة — فبتكسب هوامشه.
   دي بترجّع الإخفاء لأنه هو المقصود، مش الشكل. */
body[class*="theme-"] .inst-h1.inst-sr,
body[class*="theme-"] .inst-lede.inst-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═══ صفحة 404: مكان مختلف للصورة في كل معهد ═════════════════
   الصف نفسه هو الصف الأصلي — الكلاس بيغيّر توزيعه بس. المعهد مالوش
   كلاس فمبيتأثرش بأي حاجة من دي.
   ═══════════════════════════════════════════════════════════ */

body[class*="theme-"] .inst-404 .inst-404-art img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
}

/* على أول السطر. */
body[class*="theme-"] .inst-404--side-start .inst-404-art { flex: 0 0 32%; max-width: 32%; }
body[class*="theme-"] .inst-404--side-start .inst-404-copy { flex: 0 0 68%; max-width: 68%; }

/* على آخره: نفس الـmarkup والصف بيتقلب. */
body[class*="theme-"] .inst-404--side-end .row { flex-direction: row-reverse; }
body[class*="theme-"] .inst-404--side-end .inst-404-art { flex: 0 0 32%; max-width: 32%; }
body[class*="theme-"] .inst-404--side-end .inst-404-copy { flex: 0 0 68%; max-width: 68%; }

/* فوق الكلام والكلام متوسّط تحتها. */
body[class*="theme-"] .inst-404--stack .row { display: block; text-align: center; }
body[class*="theme-"] .inst-404--stack .inst-404-art,
body[class*="theme-"] .inst-404--stack .inst-404-copy { max-width: 100%; padding: 0; }
body[class*="theme-"] .inst-404--stack .inst-404-art img { max-width: 300px; }
body[class*="theme-"] .inst-404--stack .inst-404-copy .text-left { text-align: center !important; }

@media (max-width: 767px) {
    /* على الموبايل عمود واحد للكل — الترتيب مالوش معنى هناك. */
    body[class*="theme-"] .inst-404 .row { display: block; text-align: center; }
    body[class*="theme-"] .inst-404 .inst-404-art,
    body[class*="theme-"] .inst-404 .inst-404-copy { max-width: 100%; }
    body[class*="theme-"] .inst-404 .inst-404-art img { max-width: 240px; }
}

/* ═══ القوائم المنسدلة: أساس مشترك ═══════════════════════════
   الشكل الأساسي بس — الحواف والظل والمسافات وسلوك القائمة الطويلة.
   الهوية (اللون والحواف والعلامة اللي جنب البند) بتتحدد في ملف كل
   ثيم، فالـ11 مبيتشابهوش.

   المعهد برّه: كل القواعد دي تحت body[class*='theme-'] وهو مالوش
   كلاس ثيم.
   ═══════════════════════════════════════════════════════════ */

body[class*="theme-"] #dt-header-section .dropdown-menu {
    border: 0;
    border-radius: 0;
    padding: 10px 0;
    margin-top: 0;
    box-shadow: 0 18px 44px rgba(12, 20, 38, .14);
    min-width: 232px;
}

body[class*="theme-"] #dt-header-section .dropdown-menu .dropdown-item {
    padding: 9px 20px;
    font-size: .88rem;
    line-height: 1.4;
    white-space: normal;
    transition: background .16s ease, color .16s ease, padding .16s ease;
}

/* القائمة الطويلة (المدن، الاعتمادات) بتاخد ارتفاع أقصى وتمرير بدل
   ما تنزل تحت حافة الشاشة وتتقطع. */
body[class*="theme-"] #dt-header-section .nav-item.dropdown .dropdown-menu {
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body[class*="theme-"] #dt-header-section .dropdown-menu::-webkit-scrollbar { width: 6px; }
body[class*="theme-"] #dt-header-section .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(12, 20, 38, .22);
    border-radius: 3px;
}

/* القائمة الكبيرة: أعمدة حقيقية بدل صف طويل. */
body[class*="theme-"] #dt-header-section .megamenu { padding: 26px 0 22px; }

body[class*="theme-"] #dt-header-section .custommegamenu-listing {
    column-count: 3;
    column-gap: 34px;
    margin: 0;
}

body[class*="theme-"] #dt-header-section .custommegamenu-listing li {
    break-inside: avoid;
    margin: 0 0 2px;
}

body[class*="theme-"] #dt-header-section .custommegamenu-listing li a {
    display: block;
    padding: 7px 10px;
    font-size: .88rem;
    line-height: 1.35;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, padding .16s ease;
}

body[class*="theme-"] #dt-header-section .megamenu p b {
    display: inline-block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    opacity: .72;
}

@media (max-width: 1199px) {
    body[class*="theme-"] #dt-header-section .custommegamenu-listing { column-count: 2; }
}

@media (max-width: 767px) {
    body[class*="theme-"] #dt-header-section .custommegamenu-listing { column-count: 1; }
}

/* ═══ لوحة الدورات: البنية المشتركة ══════════════════════════
   الهيكل واحد — رأس فيه العنوان والإجماليات، شبكة كروت، وذيل فيه
   إجراءين. والهوية بتيجي لوحدها من حاجتين: أيقونات كل معهد مرسومة
   بأسلوبه، وألوانه من متغيراته. وكل ثيم بيزوّد لمسته بعد كده.
   ═══════════════════════════════════════════════════════════ */

body[class*="theme-"] .inst-mega {
    padding: 4px 0 0;

    /* الـ.container بتاعة الـmegamenu بـdisplay: flex، فاللوحة كانت
       بتبقى عنصر مرن وتتقلّص لعرض محتواها (388px من 1379) والشبكة
       تطلع عمود واحد. flex-basis كامل بيخليها تملا الصف. */
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;

    /* الحشو الجانبي من اللوحة نفسها مش من الحاوية: حاوية الـmegamenu
       حشوها صفر في بعض الثيمات، فالكلام كان بيلزق في حرف الشاشة
       ويتقص. كده اللوحة مضمونة عند أي ثيم. */
    padding-inline: 24px;
}

/* الكروت: عمود بيتحدد بالعرض المتاح مش برقم ثابت، فالشبكة بتفضل
   متزنة على أي شاشة. */
body[class*="theme-"] .inst-mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 2px 18px;
}

body[class*="theme-"] .inst-mega-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    text-decoration: none !important;
    border-bottom: 1px solid var(--inst-mega-line, rgba(16, 26, 51, .08));
    transition: background .16s ease, padding .16s ease;
}

body[class*="theme-"] .inst-mega-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

body[class*="theme-"] .inst-mega-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .86rem;
    line-height: 1.3;
    color: var(--nav-ink, #22304a);
}

/* العدد: رقم حقيقي محسوب من دورات المعهد نفسه. */
/* عدد الدورات جنب كل تخصص اتشال من كل المواقع — طلب صريح. كان
   قبل كده بيتشال لعمان بس بقاعدة محلية في omani.css؛ دلوقتي هنا
   في القاعدة المشتركة فبيتطبق على أي معهد بيستخدم هذا العنصر.
   !important: بعض الثيمات (السعودي مثلاً) عندها display: inline-flex
   خاصة بيها لشكل القرص، وبتحمّل بعد الملف ده فكانت بتكسب وترجّع
   الرقم يظهر. من غير !important الإخفاء كان بيبقى غير مضمون لأي
   ثيم عنده تصريح display خاص، حالي أو مستقبلي. */
body[class*="theme-"] .inst-mega-n { display: none !important; }

body[class*="theme-"] .inst-mega-card:hover {
    background: var(--inst-mega-hover, rgba(16, 26, 51, .04));
}

body[class*="theme-"] .inst-mega-card:hover .inst-mega-name { color: var(--site-primary, #244298); }

/* العمود الجانبي مخفي افتراضياً — الثيم اللي شكله محتاجه بيظهره. */
body[class*="theme-"] .inst-mega-aside { display: none; }

/* خانة المدينة جوّه عمود البحث — مخفية افتراضياً زي العمود نفسه،
   والثيم اللي عايزها بيظهرها (global مثلاً). */
body[class*="theme-"] .inst-mega-aside-city { display: none; }

/* ═══ القائمة تفضل مفتوحة والتركيز جواها ════════════════════
   القائمة بتفتح بـ:hover على البند. أول ما تضغط على select جواها،
   المتصفح بيفتح قائمة النظام والمؤشر بيخرج من البند — فالـ:hover
   بيروح والقائمة بتتقفل قبل ما تختار.

   :focus-within بيمسكها مفتوحة طول ما فيه عنصر جواها ماسك التركيز.
   الخصائص هي نفس اللي في قاعدة الـ:hover الأصلية بالحرف، عشان
   الحالتين يبانوا واحدة.
   ═══════════════════════════════════════════════════════════ */

body[class*="theme-"] #dt-header-section .navbar-hover .dropdown:focus-within > .dropdown-menu,
body[class*="theme-"] #dt-header-section .navbar-hover .nav-item:focus-within > .dropdown-menu,
body[class*="theme-"] #dt-header-section .dropdown:focus-within > .dropdown-menu,
body[class*="theme-"] #dt-header-section .nav-item:focus-within > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: rotateX(0);
    -webkit-transform: rotateX(0);
}

/* ═══════════════════════════════════════════════════════════
   الفرق الحقيقي وراء "السهم بيفتح بس مش بيقفل" (طلب صريح، كل
   المواقع بما فيهم المعهد)

   القائمة كانت بتتقفل صح من ناحية JS (primary_desktop_menu.php
   بيشيل/يحط .show بالضغط)، لكن اتنين قاعدة تانيين مستقلين خالص عن
   .show كانوا بيفرضوا ظهورها برضو:
     - fullcss.css: .dropdown:hover > .dropdown-menu { display:block }
       — لسه الماوس واقف على البند بعد الضغطة، فالـ:hover لسه شغال.
     - القاعدة اللي فوق دي هنا: :focus-within — الرابط اللي ضغط عليه
       لسه ماسك التركيز (focus) بعد الضغطة، فبرضو بيفضل ظاهر.
   ضغطة تانية بتشيل .show، لكن :hover و:focus-within لسه صادقين،
   فالقائمة تفضل ظاهرة بصريًا زي ما هي بالظبط. القاعدة دي بتقفل
   الاتنين إجباريًا لحد ما .show نفسها تتحط — يعني .show بقى
   المصدر الوحيد لظهور القائمة في الشريط الرئيسي، مش hover ولا
   focus. بلا theme[class*=] عشان تشتغل لالمعهد برضو (نفس العلة
   موجودة عنده). */
#dt-header-section .navbar-nav > li.dropdown > .dropdown-menu:not(.show),
#dt-header-section .navbar-nav > li.has-megamenu > .dropdown-menu:not(.show) {
    display: none !important;
}

/* والبلور بيتشال في الحالة دي كمان، وإلا القائمة بترجع تتحبس في
   عرض الشريط أول ما التركيز يمسكها. */
body.theme-gulf.page-home #dt-header-section .navbar-nav:has(li:focus-within) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ═══════════════════════════════════════════════════════════════
   كتل الصفحات الداخلية معروضة في الرئيسية (page_categories / page_cities)
   الكتلة نفسها بتاعة صفحة /categories أو /cities زي ما هي — هنا بس
   عنوان القسم وتلوين الكارت بألوان المعهد (--site-primary/--site-accent).
   ═══════════════════════════════════════════════════════════════ */
.inst-pagegrid { padding: 48px 0 24px; }
.inst-pagegrid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 6px; }
.inst-pagegrid-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--site-primary, #244298); margin: 0; }
.inst-pagegrid-head a { font-weight: 700; color: var(--site-primary, #244298); white-space: nowrap; }
.inst-pagegrid .box2 { border-top: 3px solid var(--site-accent, var(--site-primary, #244298)); }
.inst-pagegrid .box2 h6 { color: var(--site-primary, #244298); }
.inst-pagegrid .box2 a { color: var(--site-primary, #244298); }
.inst-pagegrid .categorypage-icon img { filter: none; }
.inst-pagegrid--cities .widget-content p { color: var(--site-accent, #6c757d); }
@media (max-width: 767px) {
    .inst-pagegrid { padding: 32px 0 12px; }
    .inst-pagegrid-head h2 { font-size: 1.2rem; }
}

/* Executive Coaching على الرئيسية: نفس ماركب الصفحة الداخلية (box4/box6.dark-bg/blended).
   التنسيق كله من fullcss؛ الفرق الوحيد هنا: لون اللوح الغامق = لون المعهد بدل أزرق المعهد. */
.inst-coaching .dark-bg { background: var(--site-primary, #244298) !important; }
.inst-coaching .institute-h1, .inst-coaching .inst-page-h1 { color: var(--site-primary, #244298); }

/* ═══ طلب صريح (2026-09-05، كل المعاهد): عنوان كارت التخصص في الرئيسية
   خط عادي مش بولد وأصغر شوية. قاعدة واحدة لكل الثيمات؛ الأولوية بـ!important
   لأن كل ثيم بيحدد وزن الخط بتاعه. المعهد مش بيحمّل الملف ده أصلاً. ═══ */
.mw-category-title, .gf-categories-title, .gl-cats-title, .ld-categories-title,
.sa-categories-name, .sa-categories-strip, .om-categories-tag, .gm-categories-title,
.ar-categories-title, .sm-categories-title, .pl-category-title, .ab-categories-title {
    font-weight: 400 !important;
    font-size: .82rem !important;
    line-height: 1.3 !important;
}

/* ═══════════════════════════════════════════════════════════════
   كتل الصفحات الداخلية على الرئيسية (_pageblock.php) — بديل Value Proposition
   (طلب صريح 2026-09-06). الكتلة نفسها من الصفحة الداخلية؛ هنا بس عنوان القسم،
   مسافات مضغوطة، وتلوين الكروت/الألواح بألوان المعهد بدل أزرق المعهد.
   ═══════════════════════════════════════════════════════════════ */
.inst-pageblock { padding: 40px 0 16px; }
.inst-pageblock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 4px; }
.inst-pageblock-head h2 { font-size: 1.5rem; font-weight: 800; color: var(--site-primary, #244298); margin: 0; }
.inst-pageblock-head a { font-weight: 700; color: var(--site-primary, #244298); white-space: nowrap; }
.inst-pageblock-body .space30, .inst-pageblock-body .space40, .inst-pageblock-body .space50 { height: 12px; }
.inst-pageblock-body #common-listing-section { padding-top: 0; }
.inst-pageblock-body .box4 { box-shadow: 0 6px 18px rgba(0,0,0,.05); border-top: 3px solid var(--site-accent, var(--site-primary, #244298)); }
.inst-pageblock-body h4, .inst-pageblock-body h5, .inst-pageblock-body h6 { color: var(--site-primary, #244298); }
.inst-pageblock-body .dark-bg { background: var(--site-primary, #244298) !important; }
.inst-pageblock-body .sky-bg { background: var(--site-accent, var(--site-primary, #244298)) !important; }
.inst-pageblock-body .dark-bg h4, .inst-pageblock-body .sky-bg h4, .inst-pageblock-body .color-white { color: #fff; }
.inst-pageblock-body a.btn, .inst-pageblock-body .btn-primary { background: var(--site-primary, #244298) !important; border-color: var(--site-primary, #244298) !important; }
/* الخدمات: البلاطات اللي صفحتها متقاعدة عند المعاهد (site_hidden_pages) مش بتظهر */
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/consulting"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/executive-coaching"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/team-coaching"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href*="individual-training-program"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/certified-training-courses"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/meirc-corporate-retreats"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/leadership-development-program"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/certificate-verification"]),
.inst-pageblock--services .allservices-listing-wrap-box:has(a[href$="/idp-builder"]) { display: none; }
@media (max-width: 767px) { .inst-pageblock { padding: 28px 0 10px; } .inst-pageblock-head h2 { font-size: 1.2rem; } }

/* ═══════════════════════════════════════════════════════════════
   أجزاء من أقسام www.institute.com على رئيسية المعاهد (طلب صريح 2026-09-06)
   part_values_strip / part_cta / part_offices — الألوان من متغيّرات الثيم.
   ═══════════════════════════════════════════════════════════════ */
.inst-values-strip { padding: 34px 0; background: #fff; border-top: 1px solid #e6eaf0; border-bottom: 1px solid #e6eaf0; }
.inst-values-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.inst-values-strip-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-inline-start: 4px solid var(--site-accent, var(--site-primary, #244298)); background: #f7f9fb; border-radius: 6px; font-size: .9rem; line-height: 1.4; color: #1e2a3a; }
.inst-values-strip-list img { width: 40px; height: 40px; flex: 0 0 40px; object-fit: contain; }
.inst-cta { padding: 44px 0; background: var(--site-primary, #244298); color: #fff; }
.inst-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.inst-cta-copy h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.inst-cta-copy p { margin: 0; opacity: .9; }
.inst-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.inst-cta-btn { display: inline-block; padding: 11px 20px; border-radius: 6px; font-weight: 700; font-size: .9rem; text-decoration: none; border: 2px solid #fff; color: #fff; transition: background .15s, color .15s; }
.inst-cta-btn--solid { background: var(--site-accent, #fff); border-color: var(--site-accent, #fff); color: #fff; }
.inst-cta-btn:hover { background: #fff; color: var(--site-primary, #244298); text-decoration: none; }
.inst-offices { padding: 44px 0; }
.inst-offices-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: #fff; border-radius: 12px; padding: 24px 28px; box-shadow: 0 8px 24px rgba(0,0,0,.06); border-inline-start: 6px solid var(--site-primary, #244298); }
.inst-offices-head { display: flex; align-items: center; gap: 12px; }
.inst-offices-head i { font-size: 1.6rem; color: var(--site-accent, var(--site-primary, #244298)); }
.inst-offices-head h2 { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--site-primary, #244298); }
.inst-offices-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.inst-offices-list li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.inst-offices-list i { color: var(--site-primary, #244298); }
.inst-offices-list a { color: #1e2a3a; }
.inst-offices-more { padding: 10px 18px; border-radius: 6px; background: var(--site-primary, #244298); color: #fff !important; font-weight: 700; text-decoration: none; }
@media (max-width: 991px) { .inst-values-strip-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .inst-values-strip-list { grid-template-columns: 1fr; } }

/* Online Snippets على الرئيسية: زر "More Snippets" كان نصه بنفس لون خلفيته عند بعض الثيمات */
.inst-pageblock--snippets a.btn-primary-outline { background: var(--site-primary, #244298) !important; border-color: var(--site-primary, #244298) !important; color: #fff !important; }
.inst-pageblock--snippets button.btn-primary-outline { background: #fff !important; border-color: var(--site-primary, #244298) !important; color: var(--site-primary, #244298) !important; }
.inst-pageblock--snippets .btn-primary-outline:hover { opacity: .88; }

/* ═══ خانة بديل Value Proposition مطوية (طلب صريح 2026-09-06) ═══
   المحتوى في الـHTML (مقروء لجوجل) ومخفي بـhidden لحد ما الزائر يفتحه بالزر. */
.inst-fold { padding: 10px 0 0; }
.inst-fold-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--site-primary, #244298); color: var(--site-primary, #244298); border-radius: 999px; padding: 6px 16px; font-size: .84rem; font-weight: 700; cursor: pointer; }
.inst-fold-toggle i { transition: transform .2s ease; }
.inst-fold-toggle.is-open i { transform: rotate(180deg); }
.inst-fold-toggle:hover { background: var(--site-primary, #244298); color: #fff; }
.inst-fold-body[hidden] { display: none !important; }

/* ═══ Executive Coaching على الرئيسية: بدون صورة، النص كله في المنتصف ومنسّق (طلب صريح 2026-09-06) ═══ */
.inst-coaching .inst-coaching-centered { text-align: center; max-width: 900px; margin: 0 auto; padding: 10px 20px 4px; }
.inst-coaching .inst-coaching-centered h2.institute-h1, .inst-coaching .inst-coaching-centered h2.inst-page-h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 2px; }
.inst-coaching .inst-coaching-centered h4.institute-h1, .inst-coaching .inst-coaching-centered h4.inst-page-h1 { font-size: 1.15rem; font-weight: 600; opacity: .9; }
.inst-coaching .inst-coaching-centered p.text-justify { text-align: center !important; line-height: 1.8; color: #444; margin: 0 auto; }
.inst-coaching .inst-coaching-centered ul { list-style: none; padding: 0; margin: 12px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 26px; max-width: 820px; text-align: start; }
.inst-coaching .inst-coaching-centered ul li { position: relative; padding-inline-start: 18px; color: #333; white-space: nowrap; }
.inst-coaching .inst-coaching-centered ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--site-primary, #244298); }
@media (max-width: 767px) { .inst-coaching .inst-coaching-centered ul { grid-template-columns: 1fr; } }

/* =====================================================================
   /training-courses — الأساس المشترك للمعاهد (2026-09-07)
   body بياخد pg-training-courses على المعاهد فقط (المعهد من غيره).
   القائمة بتتحوّل لشبكة CSS grid عشان كل ثيم يحدّد أعمدته وشكل كارته في
   ملفه؛ الفلتر (نفس الـIDs وupcoming.js) والماركب من غير أي تغيير.
   ===================================================================== */
body.pg-training-courses #course_list{display:grid;gap:18px;margin:0;grid-template-columns:repeat(2,1fr)}
body.pg-training-courses #course_list > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0;min-width:0}
body.pg-training-courses #course_list > .col-lg-12{grid-column:1/-1}
body.pg-training-courses .courselisting-col > a{display:block;height:100%;color:inherit;text-decoration:none}
body.pg-training-courses .courselisting{position:relative;height:100%;margin:0;text-align:start}
body.pg-training-courses .course-title,body.pg-training-courses .course-date,body.pg-training-courses .course-language,body.pg-training-courses .course-location,body.pg-training-courses .course-time{text-align:start}
body.pg-training-courses .course-image img{display:block;width:100%}
body.pg-training-courses #common-filter-box-modal-one .filter-courselist-wrap > .col-md-12{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
body.pg-training-courses #common-filter-box-modal-one .form-control{float:none;margin:0}
body.pg-training-courses #common-filter-box-modal-one .menu-two{float:none;margin:0}
body.pg-training-courses #common-filter-box-modal-one .menu-two.float-right{margin-inline-start:auto}
@media (max-width:575px){body.pg-training-courses #course_list{grid-template-columns:1fr}}

/* =====================================================================
   /training-courses — تخطيط "فلتر جانبي + جدول صفوف" (2026-09-07)
   الغلاف institute/courses/upcoming_sidebar.php بيحط الفلتر الأصلي في عمود
   جانبي والقائمة الأصلية في العمود الرئيسي؛ هنا الكارت بيتحوّل لصف جدول.
   الثيمات (global/leaders/saudi/smart/plus) بتلوّن وتغيّر التفاصيل بس.
   ===================================================================== */
.inst-tc{padding:26px 0 30px}
.inst-tc-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.inst-tc .container .container{width:100%;max-width:100%;min-width:0!important;padding:0}
.inst-tc #common-filter-box-modal-one{margin:0;padding:0;z-index:auto}
.inst-tc #common-filter-box-modal-one .box2{margin:0;padding:14px;box-shadow:none;border-radius:0}
.inst-tc #common-filter-box-modal-one .filter-courselist-wrap > .col-md-12{flex-direction:column;align-items:stretch;gap:8px}
.inst-tc #common-filter-box-modal-one form{display:flex;flex-direction:column;gap:8px}
.inst-tc #common-filter-box-modal-one .form-control{width:100%;max-width:none;min-width:0;height:38px;margin:0}
.inst-tc #common-filter-box-modal-one .menu-two{text-align:center;padding:6px 10px}
.inst-tc #common-filter-box-modal-one .menu-two.float-right{margin:0}
.inst-tc #common-filter-box-modal-one .filter-area-courselist-dropdown{display:none}
.inst-tc-side{position:sticky;top:16px}
.inst-tc-side-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #e5e8ec}
.inst-tc-side-title{font-weight:700;font-size:.95rem}
.inst-tc-side-reset{font-size:.78rem;text-decoration:underline;text-underline-offset:3px}
.inst-tc-cta{display:block;margin-top:14px;padding:16px 18px;text-decoration:none!important;position:relative}
.inst-tc-cta-kicker{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:4px}
.inst-tc-cta-text{display:block;font-weight:700;font-size:.95rem;line-height:1.35;padding-inline-end:28px}
.inst-tc-cta .bi{position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);font-size:1.2rem}
.inst-tc #common-white-section{padding:0}
.inst-tc #common-white-section .box{padding:0;box-shadow:none;background:transparent;border-radius:0}
.inst-tc-head,.inst-tc .courselisting{display:grid;grid-template-columns:minmax(0,1fr) 140px 100px 120px 110px minmax(0,190px) 128px;gap:0 12px;align-items:center}
.inst-tc-head{padding:10px 16px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.inst-tc-head span{text-align:start}
.inst-tc #course_list,.inst-tc #category_course_list,.inst-tc #category_course_list_by_name{display:block;margin:0}
.inst-tc #course_list > .courselisting-col,.inst-tc #category_course_list > .courselisting-col,.inst-tc #category_course_list_by_name > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0}
.inst-tc .courselisting-col > a{display:block;color:inherit;text-decoration:none}
.inst-tc .courselist-style-inside .courselisting,.inst-tc .courselist-style-inside .courselisting.virtual{position:relative;height:auto;padding:12px 16px;margin:0;border-radius:0;box-shadow:none;text-align:start}
.inst-tc .courselisting .course-image,.inst-tc .courselisting .space5,.inst-tc .courselisting .space15{display:none}
.inst-tc .course-title{min-height:0;font-size:.92rem;line-height:1.35;-webkit-line-clamp:2}
.inst-tc .course-date,.inst-tc .course-language,.inst-tc .course-location,.inst-tc .course-time{font-size:.82rem;line-height:1.35;text-align:start}
.inst-tc .courselisting .course-time{height:auto!important;-webkit-line-clamp:2!important}
.inst-tc .courselisting i.bi{display:none}
.inst-tc .courselisting form{margin:0}
.inst-tc .courselisting .btn-primary{padding:5px 8px;font-size:.78rem;white-space:nowrap}
.inst-tc .course-image-vl-icon{display:none}
.inst-tc #ajax_load{padding:16px 0}
@media (max-width:1399px){
  .inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) 130px 100px 110px minmax(0,170px) 120px}
  .inst-tc-h-lang,.inst-tc .courselisting .course-language:first-of-type{display:none}
}
@media (max-width:1199px){
  .inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) 120px 100px 120px}
  .inst-tc-h-type,.inst-tc-h-venue,.inst-tc .courselisting .course-language,.inst-tc .courselisting .course-time{display:none}
}
@media (max-width:991px){
  .inst-tc-grid{grid-template-columns:1fr;gap:18px}
  .inst-tc-side{position:static}
  .inst-tc-head{display:none}
  .inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .inst-tc .courselisting .course-title{grid-column:1/-1}
  .inst-tc .courselisting .course-date,.inst-tc .courselisting .course-location{display:block}
  .inst-tc .courselisting form{grid-column:1/-1;margin-top:6px}
}
/* القاعدة المشتركة الأعلى تخصيصًا (body.pg-training-courses #course_list = شبكة عمودين) كانت بتغلب قاعدة الصفوف */
body.pg-training-courses .inst-tc #course_list,body.pg-training-courses .inst-tc #category_course_list,body.pg-training-courses .inst-tc #category_course_list_by_name{display:block;grid-template-columns:none;gap:0}
/* زر Clear الأصلي جوّه الفورم (نصه بيختفي بألوان .darkblue-color) مستغنى عنه: رأس الفلتر الجانبي فيه رابط Clear */
.inst-tc #common-filter-box-modal-one .menu-two.darkblue-color{display:none}
/* حقل السنة له inline style بعرض 90px، وزر الكتيب يبقى بعرض العمود الجانبي */
.inst-tc #common-filter-box-modal-one .form-control{max-width:none!important;min-width:0!important}
.inst-tc #common-filter-box-modal-one .menu-two.float-right{width:100%}
/* (2026-09-07) طلب صريح: "شيل الـVenue من جميع المواقع" — سطر المكان (.course-time) مخفي على صفحة الدورات في كل المعاهد (المعهد من غير الكلاس فمش بيتأثر)، وشبكة الجدول من غير عمود المكان */
body.pg-training-courses .courselisting .course-time{display:none!important}
body.pg-training-courses .inst-tc-h-venue{display:none!important}
/* (2026-09-18) طلب صريح: خانة اختيار المدينة اتشالت خالص من صفوف كل
   القوايم (فضلت بس في بيانات الدورة وصفحة التسجيل) — عمود المدينة بقى
   فاضي تمامًا زي عمود Venue بالظبط، فاتشال بنفس المعالجة من القاعدة
   المشتركة (بتخدم كل معهد بيستخدم .inst-tc، مش كل ثيم لوحده). */
body.pg-training-courses .inst-tc-h-city{display:none!important}
.inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) 150px 110px 130px 128px}
@media (max-width:1399px){.inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) 140px 100px 120px 120px}.inst-tc-h-lang{display:block}}
@media (max-width:1199px){.inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) 130px 120px}.inst-tc-h-lang,.inst-tc-h-type,.inst-tc .courselisting .course-language{display:none}}
@media (max-width:991px){.inst-tc-head,.inst-tc .courselisting{grid-template-columns:minmax(0,1fr) auto}}
/* (2026-09-07) زر Clear في شريط الفلتر: _brand.css بيدي .menu-two لون نص = لون الموقع و.darkblue-color خلفية = نفس اللون → النص كان مختفي (الخليج/جلوماك/...) */
body.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color{color:#fff!important;padding:3px 14px}
body.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color:hover{background:#fff!important;color:var(--site-primary,#244298)!important}
/* شريط الفلتر الأفقي: الحقول والأزرار على صف واحد بنفس الارتفاع (زر Clear كان أقصر من الحقول) */
body.pg-training-courses #common-filter-box-modal-one .filter-courselist-wrap > .col-md-12{align-items:stretch}
body.pg-training-courses #common-filter-box-modal-one .filter-courselist-wrap > .col-md-12 > form{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;flex:1 1 auto;min-width:0}
body.pg-training-courses #common-filter-box-modal-one .menu-two{display:inline-flex;align-items:center;justify-content:center;line-height:normal!important;height:auto}
/* (2026-09-07) طلب صريح: "في جميع المواقع هذه الصفحة خلي الكلام مش بولد وصغّر الخط شوية" — على /training-courses في المعاهد كلها (المعهد من غير الكلاس). توضيح لاحق: المقصود أسماء الدورات والمدن والتواريخ والفلتر فقط — عنوان البانر ونصه زي ما هما */
body.pg-training-courses .course-title{font-weight:400!important;font-size:.86rem!important;line-height:1.35!important}
body.pg-training-courses .course-date,body.pg-training-courses .course-language,body.pg-training-courses .course-location{font-weight:400!important;font-size:.76rem!important}
body.pg-training-courses .courselisting .btn-primary{font-weight:400!important;font-size:.76rem!important}
body.pg-training-courses .inst-tc-head{font-weight:400!important;font-size:.7rem!important}
body.pg-training-courses .inst-tc-side-title,body.pg-training-courses .inst-tc-cta-text{font-weight:400!important}
body.pg-training-courses .inst-tc-side-title{font-size:.86rem!important}
body.pg-training-courses .inst-tc-cta-text{font-size:.86rem!important}
body.pg-training-courses #common-filter-box-modal-one .form-control,body.pg-training-courses #common-filter-box-modal-one .menu-two{font-weight:400!important;font-size:.82rem!important}
/* (2026-09-07) صفوف الدورات الافتراضية مفيهاش مدينة فزر التسجيل كان بيتزحلق لعمود المدينة → الزر دايمًا في آخر عمود */
.inst-tc .courselisting form{grid-column:-2/-1}
/* (2026-09-07) "اسم الدورة مش ظاهر" (العربي): اسم الدورة كامل بدون قصّ في كل المعاهد — fullcss بتقصّه على سطرين (line-clamp) */
body.pg-training-courses .course-title{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;max-height:none!important;min-height:0!important;height:auto!important}
/* (2026-09-07) زر تسجيل الدورات الافتراضية هو .btn-secondary (لون accent من _brand.css) ونصه كان بيختفي عند المرور (brand: لون النص عند المرور = نفس لون الخلفية) */
body.pg-training-courses .courselisting .btn-secondary{font-weight:400!important;font-size:.76rem!important}
body.pg-training-courses .courselisting .btn-secondary:hover,body.pg-training-courses .courselisting .btn-secondary:focus,body.pg-training-courses .courselisting:hover .btn-secondary{color:#fff!important;filter:brightness(.88)}
/* (2026-09-07) "مربع التسجيل مش في حذا بعض": الكارت عمود flex وزر التسجيل مدفوع لأسفل الكارت فيتساوى في الصف كله (الكروت متساوية الارتفاع من الـgrid) — الثيمات اللي كارتها grid (سمارت/بلس) ليها قاعدة خاصة */
body.pg-training-courses #course_list > .courselisting-col > a{display:flex;flex-direction:column}
body.pg-training-courses .courselist-style-inside .courselisting:not(.inst-tc *){flex:1 1 auto}
body.theme-almawred.pg-training-courses .courselisting,body.theme-gulf.pg-training-courses .courselisting,body.theme-omani.pg-training-courses .courselisting,body.theme-glomac.pg-training-courses .courselisting,body.theme-arabi.pg-training-courses .courselisting,body.theme-abfa.pg-training-courses .courselisting{display:flex;flex-direction:column}
body.theme-almawred.pg-training-courses .courselisting form,body.theme-gulf.pg-training-courses .courselisting form,body.theme-omani.pg-training-courses .courselisting form,body.theme-glomac.pg-training-courses .courselisting form,body.theme-arabi.pg-training-courses .courselisting form,body.theme-abfa.pg-training-courses .courselisting form{margin-top:auto}
body.theme-smart.pg-training-courses .courselisting{grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
body.theme-smart.pg-training-courses .courselisting form{align-self:end}
body.theme-plus.pg-training-courses .courselisting{grid-template-rows:auto auto auto auto minmax(0,1fr)}
body.theme-plus.pg-training-courses .courselisting form{align-self:end}
/* عند المرور على أي زر تسجيل النص أبيض دايمًا (الثيمات اللي خلفية المرور فيها فاتحة عندها قاعدة أعلى تخصيصًا بلون داكن) */
body.pg-training-courses .courselisting .btn-primary:hover,body.pg-training-courses .courselisting .btn-primary:focus,body.pg-training-courses .courselisting:hover .btn-primary,body.pg-training-courses .courselisting .btn-secondary:hover,body.pg-training-courses .courselisting .btn-secondary:focus,body.pg-training-courses .courselisting:hover .btn-secondary{color:#fff!important}
/* (2026-09-07) طلب صريح: صفحة /training-courses على المعاهد للدورات الحضورية فقط (الأونلاين لها صفحتها) → خانة نوع الدورة مخفية من الفلتر (الكونترولر بيفرض حضوري لما النوع = 0) */
body.pg-training-courses #sort_course_type,body.pg-training-courses #sort_course_type_mob{display:none!important}
body.pg-training-courses #sort_course_type_mob + .space20{display:none}
/* (2026-09-07) صفحة الأونلاين /online-training/courses بنفس تصميم صفحة الحضوري: نفس كلاس body، وفي مواقع الفلتر الجانبي الجدول من غير عمود المدينة (الأونلاين ملهوش مدينة) */
.inst-tc--online .inst-tc-h-city{display:none!important}
@media (min-width:1200px){.inst-tc--online .inst-tc-head,.inst-tc--online .courselisting{grid-template-columns:minmax(0,1fr) 150px 110px 130px 128px}}
@media (min-width:992px) and (max-width:1199px){.inst-tc--online .inst-tc-head,.inst-tc--online .courselisting{grid-template-columns:minmax(0,1fr) 130px 120px}}
/* (2026-09-07) صورة بانر صفحة الأونلاين عليها اسم وشعار المعهد ("Institute Online Learning") → مخفية على المعاهد */
body.pg-training-courses.page-online #common-banner-section-image .common-banner-image{display:none!important}
/* بانر الأونلاين: الكتلة اليمنى فيديو يوتيوب مضمّن بعلامة المعهد (.common-video-right) → مخفي على المعاهد والنص بياخد العرض */
body.pg-training-courses.page-online #common-banner-section-image .common-video-right{display:none!important}
body.pg-training-courses.page-online #common-banner-section-image .common-videotext-left{flex:0 0 100%;max-width:100%}

/* --- btn-secondary = btn-primary (2026-09-07) --- */
/* صفحة الأونلاين بنفس تصميم الحضوري: زر الدورات الافتراضية (.btn-secondary) بنفس تنسيق الزر العادي */
body.pg-training-courses .courselisting .btn-secondary{font-weight:400!important;font-size:.76rem!important}
/* (2026-09-07) مراجعة تطابق صفحة الأونلاين مع الحضوري: شارة "افتراضي" الزرقاء على الصورة مخفية (النوع مكتوب في الكارت)، وحد كارت الافتراضي زي العادي */
body.pg-training-courses .course-image-vl-icon{display:none!important}
body.pg-training-courses .courselist-style-inside .courselisting.virtual{border-color:inherit}
/* _brand.css بيدي كارت الافتراضي حد بلون accent وكارت العادي حد بلون الموقع (!important) → على صفحات الدورات في المعاهد الاتنين بنفس لون الموقع عشان الأونلاين يطابق الحضوري */
body.pg-training-courses .courselist-style-inside .courselisting.virtual{border-color:var(--site-primary,#244298)!important}
/* (2026-09-07) "لما بعمل سكرول جزء من الفلتر بيختفي": اللوحة الجانبية كانت sticky وبتدخل تحت الهيدر الثابت → بقت عادية بتتحرك مع الصفحة */
.inst-tc-side{position:static}
/* (2026-09-07) "عايز الفلتر بالكامل يتحرك مع السكرول": اللوحة sticky تاني، والمسافة من فوق (top) بيحسبها سكريبت صغير في upcoming_sidebar.php حسب ارتفاع الهيدر الثابت عشان ماتدخلش تحته */
.inst-tc-side{position:sticky;top:16px}
/* (2026-09-18) "لما بعمل سكرول الدورات بتخبي الفلتر" على الموبايل: قاعدة
   position:static اللي جوّه @media(max-width:991px) فوق (سطر ~1913) كانت
   بتتغلب بالترتيب من الـsticky اللي بعدها بنفس القوة — فاللوحة (٣٤٠-٣٨٠px)
   كانت بتفضل لازقة تحت الهيدر والكروت بتعدّي فوقها وتغطيها. الاستثناء هنا
   بعد التعريف عشان يكسب. الـsticky يفضل على الديسك توب (عمود جانبي). */
@media (max-width:991px){.inst-tc-side{position:static!important;z-index:auto!important}}
/* (2026-09-18) "الفلتر بيخبي المنيو" (ليدرز): z-index:30 على اللوحة كان شغال
   حتى وهي static لأنها عنصر جوّه grid (.inst-tc-grid) — عناصر grid/flex بتحترم
   z-index من غير position. فكانت بتترسم فوق الهيدر الثابت (z-index:9) وهي
   بتعدّي تحته وقت السكرول. على الموبايل الهيدر لازم يفضل فوق. */
/* (2026-09-07) "في مربعات أكبر من مربعات" (سمارت): في وضع الكروت جنب الفلتر الجانبي الكارت ياخد ارتفاع صف الشبكة كله فيتساوى مع جيرانه */
.inst-tc--cards #course_list > .courselisting-col > a,.inst-tc--cards .courselist-style-inside .courselisting,.inst-tc--cards .courselist-style-inside .courselisting.virtual{height:100%}
/* (2026-09-07) طلب صريح: شارة "Plus" الصغيرة على صور الدورات وأيقونة "أونلاين" على صور الدورات الافتراضية تتشال خالص من كل المعاهد (في كل الصفحات — الملف ده مش بيتحمّل لالمعهد) */
.course-image-plus-icon,.course-image-vl-icon{display:none!important}
/* (2026-09-07) صفحة الدورات العربية بنفس تصميم صفحة الدورات؛ خانة نوع الدورة تفضل ظاهرة فيها (فيها حضوري وأونلاين) — بنميّزها بزر كتيبها */
body.pg-training-courses:has(#download_brochure_arabic) #sort_course_type,body.pg-training-courses:has(#download_brochure_arabic) #sort_course_type_mob{display:block!important}

/* =====================================================================
   /services/in-house-courses — محتوى المعاهد (2026-09-07): خطوات + مزايا + زر.
   الألوان من متغيرات الموقع فكل معهد بلونه؛ البانر بياخد تصميم بانر صفحة الدورات.
   ===================================================================== */
.inst-ih{padding:34px 0 44px}
.inst-ih-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.inst-ih-h{font-size:1.3rem;font-weight:700;margin:0 0 18px;color:var(--site-primary,#244298);position:relative;padding-bottom:10px}
.inst-ih-h::after{content:'';position:absolute;inset-inline-start:0;bottom:0;width:48px;height:3px;background:var(--site-accent,#0096d4);border-radius:2px}
.inst-ih-steps,.inst-ih-benefits{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:26px 26px 24px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.inst-ih-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.inst-ih-list li{display:flex;gap:16px;align-items:flex-start}
.inst-ih-num{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--site-primary,#244298);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.inst-ih-body{display:flex;flex-direction:column;gap:4px;line-height:1.6}
.inst-ih-body strong{color:#1f2a37;font-size:1rem}
.inst-ih-body span{color:#5b6570;font-size:.93rem}
.inst-ih-checks{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.inst-ih-checks li{display:flex;gap:12px;align-items:flex-start;color:#1f2a37;line-height:1.55;font-size:.95rem}
.inst-ih-checks li .bi{color:var(--site-accent,#0096d4);font-size:1.25rem;line-height:1.2;flex:0 0 auto}
.inst-ih-cta{display:inline-block;border-radius:6px;padding:10px 24px;font-weight:600}
@media (max-width:991px){.inst-ih-grid{grid-template-columns:1fr}}
/* (2026-09-07) صفحات الإنجليزية والمدينة والتخصص بنفس تصميم صفحة الدورات؛ خانة نوع الدورة تفضل ظاهرة فيها (فيها حضوري وأونلاين) */
body.pg-training-courses:has(#download_brochure_english) #sort_course_type,body.pg-training-courses:has(#download_brochure_english) #sort_course_type_mob,body.pg-training-courses:has(#download_brochure_city) #sort_course_type,body.pg-training-courses:has(#download_brochure_city) #sort_course_type_mob,body.pg-training-courses:has(#download_brochure_category) #sort_course_type,body.pg-training-courses:has(#download_brochure_category) #sort_course_type_mob{display:block!important}

/* =====================================================================
   الصفحات الداخلية على المعاهد (2026-09-07): كتلة التواصل في تفاصيل الدورة (.inst-cra)
   وبطاقة بيانات المعهد في اتصل بنا (.inst-contact-*). الألوان من متغيرات الموقع.
   ===================================================================== */
.inst-cra{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.inst-cra--desktop{position:absolute;inset-inline-end:12px;top:-30px;z-index:3;max-width:520px}
.inst-cra--mobile{margin:12px 0}
.inst-cra-head{display:flex;align-items:center;gap:10px;padding-inline-end:16px;border-inline-end:1px solid rgba(0,0,0,.08)}
.inst-cra-head > .bi{font-size:1.8rem;color:var(--site-primary,#244298)}
.inst-cra-head strong{display:block;color:#1f2a37;font-size:.9rem;line-height:1.2}
.inst-cra-head span{display:block;color:#6b7580;font-size:.72rem}
.inst-cra-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.inst-cra-list li{display:flex;align-items:center;gap:6px;font-size:.8rem}
.inst-cra-list li .bi{color:var(--site-accent,#0096d4)}
.inst-cra-list a{color:#1f2a37;text-decoration:none}
.inst-cra-list a:hover{color:var(--site-primary,#244298)}
@media (max-width:991px){.inst-cra--desktop{position:static;max-width:none;margin:10px 0}}
.inst-contact-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:30px 32px;box-shadow:0 8px 24px rgba(0,0,0,.05);height:100%}
.inst-contact-h{font-size:1.5rem;font-weight:700;color:var(--site-primary,#244298);margin:0 0 10px}
.inst-contact-lead{color:#5b6570;line-height:1.7;margin:0 0 22px}
.inst-contact-list{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.inst-contact-list li{display:flex;gap:12px;align-items:flex-start}
.inst-contact-list li .bi{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--site-primary,#244298) 10%,#fff);color:var(--site-primary,#244298);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.inst-contact-list li span{display:flex;flex-direction:column;gap:2px;font-size:.92rem;color:#1f2a37}
.inst-contact-list li b{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#6b7580;font-weight:600}
.inst-contact-list li a{color:#1f2a37;text-decoration:none}
.inst-contact-list li a:hover{color:var(--site-accent,#0096d4)}
.inst-contact-links{display:flex;flex-wrap:wrap;gap:10px}
.inst-contact-links .btn{border-radius:6px;padding:9px 18px}
@media (max-width:767px){.inst-contact-list{grid-template-columns:1fr}}

/* =====================================================================
   صفحات المعاهد الداخلية (2026-09-07) — الأساس المشترك: عن المعهد (.inst-about)، الأسئلة الشائعة (.inst-faq)،
   الدورات العامة (.inst-pub)، العملاء (.inst-clients). كل ثيم بيغيّر التخطيط في ملفه.
   ===================================================================== */
.inst-about,.inst-faq,.inst-pub,.inst-clients{padding:34px 0 44px}
.inst-about-intro{font-size:1.05rem;line-height:1.8;color:#3d4752;max-width:920px;margin:0 0 30px}
.inst-about-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
.inst-about-pillar{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:26px 24px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.inst-about-pillar .bi{font-size:2rem;color:var(--site-accent,#0096d4);display:block;margin-bottom:12px}
.inst-about-pillar h2{font-size:1.15rem;font-weight:700;color:var(--site-primary,#244298);margin:0 0 8px}
.inst-about-pillar p{color:#5b6570;line-height:1.7;margin:0;font-size:.95rem}
.inst-about-h,.inst-faq-h,.inst-pub-h,.inst-clients-h{font-size:1.3rem;font-weight:700;color:var(--site-primary,#244298);margin:0 0 18px;position:relative;padding-bottom:10px}
.inst-about-h::after,.inst-faq-h::after,.inst-pub-h::after,.inst-clients-h::after{content:'';position:absolute;inset-inline-start:0;bottom:0;width:48px;height:3px;background:var(--site-accent,#0096d4);border-radius:2px}
.inst-about-offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}
.inst-about-offer{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:18px;text-decoration:none!important;color:#1f2a37;transition:transform .2s,box-shadow .2s}
.inst-about-offer:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08)}
.inst-about-offer > .bi{font-size:1.7rem;color:var(--site-primary,#244298);flex:0 0 auto}
.inst-about-offer-body{display:flex;flex-direction:column;gap:3px;flex:1}
.inst-about-offer-body strong{font-size:.98rem}
.inst-about-offer-body span{font-size:.85rem;color:#5b6570;line-height:1.5}
.inst-about-offer-arrow{color:var(--site-accent,#0096d4);font-size:1.2rem}
.inst-about-cta{text-align:center}
.inst-faq-grid{display:grid;grid-template-columns:1fr;gap:30px;max-width:980px}
.inst-faq-item{border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#fff;margin-bottom:10px;overflow:hidden}
.inst-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-weight:600;color:#1f2a37;font-size:.98rem}
.inst-faq-item summary::-webkit-details-marker{display:none}
.inst-faq-item summary .bi{color:var(--site-accent,#0096d4);transition:transform .25s;flex:0 0 auto}
.inst-faq-item[open] summary .bi{transform:rotate(45deg)}
.inst-faq-item[open] summary{color:var(--site-primary,#244298)}
.inst-faq-a{padding:0 18px 16px;color:#5b6570;line-height:1.75;font-size:.95rem}
.inst-faq-a p{margin:0}
.inst-faq-cta{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.inst-faq-cta p{margin:0;color:#3d4752;font-weight:600}
.inst-pub-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px}
.inst-pub-feat{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.inst-pub-feat .bi{font-size:2rem;color:var(--site-primary,#244298);display:block;margin-bottom:10px}
.inst-pub-feat h2{font-size:1.05rem;font-weight:700;margin:0 0 6px;color:#1f2a37}
.inst-pub-feat p{margin:0;color:#5b6570;line-height:1.65;font-size:.93rem}
.inst-pub-terms{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:28px}
.inst-pub-dl{margin:0 0 22px;display:grid;gap:16px}
.inst-pub-dl dt{font-weight:700;color:#1f2a37;margin-bottom:4px}
.inst-pub-dl dd{margin:0;color:#5b6570;line-height:1.7;font-size:.95rem}
.inst-pub-cta{display:flex;gap:10px;flex-wrap:wrap}
.inst-clients-intro{font-size:1.02rem;line-height:1.8;color:#3d4752;max-width:900px;margin:0 0 26px}
.inst-clients-grid{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.inst-clients-grid li{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:#1f2a37;font-size:.9rem;transition:transform .2s,box-shadow .2s}
.inst-clients-grid li:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.08)}
.inst-clients-grid li .bi{font-size:1.8rem;color:var(--site-primary,#244298)}
.inst-clients-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.inst-clients-cta p{margin:0;font-weight:600;color:#3d4752}
@media (max-width:991px){.inst-about-pillars,.inst-about-offers,.inst-pub-feats{grid-template-columns:1fr}.inst-clients-grid{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   قوائم التخصصات والمدن والمقالات/المدونات على المعاهد (2026-09-07) — الأساس المشترك:
   الشبكة grid بدل أعمدة bootstrap، والبطاقة بتتشكّل في كل ثيم. المعهد من غير كلاس pg-.
   ===================================================================== */
body.pg-training-courses #categorymain-listing-section .row.text-left,body.pg-training-courses #citymain-listing-section .row.text-left,body.pg-training-courses #common-listing-section .row.text-left{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0}
body.pg-training-courses .categorymain-listing-wrap-box,body.pg-training-courses .citymain-listing-wrap-box,body.pg-training-courses .common-listing-wrap-box{flex:none;max-width:none;width:auto;padding:0;margin:0;min-width:0}
body.pg-training-courses .categorymain-listing-wrap-box > .box2,body.pg-training-courses .citymain-listing-wrap-box .box2,body.pg-training-courses .common-listing-wrap-box > .box2{width:100%;height:100%;margin:0;display:flex;flex-direction:column;position:relative;box-shadow:none;border-radius:10px;border:1px solid rgba(0,0,0,.08);padding:18px}
body.pg-training-courses .categorymain-listing-wrap-box > .box2{flex-direction:row;align-items:center;gap:14px}
body.pg-training-courses .categorypage-icon{flex:0 0 56px;width:56px;height:56px!important;display:flex!important;align-items:center;justify-content:center;float:none;padding:0}
body.pg-training-courses .categorypage-icon img{max-width:100%;max-height:100%}
body.pg-training-courses .categorypage-content{flex:1;width:auto!important;height:auto!important;display:block!important;float:none;padding:0}
body.pg-training-courses .categorypage-content h6{font-size:.92rem;font-weight:600;margin:0 0 4px;line-height:1.35;color:#1f2a37}
body.pg-training-courses .categorypage-content a{font-size:.82rem;text-decoration:none}
body.pg-training-courses .citymain-listing-wrap-box .box2{padding:0;overflow:hidden}
body.pg-training-courses .citymain-listing-wrap-box .widget-icon{width:100%;float:none;height:150px;border-radius:0;border:0}
body.pg-training-courses .citymain-listing-wrap-box .widget-icon img{width:100%;height:100%;object-fit:cover}
body.pg-training-courses .citymain-listing-wrap-box .widget-content{width:100%;float:none;padding:14px 16px 16px}
body.pg-training-courses .citymain-listing-wrap-box .widget-content p{margin:0;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:#6b7580}
body.pg-training-courses .citymain-listing-wrap-box .widget-content h6{font-size:1.05rem;font-weight:700;margin:2px 0 6px;color:#1f2a37}
body.pg-training-courses .citymain-listing-wrap-box .widget-content a{font-size:.82rem;text-decoration:none}
body.pg-training-courses .common-listing-wrap-box > .box2{padding:0;overflow:hidden}
body.pg-training-courses .common-listing-wrap-box > .box2 > a:first-child img{width:100%;height:170px;object-fit:cover;border-radius:0}
body.pg-training-courses .common-listing-wrap-box .common-content{padding:12px 16px 0}
body.pg-training-courses .common-listing-wrap-box .common-content h6{font-size:.95rem;font-weight:600;line-height:1.4;margin:0 0 6px;color:#1f2a37}
body.pg-training-courses .common-listing-wrap-box .common-content p{font-size:.85rem;color:#5b6570;line-height:1.55;margin:0}
body.pg-training-courses .common-listing-wrap-box .course-person,body.pg-training-courses .common-listing-wrap-box .course-date{padding:0 16px;font-size:.8rem;color:#6b7580}
body.pg-training-courses .common-listing-wrap-box .course-person i,body.pg-training-courses .common-listing-wrap-box .course-date i{color:var(--site-accent,#0096d4)!important}
body.pg-training-courses .common-listing-wrap-box .btn{margin:auto 16px 16px;align-self:flex-start;font-size:.8rem;padding:5px 12px}
body.pg-training-courses .common-listing-wrap-box .space10,body.pg-training-courses .common-listing-wrap-box .space20{height:8px}
@media (max-width:1199px){body.pg-training-courses #categorymain-listing-section .row.text-left,body.pg-training-courses #citymain-listing-section .row.text-left,body.pg-training-courses #common-listing-section .row.text-left{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){body.pg-training-courses #categorymain-listing-section .row.text-left,body.pg-training-courses #citymain-listing-section .row.text-left,body.pg-training-courses #common-listing-section .row.text-left{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){body.pg-training-courses #categorymain-listing-section .row.text-left,body.pg-training-courses #citymain-listing-section .row.text-left,body.pg-training-courses #common-listing-section .row.text-left{grid-template-columns:1fr}}
/* التنزيلات على المعاهد (2026-09-07): جداول حية + طلب الكتيب */
.inst-dl{padding:34px 0 44px}
.inst-dl-h{font-size:1.3rem;font-weight:700;color:var(--site-primary,#244298);margin:0 0 18px;position:relative;padding-bottom:10px}
.inst-dl-h::after{content:'';position:absolute;inset-inline-start:0;bottom:0;width:48px;height:3px;background:var(--site-accent,#0096d4);border-radius:2px}
.inst-dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:34px}
.inst-dl-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:18px 20px;text-decoration:none!important;color:#1f2a37;transition:transform .2s,box-shadow .2s}
.inst-dl-item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08)}
.inst-dl-item > .bi{font-size:1.8rem;color:var(--site-primary,#244298);flex:0 0 auto}
.inst-dl-body{display:flex;flex-direction:column;gap:3px;flex:1}
.inst-dl-body strong{font-size:1rem}
.inst-dl-body span{font-size:.86rem;color:#5b6570}
.inst-dl-arrow{color:var(--site-accent,#0096d4);font-size:1.2rem}
.inst-dl-request{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:26px 28px}
.inst-dl-request .inst-dl-h{margin-bottom:6px;padding-bottom:0}
.inst-dl-request .inst-dl-h::after{display:none}
.inst-dl-request p{margin:0;color:#5b6570}
.inst-dl-actions{display:flex;gap:10px;flex-wrap:wrap}
.inst-dl-actions .btn{border-radius:6px;padding:9px 18px}
@media (max-width:767px){.inst-dl-grid{grid-template-columns:1fr}}

/* --- category lists = course_list (2026-09-07) --- */
/* صفحة التخصص: نفس شبكة/تصميم #course_list على #category_course_list و#category_course_list_by_name */
body.pg-training-courses #category_course_list{display:grid;gap:18px;margin:0;grid-template-columns:repeat(2,1fr)}
body.pg-training-courses #category_course_list_by_name{display:grid;gap:18px;margin:0;grid-template-columns:repeat(2,1fr)}
body.pg-training-courses #category_course_list > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0;min-width:0}
body.pg-training-courses #category_course_list_by_name > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0;min-width:0}
body.pg-training-courses #category_course_list > .col-lg-12{grid-column:1/-1}
body.pg-training-courses #category_course_list_by_name > .col-lg-12{grid-column:1/-1}
@media (max-width:575px){body.pg-training-courses #category_course_list{grid-template-columns:1fr}}
@media (max-width:575px){body.pg-training-courses #category_course_list_by_name{grid-template-columns:1fr}}
.inst-tc #category_course_list{display:block;margin:0}
.inst-tc #category_course_list_by_name{display:block;margin:0}
.inst-tc #category_course_list > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0}
.inst-tc #category_course_list_by_name > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0}
/* القاعدة المشتركة الأعلى تخصيصًا (body.pg-training-courses #category_course_list = شبكة عمودين) كانت بتغلب قاعدة الصفوف */
/* القاعدة المشتركة الأعلى تخصيصًا (body.pg-training-courses #category_course_list_by_name = شبكة عمودين) كانت بتغلب قاعدة الصفوف */
body.pg-training-courses .inst-tc #category_course_list{display:block;grid-template-columns:none;gap:0}
body.pg-training-courses .inst-tc #category_course_list_by_name{display:block;grid-template-columns:none;gap:0}
body.pg-training-courses #category_course_list > .courselisting-col > a{display:flex;flex-direction:column}
body.pg-training-courses #category_course_list_by_name > .courselisting-col > a{display:flex;flex-direction:column}
.inst-tc--cards #category_course_list > .courselisting-col > a,.inst-tc--cards .courselist-style-inside .courselisting,.inst-tc--cards .courselist-style-inside .courselisting.virtual{height:100%}
.inst-tc--cards #category_course_list_by_name > .courselisting-col > a,.inst-tc--cards .courselist-style-inside .courselisting,.inst-tc--cards .courselist-style-inside .courselisting.virtual{height:100%}
/* (2026-09-07) Course Finder على المعاهد: صندوق البحث بشكل عام + نتائج البحث بنفس شبكة الكروت */
body.pg-training-courses #fc-search .search-wrap{background:#fff;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:18px 22px;margin-top:22px}
body.pg-training-courses #fc-search .search-wrap .form-control,body.pg-training-courses #fc-search .search-wrap select{height:42px}
body.pg-training-courses #fc-search .search-btns{height:42px;width:42px;display:inline-flex;align-items:center;justify-content:center}

/* --- finder results = course_list (2026-09-07) --- */
body.pg-training-courses #coursefinder_list_courses{display:grid;gap:18px;margin:0;grid-template-columns:repeat(2,1fr)}
body.pg-training-courses #coursefinder_list_courses > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0;min-width:0}
body.pg-training-courses #coursefinder_list_courses > .col-lg-12{grid-column:1/-1}
@media (max-width:575px){body.pg-training-courses #coursefinder_list_courses{grid-template-columns:1fr}}
.inst-tc #coursefinder_list_courses{display:block;margin:0}
.inst-tc #coursefinder_list_courses > .courselisting-col{flex:none;max-width:none;width:auto;padding:0;margin:0}
/* القاعدة المشتركة الأعلى تخصيصًا (body.pg-training-courses #coursefinder_list_courses = شبكة عمودين) كانت بتغلب قاعدة الصفوف */
body.pg-training-courses .inst-tc #coursefinder_list_courses{display:block;grid-template-columns:none;gap:0}
body.pg-training-courses #coursefinder_list_courses > .courselisting-col > a{display:flex;flex-direction:column}
.inst-tc--cards #coursefinder_list_courses > .courselisting-col > a,.inst-tc--cards .courselist-style-inside .courselisting,.inst-tc--cards .courselist-style-inside .courselisting.virtual{height:100%}
/* (2026-09-07) طلب صريح: "راجع على جميع الأزرار في جميع المواقع — لما بقف عليها الكلام بيختفي": _brand.css بتخلي لون نص الزر عند المرور = لون الخلفية.
   القاعدة العامة هنا: نص أبيض عند المرور/التركيز لكل الأزرار الممتلئة في المعاهد؛ الثيمات اللي خلفية المرور فيها فاتحة عندها قواعد أعلى تخصيصًا بلون داكن. */
body[class*="theme-"] .btn-primary:hover,body[class*="theme-"] .btn-primary:focus,body[class*="theme-"] .btn-primary:active,body[class*="theme-"] .btn-secondary:hover,body[class*="theme-"] .btn-secondary:focus,body[class*="theme-"] .btn-secondary:active,body[class*="theme-"] .search-btns:hover,body[class*="theme-"] .search-btns:focus{color:#fff!important}
body[class*="theme-"] .btn-primary-outline:hover,body[class*="theme-"] .btn-primary-outline:focus{color:#fff!important}
/* الخليج — طلب: قسم "لماذا الدورات الداخلية" في منتصف الصفحة */
body.theme-gulf .inst-ih-benefits{text-align:center}
body.theme-gulf .inst-ih-benefits .inst-ih-h::after{inset-inline-start:50%;transform:translateX(-50%)}
body.theme-gulf .inst-ih-checks{justify-content:center}
body.theme-gulf .inst-ih-steps .inst-ih-h{text-align:center}
body.theme-gulf .inst-ih-steps .inst-ih-h::after{inset-inline-start:50%;transform:translateX(-50%)}
/* (2026-09-07) "كلمة Enquiry مش ظاهرة كلها": حقل الرسالة في اتصل بنا ما ياخدش استدارة الكبسولة (كانت بتقص النص) */
body.pg-training-courses .inst-contact-form textarea.form-control{border-radius:12px!important;padding:10px 16px!important;height:auto!important;min-height:110px;line-height:1.5}

/* =====================================================================
   صفحة التخصص /training-courses/<cat> على المعاهد (2026-09-07، body.pg-category-page):
   الصفحة بتستخدم #common-filter-box-modal-one مرتين (صف التبويبات + لوحة القائمة) فقواعد شريط الفلتر
   الداكن/الملوّن بتاعة الثيم كانت بتغطيهم غلط. هنا بنرجّعهم لشكل لوحة عادية ونخلي التبويبات مقروءة.
   ===================================================================== */
body.pg-category-page #common-filter-box-modal-one{background:transparent!important;padding:10px 0!important;margin:0!important;position:static!important;box-shadow:none!important;border:0!important}
body.pg-category-page #common-filter-box-modal-one .box2.custom-radio{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:40px;padding:6px;display:inline-flex;gap:4px;margin:0;box-shadow:0 4px 14px rgba(0,0,0,.06);width:auto}
body.pg-category-page #common-filter-box-modal-one .form-check-inline{margin:0;padding:0}
body.pg-category-page #common-filter-box-modal-one .form-check-input{position:absolute;opacity:0;pointer-events:none}
body.pg-category-page #common-filter-box-modal-one .form-check-label{cursor:pointer;padding:8px 18px;border-radius:30px;font-weight:600;font-size:.86rem;color:#1f2a37;transition:background .2s,color .2s}
body.pg-category-page #common-filter-box-modal-one .form-check-input:checked + .form-check-label{background:var(--site-primary,#244298);color:#fff}
body.pg-category-page #common-filter-box-modal-one .box2.spdiv{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.05);overflow:hidden;margin:0;display:block}
body.pg-category-page .new-courselist-head{padding:14px 20px;border-bottom:1px solid rgba(0,0,0,.08)}
body.pg-category-page .new-courselist-head h4{margin:0;font-size:1.05rem;font-weight:600;color:var(--site-primary,#244298)}
body.pg-category-page .new-courselist-filter{padding:14px 20px;border-bottom:1px solid rgba(0,0,0,.06);background:#fafbfc}
body.pg-category-page .new-courselist-filter .filter-courselist-wrap{padding:0;box-shadow:none;background:transparent;margin:0}
body.pg-category-page .new-courselist-filter .filter-courselist-wrap > .col-md-12{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.pg-category-page .new-courselist-filter .form-control{height:36px}
body.pg-category-page .new-courselist-filter .menu-two{display:inline-flex;align-items:center;line-height:normal!important;height:auto;padding:6px 12px;margin:0}
body.pg-category-page .new-courselist-filter .float-right{float:none!important;margin-inline-start:auto}
body.pg-category-page .new-courselist-content{padding:20px}
body.pg-category-page .new-courselist-content .courselist-style-inside{padding:0}
body.pg-category-page #common-filter-box-modal-one .custom-form-control-course-by-name{width:100%;max-width:420px;height:40px;border-radius:8px}
/* الخليج: اللوحة داكنة زي الصفحة */
body.theme-gulf.pg-category-page #common-filter-box-modal-one .box2.spdiv{background:#1b1f26;border:0;border-top:3px solid #ea1a2d;border-radius:0}
body.theme-gulf.pg-category-page .new-courselist-head{border-bottom-color:rgba(255,255,255,.08)}
body.theme-gulf.pg-category-page .new-courselist-head h4{color:#fff}
body.theme-gulf.pg-category-page .new-courselist-filter{background:#10161f;border-bottom-color:rgba(255,255,255,.08)}
body.theme-gulf.pg-category-page #common-filter-box-modal-one .box2.custom-radio{background:#1b1f26;border-color:#ea1a2d}
body.theme-gulf.pg-category-page #common-filter-box-modal-one .form-check-label{color:#fff}
body.theme-gulf.pg-category-page #common-filter-box-modal-one .form-check-input:checked + .form-check-label{background:#ea1a2d}
body.theme-gulf.pg-category-page #common-listing-section.common-content,body.theme-gulf.pg-category-page #common-section.section-grey{background:#10161f;color:#a9adb6}
body.theme-gulf.pg-category-page #common-section.section-grey h4{color:#fff}
/* صفحة التخصص: صف الفلتر (الفورم + أزرار Related/Other Categories/Download) على سطر واحد */
body.pg-category-page .new-courselist-filter .col-md-12.p-0{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.pg-category-page .new-courselist-filter form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
body.pg-category-page .new-courselist-filter .form-control{float:none;margin:0;max-width:none!important;min-width:0!important}
body.pg-category-page .new-courselist-filter .filter-area-courselist-desktop{float:none!important;display:flex;flex-wrap:wrap;gap:6px;margin-inline-start:auto}
body.pg-category-page .new-courselist-filter .filter-area-courselist-desktop .dropdown-item{display:inline-flex;align-items:center;width:auto;padding:6px 12px;border-radius:4px;font-size:.82rem}
body.pg-category-page .new-courselist-filter .filter-area-courselist-dropdown{display:none}
/* مواقع الجدول (جلوبال/ليدرز/السعودي/العربي/سمارت): كروت صفحة التخصص ونتائج Course Finder في 4 أعمدة */
body.theme-global.pg-training-courses #category_course_list,body.theme-leaders.pg-training-courses #category_course_list,body.theme-saudi.pg-training-courses #category_course_list,body.theme-arabi.pg-training-courses #category_course_list,body.theme-smart.pg-training-courses #category_course_list,body.theme-global.pg-training-courses #category_course_list_by_name,body.theme-leaders.pg-training-courses #category_course_list_by_name,body.theme-saudi.pg-training-courses #category_course_list_by_name,body.theme-arabi.pg-training-courses #category_course_list_by_name,body.theme-smart.pg-training-courses #category_course_list_by_name,body.theme-global.pg-training-courses #coursefinder_list_courses,body.theme-leaders.pg-training-courses #coursefinder_list_courses,body.theme-saudi.pg-training-courses #coursefinder_list_courses,body.theme-arabi.pg-training-courses #coursefinder_list_courses,body.theme-smart.pg-training-courses #coursefinder_list_courses{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
body.theme-global.pg-training-courses #category_course_list .courselisting,body.theme-leaders.pg-training-courses #category_course_list .courselisting,body.theme-saudi.pg-training-courses #category_course_list .courselisting,body.theme-arabi.pg-training-courses #category_course_list .courselisting,body.theme-smart.pg-training-courses #category_course_list .courselisting,body.theme-global.pg-training-courses #category_course_list_by_name .courselisting,body.theme-leaders.pg-training-courses #category_course_list_by_name .courselisting,body.theme-saudi.pg-training-courses #category_course_list_by_name .courselisting,body.theme-arabi.pg-training-courses #category_course_list_by_name .courselisting,body.theme-smart.pg-training-courses #category_course_list_by_name .courselisting,body.theme-global.pg-training-courses #coursefinder_list_courses .courselisting,body.theme-leaders.pg-training-courses #coursefinder_list_courses .courselisting,body.theme-saudi.pg-training-courses #coursefinder_list_courses .courselisting,body.theme-arabi.pg-training-courses #coursefinder_list_courses .courselisting,body.theme-smart.pg-training-courses #coursefinder_list_courses .courselisting{padding:10px;border-radius:10px}
@media (max-width:1199px){body.pg-training-courses #category_course_list,body.pg-training-courses #category_course_list_by_name,body.pg-training-courses #coursefinder_list_courses{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:767px){body.pg-training-courses #category_course_list,body.pg-training-courses #category_course_list_by_name,body.pg-training-courses #coursefinder_list_courses{grid-template-columns:repeat(2,1fr)!important}}
/* الخليج: صفحة التخصص داكنة بالكامل (وصف التخصص + التبويبات + اللوحة) */
body.theme-gulf.pg-category-page #common-listing-section,body.theme-gulf.pg-category-page #common-filter-box-modal-one{background:#10161f!important}
body.theme-gulf.pg-category-page #common-listing-section p,body.theme-gulf.pg-category-page #common-listing-section .box4{color:#c9ccd3;background:transparent}
/* (2026-09-07) زر "Download Brochure" (.purple-color) على المعاهد: بلون الموقع ونص أبيض دايمًا (كان بنفسجي بنص بلون الموقع = مش مقروء) */
body[class*="theme-"] .purple-color{background:var(--site-primary,#244298)!important;border-color:var(--site-primary,#244298)!important;color:#fff!important}
body[class*="theme-"] .purple-color:hover,body[class*="theme-"] .purple-color:focus{background:var(--site-accent,#0096d4)!important;border-color:var(--site-accent,#0096d4)!important;color:#fff!important}
/* الخليج: رأس لوحة صفحة التخصص داكن (كان أبيض بنص أبيض) */
body.theme-gulf.pg-category-page .new-courselist-head{background:#1b1f26}
/* (2026-09-07) صفحة التخصص: باقي الوصف جوّه البانر تحت الجملة الافتتاحية */
#common-banner-section-icon .inst-banner-rest,#common-banner-section-image .inst-banner-rest{margin:10px 0 0;font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.85);max-width:900px}
/* (2026-09-07) المقالات/المدونات على المعاهد: بدون صور — شعار المعهد مكانها، وبطاقات أصغر (5 أعمدة) */
.inst-logo-placeholder{display:block;height:84px;margin:14px 16px 0;background:var(--site-logo) center/contain no-repeat;opacity:.9}
body.pg-training-courses #common-listing-section .common-listing-wrap-box > .box2 > a:first-child{display:block}
body.pg-training-courses #common-listing-section .row.text-left:has(.common-listing-wrap-box){grid-template-columns:repeat(5,1fr);gap:14px}
body.pg-training-courses .common-listing-wrap-box .common-content h6{font-size:.88rem}
body.pg-training-courses .common-listing-wrap-box .common-content p{font-size:.8rem}
body.pg-training-courses .common-listing-wrap-box .course-person,body.pg-training-courses .common-listing-wrap-box .course-date{font-size:.74rem}
body.pg-training-courses #common-listing-section .col-md-8 .inst-logo-placeholder,body.pg-training-courses #common-listing-section .col-lg-8 .inst-logo-placeholder{height:120px;margin:0 0 16px;background-position:left center}
body[dir="rtl"].pg-training-courses #common-listing-section .col-md-8 .inst-logo-placeholder{background-position:right center}
@media (max-width:1199px){body.pg-training-courses #common-listing-section .row.text-left:has(.common-listing-wrap-box){grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){body.pg-training-courses #common-listing-section .row.text-left:has(.common-listing-wrap-box){grid-template-columns:repeat(2,1fr)}}
/* (2026-09-07) "ليه في لون في خلفية الدورات غير باقي الصفحات": الخليج — مساحة الكروت في صفحة التخصص داكنة زي الصفحة */
body.theme-gulf.pg-category-page .new-courselist-content,body.theme-gulf.pg-category-page .new-courselist-content .courselist-style-inside,body.theme-gulf.pg-category-page #common-filter-box-modal-one .box2.spdiv .row{background:#10161f}
body.theme-gulf.pg-category-page{background:#10161f}
/* (2026-09-07) "اللوجو المفروض يكون أبيض مش شفاف": على الكروت الداكنة (الخليج) الشعار أبيض صريح */
body.theme-gulf .inst-logo-placeholder{filter:brightness(0) invert(1);opacity:1}
/* (2026-09-07) "لسه في أزرار بقف عليها الكلام بياخد لون الخلفية": أزرار الفلتر (.menu-two: Webinars/Blogs/Related/Other Categories) — _brand.css بتخلي الخلفية عند المرور = لون الموقع والنص = لون الموقع */
body[class*="theme-"] #common-filter-box-modal-one .menu-two:hover,body[class*="theme-"] #common-filter-box-modal-one .menu-two:focus,body[class*="theme-"] .second-menu .menu-two:hover,body[class*="theme-"] .filter-area-courselist-desktop .dropdown-item:hover,body[class*="theme-"] .filter-area-courselist-desktop .dropdown-item:focus{color:#fff!important}
body[class*="theme-"] .filter-area-courselist-desktop .dropdown-item:hover{background:var(--site-primary,#244298)!important}
/* (2026-09-07) Course Finder: "شيل الفراغات البيضاء اللي في نص الصفحة" — الهوامش السالبة/الكبيرة بتاعة قالب المعهد اتشالت، ومنطقة النتائج تاخد خلفية الصفحة */
body.pg-training-courses #fc-search{margin:0!important;padding:0!important}
body.pg-training-courses #fc-search .search-wrap{margin:18px 0}
body.pg-training-courses .search-resultwrap{margin-top:0!important;background:transparent!important;padding-bottom:20px}
body.pg-training-courses #fc-search:empty{display:none}
body.theme-gulf.pg-training-courses #fc-search,body.theme-gulf.pg-training-courses:has(#fc-search) #fc-banner ~ *{background:#10161f}
body.theme-gulf.pg-training-courses:has(#fc-search){background:#10161f}
/* (2026-09-07) ترتيب المقالات/المدونات مختلف من موقع لموقع (order في الشبكة، بدون تغيير البيانات) */
body.theme-almawred.pg-training-courses .common-listing-wrap-box:nth-child(odd){order:2}
body.theme-gulf.pg-training-courses .common-listing-wrap-box:nth-child(3n){order:-1}
body.theme-global.pg-training-courses .common-listing-wrap-box:nth-child(4n+2){order:-2}body.theme-global.pg-training-courses .common-listing-wrap-box:nth-child(4n){order:3}
body.theme-leaders.pg-training-courses .common-listing-wrap-box:nth-child(even){order:-1}
body.theme-saudi.pg-training-courses .common-listing-wrap-box:nth-child(3n+1){order:2}body.theme-saudi.pg-training-courses .common-listing-wrap-box:nth-child(5n){order:-1}
body.theme-omani.pg-training-courses .common-listing-wrap-box:nth-child(4n+1){order:3}
body.theme-glomac.pg-training-courses .common-listing-wrap-box:nth-child(3n+2){order:-1}body.theme-glomac.pg-training-courses .common-listing-wrap-box:nth-child(7n){order:4}
body.theme-arabi.pg-training-courses .common-listing-wrap-box:nth-child(2n+1){order:-1}body.theme-arabi.pg-training-courses .common-listing-wrap-box:nth-child(6n){order:-2}
body.theme-smart.pg-training-courses .common-listing-wrap-box:nth-child(5n+2){order:-1}body.theme-smart.pg-training-courses .common-listing-wrap-box:nth-child(4n+3){order:2}
body.theme-plus.pg-training-courses .common-listing-wrap-box:nth-child(3n){order:-2}body.theme-plus.pg-training-courses .common-listing-wrap-box:nth-child(4n+1){order:1}
body.theme-abfa.pg-training-courses .common-listing-wrap-box:nth-child(4n+3){order:-1}body.theme-abfa.pg-training-courses .common-listing-wrap-box:nth-child(6n+1){order:2}
/* (2026-09-07) "لسه في سطر أبيض فراغ في بعض الصفحات": الخليج — خلفية الصفحة كلها داكنة على صفحات المعاهد الداخلية فما يظهرش خط أبيض بين الأقسام */
body.theme-gulf.pg-training-courses{background:#10161f}
body.theme-gulf.pg-training-courses .space10,body.theme-gulf.pg-training-courses .space20,body.theme-gulf.pg-training-courses .space30{background:transparent}
/* (2026-09-07) طلب صريح: قائمة التخصصات بدون أيقونات الأقسام في كل المعاهد + عدّاد للترقيم في التصاميم */
body.pg-training-courses #categorymain-listing-section .categorypage-icon{display:none!important}
body.pg-training-courses #categorymain-listing-section .row.text-left{counter-reset:instcat}
/* (2026-09-07) نماذج التسجيل/طلب الدورة الداخلية على المعاهد: أساس مشترك (كل ثيم بيغيّر الشكل في ملفه) + بطاقة جانبية ببيانات المعهد */
body.pg-training-courses #register-section .tabHead{background:var(--site-primary,#244298);border-radius:10px 10px 0 0;padding:12px 20px}
body.pg-training-courses #register-section .tabContent{border:1px solid rgba(0,0,0,.1);border-radius:0 0 10px 10px}
body.pg-training-courses #register-section .form-control{height:42px;border-radius:6px}
body.pg-training-courses #register-section textarea.form-control{height:auto}
body.pg-training-courses #register-section .box4{box-shadow:none}
.inst-form-side-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:22px 20px;box-shadow:0 6px 18px rgba(0,0,0,.05)}
.inst-form-side-card h5{font-size:1.05rem;font-weight:700;margin:0 0 14px;color:var(--site-primary,#244298)}
.inst-form-side-card h6{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#6b7580;margin:18px 0 10px}
.inst-form-side-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inst-form-side-list li{display:flex;align-items:center;gap:10px;font-size:.9rem}
.inst-form-side-list li .bi{flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--site-primary,#244298) 10%,#fff);color:var(--site-primary,#244298);display:flex;align-items:center;justify-content:center}
.inst-form-side-list a{color:#1f2a37;text-decoration:none}
.inst-form-side-steps{margin:0;padding-inline-start:18px;color:#5b6570;font-size:.88rem;line-height:1.6;display:grid;gap:6px}
/* (2026-09-07) صفحة المقال/المدونة على المعاهد (body.pg-post-page): بطاقة المحتوى + عمود المرتبطة كقائمة مضغوطة (الشعار صغير) — كل ثيم بيغيّر الشكل في ملفه */
body.pg-post-page .blog-webinar-articles-details-left .box{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:28px 30px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
body.pg-post-page .blog-webinar-articles-details-left .box > .inst-logo-placeholder{height:64px;margin:0 0 18px;background-position:left center}
body[dir="rtl"].pg-post-page .blog-webinar-articles-details-left .box > .inst-logo-placeholder{background-position:right center}
body.pg-post-page .blog-webinar-articles-details-left h1{font-size:1.7rem;line-height:1.3;margin:0 0 10px}
body.pg-post-page .blog-webinar-articles-details-left .course-date{font-size:.85rem;color:#6b7580;margin-bottom:16px}
body.pg-post-page .blog-webinar-articles-details-left .common-detail-content{font-size:.98rem;line-height:1.8;color:#2b3440}
body.pg-post-page .custom-related-head{font-size:1rem;font-weight:700;margin:0 0 12px}
body.pg-post-page .blog-webinar-articles-details-right .box2{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 16px;margin:0 0 12px;box-shadow:none;display:flex;flex-direction:column;gap:6px}
body.pg-post-page .blog-webinar-articles-details-right .box2 > a:first-child{display:none}
body.pg-post-page .blog-webinar-articles-details-right .box2 .common-content h6{font-size:.9rem;font-weight:600;line-height:1.4;margin:0 0 4px}
body.pg-post-page .blog-webinar-articles-details-right .box2 .common-content p{font-size:.8rem;color:#5b6570;margin:0}
body.pg-post-page .blog-webinar-articles-details-right .box2 .course-date{font-size:.76rem;color:#6b7580}
body.pg-post-page .blog-webinar-articles-details-right .box2 .btn{align-self:flex-start;font-size:.78rem;padding:4px 12px}
body.pg-post-page .blog-webinar-articles-details-right .box2 .space10,body.pg-post-page .blog-webinar-articles-details-right .box2 .space20{display:none}
/* (2026-09-07) صفحة المقال/المدونة: صف المحتوى (col-lg-9 + col-lg-3) لازم يفضل صف bootstrap عادي — شبكة قوائم المقالات كانت بتمسكه وبتضغط العمودين */
body.pg-post-page #common-listing-section .row.text-left{display:flex!important;grid-template-columns:none!important;gap:0!important;margin:0 -15px!important}
body.pg-post-page .blog-webinar-articles-details-left,body.pg-post-page .blog-webinar-articles-details-right{flex:0 0 auto;padding:0 15px}
body.pg-post-page .blog-webinar-articles-details-left{flex-basis:75%;max-width:75%}
body.pg-post-page .blog-webinar-articles-details-right{flex-basis:25%;max-width:25%}
body.pg-post-page .blog-webinar-articles-details-right-wrapper{display:block}
@media (max-width:991px){body.pg-post-page .blog-webinar-articles-details-left,body.pg-post-page .blog-webinar-articles-details-right{flex-basis:100%;max-width:100%}}
/* (2026-09-07) تاريخ المقال في القوائم/المرتبطة ما ياخدش تنسيق تاريخ كارت الدورة (شارة عائمة/كعب تذكرة) */
body.pg-training-courses #common-listing-section .course-date{position:static!important;inset:auto!important;width:auto!important;height:auto!important;grid-row:auto!important;grid-column:auto!important;display:block!important;border-inline-end:0!important;box-shadow:none!important;text-align:start!important;line-height:1.5!important}
body.theme-plus.pg-training-courses #common-listing-section .common-listing-wrap-box .course-date,body.theme-plus.pg-training-courses .blog-webinar-articles-details-right .course-date,body.theme-glomac.pg-training-courses #common-listing-section .common-listing-wrap-box .course-date,body.theme-glomac.pg-training-courses .blog-webinar-articles-details-right .course-date{background:transparent!important;color:#5d6b7a!important;border:0!important;padding:0 16px!important;font-weight:400!important;font-size:.76rem!important}
body.theme-plus.pg-training-courses .blog-webinar-articles-details-right .course-date,body.theme-glomac.pg-training-courses .blog-webinar-articles-details-right .course-date,body.theme-almawred.pg-post-page .blog-webinar-articles-details-right .course-date{padding:0!important;background:transparent!important;color:#6b7580!important;border-radius:0!important;font-size:.76rem!important}

/* =====================================================================
   صفحة تفاصيل الدورة على المعاهد (2026-09-07) — الأساس المشترك: شريط الأزرار، التبويبات، كتلة التواصل
   بجانب التبويبات (مش عائمة فوقها)، بطاقات الجدول والرسوم، كروت الأونلاين، الدورات المرتبطة.
   ===================================================================== */
body.pg-training-courses #coursedetails-buttons-section .box2{padding:10px 14px;box-shadow:0 4px 14px rgba(0,0,0,.06);border-radius:10px;margin-top:14px}
body.pg-training-courses #coursedetails-buttons-section .custom-outline-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.pg-training-courses #coursedetails-buttons-section .custom-outline-box form{display:inline-block;margin:0}
body.pg-training-courses #coursedetails-buttons-section .menu-two,body.pg-training-courses #coursedetails-buttons-section .btn{float:none!important;margin:0!important;display:inline-flex;align-items:center;line-height:normal!important;height:38px;padding:0 14px;border-radius:6px}
body.pg-training-courses #coursedetails-buttons-section .float-right,body.pg-training-courses #coursedetails-buttons-section .register-btn-wrap{margin-inline-start:auto!important}
body.pg-training-courses #coursedetails-content-section nav{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:0}
body.pg-training-courses #coursedetails-content-section nav .nav-tabs{display:flex;flex-wrap:wrap;gap:6px;border:0}
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{border:0;padding:10px 18px;font-weight:600;font-size:.9rem;background:#eef1f5;color:#1f2a37;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:var(--site-primary,#244298);color:#fff}
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link i{color:inherit!important}
/* (2026-09-07) الكارت الأساسي absolute بإزاحة top:-30px. أي ثيم بيرجّعه relative
   (أبفا مثلاً) كانت الإزاحة بتفضل شغالة فيركب على شريط التبويبات — فبنصفّر
   الإزاحات هنا مش بس نوع الموضع. */
body.pg-training-courses .inst-cra--desktop{position:static;top:auto;inset-inline-end:auto;inset-inline-start:auto;max-width:520px;margin:0 0 6px}
body.pg-training-courses #coursedetails-content-section .tab-content{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:28px 30px;box-shadow:0 6px 20px rgba(0,0,0,.05);margin-top:10px}
body.pg-training-courses #coursedetails-content-section .tab-content h6,body.pg-training-courses #coursedetails-content-section .tab-content h4{font-weight:700;margin:18px 0 8px;color:var(--site-primary,#244298)}
body.pg-training-courses #coursedetails-content-section .tab-content ul li{line-height:1.7}
body.pg-training-courses .year-heading{font-size:1rem;font-weight:700;color:#1f2a37;margin:0 0 14px}
body.pg-training-courses .session-card{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:16px 18px!important;box-shadow:0 2px 8px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
body.pg-training-courses .session-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
body.pg-training-courses .session-card li i{color:var(--site-accent,#0096d4)!important}
body.pg-training-courses .session-card .price-box{border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:8px 10px;background:#fafbfc}
body.pg-training-courses .session-card .feestoggle-select{height:34px;font-size:.8rem;border-radius:6px}
body.pg-training-courses .session-card .btn{border-radius:6px;font-weight:400!important}
body.pg-training-courses #nav-virtuallearning .courselisting-normal{border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:12px;box-shadow:none}
body.pg-training-courses #nav-virtuallearning .courselisting-normal .course-image{border:0;border-radius:6px}
body.pg-training-courses #nav-virtuallearning .courselisting-normal .btn{background:var(--site-primary,#244298)!important;border-color:var(--site-primary,#244298)!important;color:#fff!important;border-radius:6px}
body.pg-training-courses #common-section.section-grey .courselisting{border-radius:10px;border:1px solid rgba(0,0,0,.08)}
@media (max-width:991px){body.pg-training-courses .inst-cra--desktop{max-width:none;width:100%}}
/* (2026-09-07) الخليج: صفحات كانت بيضاء وسط الثيم الداكن (الخريطة، التسجيل، تفاصيل الدورة) — أقسام المحتوى داكنة ونص فاتح */
body.theme-gulf.pg-training-courses #common-listing-section.common-content,body.theme-gulf.pg-training-courses #register-section,body.theme-gulf.pg-training-courses #coursedetails-content-section,body.theme-gulf.pg-training-courses #coursedetails-buttons-section{background:#10161f}
body.theme-gulf.pg-training-courses #common-listing-section.common-content .box4,body.theme-gulf.pg-training-courses #register-section .box4,body.theme-gulf.pg-training-courses #register-section .box-one,body.theme-gulf.pg-training-courses #register-section .tabContent.custom-stage2-color{background:#1b1f26!important;color:#e6e8ec}
body.theme-gulf.pg-training-courses #common-listing-section.common-content h4,body.theme-gulf.pg-training-courses #common-listing-section.common-content h5,body.theme-gulf.pg-training-courses #common-listing-section.common-content li,body.theme-gulf.pg-training-courses #common-listing-section.common-content a,body.theme-gulf.pg-training-courses #register-section label,body.theme-gulf.pg-training-courses #register-section h1,body.theme-gulf.pg-training-courses #register-section p{color:#e6e8ec}
body.theme-gulf.pg-training-courses #common-listing-section.common-content a:hover{color:#ea1a2d}
/* تبويبات تفاصيل الدورة: قواعد fullcss/_brand بـ!important → الأساس هنا بـ!important برضو (الثيمات فوقه) */
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{background:#eef1f5!important;color:#1f2a37!important;border:0!important;border-radius:8px!important;padding:10px 18px!important;line-height:normal!important;margin:0!important}
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:var(--site-primary,#244298)!important;color:#fff!important}
body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link i,body.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active i{color:inherit!important}

/* (2026-09-07) بديل .institute-h1 على المعاهد — نفس مقاسات القاعدة الأصلية في fullcss.css */
.inst-page-h1 { font-size: 26px; font-weight: 700; line-height: 32px; }

/* (2026-09-07) كروت "دورات ذات صلة" في السلايدر: أزرار "سجّل الآن" كانت على مستويات
   مختلفة لأن أسماء الدورات بتاخد سطر أو تلاتة، وكل كارت بيطول على قد محتواه.
   owl بيحط العناصر inline-block فالارتفاعات مش بتتساوى — نخلي الشريط flex عشان
   الكروت تتمدّ لنفس الارتفاع، وجوّه الكارت نخلي الزر يتزق لتحت بـmargin-top:auto.
   الملف ده بيتحمّل للمعاهد بس، فالمعهد مش متأثر. */
.common-slider.owl-carousel .owl-stage { display: flex; }
.common-slider.owl-carousel .owl-item { display: flex; height: auto; }
.common-slider .courselisting-col { display: flex; width: 100%; }
/* الكارت ملفوف بوسم <a> بين العمود والكارت — لازم يبقى flex هو كمان
   وإلا الارتفاع ما بيوصلش للكارت جوّاه. */
.common-slider .courselisting-col > a { display: flex; width: 100%; }
.common-slider .courselisting { display: flex; flex-direction: column; width: 100%; }
.common-slider .courselisting > form { margin-top: auto; }
.common-slider .courselisting .course-title { min-height: 3.2em; }

/* (2026-09-07) بقايا ألوان المعهد في صفحات مشتركة على كل المعاهد:
   - .btn-purple زر "استفسار سريع" في نتائج البحث، لونه بنفسجي ثابت.
   - رابط "تواصل معنا" جوّه رسالة "لا توجد جلسات" لونه مكتوب ستايل سطري
     بالأزرق الكحلي بتاع المعهد (#244298) في نص اللغة نفسه.
   الملف ده للمعاهد بس، فالمعهد بيفضل بألوانه. */
.btn-purple { background: var(--site-accent, #0096d4) !important; border-color: var(--site-accent, #0096d4) !important; color: #fff !important; }
.btn-purple:hover { color: #fff !important; }
[style*="#244298"] { color: var(--site-primary, #244298) !important; }

/* (2026-09-08) زر "تحميل الكتيب" في صفحة القسم بياخد كلاسين مع بعض:
   .menu-two (خلفية بلون الموقع) و.purple-color (نص بلون الموقع كمان بعد ما
   اتربط بالثيم) — فالنص كان بيختفي على الخلفية في السعودي وأي ثيم لونه غامق.
   بنثبّت التباين: خلفية بلون الموقع ونص أبيض، وبالعكس عند المرور. */
/* بمعرّف الصندوق (#common-filter-box-modal-one) عشان تكسب قاعدة _brand.css
   اللي بتلوّن .menu-two بلون الموقع — دي بمعرّف فأولويتها أعلى من كلاسات لوحدها. */
#common-filter-box-modal-one .menu-two.purple-color,
#common-filter-box-modal-one .menu-two.darkblue-color,
.menu-two.purple-color,
.menu-two.darkblue-color {
    background: var(--site-primary, #244298) !important;
    border-color: var(--site-primary, #244298) !important;
    color: #fff !important;
}
#common-filter-box-modal-one .menu-two.purple-color:hover,
#common-filter-box-modal-one .menu-two.darkblue-color:hover,
.menu-two.purple-color:hover,
.menu-two.darkblue-color:hover {
    background: #fff !important;
    color: var(--site-primary, #244298) !important;
    border-color: var(--site-primary, #244298) !important;
}

/* (2026-09-08) شريط "نتائج البحث" كان بالأزرق السماوي الثابت (.sky-bg من fullcss.css)
   في كل المعاهد — لون المعهد مش لون الموقع. بيتلوّن بلون الموقع، والنص أبيض. */
body[class*="theme-"] .sky-bg { background: var(--site-primary, #244298) !important; }
body[class*="theme-"] .sky-bg h1,
body[class*="theme-"] .sky-bg h2,
body[class*="theme-"] .sky-bg h3,
body[class*="theme-"] .sky-bg h4,
body[class*="theme-"] .sky-bg p { color: #fff !important; }

/* (2026-09-08) صفحة التخصص بقت بتخطيط "فلتر جانبي + صفوف" في المواقع الخمسة
   (طلب: تخطيط /training-courses هو المقياس لباقي صفحات القوائم). القاعدة الأقدم
   اللي بتخلي القائمة شبكة أربع أعمدة لازم تتوقف جوّه .inst-tc بس — بره الغلاف
   (لو ثيم تاني استخدمها) بتفضل شغالة زي ما هي. */
/* المواقع اللي مرجعها جدول صفوف (جلوبال، القادة، السعودي) — القائمة تبقى صفوف.
   العربي وسمارت مرجعهم شبكة كروت، فليهم قواعدهم في ملف الثيم بتاعهم. */
body.theme-global.pg-training-courses .inst-tc #category_course_list,
body.theme-global.pg-training-courses .inst-tc #category_course_list_by_name,
body.theme-leaders.pg-training-courses .inst-tc #category_course_list,
body.theme-leaders.pg-training-courses .inst-tc #category_course_list_by_name,
body.theme-saudi.pg-training-courses .inst-tc #category_course_list,
body.theme-saudi.pg-training-courses .inst-tc #category_course_list_by_name {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

/* زر "مسح" الداخلي بتاع الفلتر مخفي جوّه العمود الجانبي (العنوان فوق فيه مسح
   بالفعل). القاعدة الأقدم كانت مربوطة بـ#common-filter-box-modal-one، وصفحة
   التخصص بتحط الفلتر جوّه العمود مباشرة من غير الصندوق ده. */
.inst-tc .inst-tc-side .menu-two.darkblue-color { display: none !important; }

/* (2026-09-08) نفس قواعد الفلتر الجانبي بس مربوطة بالعمود نفسه (.inst-tc-side)
   بدل صندوق #common-filter-box-modal-one — صفحة التخصص بتحط الفلتر جوّه العمود
   مباشرة، وحقولها عائمة (float) فمن غير القواعد دي كانت بتخرج بره الكارت. */
.inst-tc .inst-tc-side form { display: flex; flex-direction: column; gap: 8px; }
.inst-tc .inst-tc-side .form-group { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.inst-tc .inst-tc-side .form-padding,
.inst-tc .inst-tc-side .form-control,
.inst-tc .inst-tc-side .menu-two {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.inst-tc .inst-tc-side .form-control { height: 38px; }
.inst-tc .inst-tc-side .menu-two { text-align: center; padding: 6px 10px; }
.inst-tc .inst-tc-side .filter-area-courselist-dropdown,
.inst-tc .inst-tc-side .filter-area-common-dropdown { display: none !important; }

/* (2026-09-08) صور الدورات: المواقع اللي قوائمها صفوف/كروت بلا صور كانت لسه بتعرض
   صور في "دورات ذات صلة" و"التعلّم الافتراضي" ونتائج البحث وقائمة الرئيسية — نفس
   الكارت بشكلين في نفس الموقع. الصور اتشالت من كل مكان في المواقع دي عشان الشكل
   يبقى واحد. المواقع اللي قوائمها بصور (المورد، الخليج، جلوماك، سمارت، الزمالة)
   مالهاش دخل بالقاعدة دي. القاعدة هنا مش في ملفات الثيمات عشان ما تتضاربش مع
   إعادة تصميم صفحة الدورة اللي شغالة على نفس الملفات دلوقتي. */
body.theme-global .course-image,
body.theme-global .inst-upcoming-thumb,
body.theme-leaders .course-image,
body.theme-leaders .inst-upcoming-thumb,
body.theme-omani .course-image,
body.theme-omani .inst-upcoming-thumb,
body.theme-arabi .course-image,
body.theme-arabi .inst-upcoming-thumb,
body.theme-plus .course-image,
body.theme-plus .inst-upcoming-thumb,
body.theme-saudi .course-image,
body.theme-saudi .inst-upcoming-thumb { display: none !important; }

/* الكارت من غير صورة محتاج حشو من فوق بدل ما النص يلزق في الحافة */
body.theme-global .common-slider .courselisting,
body.theme-leaders .common-slider .courselisting,
body.theme-omani .common-slider .courselisting,
body.theme-arabi .common-slider .courselisting,
body.theme-plus .common-slider .courselisting,
body.theme-saudi .common-slider .courselisting,
body.theme-global #nav-virtuallearning .courselisting-normal,
body.theme-leaders #nav-virtuallearning .courselisting-normal,
body.theme-omani #nav-virtuallearning .courselisting-normal,
body.theme-arabi #nav-virtuallearning .courselisting-normal,
body.theme-plus #nav-virtuallearning .courselisting-normal,
body.theme-saudi #nav-virtuallearning .courselisting-normal { padding-top: 14px; }

/* (2026-09-08) صور "دورات ذات صلة" و"التعلّم الافتراضي" في صفحة الدورة اتشالت من
   كل المعاهد. السبب: نفس الدورة بتتكرر بجلسات مختلفة، فنفس الصورة كانت بتظهر
   أربع وخمس مرات جنب بعض في نفس الشريط — ده اللي كان باين غلط. قوائم الدورات
   نفسها ما اتلمستش هنا: المواقع اللي كروتها متبنية حوالين الصورة بتفضل بصورها. */
body[class*="theme-"] .common-slider .course-image,
body[class*="theme-"] #nav-virtuallearning .course-image { display: none !important; }
body[class*="theme-"] .common-slider .courselisting,
body[class*="theme-"] #nav-virtuallearning .courselisting-normal { padding-top: 14px; }

/* (2026-09-08) حائط شعارات العملاء — الأساس المشترك فقط (المقاسات والتوسيط).
   شكل كل موقع بيتحدد في ملف الثيم بتاعه، والقاعدة دي بتضمن إن الشعارات
   المختلفة الأحجام تبان بنفس الوزن البصري في أي تخطيط. */
.inst-logos { padding: 44px 0; }
.inst-logos-h { font-size: 1.5rem; margin: 0 0 22px; }
.inst-logos-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.inst-logos-item { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 12px; }
.inst-logos-item img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 1199px) { .inst-logos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .inst-logos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479px)  { .inst-logos-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══ (2026-09-09) صفحة الدورة على التليفون — إصلاحات عامة للمعاهد ═══
   بعد ما بقى المحتوى المتصل هو اللي بيتعرض على الموبايل بدل الأكورديون
   العام، طلعت حاجتين من تخطيط الديسكتوب كانت مخبّية قبل كده:
     • كروت الجلسات بتفضل بأعمدة الديسكتوب فبتخرج برّه الشاشة.
     • قائمة بيانات التواصل صف واحد مايلفّش.
   الملف ده بيتحمّل للمعاهد بس (site_theme_stylesheets)، والقواعد
   محصورة في صفحة الدورة وفي الشاشات الصغيرة.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.pg-training-courses .session-card-wrapper > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    body.pg-training-courses .session-card,
    body.pg-training-courses .session-card * { min-width: 0; }

    body.pg-training-courses .inst-cra-list { flex-wrap: wrap; }
    body.pg-training-courses .inst-cra-list li { min-width: 0; }
    body.pg-training-courses .inst-cra-list a { overflow-wrap: anywhere; }
}

/* ═══ (2026-09-09) فورم اتصل بنا — التنسيق الأساسي ═══════════════
   الحقول اتفصلت عن التخطيط (institute/contact/form.php) عشان كل معهد
   يركّبها بشكله. الأغلفة القديمة (.col-md-12.form-padding و .space20)
   اتشالت، فالمسافات بقت من هنا.
   ───────────────────────────────────────────────────────────── */
.inst-cform-h { margin: 0 0 16px; font-size: 1.15rem; font-weight: 700; }
.inst-cform-row { margin-bottom: 16px; }
.inst-cform-row:last-child { margin-bottom: 0; }
.inst-cform-row--split { display: flex; gap: 12px; }
.inst-cform-cc { flex: 0 0 33%; max-width: 33%; }
.inst-cform-row--split > .form-control:last-child { flex: 1 1 auto; min-width: 0; }
.inst-cform .form-control { width: 100%; }
.inst-cform-actions .btn { min-width: 140px; }
#message_contact:empty { display: none; }
#message_contact { margin-bottom: 12px; }

/* ── (2026-09-09) زرار تحميل الخطة التدريبية PDF ────────────────
   بيتزرع كآخر عنصر في كل بند من بنود صفحة /downloads. الشكل محايد
   عمداً — كل ثيم بيعيد صبغه في ملفه لو حابب.
   ───────────────────────────────────────────────────────────── */
.inst-dl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 7px 14px;
    font-size: .84rem; font-weight: 700; line-height: 1.3;
    color: #fff; background: var(--site-primary, #244298);
    border: 0; border-radius: 4px; cursor: pointer;
    transition: background .15s, transform .15s;
}
.inst-dl-btn:hover, .inst-dl-btn:focus-visible {
    background: var(--site-accent, #1b3170); transform: translateY(-1px);
}
.inst-dl-btn .bi { font-size: 1rem; }

/* ═══ (2026-09-09) زرار "Clear" في شريط الفلتر ═══════════════════
   ملاحظة المستخدم: «زر clear صغير في جميع المواقع». القياس أكّدها —
   الزرار كان 15–17px جنب قوائم منسدلة 34–36px، يعني نص طولها، وواقف
   مش في نص الصف. وفي نسخة الفلتر الجانبي خطه نزل لـ10px عند السعودي.

   بياخد نفس ارتفاع القائمة المنسدلة ويتوسّط معاها، بخط مقروء ومساحة
   ضغط كافية. الملف ده بيتحمّل للمعاهد بس، فالمعهد زي ما هو.
   ───────────────────────────────────────────────────────────── */
body.pg-training-courses .filter-courselist-wrap .menu-two.desktop-filter,
body #common-filter-box-modal-one .menu-two.desktop-filter,
body #common-filter-box-modal-one form > .menu-two {
    /* ⚠ الفلتر الجانبي (.inst-tc) بيخفي الزرار ده لأن رأس اللوحة فيه Clear
       تاني — الاستثناء تحت بيحافظ على الإخفاء ده. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px !important;
    font-size: .84rem;
    line-height: 1.2;
    align-self: center;
    white-space: nowrap;
}

/* نسخة الفلتر الجانبي: رابط نصي، بس لازم يفضل مقروء وقابل للضغط. */
.inst-tc-side-reset {
    font-size: .8rem !important;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
}

/* الفلتر الجانبي: رأس اللوحة فيه "Clear" بالفعل، فالزرار اللي جوّه الفورم
   بيفضل مخفي زي ما كان — القاعدة اللي فوق كانت بترجّعه فيبان زرارين. */
.inst-tc #common-filter-box-modal-one .menu-two.darkblue-color,
.inst-tc #common-filter-box-modal-one .menu-two.desktop-filter {
    display: none !important;
}

/* ═══ (2026-09-09) لوحة الفلتر الجانبي: قطعة واحدة ═══════════════
   ملاحظة المستخدم: «الفلتر لازم في بعضه… لازق في بعضه». كان بيتقري
   خمس أشكال منفصلة: رأس مصمت، ثم قوائم منسدلة كأقراص عايمة بمسافات،
   ثم زرار الكتيب، ثم صف "تصنيفات أخرى"، ثم لوحة الدورات الداخلية —
   وكل واحد بحوافه. دلوقتي لوح واحد بحدّ وزوايا وقص، الرأس ملزوق فوق
   والدعوة ملزوقة تحت والباقي في جسم واحد بحشو موحّد.
   ───────────────────────────────────────────────────────────── */
.inst-tc-side {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
}
.inst-tc-side > * { border-radius: 0 !important; }
.inst-tc-side-head { margin: 0; padding: 12px 14px; }
.inst-tc-side #common-filter-box-modal-one { padding: 12px 14px 14px; }
.inst-tc-side #common-filter-box-modal-one .box2 {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* زرار "تحميل الكتيب" وصف "تصنيفات أخرى" جوّه نفس الجسم، بعرضه كامل. */
.inst-tc-side #common-filter-box-modal-one .menu-two.purple-color,
.inst-tc-side #common-filter-box-modal-one .menu-two.listing-color {
    width: 100%;
    margin: 8px 0 0 !important;
    min-height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
/* الدعوة ملزوقة في قاع اللوحة من غير هامش ولا حواف خاصة بيها. */
.inst-tc-side .inst-tc-cta {
    margin: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

/* (2026-09-09) السعر بالدولار فقط في كل المعاهد — بدل مبدّل العملة (select).
   المعهد وحده لسه بيعرض الـselect، فالقواعد دي كلها على .fee-usd بس. */
.fee-usd{font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--site-primary,#244298);white-space:nowrap}
body.pg-training-courses .session-card .fee-usd{font-size:1rem}

/* (2026-09-09) kutlat at-tawasul (.inst-cra): ism al-ma3had kan biyilef 3ala
   satren wal-ayqona at-tabe3ha kanet baydawiya. as-sabab: al-head kan flex item
   biyinkimish (flex:0 1 auto) fal-ayqona faqadet 3ardaha wan-nass itdaghat.
   al-hall: al-head mish biyinkimish, wal-ayqona murabba3a thabita, wal-ism satr wahid. */
.inst-cra-head{flex:0 0 auto}
.inst-cra-head > .bi{flex:0 0 auto;line-height:1}
.inst-cra-head strong{white-space:nowrap}
.inst-cra-list{flex:1 1 auto;min-width:0}
/* al-kutla btakhud 3ard al-muhtawa, mahdouda bi-3ard al-3amud mish bi-520px */
body.pg-training-courses .inst-cra--desktop{max-width:100%;width:fit-content}
@media (max-width:991px){
    body.pg-training-courses .inst-cra--desktop{width:100%}
    .inst-cra-head strong{white-space:normal}
}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) الكلام بيختفي لما تقف عليه — الدفعة الشاملة

   نفس السبب المشروح فوق: `a:hover{color:var(--site-primary)!important}`
   جاي من _brand.css، فأي زرار أو رقاقة بتتملي بلون المعهد عند الوقوف
   بيبقى لون النص هو نفس لون الخلفية. القواعد الأصلية بتكتب color:#fff
   بس الـ!important بيغلبها.

   مسح hover على ١٢ موقع × ٥ صفحات (audit.py --hover-scan) طلّع الليستة دي.
   الحل بالآلية الموجودة أصلاً: كل عنصر بيعلن حبره وقت الوقوف لنفسه.
   ───────────────────────────────────────────────────────────── */
body[class*="theme-"] .gf-footer-pill,
body[class*="theme-"] .gf-chip,
body[class*="theme-"] .gf-hero-advanced a,
body[class*="theme-"] .ld-searchbar-advanced,
body[class*="theme-"] .omcu-go,
body[class*="theme-"] .pl-cities-pill,
body[class*="theme-"] .pl-footer-cta-btn,
body[class*="theme-"] .inst-tc-cta,
body[class*="theme-"] .ab-cc-link,
body[class*="theme-"] .sa-ab-act-links a{
    --link-hover-ink:#fff;
}

/* جلوماك: الوقوف بيقلب الزرار لبني غامق وحبره ذهبي، مش أبيض */
body.theme-glomac .gm-led-btn{--link-hover-ink:#c8b100}

/* قائمة المواعيد القادمة: أربع ثيمات بس بتملي الكارت بلون غامق عند
   الوقوف. الباقي بيفضل على خلفية فاتحة، فالحبر الأبيض كان بيمسح الكلام. */
body.theme-omani .inst-upcoming-list a,
body.theme-plus .inst-upcoming-list a,
body.theme-abfa .inst-upcoming-list a,
body.theme-gulf .inst-upcoming-list a{--link-hover-ink:#fff}

/* زرار "Back": بيقع على شريط ملوّن في مواقع وعلى ورق أبيض في غيرها،
   فالحبر بيتوّرث من الشريط بدل ما يتحدد بلون ثابت.

   مينفعش يتكتب `--link-hover-ink:inherit` — الكلمة دي على متغيّر
   معناها "ورّث قيمة المتغيّر من الأب" (مش موجودة)، فبيرجع للافتراضي
   وهو لون المعهد. فالقاعدة بتكتب color:inherit على :hover مباشرة. */
/* (2026-09-12) تصحيح: القاعدة دي كانت على أي a.pull-right في الصفحة، و.pull-right
   كلاس بوتستراب عام — فكانت بتطول كمان زرّي "استفسار سريع" و"أعد الإتصال بي" في
   صفحة تفاصيل الدورة (دول <a> بنفس الكلاس)، وتديهم color:inherit عند الوقوف يعني
   لون المعهد الافتراضي rgb(39,40,43) على خلفية كحلي المعهد: تباين 107 في أبفا و90
   في عُماني مقابل 626 في زرار "تنزيل الكتيب" جنبهم (ده <button> فماكانش بيتأثر).
   الحصر على البنر — وهو المكان الوحيد اللي زرار العودة فيه أصلاً. */
body[class*="theme-"] #common-banner-section-icon a.pull-right:hover,
body[class*="theme-"] #common-banner-section-icon a.pull-right:focus,
body[class*="theme-"] #common-banner-section-icon a.pull-left:hover,
body[class*="theme-"] #common-banner-section-icon a.pull-left:focus,
body[class*="theme-"] #common-banner-section-image a.pull-right:hover,
body[class*="theme-"] #common-banner-section-image a.pull-right:focus,
body[class*="theme-"] #common-banner-section-image a.pull-left:hover,
body[class*="theme-"] #common-banner-section-image a.pull-left:focus,
body[class*="theme-"] .common-banner-section-box a.pull-right:hover,
body[class*="theme-"] .common-banner-section-box a.pull-right:focus,
body[class*="theme-"] .common-banner-section-box a.pull-left:hover,
body[class*="theme-"] .common-banner-section-box a.pull-left:focus{
    color:inherit!important;text-decoration:underline;
}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) تبويب Virtual Learning: الكلام مكدّس في أعمدة رفيّعة

   الكروت جوّه owl-carousel بيتظبط عرضه بجافاسكريبت وقت التحميل،
   والتبويب لسه مخفي، فبيقيس عرض غلط. القياس على ١٢ موقع:
   أبفا ١٤١px، بلَس ١٧٤، جلوبال ١٧٣، عُمان ٢٠٦، السعودية ٢٢٦ —
   ستة أعمدة في مساحة تكفي تلاتة أو أربعة، فاسم الدورة بياخد ٥ سطور.

   الأسهم والنقط متعطّلة أصلاً (owl-nav/owl-dots disabled) والبنود
   أربعة، يعني الكاروسيل مش بيعمل حاجة. فبيتحوّل لشبكة عادية،
   والعرض بيتحسب من المساحة الفعلية مش من قياس وقت الإخفاء.
   المعهد مش بيحمّل الملف ده، فالكاروسيل عنده زي ما هو.
   ───────────────────────────────────────────────────────────── */
body[class*="theme-"] #nav-virtuallearning .owl-carousel .owl-stage-outer{overflow:visible}
body[class*="theme-"] #nav-virtuallearning .owl-carousel .owl-stage{
    width:auto!important;transform:none!important;padding:0!important;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;
}
body[class*="theme-"] #nav-virtuallearning .owl-carousel .owl-item{
    width:auto!important;float:none!important;margin:0!important;
}
body[class*="theme-"] #nav-virtuallearning .courselisting-normal{height:100%}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) شريط البنر: آخر فتافيت المسار وزرار "Back" مش باينين

   القاعدة فوق بتلوّن `.breadcrumb` و`.breadcrumb a` بس. الفتّة الأخيرة
   عنصر <li class="breadcrumb-item active"> من غير <a>، وبوتستراب بيدّيها
   color:#6c757d — رمادي على لوح ملوّن، فمقاس التباين طلع 1.19:1 على تمانية
   مواقع. وزرار Back لونه من CSS المعهد rgb(39,40,43) — غامق على لوح غامق.

   البنر عنده حبر واحد (--banner-ink) والاتنين بيقروه. أبيض في كل المواقع
   لأن اللوح ملوّن، وكحلي في بلَس لأن لوحه أبيض بوتد برتقالي على الجنب.
   ───────────────────────────────────────────────────────────── */
body[class*="theme-"]{--banner-ink:rgba(255,255,255,.82)}
body.theme-plus{--banner-ink:#001e45}

body[class*="theme-"] #common-banner-section-icon .breadcrumb,
body[class*="theme-"] #common-banner-section-icon .breadcrumb a,
body[class*="theme-"] #common-banner-section-icon .breadcrumb .breadcrumb-item.active,
body[class*="theme-"] #common-banner-section-image .breadcrumb,
body[class*="theme-"] #common-banner-section-image .breadcrumb a,
body[class*="theme-"] #common-banner-section-image .breadcrumb .breadcrumb-item.active{
    color:var(--banner-ink,rgba(255,255,255,.82))!important;
}
/* الفتّة الحالية مش رابط — تفضل أهدى شوية بس مقروءة */
body[class*="theme-"] #common-banner-section-icon .breadcrumb .breadcrumb-item.active,
body[class*="theme-"] #common-banner-section-image .breadcrumb .breadcrumb-item.active{opacity:.85}

/* زرار Back: بلَس لوحه أبيض والزرار واقف على الوتد البرتقالي، فأبيض هناك */
body[class*="theme-"] #common-banner-section-icon a.pull-right,
body[class*="theme-"] #common-banner-section-image a.pull-right,
body[class*="theme-"] .common-banner-section-box a.pull-right{
    color:var(--banner-ink,rgba(255,255,255,.82))!important;
}
body.theme-plus #common-banner-section-image a.pull-right,
body.theme-plus .common-banner-section-box a.pull-right{color:#fff!important}
/* عربي: لوحه برونزي فاتح (#b08968) فـ.82 أبيض بيدّي 2.74:1 — أبيض كامل */
body.theme-arabi{--banner-ink:#fff}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) العمود الجانبي اللاصق: نصّه العلوي بيتخبّى ورا الهيدر

   الهيدر الثابت قاعه بين 113 و128px حسب الموقع، والأعمدة اللاصقة كانت
   بتلزق عند 16 و18 و92px — يعني أول 100px منها (عنوان "COURSE SECTIONS"
   وسطر Overview) بيقعدوا تحت الهيدر وانت بتنزل.

   القياس على الـ11 موقع: المورد 107px مخفيين، الخليج 107، بلَس 28،
   جلوبال صفر (كان مظبوط أصلاً على 132).

   اللزقة بقت تحت أعلى هيدر (136px). من غير تحديد ارتفاع: جرّبنا نحدّده
   بارتفاع الشاشة الباقي مع تمرير داخلي، فآخر العمود (زرار Register Now)
   اتقص وبان ناقص. المطلوب العمود كله باين، فاللزقة بس هي اللي اتظبطت.
   ───────────────────────────────────────────────────────────── */
body[class*="theme-"]{--rail-offset:136px}

body[class*="theme-"] .mw-cd-rail,
body[class*="theme-"] .gf-cd-rail-inner,
body[class*="theme-"] .gl-cd-rail,
body[class*="theme-"] .plcp-stub-in{
    top:var(--rail-offset)!important;
}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) روابط الفوتر بتختفي عند الوقوف

   نفس جذر المشكلة بتاع البنر: `a:hover{color:var(--link-hover-ink,
   var(--site-primary))!important}` بيغلب اللون اللي الثيم نفسه كاتبه.
   السعودي مثلاً كاتب ذهبي (#f7c608) للفوتر الأخضر، فبقى أخضر على أخضر.

   ومسح hover ما مسكهاش: خلفية الفوتر تدرّج (background-image) والفاحص
   كان بيقيس backgroundColor بس، فشاف اللون واقف على أبيض.

   كل حاوية فوتر بتعلن الحبر اللي ثيمها قصده — نفس القيم المكتوبة في
   ملفات الثيمات بالحرف.
   ───────────────────────────────────────────────────────────── */
body.theme-almawred .institute-footer,
body.theme-global .gl-footer-list,
body.theme-global .gl-footer-contact,
body.theme-gulf .gf-footer-links,
body.theme-plus .pl-footer-cta-sub{--link-hover-ink:#fff}

body.theme-saudi .sa-footer-list{--link-hover-ink:var(--site-accent,#f7c608)}
body.theme-glomac .gm-footer-list{--link-hover-ink:var(--site-accent,#c8b100)}
body.theme-omani .om-footer-list{--link-hover-ink:var(--site-accent,#5c3092)}

/* ─────────────────────────────────────────────────────────────
   (2026-09-09) صف أزرار الدورة (اقتراح داخلي / استفسار / كتيّب /
   اتصل بيا / سجّل): مبني على float قديم (pull-left / pull-right /
   clearfix)، فعند أي عرض متوسط بيقع "Register Now" على سطر تاني
   ويركب على الصف اللي فوقه، والمسافات بين الأزرار مش منتظمة.

   صف flex: كل الأزرار في سطر بمسافة واحدة، وزرار التسجيل مدفوع
   لآخر السطر، ولو ضاق العرض بيلف لسطر نظيف تحته مش فوق حاجة.
   ───────────────────────────────────────────────────────────── */
body[class*="theme-"] .custom-outline-box{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
/* (2026-09-10) مجموع الأزرار 722px والصندوق بيضيق لـ626 عند 1200px
   (كتلة التواصل واخدة الجنب)، فالأزرار كانت بتتفكّ لتلات سطور وزرار
   التسجيل بينزل لوحده. الأزرار بتتقلّص بالتساوي بدل ما تلف: كل زرار
   بياخد نصيبه من العرض المتاح ونصّه بيتقصّ بنقط لو لزم. */
body[class*="theme-"] .custom-outline-box{flex-wrap:nowrap}
body[class*="theme-"] .custom-outline-box > .btn,
body[class*="theme-"] .custom-outline-box > .pull-left,
body[class*="theme-"] .custom-outline-box > .pull-right,
body[class*="theme-"] .custom-outline-box > form{
    flex:0 1 auto;min-width:0;
}
body[class*="theme-"] .custom-outline-box .btn{white-space:nowrap}
/* التقليص بالخط والحشو مش بقصّ النص: القصّ بنقط كان بيخلّي
   "Request an In-House Propos…" ونصّه خارج خلفيته الخضرا. */
@media (max-width:1399px){
    body[class*="theme-"] .custom-outline-box .btn{
        font-size:.72rem!important;padding-inline:10px!important;
    }
}
@media (max-width:1199px){
    body[class*="theme-"] .custom-outline-box .btn{
        font-size:.68rem!important;padding-inline:8px!important;
    }
}
/* تحت 992px الكتلة بتاخد عرض الصفحة كامل، فاللف هنا مقبول ومطلوب */
@media (max-width:991px){
    body[class*="theme-"] .custom-outline-box{flex-wrap:wrap}
}
/* مجموع الأزرار 722px في صندوق 757 — فجوة 10px كانت بتزوّد المجموع
   فوق العرض وتنزّل زرار التسجيل سطر لوحده. 6px بتخلّيه 746 ويقعد. */
body[class*="theme-"] .custom-outline-box > .pull-left,
body[class*="theme-"] .custom-outline-box > .pull-right,
body[class*="theme-"] .custom-outline-box > form{
    float:none!important;margin:0!important;
}
body[class*="theme-"] .custom-outline-box > .pull-right{margin-inline-start:auto!important}
body[class*="theme-"] .custom-outline-box > .btn{margin:0!important}
body[class*="theme-"] .custom-outline-box > .clearfix{display:none}

/* (2026-09-10) كتلة التواصل في صفحة الدورة عند عُمان لوحها بتدرّج داكن
   ونصّها أبيض، فالوقوف كان بيرجّعه للون المعهد الأساسي (#003452) —
   كحلي على كحلي. مسح hover مسكها بعد ما اتظبط ليشوف التدرّجات. */
body.theme-omani .om-steps-top .inst-cra{--link-hover-ink:#fff}

/* (2026-09-10) دفعة تانية من "الكلام بيختفي عند الوقوف" — طلعت من مسح
   hover بعد ما اتظبط ليشوف الخلفيات المتدرّجة. نفس السبب: الثيم كاتب
   color:#fff والـ!important في _brand بيغلبه. */
body.theme-omani a.omcu-pill,
body.theme-omani .om-pill-act,
body.theme-omani .inst-contact-list a,
body.theme-smart .sm-fq-chip{--link-hover-ink:#fff}
/* بلَس: عنوان بطاقة التحميل بيتملي بلون المعهد عند الوقوف */
body.theme-plus .pldk-tk-t a{--link-hover-ink:#fff}
/* عُمان: في الأسئلة الشائعة لوحين بنفس الكلاس — --ask بتدرّج داكن
   وروابطه بيضا، و--org أبيض وروابطه بنفسجية. القاعدة على الداكن بس؛
   لو اتحطّت على الاتنين كانت هتخفي روابط اللوح الأبيض. */
body.theme-omani .omfq-cap--ask{--link-hover-ink:#fff}
/* الخليج: رقاقة التخصص بتتملي بالأحمر عند الوقوف ونصّها المقصود أبيض */
body.theme-gulf .gf-categories-pill{--link-hover-ink:#fff}

/* (2026-09-10) دفعة تالتة: مسح hover على 14 عائلة طلّع 89 عنصر.
   نفس السبب في كلهم — الثيم كاتب color:#fff عند الوقوف والـ!important
   في _brand بيغلبه، فالنص بياخد لون المعهد على خلفية بنفس اللون. */
body.theme-omani .omcc-chip,
body.theme-omani .omp-route,
body.theme-omani a.omreg-cap--act,
body.theme-abfa .ab-crest-tile{--link-hover-ink:#fff}

/* .color-white كلاس مشترك (fullcss) بيدّي نص أبيض على لوح داكن —
   الوقوف كان بيرجّعه للون المعهد. */
body[class*="theme-"] .color-white,
body[class*="theme-"] a.color-white{--link-hover-ink:#fff}
/* القادة: شريط أعلى الصفحة داكن ونصّه أبيض */
body.theme-leaders .ld-topbar-row{--link-hover-ink:#fff}
/* القادة: لوح أزرق في صفحة الاقتراح الداخلي نصّه أبيض */
body.theme-leaders .ldx-panel-blue{--link-hover-ink:#fff}
/* عُمان: نفس كلاس .om-pill-lnk على كبسولتين — الكبيرة (--lg) بتدرّج
   داكن ونصّها أبيض، والعادية بيضا ونصّها كحلي. القاعدة على الداكنة بس؛
   لما حطّيتها على الاتنين الأعطال زادت من 5 لـ15 والفاحص مسكها. */
body.theme-omani .om-pill--lg .om-pill-lnk{--link-hover-ink:#fff}


/* ─────────────────────────────
   (2026-09-10) أيقونات كرت نتايج البحث

   الأيقونات في standard_view.php مكتوبة inline SVG وجواها
   `fill="#d26928"` — برتقالي المعهد متثبّت في الماركب نفسه، فكان بيطلع
   على العشر معاهد كمان. الـfill ده خاصية عرض (presentation attribute)
   فأي قاعدة CSS بتغلبه من غير !important.

   الملف ده معاهد بس، فالمعهد بيفضل على برتقاليه.
   ───────────────────────────── */
.courselisting svg.bi{fill:var(--site-primary,#244298)}

/* ─────────────────────────────
   (2026-09-10) كرت نتايج البحث من غير صورة

   الصورة في الكرت ده كانت آخر مكان في المعاهد لسه بيعرض صورة دورة.
   وقياس الاتناشر موقع طلّع إنها مالهاش قيمة أصلاً: في ٦ معاهد كانت
   مخفية خلاص (عُمان، القادة، السعودي، بلَس، عربي، جلوبال)، وفي ٤
   معاهد كانت بتحمّل الـplaceholder الرمادي 300×200 مش صورة حقيقية
   (المورد، أبفا، سمارت، جلوماك). المعهد لوحده عنده صورة فعلية 707px.

   والأهم: المتن `.course-content` كان واقف عند 854 من 1050 عشان
   الصورة عايمة يمينه — يعني الستة اللي الصورة مخفية عندهم كان عندهم
   شريط فاضي 196px على طول كل كرت نتيجة.

   فالصورة بتتشال والمتن بياخد عرض الكرت. الملف ده معاهد بس، فكرت
   المعهد بيفضل بصورته زي ما هو.
   ───────────────────────────── */
body.pg-search-page .course-image{display:none}
body.pg-search-page .course-content{
    width:auto;max-width:none;float:none;
}


/* ─────────────────────────────
   (2026-09-10) بانرات الصفحات من غير صورة — كل المعاهد

   الخليج اتشالت منه الصورة بطلب صريح، وبعدين الطلب اتمدّ لباقي
   المواقع. القياس طلّع إن تمن معاهد كانوا خلاص من غير صورة، وفضل
   تلاتة بيها: abfa وglomac وsmart.

   مع اختفاء الصورة النص بياخد عرض البانر بدل ما يتحشر جنبها.
   بانرات الأيقونات لها id تاني (`#common-banner-section-icon`)
   فما اتلمستش. الملف ده معاهد بس، فبانر المعهد زي ما هو.
   ───────────────────────────── */
#common-banner-section-image .common-banner-image{display:none!important}
#common-banner-section-image .common-banner-text{
    float:none;width:auto;max-width:none;flex:1 1 auto}

/* ─────────────────────────────
   (2026-09-10) سجل المقالات والمدونات من غير تاريخ — القوالب المشتركة

   عربي وسمارت بيرندروا النسخة المشتركة، واللي بتحطّ التاريخ في
   `.course-date` جوّه الكرت. نفس الكلاس مستعمل في قوايم الدورات،
   فالقاعدة متقيّدة بحاويتي المقالات والمدونات. الملف ده معاهد بس،
   فالمعهد زي ما هو.
   ───────────────────────────── */
#article_list .course-date,
#blog_list .course-date{display:none}

/* ─────────────────────────────
   (2026-09-11) عنوان صفحة البحث بقى <h1> بنفس مقاسه

   الوسم اتغيّر من h4 لـh1 (الصفحة كانت من غير أي عنوان — الجزء اللي
   في page_banner متعلّق في كومنت). التغيير المفروض بنيوي بس، لكن h1
   مقاسه الافتراضي أكبر: قِست 31px بدل 23px. المقاس بيترجّع هنا
   فالشكل ما بيتغيّرش. الملف ده معاهد بس والمعهد لسه على h4.
   ───────────────────────────── */
body.pg-search-page h1.one.color-white{font-size:23px;line-height:1.2}

/* ─────────────────────────────
   (2026-09-11) خريطة الموقع: شبكة بدل الأعمدة المكسورة

   القوايم كانت `li.col-md-6` عايمة جوّه سياق أعمدة، فالبند الواحد
   كان بينقسم بين عمودين — كلمة "Learning" لوحدها في أول عمود،
   وسطور متعلّقة في نُصّها. الصفحة كمان كانت 20 ألف بكسل.

   شبكة حقيقية: أعمدة متساوية، وكل بند كتلة واحدة ما بتتقسمش.
   الملف ده معاهد بس، فخريطة المعهد زي ما هي.
   ───────────────────────────── */
#common-listing-section .sitemap-list,
.sitemap-list{
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:4px 30px;list-style:none;margin:0;padding:0}
.sitemap-list > li{
    float:none!important;width:auto!important;max-width:none!important;
    break-inside:avoid;padding:0!important;
    font-size:.84rem;line-height:1.55}
/* البنود بقت صفوف زي صفوف قوايم الدورات: خط شعرة تحت كل صف،
   والصف كله قابل للضغط، وغسلة خفيفة بلون الموقع عند المرور. */
.sitemap-list > li{border-bottom:1px solid rgba(128,128,128,.18)}
.sitemap-list > li > a{
    display:block;padding:8px 10px;margin-inline:-10px;
    text-decoration:none;border-radius:4px;
    transition:background .15s ease,color .15s ease}
.sitemap-list > li > a:hover{
    background:color-mix(in srgb,var(--site-primary,#244298) 8%,transparent);
    color:var(--site-primary,#244298)}
@media (max-width:575px){
    .sitemap-list{grid-template-columns:1fr}
}

/* (2026-09-11) أسماء الشهور في النسخة العربية بقت عربي (سبتمبر بدل Sep).
   كلاسات الشهر عند الثيمات عليها letter-spacing + uppercase للإنجليزي،
   والتباعد بين الحروف بيقطّع الحروف العربية الموصولة — فبيتلغي في RTL. */
body[dir="rtl"] .inst-upcoming-month,
body[dir="rtl"] .gm-sched-mon,
body[dir="rtl"] .ar-up-stub-mon,
body[dir="rtl"] .ar-up-lead-my,
body[dir="rtl"] .ar-vl-mon,
body[dir="rtl"] .gmb-stamp-m,
body[dir="rtl"] .plart-next-mon{letter-spacing:normal!important;text-transform:none!important}

/* ============================================================
   (2026-09-12) طلب صريح: "الظل في الخلفية يحتوى على نفس الرسمة".

   الستايل الأساسي المشترك بيرسم bg-homeassociations.png بشفافية .09 جوّه
   #common-banner-section-image .background-listing::before — نفس الرسمة
   بالحرف في كل المواقع. وفي نفس الوقت كل معهد عنده رسمته الخاصة
   (assets/images/institutes/banners/<theme>.svg) وطالعة كمتغيّر --site-banner،
   لكن الثيمات بتحطّ لون/تدرّج على الـsection نفسه فبتغطّي عليها — فاللي فضل
   باين هو الرسمة المشتركة بس.

   هنا بنبدّل صورة الطبقة دي برسمة المعهد نفسه: كل موقع بقى له رسمته.
   الملف ده مابيتحمّلش لالمعهد أصلاً (site_stylesheets بترجع [] من غير ثيم)،
   فالمعهد فاضل على الرسمة المشتركة زي ما هو بالظبط.
   ============================================================ */

#common-banner-section-image .background-listing::before {
    background-image: var(--site-banner);
}

/* ============================================================
   (2026-09-12) طلب صريح: زراري "Standard View" و"List View" يتشالوا من صفحة
   نتايج البحث في كل المعاهد.

   إخفاء بالـCSS مش حذف من الماركب: الزرارين في نفس الحاوية بتاعة زرار
   "Modify Search" (tab_heads.php) اللي بيعتمد عليه هيكل العربي، والمعالجات
   في script.js بتتعامل معاهم بـclick — فإخفاؤهم بيوقف التبديل بأمان
   والصفحة بتفضل على العرض المعياري وهو الافتراضي أصلاً.

   الملف ده مابيتحمّلش لالمعهد (site_stylesheets بترجع [] من غير ثيم)،
   فالزرارين عنده زي ما هم.
   ============================================================ */
body.pg-search-page .search-standardview,
body.pg-search-page .search-listview {
    display: none !important;
}

/* (2026-09-12) طلب صريح: امسح زرّي "Other Categories" و"Related" من فلاتر صفحات الأقسام.
   مقصور على body.pg-category-page عن قصد: نفس الكلاسين (listing-color + courselist-filter-btn)
   مستعملين كمان في فلتر الجمعيات (Other Associations / Visit Website) وفي فلاتر الـsnippets،
   ودول مالهمش علاقة بالطلب. وزرار الفلتر في الموبايل (.filter-area-courselist-dropdown)
   حاجة تانية خالص ومتسيبش. المعهد مابيحمّلش الملف ده أصلاً. */
body.pg-category-page .menu-two.listing-color.courselist-filter-btn,
body.pg-category-page .filter-area-courselist-desktop{display:none!important}

/* (2026-09-12) الزرّين اتشالوا فوق، بس ثيمين بيغلبوا القاعدة دي بمحدِّد أعلى وبيرجّعوهم:
     leaders.css:3074  .inst-tc-side .menu-two.float-right{display:inline-flex!important}
       (بيمسك الزرار من .float-right مش من .listing-color)
     saudi.css:4861    .inst-tc-side > .col-md-12.p-0 > .courselist-filter-btn{display:inline-block!important}
   القاعدتين اتكتبوا لتنسيق زرار المفروض دلوقتي مختفي في صفحات الأقسام،
   فبنوقفهم على .pg-category-page بس بمحدِّد أعلى منهم — وباقي الصفحات زي ما هي. */
body.pg-category-page.theme-leaders .inst-tc-side .menu-two.listing-color.courselist-filter-btn.float-right,
body.pg-category-page.theme-saudi.pg-training-courses .inst-tc-side > .col-md-12.p-0 > .menu-two.listing-color.courselist-filter-btn,
body.pg-category-page.theme-leaders .inst-tc-side .filter-area-courselist-desktop,
body.pg-category-page.theme-saudi.pg-training-courses .inst-tc-side > .col-md-12.p-0 > .filter-area-courselist-desktop{display:none!important}

/* (2026-09-12) طلب صريح: الفلتر وزرار الكتيب في صفحات الأقسام مطابقين لصفحات الدورات الحضورية.

   ١) الطول: صفحة القائمة بتحط align-items:stretch على صف الفلتر (سطر 1776) فالزرار
      بياخد طول الصف (34-36px)، وصفحة القسم بتحط align-items:center (سطر 2063 و2081)
      فالزرار بياخد طول محتواه (25px) — نفس الحشو ونفس الخط، الفرق في المحاذاة بس.

   ٢) ليدرز: قاعدة إخفاء الكتيب من الفلتر (leaders.css:4550) معلّقة على
      #common-filter-box-modal-one، والـid ده مش موجود في صفحة القسم، فالزرار بيظهر
      مرتين (في البنر وفي الفلتر) — وده بالظبط اللي القاعدة دي اتكتبت تمنعه. */
body.pg-category-page .new-courselist-filter .col-md-12.p-0,
body.pg-category-page .new-courselist-filter .filter-courselist-wrap > .col-md-12{align-items:stretch}
body.pg-category-page.theme-leaders aside.inst-tc-side #download_brochure_category,
body.pg-category-page.theme-leaders aside.inst-tc-side .menu-two.purple-color{display:none!important}

/* (2026-09-12) طلب صريح: كلمة "عودة"/Back في صفحات الأقسام لونها مش باين — خليها أبيض كامل.
   الحبر كان rgba(255,255,255,.82) من --banner-ink (سطر 2619)، و.82 فوق أخضر جلوبال
   (#0a7269) أو أخضر السعودي (#006233) بيطلع باهت. الرابط والسهم والـspan كلهم بياخدوا
   نفس اللون، فالتعديل على الرابط وأولاده مرة واحدة.
   استثناءات مقصودة: بلَس لوحه أبيض وحبره كحلي (#001e45) فيفضل زي ما هو.
   والكلاس بيتقلب pull-left في العربي (breadcrumb_section.php سطر 6) فالاتنين متغطيين.
   المعهد مابيحمّلش الملف ده أصلاً. */
body[class*="theme-"]:not(.theme-plus) #common-banner-section-icon a.pull-right,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-icon a.pull-left,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-image a.pull-right,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-image a.pull-left,
body[class*="theme-"]:not(.theme-plus) .common-banner-section-box a.pull-right,
body[class*="theme-"]:not(.theme-plus) .common-banner-section-box a.pull-left,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-icon a.pull-right *,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-icon a.pull-left *,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-image a.pull-right *,
body[class*="theme-"]:not(.theme-plus) #common-banner-section-image a.pull-left *,
body[class*="theme-"]:not(.theme-plus) .common-banner-section-box a.pull-right *,
body[class*="theme-"]:not(.theme-plus) .common-banner-section-box a.pull-left *{color:#fff!important}

/* (2026-09-12) طلب صريح: "التواريخ ليست في نفس المستوى" في كروت الدورات ذات الصلة.
   الكروت في السلايدر أعمدة flex بارتفاع واحد (الكاروسيل بيمدّها)، بس العنوان فوق
   التاريخ وطوله بيتغيّر (٣ سطور 60px، ٤ سطور 80px، و٥ سطور 99px في صفحات تانية)،
   فالتاريخ بينزل معاه: القياس اداه مستويين وتلاتة حسب الصفحة.
   تثبيت ارتفاع للعنوان مرفوض — هيقصّ الأسماء الطويلة (وده اللي سطر 1791 اتكتب يمنعه).
   الحل: نزقّ كتلة (التاريخ + اللغة + الفورم) لقاع الكارت بـmargin-top:auto على
   التاريخ. الكروت متساوية الارتفاع أصلاً، فالتاريخ بيقع على نفس المستوى في كلها
   مهما طال العنوان. والـauto القديم على الفورم بيتلغي عشان ما يتقسمش الفراغ مرتين. */
.common-slider .courselisting .course-date{margin-top:auto!important}
.common-slider .courselisting > form{margin-top:0!important}

/* (2026-09-12) طلب: "لما بقف على الزر الكلام بيختفي عشان بياخد لون الخلفية"
   في صفحات نتائج البحث (Course Outline / Quick Enquiry / Register Now).
   السبب: _brand.css بتقلب خلفية الزرار أبيض عند الوقوف، و_institute.css:2254
   بتثبّت لون النص أبيض — فالنتيجة أبيض على أبيض (القياس: قبل وبعد
   rgb(255,255,255) على rgb(255,255,255)).
   الحل إن الخلفية تفضل بلون المعهد عند الوقوف وتغمق شوية، فالنص الأبيض
   يفضل مقروء. قواعد الكروت في صفحات الدورات أعلى تحديدًا فما اتأثرتش. */
body[class*="theme-"] .btn-secondary:hover,
body[class*="theme-"] .btn-secondary:focus,
body[class*="theme-"] .btn-purple:hover,
body[class*="theme-"] .btn-purple:focus{
    background:var(--site-accent,#f7c608)!important;
    border-color:var(--site-accent,#f7c608)!important;
    color:#fff!important;filter:brightness(.92)}
body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .btn-primary:focus{
    background:var(--site-primary,#244298)!important;
    border-color:var(--site-primary,#244298)!important;
    color:#fff!important;filter:brightness(.92)}

/* (2026-09-12) طلب: "في صفحة البحث عايز لما أعمل سكرول لتحت محرك البحث يتحرك معايا".
   العمود .search-results-wrap-left جوّه .row بـdisplay:flex، فبيتمدّ لطول الصف كله
   (18000px+) بينما محتواه 303-532px بس — وsticky مابتشتغلش على عنصر مالي الحاوية.
   align-self:flex-start بتخلّيه يقف على قد محتواه، وبعدين sticky بتشتغل.
   top:100px بيعدّي الهيدر الثابت (70-86px حسب الموقع) ويسيب فراغ صغير. */
body[class*="theme-"] .search-results-wrap-left{
    align-self:flex-start;position:sticky;top:100px;z-index:5;
    /* (2026-09-12) اللوحة أطول من الشاشة في بعض المواقع، فكان طرفها العلوي
       بيتقص لما تلزق. الحد الأقصى بارتفاع الشاشة مع تمرير داخلي بيخلي كل
       الخانات توصل. */
    max-height:calc(100vh - 120px);overflow-y:auto;overscroll-behavior:contain}

/* (2026-09-12) المورد والخليج فلترهم شريط أفقي بعرض الصفحة بنفس الكلاس
   (1272x84) مش عمود جانبي — ولزقه بيخليه يعوم فوق كروت الدورات. اللزق
   للأعمدة الجانبية بس. */
body.theme-almawred .search-results-wrap-left,
body.theme-gulf .search-results-wrap-left{
    position:static;max-height:none;overflow:visible}

/* (2026-09-12) أرقام الهاتف كانت بتتقلب في النثر العربي: "+971 50 510 2512"
   بيتعرض "2512 510 50 971+". الرقم في الـDOM سليم — اللي بيتقلب هو ترتيب
   عرضه: مجموعات الأرقام بتنفصل بمسافات، والمسافة محايدة اتجاهياً، فالفقرة
   العربية بترتّب المجموعات من اليمين لليسار.

   unicode-bidi:isolate لوحده ما بيكفيش — وده اللي كان مكتوب في بعض الثيمات:
   العزل بيفصل العنصر عن جيرانه بس بيفضل وارث direction:rtl من الصفحة، فالقلب
   بيفضل جوّه العنصر نفسه. المطلوب معاه direction:ltr.

   القاعدة على الرابط نفسه مش على الثيم عشان تغطّي أي موضع — اتلاقت في عربي
   وجلوماك وليدرز، والأشرطة العلوية كانت مظبوطة لأنها بتحط dir="ltr" في
   الماركب. وهي صحيحة في اللغتين: رقم الهاتف والبريد محتوى لاتيني دايماً،
   فعلى الصفحة الإنجليزية القاعدة بلا أثر.

   nowrap للهاتف بس: الرقم قصير ومقطعه وسط السطر بيخليه غير مقروء. البريد
   أطول، وnowrap عليه كان هيطلّعه بره صناديق ضيّقة. */
[class*="theme-"] a[href^="tel:"]{
    direction:ltr;unicode-bidi:isolate;white-space:nowrap}
[class*="theme-"] a[href^="mailto:"]{
    direction:ltr;unicode-bidi:isolate}

/* (2026-09-13) صفحات /course-finder العربية كان بينفتح فيها تمرير أفقي على
   فراغ ~9800px. السبب في chosen.css نفسه:
       .chosen-container .chosen-drop{left:-9999px}   ← الإنجليزي
       .chosen-rtl .chosen-drop{left:9999px}          ← العربي
   القايمة المنسدلة وهي مقفولة بتتخبّى بالإزاحة بره الشاشة. بالسالب (إنجليزي)
   الإزاحة لليسار وما بتمدّش مساحة التمرير؛ بالموجب (عربي) بتروح لليمين
   وبتمدّها فعلاً. عشان كده العيب طلع في السبع صفحات العربية بس.

   body عليها overflow-x:hidden بس دي ما بتمنعش التمرير لأن الفيض على
   documentElement مش على body — اتأكدت بتحريك window.scrollTo(-9000)
   وفعلاً اتحرّك.

   الحل إن الإخفاء يبقى بـdisplay بدل الإزاحة، فالعنصر ما يحجزش مساحة أصلاً.
   حالة الفتح مش بتتلمس: قاعدة chosen الأصلية
   .chosen-container.chosen-with-drop .chosen-drop{left:0} تخصيصها أعلى من
   قاعدة .chosen-rtl فبتكسبها وهي فاتحة زي ما كانت. */
[class*="theme-"] .chosen-container .chosen-drop{display:none}
[class*="theme-"] .chosen-container.chosen-with-drop .chosen-drop{display:block}