/* ============================================================
   معهد الخليج — Gulf Institute
   ------------------------------------------------------------
   Direction: one bold statement. Full-bleed banner, oversized
   centred heading, and a single wide pill for the search.
   Pill geometry carries through to every button and field.
   ============================================================ */

body.theme-gulf {
    --gf-ink: #10161f;
}

/* --- نظام التصميم: كبسولات --- */
body.theme-gulf .btn,
body.theme-gulf .form-control,
body.theme-gulf input:not([type="checkbox"]):not([type="radio"]),
body.theme-gulf select,
body.theme-gulf button {
    border-radius: 999px !important;
}

body.theme-gulf .courselisting,
body.theme-gulf .card {
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: 0 10px 30px rgba(16, 22, 31, .08) !important;
}

/* --- البنر --- */
body.theme-gulf .gf-hero {
    position: relative;
    overflow: hidden;
    padding: 170px 20px 90px;
    text-align: center;
    color: #fff;
    /* The colour stays underneath: it is what a narrow screen sees, what a
       reader who asked for less motion sees, and what fills the banner in the
       seconds before the film has loaded. */
    background: var(--site-primary, #ea1a2d);
}

/* ── الفيلم خلف البنر ────────────────────────────────────────
   The frame is sized to cover the band rather than fit inside it: a 16 by 9
   film in a wider, shorter banner has to overflow top and bottom, or it sits
   letterboxed with the brand colour showing in two bars.
   ─────────────────────────────────────────────────────────── */
/* No still underneath: YouTube's thumbnail carries the video's own titling
   printed across it, and the banner would wear someone else's captions for
   the seconds before the film starts. The brand colour waits instead. */
body.theme-gulf .gf-hero-film {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}

/* The film: shown only once the player reports it is playing. A refused embed
   renders as a black rectangle, and this is what keeps that rectangle off the
   page — it simply never becomes visible. */
body.theme-gulf .gf-hero-film iframe {
    opacity: 0;
    transition: opacity 1s ease;
}

body.theme-gulf .gf-hero-film.is-playing iframe { opacity: 1; }

body.theme-gulf .gf-hero-film iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Half again as large as it needs to be, and centred.
       ------------------------------------------------------------
       A YouTube frame draws its own furniture inside itself: play and pause in
       the middle, "More videos" and the wordmark along the bottom, a share
       link in a corner. None of that can be turned off from the outside — the
       parameters only ask, and the player puts it back.

       Oversizing the frame well past the band moves all of it outside what is
       visible: the middle of the picture is what shows, and the chrome sits
       off-screen on every edge. */
    width: 150vw;
    height: 84.4vw;
    min-height: 150%;
    min-width: 266.7vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Over the film, not instead of it: dark enough for white text at any frame,
   light enough to leave the picture legible. */
body.theme-gulf .gf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Heavier than it was. The film is scenery, not the subject: the heading
       has to be the first thing read at any frame of it. */
    background: linear-gradient(
        180deg,
        rgba(14, 4, 6, .78) 0%,
        rgba(14, 4, 6, .62) 45%,
        rgba(14, 4, 6, .82) 100%);
    pointer-events: none;
}

body.theme-gulf .gf-hero-inner { position: relative; z-index: 2; }

body.theme-gulf .gf-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

body.theme-gulf .gf-hero h1 {
    font-size: 3.4rem;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #fff;
}

body.theme-gulf .gf-hero-lede {
    font-size: 1.15rem;
    opacity: .92;
    margin: 0 auto 36px;
    max-width: 60ch;
}

/* --- البحث ككبسولة عريضة --- */
body.theme-gulf .gf-hero-search {
    display: flex;
    background: #fff;
    border-radius: 999px;
    padding: 7px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}

body.theme-gulf .gf-hero-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0 26px;
    font-size: 1.05rem;
    color: var(--gf-ink);
}

body.theme-gulf .gf-hero-search input:focus { outline: none; }

body.theme-gulf .gf-hero-search button {
    border: 0;
    background: var(--site-primary, #ea1a2d);
    color: #fff;
    padding: 15px 34px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

body.theme-gulf .gf-hero-search button:hover {
    background: var(--site-accent, #003f69);
}

body.theme-gulf .gf-hero-advanced {
    margin: 18px 0 30px;
    font-size: .92rem;
    opacity: .9;
}

body.theme-gulf .gf-hero-advanced a { color: #fff; text-decoration: underline; }

/* --- الأزرار --- */
body.theme-gulf .gf-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

body.theme-gulf .gf-btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: 999px;
    background: var(--site-accent, #003f69);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid transparent;
}

body.theme-gulf .gf-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .65);
}

body.theme-gulf .gf-btn:hover {
    background: #fff;
    color: var(--site-primary, #ea1a2d);
    border-color: #fff;
}

@media (max-width: 991px) {
    body.theme-gulf .gf-hero { padding: 120px 16px 60px; }
    body.theme-gulf .gf-hero h1 { font-size: 2.1rem; }
    body.theme-gulf .gf-hero-search { flex-direction: column; border-radius: 22px; gap: 8px; }
    body.theme-gulf .gf-hero-search input { padding: 14px 18px; }
    body.theme-gulf .gf-hero-search button { justify-content: center; }
}

/* ── الأقسام: بطاقات دائرية متمركزة ── */
body.theme-gulf .inst-tile { align-items: center; text-align: center; border: 0; border-radius: 20px; box-shadow: 0 10px 28px rgba(16,22,31,.08); }
body.theme-gulf .inst-tile-more { color: var(--site-primary, #ea1a2d); }
body.theme-gulf .inst-values { background: #fff; }
body.theme-gulf .inst-values-head { max-width: none; text-align: center; margin-inline: auto; }
body.theme-gulf .inst-values-list { grid-template-columns: repeat(4, 1fr); }
body.theme-gulf .inst-values-list li { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
body.theme-gulf .inst-values-foot { text-align: center; }
body.theme-gulf .inst-assoc { text-align: center; background: #f7f8fa; }
body.theme-gulf .inst-assoc p { margin-inline: auto; }
body.theme-gulf .inst-assoc-link { border-radius: 999px; padding: 14px 34px; }

/* ── الصور: مستديرة بقوّة مع تدرّج داكن من الأسفل ── */
body.theme-gulf .widget-icon,
body.theme-gulf .common-banner-image,
body.theme-gulf .course-image { border-radius: 18px; }
body.theme-gulf .widget-icon::after,
body.theme-gulf .common-banner-image::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(16,22,31,.6));
}
body.theme-gulf .widget-icon img { filter: saturate(1.15) contrast(1.05); }
/* ── القائمة: حالة نشطة ككبسولة ── */
body.theme-gulf .navbar-nav .nav-link.active { border-radius: 999px !important; }
body.theme-gulf .nav-link { font-weight: 700; }

/* ── الداخلية: كل شيء في المنتصف، والأيقونة قرصاً ── */
body.theme-gulf #common-banner-section-icon .common-banner-section-box,
body.theme-gulf #common-banner-section-image .common-banner-section-box {
    flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
body.theme-gulf .common-banner-icon { border-radius: 50%; }
body.theme-gulf .common-banner-text { text-align: center; }
body.theme-gulf .common-banner-text p { margin-inline: auto; }
body.theme-gulf .common-banner-text h1 { font-weight: 900; letter-spacing: -.015em; }

/* ── الشريط العلوي: روابط في المنتصف بحروف كبيرة، بلا شيء آخر ── */
/* لون التوب بار الحقيقي بيتحدد من _institute.css المشترك (سطر
   912‑920 هناك): `#dt-top-section` بـID + !important، وبيرجع
   لـ--site-primary (الأحمر عندنا) لو --topbar-bg مش متعرّف — وهو
   مكان معمول مخصوص عشان كل ثيم يقول لونه هنا. القاعدة اللي تحت
   دي كانت بتتلوّن أحمر رغم إنها بتحاول تحط نيلي، لأن قاعدتها هنا
   أقل خصوصية من المشتركة. فبنعرّف --topbar-bg بدل ما نحارب الـID. */
/* اللون #28292c واللي تحته حرفي مقيس من DevTools على dxbti نفسها
   (topbar-glass و navbar-glass في حالتهم المصمتة) — مش تقريب ولا
   لون الخليج الأصلي. */
body.theme-gulf { --topbar-bg: #28292c; }

body.theme-gulf .gf-topbar {
    background: #28292c;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
}
body.theme-gulf .gf-topbar-links {
    justify-content: center; gap: 30px; min-height: 36px;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
body.theme-gulf .gf-topbar-links li.active a { color: var(--site-primary, #ea1a2d); filter: brightness(1.6); }

/* ── الشريط العلوي: تواصل، بلا تعبئة ── */
body.theme-gulf .gf-topbar-row { gap: 22px; font-size: .78rem; }

body.theme-gulf .gf-topbar-item {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}

body.theme-gulf .gf-topbar-item i { opacity: .75; font-size: .9em; }

body.theme-gulf .gf-topbar-spacer { flex: 1; }

/* طلب صريح: على الموبايل Blogs تتخفي، وDownloads يطلع في نفس سطر
   البريد والتليفون بدل ما يقع في سطر لوحده تحت. الفاصل (spacer) كان
   السبب في وقوعه لوحده — flex:1 بتاعه بياخد كل المساحة الفاضية في
   السطر الأول فيدفع أي حاجة بعده لسطر جديد؛ من غير Blogs بعده مبقاش
   له داعي على الموبايل فبيتخفي معاه. */
@media (max-width: 575.98px) {
    body.theme-gulf .gf-topbar-row a[href$="/blogs"],
    body.theme-gulf .gf-topbar-spacer {
        display: none;
    }
    /* الفجوة المشتركة (16px، من #dt-top-section[class*="-topbar"]
       [class$="-row"] في _institute.css — سيلكتور فيه ID فبيغلب أي
       كلاس هنا من غير !important) كانت زيادة 6px عن ما يستحمله السطر
       بالظبط فـDownloads كان بيلف لسطر لوحده رغم إخفاء الفاصل والمدونة
       — تضييقها هنا يخلي البريد والتليفون وDownloads التلاتة في سطر
       واحد. */
    body.theme-gulf .gf-topbar-row {
        gap: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   القائمة الرئيسية — شريط داكن و«الدورات» بلوك معبّأ
   Everything is plain except the catalogue, which is a filled
   block the full height of the bar — the one thing the site
   wants a visitor to open.
   ══════════════════════════════════════════════════════════ */
/* The bar carries the mark, so the bar changes rather than the mark: a plate
   behind a logo is a patch, and this one is dark on a dark ground. */
/* الشريط بقى غامق دايماً — مش بس على الفيلم في الرئيسية. القيم
   حرفية من DevTools على dxbti (.navbar-glass في حالته المصمت):
   #28292c، حد سفلي rgba(255,255,255,.08)، وظل 0 4px 20px. */
body.theme-gulf nav.navbar {
    background: #28292c;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
body.theme-gulf .navbar-nav > li > .nav-link { font-size: .84rem; font-weight: 600; }
body.theme-gulf .navbar-nav { align-items: stretch; }
body.theme-gulf .navbar-nav > li { display: flex; align-items: stretch; }
body.theme-gulf .navbar-nav > li > .nav-link { display: flex; align-items: center; padding: 0 18px !important; border-radius: 0 !important; }
body.theme-gulf .navbar-nav > li > .nav-link.active { color: var(--site-primary, #ea1a2d) !important; background: transparent !important; }

/* حبر هذا الشريط: يستعمله الرابط ساكناً ومحوَّماً عليه سواء.
   أبيض دايماً — الشريط بقى غامق في كل الصفحات مش الرئيسية بس. */
body.theme-gulf nav.navbar { --nav-ink: rgba(255, 255, 255, .85); }

/* ══════════════════════════════════════════════════════════
   الرأس فوق الفيلم
   ------------------------------------------------------------
   The strip and the menu sit on the film rather than above it:
   both go transparent and the banner starts at the top of the
   page, so the picture runs the full height of the fold.

   The header is already fixed, so it only has to stop painting
   a ground of its own — and the hero has to begin under it
   rather than after it.
   ══════════════════════════════════════════════════════════ */

body.theme-gulf.page-home:not(.is-scrolled) #dt-top-section.gf-topbar,
body.theme-gulf.page-home:not(.is-scrolled) #dt-header-section,
body.theme-gulf.page-home:not(.is-scrolled) #dt-header-section nav.navbar {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* بدون الشرط ده كانت الشفافية فاضلة طول الوقت — الهيدر بيفضل شفاف
   حتى بعد السكرول لتحت الفيلم، فبيبان شاحب لأن اللي وراه بقى خلفية
   الصفحة الفاتحة مش الفيلم الغامق. بعد السكرول (is-scrolled) الهيدر
   المفروض يرجع للون الصلب #28292c من القواعد العامة فوق. */

/* On the film everything is light — declared once, as the bar's ink. */
body.theme-gulf.page-home nav.navbar { --nav-ink: #ffffff; }
body.theme-gulf.page-home .gf-topbar-row { color: #fff !important; }

/* A gradient under the header so white type holds wherever the film is
   bright, without putting a bar back. */
body.theme-gulf .gf-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 190px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(12, 4, 6, .72), rgba(12, 4, 6, 0));
    pointer-events: none;
}

/* The banner starts at the top of the page and clears the header from inside,
   so the film fills the fold instead of beginning below a white strip. */
body.theme-gulf .gf-hero {
    padding-top: 210px;
    padding-bottom: 120px;
    margin-top: -128px;
    min-height: 660px;
    display: flex;
    align-items: center;
}

/* القاعدة القديمة هنا كانت بتشيل حد التوب بار السفلي كله (بلا شرط
   صفحة)، وكانت بتلغي الفاصل rgba(255,255,255,.08) اللي مقيس من
   dxbti واللي بيفصل التوب بار عن الشريط الرئيسي تحته. اتشالت. */

@media (max-width: 991px) {
    /* قاعدة قديمة كانت هنا بترجّع الهيدر لأبيض وحبر غامق على أي شاشة
       991px أو أقل — من التصميم القديم لما الغامق كان مقصور على
       الفيلم في الرئيسية بس. دلوقتي الهيدر غامق دايماً في كل الصفحات
       وكل المقاسات، فالقاعدة دي كانت بتناقض التصميم على أي شاشة
       لابتوب مش full-screen. اتشالت؛ الهيدر بياخد نفس الغامق
       المصمت #28292c من القواعد العامة فوق من غير احتياج لتكرارها هنا.

       No film here (video is skipped under 991px), so the hero itself
       still needs the layout adjustment below — that part stays. */
    body.theme-gulf .gf-hero { padding-top: 120px; margin-top: 0; }
    body.theme-gulf .gf-hero::after { display: none; }
}

/* ── خلفية خلف كلمات القائمة ──────────────────────────────────
   On a solid bar a link needs no ground of its own. Over moving footage it
   does: the film changes brightness from frame to frame, and a word that
   reads against one shot disappears against the next. A dark panel behind the
   row holds the type steady whatever passes underneath, and it is dark rather
   than opaque so the picture still shows through it.
   ─────────────────────────────────────────────────────────── */

body.theme-gulf.page-home #dt-header-section .navbar-nav {
    background: rgba(12, 4, 6, .42);
    border-radius: 999px;
    padding: 5px 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.theme-gulf.page-home #dt-header-section .navbar-nav > li > .nav-link {
    padding: 8px 14px !important;
    border-radius: 999px !important;
}

body.theme-gulf.page-home #dt-header-section .navbar-nav > li > .nav-link:hover {
    background: rgba(255, 255, 255, .14) !important;
    box-shadow: none;
}

body.theme-gulf.page-home #dt-header-section .navbar-nav > li > .nav-link.active {
    background: rgba(255, 255, 255, .16) !important;
}

/* The strip above gets the same treatment, on its own scale. */
body.theme-gulf.page-home .gf-topbar-row {
    background: rgba(12, 4, 6, .38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding-inline: 20px !important;
}

@media (max-width: 991px) {
    /* No film here, so nothing needs holding up against one. */
    /* (2026-09-18) .gf-topbar-row وحدها هنا كانت أخص من قاعدة الاستثناء
       دي بمرحلة واحدة (.page-home زيادة في سطر 411)، فالكبسولة الزجاجية
       كانت فاضلة شغالة على الموبايل رغم الشرط ده — بما إنها بتلف
       سطرين هناك، border-radius:999px بقى شكل كبسولة ضخمة غريبة عايمة
       فوق صف السطرين بدل بار عادي. .page-home هنا بتساويها في القوة
       فتكسب بترتيب المصدر، وborder-radius اتصفرت كمان (كانت ناقصة). */
    body.theme-gulf #dt-header-section .navbar-nav,
    body.theme-gulf.page-home .gf-topbar-row,
    body.theme-gulf .gf-topbar-row {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        padding-inline: 15px !important;
    }
}

/* ── العلامة على الشريط الغامق ────────────────────────────────
   العلامتين رسمهم غامق — اتعملوا لورق أبيض ولشريط أبيض. دلوقتي
   الشريط غامق في كل الصفحات (مش الرئيسية بس)، فالتحويل لأبيض بقى
   عام كمان — قبل كده كان مقصور على الرئيسية ولما الشريط بقى غامق
   دايماً كانت العلامة الغامقة هتختفي على الداخلية.
   ─────────────────────────────────────────────────────────── */
/* (2026-09-10) اللوجو العربي بقى SVG بيتحقن inline، فالمحدّد لازم
   ياخده كمان عشان الكرة تطلع بيضا زي الإنجليزي بالظبط. */
body.theme-gulf .navbar-brand img,
body.theme-gulf .navbar-brand svg {
    filter: brightness(0) invert(1);
}

/* ── الشريط عند النزول ────────────────────────────────────────
   زي dxbti بالظبط: الشريط الغامق بتاعهم بيفضل غامق حتى بعد
   السكرول (measured: .navbar-glass.scrolled { background: #28292c })
   — مفيش رجوع لأبيض. فالحشو هنا بقى بس ظل خفيف يفصله عن الصفحة
   تحته، من غير ما نلمس اللون أو الحبر أو العلامة.
   ─────────────────────────────────────────────────────────── */
body.theme-gulf.page-home.is-scrolled #dt-header-section {
    box-shadow: 0 2px 14px rgba(16, 6, 8, .12) !important;
}

body.theme-gulf.page-home.is-scrolled #dt-header-section .navbar-nav,
body.theme-gulf.page-home.is-scrolled .gf-topbar-row {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* عند النزول: لا لوح ولا ضبابية — شريط عادي مصمت */
body.theme-gulf.page-home.is-scrolled #dt-header-section .navbar-nav > li > .nav-link {
    padding: 8px 14px !important;
    border-radius: 0 !important;
}

body.theme-gulf.page-home.is-scrolled #dt-header-section .navbar-nav > li > .nav-link.active {
    background: transparent !important;
    color: var(--site-primary, #ea1a2d) !important;
}

/* العنوان والسطر في المنتصف زي باقي الهيرو — البحث والأزرار متمركزين
   أصلاً، فبدايته من الجنب كانت هي الشاذة. */
body.theme-gulf .gf-hero-inner .inst-h1,
body.theme-gulf .gf-hero-inner .inst-lede { text-align: center; }
body.theme-gulf .gf-hero-inner .inst-lede { margin-inline: auto; }

/* ── لوحة الدورات: لوحة داكنة بعمود بحث ──────────────────────
   المرجع dxbti. القياسات مقروءة من صفحتهم: خط 12.5px، حشو البند
   6×12، ارتفاع سطر 18.7px، أرضية rgba(15,23,42,.95)، وحشو اللوحة
   25px. كانت بنودنا 13.8px بحشو 11px — عشان كده كانت أطول بكتير.
   ─────────────────────────────────────────────────────────── */
body.theme-gulf .megamenu { background: rgba(9, 20, 42, .97) !important; }

body.theme-gulf .inst-mega {
    --inst-mega-line: rgba(255, 255, 255, .1);
    display: grid;
    /* شريط الخليج أضيق من باقي الثيمات فالقائمة 971px مش 1385 —
       المقاسات هنا متحسّبة على العرض ده. */
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 0 22px;
    padding: 20px 20px;
}

/* عمود البحث: العنصر الوحيد اللي بيميّز اللوحة دي عن أي لوحة تانية. */
body.theme-gulf .inst-mega-aside {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-inline-end: 20px;
    border-inline-end: 1px solid var(--inst-mega-line);
}

body.theme-gulf .inst-mega-aside-t {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 2px;
}

body.theme-gulf .inst-mega-aside-f {
    width: 100%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: .8rem;
    color: #eaf1f7;
}

body.theme-gulf .inst-mega-aside-f::placeholder { color: rgba(255, 255, 255, .45); }
body.theme-gulf .inst-mega-aside-f:focus { outline: none; border-color: var(--site-primary, #ea1a2d); }
body.theme-gulf .inst-mega-aside-f option { color: #16233d; }

body.theme-gulf .inst-mega-aside-go {
    border: 0;
    border-radius: 6px;
    padding: 10px;
    background: var(--site-primary, #ea1a2d);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

body.theme-gulf .inst-mega-aside-go:hover { filter: brightness(1.12); }

/* البنود بإيقاع dxbti: صغيرة ومتقاربة، بلا أيقونات وبلا خطوط فاصلة. */
body.theme-gulf .inst-mega-icon { display: none; }

body.theme-gulf .inst-mega-grid {
    /* min-width: 0 لازم: العنصر جوّه grid track وبدونه بيتمدد
       لعرض أطول بند فيه فالأعمدة بتقل. */
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
    gap: 0 14px;
}

body.theme-gulf .inst-mega-card {
    padding: 5px 8px;
    border-bottom: 0;
    border-radius: 5px;
    gap: 9px;
}

body.theme-gulf .inst-mega-card::before {
    content: "›";
    color: var(--site-primary, #ea1a2d);
    font-size: 1rem;
    line-height: 1;
    flex: 0 0 auto;
}

body.theme-gulf .inst-mega-name {
    color: rgba(255, 255, 255, .8);
    font-size: 11.6px;
    line-height: 17.4px;
}

body.theme-gulf .inst-mega-card:hover { background: rgba(255, 255, 255, .07); }
body.theme-gulf .inst-mega-card:hover .inst-mega-name { color: #fff; }

/* الأرقام اتشالت: البند اسمه بس، والصف بقى أنضف وأقصر. */
body.theme-gulf .inst-mega-n { display: none; }

/* ── القائمة بعرض الصفحة ─────────────────────────────────────
   الحبّة المثلجة فوق الهيرو فيها backdrop-filter، والخاصية دي بتعمل
   حاوية للعناصر المطلقة والثابتة كمان — فالقائمة كانت محبوسة في
   عرض الـul (971px) بدل عرض الشريط (1385px)، وحتى position: fixed
   مكانش بيفكّها. اتأكدت بالقياس: أول ما البلور اتشال قفزت من 971
   لـ1385 ومن x=399 لـ x=0.

   فالبلور بيتشال وقت فتح القائمة بس — الخلفية الشفافة بتفضل مكانها
   والشكل مبيتغيّرش، والقائمة بتاخد عرضها الكامل. */
body.theme-gulf.page-home #dt-header-section .navbar-nav:has(.megamenu:hover),
body.theme-gulf.page-home #dt-header-section .navbar-nav:has(li.has-megamenu:hover),
body.theme-gulf.page-home #dt-header-section .navbar-nav:has(.megamenu.show) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* والمقاسات بترجع للعرض الكامل: أعمدة أكتر فصفوف أقل. */
body.theme-gulf .inst-mega {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 0 26px;
    padding: 22px 26px;
}

body.theme-gulf .inst-mega-grid {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 0 16px;
}

/* أيقونات الشريط العلوي بلون العلامة: الأيقونة حمرا والكلمة بيضا،
   فالعين تمسك الأيقونة الأول والنص يفضل مقروء على الأسود. */
body.theme-gulf #dt-top-section .gf-topbar-item i {
    color: var(--site-primary, #ea1a2d);
}

/* وعند الوقوف بتفضل حمرا مع الكلمة كمان — القاعدة الجامعة بتلوّن
   الرابط كله فالأيقونة كانت هتتلغبط معاه. */
body.theme-gulf #dt-top-section .gf-topbar-item:hover i,
body.theme-gulf #dt-top-section .gf-topbar-item:focus i {
    color: var(--site-primary, #ea1a2d);
}

/* ═══ الشريط على نمط dxbti ═══════════════════════════════════
   القياسات مقروءة من صفحتهم: 14.08px، وزن 600، تباعد 0.8px،
   uppercase، حشو 8×14، أبيض للنشط و85% للباقي، وفواصل رأسية
   رفيعة بين البنود.

   والحبّة المثلجة اتشالت: شريطهم مسطّح مش كبسولة. ومكسب جانبي إن
   الـbackdrop-filter اللي كان بيحبس القائمة في 971px راح معاها،
   فالحيلة اللي كانت بتشيله وقت الفتح مبقاش ليها لزوم.
   ═══════════════════════════════════════════════════════════ */

body.theme-gulf.page-home #dt-header-section .navbar-nav {
    background: transparent;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.theme-gulf #dt-header-section .navbar-nav { gap: 0; align-items: center; }

body.theme-gulf #dt-header-section .navbar-nav > li { margin: 0 !important; position: relative; }

body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link {
    position: relative;
    font-size: 14.08px !important;
    font-weight: 600 !important;
    letter-spacing: .8px;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, .85) !important;
}

/* الفاصل الرأسي بين البنود — مش على آخر واحد. لون واحد ثابت:
   الشريط غامق في كل الصفحات دلوقتي (مش الرئيسية بس) فمفيش داعي
   لحالتين.

   حدّ (border) على .nav-link نفسه، مش pseudo-element: جرّبنا li::after
   الأول لكن بنود Categories/Cities (.has-megamenu) بتاخد
   position:static !important من fullcss.css فبتكسر مرساة الـ
   position:absolute. وبعدين جرّبنا .nav-link::after بدل الـli، لكن
   fullcss.css أصلاً بتستخدم ::after على .dropdown-toggle لبناء سهم
   الدروب داون بحدود مثلثة (border tricks) وبس بتخفيه بـdisplay:none —
   إجبار الإظهار رجّع بواقي شكل السهم مش خط نضيف. حد عادي مالوش
   ولا مشكلة من التلاتة: مش pseudo-element، فمفيش تعارض مع أي حاجة. */
body.theme-gulf #dt-header-section .navbar-nav > li + li > .nav-link {
    /* !important لازم: القاعدة الأساسية لـ.nav-link فوق حاططة
       border: 0 !important، وده بيتغلب على أي طول حد عادي. */
    border-inline-start: 1px solid rgba(255, 255, 255, .22) !important;
}

body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link:hover,
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link.active {
    color: #fff !important;
    background: none !important;
    box-shadow: none;
}

body.theme-gulf #dt-header-section nav.navbar { --nav-ink: rgba(255, 255, 255, .85); }

/* الـNEW: شارة حمرا صغيرة زي بتاعتهم مش كبسولة وردي. */
body.theme-gulf #dt-header-section .navbar-nav .blink {
    background: var(--site-primary, #ea1a2d) !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .6px;
    animation: none !important;
    vertical-align: middle;
}

/* البند النشط عند dxbti أبيض وخلاص — مفيش مربع وراه. القاعدة
   القديمة (page-home + ID) أخص من الجديدة فبتكسبها، والقاعدة دي
   بنفس خصوصيتها بالظبط وبعدها فبتحسمها. */
body.theme-gulf.page-home #dt-header-section .navbar-nav > li > .nav-link.active {
    background: none !important;
    color: #fff !important;
}

/* كلمة Home تتشال وتفضل أيقونة بيت حمراء بدالها.
   نفس علة Search تحت: القاعدة العامة لمقاس الشريط (فوق، بالـID
   #dt-header-section) بـ!important فأي محاولة تخفي بـfont-size: 0
   من غير !important وبنفس خصوصية الـID كانت هتتغلب. المنيو مشترك
   مع المعهد (primary_desktop_menu.php) فمينفعش التعديل يحصل هناك. */
body.theme-gulf #dt-header-section .navbar-nav > li:first-child > .nav-link {
    font-size: 0 !important;
}
/* الهوم أول حاجة بصريًا برضو — order أصغر من "Training Formats"
   (-1) اللي فوق. li:first-child هنا لسه بيقصد نفس البند دايمًا لأن
   order بيغيّر الترتيب البصري بس، مش ترتيب الـDOM الفعلي. */
body.theme-gulf #dt-header-section .navbar-nav > li:first-child {
    order: -2;
}
body.theme-gulf #dt-header-section .navbar-nav > li:first-child > .nav-link::before {
    font-family: "FontAwesome";
    content: "\f015";
    font-size: 16px;
    font-weight: 900;
    color: var(--site-primary, #ea1a2d) !important;
}

/* زرار اللغة: "عربي"/"ENGLISH" تتشال ويحل محلها علم دائري.
   هنا العلة مختلفة عن Home/Search: النص جوّه <span> حقيقي (مش عقدة
   نصية مباشرة)، وmenukit.css المشترك بيدّي الـspan ده مقاسه الخاص
   بتصريح مباشر (.custom-languagenew span { font-size: 19px }) —
   والتصريح المباشر بيكسب الوراثة من الأب حتى لو الأب font-size: 0،
   فلازم الاستهداف يبقى على الـspan نفسه. المنيو مشترك مع المعهد
   فمينفعش التعديل في primary_desktop_menu.php. العلمين محلّيين في
   assets/images/institutes/icons/gulf/. */
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link.custom-languagenew {
    padding-inline: 10px !important;
    display: inline-flex !important;
    align-items: center;
}
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link.custom-languagenew span,
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link.custom-languagenew b {
    font-size: 0 !important;
}
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link.custom-languagenew::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: none;
}
/* صفحة إنجليزي: الرابط بيودّي للعربي — علم السعودية. */
body.theme-gulf:not([dir="rtl"]) .navbar-nav > li > .nav-link.custom-languagenew::before {
    background-image: url(../../images/institutes/icons/gulf/flag-ar.png);
}
/* صفحة عربي: الرابط بيودّي للإنجليزي — علم بريطانيا. */
body.theme-gulf[dir="rtl"] .navbar-nav > li > .nav-link.custom-languagenew::before {
    background-image: url(../../images/institutes/icons/gulf/flag-en.png);
}

/* الخط اللي بيظهر تحت البند وقت الوقوف اتشال: dxbti مالهمش واحد،
   الكلمة بتفتح لأبيض وخلاص. */
body.theme-gulf #dt-header-section .navbar-nav > li > a:hover,
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link:hover,
body.theme-gulf #dt-header-section .navbar-nav > li > a:focus,
body.theme-gulf #dt-header-section .navbar-nav > li > .nav-link:focus {
    box-shadow: none;
    text-shadow: none;
}

/* الأسهم جنب بنود المنيو اتشالت — dxbti بنودهم من غير أسهم. */
body.theme-gulf #dt-header-section .navbar-nav .nav-link i.fa-caret-down,
body.theme-gulf #dt-header-section .navbar-nav .nav-link i.menu-icon {
    display: none !important;
}

/* "Training Formats" قبل "Categories" — بترتيب flex مش بتغيير مكانه
   في الـHTML (المنيو مشتركة مع المعهد). طلب صريح. */
body.theme-gulf #dt-header-section .navbar-nav > li:has(.gulf-formats-dropdown) {
    order: -1;
}

/* دروب داون "Training Formats" بنفس شكل لوحة Courses/Categories
   الغامقة جنبه (dxbti)، مش الأبيض الافتراضي (.dropdown-menu
   المشتركة في _institute.css). */
body.theme-gulf #dt-header-section .gulf-formats-dropdown {
    background: rgba(9, 20, 42, .97) !important;
    border: 0;
    padding: 10px 0;
}
/* .dropdown-item العادي فضل بيخسر معركة الخصوصية مع bootstrap
   (.dropdown-item:hover/:focus في fullcss.css) رغم كل محاولات رفع
   الخصوصية — فبدل ما نكمل الحرب، بند "Training Formats" بقى ليه
   كلاس خاص بيه لوحده (gulf-formats-item) مالوش أي قاعدة تانية في
   الموقع كله تتعارض معاه، فمفيش معركة خصوصية من الأساس. */
body.theme-gulf #dt-header-section .gulf-formats-item {
    color: rgba(255, 255, 255, .82) !important;
    background-color: transparent !important;
}
body.theme-gulf #dt-header-section .gulf-formats-item:hover,
body.theme-gulf #dt-header-section .gulf-formats-item:focus,
body.theme-gulf #dt-header-section .gulf-formats-item.active,
body.theme-gulf #dt-header-section .gulf-formats-item:active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .12) !important;
}

/* قائمة "Cities": mega-menu عريض بنفس شكل dxbti — رابط "View All
   Cities" غامق فوق، وشبكة 3 أعمدة تحته فيها علم كل مدينة. .megamenu
   نفسها بترث خلفيتها الغامقة من القاعدة اللي فوق (سطر 484) تلقائيًا
   لأنها نفس الكلاس المستخدم في Categories، فمفيش تكرار هنا. */
/* .container المشتركة بتوصل بادينجها لصفر في بعض الحالات (بتتحكم
   فيها fullcss.css)، فمحتوى اللوحة كان بيلزق في حافتها. بادينج مباشر
   هنا يضمن مسافة عن الحواف مهما كان الـ.container بره عامل إيه. */
body.theme-gulf #dt-header-section .gulf-cities-mega-cols {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-aside {
    flex: none;
    width: 220px;
    padding-inline-end: 26px;
    border-inline-end: 1px solid rgba(255, 255, 255, .12);
}
body.theme-gulf #dt-header-section .gulf-cities-mega-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: .95rem;
    color: #fff !important;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    text-decoration: none;
}
/* صندوق "Search by City": نفس شكل لوحة "Search courses" جنبها بالظبط
   (حقول كبسولة مدورة، زرار أحمر كبسولة) بس باختيار مدينة من select
   بدل كتابة نص — طلب صريح. */
body.theme-gulf #dt-header-section .gulf-cities-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.theme-gulf #dt-header-section .gulf-cities-picker-t {
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 2px;
}
body.theme-gulf #dt-header-section .gulf-cities-picker-f {
    width: 100%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 11px 18px;
    font-size: .82rem;
    color: #fff;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: border-color .16s ease, background-color .16s ease;
}
body.theme-gulf[dir="rtl"] #dt-header-section .gulf-cities-picker-f {
    background-position: left 16px center;
}
body.theme-gulf #dt-header-section .gulf-cities-picker-f:focus {
    background-color: rgba(255, 255, 255, .1);
    border-color: var(--site-primary, #ea1a2d);
}
body.theme-gulf #dt-header-section .gulf-cities-picker-f option {
    color: #16233d;
    background: #fff;
}
body.theme-gulf #dt-header-section .gulf-cities-picker-go {
    border: 0;
    border-radius: 999px;
    padding: 12px;
    background: var(--site-primary, #ea1a2d);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .16s ease;
}
body.theme-gulf #dt-header-section .gulf-cities-picker-go:hover {
    filter: brightness(1.12);
}
body.theme-gulf #dt-header-section .gulf-cities-mega-all i {
    color: var(--site-primary, #ea1a2d);
    font-size: .8rem;
    transition: transform .2s ease;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-all:hover i {
    transform: translateX(4px);
}
body.theme-gulf[dir="rtl"] #dt-header-section .gulf-cities-mega-all:hover i {
    transform: translateX(-4px);
}
body.theme-gulf #dt-header-section .gulf-cities-mega-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 30px;
    align-content: start;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .88rem;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-item:hover,
body.theme-gulf #dt-header-section .gulf-cities-mega-item:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .08) !important;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-item .fi {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
body.theme-gulf #dt-header-section .gulf-cities-mega-item i.fa-map-marker {
    flex: none;
    width: 20px;
    text-align: center;
    opacity: .6;
}
@media (max-width: 991px) {
    body.theme-gulf #dt-header-section .gulf-cities-mega-cols {
        flex-direction: column;
    }
    body.theme-gulf #dt-header-section .gulf-cities-mega-aside {
        width: 100%;
        padding-inline-end: 0;
        border-inline-end: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    body.theme-gulf #dt-header-section .gulf-cities-mega-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   التذييل — صفوف كبسولات ودوائر، مش شبكة أعمدة
   ------------------------------------------------------------
   مفيش تانى فوتر في الموقع بالشكل ده: مفيش أعمدة خالص. ثلاث
   معهد التاني (almawred/glomac dark boxes، global dark editorial،
   abfa عمود واحد فاتح) — هنا نفس لوح الشريط الغامق (#28292c)
   المستخدم أصلاً في nav.navbar/gf-topbar، وصفوف كبسولات وحلقات
   بدل صناديق، امتدادًا لهوية "بيان واحد جريء" بتاعة الموقع نفسه.
   ═══════════════════════════════════════════════════════════ */
body.theme-gulf #dt-home-footer-section {
    background: #28292c;
    color: rgba(255, 255, 255, .8);
}
body.theme-gulf .gf-footer-inner {
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
    padding: 54px 0 40px;
}

body.theme-gulf .gf-footer-brand {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -.01em;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 22px;
}

body.theme-gulf .gf-footer-reach {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 34px;
}
body.theme-gulf .gf-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: 9px 20px;
    color: #fff;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    transition: background .16s ease, border-color .16s ease;
}
body.theme-gulf .gf-footer-pill i { color: var(--site-primary, #ea1a2d); }
body.theme-gulf .gf-footer-pill:hover {
    background: var(--site-primary, #ea1a2d);
    border-color: var(--site-primary, #ea1a2d);
    color: #fff;
}
body.theme-gulf .gf-footer-pill:hover i { color: #fff; }

/* صف رقائق التخصصات: نفس منطق كبسولة البحث في البنر، بس فاضية
   وصغيرة. */
body.theme-gulf .gf-footer-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}
body.theme-gulf .gf-footer-chip {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 7px 16px;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 600;
    transition: background .16s ease, color .16s ease;
}
body.theme-gulf .gf-footer-chip:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* صف المدن: نفس شارة العلم الدائرية بالظبط اللي في قائمة Cities
   الغامقة (gulf-cities-mega-item .fi) — مش رسمة جديدة. */
body.theme-gulf .gf-footer-row--cities { margin-bottom: 30px; }
body.theme-gulf .gf-footer-city {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    transition: background .16s ease, color .16s ease;
}
body.theme-gulf[dir="rtl"] .gf-footer-city { padding: 5px 5px 5px 12px; }
body.theme-gulf .gf-footer-city .fi {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: none;
}
body.theme-gulf .gf-footer-city:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

body.theme-gulf .gf-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}
body.theme-gulf .gf-footer-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    padding: 0 16px;
}
body.theme-gulf .gf-footer-links a + a { border-inline-start: 1px solid rgba(255, 255, 255, .18); }
body.theme-gulf .gf-footer-links a:hover { color: #fff; }

@media (max-width: 575px) {
    body.theme-gulf .gf-footer-inner { padding: 40px 20px 30px; }
    body.theme-gulf .gf-footer-links a { padding: 4px 10px; }
    body.theme-gulf .gf-footer-links a + a { border-inline-start: 0; }
}

/* ── المدن المتاحة — دوائر أعلام موحّدة ──────────────────────
   مرجع: bmc.net — شبكة دوائر أعلام بلا صور، تعليق سطرين تحت كل
   واحدة. gulf عنده أصلاً الآلية دي (site_city_flag_code()، مكتبة
   flag-icons محمّلة لِـgulf فعلاً لقائمة Cities في المنيو) — نفس
   الفكرة هنا، بس كارت دائري بلمسة الكبسولة (pill) اللي الموقع كله
   مبني عليها. */
body.theme-gulf .gf-cities-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 22px;
}
body.theme-gulf .gf-cities-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    text-decoration: none;
    padding: 14px 6px;
    border-radius: 999px;
    transition: background .18s ease, transform .18s ease;
}
body.theme-gulf .gf-cities-item:hover { background: #f7f8fa; transform: translateY(-3px); }
body.theme-gulf .gf-cities-flag {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(16, 22, 31, .14);
    display: block;
    background-size: cover;
    background-position: center;
}
/* flag-icons بيحط .fi نفسها inline-block — فيه فراغ صغير فوق/تحت
   من محاذاة الـbaseline الافتراضية بتاعة inline-block (زي فراغ
   الصور جوّه فقرة نص بالظبط)، وده اللي كان بيبيّن كقطع في أعلى
   الدائرة. block بيلغي المحاذاة دي، وinset بدل width/height 100%
   يضمن الـspan يملى الدائرة بالظبط بصرف النظر عن أبعاده الافتراضية
   (1.333333em) اللي المكتبة بتحطها. */
body.theme-gulf .gf-cities-flag .fi {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background-size: cover;
}
body.theme-gulf .gf-cities-name {
    font-size: .84rem;
    font-weight: 700;
    color: var(--gf-ink, #10161f);
    line-height: 1.3;
}

@media (max-width: 991px) {
    body.theme-gulf .gf-cities-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 575px) {
    body.theme-gulf .gf-cities-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    body.theme-gulf .gf-cities-flag { width: 58px; height: 58px; }
}

/* ============================================================
   Course Categories — dense text-only pill grid (energytraining.ae
   reference structure, gulf's own capsule geometry). No icons, no
   circles: this theme's cities section already owns the circular-badge
   look, so categories stays flat pill rows instead.
   ============================================================ */
body.theme-gulf .gf-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
body.theme-gulf .gf-categories-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 26px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(16, 22, 31, .08);
    text-decoration: none;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.theme-gulf .gf-categories-title {
    font-weight: 800;
    font-size: .96rem;
    color: var(--gf-ink, #10161f);
    line-height: 1.25;
}
body.theme-gulf .gf-categories-arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--site-accent, #003f69);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
}
body.theme-gulf .gf-categories-pill:hover {
    background: var(--site-primary, #ea1a2d);
    box-shadow: 0 14px 34px rgba(234, 26, 45, .28);
    transform: translateY(-2px);
}
body.theme-gulf .gf-categories-pill:hover .gf-categories-title { color: #fff; }
body.theme-gulf .gf-categories-pill:hover .gf-categories-arrow { background: #fff; color: var(--site-primary, #ea1a2d); }

@media (max-width: 991px) {
    body.theme-gulf .gf-categories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    body.theme-gulf .gf-categories-grid { grid-template-columns: 1fr; gap: 12px; }
    body.theme-gulf .gf-categories-pill { padding: 16px 20px; }
}

/* ── الخدمات (tiles): كلام على الشمال + لوحة كبسولات غامقة على
   اليمين. مرجع المستخدم كان عمود كلام جنب شبكة أيقونات على خلفية
   لون واحد — اتاخدت البنية بس مش اللون البنفسجي. كبسولات مكدّسة
   جوه لوحة كحلي (--site-accent) لأن التبويبات هنا شكلها شريط
   طويل مش كارت زي كل حتة تانية في الصفحة — والدائرة الملونة في كل
   أيقونة أصلاً جزء من ملف الـSVG نفسه، مش محتاجة أي فلتر. ── */
/* ثاني تصميم: المحاولة الأولى (نص جنب لوحة كبسولات مكدّسة) طلعت
   شبه خمس معاهد تانية بالحرف. هنا شريط غامق ممتلئ العرض (نفس
   تدرّج البنر الأحمر/الكحلي)، الأربعة عناصر في صف واحد مفصولين
   بخطوط رأسية شعرة — مفيش كبسولات، مفيش لوحة، مفيش عمود نص جنبها؛
   العنوان فوق الشريط في النص. */
/* ثالث تصميم، طلب خاص بالضبط لgulf: نفس شكل قسم "Our Training
   Formats" بتاع mawred-edu.com — عنوان في النص، وتحته 3 كروت صور
   كبيرة (تدريب حضوري/أونلاين/داخل الشركة)، كل واحد صورة كاملة +
   تعتيم متدرّج + عنوان ووصف وزرار كبسولة. الصور الحقيقية اتبعتت
   من المستخدم نفسه (assets/images/institutes/tiles/gulf/) بعد ما
   اتأكد إنه مفيش صورة حقيقية جاهزة في المشروع لمفهوم "صيغ
   التدريب" دي أصلاً. */
body.theme-gulf .gf-tiles { padding: 56px 0; }

body.theme-gulf .gf-tiles-head { text-align: center; margin: 0 0 36px; }
body.theme-gulf .gf-tiles-eyebrow {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--site-primary, #ea1a2d);
    margin: 0 0 10px;
}
body.theme-gulf .gf-tiles-head h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gf-ink, #10161f);
    margin: 0 0 12px;
}
body.theme-gulf .gf-tiles-head h2 span { color: var(--site-accent, #003f69); }
body.theme-gulf .gf-tiles-lede {
    color: #5a6270;
    font-size: 1rem;
    max-width: 46ch;
    margin: 0 auto;
}

body.theme-gulf .gf-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

body.theme-gulf .gf-tiles-card {
    position: relative;
    display: block;
    min-height: 320px;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

/* أسود تحت (عشان النص الأبيض يبان) متدرّج لأحمر --site-primary
   شفاف لفوق — طلب صريح. */
body.theme-gulf .gf-tiles-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, .86) 0%,
        color-mix(in srgb, var(--site-primary, #ea1a2d) 26%, transparent) 55%,
        color-mix(in srgb, var(--site-primary, #ea1a2d) 6%, transparent) 100%);
}

body.theme-gulf .gf-tiles-content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
}

body.theme-gulf .gf-tiles-title {
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}
body.theme-gulf .gf-tiles-desc {
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

body.theme-gulf .gf-tiles-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--gf-ink, #10161f);
    font-weight: 700;
    font-size: .84rem;
    transition: background .18s ease, color .18s ease;
}
body.theme-gulf .gf-tiles-card:hover .gf-tiles-btn {
    background: var(--site-primary, #ea1a2d);
    color: #fff;
}

@media (max-width: 991px) {
    body.theme-gulf .gf-tiles-grid { grid-template-columns: 1fr; }
}

/* طلب صريح (2026-09-05، الخليج بس): خط كروت التخصصات مش بولد. */
body.theme-gulf .gf-categories-card, body.theme-gulf .gf-categories-card .gf-categories-title, body.theme-gulf .gf-categories-title { font-weight: 400 !important; }

/* ═══ الخليج — كروت التخصصات بتدرّجات (طلب صريح 2026-09-05، الفكرة من mawred-edu.com بألوان الخليج) ═══
   نفس الكبسولات، بس 4 في الصف وأصغر، وكل كبسولة بتدرّج لوني ناعم بيتبادل
   بين 4 تينتات مشتقة من هوية الخليج (أحمر، كحلي، ذهبي، رمادي دافئ)،
   وسهم في دايرة بلون المعهد. عند التحويم التدرّج بيغمق شوية والكبسولة بتعلى. */
body.theme-gulf .gf-categories-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
body.theme-gulf .gf-categories-pill {
    padding: 12px 16px;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(16, 22, 31, .06);
    border: 1px solid rgba(16, 22, 31, .06);
    background: linear-gradient(135deg, #fff1f2 0%, #ffd6da 100%);
}
body.theme-gulf .gf-categories-pill:nth-child(5n+2) { background: linear-gradient(135deg, #eef3f9 0%, #d3e0ee 100%); }
body.theme-gulf .gf-categories-pill:nth-child(5n+3) { background: linear-gradient(135deg, #fff8e8 0%, #ffe6b5 100%); }
body.theme-gulf .gf-categories-pill:nth-child(5n+4) { background: linear-gradient(135deg, #f5f3f0 0%, #e2ddd6 100%); }
body.theme-gulf .gf-categories-pill:nth-child(5n)   { background: linear-gradient(135deg, #f1eef8 0%, #d9d2ee 100%); }
body.theme-gulf .gf-categories-pill:hover {
    background: linear-gradient(135deg, var(--site-primary, #ea1a2d) 0%, #b3101f 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(234, 26, 45, .22);
}
body.theme-gulf .gf-categories-title { font-size: .84rem; color: var(--gf-ink, #10161f); }
body.theme-gulf .gf-categories-arrow {
    width: 26px; height: 26px; font-size: 1rem;
    background: var(--site-primary, #ea1a2d); color: #fff;
}
body.theme-gulf .gf-categories-pill:nth-child(5n+2) .gf-categories-arrow { background: var(--site-accent, #003f69); }
@media (max-width: 991px) { body.theme-gulf .gf-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { body.theme-gulf .gf-categories-grid { grid-template-columns: 1fr; } }

/* ═══ الدورات القادمة (افتراضية) — الخليج: كروت داكنة بصور (طلب صريح 2026-09-05) ═══
   لوح أسود بعرض الصفحة، 3 كروت في الصف، صورة الدورة فوق وعليها شريحة تاريخ
   حمرا، العنوان أبيض، تفاصيل رمادية، وزر "احجز" أحمر. عند التحويم إطار أحمر. */
body.theme-gulf .inst-upcoming { background: #141416; padding: 56px 0; }
body.theme-gulf .inst-upcoming-head h2 { color: #fff; }
body.theme-gulf .inst-upcoming-head a { color: var(--site-primary, #ea1a2d); }
body.theme-gulf .inst-upcoming-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
body.theme-gulf .inst-upcoming-list li { border: 0 !important; }
body.theme-gulf .inst-upcoming-list a { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: #1f1f23; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); height: 100%; position: relative; transition: border-color .18s, transform .18s; }
body.theme-gulf .inst-upcoming-list a:hover { background: #1f1f23; border-color: var(--site-primary, #ea1a2d); transform: translateY(-4px); }
body.theme-gulf .inst-upcoming-thumb { display: block; height: 150px; background-size: cover; background-position: center; filter: saturate(.85); }
body.theme-gulf .inst-upcoming-date { position: absolute; top: 12px; inset-inline-start: 12px; width: auto; height: auto; padding: 6px 10px; border-radius: 6px; flex-direction: row; gap: 6px; align-items: baseline; background: var(--site-primary, #ea1a2d); }
body.theme-gulf .inst-upcoming-day { font-size: 1.1rem; }
body.theme-gulf .inst-upcoming-body { padding: 16px 18px 18px; gap: 8px; }
body.theme-gulf .inst-upcoming-title { color: #fff; font-size: 1rem; min-height: 2.8em; }
body.theme-gulf .inst-upcoming-meta { color: #a9adb6; }
body.theme-gulf .inst-upcoming-city { color: #fff; }
body.theme-gulf .inst-upcoming-meta2 { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: #a9adb6; }
body.theme-gulf .inst-upcoming-meta2 i { margin-inline-end: 4px; color: var(--site-primary, #ea1a2d); }
body.theme-gulf .inst-upcoming-book { display: inline-block; align-self: flex-start; margin-top: 6px; padding: 8px 16px; border-radius: 999px; background: var(--site-primary, #ea1a2d); color: #fff; font-size: .8rem; font-weight: 700; }
@media (max-width: 991px) { body.theme-gulf .inst-upcoming-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { body.theme-gulf .inst-upcoming-list { grid-template-columns: 1fr; } }

/* الدورات القادمة: كروت أصغر (طلب صريح 2026-09-06) */
body.theme-gulf .inst-upcoming-list { grid-template-columns: repeat(4, 1fr); gap: 14px; }
body.theme-gulf .inst-upcoming-thumb { height: 110px; }
body.theme-gulf .inst-upcoming-body { padding: 12px 14px 14px; gap: 6px; }
body.theme-gulf .inst-upcoming-title { font-size: .88rem; min-height: 2.6em; }
body.theme-gulf .inst-upcoming-meta { font-size: .78rem; }
body.theme-gulf .inst-upcoming-book { padding: 6px 12px; font-size: .74rem; }
@media (max-width: 991px) { body.theme-gulf .inst-upcoming-list { grid-template-columns: repeat(2, 1fr); } }

/* ===== /training-courses — الخليج: صفحة غامقة بالكامل، بانر بشريط أحمر مائل، فلتر داكن، كروت داكنة 5 أعمدة بصورة رمادية بتتلوّن عند المرور (2026-09-07) ===== */
body.theme-gulf.pg-training-courses #common-banner-section-image .background-listing{background:linear-gradient(105deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%);color:#fff;border-radius:0}
body.theme-gulf.pg-training-courses #common-banner-section-image .background-listing:before{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-section-box{display:flex;align-items:center;gap:36px}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-image{position:static;float:none;width:250px;flex:none;padding:0;border:4px solid #fff;border-radius:0;box-shadow:12px 12px 0 #10161f;background:#fff;margin:0}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-text{float:none;width:auto;flex:1;text-align:start}
body.theme-gulf.pg-training-courses #common-banner-section-image h1{color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.04em}
body.theme-gulf.pg-training-courses #common-banner-section-image p{color:#c9ccd3;text-align:start}
body.theme-gulf.pg-training-courses #searresultscourses-btn2{background:#ea1a2d;border-color:#ea1a2d;color:#fff;border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one{margin-top:0;padding:14px 0;background:#28292c}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .box2{background:transparent;box-shadow:none;padding:0}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .form-control{background:#10161f;color:#fff;border:1px solid #ea1a2d;border-radius:0;height:34px}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two{background:transparent;color:#fff;border:1px solid #a9adb6;border-radius:0}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two:hover{background:#fff;color:#10161f}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color{background:#ea1a2d;border-color:#ea1a2d;color:#fff}
body.theme-gulf.pg-training-courses #common-white-section{background:#10161f;padding:30px 0}
body.theme-gulf.pg-training-courses #common-white-section .box{background:transparent;box-shadow:none}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting,body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting.virtual{background:#1b1f26;border:0;border-top:3px solid #ea1a2d;border-radius:0;padding:0;box-shadow:none;color:#fff;transition:background .25s}
body.theme-gulf.pg-training-courses .courselisting:hover{background:#28292c}
body.theme-gulf.pg-training-courses .course-image{border:0;border-radius:0;background:#10161f}
body.theme-gulf.pg-training-courses .course-image img{filter:grayscale(1);transition:filter .35s}
body.theme-gulf.pg-training-courses .courselisting:hover .course-image img{filter:grayscale(0)}
body.theme-gulf.pg-training-courses .course-image-vl-icon{background:#ea1a2d}
body.theme-gulf.pg-training-courses .course-title{color:#fff;font-size:14px;padding:10px 12px 0;min-height:48px}
body.theme-gulf.pg-training-courses .course-date,body.theme-gulf.pg-training-courses .course-language,body.theme-gulf.pg-training-courses .course-location,body.theme-gulf.pg-training-courses .course-time{color:#a9adb6;padding:0 12px}
body.theme-gulf.pg-training-courses .courselisting i.bi{color:#ea1a2d!important}
body.theme-gulf.pg-training-courses .courselisting form{padding:8px 12px 12px}
body.theme-gulf.pg-training-courses .courselisting .btn-primary{background:#ea1a2d;border-color:#ea1a2d;color:#fff;border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700}
body.theme-gulf.pg-training-courses .courselisting:hover .btn-primary{background:#fff;border-color:#fff;color:#10161f}
body.theme-gulf.pg-training-courses #ajax_load .spinner-border{color:#fff!important}
@media (min-width:992px){body.theme-gulf.pg-training-courses #course_list{grid-template-columns:repeat(5,1fr);gap:14px}}
@media (max-width:767px){body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-section-box{flex-direction:column;align-items:flex-start}}

/* --- training-courses fix aaa477cc85d21826e577fa6ef2546cfe --- */
body.theme-gulf.pg-training-courses #common-banner-section-image{background:linear-gradient(105deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%)}
body.theme-gulf.pg-training-courses #common-banner-section-image::before{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-section-box{flex-direction:row;align-items:center;text-align:start;padding:34px 0}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-image{border-radius:0}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-image::after{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-image .common-banner-text{max-width:none;text-align:start}
body.theme-gulf.pg-training-courses #searresultscourses-btn2{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses .courselisting .btn-primary{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses .courselisting:hover .btn-primary{background:#fff!important;border-color:#fff!important;color:#10161f!important}

/* --- training-courses fix de0fbebbf417ad467a6d5a2231825355 --- */
/* الشريط الأحمر المائل يتعكس في العربي */
body[dir="rtl"].theme-gulf.pg-training-courses #common-banner-section-image{background:linear-gradient(255deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%)}

/* --- training-courses fix 0b2c9aed6fa032129059a28e08319e14 --- */
/* ثيم الخليج بيفرض على كل كارت radius 18px و border:0 بـ!important → الصورة المربعة كانت بتخرج من الزوايا المدوّرة */
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting,body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting.virtual{border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
body.theme-gulf.pg-training-courses .course-image{border-radius:0!important}

/* --- training-courses fix 80007030f4d535782c0da09799e7778f --- */
/* أيقونات بيانات الكارت الخاصة بالمعهد (طلب 2026-09-07): calendar3 / globe2 / person-video3 / pin-map-fill / buildings-fill */
body.theme-gulf.pg-training-courses .course-date .bi-calendar-check-fill::before{content:"\f214"}
body.theme-gulf.pg-training-courses .course-language .bi-flag-fill::before{content:"\f3ef"}
/* (2026-09-10) الصيغة كانت بنفس الأيقونة في الحالتين — "حضورية"
   و"افتراضية" بنفس الرمز. الصف الافتراضي عليه كلاس `.virtual`،
   فهو اللي بيفرّق: الحضوري person-video3 (مدرّب قدام شاشة)،
   والافتراضي pc-display-horizontal (شاشة لوحدها). */
body.theme-gulf.pg-training-courses .course-language .bi-bookmarks-fill::before{content:"\f679"}
body.theme-gulf.pg-training-courses .courselisting.virtual .course-language .bi-bookmarks-fill::before{content:"\f6a5"}
body.theme-gulf.pg-training-courses .course-location .bi-signpost-split-fill::before{content:"\f64b"}
body.theme-gulf.pg-training-courses .course-time .bi-signpost-split-fill::before{content:"\f87c"}

/* --- training-courses fix 2174caacf4ae9409c5090c91a4e80713 --- */
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color{background:#10161f!important;border:1px solid #ea1a2d!important;color:#fff!important;border-radius:30px;padding:0 16px}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color:hover{background:#ea1a2d!important;color:#fff!important}

/* --- btn-secondary = btn-primary (2026-09-07) --- */
/* صفحة الأونلاين بنفس تصميم الحضوري: زر الدورات الافتراضية (.btn-secondary) بنفس تنسيق الزر العادي */
body.theme-gulf.pg-training-courses .courselisting .btn-secondary{background:#ea1a2d;border-color:#ea1a2d;color:#fff;border-radius:0;text-transform:uppercase;letter-spacing:.06em;font-size:12px;font-weight:700}
body.theme-gulf.pg-training-courses .courselisting:hover .btn-secondary{background:#fff;border-color:#fff;color:#10161f}
body.theme-gulf.pg-training-courses .courselisting .btn-secondary{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses .courselisting:hover .btn-secondary{background:#fff!important;border-color:#fff!important;color:#10161f!important}

/* --- training-courses fix e695b0f82febd8432daf230cff7fb0b4 --- */
/* (2026-09-07) زر البانر بلونين أحمر وأسود عشان يبان فوق الخلفية (الشريط الأحمر والخلفية السوداء): خلفية سوداء بإطار أحمر ونص أبيض، وعند المرور خلفية حمراء بنص أبيض */
body.theme-gulf.pg-training-courses #searresultscourses-btn2{background:#10161f!important;border:2px solid #ea1a2d!important;color:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:background .2s}
body.theme-gulf.pg-training-courses #searresultscourses-btn2:hover,body.theme-gulf.pg-training-courses #searresultscourses-btn2:focus{background:#ea1a2d!important;border-color:#10161f!important;color:#fff!important}

/* --- training-courses fix e0f4e8f4cbab9b46cd6fadab5797246b --- */
/* ===== الدورات الداخلية — الخليج: لوح داكن بعرض الصفحة، الخطوات ثلاث أعمدة بأرقام حمراء كبيرة ونص أبيض، المزايا كبسولات بإطار أحمر، زر أحمر (2026-09-07) ===== */
body.theme-gulf .inst-ih{background:#10161f;padding:44px 0 50px}
body.theme-gulf .inst-ih-grid{grid-template-columns:1fr;gap:34px}
body.theme-gulf .inst-ih-steps,body.theme-gulf .inst-ih-benefits{background:transparent;border:0;box-shadow:none;padding:0}
body.theme-gulf .inst-ih-h{color:#fff;text-transform:uppercase;letter-spacing:.06em}
body.theme-gulf .inst-ih-h::after{background:#ea1a2d}
body.theme-gulf .inst-ih-list{grid-template-columns:repeat(3,1fr);gap:22px}
body.theme-gulf .inst-ih-list li{flex-direction:column;background:#1b1f26;border-top:3px solid #ea1a2d;padding:22px;gap:12px}
body.theme-gulf .inst-ih-num{width:auto;height:auto;background:transparent;color:#ea1a2d;font-size:2.4rem;line-height:1;font-weight:800;border-radius:0}
body.theme-gulf .inst-ih-body strong{color:#fff}
body.theme-gulf .inst-ih-body span{color:#a9adb6}
body.theme-gulf .inst-ih-checks{display:flex;flex-wrap:wrap;gap:10px}
body.theme-gulf .inst-ih-checks li{border:1px solid #ea1a2d;border-radius:30px;padding:8px 16px;color:#fff;font-size:.88rem}
body.theme-gulf .inst-ih-checks li .bi{color:#ea1a2d;font-size:1rem}
body.theme-gulf .inst-ih-cta{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0;text-transform:uppercase;letter-spacing:.08em;padding:12px 28px;margin-top:10px}

/* --- training-courses fix 825ac194023ef8d55665eb74d9d8754a --- */
/* لمسة فنية: الخليج — أرقام كبيرة شفافة في خلفية كل بطاقة، خط أحمر يتمدد عند المرور، كبسولات تتلوّن أحمر عند المرور */
body.theme-gulf .inst-ih-list li{position:relative;overflow:hidden;transition:transform .25s,background .25s}
body.theme-gulf .inst-ih-list li::after{content:attr(data-n);position:absolute;inset-inline-end:-10px;bottom:-30px;font-size:8rem;font-weight:900;color:rgba(255,255,255,.04);line-height:1;pointer-events:none}
body.theme-gulf .inst-ih-list li:hover{transform:translateY(-4px);background:#232830}
body.theme-gulf .inst-ih-h::after{transition:width .3s}
body.theme-gulf .inst-ih-steps:hover .inst-ih-h::after,body.theme-gulf .inst-ih-benefits:hover .inst-ih-h::after{width:96px}
body.theme-gulf .inst-ih-checks li{transition:background .2s,color .2s}
body.theme-gulf .inst-ih-checks li:hover{background:#ea1a2d}
body.theme-gulf .inst-ih-checks li:hover .bi{color:#fff}
body.theme-gulf .inst-ih-cta{box-shadow:0 8px 24px rgba(234,26,45,.4)}

/* --- banner-icon = banner-image (2026-09-07) --- */
/* صفحة التخصص بانرها #common-banner-section-icon بنفس بنية بانر الصورة → نفس تصميم بانر الثيم */
body.theme-gulf.pg-training-courses #common-banner-section-icon .background-listing{background:linear-gradient(105deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%);color:#fff;border-radius:0}
body.theme-gulf.pg-training-courses #common-banner-section-icon .background-listing:before{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-section-box{display:flex;align-items:center;gap:36px}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-image{position:static;float:none;width:250px;flex:none;padding:0;border:4px solid #fff;border-radius:0;box-shadow:12px 12px 0 #10161f;background:#fff;margin:0}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-text{float:none;width:auto;flex:1;text-align:start}
body.theme-gulf.pg-training-courses #common-banner-section-icon h1{color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.04em}
body.theme-gulf.pg-training-courses #common-banner-section-icon p{color:#c9ccd3;text-align:start}
body.theme-gulf.pg-training-courses #common-banner-section-icon{background:linear-gradient(105deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%)}
body.theme-gulf.pg-training-courses #common-banner-section-icon::before{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-section-box{flex-direction:row;align-items:center;text-align:start;padding:34px 0}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-image{border-radius:0}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-image::after{display:none}
body.theme-gulf.pg-training-courses #common-banner-section-icon .common-banner-text{max-width:none;text-align:start}
body[dir="rtl"].theme-gulf.pg-training-courses #common-banner-section-icon{background:linear-gradient(255deg,#ea1a2d 0,#ea1a2d 36%,#10161f 36.2%)}

/* --- training-courses fix cd77683a2e29c440a33f740375dfec9a --- */
/* ===== الصفحات الداخلية — الخليج: أقسام على لوح داكن بأرقام حمراء وبطاقات #1b1f26؛ الأسئلة بأسئلة بيضاء على داكن وشريط أحمر للمفتوح؛ العملاء كبسولات حمراء ===== */
body.theme-gulf .inst-about,body.theme-gulf .inst-faq,body.theme-gulf .inst-pub,body.theme-gulf .inst-clients{background:#10161f;color:#fff}
body.theme-gulf .inst-about-intro,body.theme-gulf .inst-clients-intro,body.theme-gulf .inst-about-pillar p,body.theme-gulf .inst-pub-feat p,body.theme-gulf .inst-pub-dl dd,body.theme-gulf .inst-faq-a,body.theme-gulf .inst-about-offer-body span{color:#a9adb6}
body.theme-gulf .inst-about-pillar,body.theme-gulf .inst-pub-feat,body.theme-gulf .inst-about-offer,body.theme-gulf .inst-faq-item,body.theme-gulf .inst-pub-terms,body.theme-gulf .inst-clients-grid li{background:#1b1f26;border:0;border-top:3px solid #ea1a2d;border-radius:0;box-shadow:none;color:#fff}
body.theme-gulf .inst-about-pillar h2,body.theme-gulf .inst-pub-feat h2,body.theme-gulf .inst-about-offer-body strong,body.theme-gulf .inst-pub-dl dt,body.theme-gulf .inst-faq-item summary,body.theme-gulf .inst-faq-cta p,body.theme-gulf .inst-clients-cta p{color:#fff}
body.theme-gulf .inst-about-h,body.theme-gulf .inst-faq-h,body.theme-gulf .inst-pub-h,body.theme-gulf .inst-clients-h{color:#fff;text-transform:uppercase;letter-spacing:.06em}
body.theme-gulf .inst-about-h::after,body.theme-gulf .inst-faq-h::after,body.theme-gulf .inst-pub-h::after,body.theme-gulf .inst-clients-h::after{background:#ea1a2d}
body.theme-gulf .inst-about-pillar .bi,body.theme-gulf .inst-pub-feat .bi,body.theme-gulf .inst-about-offer > .bi,body.theme-gulf .inst-about-offer-arrow,body.theme-gulf .inst-faq-item summary .bi,body.theme-gulf .inst-clients-grid li .bi{color:#ea1a2d}
body.theme-gulf .inst-faq-item[open]{border-top-color:#fff}
body.theme-gulf .inst-faq-item[open] summary{color:#ea1a2d}
body.theme-gulf .inst-clients-grid li{border-top:0;border:1px solid #ea1a2d;border-radius:30px;flex-direction:row;justify-content:center;padding:10px 14px}
body.theme-gulf .inst-clients-grid li .bi{font-size:1.1rem}

/* --- training-courses fix d663180f7e24fc7627732094e48621e3 --- */
/* ===== الخليج: صفحة داكنة، بطاقات #1b1f26 بشريط أحمر علوي، أيقونات في مربع أبيض، صور رمادية تتلوّن عند المرور ===== */
body.theme-gulf.pg-training-courses #categorymain-listing-section,body.theme-gulf.pg-training-courses #citymain-listing-section,body.theme-gulf.pg-training-courses #common-listing-section{background:#10161f;padding:30px 0}
body.theme-gulf.pg-training-courses .categorymain-listing-wrap-box > .box2,body.theme-gulf.pg-training-courses .citymain-listing-wrap-box .box2,body.theme-gulf.pg-training-courses .common-listing-wrap-box > .box2{background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;color:#fff;transition:background .2s}
body.theme-gulf.pg-training-courses .categorymain-listing-wrap-box > .box2:hover,body.theme-gulf.pg-training-courses .citymain-listing-wrap-box .box2:hover,body.theme-gulf.pg-training-courses .common-listing-wrap-box > .box2:hover{background:#28292c!important}
body.theme-gulf.pg-training-courses .categorypage-icon{background:#fff;border-radius:0;padding:10px}
body.theme-gulf.pg-training-courses .categorypage-content h6,body.theme-gulf.pg-training-courses .widget-content h6,body.theme-gulf.pg-training-courses .common-listing-wrap-box .common-content h6{color:#fff}
body.theme-gulf.pg-training-courses .categorypage-content a,body.theme-gulf.pg-training-courses .widget-content a,body.theme-gulf.pg-training-courses .widget-content p,body.theme-gulf.pg-training-courses .common-listing-wrap-box .common-content p,body.theme-gulf.pg-training-courses .common-listing-wrap-box .course-person,body.theme-gulf.pg-training-courses .common-listing-wrap-box .course-date{color:#a9adb6}
body.theme-gulf.pg-training-courses .categorypage-content a:hover,body.theme-gulf.pg-training-courses .widget-content a:hover{color:#ea1a2d}
body.theme-gulf.pg-training-courses .widget-icon img,body.theme-gulf.pg-training-courses .common-listing-wrap-box > .box2 > a:first-child img{filter:grayscale(1);transition:filter .3s}
body.theme-gulf.pg-training-courses .box2:hover .widget-icon img,body.theme-gulf.pg-training-courses .common-listing-wrap-box > .box2:hover img{filter:none}
body.theme-gulf.pg-training-courses .common-listing-wrap-box .btn{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0;text-transform:uppercase;letter-spacing:.06em}

/* --- training-courses fix 16788c1a66c1c157146b1e3a7f7b2cb7 --- */
/* ===== الخليج: لوح داكن، بطاقات #1b1f26 بشريط أحمر علوي، نص أبيض ===== */
body.theme-gulf .inst-dl,body.theme-gulf.pg-training-courses #common-listing-section.common-listing-section-wrap{background:#10161f}
body.theme-gulf .inst-dl-item,body.theme-gulf .inst-dl-request,body.theme-gulf .inst-contact-card,body.theme-gulf .inst-cra,body.theme-gulf .inst-contact-form .box4{background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;color:#fff;box-shadow:none!important}
body.theme-gulf .inst-dl-h,body.theme-gulf .inst-contact-h,body.theme-gulf .inst-dl-body strong,body.theme-gulf .inst-contact-list li a,body.theme-gulf .inst-contact-list li span,body.theme-gulf .inst-cra-head strong,body.theme-gulf .inst-cra-list a,body.theme-gulf .inst-contact-form h5{color:#fff}
body.theme-gulf .inst-dl-body span,body.theme-gulf .inst-dl-request p,body.theme-gulf .inst-contact-lead,body.theme-gulf .inst-contact-list li b,body.theme-gulf .inst-cra-head span{color:#a9adb6}
body.theme-gulf .inst-dl-h::after{background:#ea1a2d}
body.theme-gulf .inst-dl-item > .bi,body.theme-gulf .inst-dl-arrow,body.theme-gulf .inst-cra-head > .bi,body.theme-gulf .inst-cra-list li .bi{color:#ea1a2d}
body.theme-gulf .inst-contact-list li .bi{background:#ea1a2d;color:#fff;border-radius:0}
body.theme-gulf .inst-contact-form .form-control{background:#10161f;color:#fff;border:1px solid #a9adb6}

/* --- category lists = course_list (2026-09-07) --- */
/* صفحة التخصص: نفس شبكة/تصميم #course_list على #category_course_list و#category_course_list_by_name */
@media (min-width:992px){body.theme-gulf.pg-training-courses #category_course_list{grid-template-columns:repeat(5,1fr);gap:14px}}
@media (min-width:992px){body.theme-gulf.pg-training-courses #category_course_list_by_name{grid-template-columns:repeat(5,1fr);gap:14px}}

/* --- training-courses fix c49da4cf23824b7053a0a4ae1f913618 --- */
/* ===== الخليج: شريط بحث داكن بحقول سوداء بحدود حمراء وزر أحمر ===== */
body.theme-gulf.pg-training-courses #fc-search{background:#28292c}
body.theme-gulf.pg-training-courses #fc-search .search-wrap{background:transparent;box-shadow:none;border-radius:0;color:#fff}
body.theme-gulf.pg-training-courses #fc-search .form-control,body.theme-gulf.pg-training-courses #fc-search .chosen-choices,body.theme-gulf.pg-training-courses #fc-search select{background:#10161f!important;color:#fff!important;border:1px solid #ea1a2d!important;border-radius:30px!important}
body.theme-gulf.pg-training-courses #fc-search .search-btns{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0}
body.theme-gulf.pg-training-courses #fc-search + #fc-search,body.theme-gulf.pg-training-courses .search-resultwrap{background:#10161f}

/* --- finder results = course_list (2026-09-07) --- */
@media (min-width:992px){body.theme-gulf.pg-training-courses #coursefinder_list_courses{grid-template-columns:repeat(5,1fr);gap:14px}}

/* --- training-courses fix c855086be36927fec979f9a6eaf565eb --- */
/* ===== الخليج: بطاقات داكنة بشريط أحمر علوي والحرف الأول كبير شفاف في الخلفية، 4 أعمدة ===== */
body.theme-gulf.pg-training-courses .categorymain-listing-wrap-box > .box2{position:relative;overflow:hidden;min-height:110px;padding:22px 18px}
body.theme-gulf.pg-training-courses .categorymain-listing-wrap-box > .box2::before{content:counter(instcat);counter-increment:instcat;position:absolute;inset-inline-end:10px;bottom:-14px;font-size:4.5rem;font-weight:900;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
body.theme-gulf.pg-training-courses .categorypage-content h6{font-size:1rem;text-transform:uppercase;letter-spacing:.03em}

/* --- training-courses fix 45ad79ee8c4373d64efd1c31ef1c93a3 --- */
/* ===== الخليج: لوحات داكنة بشريط أحمر علوي، حقول سوداء بحدود حمراء، زر أحمر ===== */
body.theme-gulf.pg-training-courses #register-section .tabHead{background:#1b1f26;border-top:3px solid #ea1a2d;border-radius:0;color:#fff;text-transform:uppercase;letter-spacing:.06em}
body.theme-gulf.pg-training-courses #register-section .tabContent{background:#1b1f26;border:0;border-radius:0;color:#fff}
body.theme-gulf.pg-training-courses #register-section .tabContent label,body.theme-gulf.pg-training-courses #register-section .tabContent p,body.theme-gulf.pg-training-courses #register-section h1,body.theme-gulf.pg-training-courses #register-section h5,body.theme-gulf.pg-training-courses #register-section h6{color:#fff}
body.theme-gulf.pg-training-courses #register-section .form-control{background:#10161f;color:#fff;border:1px solid #ea1a2d;border-radius:30px}
body.theme-gulf.pg-training-courses #register-section .form-control::placeholder{color:#a9adb6}
body.theme-gulf.pg-training-courses #register-section .box4,body.theme-gulf.pg-training-courses .inst-form-side-card{background:#1b1f26;border:0;border-top:3px solid #ea1a2d;border-radius:0;color:#fff}
body.theme-gulf.pg-training-courses .inst-form-side-card h5,body.theme-gulf.pg-training-courses .inst-form-side-card h6,body.theme-gulf.pg-training-courses .inst-form-side-card a,body.theme-gulf.pg-training-courses .inst-form-side-steps li{color:#fff}
body.theme-gulf.pg-training-courses .inst-form-side-list li .bi{background:#ea1a2d;color:#fff;border-radius:0}

/* --- training-courses fix ff4f8fa809e918d27d0148949408d640 --- */
body.theme-gulf.pg-training-courses #register-section .tabHead{background:#1b1f26!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.06em!important}

/* --- training-courses fix 5680d2e1beb6852dced7c7fc81537536 --- */
body.theme-gulf.pg-training-courses #register-section .tabContent{background:#1b1f26!important;border:0!important;border-radius:0!important;color:#fff!important}

/* --- training-courses fix 67713f1c1cdab4a3427ea4639b8765aa --- */
/* ===== الخليج: صفحة داكنة، بطاقة #1b1f26 بشريط أحمر علوي ونص فاتح، المرتبطة داكنة بشعار أبيض ===== */
body.theme-gulf.pg-post-page{background:#10161f}
body.theme-gulf.pg-post-page .blog-webinar-articles-details-left .box,body.theme-gulf.pg-post-page .blog-webinar-articles-details-right .box2{background:#1b1f26;border:0;border-top:3px solid #ea1a2d;border-radius:0;color:#e6e8ec}
body.theme-gulf.pg-post-page .blog-webinar-articles-details-left .box h1,body.theme-gulf.pg-post-page .blog-webinar-articles-details-right .box2 h6,body.theme-gulf.pg-post-page .custom-related-head,body.theme-gulf.pg-post-page .blog-webinar-articles-details-left .box .common-detail-content,body.theme-gulf.pg-post-page .blog-webinar-articles-details-left .box .common-detail-content *{color:#e6e8ec}
body.theme-gulf.pg-post-page .blog-webinar-articles-details-left .box .course-date,body.theme-gulf.pg-post-page .blog-webinar-articles-details-right .box2 .course-date,body.theme-gulf.pg-post-page .blog-webinar-articles-details-right .box2 p{color:#a9adb6}
body.theme-gulf.pg-post-page .breadcrumb a,body.theme-gulf.pg-post-page .breadcrumb-item{color:#a9adb6!important}

/* --- training-courses fix a95823da4e235a2f20ef6c7e6d19ade4 --- */
/* ===== الخليج: كل الصفحة داكنة — شريط الأزرار داكن، التبويبات مربّعة بنشاط أحمر، المحتوى #1b1f26 بنص فاتح، بطاقات الجدول داكنة ===== */
body.theme-gulf.pg-training-courses #coursedetails-buttons-section .box2{background:#1b1f26;border-top:3px solid #ea1a2d;border-radius:0}
body.theme-gulf.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{background:#1b1f26;color:#fff;border-radius:0}
body.theme-gulf.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:#ea1a2d;color:#fff}
body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content{background:#1b1f26;color:#e6e8ec;border-radius:0;border-top:3px solid #ea1a2d}
body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h1,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h2,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h3,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h4,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h5,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content h6,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content p,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content li,body.theme-gulf.pg-training-courses #coursedetails-content-section .tab-content strong{color:#e6e8ec}
body.theme-gulf.pg-training-courses .session-card{background:#10161f!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;color:#e6e8ec}
body.theme-gulf.pg-training-courses .session-card li,body.theme-gulf.pg-training-courses .session-card .text-secondary{color:#a9adb6!important}
body.theme-gulf.pg-training-courses .session-card .price-box{background:#1b1f26;border-color:#ea1a2d}
body.theme-gulf.pg-training-courses #nav-virtuallearning .courselisting-normal{background:#10161f;border:0;border-top:3px solid #ea1a2d;color:#fff}
body.theme-gulf.pg-training-courses #nav-virtuallearning .courselisting-normal .course-title{color:#fff}
body.theme-gulf.pg-training-courses #common-section.section-grey{background:#10161f}

/* --- training-courses fix 22de029ecbcf0cd139f51f185e897e90 --- */
body.theme-gulf.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{background:#1b1f26!important;color:#fff!important;border-radius:0!important}

/* --- training-courses fix de19ed9263f209ca88bf831c00c47956 --- */
body.theme-gulf.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:#ea1a2d!important;color:#fff!important}

/* --- training-courses fix 762779544b9e82107b8f8895bb0f927e --- */
/* ===== الخليج (2026-09-07): مساحات بيضا فاضلة على الثيم الداكن — صفحة التسجيل/الطلب،
   بطاقة السعر في جدول الدورة، والدورات ذات الصلة. المصادر: #nav-tabContent و.tab-content
   بيضا من fullcss.css، و.price-tag لونها مكتوب جوّه ستايل الفيو نفسه، وستايل سطري #f9f9f9
   على صندوق المشاركين — كلها محتاجة !important لأنها أقوى أو سطرية. ===== */

/* نماذج التسجيل وطلب الدورة الداخلية */
body.theme-gulf.pg-training-courses #nav-tabContent,
body.theme-gulf.pg-training-courses #register-section .tab-content{background:#1b1f26!important;color:#e6e8ec!important;box-shadow:none!important;border-radius:0!important}
body.theme-gulf.pg-training-courses #register-section .search-inner-box,
body.theme-gulf.pg-training-courses #register-section .search-inner-box h5,
body.theme-gulf.pg-training-courses #register-section .search-inner-box h6,
body.theme-gulf.pg-training-courses #register-section .search-inner-box label,
body.theme-gulf.pg-training-courses #register-section .search-inner-box p,
body.theme-gulf.pg-training-courses #register-section .search-inner-box em,
body.theme-gulf.pg-training-courses #register-section .tab-content h5{color:#e6e8ec!important}
/* صندوق "Participant 1" — خلفيته مكتوبة ستايل سطري في الفيو المشترك مع المعهد */
body.theme-gulf.pg-training-courses #register-section [style*="#f9f9f9"]{background:#10161f!important;border-color:#2a2f38!important}
body.theme-gulf.pg-training-courses #register-section a{color:#ff7a84!important}
body.theme-gulf.pg-training-courses #register-section a:hover{color:#fff!important}
/* تبويبات "Company Paid / Self Paid" */
body.theme-gulf.pg-training-courses #register-section .nav-tabs .nav-link{background:#1b1f26!important;color:#e6e8ec!important;border:0!important;border-radius:0!important}
body.theme-gulf.pg-training-courses #register-section .nav-tabs .nav-link.active{background:#ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses #register-section .nav-tabs .nav-link svg{fill:currentColor}

/* بطاقة السعر جوّه بطاقات الجدول */
body.theme-gulf.pg-training-courses .price-tag{background:#10161f!important;border:1px solid #ea1a2d!important;color:#fff!important}
body.theme-gulf.pg-training-courses .price-tag *{color:#fff!important}
body.theme-gulf.pg-training-courses .price-tag .form-control,
body.theme-gulf.pg-training-courses .price-tag select{background:#1b1f26!important;color:#fff!important;border-color:#ea1a2d!important}
body.theme-gulf.pg-training-courses .price-tag .select-caret{color:#ea1a2d!important}

/* الدورات ذات الصلة أسفل صفحة الدورة */
body.theme-gulf #common-section.section-grey h4,
body.theme-gulf #common-section.section-grey h3{color:#fff!important}
body.theme-gulf .common-slider .courselisting,
body.theme-gulf .common-slider .courselisting.normal,
body.theme-gulf .common-slider .courselisting.virtual{background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;overflow:hidden}
body.theme-gulf .common-slider .course-title{color:#fff!important}
body.theme-gulf .common-slider .course-date,
body.theme-gulf .common-slider .course-language,
body.theme-gulf .common-slider .course-location,
body.theme-gulf .common-slider .course-time{color:#a9adb6!important}
body.theme-gulf .common-slider i.bi{color:#ea1a2d!important}
body.theme-gulf .common-slider .course-image img{filter:grayscale(1)}
body.theme-gulf .common-slider .courselisting:hover .course-image img{filter:grayscale(0)}
body.theme-gulf .owl-carousel .owl-nav button.owl-prev,
body.theme-gulf .owl-carousel .owl-nav button.owl-next,
body.theme-gulf .owl-prev,
body.theme-gulf .owl-next{background:#ea1a2d!important;border-radius:0!important}

/* --- training-courses fix a62bc1db2b8da1715a557594b15a2b86 --- */
/* زر إرسال النموذج كان بلون الأكسنت الكحلي، والباقي في الموقع كله أحمر — نوحّده. */
body.theme-gulf.pg-training-courses #register-section .btn-secondary,
body.theme-gulf.pg-training-courses #register-section .btn-primary,
body.theme-gulf.pg-training-courses #register-section input[type="submit"]{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0!important;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
body.theme-gulf.pg-training-courses #register-section .btn-secondary:hover,
body.theme-gulf.pg-training-courses #register-section .btn-primary:hover,
body.theme-gulf.pg-training-courses #register-section input[type="submit"]:hover{background:#fff!important;border-color:#fff!important;color:#10161f!important}
/* نص "متطلبات أخرى" كان مقصوص من فوق لأن الحقل كبسولي بحشو رأسي صغير */
body.theme-gulf.pg-training-courses #register-section textarea.form-control{padding-top:12px!important;border-radius:14px!important}

/* --- training-courses fix 71a8a65154689c38eeb8bbbbf768efba --- */
/* ===== الخليج (2026-09-07): صفحات ما كانتش واخدة تصميم الثيم أصلاً —
   نتائج البحث، والشروط والأحكام وسياسة الخصوصية. الاتنين بقالهم كلاس
   pg- من الكنترولر دلوقتي، وده تنسيقهم على الثيم الداكن. ===== */

/* ── نتائج البحث ── */
body.theme-gulf.pg-search-page #common-white-section,
body.theme-gulf.pg-search-page #common-section{background:#10161f!important;color:#e6e8ec}
body.theme-gulf.pg-search-page .courselisting,
body.theme-gulf.pg-search-page .courselisting.normal,
body.theme-gulf.pg-search-page .courselisting.virtual{background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;color:#e6e8ec!important}
body.theme-gulf.pg-search-page .course-title,
body.theme-gulf.pg-search-page .course-title a,
body.theme-gulf.pg-search-page h4,
body.theme-gulf.pg-search-page h5{color:#fff!important}
body.theme-gulf.pg-search-page .course-date,
body.theme-gulf.pg-search-page .course-language,
body.theme-gulf.pg-search-page .course-location,
body.theme-gulf.pg-search-page .course-time,
body.theme-gulf.pg-search-page p,
body.theme-gulf.pg-search-page td,
body.theme-gulf.pg-search-page em{color:#a9adb6!important}
body.theme-gulf.pg-search-page .custom-head-additional{background:#10161f!important;color:#fff!important;border:0!important;border-inline-start:4px solid #ea1a2d!important}
body.theme-gulf.pg-search-page .course-image img{filter:grayscale(1)}
body.theme-gulf.pg-search-page .courselisting:hover .course-image img{filter:grayscale(0)}
body.theme-gulf.pg-search-page i.bi,
body.theme-gulf.pg-search-page svg{color:#ea1a2d}
/* أزرار البطاقة وأزرار تبديل العرض */
body.theme-gulf.pg-search-page .btn-secondary,
body.theme-gulf.pg-search-page .btn-purple,
body.theme-gulf.pg-search-page .btn-primary,
body.theme-gulf.pg-search-page .menu-two{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0!important}
body.theme-gulf.pg-search-page .btn-secondary:hover,
body.theme-gulf.pg-search-page .btn-purple:hover,
body.theme-gulf.pg-search-page .btn-primary:hover,
body.theme-gulf.pg-search-page .menu-two:hover{background:#fff!important;border-color:#fff!important;color:#10161f!important}
body.theme-gulf.pg-search-page .menu-two svg{fill:currentColor}

/* ── الشروط والأحكام وسياسة الخصوصية ── */
body.theme-gulf.pg-policy-page #common-listing-section{background:#10161f!important;color:#e6e8ec}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4{background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;color:#e6e8ec!important}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h1,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h2,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h3,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h4,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h5,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h6,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 strong,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 b{color:#fff!important}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 p,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 li,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 td{color:#c9ccd3!important}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 a{color:#ff7a84!important}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 a:hover{color:#fff!important}

/* --- training-courses fix 5a6365f1f22e76dc71022744bde61a4f --- */
/* ===== الخليج (2026-09-07): صناديق الملاحظات الفاتحة في تبويب "الجدول والرسوم"
   (رأس السنة، رسالة "لا توجد جلسات"، تنبيه الرسوم + الضريبة، صندوق حقوق التعديل).
   ألوانها متعرّفة في fullcss.css بلون فاتح ثابت، والنص عليها ورث اللون الفاتح
   بتاع الثيم فبقى غير مقروء. القواعد عامة للثيم عشان نفس الصناديق بتظهر
   في نتائج البحث وقوائم الدورات كمان. ===== */
body.theme-gulf .custom-head-additional{background:#10161f!important;color:#fff!important;border:0!important;border-inline-start:4px solid #ea1a2d!important;border-radius:0!important}
body.theme-gulf .custom-head-additional h4,
body.theme-gulf .schedulehead-h4{color:#fff!important}
body.theme-gulf .fee-box-wrap-2022{background:#1b1f26!important;color:#e6e8ec!important;border-radius:0!important}
body.theme-gulf .custom-text-no-course,
body.theme-gulf .custom-text-no-course p,
body.theme-gulf .custom-text-no-course em{color:#a9adb6!important}
body.theme-gulf .alert-info{background:#1b1f26!important;border:0!important;border-inline-start:4px solid #ea1a2d!important;border-radius:0!important;color:#e6e8ec!important}
body.theme-gulf .fees-box-right2-2022{background:#1b1f26!important;color:#e6e8ec!important;border:0!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;padding:14px!important}
body.theme-gulf .fees-box-right2-2022 p,
body.theme-gulf .fees-box-right2-2022 b{color:#c9ccd3!important}

/* --- training-courses fix 294722c7778ba3a088e7097be5060d13 --- */
/* خلفية الصفحة نفسها كانت رمادي فاتح (#e9ebee من fullcss.css). ما بتبانش في الصفحات
   الطويلة، لكن في الصفحة القصيرة (سياسة الخصوصية مثلاً) الشاشة أطول من المحتوى
   فبيظهر شريط فاتح تحت التذييل. الخلفية دي وراء كل حاجة فتغييرها ما بيأثرش على قسم. */
body.theme-gulf{background:#10161f!important}

/* --- training-courses fix 408f4b84ea5108c0c35bde88e63b6c0a --- */
/* ===== الخليج (2026-09-07): شريط أزرار صفحة الدورة كان مخلوط — بعضه أبيض بنص
   أسود وبعضه داكن بنص أحمر، حسب أي قاعدة كسبت. نوحّده: الأزرار الثانوية
   (btn-primary-outline) داكنة بإطار ونص أحمر، وزر التسجيل (btn-primary) أحمر
   مصمت بنص أبيض. عند المرور بينعكسوا، والنص يفضل ظاهر في الحالتين. ===== */
body.theme-gulf #coursedetails-buttons-section .btn-primary-outline,
body.theme-gulf #coursedetails-buttons-section .menu-two{background:#10161f!important;border:1px solid #ea1a2d!important;color:#ea1a2d!important}
body.theme-gulf #coursedetails-buttons-section .btn-primary-outline:hover,
body.theme-gulf #coursedetails-buttons-section .menu-two:hover{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important}
body.theme-gulf #coursedetails-buttons-section .btn-primary{background:#ea1a2d!important;border:1px solid #ea1a2d!important;color:#fff!important}
body.theme-gulf #coursedetails-buttons-section .btn-primary:hover{background:#fff!important;border-color:#fff!important;color:#10161f!important}
/* قائمة "روابط سريعة" المنسدلة تحت نفس الشريط */
body.theme-gulf #coursedetails-buttons-section .dropdown-menu{background:#1b1f26!important;border:1px solid #ea1a2d!important;border-radius:0!important}
body.theme-gulf #coursedetails-buttons-section .dropdown-item{background:transparent!important;color:#e6e8ec!important}
body.theme-gulf #coursedetails-buttons-section .dropdown-item:hover{background:#ea1a2d!important;color:#fff!important}

/* --- training-courses fix ee280b0d8cb099f5d5ca3dbd74e87f01 --- */
/* الأقسام دي مصمّمة على خلفية فاتحة وبتاخدها من خلفية الصفحة نفسها. بعد ما الخلفية
   بقت داكنة (عشان الشريط الفاتح اللي كان بيبان تحت التذييل في الصفحات القصيرة)
   بقى نصّها غامق على غامق. فبنديها خلفيتها الفاتحة صراحةً بدل الاعتماد على الوراثة. */
body.theme-gulf .gf-tiles,
body.theme-gulf .gf-categories{background:#e9ebee}

/* --- training-courses fix 31a582852b65a2d18be5dbb5397432f5 --- */
html.theme-gulf{background:#1b1f26}

/* ============================================================
   الخليج — صفحة تفاصيل الدورة: صفحة مفرودة + كرت جدول عائم (2026-09-08)
   ------------------------------------------------------------
   بدل التبويبات: كل الأقسام تحت بعض، وشريط شرايح بينطّ بينهم، وكرت
   غامق على يمين البانر بيفضل لازق مع التمرير فيه كل موعد + مدينة + سعر.
   كل القواعد متقيّدة بـ .gf-cd (اللفّة اللي بتحطها نسخة الخليج من
   course_details حوالين البانر والمحتوى) لأن صفحة القائمة وصفحة التفاصيل
   بياخدوا نفس كلاسات الـbody بالحرف — من غيرها التنسيق كان هيسيح على الاتنين.
   ============================================================ */

/* --- شبكة العمودين --- */
body.theme-gulf .gf-cd-content .gf-cd-grid{display:flex;align-items:stretch;gap:34px}
body.theme-gulf .gf-cd-main{flex:1 1 auto;min-width:0}
body.theme-gulf .gf-cd-rail{flex:0 0 318px;width:318px;position:relative;z-index:6;margin-top:-210px}
body.theme-gulf .gf-cd-rail-inner{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ea1a2d #10161f}
body.theme-gulf .gf-cd-rail-inner::-webkit-scrollbar{width:6px}
body.theme-gulf .gf-cd-rail-inner::-webkit-scrollbar-track{background:#10161f}
body.theme-gulf .gf-cd-rail-inner::-webkit-scrollbar-thumb{background:#ea1a2d}

/* البانر بيفضي مكان للكرت على جنبه، ومساحة تحت عشان الكرت يركب على الفاضي */
body.theme-gulf .gf-cd #common-banner-section-image .common-banner-section-box{padding-inline-end:352px}
body.theme-gulf .gf-cd #common-banner-section-image .background-listing{padding-bottom:78px}

/* --- شريط الشرايح --- */
body.theme-gulf #coursedetails-content-section nav.gf-chips{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;padding:24px 0 16px;margin:0}
body.theme-gulf .gf-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 17px;border:1px solid rgba(255,255,255,.16);background:#1b1f26;color:#e6e8ec;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
body.theme-gulf .gf-chip:hover,body.theme-gulf .gf-chip:focus{background:#ea1a2d;border-color:#ea1a2d;color:#fff;text-decoration:none}
body.theme-gulf .gf-chip-n{font-size:10px;font-weight:700;color:#ea1a2d;letter-spacing:.1em}
body.theme-gulf .gf-chip:hover .gf-chip-n{color:#fff}

/* --- شريط الأزرار جوّه العمود الرئيسي --- */
body.theme-gulf .gf-cd-main #coursedetails-buttons-section{margin:0 0 22px}
body.theme-gulf .gf-cd-main #coursedetails-buttons-section .container{width:100%;max-width:none;padding:0}
body.theme-gulf .gf-cd-main #coursedetails-buttons-section .box2{background:#1b1f26;border-top:3px solid #ea1a2d;border-radius:0;box-shadow:none;padding:12px 14px;margin:0}
body.theme-gulf .gf-cd-main #coursedetails-buttons-section .custom-border{border:0}
body.theme-gulf .gf-cd-main .custom-outline-box-desktop{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.theme-gulf .gf-cd-main .custom-outline-box-desktop > *{float:none!important;margin:0!important}
body.theme-gulf .gf-cd-main .custom-outline-box-desktop .clearfix{display:none}
body.theme-gulf .gf-cd-main .custom-outline-box-desktop .btn{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
body.theme-gulf .gf-cd-main .custom-outline-box-desktop > form:last-of-type{margin-inline-start:auto!important}

/* --- كل الأقسام ظاهرة: مفيش تبويبات --- */
body.theme-gulf .gf-longform .tab-pane{display:block!important;opacity:1!important;visibility:visible!important;scroll-margin-top:120px}
body.theme-gulf .gf-cd-content .tab-content{padding:6px 30px 30px}
body.theme-gulf .gf-sec{border-top:1px solid rgba(255,255,255,.09);padding:30px 0 4px}
body.theme-gulf .gf-sec:first-child{border-top:0;padding-top:22px}
body.theme-gulf .gf-cd-content .tab-content h2.gf-sec-h{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff;margin:0 0 20px;line-height:1.3}
body.theme-gulf .gf-sec-n{flex:none;font-size:10.5px;font-weight:700;color:#ea1a2d;letter-spacing:.12em;border:1px solid rgba(234,26,45,.55);border-radius:999px;padding:3px 9px 2px;line-height:1.4}
body.theme-gulf .gf-cd-content .tab-content .gf-sec h6{color:#fff;font-weight:700;letter-spacing:.02em}
body.theme-gulf .gf-cd-content .tab-content .gf-sec a{color:#ff7a84}
body.theme-gulf .gf-cd-content .tab-content .gf-sec a:hover{color:#fff}

/* الجدول والرسوم: عمودين بدل تلاتة لأن العمود الرئيسي بقى أضيق */
/* (2026-09-09) kan 50% — wal-card nafsaha grid 1fr 150px 170px masmuma li-saf
   bi-3ard as-safha, fal-1fr kan biyib2a 75px wal-kalam biyitqatta3 harf harf.
   saf wahid bi-3ard kamil. */
body.theme-gulf .gf-sec-schedule .session-card-wrapper > [class*="col-"]{flex:0 0 100%!important;max-width:100%!important}
body.theme-gulf .gf-sec-schedule .year-heading{color:#fff!important}
body.theme-gulf .gf-sec-schedule .alert-info{background:#10161f!important;border:1px solid rgba(255,255,255,.12)!important;color:#c9ccd3!important}
body.theme-gulf .gf-sec-schedule .fees-box-right2-2022,body.theme-gulf .gf-sec-schedule .fees-box-right2-2022 p{color:#8d939d!important;font-size:12px}
body.theme-gulf .gf-sec-schedule .discount-link{color:#ff7a84!important}
body.theme-gulf .gf-sec-schedule .custom-text-no-course p,body.theme-gulf .gf-sec-schedule .session-card-wrapper > p{color:#c9ccd3!important}
body.theme-gulf .gf-sec-schedule .custom-head-additional{background:#10161f!important;border-inline-start:4px solid #ea1a2d!important}
body.theme-gulf .gf-sec-schedule .schedulehead-h4{color:#fff!important}

/* ==== الكرت العائم ==== */
body.theme-gulf .gf-rail-card{background:#080b0f;border:1px solid rgba(255,255,255,.11);border-top:4px solid #ea1a2d;box-shadow:0 28px 64px rgba(0,0,0,.6);padding:20px 20px 16px}
body.theme-gulf .gf-rail-head{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:13px}
body.theme-gulf .gf-rail-eyebrow{display:block;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#ea1a2d}
body.theme-gulf .gf-rail-title{display:block;margin-top:5px;font-size:16px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1.25}
body.theme-gulf .gf-rail-list{list-style:none;margin:0;padding:0}
body.theme-gulf .gf-rail-item{display:block;padding:13px 0 12px;border-bottom:1px solid rgba(255,255,255,.08)}
body.theme-gulf .gf-rail-date{display:block;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:.01em}
body.theme-gulf .gf-rail-where{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:11px;color:#a9adb6;letter-spacing:.03em}
body.theme-gulf .gf-rail-lang{display:inline-flex;align-items:center;gap:7px}
body.theme-gulf .gf-rail-lang::before{content:"";width:3px;height:3px;border-radius:50%;background:#ea1a2d;display:inline-block}
body.theme-gulf .gf-rail-item.is-virtual .gf-rail-city{color:#ea1a2d}
body.theme-gulf .gf-rail-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
body.theme-gulf .gf-rail-line form{margin:0}
body.theme-gulf .gf-rail-price{font-size:13px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap}
body.theme-gulf .gf-rail-btn{background:#ea1a2d!important;border:1px solid #ea1a2d!important;color:#fff!important;font-size:10px!important;font-weight:700!important;letter-spacing:.11em;text-transform:uppercase;padding:6px 14px 5px!important;border-radius:999px!important;line-height:1.3;white-space:nowrap;transition:background .2s,color .2s}
body.theme-gulf .gf-rail-btn:hover,body.theme-gulf .gf-rail-item:hover .gf-rail-btn{background:#fff!important;color:#ea1a2d!important}
body.theme-gulf .gf-rail-closed{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8d939d;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px}
body.theme-gulf .gf-rail-more{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding:10px 14px;background:#ea1a2d;color:#fff!important;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .2s}
body.theme-gulf .gf-rail-more:hover{background:#fff;color:#10161f!important;text-decoration:none}
body.theme-gulf .gf-rail-more .bi{font-size:17px;line-height:1}
body.theme-gulf .gf-rail-note{margin:11px 0 0;font-size:10px;line-height:1.6;color:#727984;letter-spacing:.03em}
body.theme-gulf .gf-rail-empty{margin:14px 0 0;font-size:12px;color:#a9adb6;line-height:1.7}

/* كتلة التواصل تحت الكرت */
body.theme-gulf .gf-cd-rail .inst-cra{position:static!important;display:block!important;max-width:none!important;background:#1b1f26!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:0!important;box-shadow:none!important;margin:14px 0 0!important;padding:15px 18px!important}
body.theme-gulf .gf-cd-rail .inst-cra-head{border:0!important;border-bottom:1px solid rgba(255,255,255,.09)!important;padding:0 0 11px!important;margin-bottom:11px}
body.theme-gulf .gf-cd-rail .inst-cra-head strong{color:#fff!important;font-size:12.5px}
body.theme-gulf .gf-cd-rail .inst-cra-head span{color:#8d939d!important;font-size:10.5px}
body.theme-gulf .gf-cd-rail .inst-cra-head > .bi{color:#ea1a2d!important;font-size:1.5rem}
body.theme-gulf .gf-cd-rail .inst-cra-list{display:block!important}
body.theme-gulf .gf-cd-rail .inst-cra-list li{margin-bottom:7px;font-size:11.5px}
body.theme-gulf .gf-cd-rail .inst-cra-list li:last-child{margin-bottom:0}
body.theme-gulf .gf-cd-rail .inst-cra-list li .bi{color:#ea1a2d!important}
body.theme-gulf .gf-cd-rail .inst-cra-list a{color:#c9ccd3!important}
body.theme-gulf .gf-cd-rail .inst-cra-list a:hover{color:#fff!important}

/* --- شاشات أضيق: الكرت بينزل فوق المحتوى بعرض كامل --- */
@media (max-width:1199px){
	body.theme-gulf .gf-cd-content .gf-cd-grid{flex-direction:column;gap:0}
	body.theme-gulf .gf-cd-rail{flex:none;width:100%;margin-top:20px;order:-1}
	body.theme-gulf .gf-cd-rail-inner{position:static}
	body.theme-gulf .gf-cd #common-banner-section-image .common-banner-section-box{padding-inline-end:0}
	body.theme-gulf .gf-cd #common-banner-section-image .background-listing{padding-bottom:20px}
	body.theme-gulf .gf-rail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
	body.theme-gulf .gf-cd-content .tab-content{padding:6px 18px 24px}
}
@media (max-width:767px){
	body.theme-gulf .gf-rail-list{grid-template-columns:1fr}
	body.theme-gulf .gf-chips{gap:6px;padding:18px 0 12px}
	body.theme-gulf .gf-chip{padding:7px 13px;font-size:10.5px}
}

/* --- قسم التعلّم الافتراضي / الحضوري جوّه الصفحة المفرودة ---
   الكاروسيل بيحسب عدد الكروت من عرض النافذة مش من عرض الحاوية، فجوّه العمود
   الرئيسي الأضيق كان بيحشر 6 كروت في 725px. هنا بنفرده شبكة تلات أعمدة:
   الـstage مجرد div، فـdisplay:grid مع transform:none بيلغي الانزلاق بأمان. */
body.theme-gulf .gf-sec .common-slider .owl-stage{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:auto!important;transform:none!important;transition:none!important}
body.theme-gulf .gf-sec .common-slider .owl-item{width:auto!important;margin:0!important;float:none!important}
body.theme-gulf .gf-sec .common-slider .owl-nav,body.theme-gulf .gf-sec .common-slider .owl-dots{display:none!important}
body.theme-gulf .gf-sec .common-slider .owl-stage-outer{overflow:visible}
body.theme-gulf .gf-sec .courselisting,body.theme-gulf .gf-sec .courselisting-normal,body.theme-gulf .gf-sec .courselisting-normal.virtual{background:#10161f!important;border:1px solid rgba(255,255,255,.1)!important;border-top:3px solid #ea1a2d!important;border-radius:0!important;box-shadow:none!important;color:#e6e8ec!important;overflow:hidden}
body.theme-gulf .gf-sec .courselisting .course-title{color:#fff!important;font-size:13px;padding:10px 12px 0}
body.theme-gulf .gf-sec .courselisting .course-date,body.theme-gulf .gf-sec .courselisting .course-language,body.theme-gulf .gf-sec .courselisting .course-time{color:#a9adb6!important;padding:0 12px}
body.theme-gulf .gf-sec .courselisting i.bi{color:#ea1a2d!important}
body.theme-gulf .gf-sec .courselisting .course-image{border:0!important;border-radius:0!important;background:#10161f}
body.theme-gulf .gf-sec .courselisting .btn{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0!important;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:10px 12px 12px;width:calc(100% - 24px)}
body.theme-gulf .gf-sec .courselisting .btn:hover{background:#fff!important;border-color:#fff!important;color:#10161f!important}

/* بطاقات الجدول: زرار التسجيل جهة النهاية زي بقية الكرت */
body.theme-gulf .gf-sec-schedule .session-card .text-end{text-align:end}
body.theme-gulf .gf-sec-schedule .session-card .text-end form{display:inline-block}

/* كروت الكاروسيل اسمها .courselisting-normal مش .courselisting — الزرار محتاج نفس القاعدة */
body.theme-gulf .gf-sec .courselisting-normal .btn{background:#ea1a2d!important;border-color:#ea1a2d!important;color:#fff!important;border-radius:0!important;font-size:11px!important;font-weight:700!important;letter-spacing:.07em;text-transform:uppercase}
body.theme-gulf .gf-sec .courselisting-normal:hover .btn{background:#fff!important;border-color:#fff!important;color:#10161f!important}
body.theme-gulf .gf-sec .courselisting-normal .course-title{color:#fff!important}
body.theme-gulf .gf-sec .courselisting-normal .course-image img{filter:grayscale(1);transition:filter .35s}
body.theme-gulf .gf-sec .courselisting-normal:hover .course-image img{filter:grayscale(0)}

/* رابط "كل المواعيد" — العدد في شارة منفصلة عشان ما يختلطش اتجاهه مع النص العربي */
body.theme-gulf .gf-rail-more-t{flex:1 1 auto}
body.theme-gulf .gf-rail-more-n{flex:none;background:rgba(0,0,0,.28);border-radius:999px;padding:2px 8px;font-size:10px;letter-spacing:.04em}
body.theme-gulf .gf-rail-more:hover .gf-rail-more-n{background:rgba(0,0,0,.12)}

/* ============================================================
   الخليج — DARK DOSSIER: الصفحات الداخلية المشتركة (2026-09-08)
   ------------------------------------------------------------
   عن المعهد / العملاء / الأسئلة الشائعة / التنزيلات / الدورات العامة /
   الدورات الداخلية / اتصل بنا / العمود الجانبي للنماذج.

   الاتجاه: ملف سرّي داكن. ألواح بعرض الصفحة، مفيش ولا بطاقة بيضا — ولا بطاقة
   أصلًا: كل الفواصل خطوط شعرة أو خطوط حمراء رفيعة. أرقام كبيرة بتشتغل كعلامات
   أقسام، وكل حاجة على بداية السطر (start) مع مسافات رأسية واسعة.

   الطبقات القديمة (.inst-about / .inst-faq / .inst-pub / .inst-clients /
   .inst-dl / .inst-ih / .inst-contact-* / .inst-form-side) اتسابت مكانها من غير
   أي تعديل: قوالب الخليج بقت بأسماء .gfd-* جديدة، فالقواعد القديمة ببساطة ما
   بتلاقيش عناصر تنطبق عليها على الموقع ده، وباقي المعاهد ما اتأثرتش.
   ============================================================ */

body.theme-gulf {
    --gfd-bg: #0a0d12;
    --gfd-line: rgba(255, 255, 255, .11);
    --gfd-rule: rgba(234, 26, 45, .85);
    --gfd-red: #ea1a2d;
    --gfd-mute: #99a1ad;
    --gfd-dim: #7c8492;
}

/* ── اللوح: خلفية داكنة بعرض الصفحة ومسافة رأسية واسعة ─────── */
body.theme-gulf .gfd {
    background: var(--gfd-bg);
    color: #fff;
    padding: 74px 0 88px;
}

/* اتصل بنا بيركب على #common-listing-section اللي ليه قاعدة بـid أعلى تخصيصًا */
body.theme-gulf.pg-training-courses #common-listing-section.gfd-contact {
    background: var(--gfd-bg);
    padding: 70px 0 84px;
}

/* ── الأرقام الكبيرة: علامات الأقسام ───────────────────────── */
body.theme-gulf .gfd-n {
    display: block;
    font-size: clamp(2.1rem, 4vw, 3.2rem);
    font-weight: 200;
    line-height: .85;
    letter-spacing: -.03em;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-n-lg {
    font-size: clamp(3.2rem, 6.5vw, 5.4rem);
    line-height: .8;
}

/* ── عناوين الأقسام: كلها على بداية السطر ──────────────────── */
/* كل عنوان قسم بيقف على خط أحمر 2px بيمتد بعرض الحاوية — نفس نبرة رؤوس ملفات
   الأسئلة الشائعة، وهو كمان الخط الأول لأول صف تحته (عشان كده أول صف من غير خط). */
body.theme-gulf .gfd-h {
    margin: 0;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-h-t {
    display: block;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}

/* ── الشريط الأفقي الواحد: رؤية/رسالة/قيم ومزايا الدورات العامة ──
   مش تلات كروت — شريط واحد بين خطين شعرة، متقسّم بخطوط رأسية. */
body.theme-gulf .gfd-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--gfd-line);
    border-bottom: 1px solid var(--gfd-line);
    margin: 0 0 76px;
}

body.theme-gulf .gfd-strip-cell {
    padding: 40px 36px 44px;
    border-inline-start: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-strip-cell:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

body.theme-gulf .gfd-strip-icon {
    display: block;
    margin: 24px 0 18px;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--gfd-red);
}

body.theme-gulf .gfd-strip-t {
    margin: 0 0 13px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
}

body.theme-gulf .gfd-strip-d {
    margin: 0;
    max-width: 36ch;
    font-size: .95rem;
    line-height: 1.85;
    color: var(--gfd-mute);
}

/* ── الصفوف: "ماذا نقدّم" والتنزيلات وخطوات الدورات الداخلية ──
   خط أحمر رفيع بين كل صف والتاني، مفيش صناديق. */
body.theme-gulf .gfd-rows {
    margin: 0 0 46px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 28px;
    padding-block: 30px;
    padding-inline: 0 6px;
    border-top: 1px solid var(--gfd-rule);
    color: inherit;
    text-decoration: none !important;
    transition: background .22s ease, padding-inline-start .22s ease;
}

body.theme-gulf .gfd-rows > .gfd-row:first-child { border-top: 0; }

body.theme-gulf .gfd-row-static { grid-template-columns: auto minmax(0, 1fr); }

body.theme-gulf a.gfd-row:hover,
body.theme-gulf a.gfd-row:focus {
    background: rgba(234, 26, 45, .07);
    padding-inline-start: 16px;
}

body.theme-gulf .gfd-row-n {
    min-width: 2.3em;
    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(234, 26, 45, .55);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-row-static .gfd-row-n {
    align-self: start;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 200;
    color: var(--gfd-red);
}

body.theme-gulf a.gfd-row:hover .gfd-row-n { color: var(--gfd-red); }

body.theme-gulf .gfd-row-icon {
    font-size: 1.45rem;
    line-height: 1;
    color: var(--gfd-red);
}

body.theme-gulf .gfd-row-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

body.theme-gulf .gfd-row-body strong {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    line-height: 1.35;
}

body.theme-gulf .gfd-row-body > span {
    max-width: 84ch;
    font-size: .94rem;
    line-height: 1.75;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-row-arrow {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--gfd-red);
    transition: transform .22s ease;
}

body.theme-gulf a.gfd-row:hover .gfd-row-arrow { transform: translateX(7px); }
body[dir="rtl"].theme-gulf a.gfd-row:hover .gfd-row-arrow { transform: translateX(-7px); }

/* ── فهرس القطاعات (العملاء): عمودين، كل بند سطر بخط شعرة ──── */
body.theme-gulf .gfd-index {
    list-style: none;
    margin: 0 0 46px;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    column-gap: 64px;
}

body.theme-gulf .gfd-index-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0 20px;
    padding: 19px 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-index-n {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-index-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255, 255, 255, .45);
}

body.theme-gulf .gfd-index-t {
    font-size: 1rem;
    letter-spacing: .02em;
    color: #fff;
}

/* ── الأسئلة الشائعة: كل مجموعة ملف برقم كبير وأسئلة بخطوط شعرة ── */
body.theme-gulf .gfd-file { margin: 0 0 64px; }

body.theme-gulf .gfd-file-head {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-file-t {
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
}

body.theme-gulf .gfd-qa-item { border-bottom: 1px solid var(--gfd-line); }

body.theme-gulf .gfd-qa-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 22px 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.55;
    color: #fff;
}

body.theme-gulf .gfd-qa-item summary::-webkit-details-marker { display: none; }
body.theme-gulf .gfd-qa-item summary::marker { content: ''; }

body.theme-gulf .gfd-qa-mark {
    flex: none;
    font-size: .95rem;
    color: var(--gfd-red);
    transition: transform .25s ease;
}

body.theme-gulf .gfd-qa-item[open] .gfd-qa-mark { transform: rotate(45deg); }
body.theme-gulf .gfd-qa-item[open] .gfd-qa-q { color: var(--gfd-red); }

body.theme-gulf .gfd-qa-a { padding: 0 0 26px; max-width: 82ch; }

body.theme-gulf .gfd-qa-a p {
    margin: 0;
    font-size: .96rem;
    line-height: 1.9;
    color: var(--gfd-mute);
}

/* ── شروط التسجيل: صفوف مرقّمة بخط أحمر رفيع بينها ─────────── */
body.theme-gulf .gfd-terms {
    margin: 0 0 46px;
    border-bottom: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-term {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 28px;
    padding: 30px 0;
    border-top: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-terms > .gfd-term:first-child { border-top: 0; }

body.theme-gulf .gfd-term-n {
    grid-row: 1 / 3;
    min-width: 2.3em;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 200;
    line-height: .9;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-term dt {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

body.theme-gulf .gfd-term dd {
    margin: 0;
    max-width: 92ch;
    font-size: .95rem;
    line-height: 1.85;
    color: var(--gfd-mute);
}

/* ── مزايا الدورات الداخلية: أسطر بخطوط شعرة، من غير كبسولات ── */
body.theme-gulf .gfd-checks {
    list-style: none;
    margin: 0 0 46px;
    padding: 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-checks li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 20px;
    padding: 21px 0;
    border-top: 1px solid var(--gfd-line);
    font-size: 1.02rem;
    line-height: 1.7;
    color: #fff;
}

body.theme-gulf .gfd-checks > li:first-child { border-top: 0; }

body.theme-gulf .gfd-checks li .bi {
    font-size: 1.05rem;
    color: var(--gfd-red);
}

/* ── شريط الدعوة في نهاية كل صفحة ──────────────────────────── */
body.theme-gulf .gfd-cta,
body.theme-gulf .gfd-band {
    display: flex;
    align-items: center;
    gap: 16px 26px;
    flex-wrap: wrap;
}

body.theme-gulf .gfd-band { justify-content: space-between; }

body.theme-gulf .gfd-band-t {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #fff;
}

/* ── التنزيلات: كتلة "اطلب الكتيب" شريط بعرض الصفحة ────────── */
body.theme-gulf .gfd-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px 44px;
}

body.theme-gulf .gfd-ask-h {
    margin: 0 0 12px;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.35;
}

body.theme-gulf .gfd-ask-copy p {
    margin: 0;
    max-width: 56ch;
    line-height: 1.85;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-ask-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── الأزرار: مربّعة، عكس كبسولات الثيم، عشان تتماشى مع الخطوط ── */
body.theme-gulf .gfd-btn {
    border-radius: 0 !important;
    background: var(--gfd-red) !important;
    border: 1px solid var(--gfd-red) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 15px 32px !important;
    line-height: 1.3;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body.theme-gulf .gfd-btn:hover,
body.theme-gulf .gfd-btn:focus {
    background: transparent !important;
    color: var(--gfd-red) !important;
}

body.theme-gulf .gfd-btn-ghost {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .32) !important;
    color: #fff !important;
}

body.theme-gulf .gfd-btn-ghost:hover,
body.theme-gulf .gfd-btn-ghost:focus {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--gfd-bg) !important;
}

body.theme-gulf .gfd-btn .bi { margin-inline-end: 7px; }

/* ── مقدمة البانر (عن المعهد / العملاء) ────────────────────── */
body.theme-gulf .gfd-intro {
    display: block;
    text-align: start;
    max-width: 86ch;
}

body.theme-gulf .gfd-intro-rule {
    display: block;
    width: 54px;
    height: 2px;
    background: #fff;
    margin: 4px 0 16px;
}

body.theme-gulf .gfd-intro-text {
    display: block;
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: .01em;
}

/* ── اتصل بنا: عمودين مفصولين بخط شعرة، حقول بخط سفلي واحد ─── */
body.theme-gulf .gfd-cform .box4 {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.theme-gulf .gfd-cform h5 {
    margin: 0 0 6px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--gfd-red);
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}

body.theme-gulf .gfd-cform .form-control {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    height: auto !important;
    padding: 12px 2px !important;
}

body.theme-gulf .gfd-cform .form-control::placeholder {
    color: var(--gfd-dim);
    font-size: .88rem;
    letter-spacing: .07em;
}

body.theme-gulf .gfd-cform .form-control:focus {
    border-bottom-color: var(--gfd-red) !important;
    outline: 0;
}

body.theme-gulf .gfd-cform textarea.form-control { min-height: 118px; }

body.theme-gulf .gfd-cinfo { border-inline-start: 1px solid var(--gfd-line); }

body.theme-gulf .gfd-cinfo-inner { padding-inline-start: 40px; }

body.theme-gulf .gfd-cinfo-h {
    margin: 0 0 16px;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}

body.theme-gulf .gfd-cinfo-lead {
    margin: 0 0 34px;
    max-width: 58ch;
    line-height: 1.85;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-cinfo-list {
    list-style: none;
    margin: 0 0 34px;
    padding: 0;
    border-top: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-cinfo-list li {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0 20px;
    padding: 17px 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-cinfo-n {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-cinfo-icon {
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255, 255, 255, .5);
}

body.theme-gulf .gfd-cinfo-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.theme-gulf .gfd-cinfo-body b {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-cinfo-body a,
body.theme-gulf .gfd-cinfo-body > span {
    font-size: .98rem;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
}

body.theme-gulf .gfd-cinfo-body a:hover { color: var(--gfd-red); }

body.theme-gulf .gfd-cinfo-links { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── العمود الجانبي للنماذج (تسجيل / طلب دورة داخلية) ──────── */
body.theme-gulf .gfd-side-inner {
    padding-top: 22px;
    border-top: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-side-h {
    margin: 0 0 18px;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
}

body.theme-gulf .gfd-side-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    border-top: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-side-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-side-list li .bi { flex: none; font-size: 1rem; color: var(--gfd-red); }

body.theme-gulf .gfd-side-list a {
    font-size: .9rem;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
}

body.theme-gulf .gfd-side-list a:hover { color: var(--gfd-red); }

body.theme-gulf .gfd-side-h6 {
    margin: 0 0 12px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-side-steps { list-style: none; margin: 0; padding: 0; }

body.theme-gulf .gfd-side-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gfd-line);
    font-size: .89rem;
    line-height: 1.75;
    color: #c2c8d2;
}

body.theme-gulf .gfd-side-n {
    font-size: 1rem;
    font-weight: 300;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

/* ── شاشات أضيق ────────────────────────────────────────────── */
@media (max-width: 991px) {
    body.theme-gulf .gfd { padding: 54px 0 62px; }
    body.theme-gulf.pg-training-courses #common-listing-section.gfd-contact { padding: 50px 0 58px; }
    body.theme-gulf .gfd-strip { grid-template-columns: 1fr; margin-bottom: 54px; }
    body.theme-gulf .gfd-strip-cell {
        padding: 30px 0 32px;
        border-inline-start: 0;
        border-top: 1px solid var(--gfd-line);
    }
    body.theme-gulf .gfd-strip-cell:first-child { border-top: 0; }
    body.theme-gulf .gfd-strip-d { max-width: none; }
    body.theme-gulf .gfd-index {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
        body.theme-gulf .gfd-rows,
    body.theme-gulf .gfd-terms,
    body.theme-gulf .gfd-checks,
    body.theme-gulf .gfd-index { margin-bottom: 38px; }
    body.theme-gulf .gfd-ask { grid-template-columns: 1fr; }
    body.theme-gulf .gfd-cinfo {
        border-inline-start: 0;
        border-top: 1px solid var(--gfd-line);
        margin-top: 44px;
        padding-top: 40px;
    }
    body.theme-gulf .gfd-cinfo-inner { padding-inline-start: 0; }
}

@media (max-width: 575px) {
    body.theme-gulf .gfd-row { gap: 0 16px; padding-block: 24px; }
    body.theme-gulf .gfd-row-icon { display: none; }
    body.theme-gulf .gfd-row-body strong { font-size: 1rem; }
    body.theme-gulf .gfd-term { gap: 6px 16px; }
    body.theme-gulf .gfd-index-item { gap: 0 14px; }
    body.theme-gulf .gfd-file-head { gap: 16px; }
    body.theme-gulf .gfd-band { align-items: flex-start; }
}

/* --- DARK DOSSIER: تصحيحات بعد المعاينة (2026-09-08) --- */

/* زر الإرسال في اتصل بنا <input type="submit">: قاعدة الكبسولات في الثيم بتمسكه
   بمحدِّد أعلى (body.theme-gulf input:not([type=checkbox]):not([type=radio]))،
   فمحتاج محدِّد بنفس الوزن عشان يبقى مربّع زي بقية أزرار الملف. */
body.theme-gulf input.gfd-btn[type="submit"] {
    border-radius: 0 !important;
    background: var(--gfd-red) !important;
    border: 1px solid var(--gfd-red) !important;
    color: #fff !important;
    padding: 15px 34px !important;
    width: auto !important;
    height: auto !important;
}

body.theme-gulf input.gfd-btn[type="submit"]:hover,
body.theme-gulf input.gfd-btn[type="submit"]:focus {
    background: transparent !important;
    color: var(--gfd-red) !important;
}

/* العمود الجانبي بيفضل عمود بوتستراب عادي (مفيش خلفية ولا padding خاص بيه)،
   والمسافة فوق بس عشان يبدأ مع أول بلوك في النموذج. */
body.theme-gulf .gfd-side { padding-top: 26px; }

@media (max-width: 767px) {
    body.theme-gulf .gfd-side { padding-top: 34px; }
}

/* حقول اتصل بنا: نظام الكبسولات في الثيم بيديها border-radius:999px بمحدِّد أعلى
   من قاعدة .gfd-cform، والنتيجة إن الخط السفلي بيتقوّس من الطرفين. المحدِّد ده
   بنفس وزن قاعدة الكبسولة + كلاس زيادة، فبيرجّع الخط مستقيم. */
body.theme-gulf .gfd-cform input:not([type="checkbox"]):not([type="radio"]),
body.theme-gulf .gfd-cform textarea,
body.theme-gulf .gfd-cform select {
    border-radius: 0 !important;
}

/* ============================================================
   DARK DOSSIER — تصحيح "ماذا نقدّم" (2026-09-08)

   المراجعة الخارجية لقت إن نمط "رقم + أيقونة + عنوان بحروف كبيرة في عمود ضيّق
   + وصف جنبه + سهم في الطرف" اتكرر على خمس مواقع. فالبلوك ده اتشال من صفوف
   .gfd-rows بعرض الشاشة وبقى شبكة داكنة من تلات أعمدة بأرقام ضخمة ومن غير أي
   أسهم. .gfd-rows نفسها سابت مكانها زي ما هي عشان التنزيلات وخطوات الدورات
   الداخلية لسه شغالة بيها.

   كله منطقي-الاتجاه (border-inline / margin-inline / text-align:start) عشان
   النسخة العربية RTL تقلب من غير أي قاعدة إضافية.
   ============================================================ */

body.theme-gulf .gfd-offers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 46px;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-offer {
    display: block;
    position: relative;
    padding: 38px 32px 44px;
    border-inline-start: 1px solid var(--gfd-line);
    color: inherit;
    text-align: start;
    text-decoration: none !important;
    transition: background .22s ease;
}

body.theme-gulf .gfd-offer:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

body.theme-gulf a.gfd-offer:hover,
body.theme-gulf a.gfd-offer:focus { background: rgba(234, 26, 45, .07); }

/* الرقم الضخم هو علامة العمود — رمادي باهت، وبيولّع أحمر مع المرور. */
body.theme-gulf .gfd-offer-n {
    display: block;
    margin: 0 0 14px;
    font-size: clamp(3rem, 6vw, 4.6rem);
    font-weight: 200;
    line-height: .8;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .16);
    font-variant-numeric: tabular-nums;
    transition: color .22s ease;
}

body.theme-gulf a.gfd-offer:hover .gfd-offer-n,
body.theme-gulf a.gfd-offer:focus .gfd-offer-n { color: var(--gfd-red); }

body.theme-gulf .gfd-offer-icon {
    display: block;
    margin: 0 0 16px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gfd-red);
}

body.theme-gulf .gfd-offer-t {
    display: block;
    margin: 0 0 11px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
}

body.theme-gulf .gfd-offer-d {
    display: block;
    max-width: 36ch;
    font-size: .95rem;
    line-height: 1.85;
    color: var(--gfd-mute);
}

/* العربية مالهاش حروف كبيرة، فالـuppercase/letter-spacing بيوسّعوا الكلمات
   من غير فايدة — بيتشالوا زي باقي عناوين الخليج العربية. */
body[dir="rtl"].theme-gulf .gfd-offer-t {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.05rem;
}

@media (max-width: 991px) {
    body.theme-gulf .gfd-offers {
        grid-template-columns: 1fr;
        margin-bottom: 38px;
    }
    body.theme-gulf .gfd-offer {
        padding: 28px 0 30px;
        border-inline-start: 0;
        border-top: 1px solid var(--gfd-line);
    }
    body.theme-gulf .gfd-offer:first-child { border-top: 0; }
    body.theme-gulf .gfd-offer-d { max-width: none; }
}

/* --- training-courses fix f9f0736578fa78f582546a6dab4fd045 --- */
/* الخليج: بلاطات داكنة، كل شعار على رقاقة بيضا وخط أحمر فوق البلاطة */
body.theme-gulf .inst-logos{background:#10161f}
body.theme-gulf .inst-logos-h{color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:1.1rem}
body.theme-gulf .inst-logos-h::after{content:'';display:block;width:52px;height:3px;background:#ea1a2d;margin-top:10px}
body.theme-gulf .inst-logos-grid{gap:10px}
body.theme-gulf .inst-logos-item{background:#1b1f26;border-top:3px solid #ea1a2d;border-radius:0;min-height:100px}
body.theme-gulf .inst-logos-item img{background:#fff;padding:8px;border-radius:2px}

/* --- training-courses fix d2adf91d01bf9f937a439ae9bbc87332 --- */
/* الخليج: مفيش بطاقة — صف بعرض الجدول بأعمدة مفصولة بخطوط رفيعة، زي قوائم الدورات عنده. */
body.theme-gulf.pg-training-courses .session-card{display:grid!important;grid-template-columns:1fr 150px 170px;align-items:center;gap:0!important;padding:0!important;border:0!important;border-top:1px solid #2a2f38!important;border-radius:0!important;box-shadow:none!important;transform:none!important}
body.theme-gulf.pg-training-courses .session-card:hover{transform:none!important;box-shadow:none!important;background:#1b1f26!important}
body.theme-gulf.pg-training-courses .session-card > ul{width:100%!important;margin:0!important;padding:14px 16px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
body.theme-gulf.pg-training-courses .session-card .price-box{position:static!important;padding:14px 12px!important;border:0!important;border-inline-start:1px solid #2a2f38!important;border-radius:0!important;background:transparent!important;text-align:center}
body.theme-gulf.pg-training-courses .session-card > form{padding:0 16px}

/* ============================================================
   الخليج — صفحات القوائم: سجل صفوف داكن
   ------------------------------------------------------------
   لغة عرض واحدة لأربع صفحات (التصنيفات، المدن، المقالات،
   المدونات). قسم داكن بعرض الشاشة، وكل مُدخل صف كامل العرض:
   رقم شبحي ضخم على جهة البداية، العنوان، وخط أحمر رفيع تحت
   الصف. مفيش بطاقات ولا صور ولا زوايا مدوّرة — المرور بالماوس
   بيغسل الصف كله.

   الرقم من عدّاد CSS مش من PHP: الصفوف اللي بتيجي من "تحميل
   المزيد" بتكمّل الترقيم من غير ما السيرفر يعرف كام صف فات.
   ============================================================ */

body.theme-gulf .gfl-sec {
    background: #0d1218 !important;
    padding: 52px 0 78px !important;
    border: 0;
}

body.theme-gulf .gfl-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

/* السجل بيبدأ بخط زي ما بينتهي بخط، فأول صف مش بيبان سايب. */
body.theme-gulf .gfl-list {
    counter-reset: gfl;
    border-top: 1px solid rgba(234, 26, 45, .62);
}

body.theme-gulf a.gfl-row {
    counter-increment: gfl;
    display: grid;
    grid-template-columns: minmax(0, 5.4rem) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    column-gap: 26px;
    padding: 24px 18px;
    /* الغسلة بتطلع بره حدود النص شوية عشان تقرأ كصف مش كخلفية كلمة. */
    margin-inline: -18px;
    border: 0;
    border-bottom: 1px solid rgba(234, 26, 45, .62);
    border-radius: 0;
    text-decoration: none;
    color: #fff;
    transition: background .2s ease, border-bottom-color .2s ease;
}

body.theme-gulf a.gfl-row:hover,
body.theme-gulf a.gfl-row:focus,
body.theme-gulf a.gfl-row:focus-visible {
    background: rgba(234, 26, 45, .1);
    border-bottom-color: #ea1a2d;
    color: #fff;
    text-decoration: none;
}

/* --- الرقم الشبحي --- */
body.theme-gulf .gfl-n {
    display: block;
    align-self: center;
    text-align: start;
    font-size: clamp(2.3rem, 4.4vw, 3.5rem);
    font-weight: 200;
    line-height: .85;
    letter-spacing: -.05em;
    color: rgba(255, 255, 255, .13);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}

body.theme-gulf .gfl-n::before {
    content: counter(gfl, decimal-leading-zero);
}

body.theme-gulf a.gfl-row:hover .gfl-n,
body.theme-gulf a.gfl-row:focus .gfl-n {
    color: rgba(234, 26, 45, .8);
}

/* --- جسم الصف --- */
body.theme-gulf .gfl-body {
    display: block;
    min-width: 0;
}

body.theme-gulf .gfl-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6f7986;
}

body.theme-gulf .gfl-title {
    display: block;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    overflow-wrap: anywhere;
}

body.theme-gulf .gfl-sub {
    display: block;
    margin-top: 7px;
    max-width: 78ch;
    font-size: .89rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    text-transform: none;
    color: #99a1ac;
    overflow-wrap: anywhere;
}

/* --- العمود الجانبي: التاريخ فوق الدعوة --- */
body.theme-gulf .gfl-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    min-width: 0;
}

body.theme-gulf .gfl-meta {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6f7986;
    white-space: nowrap;
}

body.theme-gulf .gfl-go {
    display: block;
    margin-top: 7px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ea1a2d;
    white-space: nowrap;
}

body.theme-gulf .gfl-go::after {
    content: "\2192";
    display: inline-block;
    margin-inline-start: 9px;
    transition: transform .2s ease;
}

body[dir="rtl"].theme-gulf .gfl-go::after { content: "\2190"; }

body.theme-gulf a.gfl-row:hover .gfl-go::after { transform: translateX(5px); }
body[dir="rtl"].theme-gulf a.gfl-row:hover .gfl-go::after { transform: translateX(-5px); }

/* العربية مالهاش حروف كبيرة، فالـuppercase مالوش معنى واللي بيعمله
   إن letter-spacing بيفكّك الكلمة — بيتشال زي باقي عناوين الخليج العربية. */
body[dir="rtl"].theme-gulf .gfl-title,
body[dir="rtl"].theme-gulf .gfl-kicker,
body[dir="rtl"].theme-gulf .gfl-meta,
body[dir="rtl"].theme-gulf .gfl-go {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfl-title { font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

/* --- حالات فاضية / تحميل --- */
body.theme-gulf .gfl-empty {
    margin: 0;
    padding: 30px 0;
    color: #99a1ac;
    font-size: .95rem;
}

body.theme-gulf .gfl-loading {
    padding-top: 26px;
    text-align: center;
}

/* --- الشاشات الصغيّرة: الرقم فضل مكانه، والعمود الجانبي نزل تحت النص --- */
@media (max-width: 767px) {
    body.theme-gulf .gfl-sec { padding: 34px 0 52px !important; }
    body.theme-gulf .gfl-wrap { padding: 0 16px; }

    body.theme-gulf a.gfl-row {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        align-items: start;
        column-gap: 14px;
        /* على الموبايل الغسلة بتوصل لحافة الشاشة نفسها بدل ما تسيب شريحة
           رفيعة جنبها، والنص فاضل على نفس هامش باقي الصفحة. */
        padding: 18px 16px;
        margin-inline: -16px;
    }

    body.theme-gulf .gfl-n {
        font-size: 2.05rem;
        padding-top: 2px;
    }

    body.theme-gulf .gfl-side {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        text-align: start;
        margin-top: 11px;
        gap: 6px 16px;
    }

    body.theme-gulf .gfl-go { margin-top: 0; }
    body.theme-gulf .gfl-sub { font-size: .86rem; line-height: 1.7; }
}

/* ── (2026-09-09) صفحة الدورة على الموبايل ──────────────────────
   الأصل بيخبّي كتلة الديسكتوب ويرجّع أكورديون بوتستراب العام، فبيضيع
   شكل الثيم ويتخبّى المحتوى. تخطيط الثيم ده عمود واحد وعنده قواعده
   للشاشات الصغيرة، فبنعرضه هو. متقيّد بالثيم — المعهد زي ما هو.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    body.theme-gulf.pg-training-courses #coursedetails-content-section .coursedetails-content-section-desktop { display: block; }
    body.theme-gulf.pg-training-courses #coursedetails-content-section .coursedetails-content-section-mobile { display: none; }
    body.theme-gulf.pg-training-courses .coursedetails-content-section-desktop { margin-inline: 0; }
}

/* (2026-09-09) قاعدة الـ50% فوق مكتوبة بـ!important لتخطيط الديسكتوب،
   وبقت تخرج برّه الشاشة لمّا المحتوى المتصل بقى يظهر على التليفون.
   عمود واحد على الشاشات الصغيرة. */
@media (max-width: 767px) {
    body.theme-gulf .gf-sec-schedule .session-card-wrapper > [class*="col-"] {
        flex: 0 0 100% !important; max-width: 100% !important;
    }
}
/* كروت التعلّم الافتراضي في نفس القسم بتفضل بعرض الديسكتوب فبيفيض
   منها 2px على 390. قصّ الحاوية بيخلّي الصف يتزحلق جوّه نفسه. */
@media (max-width: 767px) {
    body.theme-gulf .gf-sec .row.session-card-wrapper,
    body.theme-gulf .gf-sec .courselisting-normal { max-width: 100%; }
    body.theme-gulf .gf-sec { overflow-x: clip; }
}

/* ============================================================
   الخليج — اتصل بنا: شاشة منقسمة نصّين بعرض الصفحة (2026-09-09)
   ------------------------------------------------------------
   ليه كده: كل المعاهد التانية بتحط الفورم وبطاقة البيانات جنب بعض جوّه
   container واحد. الخليج نظامه ألواح بعرض الصفحة وخطوط بدل صناديق، فالصفحة
   هنا مالهاش container خالص: نص فحمي ونص أبيض، والحدّ بينهم شريط أحمر رفيع.

   القواعد كلها مضافة في آخر الملف ومتقيّدة بـ.gfx-* عشان ما تلمسش أي صفحة
   تانية ولا أي ثيم. طبقات .gfd-cform / .gfd-cinfo القديمة سابتها زي ما هي —
   الصفحة بقت بأسماء جديدة فالقواعد القديمة ما بتلاقيش عناصر تنطبق عليها.
   ============================================================ */

body.theme-gulf .gfx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    background: #fff;
}

body.theme-gulf .gfx-half {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: clamp(52px, 6vw, 96px) clamp(20px, 4.5vw, 80px);
}

body.theme-gulf .gfx-half--dark {
    background: var(--gfd-bg);
    color: #fff;
}

/* الشريط الأحمر هو الفاصل الوحيد بين النصّين — بدل إطار أو ظل. */
body.theme-gulf .gfx-half--light {
    position: relative;
    background: #fff;
    color: var(--gf-ink);
}

body.theme-gulf .gfx-half--light::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: var(--gfd-red);
}

/* حد أقصى لعرض النص عشان السطر يفضل مقروء مهما اتسعت الشاشة. */
body.theme-gulf .gfx-inner {
    width: 100%;
    max-width: 560px;
}

/* ── العنوان الصغير: شرطة حمراء قبل الكلمة ── */
body.theme-gulf .gfx-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #c9ccd3;
}

body.theme-gulf .gfx-eyebrow::before {
    content: "";
    flex: none;
    width: 22px;
    height: 2px;
    background: var(--gfd-red);
}

/* على الأبيض الأحمر لازم يبقى أغمق شوية عشان نص صغير يعدّي 4.5:1. */
body.theme-gulf .gfx-eyebrow--ink { color: #d51525; }

body.theme-gulf .gfx-name {
    margin: 0 0 22px;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
}

body.theme-gulf .gfx-lede {
    margin: 0 0 40px;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.8;
    color: #c9ccd3;
}

/* ── أسطر البيانات: أرقام وخطوط شعرة، مفيش صناديق ── */
body.theme-gulf .gfx-rows {
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gfd-line);
}

body.theme-gulf .gfx-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--gfd-line);
}

/* آخر خط أحمر: بيقفل القائمة زي ما الخط الأحمر بيقفل عناوين الملف الداكن. */
body.theme-gulf .gfx-row:last-child { border-bottom-color: var(--gfd-rule); }

/* الرقم كبير (24px فأكتر) عشان الأحمر على الفحمي يعدّي حدّ النص الكبير 3:1. */
body.theme-gulf .gfx-row-n {
    font-size: clamp(1.65rem, 2.2vw, 2.1rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfx-row-b {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.theme-gulf .gfx-row-l {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c9ccd3;
}

body.theme-gulf .gfx-row-l .bi {
    font-size: .95rem;
    line-height: 1;
    color: var(--gfd-red);
}

body.theme-gulf .gfx-row-v {
    font-size: 1.02rem;
    color: #fff;
    text-decoration: none;
    overflow-wrap: anywhere;
}

/* المرور بيحط خط أحمر تحت القيمة بدل ما يلوّن النص نفسه — النص بيفضل أبيض
   فبيحافظ على تباينه الكامل. */
body.theme-gulf a.gfx-row-v:hover,
body.theme-gulf a.gfx-row-v:focus {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--gfd-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ── الروابط تحت: نص مش أزرار، عشان الزر الرئيسي الوحيد يفضل "إرسال" ── */
body.theme-gulf .gfx-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 0;
}

body.theme-gulf .gfx-links a {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: border-color .2s ease;
}

body.theme-gulf .gfx-links a::after {
    content: "\2192";
    display: inline-block;
    margin-inline-start: 10px;
}

body.theme-gulf .gfx-links a:hover,
body.theme-gulf .gfx-links a:focus { border-bottom-color: var(--gfd-red); }

/* ── النص الأبيض: عنوان الفورم ── */
body.theme-gulf .gfx-fh {
    margin: 0 0 12px;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--gf-ink);
}

body.theme-gulf .gfx-fsub {
    margin: 0 0 34px;
    max-width: 46ch;
    font-size: .95rem;
    line-height: 1.75;
    color: #4a545f;
}

/* ── الحقول: سطر بخط سفلي واحد، مفيش صناديق ولا كبسولات ── */
body.theme-gulf .gfx-form .inst-cform-row { margin-bottom: 22px; }

/* الـ!important هنا مقصود: _brand.css المشترك بيحط
   `.form-control{border:1px solid var(--site-primary)!important}` لكل المواقع،
   وده أحمر الخليج — فبيرسم صندوق كامل حوالين كل حقل. ممنوع تعديل الملف
   المشترك، فبنكسر الحدّ هنا ونسيب الخط السفلي بس. */
body.theme-gulf .gfx-form .form-control {
    height: auto;
    padding: 12px 0;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #c8ced6 !important;
    box-shadow: none !important;
    font-size: .98rem;
    color: var(--gf-ink) !important;
}

body.theme-gulf .gfx-form .form-control::placeholder {
    color: #5c6672;
    opacity: 1;
}

/* التركيز بيتخّن الخط ويحمّره — علامة واضحة من غير ما الحقل يتحوّل صندوق. */
body.theme-gulf .gfx-form .form-control:focus {
    outline: none;
    background: transparent !important;
    color: var(--gf-ink) !important;
    border: 0 !important;
    border-bottom: 2px solid #d51525 !important;
    padding-bottom: 11px;
}

body.theme-gulf .gfx-form textarea.form-control {
    min-height: 120px;
    line-height: 1.7;
    resize: vertical;
}

/* نظام الكبسولات في الثيم بيمسك أي input/textarea بمحدِّد أعلى، والنتيجة إن
   الخط السفلي بيتقوّس من طرفيه. ده نفس الوزن + كلاس زيادة عشان يفضل مستقيم. */
body.theme-gulf .gfx-form input:not([type="checkbox"]):not([type="radio"]),
body.theme-gulf .gfx-form textarea,
body.theme-gulf .gfx-form select { border-radius: 0 !important; }

body.theme-gulf .gfx-form .inst-cform-actions { margin-top: 34px; }

/* الأحمر المصمت هنا #d51525 مش #ea1a2d: الأبيض على #ea1a2d بيطلع 4.47:1 —
   تحت الحدّ بشعرة — وعلى الغامق ده بيبقى 5.3:1. الفرق مش باين للعين. */
body.theme-gulf .gfx-form input#submit_contact[type="submit"] {
    width: auto !important;
    height: auto !important;
    padding: 16px 44px !important;
    border-radius: 0 !important;
    background: #d51525 !important;
    border: 1px solid #d51525 !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease;
}

body.theme-gulf .gfx-form input#submit_contact[type="submit"]:hover,
body.theme-gulf .gfx-form input#submit_contact[type="submit"]:focus {
    background: var(--gf-ink) !important;
    border-color: var(--gf-ink) !important;
    color: #fff !important;
}

/* رسالة النتيجة من contact.js بتتحط فوق الحقول. */
body.theme-gulf .gfx-form #message_contact:not(:empty) { margin-bottom: 20px; }

/* ── العربية: مفيش حروف كبيرة، والتباعد بيفكّك الكلمة ── */
body[dir="rtl"].theme-gulf .gfx-eyebrow,
body[dir="rtl"].theme-gulf .gfx-name,
body[dir="rtl"].theme-gulf .gfx-row-l,
body[dir="rtl"].theme-gulf .gfx-links a,
body[dir="rtl"].theme-gulf .gfx-fh,
body[dir="rtl"].theme-gulf .gfx-form input#submit_contact[type="submit"] {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfx-links a::after { content: "\2190"; }

/* ── تحت 900px: النصّين فوق بعض، والشريط الأحمر بيبقى فوق اللوح الأبيض ── */
@media (max-width: 899px) {
    body.theme-gulf .gfx-split { grid-template-columns: minmax(0, 1fr); }

    body.theme-gulf .gfx-half {
        align-items: stretch;
        padding: 48px 20px 54px;
    }

    body.theme-gulf .gfx-inner { max-width: 100%; }

    body.theme-gulf .gfx-half--light::before {
        inset-block: auto;
        inset-inline: 0;
        top: 0;
        width: auto;
        height: 5px;
    }

    body.theme-gulf .gfx-name { margin-bottom: 18px; }
    body.theme-gulf .gfx-lede { margin-bottom: 32px; }
}

@media (max-width: 575px) {
    body.theme-gulf .gfx-row { column-gap: 14px; padding: 18px 0; }
    body.theme-gulf .gfx-links { gap: 12px 22px; }
    body.theme-gulf .gfx-form input#submit_contact[type="submit"] { padding: 15px 34px !important; }
}

/* ============================================================
   (2026-09-09) الخليج — «وحدة الملفات»: صفحة /downloads.

   ليه: الصفحة القديمة (.gfd-rows) كانت قائمة أربع بنود بأرقام وأيقونات وأسهم
   وسطر وصف تحت كل عنوان — نفس الهيكل اللي عند باقي المعاهد. الجديدة جدول ملفات
   حقيقي بأعمدة على فحمي، صفوف مضغوطة بخطوط شعرة، زي واجهة إدارة ملفات.
   قواعد .gfd-rows القديمة اتسابت زي ما هي (لسه بتخدم صفحات خليج تانية).

   التباين اتحسب على خلفية --gfd-bg (#0a0d12):
   الأحمر التجاري #ea1a2d = 4.34:1 → للحدود والخطوط بس (>3:1 يكفي لغير النص)،
   والنص الأحمر بياخد --gfd-fm-red-t (#ff4a58) = 5.9:1، وحشو زرار hover بياخد
   --gfd-fm-red-fill (#d81324) عشان الأبيض فوقه يوصل 5.2:1.
   ============================================================ */

body.theme-gulf {
    --gfd-fm-red-t: #ff4a58;
    --gfd-fm-red-fill: #d81324;
}

body.theme-gulf .gfd-fm { padding: 64px 0 72px; }

/* ── شريط المسار: كروم الواجهة مش عنوان قسم ─────────────────── */
body.theme-gulf .gfd-fm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-fm-path {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .18em;
}

body.theme-gulf .gfd-fm-path-root { color: var(--gfd-dim); }
body.theme-gulf .gfd-fm-path-sep { color: var(--gfd-dim); margin-inline: 8px; }
body.theme-gulf .gfd-fm-path-leaf { color: #fff; }

body.theme-gulf .gfd-fm-count {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfd-dim);
    font-variant-numeric: tabular-nums;
}

/* ── الجدول ─────────────────────────────────────────────────── */
/* overflow-x على الغلاف عشان لو النص كبر ما يدفعش الصفحة كلها */
body.theme-gulf .gfd-fm-wrap { overflow-x: auto; }

body.theme-gulf .gfd-fm-t {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

body.theme-gulf .gfd-fm-t thead th {
    padding: 12px 14px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
    background: rgba(255, 255, 255, .025);
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
    white-space: nowrap;
}

body.theme-gulf .gfd-fm-t .gfd-fm-c-doc { width: 44%; }
body.theme-gulf .gfd-fm-t .gfd-fm-c-fmt { width: 13%; }
body.theme-gulf .gfd-fm-t .gfd-fm-c-when { width: 19%; }
body.theme-gulf .gfd-fm-t .gfd-fm-c-act { width: 24%; text-align: end; }

/* رأس المجموعة: فرز حسب النوع زي مدير الملفات */
body.theme-gulf .gfd-fm-grp-row th {
    padding: 26px 14px 8px;
    font-size: .7rem;
    font-weight: 700;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-fm-red-t);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-fm-t tbody td {
    padding: 11px 14px;
    font-size: .92rem;
    line-height: 1.45;
    vertical-align: middle;
    color: var(--gfd-mute);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-fm-t tbody tr:hover td { background: rgba(234, 26, 45, .08); }

body.theme-gulf .gfd-fm-name {
    color: #fff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* وسم الصيغة: مربع بحد شعرة، زوايا صفر زي باقي الخليج */
body.theme-gulf .gfd-fm-fmt {
    display: inline-block;
    padding: 3px 9px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gfd-mute);
    border: 1px solid var(--gfd-line);
    border-radius: 0;
    white-space: nowrap;
}

body.theme-gulf .gfd-fm-fmt.is-pdf {
    color: var(--gfd-fm-red-t);
    border-color: var(--gfd-red);
}

body.theme-gulf .gfd-fm-when {
    font-size: .84rem;
    letter-spacing: .04em;
    color: var(--gfd-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* عمود الإجراء: على نهاية السطر زي أي واجهة ملفات */
body.theme-gulf .gfd-fm-act {
    text-align: end;
    white-space: nowrap;
}

body.theme-gulf .gfd-fm-act > * { vertical-align: middle; }

/* زرار التحميل مصبوغ بلغة الخليج: زوايا صفر، حد أحمر، حروف متباعدة.
   margin-top الافتراضي في _institute.css اتصفّر عشان الصف يفضل مضغوط. */
body.theme-gulf .gfd-fm-dl {
    margin-top: 0;
    margin-inline-end: 14px;
    padding: 6px 15px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: transparent;
    border: 1px solid var(--gfd-red);
    border-radius: 0;
    transition: background .15s, border-color .15s;
}

body.theme-gulf .gfd-fm-dl:hover,
body.theme-gulf .gfd-fm-dl:focus-visible {
    background: var(--gfd-fm-red-fill);
    border-color: var(--gfd-fm-red-fill);
    transform: none;
}

body.theme-gulf .gfd-fm-open {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

body.theme-gulf .gfd-fm-open:hover,
body.theme-gulf .gfd-fm-open:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* ── شريط الحالة: السياق مرة واحدة بدل سطر وصف تحت كل بند ───── */
body.theme-gulf .gfd-fm-status {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 32px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-fm-note {
    margin: 0;
    max-width: 66ch;
    font-size: .84rem;
    line-height: 1.65;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-fm-help {
    font-size: .78rem;
    font-weight: 700;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .45);
    white-space: nowrap;
}

body.theme-gulf .gfd-fm-help:hover,
body.theme-gulf .gfd-fm-help:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* العربي: الحروف المتباعدة والـuppercase للاتيني بس */
body[dir="rtl"].theme-gulf .gfd-fm-path,
body[dir="rtl"].theme-gulf .gfd-fm-count,
body[dir="rtl"].theme-gulf .gfd-fm-t thead th,
body[dir="rtl"].theme-gulf .gfd-fm-grp-row th,
body[dir="rtl"].theme-gulf .gfd-fm-dl,
body[dir="rtl"].theme-gulf .gfd-fm-open {
    text-transform: none;
    letter-spacing: 0;
}

/* ── الموبايل: الصف بيبقى كتلة مفاتيح/قيم، من غير تمرير أفقي ── */
@media (max-width: 767px) {
    body.theme-gulf .gfd-fm { padding: 44px 0 52px; }

    /* رؤوس الأعمدة بتتخفي بصريًا وبتتكرر كـlabel جنب كل قيمة */
    body.theme-gulf .gfd-fm-t thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.theme-gulf .gfd-fm-t,
    body.theme-gulf .gfd-fm-t tbody,
    body.theme-gulf .gfd-fm-t tr,
    body.theme-gulf .gfd-fm-t td,
    body.theme-gulf .gfd-fm-grp-row th { display: block; width: auto; }

    body.theme-gulf .gfd-fm-t { table-layout: auto; }

    body.theme-gulf .gfd-fm-t tbody tr {
        padding: 12px 0 14px;
        border-bottom: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-fm-t tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px 18px;
        padding: 4px 0;
        border: 0;
    }

    body.theme-gulf .gfd-fm-t tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .66rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gfd-dim);
    }

    body[dir="rtl"].theme-gulf .gfd-fm-t tbody td::before {
        letter-spacing: 0;
        text-transform: none;
    }

    /* اسم الملف عنوان الكتلة: بعرض السطر كله من غير label */
    body.theme-gulf .gfd-fm-t tbody td.gfd-fm-name {
        display: block;
        font-size: 1rem;
        padding-bottom: 8px;
    }

    body.theme-gulf .gfd-fm-t tbody td.gfd-fm-name::before { content: none; }

    body.theme-gulf .gfd-fm-t tbody tr:hover td { background: transparent; }

    body.theme-gulf .gfd-fm-act { padding-top: 10px; }
    body.theme-gulf .gfd-fm-dl { margin-inline-end: 12px; }

    body.theme-gulf .gfd-fm-grp-row th { padding: 24px 0 8px; }

    body.theme-gulf .gfd-fm-status { display: block; }
    body.theme-gulf .gfd-fm-help { display: inline-block; margin-top: 12px; white-space: normal; }
}

/* آخر صف في الجدول: خطه اتشال عشان ما يتزاوجش مع خط شريط الحالة تحته */
body.theme-gulf .gfd-fm-t tbody:last-child tr:last-child td { border-bottom: 0; }

/* ============================================================
   الخليج — ورقة المواصفات: صفحة "عن المعهد" (2026-09-09)
   ------------------------------------------------------------
   ليه بلوك جديد بأسماء .gfs-* بدل ما نعدّل القديم: قالب about_content
   اتكتب من أول وجديد بمعمار مختلف (جدول حقائق بتلات أعمدة + شريط رسالة
   ضخم + سطر قيم)، فما بقاش فيه عناصر تنطبق عليها قواعد .gfd-strip /
   .gfd-offers / .gfd-cta. القواعد القديمة اتسابت زي ما هي من غير أي
   تعديل لأن .gfd-strip لسه بتشتغل في صفحة الدورات العامة، ولو اتشالت
   الصفحة دي هتتكسر.

   الهوية زي ما هي في DESIGN-SYSTEMS: فحمي + أحمر #ea1a2d، زوايا صفر،
   خطوط شعرة بدل الصناديق، عناوين صغيرة بحروف متباعدة، أرقام ضخمة.
   الأحمر على الفحمي بيدّي تباين 4.34:1 — أقل من 4.5 — فهو **مش**
   بيستعمل لنص عادي أبدًا: أرقام كبيرة بس (large text، الحد 3:1)
   وخطوط وحدود. النص العادي أبيض أو #99a1ad (7.5:1).
   ============================================================ */

/* رأس الورقة: مش عنوان قسم كبير — سطر تعريف صغير واقف على خط أحمر،
   والخط ده نفسه هو أول فاصل للجدول تحته (عشان كده أول صف من غير حد). */
body.theme-gulf .gfs-title {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gfd-red);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gfd-mute);
}

body.theme-gulf .gfs-rows { margin: 0; }

/* الصف: عنوان | رقم | تفصيل. الفاصل خط شعرة، مفيش صندوق ولا خلفية. */
body.theme-gulf .gfs-row {
    display: grid;
    grid-template-columns: minmax(150px, 18%) minmax(64px, auto) minmax(0, 1fr);
    gap: 8px 40px;
    align-items: start;
    padding: 28px 0;
    border-top: 1px solid var(--gfd-line);
}

body.theme-gulf .gfs-row:first-child { border-top: 0; }

body.theme-gulf .gfs-label {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--gfd-mute);
}

/* الرقم: نفس نبرة الأرقام الشبحية بتاعة الموقع — رفيع وضخم وأحمر.
   حجمه فوق 24px فتباين 4.34:1 كافي (قاعدة large text). */
body.theme-gulf .gfs-fig {
    margin: 0;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 200;
    line-height: .82;
    letter-spacing: -.03em;
    color: var(--gfd-red);
    font-variant-numeric: tabular-nums;
    text-align: start;
}

body.theme-gulf .gfs-detail {
    margin: 0;
    /* حد أقصى للقراءة: السطر ما يعدّيش ~66 حرف حتى على 1440px. */
    max-width: 62ch;
    font-size: 1rem;
    line-height: 1.75;
    color: #fff;
}

/* روابط الصف: سطر واحد تحت التفصيل، بمسافة بينهم — مفيش أسهم ولا نقط قائدة. */
body.theme-gulf .gfs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin-top: 14px;
}

body.theme-gulf .gfs-link {
    color: #fff;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding-bottom: 3px;
    /* الخط الأحمر تحت الرابط عنصر رسم مش نص، فتباينه مش محكوم بـ4.5:1،
       والنص نفسه أبيض. box-shadow بدل الحد عشان السُمك ما يزحزحش السطر. */
    box-shadow: inset 0 -1px 0 var(--gfd-red);
    transition: box-shadow .15s ease;
}

body.theme-gulf .gfs-link:hover,
body.theme-gulf .gfs-link:focus {
    color: #fff;
    box-shadow: inset 0 -4px 0 var(--gfd-red);
}

/* ── شريط الرسالة: بعرض الصفحة على فحمي، وهو ثقل الصفحة كلها ── */
body.theme-gulf .gfs-band {
    margin: 64px 0;
    padding: 56px 0;
    background: var(--gf-ink, #10161f);
    border-top: 1px solid var(--gfd-rule);
    border-bottom: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfs-mission {
    margin: 0;
    font-size: clamp(1.5rem, 3.1vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}

/* الرؤية: وزن مختلف تمامًا عن الرسالة — سطر خافت صغير، مش كارت مساوي ليها. */
body.theme-gulf .gfs-vision {
    margin: 24px 0 0;
    max-width: 66ch;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--gfd-mute);
}

/* ── القيم: شريط نصي واحد بفواصل، والعنوان الصغير عليه شرطة حمراء ── */
/* من غير خط فوقه: الشريط الأحمر تحت لوح الرسالة هو الفاصل بالفعل، وخط تاني
   بعرض 70ch بس كان بيبان كخط يتيم واقف في نص الصفحة. */
body.theme-gulf .gfs-values {
    margin: 0;
    max-width: 70ch;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #fff;
}

body.theme-gulf .gfs-values-label {
    display: block;
    margin-bottom: 10px;
    padding-inline-start: 12px;
    border-inline-start: 3px solid var(--gfd-red);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gfd-mute);
}

/* ── العربية: مفيش حروف كبيرة، والتباعد بيفكّك الكلمة ── */
body[dir="rtl"].theme-gulf .gfs-title,
body[dir="rtl"].theme-gulf .gfs-label,
body[dir="rtl"].theme-gulf .gfs-link,
body[dir="rtl"].theme-gulf .gfs-values-label {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfs-title,
body[dir="rtl"].theme-gulf .gfs-label { font-size: .86rem; }
body[dir="rtl"].theme-gulf .gfs-link { font-size: .88rem; }
body[dir="rtl"].theme-gulf .gfs-values-label { font-size: .82rem; }

/* ── تحت 900px: العنوان والرقم على سطر واحد، والتفصيل تحتهم ──
   الثلاث أعمدة على شاشة ضيقة بتخنق التفصيل، فبيتحوّلوا لسطرين. */
@media (max-width: 899px) {
    body.theme-gulf .gfs-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 16px;
        padding: 24px 0;
    }

    body.theme-gulf .gfs-label { align-self: center; }
    body.theme-gulf .gfs-fig { text-align: end; line-height: 1; }
    body.theme-gulf .gfs-detail { grid-column: 1 / -1; max-width: none; margin-top: 6px; }

    body.theme-gulf .gfs-band { margin: 48px 0; padding: 44px 0; }
}

/* رقم التليفون: عزل اتجاهي عشان الـ+ يفضل في أوّل الرقم على الصفحة العربية. */
body.theme-gulf .gfs-tel {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ============================================================
   (2026-09-09) الخليج — «جدول الأسئلة»: صفحة /faq.

   ليه بلوك جديد بأسماء .gfd-qt-* بدل تعديل القديم: قالب faq_content اتكتب
   من أول وجديد بمعمار مختلف (جدول حقيقي بعمودين، تسلسل واحد من غير مجموعات،
   كل الإجابات مفتوحة)، فما بقاش فيه عناصر تنطبق عليها قواعد .gfd-file /
   .gfd-qa-* . القواعد القديمة **اتسابت زي ما هي من غير أي تعديل** لأن
   .gfd-band لسه بتشتغل في صفحة العملاء (clients_content)، ولو اتشالت هتتكسر.

   الهوية: فحمي #0a0d12 + أحمر #ea1a2d، زوايا صفر، خطوط شعرة بدل الصناديق،
   رؤوس أعمدة صغيرة بحروف متباعدة — نفس لسان جدول /downloads عشان الصفحتين
   يبانوا من نفس الموقع، بس بعمودين نثريين بدل أربعة أعمدة بيانات.

   التباين على #0a0d12: أبيض للسؤال، #99a1ad للإجابة (7.5:1)،
   #7c8492 لرؤوس الأعمدة (5.17:1)، و#ff4a58 للرابط (5.9:1).
   الأحمر التجاري #ea1a2d (4.34:1) للخطوط والحدود بس — مش لنص عادي أبدًا.
   ============================================================ */

body.theme-gulf .gfd-qt { padding: 64px 0 76px; }

/* الجدول بعرض الحاوية كلها زي جدول /downloads — خطوط الصفوف بتمتد عرض الصفحة،
   وده لسان الخليج (ألواح بعرض الصفحة، خطوط بدل الصناديق). عرض القراية اتضبط
   جوّه الخلية نفسها (.gfd-qt-a-in) مش بتضييق الجدول، عشان ما يفضلش نص الإجابة
   ماشي 95 حرف في السطر على 1440px. */
body.theme-gulf .gfd-qt-wrap { overflow-x: auto; }

body.theme-gulf .gfd-qt-t {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

/* التسمية: سطر النطاق + رابط التواصل النصي فوق الجدول.
   مقصود إنها فوق مش تحت: شريط CTA في آخر الصفحة هو بالظبط الخاتمة الثابتة
   اللي بتخلّي الـ11 معهد يقروا نفس القراية. */
body.theme-gulf .gfd-qt-cap {
    caption-side: top;
    padding: 0 0 14px;
    text-align: start;
    color: var(--gfd-mute);
}

/* الـflex جوّه span مش على الـcaption نفسه: تغيير display على caption
   بيخرجها من تخطيط الجدول في بعض المتصفحات. */
body.theme-gulf .gfd-qt-cap-in {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 32px;
}

body.theme-gulf .gfd-qt-cap-t {
    max-width: 66ch;
    font-size: .88rem;
    line-height: 1.6;
}

body.theme-gulf .gfd-qt-cap-a {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .45);
    white-space: nowrap;
}

body.theme-gulf .gfd-qt-cap-a:hover,
body.theme-gulf .gfd-qt-cap-a:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* رؤوس الأعمدة: الخط الأحمر تحتها هو اللي بيفتح الجدول — مفيش عنوان قسم فوقه */
body.theme-gulf .gfd-qt-t thead th {
    padding: 10px 16px 10px 0;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--gfd-red);
    white-space: nowrap;
}

body.theme-gulf .gfd-qt-t .gfd-qt-c-q { width: 32%; }
body.theme-gulf .gfd-qt-t .gfd-qt-c-a { width: 68%; }

/* الصفوف: خط شعرة واحد بين كل سؤال والتاني، مفيش إطار ولا بطاقة */
body.theme-gulf .gfd-qt-t tbody th,
body.theme-gulf .gfd-qt-t tbody td {
    padding: 14px 16px 14px 0;
    vertical-align: top;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-qt-q {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: start;
    color: #fff;
    overflow-wrap: anywhere;
}

body.theme-gulf .gfd-qt-a {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--gfd-mute);
}

/* عرض القراية: ~68 حرف في السطر. الحد جوّه الخلية عشان الخط الشعرة يفضل
   ماشي عرض الجدول كله بينما النص نفسه يفضل عمود مقروء. */
body.theme-gulf .gfd-qt-a-in {
    display: block;
    max-width: 68ch;
}

body.theme-gulf .gfd-qt-t tbody tr:hover th,
body.theme-gulf .gfd-qt-t tbody tr:hover td { background: rgba(234, 26, 45, .07); }

/* آخر صف: خطه أحمر بدل الشعرة عشان الجدول يقفل بوضوح من غير شريط خاتمة */
body.theme-gulf .gfd-qt-t tbody tr:last-child th,
body.theme-gulf .gfd-qt-t tbody tr:last-child td { border-bottom: 1px solid var(--gfd-rule); }

/* العربي: الحروف المتباعدة والـuppercase للاتيني بس */
body[dir="rtl"].theme-gulf .gfd-qt-t thead th,
body[dir="rtl"].theme-gulf .gfd-qt-cap-a {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfd-qt-cap-a { font-size: .84rem; }
body[dir="rtl"].theme-gulf .gfd-qt-t thead th { font-size: .78rem; }

/* الحشو الجانبي منطقي: 16px على نهاية الخلية بس، عشان أول عمود يفضل ملزوق
   ببداية السطر في الاتجاهين. */
body.theme-gulf .gfd-qt-t thead th,
body.theme-gulf .gfd-qt-t tbody th,
body.theme-gulf .gfd-qt-t tbody td {
    padding-inline-start: 0;
    padding-inline-end: 16px;
}

body.theme-gulf .gfd-qt-t thead th:last-child,
body.theme-gulf .gfd-qt-t tbody td:last-child { padding-inline-end: 0; }

/* ── تحت 768px: عمودين جنب بعض بيخنقوا النص، فالصف بيتفكّ لسؤال + إجابة
   مزاحة بخط شعرة على بدايتها. الخط ده بيخلّي الإجابة تُقرا كامتداد للصف
   مش كسطر وصف تحت عنوان. رؤوس الأعمدة بتتخفي بصريًا وبتفضل للقارئ الصوتي. */
@media (max-width: 767px) {
    body.theme-gulf .gfd-qt { padding: 44px 0 54px; }

    body.theme-gulf .gfd-qt-t thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.theme-gulf .gfd-qt-t,
    body.theme-gulf .gfd-qt-t tbody,
    body.theme-gulf .gfd-qt-t tr,
    body.theme-gulf .gfd-qt-t tbody th,
    body.theme-gulf .gfd-qt-t tbody td { display: block; width: auto; }

    body.theme-gulf .gfd-qt-t { table-layout: auto; }

    body.theme-gulf .gfd-qt-wrap { overflow-x: visible; }

    body.theme-gulf .gfd-qt-t tbody tr {
        padding: 14px 0 16px;
        border-bottom: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-qt-t tbody tr:last-child { border-bottom: 1px solid var(--gfd-rule); }

    body.theme-gulf .gfd-qt-t tbody th,
    body.theme-gulf .gfd-qt-t tbody td {
        padding: 0;
        border-bottom: 0;
    }

    body.theme-gulf .gfd-qt-q { font-size: 1rem; }

    body.theme-gulf .gfd-qt-t tbody td.gfd-qt-a {
        margin-top: 8px;
        padding-inline-start: 14px;
        border-inline-start: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-qt-t tbody tr:hover th,
    body.theme-gulf .gfd-qt-t tbody tr:hover td { background: transparent; }

    body.theme-gulf .gfd-qt-cap { display: block; width: 100%; }
    body.theme-gulf .gfd-qt-cap-in { display: block; }
    body.theme-gulf .gfd-qt-cap-a { display: inline-block; margin-top: 12px; white-space: normal; }
}

/* ============================================================
   الخليج — /services/in-house-courses و /services/public-courses
   (2026-09-09) إعادة كتابة كاملة بمعمار مختلف، مش إعادة تلوين.

   السبب: الصفحتين كانوا بنفس هيكل الـ11 معهد — ٣ خطوات مرقّمة + ٤ نقاط
   "لماذا" على صفحة الداخلية، و٣ مزايا + ٣ شروط على العامة، وكلها بتنتهي
   بشريط أزرار. الأعداد والتسلسل هما اللي كانوا بيفضحوا إن اللي صمّم دي هو
   اللي صمّم دي، مش الألوان.

   الجديد:
   • الداخلية (.gfd-sp) = ورقة مواصفات: جدول واحد ٤ صفوف × ٤ أعمدة
     (المرحلة | ما نقدّمه | ما نحتاجه منك | المخرَج) وتحته فورم طلب مباشرة.
   • العامة (.gfd-tc) = سطر عرض ضخم بعرض الحاوية + سطر روابط نصّي + لوح
     شروط مضغوط بعمودين وستة صفوف.
   الصفحتان مختلفتان عن بعض في الوزن البصري: واحدة جدول واسع بيقفل بحقل
   إدخال، والتانية بتفتح بجملة ضخمة وتقفل بورقة أحكام ضيّقة.

   بلوك جديد بأسماء .gfd-sp-* / .gfd-tc-* بدل تعديل القديم: قوالب الصفحتين
   اتكتبت من أول وجديد، فقواعد .gfd-strip / .gfd-terms / .gfd-checks /
   .gfd-rows القديمة ما بقاش ليها عناصر هنا. اتسابت زي ما هي **من غير أي
   تعديل** لأنها لسه شغالة في صفحات تانية على نفس الموقع.

   التباين على #0a0d12 وعلى لوح الشروط #10161f: أبيض (18:1+)، #99a1ad (6.8:1+)،
   #7c8492 (4.7:1+)، #ff4a58 (5.3:1+). الأحمر التجاري #ea1a2d للخطوط بس.
   حشو زرار الطلب #d81324 عشان الأبيض فوقه يعدّي 5:1.
   ============================================================ */

/* ── ورقة المواصفات: الجدول ─────────────────────────────────── */
/* overflow-x على الغلاف بس — الجدول نفسه fixed بنِسَب، فمفيش تمرير أفقي
   للصفحة حتى لو كلمة طويلة زوّدت العرض. */
body.theme-gulf .gfd-sp-wrap { overflow-x: auto; }

body.theme-gulf .gfd-sp-t {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

/* رؤوس الأعمدة هي اللي بتفتح الصفحة — مفيش عنوان قسم فوقها ولا مقدمة */
body.theme-gulf .gfd-sp-t thead th {
    padding-block: 0 12px;
    padding-inline-end: 22px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--gfd-red);
    vertical-align: bottom;
}

body.theme-gulf .gfd-sp-t .gfd-sp-c-st { width: 17%; }
body.theme-gulf .gfd-sp-t .gfd-sp-c-we { width: 30%; }
body.theme-gulf .gfd-sp-t .gfd-sp-c-you { width: 27%; }
body.theme-gulf .gfd-sp-t .gfd-sp-c-out { width: 26%; }

body.theme-gulf .gfd-sp-t tbody th,
body.theme-gulf .gfd-sp-t tbody td {
    padding-block: 20px 22px;
    padding-inline-end: 22px;
    vertical-align: top;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-sp-t tbody tr:last-child th,
body.theme-gulf .gfd-sp-t tbody tr:last-child td { border-bottom: 1px solid var(--gfd-rule); }

/* عمود المرحلة: تسمية، مش رقم — الترقيم هو أكتر علامة مشتركة بين المعاهد */
body.theme-gulf .gfd-sp-st {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gfd-fm-red-t);
    overflow-wrap: anywhere;
}

body.theme-gulf .gfd-sp-cell {
    font-size: .95rem;
    line-height: 1.65;
    color: var(--gfd-mute);
    overflow-wrap: anywhere;
}

/* عمود المخرَج أبيض: هو اللي المستخدم بيدوّر عليه وقت المسح السريع للجدول */
body.theme-gulf .gfd-sp-out { color: #fff; }

/* تسميات الأعمدة المكرّرة للموبايل — مخفية على الشاشات الواسعة */
body.theme-gulf .gfd-sp-l { display: none; }

/* ── الفورم: لاصق تحت الجدول من غير عنوان ولا مقدمة ────────── */
body.theme-gulf .gfd-sp-req {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    margin-block-start: 34px;
}

body.theme-gulf .gfd-sp-req-l {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-sp-req-i {
    min-width: 0;
    padding: 14px 16px;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    background: transparent;
    border: 1px solid var(--gfd-line);
    border-radius: 0;
}

body.theme-gulf .gfd-sp-req-i::placeholder { color: var(--gfd-mute); opacity: 1; }

body.theme-gulf .gfd-sp-req-i:focus {
    outline: 0;
    border-color: var(--gfd-red);
    box-shadow: none;
}

body.theme-gulf .gfd-sp-req-b {
    padding: 14px 30px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #fff;
    background: var(--gfd-fm-red-fill);
    border: 1px solid var(--gfd-fm-red-fill);
    border-radius: 0;
    cursor: pointer;
}

body.theme-gulf .gfd-sp-req-b:hover,
body.theme-gulf .gfd-sp-req-b:focus-visible {
    background: #b30f1d;
    border-color: #b30f1d;
    color: #fff;
}

/* ── الدورات العامة: السطر الضخم ───────────────────────────── */
/* بعرض الحاوية زي ما هو مطلوب، لكن حجم الخط الكبير بيخلّي السطر حوالي
   50 حرف على 1440px — يعني لسه في حدود القراية المريحة. */
body.theme-gulf .gfd-tc-lede {
    margin: 0;
    font-size: clamp(1.35rem, 3.1vw, 2.5rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

/* الروابط سطر نصّي صغير تحت الجملة — عمداً مش شريط أزرار في آخر الصفحة */
body.theme-gulf .gfd-tc-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    margin: 26px 0 0;
}

body.theme-gulf .gfd-tc-links a {
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .45);
}

body.theme-gulf .gfd-tc-links a:hover,
body.theme-gulf .gfd-tc-links a:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* ── لوح الشروط: ورقة أحكام مضغوطة، أضيق من عرض الصفحة ──────── */
body.theme-gulf .gfd-tc-panel {
    max-width: 86ch;
    margin-block-start: 54px;
    padding: 26px 28px 8px;
    background: #10161f;
    border-top: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-tc-t {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

body.theme-gulf .gfd-tc-cap {
    caption-side: top;
    padding: 0 0 14px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-tc-t th,
body.theme-gulf .gfd-tc-t td {
    padding-block: 11px;
    vertical-align: top;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-tc-t tr:last-child th,
body.theme-gulf .gfd-tc-t tr:last-child td { border-bottom: 0; }

body.theme-gulf .gfd-tc-t th {
    width: 25%;
    padding-inline-end: 18px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--gfd-fm-red-t);
    overflow-wrap: anywhere;
}

body.theme-gulf .gfd-tc-t td {
    font-size: .88rem;
    line-height: 1.6;
    color: #fff;
    overflow-wrap: anywhere;
}

/* ── الموبايل ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {

    /* جدول المواصفات بيتفكّ لكتل: المرحلة عنوان، وكل خلية بتسميتها فوقها.
       المحتوى كله مفتوح — مفيش أكورديون ولا إخفاء. */
    body.theme-gulf .gfd-sp-t,
    body.theme-gulf .gfd-sp-t tbody,
    body.theme-gulf .gfd-sp-t tr,
    body.theme-gulf .gfd-sp-t tbody th,
    body.theme-gulf .gfd-sp-t tbody td { display: block; width: auto; }

    body.theme-gulf .gfd-sp-t { table-layout: auto; }
    body.theme-gulf .gfd-sp-t thead { display: none; }
    body.theme-gulf .gfd-sp-wrap { overflow-x: visible; }

    body.theme-gulf .gfd-sp-t tbody tr {
        padding-block: 18px 20px;
        border-bottom: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-sp-t tbody tr:first-child { padding-block-start: 0; }

    body.theme-gulf .gfd-sp-t tbody tr:last-child { border-bottom: 1px solid var(--gfd-rule); }

    /* الخط الأحمر بيقع على الصف نفسه، مش على كل خلية — قاعدة الديسكتوب
       (tr:last-child th/td) أعلى تخصيصًا فلازم تتصفّر هنا صراحةً، وإلا كل
       خلية في آخر صف بتطلع بخط أحمر تحتها على الموبايل. */
    body.theme-gulf .gfd-sp-t tbody th,
    body.theme-gulf .gfd-sp-t tbody td,
    body.theme-gulf .gfd-sp-t tbody tr:last-child th,
    body.theme-gulf .gfd-sp-t tbody tr:last-child td {
        padding: 0;
        border-bottom: 0;
    }

    body.theme-gulf .gfd-sp-t tbody td { margin-block-start: 12px; }

    body.theme-gulf .gfd-sp-l {
        display: block;
        margin-block-end: 3px;
        font-size: .62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .16em;
        color: var(--gfd-dim);
    }

    /* الفورم عمود واحد: الحقل ثم الزرار بعرض كامل */
    body.theme-gulf .gfd-sp-req { grid-template-columns: minmax(0, 1fr); }
    body.theme-gulf .gfd-sp-req-b { inline-size: 100%; }

    /* لوح الشروط: العمودين بيبقوا فوق بعض عشان عمود التسمية ما يخنقش النص */
    body.theme-gulf .gfd-tc-panel {
        max-width: none;
        padding: 22px 18px 6px;
    }

    body.theme-gulf .gfd-tc-t,
    body.theme-gulf .gfd-tc-t tbody,
    body.theme-gulf .gfd-tc-t tr,
    body.theme-gulf .gfd-tc-t th,
    body.theme-gulf .gfd-tc-t td { display: block; width: auto; }

    body.theme-gulf .gfd-tc-t tr {
        padding-block: 12px;
        border-bottom: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-tc-t tr:first-child { padding-block-start: 0; }
    body.theme-gulf .gfd-tc-t tr:last-child { border-bottom: 0; }

    body.theme-gulf .gfd-tc-t th,
    body.theme-gulf .gfd-tc-t td {
        padding: 0;
        border-bottom: 0;
    }

    body.theme-gulf .gfd-tc-t td { margin-block-start: 5px; }

    body.theme-gulf .gfd-tc-cap { display: block; width: 100%; }
}

/* الكبسولات: الملف فيه قاعدة قديمة في أوله بـ!important بتدوّر كل input/button
   على الموقع (نظام الكبسولات). ورقة المواصفات زوايا صفر زي باقي ألواح .gfd،
   فالحقل والزرار بس بيرجعوا لصفر — بتخصيص أعلى بدل تعديل القاعدة القديمة عشان
   باقي نماذج الموقع تفضل كبسولات زي ما هي. */
body.theme-gulf .gfd-sp .gfd-sp-req .gfd-sp-req-i,
body.theme-gulf .gfd-sp .gfd-sp-req .gfd-sp-req-b { border-radius: 0 !important; }

/* العربي: الحروف المتباعدة والـuppercase للاتيني بس — نفس المعالجة المتبعة
   في باقي بلوكات .gfd على الموقع. التباعد على الحروف العربية بيمطّ الكلمة
   ويصعّب قرايتها، والـuppercase بلا معنى فيها أصلاً. */
body[dir="rtl"].theme-gulf .gfd-sp-t thead th,
body[dir="rtl"].theme-gulf .gfd-sp-st,
body[dir="rtl"].theme-gulf .gfd-sp-l,
body[dir="rtl"].theme-gulf .gfd-sp-req-l,
body[dir="rtl"].theme-gulf .gfd-sp-req-b,
body[dir="rtl"].theme-gulf .gfd-tc-links a,
body[dir="rtl"].theme-gulf .gfd-tc-cap,
body[dir="rtl"].theme-gulf .gfd-tc-t th {
    text-transform: none;
    letter-spacing: 0;
}

/* السطر الضخم: التتبّع السالب مضبوط للاتيني، وعلى العربي بيلزّق الحروف */
body[dir="rtl"].theme-gulf .gfd-tc-lede {
    letter-spacing: 0;
    line-height: 1.45;
}

/* ============================================================
   (2026-09-09) الخليج — «جدول القطاعات»: كتلة القطاعات في /clients.

   ليه بلوك جديد بأسماء .gfd-sx-* بدل تعديل .gfd-index-*: القالب
   (themes/gulf/institute/pages/clients_content) اتكتب من أول وجديد بمعمار
   مختلف — جدول بعمودين، عشر قطاعات مدموجة في ستة صفوف، من غير أيقونات ومن
   غير ترقيم — فما بقاش فيه عناصر تنطبق عليها قواعد الفهرس القديم.

   القواعد القديمة (.gfd-index-* و .gfd-band) **اتسابت زي ما هي من غير أي
   تعديل**. تنويه: التعليق الأقدم فوق بلوك /faq بيقول إن .gfd-band لسه
   بتشتغل في صفحة العملاء — ده بقى قديم بعد إعادة الكتابة دي؛ البلوكين
   دلوقتي مش مستعملين في أي قالب، وسايبهم مكانهم أأمن من شيلهم في نفس التغيير.

   ليه جدول أصلاً: لسان الخليج "صفوف بخطوط شعرة بدل الصناديق" (DESIGN-SYSTEMS)،
   وهي نفس الأداة اللي بتشتغل في /faq و/downloads. الفرق عن جدول /faq مقصود:
   هنا صفوف مضغوطة وسطر التسمية تحت الجدول مش فوقه، ومفيش تظليل صف عند المرور،
   والعمود التاني روابط قصيرة مش نص نثري.

   التباين على #0a0d12: أبيض لاسم القطاع، #c3cad4 للروابط (~11:1)،
   #99a1ad لسطر التسمية (7.5:1)، #7c8492 لرؤوس الأعمدة (5.17:1)،
   #ff4a58 للرابط الأحمر (5.9:1). الأحمر التجاري #ea1a2d (4.34:1)
   للخطوط بس — مش لنص أبدًا.
   ============================================================ */

body.theme-gulf .gfd-sx { padding: 62px 0 76px; }

/* العنوان موجود للقارئ الصوتي بس — بصريًا رؤوس الأعمدة هي التسمية */
body.theme-gulf .gfd-sx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* التمرير الأفقي محبوس جوّه الجدول لو ضاقت الشاشة قبل نقطة التفكيك */
body.theme-gulf .gfd-sx-wrap { overflow-x: auto; }

body.theme-gulf .gfd-sx-t {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

/* التسمية تحت الجدول: حاشية بتوضّح إن العمود التاني تخصصات تدريبية مش عملاء.
   تحت مش فوق عشان الصفحة ما تبدأش بسطر شرح زي صفحات المعاهد التانية. */
body.theme-gulf .gfd-sx-cap {
    caption-side: bottom;
    padding: 14px 0 0;
    text-align: start;
    max-width: 74ch;
    font-size: .84rem;
    line-height: 1.7;
    color: var(--gfd-mute);
}

/* رؤوس الأعمدة: الخط الأحمر تحتها هو اللي بيفتح الكتلة — مفيش عنوان قسم فوقها */
body.theme-gulf .gfd-sx-t thead th {
    padding: 0 0 9px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--gfd-dim);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--gfd-red);
    white-space: nowrap;
}

/* العمود الأول ضيّق عن قصد: أطول اسم قطاع بياخد نص عرضه، والباقي بيروح
   للأمثلة عشان أطول صف (المال) يلفّ من نفسه بدل ما يلزق في حافة الحاوية. */
body.theme-gulf .gfd-sx-t .gfd-sx-c-s { width: 26%; }
body.theme-gulf .gfd-sx-t .gfd-sx-c-e { width: 74%; }

/* الصفوف مضغوطة: خط شعرة واحد بين صف وصف، من غير إطار ولا بطاقة ولا تظليل */
body.theme-gulf .gfd-sx-t tbody th,
body.theme-gulf .gfd-sx-t tbody td {
    padding: 13px 0;
    vertical-align: top;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
}

/* حشو منطقي: مسافة على نهاية العمود الأول بس، عشان العمودين يفضلوا ملزوقين
   ببداية السطر في الاتجاهين */
body.theme-gulf .gfd-sx-t thead th:first-child,
body.theme-gulf .gfd-sx-t tbody th { padding-inline-end: 32px; }

body.theme-gulf .gfd-sx-s {
    text-align: start;
    font-weight: 600;
}

/* القطاعات المدموجة في صف واحد: كل واحد سطر، بنفس الوزن — مش عنوان وتابع */
body.theme-gulf .gfd-sx-n {
    display: block;
    font-size: .95rem;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #fff;
    overflow-wrap: break-word;
}

body.theme-gulf .gfd-sx-n + .gfd-sx-n { margin-top: 3px; }

/* الأمثلة: روابط متجاورة بتلف — مش سطر وصف تحت كل قطاع */
body.theme-gulf .gfd-sx-e-in {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 9px 22px;
}

body.theme-gulf .gfd-sx-l {
    font-size: .88rem;
    line-height: 1.5;
    color: #c3cad4;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    overflow-wrap: break-word;
    transition: color .18s ease, border-color .18s ease;
}

body.theme-gulf .gfd-sx-l:hover,
body.theme-gulf .gfd-sx-l:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* صف الطلب المخصّص: آخر صف في نفس الجدول بدل شريط CTA تحته. خطه أحمر
   عشان الجدول يقفل بوضوح، والرابط نص مسطّر مش زرار — الزرار الوحيد في
   آخر الصفحة هو بالظبط الخاتمة الثابتة اللي بتوحّد صفحات المعاهد. */
body.theme-gulf .gfd-sx-t tbody tr:last-child th,
body.theme-gulf .gfd-sx-t tbody tr:last-child td { border-bottom: 1px solid var(--gfd-rule); }

body.theme-gulf .gfd-sx-ask .gfd-sx-n { color: var(--gfd-fm-red-t); }

body.theme-gulf .gfd-sx-ask-t {
    font-size: .88rem;
    line-height: 1.5;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-sx-ask-a {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .45);
    transition: border-color .18s ease;
}

body.theme-gulf .gfd-sx-ask-a:hover,
body.theme-gulf .gfd-sx-ask-a:focus-visible {
    color: var(--gfd-fm-red-t);
    border-bottom-color: var(--gfd-fm-red-t);
}

/* العربي: الحروف المتباعدة والـuppercase للاتيني بس — التباعد بيمطّ الكلمة
   العربية، والـuppercase بلا معنى فيها */
body[dir="rtl"].theme-gulf .gfd-sx-t thead th,
body[dir="rtl"].theme-gulf .gfd-sx-ask-a {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfd-sx-t thead th { font-size: .78rem; }
body[dir="rtl"].theme-gulf .gfd-sx-ask-a { font-size: .84rem; }

/* ── تحت 768px: عمودين جنب بعض بيخنقوا الروابط، فالصف بيتفكّ لاسم القطاع
   وتحته الأمثلة من غير أي إزاحة — القطاع بيفضل ماسك بداية السطر والروابط
   بتلف تحته. رؤوس الأعمدة بتتخفي بصريًا وبتفضل للقارئ الصوتي. */
@media (max-width: 767px) {
    body.theme-gulf .gfd-sx { padding: 42px 0 52px; }

    body.theme-gulf .gfd-sx-t thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body.theme-gulf .gfd-sx-t tbody,
    body.theme-gulf .gfd-sx-t tr,
    body.theme-gulf .gfd-sx-t tbody th,
    body.theme-gulf .gfd-sx-t tbody td { display: block; width: auto; }

    /* الجدول عمود flex عشان الحاشية تفضل تحت: تفكيك الجدول لـblocks بيلغي
       مفعول caption-side فبتطلع فوق. الـorder بيرجّعها مكانها. */
    body.theme-gulf .gfd-sx-t {
        display: flex;
        flex-direction: column;
        table-layout: auto;
    }

    body.theme-gulf .gfd-sx-t tbody { order: 1; }

    body.theme-gulf .gfd-sx-wrap { overflow-x: visible; }

    /* أول صف بياخد خط أحمر فوقه بدل الخط اللي كان تحت رؤوس الأعمدة */
    body.theme-gulf .gfd-sx-t tbody tr:first-child { border-top: 2px solid var(--gfd-red); }

    body.theme-gulf .gfd-sx-t tbody tr {
        padding: 13px 0 15px;
        border-bottom: 1px solid var(--gfd-line);
    }

    body.theme-gulf .gfd-sx-t tbody tr:last-child { border-bottom: 1px solid var(--gfd-rule); }

    /* الخط بقى على الصف نفسه، فالخلايا بتسيب خطوطها — وده يشمل قاعدة آخر صف
       الأعلى تخصيصًا، وإلا الخط الأحمر بيتكرر تلات مرات في آخر الجدول. */
    body.theme-gulf .gfd-sx-t tbody th,
    body.theme-gulf .gfd-sx-t tbody td,
    body.theme-gulf .gfd-sx-t tbody tr:last-child th,
    body.theme-gulf .gfd-sx-t tbody tr:last-child td {
        padding: 0;
        padding-inline-end: 0;
        border-bottom: 0;
    }

    body.theme-gulf .gfd-sx-e { margin-top: 8px; }

    body.theme-gulf .gfd-sx-cap { display: block; width: 100%; order: 2; }
}

/* ============================================================
   (2026-09-09) الخليج — التلات صفحات ذات النماذج:
   /register · /in-house-training-proposal · /course-finder

   ليه الملف ده: التلاتة كانوا بيتقروا كصفحة واحدة عند الأحد عشر معهد —
   شريط «STEP 1» ملوّن فوق شبكة حقول، شريط «STEP 2» فوق شبكة تانية، وعمود
   جانبي فيه بيانات المعهد و«ماذا يحدث بعد الإرسال؟» بتلات بنود؛ وصفحة
   البحث سطر قوائم منسدلة وخلاص. الألوان بس كانت بتفرق.

   البديل من نظام الخليج نفسه (فحمي، زوايا صفر، خطوط شعرة، مفيش بطاقات):
     /register  → سجلّ إدخال: صفوف «تسمية | حقل» متتابعة، من غير رؤوس أعمدة،
                  وبيانات المعهد شريط حالة سطر واحد تحت السجلّ.
     /inhouse   → جدول مواصفات حقيقي برأسين (البند | قيمتك)، صفوف أقل لأن كل
                  صف بيجمع أكتر من حقل، والتواصل في caption فوق الجدول.
     /course-finder → شريط بحث داكن بعرض الصفحة، وتحته جدول التخصصات المنشورة.

   القواعد القديمة اللي كانت بتمسك #register-section (في الملف ده وفي
   _institute.css) ما بقتش تلاقي عناصر: القوالب الجديدة بتطلع #gfd-rg و#gfd-ih،
   فالطبقة القديمة سابت مكانها لوحدها وباقي المعاهد ما اتأثرتش.

   التباين محسوب على --gfd-bg (#0a0d12): الأبيض 19:1، --gfd-mute (#99a1ad)
   7.5:1، --gfd-dim (#7c8492) 4.9:1، والنص الأحمر من --gfd-fm-red-t (#ff4a58)
   5.9:1. الأحمر التجاري #ea1a2d (4.3:1) للحدود والخطوط بس، وحشو الأزرار من
   --gfd-fm-red-fill (#d81324) عشان الأبيض فوقه يوصل 5.2:1.
   ============================================================ */

/* ── أرضية مشتركة للنموذجين + حقول مربّعة داكنة ───────────────
   color-scheme: dark بتخلّي قوائم <select> المنسدلة اللي بيرسمها النظام
   داكنة كمان — من غيرها بتفتح لوح أبيض فوق صفحة سودا. */
body.theme-gulf .gfd-rg,
body.theme-gulf .gfd-ih {
    background: var(--gfd-bg);
    color: #fff;
    color-scheme: dark;
    padding: 54px 0 74px;
}

body.theme-gulf .gfd-rg input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.theme-gulf .gfd-rg select,
body.theme-gulf .gfd-rg textarea,
body.theme-gulf .gfd-ih input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.theme-gulf .gfd-ih select,
body.theme-gulf .gfd-ih textarea,
body.theme-gulf .gfd-cf-bar select {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 !important;
    color: #fff;
    font-size: .93rem;
    line-height: 1.4;
    box-shadow: none;
}

body.theme-gulf .gfd-rg textarea.form-control,
body.theme-gulf .gfd-ih textarea.form-control { min-height: 92px; }

body.theme-gulf .gfd-rg .form-control::placeholder,
body.theme-gulf .gfd-ih .form-control::placeholder { color: #9aa3af; opacity: 1; }

body.theme-gulf .gfd-rg .form-control:focus,
body.theme-gulf .gfd-ih .form-control:focus,
body.theme-gulf .gfd-cf-bar .custom-form:focus {
    background: rgba(255, 255, 255, .09) !important;
    border-color: var(--gfd-red) !important;
    outline: 2px solid rgba(234, 26, 45, .45);
    outline-offset: 0;
    color: #fff;
    box-shadow: none;
}

/* المؤشّر الدوّار كان لونه text-dark (أسود) على لوح أسود */
body.theme-gulf .gfd-rg .spinner-border,
body.theme-gulf .gfd-cf-res .spinner-border { color: #fff !important; }

/* ============================================================
   /register — سجلّ الإدخال
   ============================================================ */

body.theme-gulf .gfd-rg-head {
    padding-bottom: 18px;
    border-bottom: 2px solid var(--gfd-red);
}

body.theme-gulf .gfd-rg-kick {
    display: block;
    margin-bottom: 9px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
}

body.theme-gulf .gfd-rg-h1 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
}

body.theme-gulf .gfd-rg-msg:not(:empty) { margin-top: 22px; }

/* الصف: عمود التسمية ثابت العرض عشان الحقول كلها تبتدي من نفس الخط —
   ده اللي بيخلّي الشكل يقرا كسجلّ مش كشبكة كروت. */
body.theme-gulf .gfd-rg-r {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 6px 34px;
    padding: 20px 0;
    border-bottom: 1px solid var(--gfd-line);
}

body.theme-gulf .gfd-rg-lab {
    margin: 0;
    padding-top: 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gfd-mute);
    line-height: 1.5;
}

/* آخر صف (الإرسال) بيقفل السجلّ بخط أحمر زي ما العنوان فتحه */
body.theme-gulf .gfd-rg-r-send { border-bottom: 1px solid var(--gfd-rule); }

body.theme-gulf .gfd-rg-note {
    margin: 10px 0 0;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-rg-link {
    display: inline-block;
    margin-top: 10px;
    font-size: .8rem;
    color: var(--gfd-fm-red-t);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .45);
}

body.theme-gulf .gfd-rg-link:hover,
body.theme-gulf .gfd-rg-link:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ── جهة الدفع: تبويبان مربّعان، مش شريط مراحل ─────────────── */
body.theme-gulf .gfd-rg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 0;
}

body.theme-gulf .gfd-rg-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0 !important;
    background: transparent;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.theme-gulf .gfd-rg-tabs .nav-link + .nav-link { border-inline-start: 0; }

body.theme-gulf .gfd-rg-tabs .nav-link.active {
    background: var(--gfd-fm-red-fill);
    border-color: var(--gfd-fm-red-fill);
    color: #fff;
}

/* (2026-09-12) الريبينت المولّد بيحط a:hover{color:var(--site-primary)!important}
   على الموقع كله — ودي نفس مشكلة الـtopbar الموثّقة في _institute.css.
   هنا التاب المفعّل خلفيته var(--gfd-fm-red-fill) وهي نفس اللون تقريبًا،
   فالمرور عليه كان بيخلّي الكلام أحمر على أحمر: rgb(234,26,45) على
   rgb(216,19,36) — فرق 34 درجة، عدّى من فحص التباين الآلي (عتبته 30)
   وبان بالعين. التابان بيحتفظوا بالأبيض، والإحساس بالمرور بييجي من
   الخلفية مش من لون الخط. */
body.theme-gulf .gfd-rg-tabs .nav-link:hover,
body.theme-gulf .gfd-rg-tabs .nav-link:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .10);
}

body.theme-gulf .gfd-rg-tabs .nav-link.active:hover,
body.theme-gulf .gfd-rg-tabs .nav-link.active:focus {
    color: #fff !important;
    background: var(--gfd-fm-red-fill);
    filter: brightness(1.1);
}

body.theme-gulf .gfd-rg-tabs .nav-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

body.theme-gulf .gfd-rg-tabs .nav-link svg { fill: currentColor; }

/* ── جدول المواعيد ─────────────────────────────────────────── */
body.theme-gulf .gfd-rg-sched {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    color: #fff;
    font-size: .86rem;
}

body.theme-gulf .gfd-rg-sched th,
body.theme-gulf .gfd-rg-sched td {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
    background: transparent;
    text-align: start;
    vertical-align: middle;
}

body.theme-gulf .gfd-rg-sched thead th {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfd-mute);
    border-bottom: 1px solid var(--gfd-rule);
}

body.theme-gulf .gfd-rg-sched .register-table-option-head { color: var(--gfd-dim); }
body.theme-gulf .gfd-rg-sched input[type="radio"] { accent-color: var(--gfd-red); }
body.theme-gulf #location_custom_validation:not(:empty) { margin-top: 10px; }

/* ── الرسوم: نفس صندوق get_course_fees_div بلا بطاقة ───────── */
body.theme-gulf .gfd-rg-fees .row { margin: 0; }
body.theme-gulf .gfd-rg-fees [class*="col-md-"] { padding: 0; max-width: none; flex: none; }

body.theme-gulf .gfd-rg-fees .fees-box {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--gfd-line);
    border-radius: 0;
}

body.theme-gulf .gfd-rg-fees .fees-box h6 {
    margin: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-rg-fees .fees-box h4 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 300;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

body.theme-gulf .gfd-rg-fees-none { margin: 12px 0 0; font-size: .86rem; color: var(--gfd-dim); }

/* ── كتلة بيانات المسجِّل (company_tab / self_tab) ────────────
   الماركب دي بترجع من السيرفر بالـajax زي ما هي كل مرة يتغيّر التبويب،
   فممنوع نعدّلها — التنسيق كله هنا. شبكة البوتستراب اتحوّلت لـgrid عشان
   الهوامش السالبة (margin:0 -15px) ما تطلّعش تمرير أفقي جوّه خلية السجلّ. */
body.theme-gulf .gfd-rg .search-inner-box .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

body.theme-gulf .gfd-rg .search-inner-box [class*="col-md-"] {
    flex: none;
    max-width: none;
    width: auto;
    padding: 0;
}

body.theme-gulf .gfd-rg .search-inner-box .col-md-12 { grid-column: 1 / -1; }
body.theme-gulf .gfd-rg .search-inner-box .col-md-8 { grid-column: span 2; }
body.theme-gulf .gfd-rg .search-inner-box .form-group { margin: 0; }

/* عناوين «بيانات المرشِّح» و«المشارك 1»: تسمية صغيرة على خط شعرة،
   مش عنوان قسم بلون وخلفية */
body.theme-gulf .gfd-rg .search-inner-box h5 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gfd-line);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
}

body.theme-gulf .gfd-rg .search-inner-box p { margin: 0; font-size: .8rem; line-height: 1.7; color: var(--gfd-dim); }
body.theme-gulf .gfd-rg .search-inner-box p b { color: #fff; }

/* زرار البحث بالبريد جوّه الحقل: الموضع من style السطر (يمين/شمال حسب اللغة)،
   واللون من هنا */
body.theme-gulf .gfd-rg .search-inner-box .input-group .btn {
    background: var(--gfd-fm-red-fill) !important;
    border: 0;
    border-radius: 0 !important;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 14px;
}

/* الكتلة اللي كانت رمادي فاتح (#f9f9f9 من style السطر) */
body.theme-gulf .gfd-rg [style*="#f9f9f9"] {
    background: rgba(255, 255, 255, .03) !important;
    border: 1px solid var(--gfd-line) !important;
    border-radius: 0 !important;
    padding: 16px;
}

body.theme-gulf .gfd-rg .addmore-participents,
body.theme-gulf .gfd-rg .remove-participents {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 18px;
}

body.theme-gulf .gfd-rg .addmore-participents:hover,
body.theme-gulf .gfd-rg .remove-participents:hover,
body.theme-gulf .gfd-rg .addmore-participents:focus-visible,
body.theme-gulf .gfd-rg .remove-participents:focus-visible {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--gfd-bg) !important;
}

/* ── الموافقات ─────────────────────────────────────────────── */
body.theme-gulf .gfd-rg-privacy {
    margin: 0 0 14px;
    max-width: 68ch;
    font-size: .82rem;
    line-height: 1.75;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-rg-privacy a { color: var(--gfd-fm-red-t); }

body.theme-gulf .gfd-rg-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0 0 10px;
    max-width: 78ch;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    color: #d4d9e0;
}

body.theme-gulf .gfd-rg-check input[type="checkbox"] {
    margin: 5px 0 0;
    width: 15px;
    height: 15px;
    accent-color: var(--gfd-red);
}

body.theme-gulf .gfd-rg-check a { color: var(--gfd-fm-red-t); }

/* ── الإرسال ───────────────────────────────────────────────── */
body.theme-gulf .gfd-rg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

body.theme-gulf .gfd-rg-btn {
    padding: 15px 30px;
    background: var(--gfd-fm-red-fill);
    border: 1px solid var(--gfd-fm-red-fill);
    border-radius: 0 !important;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.3;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* الزرار التاني ثانوي: خيار مش دعوة تانية بنفس الوزن */
body.theme-gulf .gfd-rg-btn-2 {
    background: transparent;
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

body.theme-gulf .gfd-rg-btn:hover,
body.theme-gulf .gfd-rg-btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--gfd-bg);
}

body.theme-gulf .gfd-rg-btn[disabled] { opacity: .55; cursor: default; }

/* ── شريط الحالة: بيانات المعهد سطر واحد تحت السجلّ ──────────
   بديل البطاقة الجانبية اللي كانت في الأحد عشر بنفس التلات بنود. */
body.theme-gulf .gfd-rg-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--gfd-line);
    font-size: .84rem;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-rg-status-n {
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-rg-status a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

body.theme-gulf .gfd-rg-status a:hover,
body.theme-gulf .gfd-rg-status a:focus-visible { color: var(--gfd-fm-red-t); border-bottom-color: var(--gfd-fm-red-t); }

/* ============================================================
   /in-house-training-proposal — ورقة المواصفات
   ============================================================ */

body.theme-gulf .gfd-ih-head {
    padding-bottom: 16px;
    margin-bottom: 4px;
}

body.theme-gulf .gfd-ih-kick {
    display: block;
    margin-bottom: 9px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gfd-fm-red-t);
}

body.theme-gulf .gfd-ih-h1 {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 300;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.25;
}

body.theme-gulf .gfd-ih-msg:not(:empty) { margin: 18px 0; }

body.theme-gulf .gfd-ih-wrap { overflow-x: auto; }

body.theme-gulf .gfd-ih-t {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* الحاشية فوق الجدول عن قصد: التواصل بيتقرا قبل ما الزائر يبدأ يكتب،
   من غير بطاقة في عمود جانبي */
body.theme-gulf .gfd-ih-cap {
    caption-side: top;
    padding: 0 0 20px;
    text-align: start;
    color: var(--gfd-mute);
}

body.theme-gulf .gfd-ih-cap-t {
    display: block;
    max-width: 66ch;
    font-size: .88rem;
    line-height: 1.75;
}

body.theme-gulf .gfd-ih-cap-c {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin-top: 10px;
    font-size: .84rem;
}

body.theme-gulf .gfd-ih-cap-n {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-ih-cap-c a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 74, 88, .5);
}

body.theme-gulf .gfd-ih-cap-c a:hover,
body.theme-gulf .gfd-ih-cap-c a:focus-visible { color: var(--gfd-fm-red-t); border-bottom-color: var(--gfd-fm-red-t); }

body.theme-gulf .gfd-ih-t thead th {
    padding: 0 0 12px;
    border-bottom: 2px solid var(--gfd-red);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gfd-mute);
    text-align: start;
    vertical-align: bottom;
}

body.theme-gulf .gfd-ih-t .gfd-ih-c-k { width: 30%; }
body.theme-gulf .gfd-ih-t .gfd-ih-c-v { width: 70%; }

body.theme-gulf .gfd-ih-t tbody th,
body.theme-gulf .gfd-ih-t tbody td {
    padding: 16px 0;
    border-bottom: 1px solid var(--gfd-line);
    text-align: start;
    vertical-align: middle;
}

body.theme-gulf .gfd-ih-t tbody th {
    padding-inline-end: 28px;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
}

body.theme-gulf .gfd-ih-t tbody tr:last-child th,
body.theme-gulf .gfd-ih-t tbody tr:last-child td { border-bottom: 1px solid var(--gfd-rule); }

/* خلايا فيها أكتر من حقل: هي دي اللي بتخلّي الصفوف أقل من سجلّ التسجيل */
body.theme-gulf .gfd-ih-pair > *,
body.theme-gulf .gfd-ih-trio > *,
body.theme-gulf .gfd-ih-grid > * { min-width: 0; }

body.theme-gulf .gfd-ih-t td.gfd-ih-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.theme-gulf .gfd-ih-t td.gfd-ih-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.theme-gulf .gfd-ih-t td.gfd-ih-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.theme-gulf .gfd-ih-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-top: 26px;
}

body.theme-gulf .gfd-ih-btn {
    padding: 15px 34px;
    background: var(--gfd-fm-red-fill);
    border: 1px solid var(--gfd-fm-red-fill);
    border-radius: 0 !important;
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.3;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body.theme-gulf .gfd-ih-btn:hover,
body.theme-gulf .gfd-ih-btn:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--gfd-bg);
}

body.theme-gulf .gfd-ih-req { font-size: .8rem; color: var(--gfd-dim); }

/* ============================================================
   /course-finder — شريط البحث + جدول التخصصات
   ============================================================ */

/* الشريط بعرض الصفحة: السكشن نفسه block عرضه كامل، فالخلفية بتوصل للحافتين
   من غير 100vw — أي vw هنا بيزوّد عرض شريط التمرير ويعمل تمرير أفقي. */
body.theme-gulf .gfd-cf-bar {
    background: var(--gfd-bg);
    border-bottom: 2px solid var(--gfd-red);
    color: #fff;
    color-scheme: dark;
    padding: 46px 0 40px;
}

body.theme-gulf .gfd-cf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 24px;
    margin-bottom: 26px;
}

body.theme-gulf .gfd-cf-h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
}

body.theme-gulf .gfd-cf-sub {
    margin: 0;
    max-width: 60ch;
    font-size: .88rem;
    line-height: 1.7;
    color: var(--gfd-mute);
}

/* التسميات للقارئ الصوتي: القيمة الأولى في القائمة هي التسمية البصرية */
body.theme-gulf .gfd-cf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.theme-gulf .gfd-cf-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 12px;
}

body.theme-gulf .gfd-cf-f { min-width: 0; }

/* find-my-course.css بتثبّت العرض والـfloat والزوايا بـ!important، فلازم
   نغلبها بنفس الوزن — الملف ده بيتحمّل بعدها. */
body.theme-gulf .gfd-cf-bar .custom-form.category,
body.theme-gulf .gfd-cf-bar .custom-form.course-level,
body.theme-gulf .gfd-cf-bar .custom-form.competency {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 44px;
}

body.theme-gulf .gfd-cf-bar .chosen-container {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    color: #fff !important;
}

body.theme-gulf .gfd-cf-bar .chosen-container-multi .chosen-choices {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 !important;
    color: #fff !important;
    min-height: 44px !important;
}

body.theme-gulf .gfd-cf-bar .chosen-container-active .chosen-choices {
    border: 1px solid var(--gfd-red) !important;
    box-shadow: none !important;
}

body.theme-gulf .gfd-cf-bar .chosen-container-multi .chosen-choices li.search-field input[type="text"] { color: #cfd4db !important; }

body.theme-gulf .gfd-cf-bar .chosen-container-multi .chosen-choices li.search-choice {
    background: var(--gfd-fm-red-fill);
    border: 1px solid var(--gfd-fm-red-fill);
    border-radius: 0;
    color: #fff;
}

body.theme-gulf .gfd-cf-bar .chosen-container .chosen-drop { background: #12171f; border: 0; }

body.theme-gulf .gfd-cf-bar .chosen-container-multi .chosen-results {
    background-color: #12171f !important;
    border: 1px solid var(--gfd-red) !important;
    border-radius: 0 !important;
    color: #e6e8ec;
}

body.theme-gulf .gfd-cf-bar .chosen-container .chosen-results li.highlighted { background: var(--gfd-fm-red-fill); color: #fff; }

body.theme-gulf .gfd-cf-bar .search-btns.gfd-cf-go {
    position: relative;
    width: auto !important;
    float: none !important;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 26px !important;
    background: var(--gfd-fm-red-fill) !important;
    border: 1px solid var(--gfd-fm-red-fill) !important;
    border-radius: 0 !important;
    box-shadow: none;
    color: #fff !important;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

body.theme-gulf .gfd-cf-bar .search-btns.gfd-cf-go:hover,
body.theme-gulf .gfd-cf-bar .search-btns.gfd-cf-go:focus-visible {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--gfd-bg) !important;
}

/* ── النتايج ───────────────────────────────────────────────── */
/* حاوية النتايج بتفضل بلا ارتفاع قبل أول بحث: أي حشو هنا بيسيب فراغ ميّت
   بين شريط البحث والجدول. الحشو بيتحط لما تتملي بالنتايج. */
body.theme-gulf .gfd-cf-res { padding: 0; }
body.theme-gulf .gfd-cf-res #coursefinder_list_courses:not(:empty) { padding: 34px 0 8px; }
body.theme-gulf .gfd-cf-load { padding: 30px 0; }
body.theme-gulf .gfd-cf-res .new-courselist-content { background: transparent; padding: 0; }
body.theme-gulf .gfd-cf-res .courselisting { background: #12171f !important; border: 1px solid var(--gfd-line) !important; border-radius: 0 !important; box-shadow: none !important; }
body.theme-gulf .gfd-cf-res .course-title { color: #fff; }
body.theme-gulf .gfd-cf-res .course-language { color: var(--gfd-mute); }
body.theme-gulf .gfd-cf-res .courselisting-col .btn { border-radius: 0 !important; background: var(--gfd-fm-red-fill); border-color: var(--gfd-fm-red-fill); color: #fff; }
body.theme-gulf .gfd-cf-res h4 { color: #fff !important; }

/* ── جدول التخصصات ─────────────────────────────────────────── */
body.theme-gulf .gfd-cf-cats { padding: 44px 0 66px; }
body.theme-gulf .gfd-cf-wrap { overflow-x: auto; }

body.theme-gulf .gfd-cf-t {
    width: 100%;
    border-collapse: collapse;
}

body.theme-gulf .gfd-cf-cap {
    caption-side: bottom;
    padding-top: 16px;
    max-width: 76ch;
    text-align: start;
    font-size: .82rem;
    line-height: 1.7;
    color: var(--gfd-dim);
}

body.theme-gulf .gfd-cf-t thead th {
    padding: 0 0 11px;
    border-bottom: 2px solid var(--gfd-red);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gfd-mute);
    text-align: start;
}

body.theme-gulf .gfd-cf-t .gfd-cf-c-t { width: 62%; }
body.theme-gulf .gfd-cf-t .gfd-cf-c-g { width: 38%; }

body.theme-gulf .gfd-cf-t tbody th,
body.theme-gulf .gfd-cf-t tbody td {
    padding: 11px 0;
    border-bottom: 1px solid var(--gfd-line);
    text-align: start;
    vertical-align: baseline;
    font-weight: 400;
}

body.theme-gulf .gfd-cf-t tbody th { padding-inline-end: 28px; }

body.theme-gulf .gfd-cf-t tbody tr:last-child th,
body.theme-gulf .gfd-cf-t tbody tr:last-child td { border-bottom: 1px solid var(--gfd-rule); }

body.theme-gulf .gfd-cf-t tbody tr:hover th,
body.theme-gulf .gfd-cf-t tbody tr:hover td { background: rgba(234, 26, 45, .08); }

body.theme-gulf .gfd-cf-s a {
    font-size: .95rem;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

body.theme-gulf .gfd-cf-s a:hover,
body.theme-gulf .gfd-cf-s a:focus-visible { color: var(--gfd-fm-red-t); border-bottom-color: var(--gfd-fm-red-t); }

body.theme-gulf .gfd-cf-g { font-size: .84rem; color: var(--gfd-mute); }

/* ============================================================
   العربي: الحروف المتباعدة والـuppercase للاتيني بس — التباعد بيمطّ الكلمة
   العربية والـuppercase بلا معنى فيها. نفس المعالجة المتبعة في باقي بلوكات
   .gfd في الملف.
   ============================================================ */
body[dir="rtl"].theme-gulf .gfd-rg-kick,
body[dir="rtl"].theme-gulf .gfd-rg-h1,
body[dir="rtl"].theme-gulf .gfd-rg-lab,
body[dir="rtl"].theme-gulf .gfd-rg-tabs .nav-link,
body[dir="rtl"].theme-gulf .gfd-rg-sched thead th,
body[dir="rtl"].theme-gulf .gfd-rg-fees .fees-box h6,
body[dir="rtl"].theme-gulf .gfd-rg .search-inner-box h5,
body[dir="rtl"].theme-gulf .gfd-rg-btn,
body[dir="rtl"].theme-gulf .gfd-rg-status-n,
body[dir="rtl"].theme-gulf .gfd-rg .addmore-participents,
body[dir="rtl"].theme-gulf .gfd-rg .remove-participents,
body[dir="rtl"].theme-gulf .gfd-ih-kick,
body[dir="rtl"].theme-gulf .gfd-ih-t thead th,
body[dir="rtl"].theme-gulf .gfd-ih-cap-n,
body[dir="rtl"].theme-gulf .gfd-ih-btn,
body[dir="rtl"].theme-gulf .gfd-cf-h1,
body[dir="rtl"].theme-gulf .gfd-cf-t thead th,
body[dir="rtl"].theme-gulf .gfd-cf-bar .search-btns.gfd-cf-go {
    text-transform: none;
    letter-spacing: 0;
}

body[dir="rtl"].theme-gulf .gfd-rg-lab,
body[dir="rtl"].theme-gulf .gfd-ih-t thead th,
body[dir="rtl"].theme-gulf .gfd-cf-t thead th { font-size: .8rem; }

/* ============================================================
   شاشات أضيق
   ============================================================ */

@media (max-width: 991px) {
    body.theme-gulf .gfd-rg,
    body.theme-gulf .gfd-ih { padding: 40px 0 54px; }

    /* السجلّ بيتفكّ لتسمية فوق حقلها — عمود تسمية 200px بياكل عرض الحقل */
    body.theme-gulf .gfd-rg-r { grid-template-columns: 1fr; gap: 10px; padding: 16px 0; }
    body.theme-gulf .gfd-rg-lab { padding-top: 0; }

    body.theme-gulf .gfd-cf-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.theme-gulf .gfd-cf-f-wide { grid-column: 1 / -1; }
    body.theme-gulf .gfd-cf-bar .search-btns.gfd-cf-go { grid-column: 1 / -1; justify-content: center; }
}

@media (max-width: 767px) {
    body.theme-gulf .gfd-rg .search-inner-box .row { grid-template-columns: 1fr; }
    body.theme-gulf .gfd-rg .search-inner-box .col-md-8 { grid-column: 1 / -1; }
    body.theme-gulf .gfd-rg-actions .gfd-rg-btn { flex: 1 1 100%; }

    body.theme-gulf .gfd-ih-t td.gfd-ih-pair,
    body.theme-gulf .gfd-ih-t td.gfd-ih-trio,
    body.theme-gulf .gfd-ih-t td.gfd-ih-grid { grid-template-columns: 1fr; }

    /* الجدول بيتفكّ لصفوف مكدّسة: عمودين على 390px بيخنقوا الحقول.
       رؤوس الأعمدة بتتخفي بصريًا وبتفضل للقارئ الصوتي، والـcaption بترجع
       فوق بالـorder لأن تفكيك الجدول لـblocks بيلغي caption-side. */
    body.theme-gulf .gfd-ih-t { display: flex; flex-direction: column; table-layout: auto; }
    body.theme-gulf .gfd-ih-t thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    body.theme-gulf .gfd-ih-cap { order: 0; padding-bottom: 16px; }
    body.theme-gulf .gfd-ih-t tbody { order: 1; }
    body.theme-gulf .gfd-ih-t tbody,
    body.theme-gulf .gfd-ih-t tr,
    body.theme-gulf .gfd-ih-t tbody th,
    body.theme-gulf .gfd-ih-t tbody td { display: block; width: auto; }
    body.theme-gulf .gfd-ih-t tbody tr:first-child { border-top: 2px solid var(--gfd-red); }
    body.theme-gulf .gfd-ih-t tbody tr { padding: 14px 0 16px; border-bottom: 1px solid var(--gfd-line); }
    body.theme-gulf .gfd-ih-t tbody tr:last-child { border-bottom: 1px solid var(--gfd-rule); }
    body.theme-gulf .gfd-ih-t tbody th,
    body.theme-gulf .gfd-ih-t tbody td,
    body.theme-gulf .gfd-ih-t tbody tr:last-child th,
    body.theme-gulf .gfd-ih-t tbody tr:last-child td { padding: 0; padding-inline-end: 0; border-bottom: 0; }
    body.theme-gulf .gfd-ih-t tbody th {
        margin-bottom: 8px;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gfd-mute);
    }
    body[dir="rtl"].theme-gulf .gfd-ih-t tbody th { text-transform: none; letter-spacing: 0; font-size: .8rem; }

    body.theme-gulf .gfd-cf-form { grid-template-columns: 1fr; }
    body.theme-gulf .gfd-cf-cats { padding: 34px 0 50px; }
    body.theme-gulf .gfd-cf-t .gfd-cf-c-t,
    body.theme-gulf .gfd-cf-t .gfd-cf-c-g { width: auto; }
}

/* لوح التبويبات: الطبقة القديمة بتدي #nav-tabContent خلفية #1b1f26 بـ!important،
   فالكتلة بتقرا كبطاقة جوّه السجلّ. السجلّ ورقة واحدة متصلة — الخلفية بتتشال
   وبتفضل الكتلة الداخلية (اللي كانت #f9f9f9) هي الوحيدة اللي بتتلوّن. */
body.theme-gulf .gfd-rg #nav-tabContent {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
}

/* =====================================================================
   (2026-09-09) الخليج — صفحتا تفاصيل المقال والمدونة، معمار مستقل لكل واحدة.

   الخلفية: كل المعاهد كانت بتتشارك نفس الهيكل (بطاقة نص + ريل ٤ كروت)، فالصفحة
   كانت بتتقرا واحدة في الـ11 مهما اتغيّرت الألوان. القواعد القديمة
   (body.pg-post-page .blog-webinar-articles-details-*) اتسابت مكانها من غير
   تعديل — التركيب الجديد بأسماء .gfa-* و.gfb-* فما بتلاقيش عناصر تنطبق عليها
   على الخليج، وباقي المعاهد ما اتأثرتش.

   .gfa-*  صفحة المقال  — رأسية بالكامل على فحمي: مانشيت بعرض الشاشة ثم ورقة قراية
                          بيضا ثم جدول عمودين.
   .gfb-*  صفحة المدونة — أفقية على ورق فاتح: شريط داكن لاصق على حافة البداية
                          شايل العنوان، والنص جنبه، وسطر مرتبطة في الذيل.
   ===================================================================== */

/* ── صفحة المقال: المانشيت ─────────────────────────────────────────── */
/* أغمق من خلفية الصفحة (#10161f) بدرجة عشان يقرا كلوح منفصل من غير حدود —
   الخليج زواياه صفر وحدوده شعرة، فالفرق في القيمة هو الفاصل. */
body.theme-gulf .gfa-mast {
    background: var(--gfd-bg, #0a0d12);
    border-bottom: 2px solid var(--gfd-red, #ea1a2d);
    padding: 46px 0 clamp(56px, 7vw, 92px);
}

body.theme-gulf .gfa-in {
    width: min(1180px, 100% - 48px);
    margin-inline: auto;
}

/* فتات الخبز جوّه لوح داكن: خلفية bootstrap الفاتحة بتتشال بالكامل */
body.theme-gulf .gfa-mast .gfa-crumbs .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 26px;
    font-size: .76rem;
}

body.theme-gulf .gfa-mast .gfa-crumbs .breadcrumb-item,
body.theme-gulf .gfa-mast .gfa-crumbs .breadcrumb-item a { color: #a7aeba; }
body.theme-gulf .gfa-mast .gfa-crumbs .breadcrumb-item a:hover { color: var(--gfa-red-t, #ff5b66); }
body.theme-gulf .gfa-mast .gfa-crumbs .breadcrumb-item + .breadcrumb-item::before { color: #5d6675; }

/* أحمر فاتح للنصوص الصغيرة على الفحمي: الأحمر الأساسي (#ea1a2d) تباينه 4.3:1
   على #0a0d12 — تحت الحد. التدرّج ده 6.4:1 وبيفضل نفس اللون في العين. */
body.theme-gulf { --gfa-red-t: #ff5b66; }

/* السطر الفوقاني: حروف متباعدة صغيرة — نبرة الخليج في كل صفحاته */
body.theme-gulf .gfa-eyebrow {
    margin: 0 0 18px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gfa-red-t, #ff5b66);
}

body[dir="rtl"].theme-gulf .gfa-eyebrow { letter-spacing: 0; text-transform: none; font-size: .84rem; }

/* العنوان الضخم: هو بطل الصفحة، مش صورة ولا لوجو */
body.theme-gulf .gfa-title {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(2.1rem, 6.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: #fff;
}

body[dir="rtl"].theme-gulf .gfa-title { letter-spacing: 0; line-height: 1.2; }

/* التاريخ تحت العنوان على خط أحمر قصير — مش شارة ولا أيقونة */
body.theme-gulf .gfa-date {
    margin: 30px 0 0;
    padding-top: 14px;
    display: inline-block;
    border-top: 2px solid var(--gfd-red, #ea1a2d);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #c3c9d2;
    font-variant-numeric: tabular-nums;
}

body[dir="rtl"].theme-gulf .gfa-date { letter-spacing: 0; text-transform: none; font-size: .86rem; }

/* ── صفحة المقال: ورقة القراية ─────────────────────────────────────── */
/* ورقة بيضا واقفة وسط الفحمي ومطلعة فوق شوية على حد المانشيت — الحد الأحمر
   بيفضل باين من الجنبين، فالورقة تقرا كإنها متحطّة على اللوح مش جزء منه. */
body.theme-gulf .gfa-paper {
    position: relative;
    background: #fff;
    width: min(748px, 100% - 48px);
    /* بداية الورقة على نفس بداية العنوان في المانشيت (نفس حساب هامش .gfa-in) —
       صفحة غير متماثلة: الورقة على بداية السطر والفراغ الفحمي في الآخر. */
    margin-block: -34px 0;
    margin-inline-start: max(24px, calc((100% - 1180px) / 2));
    margin-inline-end: auto;
    padding: clamp(34px, 5vw, 64px) clamp(22px, 4vw, 60px);
}

/* عرض القراية: 56ch بتدّي ~70 حرف مقاسة فعليًا على 1440 (وحدة ch أعرض من
   متوسط الحرف الحقيقي، فالرقم اتظبط بالقياس مش بالحساب). ده الفرق الأهم عن
   التركيب القديم اللي كان بيمدّ النص على عرض العمود كله. */
body.theme-gulf .gfa-read {
    max-width: 56ch;
    margin-inline: auto;
    color: #1e2732;
    font-size: 1.02rem;
    line-height: 1.85;
}

body.theme-gulf .gfa-read p { margin: 0 0 1.25em; }
body.theme-gulf .gfa-read p:last-child { margin-bottom: 0; }
body.theme-gulf .gfa-read a { color: #b3121f; text-decoration: underline; }
body.theme-gulf .gfa-read a:hover { color: #10161f; }

/* عناوين جوّه النص: خط أحمر رفيع فوقها بدل أي صندوق */
body.theme-gulf .gfa-read h1,
body.theme-gulf .gfa-read h2,
body.theme-gulf .gfa-read h3,
body.theme-gulf .gfa-read h4,
body.theme-gulf .gfa-read h5,
body.theme-gulf .gfa-read h6 {
    margin: 2.1em 0 .7em;
    padding-top: .8em;
    border-top: 1px solid rgba(16, 22, 31, .16);
    font-size: 1.06rem;
    font-weight: 800;
    line-height: 1.35;
    color: #10161f;
}

body.theme-gulf .gfa-read > :first-child,
body.theme-gulf .gfa-read > :first-child > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }

body.theme-gulf .gfa-read ul,
body.theme-gulf .gfa-read ol { margin: 0 0 1.25em; padding-inline-start: 1.3em; }
body.theme-gulf .gfa-read li { margin-bottom: .5em; }
/* الأحمر الغامق على الأبيض (7:1) — الأحمر الأساسي بيدّي 4.48 بالعافية */
body.theme-gulf .gfa-read li::marker { color: #b3121f; }
body.theme-gulf .gfa-read img { max-width: 100%; height: auto; }
body.theme-gulf .gfa-read blockquote {
    margin: 1.6em 0;
    padding-inline-start: 20px;
    border-inline-start: 2px solid var(--gfd-red, #ea1a2d);
    font-size: 1.05rem;
}

/* أي جدول جاي من قاعدة البيانات بيتمرّر جوّه نفسه بدل ما يوسّع الصفحة */
body.theme-gulf .gfa-read table { display: block; width: 100%; overflow-x: auto; }

/* حاويات bootstrap اللي جوّه محتوى قاعدة البيانات (col-md-12) ما تعملش هوامش */
body.theme-gulf .gfa-read > [class*="col-"],
body.theme-gulf .gfa-read [class*="col-md-"] { width: auto; max-width: none; padding: 0; flex: none; }

/* ── صفحة المقال: المرتبطة كجدول بعمودين ──────────────────────────── */
body.theme-gulf .gfa-more { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 84px); }

body.theme-gulf .gfa-more-h {
    margin: 0 0 26px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--gfd-red, #ea1a2d);
    font-size: clamp(1.15rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

body[dir="rtl"].theme-gulf .gfa-more-h { letter-spacing: 0; text-transform: none; }

body.theme-gulf .gfa-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; }

body.theme-gulf .gfa-tbl thead th {
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gfd-mute, #99a1ad);
    text-align: start;
}

body[dir="rtl"].theme-gulf .gfa-tbl thead th { letter-spacing: 0; text-transform: none; font-size: .8rem; }

body.theme-gulf .gfa-tbl tbody th,
body.theme-gulf .gfa-tbl tbody td {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    vertical-align: baseline;
    text-align: start;
    font-weight: 400;
}

body.theme-gulf .gfa-tbl tbody tr:last-child th,
body.theme-gulf .gfa-tbl tbody tr:last-child td { border-bottom: 1px solid rgba(234, 26, 45, .85); }

body.theme-gulf .gfa-tbl .gfa-tbl-t { width: auto; padding-inline-end: 28px; }

body.theme-gulf .gfa-tbl tbody .gfa-tbl-t a {
    color: #fff;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

body.theme-gulf .gfa-tbl tbody .gfa-tbl-t a:hover,
body.theme-gulf .gfa-tbl tbody .gfa-tbl-t a:focus-visible { color: var(--gfa-red-t, #ff5b66); text-decoration: underline; }

body.theme-gulf .gfa-tbl .gfa-tbl-d {
    width: 8.5rem;
    color: var(--gfd-mute, #99a1ad);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── صفحة المدونة: ورق فاتح، والشريط الداكن هو اللي بيحمل الهوية ──── */
/* الصفحة دي فاتحة عن قصد: لو الاتنين داكنين بنفس الطريقة يبقى الفرق بينهم
   لون بس، وده بالظبط اللي اترفض. الهوية بتفضل موجودة في الشريط الفحمي
   والخط الأحمر وزوايا الصفر. */
/* !important لازم هنا: الطبقة القديمة فيها body.theme-gulf{background:#10161f!important}
   بتخلّي كل صفحات الموقع داكنة. الاستثناء مقصور على صفحة تفاصيل المدونة بالذات
   (page-blogs + pg-post-page) عشان تفضل النقيض البصري لصفحة المقال. */
body.theme-gulf.page-blogs.pg-post-page { background: #eceef1 !important; }

body.theme-gulf .gfb-grid {
    display: grid;
    grid-template-columns: minmax(250px, 27%) minmax(0, 1fr);
    align-items: start;
}

/* الشريط لاصق على حافة البداية بالظبط (من غير حاوية) — ده الشكل المميّز للصفحة */
body.theme-gulf .gfb-rail {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    background: #10161f;
    border-inline-end: 2px solid var(--gfd-red, #ea1a2d);
    padding: clamp(40px, 5vw, 72px) clamp(22px, 2.6vw, 40px);
}

/* اللزق تحت الهيدر الثابت (شريط 40px + هيدر 83px) */
body.theme-gulf .gfb-rail-in { position: sticky; top: 140px; }

body.theme-gulf .gfb-eyebrow {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gfd-red, #ea1a2d);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #c3c9d2;
}

body[dir="rtl"].theme-gulf .gfb-eyebrow { letter-spacing: 0; text-transform: none; font-size: .82rem; }

body.theme-gulf .gfb-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #fff;
}

body[dir="rtl"].theme-gulf .gfb-title { letter-spacing: 0; line-height: 1.35; }

body.theme-gulf .gfb-date {
    margin: 22px 0 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gfd-mute, #99a1ad);
    font-variant-numeric: tabular-nums;
}

body[dir="rtl"].theme-gulf .gfb-date { letter-spacing: 0; text-transform: none; font-size: .88rem; }

/* عمود النص جنب الشريط — مش تحته */
body.theme-gulf .gfb-main {
    grid-column: 2;
    grid-row: 1;
    max-width: 748px;
    background: #fff;
    padding: clamp(36px, 4.5vw, 66px) clamp(22px, 4vw, 70px) clamp(28px, 3vw, 44px);
}

body.theme-gulf .gfb-crumbs .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0 0 28px;
    font-size: .76rem;
}

body.theme-gulf .gfb-crumbs .breadcrumb-item,
body.theme-gulf .gfb-crumbs .breadcrumb-item a { color: #5d6675; }
body.theme-gulf .gfb-crumbs .breadcrumb-item a:hover { color: #b3121f; }

body.theme-gulf .gfb-prose {
    max-width: 56ch;
    color: #1e2732;
    font-size: 1.02rem;
    line-height: 1.85;
}

body.theme-gulf .gfb-prose p { margin: 0 0 1.25em; }
body.theme-gulf .gfb-prose a { color: #b3121f; text-decoration: underline; }
body.theme-gulf .gfb-prose a:hover { color: #10161f; }

/* عناوين المدونة الداخلية: خط أحمر جانبي بدل الخط الفوقاني بتاع المقال —
   الصفحتان لازم يبانوا مختلفين حتى جوّه النص نفسه. */
body.theme-gulf .gfb-prose h1,
body.theme-gulf .gfb-prose h2,
body.theme-gulf .gfb-prose h3,
body.theme-gulf .gfb-prose h4,
body.theme-gulf .gfb-prose h5,
body.theme-gulf .gfb-prose h6 {
    margin: 2em 0 .7em;
    padding-inline-start: 16px;
    border-inline-start: 3px solid var(--gfd-red, #ea1a2d);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.35;
    color: #10161f;
}

body.theme-gulf .gfb-prose > :first-child,
body.theme-gulf .gfb-prose > :first-child > :first-child { margin-top: 0; }

body.theme-gulf .gfb-prose ul,
body.theme-gulf .gfb-prose ol { margin: 0 0 1.25em; padding-inline-start: 1.3em; }
body.theme-gulf .gfb-prose li { margin-bottom: .5em; }
body.theme-gulf .gfb-prose li::marker { color: #b3121f; }
body.theme-gulf .gfb-prose img { max-width: 100%; height: auto; }
body.theme-gulf .gfb-prose table { display: block; width: 100%; overflow-x: auto; }
body.theme-gulf .gfb-prose > [class*="col-"],
body.theme-gulf .gfb-prose [class*="col-md-"] { width: auto; max-width: none; padding: 0; flex: none; }

/* ── صفحة المدونة: المرتبطة سطر واحد بفواصل ───────────────────────── */
body.theme-gulf .gfb-tail {
    grid-column: 2;
    grid-row: 2;
    max-width: 748px;
    background: #fff;
    padding: 0 clamp(22px, 4vw, 70px) clamp(40px, 5vw, 64px);
}

body.theme-gulf .gfb-also {
    max-width: 56ch;
    margin: 0;
    padding-top: 22px;
    border-top: 2px solid var(--gfd-red, #ea1a2d);
    font-size: .92rem;
    line-height: 2;
    color: #414b58;
}

body.theme-gulf .gfb-also-l {
    display: inline;
    margin-inline-end: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #5a6371;
}

body[dir="rtl"].theme-gulf .gfb-also-l { letter-spacing: 0; text-transform: none; font-size: .82rem; }

body.theme-gulf .gfb-also a { color: #10161f; text-decoration: none; border-bottom: 1px solid rgba(16, 22, 31, .28); }
body.theme-gulf .gfb-also a:hover,
body.theme-gulf .gfb-also a:focus-visible { color: #b3121f; border-bottom-color: #b3121f; }
body.theme-gulf .gfb-sep { margin: 0 6px; color: #b3121f; font-weight: 700; }

/* ── الموبايل ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* الشريط بيبقى لوح فوق النص، وبيبطّل لزق — اللزق على شاشة قصيرة بيبلع النص */
    body.theme-gulf .gfb-grid { grid-template-columns: 1fr; }
    body.theme-gulf .gfb-rail {
        grid-column: 1;
        grid-row: auto;
        border-inline-end: 0;
        border-bottom: 2px solid var(--gfd-red, #ea1a2d);
    }
    body.theme-gulf .gfb-rail-in { position: static; }
    body.theme-gulf .gfb-main,
    body.theme-gulf .gfb-tail { grid-column: 1; grid-row: auto; }
}

@media (max-width: 767px) {
    body.theme-gulf .gfa-in { width: calc(100% - 36px); }
    /* نفس هامش .gfa-in على الموبايل (18px) عشان الورقة تفضل مصفوفة مع العنوان */
    body.theme-gulf .gfa-paper { width: calc(100% - 36px); margin-block-start: -22px; margin-inline-start: 18px; }
    body.theme-gulf .gfa-title { max-width: none; }

    /* الجدول بيفضل جدول (عمودين حقيقيين) لكن عمود التاريخ بيضيق ويلتفّ سطرين
       بدل ما يدفع الصفحة عرض — صفر تمرير أفقي على 390px. */
    body.theme-gulf .gfa-tbl .gfa-tbl-d { width: 5.4rem; white-space: normal; font-size: .74rem; }
    body.theme-gulf .gfa-tbl .gfa-tbl-t { padding-inline-end: 14px; }
    body.theme-gulf .gfa-tbl tbody .gfa-tbl-t a { font-size: .95rem; }
}

/* (2026-09-09) tarteeb abna' al-card fi al-DOM: price-box thumma ul thumma zurar.
   al-grid kan mabni 3ala tarteeb tani, fa sandouq as-si3r akhad 3amud at-tafaseel
   wal-kalam itqatta3. tathbeet kul 3unsur fi 3amudo bil-class mish bit-tarteeb. */
body.theme-gulf.pg-training-courses .session-card > ul { grid-column: 1; grid-row: 1; }
body.theme-gulf.pg-training-courses .session-card > .price-box { grid-column: 2; grid-row: 1; width: auto; }
body.theme-gulf.pg-training-courses .session-card > .text-end { grid-column: 3; grid-row: 1; }
/* 3amud as-si3r kan 150px fal-"AED 21,120" kan biyitqass. */
body.theme-gulf.pg-training-courses .session-card { grid-template-columns: 1fr 190px 190px !important; }
body.theme-gulf.pg-training-courses .session-card .feestoggle-select { width: auto; min-width: 128px; }
/* at-tafaseel kanet grid 2 3amud fa at-tareekh kan biyitlaf. saf maren:
   kul 3unsur biyakhud 3ardo at-tabee3i wal-baqi biyilef lo ihtag. */
body.theme-gulf.pg-training-courses .session-card > ul {
    display: flex !important; flex-wrap: wrap; gap: 4px 26px; align-items: center;
}
body.theme-gulf.pg-training-courses .session-card > ul > li { white-space: nowrap; }

/* (2026-09-09) tlb: kul haga fi satr wahid 3ala nafs al-khatt, was-si3r bara
   al-murabba3. al-card baqa saf flex wahid, wa sandouq as-si3r baqa bidun hudud
   wala khalfiya fa as-si3r biyiqra inline gamb at-tafaseel. */
body.theme-gulf.pg-training-courses .session-card {
    display: flex !important;
    align-items: center;
    gap: 0 28px;
    flex-wrap: nowrap;
    padding: 12px 4px !important;
}
body.theme-gulf.pg-training-courses .session-card > ul {
    flex: 1 1 auto; min-width: 0;
    display: flex !important; flex-wrap: nowrap; align-items: center; gap: 0 26px;
}
body.theme-gulf.pg-training-courses .session-card > ul > li {
    white-space: nowrap; margin: 0 !important;
}
body.theme-gulf.pg-training-courses .session-card > .price-box {
    flex: 0 0 auto; width: auto;
    border: 0 !important; background: transparent !important;
    padding: 0 !important; border-radius: 0 !important;
    display: flex; align-items: center; gap: 10px;
}
body.theme-gulf.pg-training-courses .session-card > .price-box .feestoggle-select {
    border: 0 !important; background: transparent !important;
    color: #fff !important; font-weight: 700; padding-inline: 0 !important;
    min-width: 0; width: auto;
}
/* "Per participant" gamb as-si3r mish tahto. */
body.theme-gulf.pg-training-courses .session-card > .price-box > *:not(.position-relative) {
    white-space: nowrap; font-size: .78rem; opacity: .75;
}
body.theme-gulf.pg-training-courses .session-card > .text-end {
    flex: 0 0 auto; margin: 0 !important;
}

/* (2026-09-09) as-si3r bad-dollar bass — al-select itshal fa .price-tag ma3adsh
   sandouq. shil al-hudud al-hamra wal-khalfiya, wa hut as-si3r ba3d at-tafaseel. */
body.theme-gulf.pg-training-courses .session-card .price-tag{
    background:transparent!important;border:0!important;padding:0!important;
    display:flex;align-items:center;gap:10px;white-space:nowrap;
}
body.theme-gulf.pg-training-courses .session-card .price-tag .clearfix{display:none}
body.theme-gulf.pg-training-courses .session-card .fee-usd{
    color:#fff!important;font-weight:700;font-size:1rem;
}
body.theme-gulf.pg-training-courses .session-card > ul{order:1}
body.theme-gulf.pg-training-courses .session-card > .price-box{order:2}
body.theme-gulf.pg-training-courses .session-card > .text-end{order:3}

/* ─────────────────────────────
   (2026-09-09) نوافذ الاستفسار والاتصال: كانت بنفس الشكل بالحرف
   في كل المواقع (رأس رمادي، حقول صناديق، زرار بعرض النافذة) —
   والفرق لون بس. الاختلاف هنا في المعمار: مكان العنوان، شكل
   الحقل، واستدارة الزرار وعرضه. الـmarkup ومعرّفات الحقول
   (سيلزفورس) ما اتلمستش.
   ملحوظة تانية: العلامة على h2 بلا كلاس (+ .inst-logos-h) بس.
   كانت على كل h2 فنزلت على حاجات مش عناوين أقسام: تسمية حقل
   (PHONE)، سطر مسار (ARCHIVE / DOWNLOADS)، سؤال في الأسئلة
   الشائعة، وعنوان تمهيدي ارتفاعه 17px. العناوين المشتركة للأقسام
   بتتكتب <h2> بلا كلاس، واللي ليه كلاس عنده تنسيقه في ثيمه.
   ───────────────────────────── */

/* نافذة الخليج: لوح داكن وشريط أحمر في الرأس، حقول داكنة بحد سفلي
   أحمر، وزرار كبسولة محدّد بالأحمر — نفس نبرة الموقع. */
body.theme-gulf .modal-content{background:#10161f;border:0;border-radius:0;color:#e6e8ec}
body.theme-gulf .modal-header{background:#ea1a2d;border:0;border-radius:0;padding:14px 22px}
body.theme-gulf .modal-title{color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:1rem}
body.theme-gulf .modal-content > p{padding:14px 22px 0;color:#8b93a1;font-size:.86rem}
body.theme-gulf .modal-body label{color:#c3c8d1}
body.theme-gulf .modal-body .form-control{
    background:#1b1f26!important;color:#e6e8ec!important;
    border:0!important;border-bottom:1px solid #ea1a2d!important;border-radius:0!important}
body.theme-gulf .modal-body .btn-primary{
    background:transparent!important;border:1px solid #ea1a2d!important;color:#fff!important;
    border-radius:999px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
body.theme-gulf .modal-body .btn-primary:hover{background:#ea1a2d!important}

/* ─────────────────────────────
   (2026-09-09) صفحة الشروط والخصوصية: كانت بنفس التخطيط بالحرف في
   الـ12 موقع. النص القانوني ما اتغيّرش؛ العرض هو اللي اتغيّر —
   الخليج قائمة مرقّمة: رقم ضخم مفرّغ جنب العنوان، والنص عمودين.
   ───────────────────────────── */
body.theme-gulf.pg-policy-page{counter-reset:gfsec}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h5{
    counter-increment:gfsec;display:flex;align-items:baseline;gap:14px;
    margin:40px 0 10px;text-transform:uppercase;letter-spacing:.06em;font-size:.98rem}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 h5::before{
    content:counter(gfsec,decimal-leading-zero);
    font-size:1.9rem;font-weight:700;line-height:1;color:transparent;
    -webkit-text-stroke:1px #ea1a2d}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 p{column-count:2;column-gap:40px;text-align:start}

/* ─────────────────────────────
   (2026-09-09) خريطة الموقع: كانت نفس القائمة بنفس عدد الأعمدة
   في الـ12 موقع. الروابط ما اتغيّرتش — اللي اتغيّر عدد الأعمدة
   وشكل عنوان المجموعة والفواصل.
   ───────────────────────────── */

/* الخليج — قائمة مرقّمة داكنة: رقم مفرّغ أحمر، أربع أعمدة، وفاصل
   بين كل سطر والتاني. */
body.theme-gulf.page-sitemap{counter-reset:gfmap}
body.theme-gulf.page-sitemap h5.no-margin{
    counter-increment:gfmap;display:flex;align-items:baseline;gap:12px;
    margin:34px 0 10px;text-transform:uppercase;letter-spacing:.06em;font-size:.94rem}
body.theme-gulf.page-sitemap h5.no-margin::before{
    content:counter(gfmap,decimal-leading-zero);font-size:1.5rem;font-weight:700;
    line-height:1;color:transparent;-webkit-text-stroke:1px #ea1a2d}
body.theme-gulf.page-sitemap .sitemap-list{column-count:4;column-gap:30px}
body.theme-gulf.page-sitemap .sitemap-list li{
    border-bottom:1px solid rgba(255,255,255,.08);padding:5px 0;break-inside:avoid}

/* ─────────────────────────────
   (2026-09-09) اللمسة الفنية: علامة واحدة مميّزة للموقع

   كل معهد له علامة بتتكرّر على عناوين الأقسام (h2) في كل صفحاته.
   العلامة مشتقّة من أداة الموقع نفسها، فهي بتقوّي الهوية بدل ما
   تكون زينة عشوائية. CSS و::before/::after بس — مفيش تغيير markup.
   ملحوظة: العلامة على عناوين الأقسام (h2) بس. عنوان الصفحة في البنر
   عنده علامته الخاصة في كل ثيم أصلاً بمحدّدات فيها id، ومحاولة
   إضافة علامة تانية فوقها كانت بتتغلب أو تتلخبط معاها.
   ───────────────────────────── */

/* الخليج — قائمة داكنة حادّة: شرطة مائلة حمراء قبل العنوان. */
body.theme-gulf h2:not([class]),
body.theme-gulf h2.inst-logos-h{display:flex;align-items:center;gap:14px}
body.theme-gulf h2:not([class])::before,
body.theme-gulf h2.inst-logos-h::before{
    content:"";flex:0 0 auto;width:5px;height:1.05em;background:#ea1a2d;
    transform:skewX(-18deg)}

/* ─────────────────────────────
   (2026-09-09) قوائم الدورات: فكّ تجمّع التصاميم

   قياس على 11 موقع × صفحة التخصص طلّع تلات عناقيد بس:
     شبكة كروت بصورة 4/صف : الخليج، جلوماك، سمارت، بلَس، أبفا
     صفوف جدول            : جلوبال، القادة، السعودية
     كروت من غير صورة     : المورد، عُمان، عربي
   يعني ستة مواقع بنفس الشكل. كل موقع هنا رجع لأداته.
   ───────────────────────────── */

/* الخليج — قائمة مرقّمة داكنة: الكروت بقت صفوف بعرض الصفحة، من غير
   صور، ورقم كبير مفرّغ على شمال كل صف. الصور كانت بتحطّه في نفس
   عنقود "شبكة كروت 4 في صف" مع خمس مواقع تانية. */
/* (2026-09-10) الـcounter-reset كان على `.courselisting-col` — يعني
   على كل صف لوحده، فكان بيصفّر العدّاد قبل كل زيادة والصفوف كلها
   بتطلع 01. الصفر لازم يكون على الحاوية مرة واحدة. */
body.theme-gulf.pg-training-courses #course_list,
body.theme-gulf.pg-training-courses #category_course_list,
body.theme-gulf.pg-training-courses #category_course_list_by_name{counter-reset:gflist}
/* الأعمدة بتتحدّد من .courselist-style-inside .row (grid) مش من
   كلاس col- — الكرت جوّه <a> جوّه .courselisting-col بلا كلاس. */
/* الشبكة بتتحدّد بمحدّد فيه id (#category_course_list / #course_list)
   فلازم نفس التخصيص هنا، وإلا القاعدة القديمة بتغلب. */
body.theme-gulf.pg-training-courses #category_course_list,
body.theme-gulf.pg-training-courses #course_list{
    display:grid!important;grid-template-columns:1fr!important;gap:0!important}
/* (2026-09-10) الصف كان grid من تلات أعمدة، والبيانات كلها في العمود
   التاني — والـgrid بيحطّ كل عنصر في صف لوحده، فـ`display:inline-block`
   عليهم ما كانش بيعمل حاجة. النتيجة: العنوان وتحته أربع سطور كل واحد
   بعرض 1064px وفيه كلمتين، والنص التاني من الصف فاضي.

   الصف بقى flex في سطر واحد: الرقم، العنوان بياخد المسافة الفاضية،
   وبعده التاريخ واللغة والصيغة والمدينة كوسوم متجاورة، والزرار في
   الآخر. على الشاشات الضيّقة بيلفّ لسطرين بدل ما يطلع بره. */
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting{
    counter-increment:gflist;
    /* (2026-09-18) طلب صريح: التاريخ/اللغة/النوع مش تحت بعض بين الصفوف.
       flexbox مع flex-basis:0 فضل بيدّي عرض عنوان متفاوت بين الصفوف رغم
       كل الخواص مضبوطة صح (تعقيد داخلي في حساب flex-grow مع نص بيلف).
       شبكة CSS بدل flexbox بتحل المشكلة من جذرها: عمود العنوان
       minmax(0,1fr) وباقي الأعمدة عرضها ثابت، فمفيش حساب نسبي يتفاوت. */
    display:grid!important;grid-template-columns:minmax(0,1fr) 158px 158px 158px 158px;
    position:relative;align-items:center;column-gap:16px;row-gap:8px;
    padding:18px 18px 18px 36px!important;
    border:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important;
    border-radius:0!important;box-shadow:none!important;background:transparent!important}
/* (2026-09-10) الأرقام اتشالت بطلب صريح. مكانها شريط أحمر رفيع على
   حرف الصف — نفس الشرطة المائلة الحمرا اللي بتسبق عناوين الخليج، بس
   واقفة. بتكبر وتتشبع عند المرور، ومعاها غسلة حمرا خفيفة بتمشي من
   ناحية الشريط، فالصف بيرد على الماوس من غير ما يتحرّك.
   (2026-09-18) بقى position:absolute بدل ما يكون عنصر شبكة: كان
   بياخد أول عمود ويزحزح كل الأعمدة اللي بعده معاه. */
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting::before{
    content:"";
    position:absolute;inset-inline-start:18px;top:0;bottom:0;width:2px;
    background:var(--site-primary,#ea1a2d);opacity:.34;
    transition:opacity .2s ease,width .2s ease}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting:hover::before{
    opacity:1;width:5px}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting{
    background-image:linear-gradient(90deg,rgba(234,26,45,.10),rgba(234,26,45,0) 42%);
    background-repeat:no-repeat;background-size:0 100%;
    transition:background-size .28s ease}
body[dir="rtl"].theme-gulf.pg-training-courses .courselist-style-inside .courselisting{
    background-image:linear-gradient(270deg,rgba(234,26,45,.10),rgba(234,26,45,0) 42%);
    background-position:100% 0}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting:hover{
    background-size:100% 100%}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-image{display:none!important}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-title{
    grid-column:1;min-width:0;margin:0;white-space:normal;overflow-wrap:anywhere}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-title *{
    white-space:normal}
/* عمود صريح لكل بيان بدل الترقيم التلقائي: صف الأونلاين شارة لغة
   واحدة بس (بدون "Face-to-Face")، فالترقيم كان بيحط الزرار في عمود
   النوع بدل عموده هو. */
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-date{grid-column:2}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-language{grid-column:3}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-language ~ .course-language{grid-column:4}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-date,
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-language,
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-location,
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-time{
    margin:0;font-size:.78rem;white-space:nowrap;
    display:inline-flex;align-items:center;gap:6px;min-width:0}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting > form{
    grid-column:5;margin:0}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting > form .btn{white-space:nowrap}
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .space5,
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .space15{display:none}
/* الصف الافتراضي كان لسه ماسك شريط الكرت الأحمر العلوي من قاعدة
   `.courselisting.virtual` الأقدم — تخصيصها أعلى بكلاس، فمحتاجة نفس
   التخصيص عشان تتساوى مع باقي الصفوف. */
body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting.virtual{
    border:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
@media (max-width:991px){
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting{
        grid-template-columns:minmax(0,1fr)!important}
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-title,
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-date,
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-language,
    /* (2026-09-18) اللغة التانية (Face-to-Face) كانت بتاخد عمود ٤ من قاعدة
       ".course-language ~ .course-language" (أخص من اللي فوق) فبتفتح عمود
       ضمني وتضغط عمود العنوان لـ~118px. لازم تتضمّن هنا. */
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting .course-language ~ .course-language,
    body.theme-gulf.pg-training-courses .courselist-style-inside .courselisting > form{grid-column:1}
}

/* في بعض الثيمات فيه قاعدة أخصّ فيها .inst-tc كمان، فلازم نسخة
   بنفس التخصيص وإلا بتغلب. */
body.theme-gulf.pg-training-courses .inst-tc #category_course_list,
body.theme-gulf.pg-training-courses .inst-tc #course_list{
    display:grid!important;grid-template-columns:1fr!important;gap:0!important}

/* ─────────────────────────────
   (2026-09-10) صفحة تفاصيل المقال: فكّ التشابه

   تمن مواقع كانت بنفس الشكل — عمود نص واحد في النص بعرض
   490-694px. أسماء الحاويات مختلفة في كل ثيم بس الصورة واحدة.
   اللي بيفرق شكل صفحة نص: عدد الأعمدة، عرض سطر القراءة، ووجود
   إطار أو عمود جانبي. النص نفسه ما اتغيّرش.
   ───────────────────────────── */

/* الخليج — قائمة داكنة: سطر قراءة أعرض بكتير (كان 508px) وخط أحمر
   قبل كل عنوان فرعي، فالصفحة بقت لوح عريض مش عمود ضيّق. */
body.theme-gulf.pg-post-page .gfa-in{max-width:1000px}
body.theme-gulf.pg-post-page .gfa-in p{max-width:none;line-height:1.8}
body.theme-gulf.pg-post-page .gfa-in h2,
body.theme-gulf.pg-post-page .gfa-in h3,
body.theme-gulf.pg-post-page .gfa-in h4{
    border-inline-start:4px solid #ea1a2d;padding-inline-start:14px;margin-top:34px}

/* ─────────────────────────────
   (2026-09-10) صفحة التسجيل: الخليج كان من غير تصميم خاص (زي المورد
   وجلوماك وأبفا) فورث شكل المعهد. الحقول ومعرّفاتها مربوطة بسيلزفورس
   وما اتلمستش — اللي اتغيّر شكل الحقل وعنوان الخطوة.
   ───────────────────────────── */
body.theme-gulf #register-section .form-control{
    background:#1b1f26!important;color:#e6e8ec!important;
    border:0!important;border-bottom:1px solid #ea1a2d!important;border-radius:0!important}
body.theme-gulf #register-section label{color:#c3c8d1}
body.theme-gulf #register-section h4,
body.theme-gulf #register-section h5{
    display:flex;align-items:center;gap:14px;
    text-transform:uppercase;letter-spacing:.06em;font-size:.96rem;margin:28px 0 16px}
body.theme-gulf #register-section h4::before,
body.theme-gulf #register-section h5::before{
    content:"";flex:0 0 auto;width:5px;height:1.05em;background:#ea1a2d;transform:skewX(-18deg)}

/* (2026-09-10) اللوجو العربي بقى SVG بيتحقن inline، ونصّه currentColor —
   الهيدر داكن فبياخد أبيض. */
body.theme-gulf #dt-header-section .main-logo{color:#fff}

/* ─────────────────────────────
   (2026-09-10) شريط الفيديو فوق الفوتر — الخليج بس.

   نفس أداة البنر: الفيلم بيغطّي الشريط، لون البراند تحته، طبقة داكنة
   فوقه، والعنوان أبيض في النص. الفرق إنه بنص ارتفاع البنر (260 بدل
   520+) ومن غير أزرار — الطلب كان الكلام يفضل والزرار يتشال.

   الإطار متكبّر لنفس سبب البنر: مشغّل يوتيوب بيرسم أثاثه جوّه نفسه
   (زراير في النص، "More videos" والووردمارك تحت) وما ينفعش يتقفل من
   بره — فالتكبير بيطلّع الأثاث ده خارج المرئي وبيسيب نص الصورة بس.
   ───────────────────────────── */
body.theme-gulf .gf-film{
    position:relative;overflow:hidden;
    min-height:260px;
    padding:40px 20px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;color:#fff;
    /* اللون بيفضل تحت: هو اللي الشاشة الضيّقة بتشوفه، واللي بيملا
       الشريط في الثواني قبل ما الفيلم يحمّل. */
    background:var(--site-primary,#ea1a2d);
}

body.theme-gulf .gf-film-reel{
    position:absolute;inset:0;z-index:0;pointer-events:none;
}

/* الفيلم بيظهر لما المشغّل يقول إنه بيلعب — مش عند load. embed مرفوض
   بيعمل load برضه وبيرسم مستطيل أسود، والانتظار ده بيمنعه يظهر أصلاً. */
body.theme-gulf .gf-film-reel iframe{
    position:absolute;top:50%;left:50%;
    width:150vw;height:84.4vw;min-height:150%;min-width:266.7vh;
    transform:translate(-50%,-50%);
    border:0;pointer-events:none;
    opacity:0;transition:opacity 1s ease;
}
body.theme-gulf .gf-film-reel.is-playing iframe{opacity:1}

/* فوق الفيلم مش بدله: غامق كفاية للحبر الأبيض على أي كادر. */
body.theme-gulf .gf-film::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,
        rgba(14,4,6,.72) 0%,
        rgba(14,4,6,.58) 50%,
        rgba(14,4,6,.78) 100%);
}

body.theme-gulf .gf-film-inner{
    position:relative;z-index:2;max-width:760px;margin:0 auto;
}
body.theme-gulf .gf-film-inner h2{
    color:#fff;font-weight:900;font-size:2.1rem;line-height:1.15;
    letter-spacing:-.02em;margin:0 0 10px;
}
body.theme-gulf .gf-film-lede{
    font-size:1rem;opacity:.92;margin:0 auto;max-width:56ch;
}

@media (max-width:991px){
    body.theme-gulf .gf-film{min-height:190px;padding:32px 18px}
    body.theme-gulf .gf-film-inner h2{font-size:1.6rem}
}

/* (2026-09-10) صناديق الجدول جوّه كرت نتايج البحث كانت لسه بلمسة
   بنفسج المعهد (rgba(114,124,245,.09)) على أرضية الخليج الغامقة.
   إخفاء الصورة وتمديد المتن بقوا في _institute.css لكل المعاهد. */
body.theme-gulf.pg-search-page .course-details-wrap{
    background:rgba(255,255,255,.05)!important;
}

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

   الكروت دي كانت بصور بطلب صريح (2026-09-05)، والطلب اتغيّر: الدورات
   تتعرض من غير صور. الصورة كانت `.inst-upcoming-thumb` — span بخلفية
   CSS مش عنصر img، عشان كده ما ظهرتش في مسح `.course-image`.

   شيلة الصورة بتسيب حاجتين لازم يتظبطوا:
   1) شريحة التاريخ كانت `position:absolute` فوق الصورة — من غير صورة
      كانت هتقع على العنوان. بقت في سياق الكرت في أوّله.
   2) الكرت كان بزوايا مدوّرة وإطار خفيف عشان الصورة تتقص جوّه. من
      غير صورة بياخد موتيف الخليج نفسه في باقي الموقع: شريط أحمر
      علوي 3px وزوايا قايمة.
   ───────────────────────────── */
body.theme-gulf .inst-upcoming-thumb{display:none!important}

body.theme-gulf .inst-upcoming-list a{
    border-radius:0;
    border:0;
    border-top:3px solid var(--site-primary,#ea1a2d);
    padding:0;
}
body.theme-gulf .inst-upcoming-list a:hover{
    border-color:var(--site-primary,#ea1a2d);
    background:#26262b;
}

/* التاريخ: كبسولة حمرا في أوّل الكرت بدل شريحة عايمة فوق صورة. */
body.theme-gulf .inst-upcoming-date{
    position:static;
    align-self:flex-start;
    margin:14px 14px 0;
    padding:5px 12px;
    border-radius:999px;
    font-size:.74rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}
body.theme-gulf .inst-upcoming-day{font-size:.86rem;font-weight:800}
body.theme-gulf .inst-upcoming-month{font-size:.74rem}

body.theme-gulf .inst-upcoming-body{padding:10px 14px 14px}
body.theme-gulf .inst-upcoming-title{min-height:3.4em}

/* التاريخ كان بيتكرّر تلات مرات في الكرت الواحد: الكبسولة (15 SEP)،
   وسطر `.inst-upcoming-meta` (15 Sep 2026 + Online)، وسطر
   `.inst-upcoming-meta2` (15 - 19 Sep, 2026 + اللغة + Online). مع
   الصورة كان التكرار ده مش باين؛ من غيرها بقى هو كل الكرت. السطر
   الأوسط اتشال — الكبسولة فيها يوم البداية، وmeta2 فيها المدى كاملاً
   والصيغة. الملف ده الخليج بس، فباقي المعاهد زي ما هي. */
body.theme-gulf .inst-upcoming-meta{display:none}

/* ─────────────────────────────
   (2026-09-10) بانر صفحة الدورة من غير صورة — الخليج.

   الموقع كله بقى بلا صور دورات؛ الصورة في بانر صفحة التفاصيل كانت آخر
   واحدة. `.gf-cd` هي لفّة نسخة الخليج من صفحة الدورة، وهي اللي
   بتفرّقها عن صفحة القائمة — الاتنين بياخدوا نفس كلاس الـbody
   (`pg-training-courses`) ونفس `#common-banner-section-image`.

   مع اختفاء الصورة العنوان بياخد عرض البانر، والحشو اللي كان متسايب
   لها بيتشال.
   ───────────────────────────── */
/* القاعدة على كل البانرات المصوّرة مش صفحة الدورة بس: نفس الصورة
   كانت في بانر /training-courses و/new-training-courses وصفحات
   المدن. بانرات الأيقونات لها id تاني (`#common-banner-section-icon`)
   فما اتلمستش. */
body.theme-gulf #common-banner-section-image .common-banner-image{display:none!important}
body.theme-gulf #common-banner-section-image .common-banner-section-box{gap:0}
body.theme-gulf #common-banner-section-image .common-banner-text{
    flex:1 1 auto;width:auto;max-width:none;text-align:start}

/* ─────────────────────────────
   (2026-09-10) قوايم الـselect المفتوحة في صفحة التسجيل

   الـ`.form-control` عندنا أرضيتها غامقة وحبرها فاتح، لكن قايمة
   الاختيارات اللي بتنفتح بيرسمها المتصفح بأرضيته البيضا وبيورّث لون
   الحبر من الـselect — فالحبر الفاتح كان بيختفي على الأبيض.

   `option` محتاجة أرضيتها وحبرها بالصريح. مش بتظهر في السكرين شوت
   لأن القايمة دي بيرسمها نظام التشغيل بره الصفحة، فالتأكيد هنا
   بالقياس على العناصر نفسها.
   ───────────────────────────── */
body.theme-gulf select.form-control option,
body.theme-gulf #register-section select option,
body.theme-gulf select option{
    /* !important لأن فيه قاعدة أعمّ في CSS الموقع بتحطّ حبر كحلي
       (#16233d) على الـoption، وهو غامق زي الأرضية فبيختفي برضه. */
    background-color:#1b1f26!important;
    color:#e6e8ec!important;
}
body.theme-gulf select.form-control option:checked,
body.theme-gulf select option:checked{
    background-color:#ea1a2d!important;
    color:#fff!important;
}

/* ─────────────────────────────
   (2026-09-10) خلفية قسم المدن سودا — طلب صريح.

   `_institute.css` بيدّي `.inst-cities` أرضية فاتحة (#f6f8fa)، وده
   كان بيقطع اللوح الغامق في صفحة المدينة وفي الرئيسية. القسم بقى
   غامق زي باقي الخليج، فالحبر والظل والتحويم لازم يتقلبوا معاه:
   اسم المدينة أبيض، والتحويم أرضية أفتح شوية مش أفتح من الأبيض.
   ───────────────────────────── */
body.theme-gulf .inst-cities{background:#0d1218}
body.theme-gulf .inst-cities-head h2{color:#fff}
body.theme-gulf .gf-cities-name{color:#e6e8ec}
body.theme-gulf .gf-cities-item:hover{background:rgba(255,255,255,.06)}
body.theme-gulf .gf-cities-item:hover .gf-cities-name{color:#fff}
/* الظل تحت العلم كان مقيس على أرضية فاتحة؛ على أرضية سودا مش بيبان
   وبيغمّق الحرف. حلقة رفيعة بدله بتفصل العلم عن الأرضية. */
body.theme-gulf .gf-cities-flag{
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 22px rgba(0,0,0,.45)}

/* الصف الأخير في المنتصف — طلب صريح.
   الـgrid ما بيقدرش يوسّط صف ناقص: الخانات متحدّدة سلفًا فالعناصر
   بتقع في أول أعمدة الصف وتسيب الباقي فاضي على الجنب. flex بيوزّع
   حسب عدد العناصر الفعلي، فالصف المكتمل بيفضل زي ما هو والناقص
   بيتوسّط. العرض متحسوب عشان يفضل ٦ في الصف زي الـgrid بالظبط. */
body.theme-gulf .gf-cities-grid{
    display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
body.theme-gulf .gf-cities-item{
    flex:0 0 calc((100% - 5 * 22px) / 6)}
@media (max-width:991px){
    body.theme-gulf .gf-cities-item{flex-basis:calc((100% - 3 * 22px) / 4)}
}
@media (max-width:575px){
    body.theme-gulf .gf-cities-grid{gap:14px}
    body.theme-gulf .gf-cities-item{flex-basis:calc((100% - 2 * 14px) / 3)}
}

/* ─────────────────────────────
   (2026-09-10) ألوان كبسولات التخصصات على هوية الخليج — طلب صريح
   "عايز الألوان تمشي تصميم الموقع".

   كانت خمس تينتات باستيل (وردي/أزرق/ذهبي/بيچ/بنفسجي) من طلب أقدم
   (2026-09-05) — ألوان مالهاش وجود في أي حتة تانية في الموقع.
   الخليج كله أحمر #ea1a2d وغامق #10161f وأبيض، فالكبسولة بقت غامقة
   بحبر أبيض وسهم أحمر: نفس أداة الهيدر والفوتر وشريط المدن.
   عند التحويم بتتملي أحمر.
   ───────────────────────────── */
body.theme-gulf .gf-categories-pill,
body.theme-gulf .gf-categories-pill:nth-child(5n+2),
body.theme-gulf .gf-categories-pill:nth-child(5n+3),
body.theme-gulf .gf-categories-pill:nth-child(5n+4),
body.theme-gulf .gf-categories-pill:nth-child(5n){
    background:#10161f;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 4px 14px rgba(16,22,31,.18);
}
body.theme-gulf .gf-categories-title{color:#e6e8ec}
body.theme-gulf .gf-categories-arrow,
body.theme-gulf .gf-categories-pill:nth-child(5n+2) .gf-categories-arrow{
    background:var(--site-primary,#ea1a2d);color:#fff}
body.theme-gulf .gf-categories-pill:hover{
    background:var(--site-primary,#ea1a2d);
    border-color:var(--site-primary,#ea1a2d);
    box-shadow:0 12px 26px rgba(234,26,45,.28)}
body.theme-gulf .gf-categories-pill:hover .gf-categories-title{color:#fff}
body.theme-gulf .gf-categories-pill:hover .gf-categories-arrow{
    background:#fff;color:var(--site-primary,#ea1a2d)}

/* ─────────────────────────────
   (2026-09-10) فاصل أحمر بعرض الشاشة بين القسمين — طلب صريح.

   قسم الدورات القادمة (#141416) وقسم المدن (#0d1218) لونين غامقين
   قريبين من بعض، فالحد بينهم كان مش باين والقسمين بيقروا ككتلة
   واحدة. خط أحمر بعرض الشاشة بيفصلهم — نفس أحمر البراند اللي
   بيفصل الصفوف في القوايم.
   ───────────────────────────── */
body.theme-gulf .inst-cities{
    border-top:2px solid var(--site-primary,#ea1a2d);
}

/* ─────────────────────────────
   (2026-09-10) صفحة السياسات والخصومات

   الصفحة دي كلاسها `page-policy` مش `pg-policy-page`، فما كانتش
   بتاخد أي من قواعد الخليج وفضلت صناديق بيضا بحبر غامق على لوح
   غامق — ومعاها كتلة حمرا مصمتة بعرض الصفحة.

   بقت على نفس أداة الموقع: بطاقات #1b1f26 بشريط أحمر علوي وحبر
   فاتح. الكتلة الحمرا بقت بطاقة زيهم عشان الأحمر يفضل للتفاصيل
   (الشريط والروابط) مش لوح كامل.
   ───────────────────────────── */
body.theme-gulf.page-policy #common-listing-section,
body.theme-gulf.page-policy .common-listing-section-wrap{background:#10161f!important;color:#e6e8ec}
body.theme-gulf.page-policy .box4{
    background:#1b1f26!important;border:0!important;
    border-top:3px solid #ea1a2d!important;border-radius:0!important;
    box-shadow:none!important;color:#e6e8ec!important}
body.theme-gulf.page-policy .box4.background-listing,
body.theme-gulf.page-policy .box4.sky-bg{background:#1b1f26!important}
body.theme-gulf.page-policy .box4 h1,
body.theme-gulf.page-policy .box4 h2,
body.theme-gulf.page-policy .box4 h3,
body.theme-gulf.page-policy .box4 h4,
body.theme-gulf.page-policy .box4 h5,
body.theme-gulf.page-policy .box4 h6,
body.theme-gulf.page-policy .box4 strong,
body.theme-gulf.page-policy .box4 b{color:#fff!important}
body.theme-gulf.page-policy .box4 p,
body.theme-gulf.page-policy .box4 li,
body.theme-gulf.page-policy .box4 td,
body.theme-gulf.page-policy .box4 span{color:#c9ccd3!important}
body.theme-gulf.page-policy .box4 a{color:#ff7a84!important}
body.theme-gulf.page-policy .box4 a:hover{color:#fff!important}

/* ─────────────────────────────
   (2026-09-10) فقرات الشروط والخصوصية في عمود واحد

   كانت `column-count:2` على كل فقرة. الفقرة الطويلة كانت بتقرا زي
   الجرنان، لكن الفقرة اللي سطرين كانت بتتقسم في نص الجملة —
   "…may change or modify this policy" في عمود و"without notice."
   في العمود التاني. عمود واحد بعرض قراية محدود أوضح.
   ───────────────────────────── */
/* جرّبت أنقل الأعمدة للحاوية عشان الفقرات تتوزّع ككتل كاملة، لكن
   القوايم فضلت بتتقسم بين العمودين وظهر overflow أفقي. الأبسط
   والأوضح: عمود واحد بعرض قراية محدود لكل الكتلة (فقرات وقوايم
   مع بعض) — وده الشكل المتعارف عليه في المستندات القانونية. */
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 p{
    column-count:1;max-width:none}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 .col-md-12{
    column-count:1;max-width:96ch}
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 ul,
body.theme-gulf.pg-policy-page .common-listing-section-wrap .box4 ol{
    column-count:1}

/* ─────────────────────────────
   (2026-09-11) صفحة نتايج البحث: فكّ التشابه

   المراجعة الشاملة طلّعت إن الصفحة دي هي الوحيدة اللي لسه بنفس
   التخطيط بالحرف في الـ11 موقع — نفس الكرت ونفس ترتيب البيانات،
   والفرق لون الزرار والحدّ بس. كل موقع بياخد أداته.
   ───────────────────────────── */
/* الخليج — سجل داكن: الكرت غامق بشريط أحمر علوي من قبل كده.
   الزيادة: عنوان بحروف كبيرة متباعدة وجدول بإطار خفيف. */
body.theme-gulf.pg-search-page .courselisting{
    padding:18px 22px!important;margin-bottom:18px}
body.theme-gulf.pg-search-page .course-title h6 a{
    text-transform:uppercase;letter-spacing:.04em;font-size:.92rem}
body.theme-gulf.pg-search-page .course-details-wrap{
    border:1px solid rgba(255,255,255,.10)!important;border-radius:0!important}

/* ─────────────────────────────
   (2026-09-11) خريطة الموقع بأداة صفحة الدورات — طلب صريح
   ───────────────────────────── */
/* الخليج: خط أحمر تحت كل صف وغسلة حمرا عند المرور — زي سجل
   الدورات بالظبط. */
body.theme-gulf .sitemap-list > li{border-bottom-color:rgba(234,26,45,.35)}
body.theme-gulf .sitemap-list > li > a{color:#c9ccd3}
body.theme-gulf .sitemap-list > li > a:hover{
    background:rgba(234,26,45,.12);color:#fff}


/* (2026-09-11) سهم الرجوع لفوق: كان نفس الزرار في الـ11 موقع (مربع 31px
   بأيقونة دايرة). كل موقع بقى له شكله؛ السهم مرسوم بـCSS بدل الأيقونة. */
body.theme-gulf #back-to-top{box-sizing:border-box;padding:0;overflow:visible}
body.theme-gulf #back-to-top i{display:none}
body.theme-gulf #back-to-top::before{content:'';position:absolute;left:50%;top:50%;
    width:10px;height:10px;border-top:2px solid currentColor;border-left:2px solid currentColor;
    transform:translate(-50%,-25%) rotate(45deg)}
body.theme-gulf #back-to-top{width:44px;height:44px;border:0!important;border-radius:0!important;
    background:var(--site-primary,#c8102e)!important;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.18)}
body.theme-gulf #back-to-top:hover{background:#111!important}


/* ─────────────────────────────
   (2026-09-12) ترتيب خانات الفلتر ومحرّك البحث — طلب صريح:
   "ننوّع في ترتيب الخانات مع الاحتفاظ دايمًا بالاسم في مكانه، بحيث ميبقاش
   موقع شبه التاني في الترتيب".

   الترتيب هنا بالـCSS بس (order) — الحقول نفسها ما اتلمستش: نفس الأسماء
   ونفس الـids اللي الفلتر والـJS بيقروها، ونفس الحقول المخفية.
   خانة اسم الدورة (search-input-main) سايبينها في مكانها الأول دايمًا.
   المعهد مستنّى: كل القواعد مربوطة بـbody.theme-gulf.
   ───────────────────────────── */

body.theme-gulf.pg-training-courses #common-filter-box-modal-one #sort_city{order:1}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one #sort_cat{order:2}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one #sort_month{order:3}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one #sort_course_year{order:4}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one #sort_lang{order:5}
body.theme-gulf .modal .form-group.row > .search-input-main{order:0}
body.theme-gulf .modal .form-group.row > .city-id{order:1}
body.theme-gulf .modal .form-group.row > .course-type{order:2}
body.theme-gulf .modal .form-group.row > .category-id{order:3}
body.theme-gulf .modal .form-group.row > .month-search{order:4}
body.theme-gulf .modal .form-group.row > .year-search{order:5}
body.theme-gulf .modal .form-group.row > .lang-id{order:6}

/* (2026-09-12) زرار Clear وزرار الكتيب وزرار البحث يفضلوا في مكانهم في الآخر:
   في flex أي عنصر order:0 بيسبق اللي عنده order:1، فلما الخانات اتظبطت 1..5
   الزراير كانت هتقفز لقدّام. هنا بيتثبتوا بعد الخانات. */
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color{order:90}
body.theme-gulf.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color,
body.theme-gulf.pg-training-courses #common-filter-box-modal-one #download_brochure_category{order:91}
body.theme-gulf .modal .form-group.row > .search-btn-main,
body.theme-gulf .modal .form-group.row > [class*="search-btn"],
body.theme-gulf .modal .form-group.row > .col-md-12:last-child{order:99}

/* ─────────────────────────────
   (2026-09-12) ترتيب خانات فورمات الاستفسار/الكتيب/اتصل بيا — طلب صريح:
   ننوّع الترتيب بين المواقع مع إبقاء خانات الاسم في مكانها.

   الاسم الأول والأخير ثابتين فوق، وزرار الإرسال ثابت تحت (order:99 فوق)،
   واللي بيتنقل: الشركة / الإيميل / التليفون / الرسالة.
   بالـCSS بس (order + :has) — الحقول وأسماءها وids زي ما هي.
   ───────────────────────────── */

body.theme-gulf .modal .form-group.row > div:has(#first_name_qe){order:1}
body.theme-gulf .modal .form-group.row > div:has(#last_name_qe){order:2}
body.theme-gulf .modal .form-group.row > div:has(#first_name_cb){order:1}
body.theme-gulf .modal .form-group.row > div:has(#last_name_cb){order:2}
body.theme-gulf .modal .form-group.row > div:has(#first_name_db){order:1}
body.theme-gulf .modal .form-group.row > div:has(#last_name_db){order:2}
body.theme-gulf .modal .form-group.row > div:has(#email_qe){order:3}
body.theme-gulf .modal .form-group.row > div:has(#company_qe){order:4}
body.theme-gulf .modal .form-group.row > div:has(#comments_qe){order:5}
body.theme-gulf .modal .form-group.row > div:has(#phone_qe){order:6}
body.theme-gulf .modal .form-group.row > div:has(#phone_cb){order:3}
body.theme-gulf .modal .form-group.row > div:has(#company_cb){order:4}
body.theme-gulf .modal .form-group.row > div:has(#phone_cb){order:3}
body.theme-gulf .modal .form-group.row > div:has(#company_db){order:4}
body.theme-gulf .modal .form-group.row > div:has(#email_db){order:5}

/* ─────────────────────────────
   (2026-09-12) "نوّعت بس في حاجات طويلة وحاجات قصيرة — خلي الشكل قد بعض" — طلب صريح.
   خانات النافذة أصلاً بعرض مختلف (col-md-3 / col-md-2 / col-md-1)، فبعد ما الترتيب
   اتغيّر بقى في خانة طويلة وخانة قصيرة جنب بعض. هنا: اسم الدورة وزرار البحث بعرض
   كامل، والست قوايم كلها نص العرض بالظبط — فالشكل منتظم مهما كان الترتيب.
   ───────────────────────────── */
body.theme-gulf .modal .form-group.row > .search-input-main,
body.theme-gulf .modal .form-group.row > .search-btn-main{flex:0 0 100%!important;max-width:100%!important}
body.theme-gulf .modal .form-group.row > .course-type,
body.theme-gulf .modal .form-group.row > .category-id,
body.theme-gulf .modal .form-group.row > .city-id,
body.theme-gulf .modal .form-group.row > .lang-id,
body.theme-gulf .modal .form-group.row > .month-search,
body.theme-gulf .modal .form-group.row > .year-search{flex:0 0 50%!important;max-width:50%!important}
@media (max-width:575px){
    body.theme-gulf .modal .form-group.row > .course-type,
    body.theme-gulf .modal .form-group.row > .category-id,
    body.theme-gulf .modal .form-group.row > .city-id,
    body.theme-gulf .modal .form-group.row > .lang-id,
    body.theme-gulf .modal .form-group.row > .month-search,
    body.theme-gulf .modal .form-group.row > .year-search{flex:0 0 100%!important;max-width:100%!important}
}

/* ─────────────────────────────
   (2026-09-12) "الهيكل العام متقارب" — طلب صريح.
   توحيد العرض خلّى كل النوافذ بنفس الهيكل (اسم فوق + تلات صفوف اتنين‑اتنين + زرار).
   هنا كل موقع له شكل شبكة مختلف: عمودين متساويين.
   الاسم فوق دايمًا وزرار البحث تحت، والترتيب اللي اتظبط قبل كده زي ما هو.
   ───────────────────────────── */

body.theme-gulf .modal .form-group.row > .course-type{flex:0 0 50%!important;max-width:50%!important}
body.theme-gulf .modal .form-group.row > .category-id{flex:0 0 50%!important;max-width:50%!important}
body.theme-gulf .modal .form-group.row > .city-id{flex:0 0 50%!important;max-width:50%!important}
body.theme-gulf .modal .form-group.row > .lang-id{flex:0 0 50%!important;max-width:50%!important}
body.theme-gulf .modal .form-group.row > .month-search{flex:0 0 50%!important;max-width:50%!important}
body.theme-gulf .modal .form-group.row > .year-search{flex:0 0 50%!important;max-width:50%!important}
@media (max-width:575px){
    /* (2026-09-12) طلب صريح: شكل بوب-أب البحث على الموبايل يتنوّع زي الديسكتوب.
       كان كل المواقع بتسطّح الست خانات لـ100% فطلعوا 8 صفوف متطابقة.
       العروض موزّعة حسب الترتيب المرئي لهذا الموقع تحديدًا (الترتيب مختلف
       من موقع لموقع) عشان كل صف يملا عرضه من غير فراغات.
       الاسم فوق وزرار البحث تحت زي ما اتفقنا. ليدرز ليه شكله الخاص أصلًا. */
    body.theme-gulf .modal .form-group.row > .city-id{flex:0 0 50%!important;max-width:50%!important}
    body.theme-gulf .modal .form-group.row > .course-type{flex:0 0 50%!important;max-width:50%!important}
    body.theme-gulf .modal .form-group.row > .category-id{flex:0 0 50%!important;max-width:50%!important}
    body.theme-gulf .modal .form-group.row > .month-search{flex:0 0 50%!important;max-width:50%!important}
    body.theme-gulf .modal .form-group.row > .year-search{flex:0 0 50%!important;max-width:50%!important}
    body.theme-gulf .modal .form-group.row > .lang-id{flex:0 0 50%!important;max-width:50%!important}
}


/* (2026-09-12) طلب صريح: صفحة الدورات الأونلاين بس — اسم الدورة ياخد أكبر مساحة.
   اللي كان بياخد المساحة: زرار التسجيل عليه هامش يسار ~157px ثابت، وخانات التاريخ
   واللغة والنوع أساسها 140.8px. الهامش اتصفّر والخانات اتضيّقت، واسم الدورة
   (flex-grow:1) بياخد الفرق كله. الهوامش بالاتنين عشان الاتجاهين. */
@media (min-width:992px){
    /* بأولوية صريحة: الهامش ده متحطوط بقاعدة أقوى في الستايل الأساسي،
       وقاعدة من غير !important ما بتغلبهاش (اتأكدنا: الهامش فضل 15x px). */
    body.theme-gulf.page-online .courselist-style-inside .courselisting > *:last-child{
        margin-left:0!important;margin-right:0!important}
    body.theme-gulf.page-online .courselist-style-inside .courselisting .course-date,
    body.theme-gulf.page-online .courselist-style-inside .courselisting .course-language{
        flex-basis:112px}
}

/* (2026-09-12) طلب صريح: ترتيب خانات محرّك البحث في صفحة نتائج البحث يتنوّع في كل
   معهد. خانة الاسم تفضل أول واحدة بعد العنوان وزرار البحث آخر واحد (نفس القاعدة
   المتفق عليها). الغلاف .form-group.row أصلاً flex فالـorder بتشتغل عليه.
   الفواصل (.space10/.space20) ارتفاعها صفر والمسافة جاية من margin-top بتاعها —
   ولو اتسابت مكانها هتتجمّع فوق لما الخانات تترتّب، فاتشالت والمسافة بقت row-gap.
   المعهد مالوش theme-* ولا pg-search-page على الـbody فمستحيل توصله القاعدة دي. */
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group{row-gap:10px}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .space10,body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .space20{display:none}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-input-main:first-child{order:0;margin-bottom:6px}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-input-main:not(:first-child){order:1}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .city-id{order:2}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .category-id{order:3}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .lang-id{order:4}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .course-type{order:5}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .month-search{order:6}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .year-search{order:7}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main{order:9;margin-top:8px}

/* (2026-09-12) طلب صريح: "نوّع في أشكاله وهيكله" — صفحة نتايج البحث كانت
   نسخة واحدة في كل المعاهد (عمود 320px شمال + نتايج يمين) والفرق اللون بس.
   التنويع كله CSS: مفيش لمس للماركب ولا لأسماء الحقول. خانة الاسم أول واحدة
   وزرار البحث آخر واحد زي ما اتفقنا. المعهد مالوش theme-* ولا pg-search-page. */
/* هيكل: شريط أفقي فوق النتايج بدل العمود الجانبي */
body.theme-gulf.pg-search-page .search-results-wrap-left{flex:0 0 100%;max-width:100%;order:0}
body.theme-gulf.pg-search-page .search-results-wrap-right{flex:0 0 100%;max-width:100%;order:1}
body.theme-gulf.pg-search-page .search-results-wrap-left .box{padding:12px 14px}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group{flex-wrap:nowrap;align-items:center;column-gap:10px;row-gap:0}
/* الأصل كان بيكسر الصفحة أفقياً (تجاوز 1538px): غلاف العنوان وغلاف الزرار كل
   واحد بياخد 1252px لأن زرار البحث مصمّم full-width للعمود الرأسي، فمع nowrap
   الصف طلع ~2700px والخانات انضغطت لـ30px. */
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > *{flex:1 1 120px;min-width:0}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-input-main:first-child{display:none}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-input-main:not(:first-child){flex:2 1 220px}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main{flex:0 0 auto;width:auto;margin:0}
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main .btn,body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main input{width:auto;padding:0 22px}

/* (2026-09-12) في الشريط الأفقي كان زرار البحث باين كنص أبيض عادي: خلفيته شفافة
   وهو مصمّم full-width للعمود الرأسي، فعلى الشريط الأحمر مابقاش شكله زرار.
   بقى كبسولة بيضا بنص أحمر زي شكل الخانات في نفس الشريط. */
body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main .btn,body.theme-gulf.pg-search-page .search-results-wrap-left .form-group > .search-btn-main input[type=submit]{background:#fff!important;color:#c8102b!important;border:0!important;border-radius:20px!important;font-weight:700;height:36px;line-height:36px;padding:0 24px!important}

/* (2026-09-12) طلب صريح: تغيير أيقونات صفحة نتايج البحث، وكل معهد بثلاثي مختلف.
   الـmask متطبّق على الـ<svg> نفسه مش على عنصر أب: نسخ الموبايل بتقع جوّه <span>
   بلا كلاس فمفيش أب أعلّق عليه — وكده محدِّد واحد بيغطي الديسكتوب والموبايل.
   خط bootstrap-icons مش محمّل في الصفحة (fonts.check=false) فطريق كودات الخط مقفول.
   الرسمة الأصلية بتتلغي بـfill:transparent واللون بيجي من background-color.
   bi-x (قفل المودال) وزراري العرض برّه المحدِّدات دي. */
body.theme-gulf.pg-search-page svg.bi-calendar-check-fill,body.theme-gulf.pg-search-page svg.bi-flag-fill,body.theme-gulf.pg-search-page svg.bi-clock-fill,body.theme-gulf.pg-search-page svg.bi-signpost-split-fill{fill:transparent!important;background-color:#ea1a2d;width:1em;height:1em;display:inline-block;vertical-align:-.125em;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
body.theme-gulf.pg-search-page svg.bi-calendar-check-fill{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/></svg>")}
body.theme-gulf.pg-search-page svg.bi-flag-fill{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 2v13.5a.5.5 0 0 0 .74.439L8 13.069l5.26 2.87A.5.5 0 0 0 14 15.5V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'/></svg>")}
body.theme-gulf.pg-search-page svg.bi-clock-fill,body.theme-gulf.pg-search-page svg.bi-signpost-split-fill{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>")}

/* (2026-09-12) طلب صريح: "ألوان الصفحة دي مش متناسقة مع باقي الموقع".
   كارت النتايج (.course-content) كان أبيض مصمت 1206×431 على صفحة كلها كحلي
   غامق — وصفحة /training-courses مفيهاش ولا عنصر فاتح.
   وأخطر من كده: الثيم بيحط color:#fff على .course-title في الصفحة كلها،
   فاسم الدورة كان أبيض على أبيض — مش ظاهر خالص.
   الدليل إن الكارت كان المفروض غامق: العناصر جوّاه (.course-details-wrap)
   بـrgba(255,255,255,.05)، وطبقة زي دي مالهاش معنى إلا فوق خلفية غامقة. */
body.theme-gulf.pg-search-page .course-content{
    background:#1b1f26!important;border:0!important;border-top:3px solid #ea1a2d!important;
    border-radius:0!important}
body.theme-gulf.pg-search-page .courselist-style-inside .courselisting{
    border-color:transparent!important;background:transparent!important}
body.theme-gulf.pg-search-page .course-content .course-title,
body.theme-gulf.pg-search-page .course-content .course-title a{color:#fff!important}
body.theme-gulf.pg-search-page .course-content p,
body.theme-gulf.pg-search-page .course-content em,
body.theme-gulf.pg-search-page .course-content td{color:#a9adb6!important}

/* ─────────────────────────────
   (2026-09-18) بطاقة الجدول والرسوم على الموبايل: التصميم سطر flex واحد
   ملوش لف (تفاصيل | سعر | زرار) فعلى ٣٠٨px الحاجات بتتراكب. تحت ٧٦٨px:
   عمود — التفاصيل (بتلف)، السعر، الزرار. الـul عليه style="width:50%
   !important" inline من القالب فـmin-width بدل width.
   ───────────────────────────── */
@media (max-width:767px){
    html body.theme-gulf.pg-training-courses .session-card{
        flex-direction:column!important;align-items:stretch!important;gap:8px!important;
        padding:14px 16px!important}
    html body.theme-gulf.pg-training-courses .session-card > ul{
        min-width:100%!important;flex-wrap:wrap!important;gap:6px 18px!important;padding:0!important;margin:0!important;
        grid-column:auto!important}
    html body.theme-gulf.pg-training-courses .session-card > .price-box{
        grid-column:auto!important;flex:0 0 auto!important;align-self:flex-start}
    html body.theme-gulf.pg-training-courses .session-card > .text-end{
        grid-column:auto!important;flex:0 0 auto!important;text-align:start!important}
    html body.theme-gulf.pg-training-courses .session-card > .text-end .btn{width:100%}
}

/* (2026-09-18) صفحة "عن المعهد": بطاقات الرؤية والرسالة ووعد العلامة خلفيتها فاتحة
   (من الملف المشترك) بس الثيم غامق ونصّه فاتح — فالعنوان والنص كانوا شبه
   مخفيين (٢٣٠,٢٣٢,٢٣٦ على ٢٣٣,٢٤٠,٢٤٤). النص جوّه البطاقة داكن. */
body.theme-gulf .aboutus-section-card,
body.theme-gulf .aboutus-section-card h4,
body.theme-gulf .aboutus-section-card p{color:#1a2230!important}


/* ═════════════════════════════════════════════════════════════
   (2026-09-18) صفحة "عن المعهد" — بنية مختلفة لكل معهد (طلب صريح: صفحات الموبايل
   شبه بعضها). الـHTML واحد (about_vmv.php: رؤية/رسالة/وعد/قيم) والبنية بتتغيّر
   بالـCSS: عدد الأعمدة، مكان الصورة، الترتيب، شكل العنوان — مش الألوان بس.
   ═════════════════════════════════════════════════════════════ */
body.theme-gulf.page-about #common-listing-section .box4{background:transparent;box-shadow:none;padding:0;display:grid;gap:14px}
body.theme-gulf.page-about #common-listing-section .aboutus-vision,body.theme-gulf.page-about #common-listing-section .aboutus-mission,body.theme-gulf.page-about #common-listing-section .aboutus-brand{position:relative;min-height:230px;display:flex;align-items:flex-end;background:#10161f;border:0;border-radius:18px;overflow:hidden;padding:0;margin:0}
body.theme-gulf.page-about #common-listing-section .aboutus-vision::after,body.theme-gulf.page-about #common-listing-section .aboutus-mission::after,body.theme-gulf.page-about #common-listing-section .aboutus-brand::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,13,18,.94) 10%,rgba(10,13,18,.12) 100%);z-index:1}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card .row{position:static;width:100%;margin:0}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card .col-md-6:has(> img){position:absolute;inset:0;padding:0;max-width:none;width:100%}
body.theme-gulf.page-about #common-listing-section .aboutus-vision img,body.theme-gulf.page-about #common-listing-section .aboutus-mission img,body.theme-gulf.page-about #common-listing-section .aboutus-brand img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;box-shadow:none}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card .col-md-6:not(:has(> img)){position:relative;z-index:2;padding:22px;max-width:100%;width:100%}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card .col-md-12{display:none}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card h4{color:#fff!important;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;padding-inline-start:12px;border-inline-start:4px solid #ea1a2d;margin:0}
body.theme-gulf.page-about #common-listing-section .aboutus-section-card p{color:#e6e8ec!important;padding:8px 0 0;margin:0}
body.theme-gulf.page-about #common-listing-section .aboutus-values{background:#1b1f26;border:0;border-radius:18px;padding:22px}
body.theme-gulf.page-about #common-listing-section .aboutus-values .aboutus-section-row{background:none;border:0;box-shadow:none;padding:0}
body.theme-gulf.page-about #common-listing-section .aboutus-values .aboutus-value-card{background:#fff;border-radius:16px;padding:6px}
body.theme-gulf.page-about #common-listing-section .aboutus-values img{border:0;box-shadow:none}
@media (min-width:992px){body.theme-gulf.page-about #common-listing-section .box4{grid-template-columns:repeat(3,1fr)}body.theme-gulf.page-about #common-listing-section .aboutus-values{grid-column:1/-1}}