/* ============================================================
المعهد العماني الأول — First Omani Institute
------------------------------------------------------------
Direction: one dark field. The search is set into the panel
as an outlined box, not laid on top of it as a white card.
============================================================ */
body.theme-omani { --om-ink: #eaf0f6; --om-edge: rgba(255,255,255,.28); }
body.theme-omani .btn,
body.theme-omani .form-control,
body.theme-omani .card,
body.theme-omani .courselisting { border-radius: 4px !important; }
body.theme-omani .courselisting,
body.theme-omani .card {
border: 1px solid #e2e6ec !important;
box-shadow: none !important;
border-inline-start: 4px solid var(--site-accent, #5c3092) !important;
}
body.theme-omani .om-hero {
background:
radial-gradient(1100px 420px at 78% -12%, rgba(255,255,255,.14), transparent 62%),
var(--site-primary, #003452);
color: var(--om-ink);
/* الهيدر ثابت والصفحة بتعوّض ارتفاعه، فالحشو هنا تنفّس بس —
160 كان بيسيب فراغ كحلي فاضي فوق الصورة. */
padding: 40px 0 44px;
}
/* الصف الأول: الرسمة ولوح البحث جنب بعض بنفس الارتفاع.
stretch مش center — ده اللي بيخلي الرسمة تاخد ارتفاع اللوح. */
body.theme-omani .om-hero-grid {
/* 2fr/1fr = الرسمة ~65% واللوح ~32%. الرسمة مصدرها 800 بكسل
عرض، فكل ما خانتها تكبر بتتمدّ أكتر وتبكسل — 75% كانت
بتمدّها 1.27 مرة، و65% بتنزّلها لـ1.13. */
display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: stretch;
/* الصف بياخد ارتفاعه من لوح البحث، واللوح محتواه قصير — فمن
غير الحد دا الرسمة بتطلع صغيرة ونص الخانة فاضي حواليها.
الارتفاع بيتحدد من محتوى اللوح، والحد دا أرضية تحته. */
min-height: 250px;
}
/* الرسمة سايبة زي ما هي: contain عشان تتحط جوة الارتفاع من غير
ما تتقص، وخلفيتها الكريمي جزء منها فبتفضل ظاهرة.
الصورة موضوعة absolute عشان متساهمش في ارتفاع الصف — لو
ساهمت هي اللي هتحدده (553 بكسل) واللوح هيتمدّ وراها فاضي.
بالشكل دا لوح البحث هو اللي بيحدد الارتفاع والصورة بتترتب
جواه، وده اللي المطلوب. */
body.theme-omani .om-hero-art {
position: relative;
min-width: 0;
}
body.theme-omani .om-hero-art img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* cover مش contain: الرسمة 4:3 والخانة أعرض من كده بكتير،
فcontain كانت بتحطها في نص الخانة وتسيب الباقي فاضي.
اللي بيتقص هامش كريمي فاضي فوق وتحت — المعالم في النص
وبتفضل كاملة. الملف نفسه ما اتمسّش. */
object-fit: cover;
/* مايل لتحت: الارتكاز في النص كان بيقص قواعد المباني. */
object-position: center 68%;
display: block;
}
/* والكلام تحتهم بعرض البنر كله. */
/* الكلام في نص البنر مش لازق في الجنب. الأسطر بتتمركز مع
بعضها، ومحدش منهم بياخد عرض البنر كله. */
body.theme-omani .om-hero-copy { margin-top: 30px; text-align: center; }
body.theme-omani .om-hero-kicker {
text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
font-weight: 700; color: var(--site-accent, #5c3092);
filter: brightness(1.9); margin: 0 0 16px;
}
body.theme-omani .om-hero h1 {
/* مظبوط عشان الجملة تقع في سطر واحد على عرض البنر — 3.4rem
كانت بتكسر آخر كلمة لسطر تاني. */
font-size: 2.6rem; line-height: 1.2; font-weight: 800; color: #fff; margin: 0;
white-space: nowrap;
}
/* --- لوح البحث المحاط --- */
/* اللوح بقى ربع العرض، فالحشو 42 كان بياكل جواه — والزراير
بتحتها بتنزل تحت بعض بدل ما تتزاحم في صف. */
body.theme-omani .om-hero-panel {
border: 1px solid var(--om-edge);
padding: 22px;
background: rgba(255, 255, 255, .05);
}
body.theme-omani .om-hero-panel label {
display: block; text-transform: uppercase; letter-spacing: .14em;
font-size: .72rem; font-weight: 700; margin: 0 0 12px; opacity: .85;
}
body.theme-omani .om-hero-panel form { display: flex; }
body.theme-omani .om-hero-panel input {
flex: 1; min-width: 0; background: transparent; color: #fff;
border: 1px solid var(--om-edge); border-inline-end: 0;
padding: 13px 14px; font-size: 1rem;
}
body.theme-omani .om-hero-panel input:focus {
outline: none; border-color: var(--site-accent, #5c3092); filter: brightness(1.4);
}
body.theme-omani .om-hero-panel button {
border: 0; background: var(--site-accent, #5c3092); color: #fff; padding: 0 22px;
}
body.theme-omani .om-hero-panel button:hover { filter: brightness(1.15); }
body.theme-omani .om-hero-advanced {
display: inline-block; margin: 12px 0 16px; font-size: .88rem;
color: var(--om-ink); text-decoration: underline; opacity: .9;
}
body.theme-omani .om-hero-panel .om-hero-links { flex-direction: column; align-items: flex-start; gap: 10px; }
body.theme-omani .om-hero-links { display: flex; flex-wrap: wrap; gap: 22px; }
body.theme-omani .om-hero-links a {
color: #fff; font-weight: 700; font-size: .86rem;
text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
border-bottom: 1px solid var(--om-edge); padding-bottom: 3px;
}
body.theme-omani .om-hero-links a:hover { border-bottom-color: var(--site-accent, #5c3092); }
@media (max-width: 991px) {
body.theme-omani .om-hero { padding: 40px 0 44px; }
body.theme-omani .om-hero-grid { grid-template-columns: 1fr; gap: 30px; }
/* العمودين بيرصوا فوق بعض هنا، فمابقاش فيه لوح جنب الصورة
يحدد ارتفاعها — والصورة موضوعة absolute فمساهمتها صفر
وبتختفي. نسبتها الأصلية 800×600 بتدّيها ارتفاعها. */
body.theme-omani .om-hero-art { aspect-ratio: 4 / 3; }
/* على الموبايل السطر الواحد مستحيل، فالمنع بيتشال. */
body.theme-omani .om-hero h1 { font-size: 1.9rem; white-space: normal; }
body.theme-omani .om-hero-grid { min-height: 0; }
body.theme-omani .om-hero-panel { padding: 20px; }
}
/* ── الأقسام: بلاطات داكنة على أرضية فاتحة ── */
body.theme-omani .inst-tile { background: var(--site-primary, #003452); color: #eaf0f6; border: 0; border-radius: 4px; }
body.theme-omani .inst-tile:hover { transform: none; box-shadow: 0 14px 30px rgba(0,52,82,.28); }
body.theme-omani .inst-tile-more { color: #fff; opacity: .85; }
body.theme-omani .inst-values { background: #fff; }
body.theme-omani .inst-values-list { grid-template-columns: repeat(4, 1fr); }
body.theme-omani .inst-values-list li { flex-direction: column; gap: 12px; border-top: 3px solid var(--site-accent, #5c3092); padding-top: 16px; }
body.theme-omani .inst-values-head h2,
body.theme-omani .inst-assoc h2 { text-transform: uppercase; letter-spacing: .06em; font-size: 1.6rem; }
body.theme-omani .inst-assoc-link { border-radius: 4px; }
/* ── الصور: ثنائي اللون الكحلي، وحدّ بنفسجي أسفلها ── */
body.theme-omani .widget-icon,
body.theme-omani .common-banner-image { background: var(--site-primary, #003452); border-radius: 4px; }
body.theme-omani .widget-icon img,
body.theme-omani .common-banner-image img { mix-blend-mode: luminosity; opacity: .88; }
body.theme-omani .widget-icon::after {
content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px;
background: var(--site-accent, #5c3092);
}
/* ── القائمة: روابط بحروف صغيرة متباعدة ── */
body.theme-omani .nav-link { text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
body.theme-omani .navbar-nav .nav-link.active { border-radius: 4px !important; }
/* ── الداخلية: أيقونة دائرية بحلقة ثانوية، عنوان بحروف كبيرة ── */
body.theme-omani .common-banner-icon {
border-radius: 50%; border: 3px solid var(--site-accent, #5c3092); flex-basis: 116px; width: 116px; height: 116px;
}
body.theme-omani .common-banner-text h1 { text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); }
body.theme-omani .common-banner-text p { }
/* ── الشريط العلوي: حروف صغيرة متباعدة في المنتصف ── */
body.theme-omani .om-topbar { background: #001d2e; color: #b9c9d6; }
body.theme-omani .om-topbar-links {
justify-content: center; gap: 34px; min-height: 34px;
font-size: .7rem; text-transform: uppercase; letter-spacing: .17em;
}
body.theme-omani .om-topbar-links li.active a { color: var(--site-accent, #5c3092); filter: brightness(1.9); }
/* ── الشريط العلوي: أيقونات مربّعة في الآخر ── */
body.theme-omani .om-topbar { background: #001d2e; color: #a9bccb; }
body.theme-omani .om-topbar-row { min-height: 42px; gap: 6px; justify-content: flex-end; }
body.theme-omani .om-topbar-ico {
width: 34px; height: 34px; display: grid; place-items: center;
border: 1px solid rgba(255,255,255,.14); font-size: .95rem;
}
body.theme-omani .om-topbar-ico:hover { background: var(--site-accent, #5c3092); color: #fff; opacity: 1; }
body.theme-omani .om-topbar-lang { margin-inline-end: 8px; }
/* ══════════════════════════════════════════════════════════
القائمة الرئيسية
══════════════════════════════════════════════════════════ */
/* Light bar, dark mark: the mark is left alone and the ground moves. */
body.theme-omani nav.navbar { background: #fff; border-bottom: 2px solid var(--site-primary, #003452); }
body.theme-omani .navbar-nav > li > .nav-link {
color: var(--site-primary, #003452) !important; font-size: .82rem; font-weight: 600;
background: transparent !important; border-radius: 0 !important;
}
body.theme-omani .navbar-nav > li > .nav-link.active { color: var(--site-accent, #5c3092) !important; }
/* حبر هذا الشريط: يستعمله الرابط ساكناً ومحوَّماً عليه سواء. */
body.theme-omani nav.navbar { --nav-ink: var(--site-primary, #003452); }
/* السطر عرضه محدود بـ 56ch، فلو فضل ملزوق في أول الحاوية بيبان
على الشمال حتى لو كلامه متوسّط — الصندوق نفسه لازم يتوسّط. */
body.theme-omani .om-hero-copy .inst-lede { margin-inline: auto; }
/* أرضية الهيرو هي --site-primary بالظبط (#003452)، و_brand.css بيلوّن
أي رابط عند الوقوف عليه بنفس المتغيّر — فالكلام كان بياخد لون
الخلفية ويختفي. الشريط بيقول حبر وقوفه مرة واحدة لكل اللي جواه. */
body.theme-omani .om-hero { --link-hover-ink: #fff; }
/* ── محرك البحث تحت البنر ────────────────────────────────────
الشريط بياخد نفس كحلي البنر فيقرا كامتداد له مش كقطعة تانية،
والزرار بياخد البنفسجي عشان يفضل باين على الكحلي.
و_brand.css بيفرض color: var(--site-primary) على .btn-primary عند
الوقوف بـ !important — وهو نفس لون الزرار قبل التغيير، فكلمة Search
كانت بتختفي. القاعدة دي أخص منها فبتكسبها. */
/* الشريط فاضل شريط قائم بذاته زي ما هو — الصندوق اللي جواه بس هو
اللي بيتلوّن، وباخد كحلي البنر بدل البنفسجي. _brand.css بيلوّنه
بـ --site-accent بـ !important فالقاعدة دي أخص منه. */
body.theme-omani .inst-homesearch #dt-search-section .box {
background: var(--site-primary, #003452) !important;
border-color: var(--site-primary, #003452) !important;
}
body.theme-omani .inst-homesearch .btn-primary {
background: var(--site-accent, #5c3092) !important;
border-color: var(--site-accent, #5c3092) !important;
color: #fff !important;
font-weight: 700;
}
body.theme-omani .inst-homesearch .btn-primary:hover,
body.theme-omani .inst-homesearch .btn-primary:focus,
body.theme-omani .inst-homesearch .btn-primary:active {
background: var(--site-accent, #5c3092) !important;
color: #fff !important;
filter: brightness(1.15);
}
/* الكلام تحت الصورة: المسافة اللي فوقه واللي تحته كانت أوسع من
اللزوم — 30px فوق و62px تحت (حشو الهيرو + هامش السطر). */
body.theme-omani .om-hero-copy { margin-top: 2px; }
body.theme-omani .om-hero-copy .inst-lede { margin-bottom: 0; }
body.theme-omani .om-hero { padding: 14px 0 8px; }
/* الفراغ الظاهر أكبر من الهامش نفسه: ارتفاع السطر 1.18 على خط 41px
بيسيب ~8px شحم فوق الحروف وتحتها. تقليله بيقرّب الكلام فعلياً. */
body.theme-omani .om-hero-copy .inst-h1 { line-height: 1.08; }
body.theme-omani .om-hero-copy .inst-lede { line-height: 1.45; }
/* ── لوحة الدورات: دليل فاتح بعلامة بنفسجية ──────────────────
كانت شبكة عمودها الأول 236px مخصص لرأس اللوحة، والرأس اتشال
فالكروت اتحشرت في العمود الضيّق. والشكل بقى فاتح: الخليج وبلس
الاتنين لوحتهم كحلي غامق، فلوحة تالتة غامقة كانت هتضيّع الفرق.
─────────────────────────────────────────────────────────── */
body.theme-omani .inst-mega { --inst-mega-line: #e6e9ef; }
/* اللوحة القديمة (شرطة بنفسجية + خط تحت كل صف) كانت مسطّحة زيادة
برضه — نفس علة global قبل ما تتعمل كروت. هنا نفس الفكرة: كارت
حقيقي بحدود مستديرة وأيقونة كل تخصص (كانت متخفية، والأيقونات
نفسها مرسومة بألوان الهوية أصلاً: كحلي #003452 وبنفسجي #5c3092،
شوف أي ملف SVG جوّه assets/images/institutes/subject/omani/). */
body.theme-omani .inst-mega-icon {
display: block;
width: 24px;
height: 24px;
flex: 0 0 auto;
}
body.theme-omani .inst-mega-grid {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 6px 14px;
}
body.theme-omani .inst-mega-card {
border: 1px solid var(--inst-mega-line);
border-radius: 10px;
padding: 6px 10px;
background: #fff;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* حشو اللوحة نفسه من فوق/تحت (26px/22px من _institute.css المشترك)
اتقلل هنا لـomani بس، عشان اللوحة بعدد التخصصات الكبير مابقاش
محتاج سكرول. */
body.theme-omani #dt-header-section .megamenu { padding: 12px 0 8px; }
body.theme-omani .inst-mega-name { color: #1e2c3a; font-size: .85rem; line-height: 1.25; }
body.theme-omani .inst-mega-card:hover {
border-color: var(--site-accent, #5c3092);
box-shadow: 0 8px 18px rgba(30, 44, 58, .1);
transform: translateY(-2px);
}
body.theme-omani .inst-mega-card:hover .inst-mega-name { color: var(--site-accent, #5c3092); }
/* عدد الدورات جنب كل تخصص اتشال. */
body.theme-omani .inst-mega-n { display: none; }
/* "عربي"/"اللغة العربية" طالعة أعلى شوية من باقي بنود المنيو —
فرق ارتفاع حروف الخط العربي عن اللاتيني. نزول بسيط بمقدار ثابت،
على النص العربي بس (صفحة الإنجليزي، مش "ENGLISH" في صفحة العربي). */
body.theme-omani:not([dir="rtl"]) .navbar-nav > li > .nav-link.custom-languagenew {
position: relative;
top: 5px;
}
/* ══════════════════════════════════════════════════════════
التذييل — لوح واحد محاط بخط، مش شبكة صناديق غامقة
------------------------------------------------------------
almawred/global/glomac الثلاثة عملوا لوحة غامقة بأعمدة صناديق،
وهيرو omani نفسه أصلاً غامق — فوتر غامق رابع كان هيقرا كإعادة
لنفس الفكرة. بدل كده: نفس منطق لوح البحث في الهيرو بالظبط
("الصندوق محاط بخط، مش بطاقة فوق الأرضية") — لوح فاتح واحد
محاط بخط كحلي، زوايا مدوّرة 4px (نفس نصف قطر الكروت في الموقع
كله)، وأقسامه متقسّمة بخطوط داخلية مش صناديق منفصلة. أيقونات
التواصل مربّعة زي .om-topbar-ico بالظبط.
══════════════════════════════════════════════════════════ */
body.theme-omani #dt-home-footer-section { background: #fff; }
body.theme-omani .om-footer { padding: 46px 0; }
body.theme-omani .om-footer-panel {
display: flex;
align-items: stretch;
border: 1px solid var(--site-primary, #003452);
border-radius: 4px;
background: #fff;
}
body.theme-omani .om-footer-seg {
flex: 1;
min-width: 0;
padding: 26px 24px;
border-inline-end: 1px solid #e2e6ec;
}
body.theme-omani .om-footer-seg:last-child { border-inline-end: 0; }
body.theme-omani .om-footer-brand {
flex: 0 0 auto;
width: 220px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}
body.theme-omani .om-footer-logo-img { max-width: 150px; height: auto; }
body.theme-omani .om-footer-icons { display: flex; gap: 8px; }
body.theme-omani .om-footer-ico {
width: 34px; height: 34px;
display: grid; place-items: center;
border: 1px solid rgba(0, 52, 82, .22);
border-radius: 4px;
color: var(--site-primary, #003452);
}
body.theme-omani .om-footer-ico:hover {
background: var(--site-accent, #5c3092);
border-color: var(--site-accent, #5c3092);
color: #fff;
}
body.theme-omani .om-footer-label {
display: block;
text-transform: uppercase;
letter-spacing: .14em;
font-size: .7rem;
font-weight: 700;
color: var(--site-accent, #5c3092);
margin: 0 0 16px;
}
body.theme-omani .om-footer-list { list-style: none; margin: 0; padding: 0; }
body.theme-omani .om-footer-list li { padding-bottom: 11px; font-size: .87rem; }
body.theme-omani .om-footer-list a {
color: #1e2c3a;
text-decoration: none;
}
body.theme-omani .om-footer-list a:hover { color: var(--site-accent, #5c3092); text-decoration: underline; }
@media (max-width: 991px) {
body.theme-omani .om-footer-panel { flex-wrap: wrap; }
body.theme-omani .om-footer-brand { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; border-block-end: 1px solid #e2e6ec; }
body.theme-omani .om-footer-seg {
flex: 1 1 45%;
border-inline-end: 0;
border-block-end: 1px solid #e2e6ec;
}
body.theme-omani .om-footer-seg:last-child { border-block-end: 0; }
}
@media (max-width: 575px) {
body.theme-omani .om-footer { padding: 32px 0; }
body.theme-omani .om-footer-seg { flex: 1 1 100%; }
}
/* ── المدن المتاحة — كارت بإطار خفيف بدل ظل ─────────────────
مرجع: energytraining.ae (ETC) — كارت بحدّ رفيع ملوّن (مش
مصمت، مش بظل)، صورة صغيرة مربّعة + اسم المدينة، وزرار مصمت
في الآخر. omani أصلاً بتستخدم نفس فكرة "محدّد بخط رفيع مش
مليان" في صندوق البحث (--om-edge) — نفس اللغة هنا على مستوى
الكارت. */
body.theme-omani .om-cities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
body.theme-omani .om-cities-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border: 1.5px solid var(--site-accent, #5c3092);
border-radius: 6px;
text-decoration: none;
transition: background .16s ease, transform .16s ease;
}
body.theme-omani .om-cities-card:hover { background: #f7f5fb; transform: translateY(-2px); }
body.theme-omani .om-cities-thumb {
width: 52px;
height: 52px;
flex: none;
border-radius: 4px;
background-size: cover;
background-position: center;
background-color: var(--site-primary, #003452);
}
body.theme-omani .om-cities-thumb--pin { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; }
body.theme-omani .om-cities-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-omani .om-cities-name { font-weight: 700; color: var(--site-primary, #003452); font-size: .95rem; }
body.theme-omani .om-cities-go { font-size: .8rem; color: var(--site-accent, #5c3092); }
body.theme-omani .om-cities-foot { text-align: center; }
body.theme-omani .om-cities-all {
display: inline-block;
background: var(--site-primary, #003452);
color: #fff;
font-weight: 700;
font-size: .88rem;
padding: 12px 30px;
border-radius: 999px;
text-decoration: none;
}
body.theme-omani .om-cities-all:hover { background: var(--site-accent, #5c3092); }
@media (max-width: 575px) {
body.theme-omani .om-cities-grid { grid-template-columns: 1fr; }
}
/* ── التصنيفات: شريط صور حقيقية بيتمرّر أفقي ──
محاولة تالتة. الشيبس النصية اترفضت، وبعدها موزاييك الأيقونات
اترفضت برضو — المطلوب صراحة صور حقيقية "ونوّع في الصور"
(mawred-edu.com كمرجع بعيد). site_category_photo() بترجع صورة
حقيقية باسم التصنيف نفسه (مش أيقونة معاد استخدامها ولا صورة
ملفّقة)، وبتقع فيها الرجوع للأيقونة لو مفيش صورة. الكارت لسه بلغة
omani "محدّد بخط رفيع مش مليان" (--om-edge / om-cities-card)، بس
شريط أفقي عريض بدل شبكة — وشكل مختلف تمامًا عن كارت المدن
(صورة صغيرة مربّعة + نص جنبها). التنويع: التاج بيتنقّل بين أربع
زوايا واتنين توكن (primary/accent) بالتبادل مش لون وموضع واحد
مكرر. */
body.theme-omani .om-categories { padding-top: 0; }
body.theme-omani .om-categories-strip {
display: flex;
gap: 18px;
overflow-x: auto;
padding: 6px 2px 20px;
scroll-snap-type: x proximity;
}
body.theme-omani .om-categories-card {
position: relative;
flex: none;
scroll-snap-align: start;
width: 300px;
aspect-ratio: 16 / 10;
border: 1.5px solid rgba(0, 52, 82, .35);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
background: #eef1f4;
transition: transform .16s ease, border-color .16s ease;
}
body.theme-omani .om-categories-card:hover,
body.theme-omani .om-categories-card:focus-visible {
transform: translateY(-3px);
border-color: var(--site-accent, #5c3092);
}
body.theme-omani .om-categories-photo {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
body.theme-omani .om-categories-noPhoto {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: var(--site-primary, #003452);
}
body.theme-omani .om-categories-noPhoto .om-categories-icon {
width: 44px; height: 44px; object-fit: contain;
filter: brightness(0) invert(1);
}
body.theme-omani .om-categories-tag {
position: absolute;
color: #fff;
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
line-height: 1.3;
padding: 7px 12px;
max-width: calc(100% - 24px);
}
body.theme-omani .om-categories-tag--tl { top: 10px; inset-inline-start: 10px; border-end-end-radius: 6px; }
body.theme-omani .om-categories-tag--tr { top: 10px; inset-inline-end: 10px; border-end-start-radius: 6px; text-align: end; }
body.theme-omani .om-categories-tag--bl { bottom: 10px; inset-inline-start: 10px; border-start-end-radius: 6px; }
body.theme-omani .om-categories-tag--br { bottom: 10px; inset-inline-end: 10px; border-start-start-radius: 6px; text-align: end; }
body.theme-omani .om-categories-tag--primary { background: var(--site-primary, #003452); }
body.theme-omani .om-categories-tag--accent { background: var(--site-accent, #5c3092); }
@media (max-width: 575px) {
body.theme-omani .om-categories-card { width: 240px; }
}
/* ── الخدمات (tiles): استبدال الكارت المصمت الافتراضي (inst-tile
بخلفية --site-primary مصمتة) بعمودين — كلام على جنب، وعمود
خدمات "مؤطّر مش مليان" على الجنب التاني، نفس لغة om-edge بتاعة
لوحة البحث في الهيرو. الخلفية هنا فاتحة (مش زي الهيرو الغامق)،
فـ--om-edge (أبيض شفاف) مش هيبان — استُخدم بدل منه خط رفيع بلون
--site-primary بشفافية قليلة، نفس فكرة "حد بس بلا تعبئة". */
/* ثاني تصميم: المحاولة الأولى (نص جنب عمود صفوف مؤطّرة) طلعت شبه
خمس معاهد تانية بالحرف. هنا عنوان في النص فوق، وتحته صف واحد
من 4 مربعات منفصلة بفراغات واضحة بينها — مش عمود صفوف متلاصقة،
ومفيش عمود نص جنبها. لسه "مؤطّر مش مليان" (--site-primary حد
رفيع، بلا تعبئة). */
body.theme-omani .om-tiles { padding: 56px 0; background: #fff; }
body.theme-omani .om-tiles-heading {
text-align: center;
font-size: 1.6rem;
font-weight: 800;
color: var(--site-primary, #003452);
margin: 0 0 30px;
}
/* ثالث تصميم. صف مربعات منفصلة بفراغات كان اتقالها "غيّرها" مع
شوية معاهد تانية من غير سبب محدد — فكرة تالتة: برواز واحد بس
بلا تعبئة يحيط بالأربعة مع بعض، وخطوط شعرة داخلية بتفصل بينهم —
إطار واحد مش أربع كروت منفصلة. */
body.theme-omani .om-tiles-frame {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1.5px solid rgba(0, 52, 82, .22);
}
body.theme-omani .om-tiles-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
padding: 30px 14px;
border-inline-start: 1.5px solid rgba(0, 52, 82, .22);
text-decoration: none;
transition: background .18s ease;
}
body.theme-omani .om-tiles-tile:first-child { border-inline-start: 0; }
body.theme-omani .om-tiles-tile:hover { background: rgba(92, 48, 146, .05); }
body.theme-omani .om-tiles-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
body.theme-omani .om-tiles-icon img { width: 26px; height: 26px; object-fit: contain; }
/* التصنيفين الجداد (Online Training، New Training Courses) مفيهمش
ملف أيقونة مخصّص — glyph من Bootstrap Icons بدل ![]()
، بنفس
مقاس ولون الأيقونتين التانيين عشان الصف يبان متّسق. */
body.theme-omani .om-tiles-icon i.bi { font-size: 22px; line-height: 1; color: var(--site-primary, #003452); }
body.theme-omani .om-tiles-label {
font-weight: 700;
font-size: .88rem;
color: var(--site-primary, #003452);
}
body.theme-omani .om-tiles-tile:hover .om-tiles-label { color: var(--site-accent, #5c3092); }
@media (max-width: 767px) {
body.theme-omani .om-tiles-frame { grid-template-columns: repeat(2, 1fr); }
body.theme-omani .om-tiles-tile:nth-child(3) { border-inline-start: 0; }
body.theme-omani .om-tiles-tile:nth-child(1),
body.theme-omani .om-tiles-tile:nth-child(2) { border-bottom: 1.5px solid rgba(0, 52, 82, .22); }
}
@media (max-width: 767px) {
body.theme-omani .om-tiles-row { grid-template-columns: repeat(2, 1fr); }
}
/* طلب صريح (2026-09-05): نص الوسم يبدأ من الشمال (بداية السطر) في كل الزوايا، حتى اللي على اليمين. */
body.theme-omani .om-categories-tag--tr, body.theme-omani .om-categories-tag--br { text-align: start; }
/* ═══ المدن — العماني: محطات مرقّمة على خط (طلب صريح 2026-09-05: "طرق عرض مختلفة") ═══
بدل الكروت الصغيرة بالصورة (كانت شبه القادة): صف من المحطات، كل محطة رقم في
دايرة كحلية على خط متقطع بنفسجي بيربط المحطات، والاسم تحت الرقم. */
body.theme-omani .om-cities-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 0; position: relative; counter-reset: omcity; padding-top: 6px; }
body.theme-omani .om-cities-card { flex: 0 0 20%; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 8px; position: relative; counter-increment: omcity; }
body.theme-omani .om-cities-card::before { content: ""; position: absolute; top: 22px; left: 0; right: 0; border-top: 2px dashed var(--site-accent, #5c3092); opacity: .45; }
body.theme-omani .om-cities-card::after { content: counter(omcity, decimal-leading-zero); position: relative; order: -1; width: 46px; height: 46px; border-radius: 50%; background: var(--site-primary, #003452); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--site-accent, #5c3092); transition: transform .18s ease, background .18s ease; }
body.theme-omani .om-cities-card:hover { transform: none; }
body.theme-omani .om-cities-card:hover::after { transform: scale(1.12); background: var(--site-accent, #5c3092); }
body.theme-omani .om-cities-thumb, body.theme-omani .om-cities-thumb--pin { display: none !important; }
body.theme-omani .om-cities-body { align-items: center; }
body.theme-omani .om-cities-name { font-size: .92rem; }
body.theme-omani .om-cities-go { font-size: .74rem; }
@media (max-width: 991px) { body.theme-omani .om-cities-card { flex-basis: 33.33%; } }
@media (max-width: 575px) { body.theme-omani .om-cities-card { flex-basis: 50%; } }
/* ═══ الدورات القادمة — العماني: لوح مواعيد (طلب صريح 2026-09-05) ═══
جدول مواعيد بعرض الصفحة: صف لكل دورة بأعمدة (التاريخ | الدورة | التفاصيل |
سهم)، صفوف متبادلة اللون، التاريخ في كتلة بنفسجية، وعند التحويم الصف بيتلوّن
بالكحلي الفاتح وسهم أبيض. */
body.theme-omani .inst-upcoming-list { border: 1px solid #e3e8ee; border-radius: 10px; overflow: hidden; background: #fff; }
body.theme-omani .inst-upcoming-list li { border: 0 !important; }
body.theme-omani .inst-upcoming-list li:nth-child(even) a { background: #f7f5fb; }
body.theme-omani .inst-upcoming-list a { display: grid; grid-template-columns: 96px minmax(0, 1.6fr) minmax(0, 1fr) 48px; align-items: center; gap: 18px; padding: 0 18px 0 0; min-height: 76px; position: relative; transition: background .15s; }
body.theme-omani[dir="rtl"] .inst-upcoming-list a { padding: 0 0 0 18px; }
body.theme-omani .inst-upcoming-list a::after { content: "\2192"; justify-self: end; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--site-primary, #003452); color: var(--site-primary, #003452); font-weight: 700; transition: background .15s, color .15s; }
body.theme-omani[dir="rtl"] .inst-upcoming-list a::after { content: "\2190"; }
body.theme-omani .inst-upcoming-list a:hover { background: var(--site-primary, #003452) !important; }
body.theme-omani .inst-upcoming-list a:hover .inst-upcoming-title, body.theme-omani .inst-upcoming-list a:hover .inst-upcoming-meta, body.theme-omani .inst-upcoming-list a:hover .inst-upcoming-meta2, body.theme-omani .inst-upcoming-list a:hover .inst-upcoming-city { color: #fff; }
body.theme-omani .inst-upcoming-list a:hover::after { background: #fff; color: var(--site-primary, #003452); }
body.theme-omani .inst-upcoming-date { width: 96px; height: 100%; min-height: 76px; background: var(--site-accent, #5c3092); }
body.theme-omani .inst-upcoming-day { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; }
body.theme-omani .inst-upcoming-body { gap: 3px; }
body.theme-omani .inst-upcoming-title { color: var(--site-primary, #003452); }
body.theme-omani .inst-upcoming-meta2 { display: flex; flex-wrap: wrap; gap: 14px; font-size: .8rem; color: #5a6a7c; }
body.theme-omani .inst-upcoming-meta2 i { margin-inline-end: 5px; color: var(--site-accent, #5c3092); }
body.theme-omani .inst-upcoming-list a:hover .inst-upcoming-meta2 i { color: #fff; }
@media (max-width: 767px) { body.theme-omani .inst-upcoming-list a { grid-template-columns: 72px minmax(0, 1fr) 40px; } body.theme-omani .inst-upcoming-meta2 { display: none; } }
/* الدورات القادمة: كروت أصغر (طلب صريح 2026-09-06) */
body.theme-omani .inst-upcoming-list a { min-height: 60px; grid-template-columns: 78px minmax(0, 1.6fr) minmax(0, 1fr) 40px; gap: 14px; }
body.theme-omani .inst-upcoming-date { width: 78px; min-height: 60px; }
body.theme-omani .inst-upcoming-day { font-size: 1.2rem; }
body.theme-omani .inst-upcoming-title { font-size: .9rem; }
body.theme-omani .inst-upcoming-meta, body.theme-omani .inst-upcoming-meta2 { font-size: .76rem; }
body.theme-omani .inst-upcoming-list a::after { width: 28px; height: 28px; }
/* ===== /training-courses — العُماني: بانر كحلي→بنفسجي في المنتصف، فلتر لاصق بأعلى الصفحة بحقول كبسولية، كروت 4 أعمدة بصورة دائرية ونص في المنتصف (2026-09-07) ===== */
body.theme-omani.pg-training-courses #common-banner-section-image .background-listing{background:linear-gradient(120deg,#003452 0%,#5c3092 100%);color:#fff;border-radius:0;text-align:center}
body.theme-omani.pg-training-courses #common-banner-section-image .background-listing:before{display:none}
body.theme-omani.pg-training-courses #common-banner-section-image .common-banner-image{display:none}
body.theme-omani.pg-training-courses #common-banner-section-image .common-banner-text{float:none;width:100%;max-width:880px;margin:0 auto;text-align:center}
body.theme-omani.pg-training-courses #common-banner-section-image h1{color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.05em}
body.theme-omani.pg-training-courses #common-banner-section-image p{color:#e2e6ec;text-align:center!important}
body.theme-omani.pg-training-courses #searresultscourses-btn2{background:#fff;border-color:#fff;color:#5c3092;border-radius:30px;font-weight:700;padding:8px 24px}
body.theme-omani.pg-training-courses #common-filter-box-modal-one{position:sticky;top:124px;z-index:1;margin-top:0;padding:10px 0;background:#fff;box-shadow:0 8px 20px rgba(0,52,82,.1)}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .box2{background:transparent;box-shadow:none;padding:0}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .form-control{background:#f7f5fb;border:1px solid #e2e6ec;border-radius:30px;height:36px;color:#003452;padding:0 14px}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two{border-radius:30px;border-color:#5c3092;color:#5c3092}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two:hover{background:#5c3092;color:#fff}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color{background:#003452;border-color:#003452;color:#fff}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting,body.theme-omani.pg-training-courses .courselist-style-inside .courselisting.virtual{background:#f7f5fb;border:1px solid transparent;border-radius:18px;padding:18px 16px 16px;box-shadow:none;text-align:center;transition:background .25s,border-color .25s}
body.theme-omani.pg-training-courses .courselisting:hover{background:#fff;border-color:#5c3092}
body.theme-omani.pg-training-courses .course-image{width:104px;height:104px;border-radius:50%;margin:0 auto 6px;border:3px solid #5c3092;padding:0;overflow:hidden;background:#fff}
body.theme-omani.pg-training-courses .course-image img{height:100%;object-fit:cover}
body.theme-omani.pg-training-courses .course-image-vl-icon{display:none}
body.theme-omani.pg-training-courses .course-title{text-align:center;font-size:14.5px;line-height:20px;min-height:40px;color:#003452}
body.theme-omani.pg-training-courses .course-date,body.theme-omani.pg-training-courses .course-language,body.theme-omani.pg-training-courses .course-location,body.theme-omani.pg-training-courses .course-time{text-align:center;color:#4b5866}
body.theme-omani.pg-training-courses .courselisting i.bi{color:#5c3092!important}
body.theme-omani.pg-training-courses .courselisting .btn-primary{background:#5c3092;border-color:#5c3092;color:#fff;border-radius:30px;font-weight:600}
body.theme-omani.pg-training-courses .courselisting:hover .btn-primary{background:#003452;border-color:#003452}
@media (min-width:992px){body.theme-omani.pg-training-courses #course_list{grid-template-columns:repeat(4,1fr);gap:20px}}
/* --- training-courses fix eae117d487b43e8e255aac486e42de0d --- */
body.theme-omani.pg-training-courses #common-banner-section-image{background:linear-gradient(120deg,#003452 0%,#5c3092 100%)}
body.theme-omani.pg-training-courses #common-banner-section-image::before{display:none}
body.theme-omani.pg-training-courses #common-banner-section-image .common-banner-section-box{justify-content:center;padding:34px 0}
body.theme-omani.pg-training-courses #common-banner-section-image .common-banner-text{max-width:880px;flex:0 1 880px;text-align:center}
body.theme-omani.pg-training-courses #searresultscourses-btn2{background:#fff!important;border-color:#fff!important;color:#5c3092!important}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color{background:#003452!important;border-color:#003452!important;color:#fff!important}
body.theme-omani.pg-training-courses .courselisting .btn-primary{background:#5c3092!important;border-color:#5c3092!important;color:#fff!important}
body.theme-omani.pg-training-courses .courselisting:hover .btn-primary{background:#003452!important;border-color:#003452!important;color:#fff!important}
/* --- training-courses fix 4dce5a09ffc2683176925f7b6a8e5629 --- */
/* أيقونات بيانات الكارت الخاصة بالمعهد (طلب 2026-09-07): clock-fill / mic / person-workspace / pin-fill / houses-fill */
body.theme-omani.pg-training-courses .course-date .bi-calendar-check-fill::before{content:"\f291"}
body.theme-omani.pg-training-courses .course-language .bi-flag-fill::before{content:"\f490"}
body.theme-omani.pg-training-courses .course-language .bi-bookmarks-fill::before{content:"\f67a"}
body.theme-omani.pg-training-courses .course-location .bi-signpost-split-fill::before{content:"\f4ec"}
body.theme-omani.pg-training-courses .course-time .bi-signpost-split-fill::before{content:"\f8c5"}
/* --- training-courses fix 366ac51a592b968537513111b23d61b8 --- */
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color{background:#f7f5fb!important;border:1px solid #e2e6ec!important;color:#003452!important;border-radius:30px;padding:0 16px}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color:hover{background:#5c3092!important;border-color:#5c3092!important;color:#fff!important}
/* --- training-courses fix 46ab6aaa31f367293296991fc08e468e --- */
/* (2026-09-07) "شيل الصور وخلي الإطار أكثر انحناءً من الأربع أطراف": بدون صورة دائرية، والكارت بزوايا 28px من الأربع جهات */
body.theme-omani.pg-training-courses .courselisting .course-image{display:none!important}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting,body.theme-omani.pg-training-courses .courselist-style-inside .courselisting.virtual{border-radius:28px!important;padding:22px 18px 18px}
body.theme-omani.pg-training-courses .courselisting .btn-primary,body.theme-omani.pg-training-courses .courselisting .btn-secondary{border-radius:30px}
/* --- btn-secondary = btn-primary (2026-09-07) --- */
/* صفحة الأونلاين بنفس تصميم الحضوري: زر الدورات الافتراضية (.btn-secondary) بنفس تنسيق الزر العادي */
body.theme-omani.pg-training-courses .courselisting .btn-secondary{background:#5c3092;border-color:#5c3092;color:#fff;border-radius:30px;font-weight:600}
body.theme-omani.pg-training-courses .courselisting:hover .btn-secondary{background:#003452;border-color:#003452}
body.theme-omani.pg-training-courses .courselisting .btn-secondary{background:#5c3092!important;border-color:#5c3092!important;color:#fff!important}
body.theme-omani.pg-training-courses .courselisting:hover .btn-secondary{background:#003452!important;border-color:#003452!important;color:#fff!important}
/* --- training-courses fix 59e38e5db1173427bf285b96f60fc39a --- */
/* ===== الدورات الداخلية — العُماني: الخطوات ثلاث بطاقات بزوايا 28px وأرقام بنفسجية كبيرة في المنتصف، المزايا في بطاقة بتدرّج كحلي→بنفسجي ونص أبيض، زر أبيض كبسولي (2026-09-07) ===== */
body.theme-omani .inst-ih-grid{grid-template-columns:1fr;gap:26px}
body.theme-omani .inst-ih-steps{background:transparent;border:0;box-shadow:none;padding:0}
body.theme-omani .inst-ih-h{text-align:center;text-transform:uppercase;letter-spacing:.06em}
body.theme-omani .inst-ih-h::after{inset-inline-start:50%;transform:translateX(-50%);background:#5c3092}
body.theme-omani .inst-ih-list{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
body.theme-omani .inst-ih-list li{flex-direction:column;align-items:center;text-align:center;background:#f7f5fb;border-radius:28px;padding:26px 22px;border:1px solid transparent;transition:border-color .2s,background .2s}
body.theme-omani .inst-ih-list li:hover{background:#fff;border-color:#5c3092}
body.theme-omani .inst-ih-num{width:60px;height:60px;background:#5c3092;font-size:1.4rem}
body.theme-omani .inst-ih-body{align-items:center}
body.theme-omani .inst-ih-benefits{background:linear-gradient(120deg,#003452,#5c3092);color:#fff;border:0;border-radius:28px;padding:30px 34px;text-align:center}
body.theme-omani .inst-ih-benefits .inst-ih-h{color:#fff}
body.theme-omani .inst-ih-benefits .inst-ih-h::after{background:#fff}
body.theme-omani .inst-ih-checks{grid-template-columns:repeat(2,1fr);gap:12px 28px;text-align:start}
body.theme-omani .inst-ih-checks li{color:#fff}
body.theme-omani .inst-ih-checks li .bi{color:#fff}
body.theme-omani .inst-ih-cta{background:#fff!important;border-color:#fff!important;color:#5c3092!important;border-radius:30px;padding:10px 30px}
/* --- training-courses fix 266bd6bec2d399ff8169939b4bb0aa0f --- */
/* لمسة فنية: العُماني — البطاقات ترتفع عند المرور بظل بنفسجي، الرقم بحلقة بنفسجية شفافة، بطاقة المزايا بحلقات باهتة */
body.theme-omani .inst-ih-list li{transition:transform .25s,box-shadow .25s,border-color .2s}
body.theme-omani .inst-ih-list li:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(92,48,146,.18)}
body.theme-omani .inst-ih-num{box-shadow:0 0 0 8px rgba(92,48,146,.12)}
body.theme-omani .inst-ih-benefits{position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(0,52,82,.25)}
body.theme-omani .inst-ih-benefits::before{content:'';position:absolute;inset-inline-start:-90px;top:-90px;width:280px;height:280px;border-radius:50%;border:26px solid rgba(255,255,255,.08)}
body.theme-omani .inst-ih-cta{box-shadow:0 8px 20px rgba(0,0,0,.25)}
/* --- banner-icon = banner-image (2026-09-07) --- */
/* صفحة التخصص بانرها #common-banner-section-icon بنفس بنية بانر الصورة → نفس تصميم بانر الثيم */
body.theme-omani.pg-training-courses #common-banner-section-icon .background-listing{background:linear-gradient(120deg,#003452 0%,#5c3092 100%);color:#fff;border-radius:0;text-align:center}
body.theme-omani.pg-training-courses #common-banner-section-icon .background-listing:before{display:none}
body.theme-omani.pg-training-courses #common-banner-section-icon .common-banner-image{display:none}
body.theme-omani.pg-training-courses #common-banner-section-icon .common-banner-text{float:none;width:100%;max-width:880px;margin:0 auto;text-align:center}
body.theme-omani.pg-training-courses #common-banner-section-icon h1{color:#fff;font-size:32px;text-transform:uppercase;letter-spacing:.05em}
body.theme-omani.pg-training-courses #common-banner-section-icon p{color:#e2e6ec;text-align:center!important}
body.theme-omani.pg-training-courses #common-banner-section-icon{background:linear-gradient(120deg,#003452 0%,#5c3092 100%)}
body.theme-omani.pg-training-courses #common-banner-section-icon::before{display:none}
body.theme-omani.pg-training-courses #common-banner-section-icon .common-banner-section-box{justify-content:center;padding:34px 0}
body.theme-omani.pg-training-courses #common-banner-section-icon .common-banner-text{max-width:880px;flex:0 1 880px;text-align:center}
/* --- training-courses fix bddbda06cf371384fa3fa790571aa2d1 --- */
/* ===== الصفحات الداخلية — العُماني: بطاقات بزوايا 28px وخلفية بنفسجية فاتحة، أيقونات في دوائر بنفسجية، نص في المنتصف؛ الأسئلة كبسولات ===== */
body.theme-omani .inst-about-pillar,body.theme-omani .inst-pub-feat,body.theme-omani .inst-clients-grid li{background:#f7f5fb;border:1px solid transparent;border-radius:28px;text-align:center;box-shadow:none;transition:background .2s,border-color .2s}
body.theme-omani .inst-about-pillar:hover,body.theme-omani .inst-pub-feat:hover,body.theme-omani .inst-clients-grid li:hover{background:#fff;border-color:#5c3092;transform:none;box-shadow:none}
body.theme-omani .inst-about-pillar .bi,body.theme-omani .inst-pub-feat .bi{width:60px;height:60px;border-radius:50%;background:#5c3092;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 12px}
body.theme-omani .inst-about-pillar h2,body.theme-omani .inst-about-h,body.theme-omani .inst-faq-h,body.theme-omani .inst-pub-h,body.theme-omani .inst-clients-h{color:#003452;text-transform:uppercase;letter-spacing:.05em}
body.theme-omani .inst-about-h,body.theme-omani .inst-faq-h,body.theme-omani .inst-pub-h,body.theme-omani .inst-clients-h{text-align:center}
body.theme-omani .inst-about-h::after,body.theme-omani .inst-faq-h::after,body.theme-omani .inst-pub-h::after,body.theme-omani .inst-clients-h::after{inset-inline-start:50%;transform:translateX(-50%);background:#5c3092}
body.theme-omani .inst-about-offer,body.theme-omani .inst-pub-terms{border-radius:28px;border-color:#e2e6ec}
body.theme-omani .inst-about-offer > .bi,body.theme-omani .inst-about-offer-arrow{color:#5c3092}
body.theme-omani .inst-faq-grid{margin:0 auto}
body.theme-omani .inst-faq-item{border-radius:30px;border-color:#e2e6ec;background:#f7f5fb}
body.theme-omani .inst-faq-item[open]{background:#fff;border-color:#5c3092}
body.theme-omani .inst-faq-item summary .bi{color:#5c3092}
body.theme-omani .inst-about-cta,body.theme-omani .inst-faq-cta,body.theme-omani .inst-clients-cta{justify-content:center;text-align:center}
body.theme-omani .inst-clients-grid li .bi{color:#5c3092}
/* --- training-courses fix 23d53644fa0d547fc39e533a8c4cf03e --- */
/* ===== العُماني: بطاقات بزوايا 28px وخلفية بنفسجية فاتحة، أيقونة التخصص في دائرة بنفسجية، صور المدن دائرية، كل شيء في المنتصف ===== */
body.theme-omani.pg-training-courses .categorymain-listing-wrap-box > .box2,body.theme-omani.pg-training-courses .citymain-listing-wrap-box .box2,body.theme-omani.pg-training-courses .common-listing-wrap-box > .box2{background:#f7f5fb!important;border:1px solid transparent!important;border-radius:28px!important;text-align:center;align-items:center;transition:background .2s,border-color .2s}
body.theme-omani.pg-training-courses .categorymain-listing-wrap-box > .box2{flex-direction:column;gap:10px;padding:22px 16px}
body.theme-omani.pg-training-courses .categorymain-listing-wrap-box > .box2:hover,body.theme-omani.pg-training-courses .citymain-listing-wrap-box .box2:hover,body.theme-omani.pg-training-courses .common-listing-wrap-box > .box2:hover{background:#fff!important;border-color:#5c3092!important}
body.theme-omani.pg-training-courses .categorypage-icon{width:64px;height:64px!important;flex-basis:64px;border-radius:50%;background:#5c3092;padding:14px}
body.theme-omani.pg-training-courses .categorypage-icon img{filter:brightness(0) invert(1)}
body.theme-omani.pg-training-courses .citymain-listing-wrap-box .box2{padding:22px 16px 18px!important}
body.theme-omani.pg-training-courses .citymain-listing-wrap-box .widget-icon{width:110px;height:110px;border-radius:50%;border:3px solid #5c3092;overflow:hidden;margin:0 auto}
body.theme-omani.pg-training-courses .categorypage-content a,body.theme-omani.pg-training-courses .widget-content a{color:#5c3092}
body.theme-omani.pg-training-courses .common-listing-wrap-box > .box2 > a:first-child img{border-radius:28px 28px 0 0}
body.theme-omani.pg-training-courses .common-listing-wrap-box .btn{align-self:center;background:#5c3092!important;border-color:#5c3092!important;color:#fff!important;border-radius:30px}
/* --- training-courses fix 232cc87073dd50c7029bf1eff6963947 --- */
/* ===== العُماني: زوايا 28px وخلفية بنفسجية فاتحة وأيقونات في دوائر بنفسجية ===== */
body.theme-omani .inst-dl-item,body.theme-omani .inst-dl-request,body.theme-omani .inst-contact-card,body.theme-omani .inst-cra{border-radius:28px;background:#f7f5fb;border-color:transparent}
body.theme-omani .inst-dl-item:hover{background:#fff;border-color:#5c3092;transform:none;box-shadow:none}
body.theme-omani .inst-dl-item > .bi,body.theme-omani .inst-contact-list li .bi,body.theme-omani .inst-cra-head > .bi{background:#5c3092;color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
body.theme-omani .inst-dl-h,body.theme-omani .inst-contact-h{color:#003452;text-transform:uppercase;letter-spacing:.05em}
body.theme-omani .inst-dl-h::after{background:#5c3092}
body.theme-omani .inst-dl-arrow,body.theme-omani .inst-cra-list li .bi{color:#5c3092}
/* --- category lists = course_list (2026-09-07) --- */
/* صفحة التخصص: نفس شبكة/تصميم #course_list على #category_course_list و#category_course_list_by_name */
@media (min-width:992px){body.theme-omani.pg-training-courses #category_course_list{grid-template-columns:repeat(4,1fr);gap:20px}}
@media (min-width:992px){body.theme-omani.pg-training-courses #category_course_list_by_name{grid-template-columns:repeat(4,1fr);gap:20px}}
/* --- training-courses fix aca32e856dabf3ad7212e6f43481e63c --- */
/* ===== العُماني: صندوق بزوايا 28px وحقول كبسولية بنفسجية فاتحة، زر بنفسجي دائري ===== */
body.theme-omani.pg-training-courses #fc-search .search-wrap{border-radius:28px;background:#fff;border:1px solid #e2e6ec;box-shadow:0 8px 20px rgba(0,52,82,.08)}
body.theme-omani.pg-training-courses #fc-search .form-control,body.theme-omani.pg-training-courses #fc-search .chosen-choices,body.theme-omani.pg-training-courses #fc-search select{background:#f7f5fb!important;border:1px solid #e2e6ec!important;border-radius:30px!important}
body.theme-omani.pg-training-courses #fc-search .search-btns{background:#5c3092!important;border-color:#5c3092!important;color:#fff!important;border-radius:50%}
/* --- finder results = course_list (2026-09-07) --- */
@media (min-width:992px){body.theme-omani.pg-training-courses #coursefinder_list_courses{grid-template-columns:repeat(4,1fr);gap:20px}}
/* --- training-courses fix 2b92f7a63fb7de95f5f43d00eb5e6f43 --- */
/* ===== العُماني: بلاطات بزوايا 28px وخلفية بنفسجية فاتحة ورقم في دائرة بنفسجية، نص في المنتصف ===== */
body.theme-omani.pg-training-courses .categorymain-listing-wrap-box > .box2::before{content:counter(instcat);counter-increment:instcat;width:56px;height:56px;border-radius:50%;background:#5c3092;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;margin:0 auto}
body.theme-omani.pg-training-courses .categorypage-content h6{font-size:1rem}
/* --- training-courses fix 1b1cad74726c502c74ebfd3987bf64aa --- */
/* ===== العُماني: لوحات بزوايا 28px، رؤوس بتدرّج كحلي→بنفسجي، حقول كبسولية ===== */
body.theme-omani.pg-training-courses #register-section .tabHead{background:linear-gradient(120deg,#003452,#5c3092);border-radius:28px 28px 0 0;padding:14px 24px;text-transform:uppercase;letter-spacing:.05em}
body.theme-omani.pg-training-courses #register-section .tabContent{border:1px solid #e2e6ec;border-radius:0 0 28px 28px;background:#f7f5fb}
body.theme-omani.pg-training-courses #register-section .form-control{border-radius:30px;border-color:#e2e6ec;background:#fff}
body.theme-omani.pg-training-courses .inst-form-side-card{border-radius:28px;background:#f7f5fb;border-color:transparent}
body.theme-omani.pg-training-courses .inst-form-side-list li .bi{background:#5c3092;color:#fff;border-radius:50%}
/* --- training-courses fix 15f04db3376aca5bd8229074c30c611f --- */
body.theme-omani.pg-training-courses #register-section .tabHead{background:linear-gradient(120deg,#003452,#5c3092)!important;border-radius:28px 28px 0 0!important;padding:14px 24px!important;text-transform:uppercase!important;letter-spacing:.05em!important}
/* --- training-courses fix df485c86bb5363a2e9c78beb646201d4 --- */
body.theme-omani.pg-training-courses #register-section .tabContent{border:1px solid #e2e6ec!important;border-radius:0 0 28px 28px!important;background:#f7f5fb!important}
/* --- training-courses fix c6867cabf2c3fdf9c5d9b59a08f0f90a --- */
/* ===== العُماني: بطاقة بزوايا 28px وخلفية بنفسجية فاتحة للمرتبطة، عنوان كحلي ===== */
body.theme-omani.pg-post-page .blog-webinar-articles-details-left .box{border-radius:28px;border-color:#e2e6ec}
body.theme-omani.pg-post-page .blog-webinar-articles-details-right .box2{border-radius:28px;background:#f7f5fb;border-color:transparent}
body.theme-omani.pg-post-page .blog-webinar-articles-details-left .box h1{color:#003452}
body.theme-omani.pg-post-page .blog-webinar-articles-details-right .box2 .btn{border-radius:30px}
/* --- training-courses fix 27ba148d8e01f6249b2192050454c403 --- */
/* ===== العُماني: تبويبات كبسولية بنفسجية، محتوى بزوايا 28px وخلفية بنفسجية فاتحة ===== */
body.theme-omani.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{border-radius:30px;background:#f7f5fb;color:#003452}
body.theme-omani.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:#5c3092;color:#fff}
body.theme-omani.pg-training-courses #coursedetails-content-section .tab-content{border-radius:28px;background:#f7f5fb;border-color:#e2e6ec}
body.theme-omani.pg-training-courses .session-card{border-radius:28px!important;border-color:#e2e6ec!important}
/* --- training-courses fix bf9ecee2ac600ead323d246837b9a13e --- */
body.theme-omani.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link{border-radius:30px!important;background:#f7f5fb!important;color:#003452!important}
/* --- training-courses fix bdd40aaff31a764ce2b375951b7c090b --- */
body.theme-omani.pg-training-courses #coursedetails-content-section .nav-tabs .nav-link.active{background:#5c3092!important;color:#fff!important}
/* --- training-courses fix e6050902533564f55dde01487f4f7df9 --- */
html.theme-omani{background:#003452}
/* ============================================================
العُماني — تفاصيل الدورة: خطوات مرقّمة (numbered stepper)
------------------------------------------------------------
مفيش تبويبات. الأقسام واحد تحت التاني، كل قسم برقم 01/02/03
في دايرة متدرّجة (كحلي → بنفسجي) وخط رأسي ماشي جنب المحتوى.
مفيش صناديق حوالين الأقسام — الخط والمسافات هما اللي بيفصلوا.
RTL: كل المواضع بـ inset-inline / margin-inline عشان تتقلب لوحدها.
============================================================ */
/* اللوح الأبيض اللي الخطوات ماشية جواه */
body.theme-omani.pg-training-courses .om-course-steps {
display: block;
margin: 0;
padding: 34px 46px 14px;
background: #fff;
border: 1px solid #e6e2ee;
border-radius: 28px;
}
/* إظهار البانلز: كانت .tab-pane fade (شفافة/مخفية) — دلوقتي كلها ظاهرة */
body.theme-omani.pg-training-courses .om-course-steps .tab-pane {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* شيل صندوق .tab-content القديم (كان بنفسجي فاتح بحدود) */
body.theme-omani.pg-training-courses .om-course-steps .tab-content {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* شريط علوي: كتلة التواصل بس، على جنب النهاية */
body.theme-omani.pg-training-courses .om-steps-top {
display: flex;
justify-content: flex-end;
margin-bottom: 30px;
}
body.theme-omani.pg-training-courses .om-steps-top .inst-cra { margin: 0; }
/* الخط الرأسي: من أول دايرة لآخر واحدة، متدرّج وخفيف */
body.theme-omani.pg-training-courses .om-steps { position: relative; }
body.theme-omani.pg-training-courses .om-steps::before {
content: "";
position: absolute;
top: 24px;
bottom: 26px;
inset-inline-start: 23px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, #003452 0%, #5c3092 100%);
opacity: .3;
}
body.theme-omani.pg-training-courses .om-step {
display: flex;
align-items: flex-start;
gap: 30px;
padding: 0 0 72px;
}
body.theme-omani.pg-training-courses .om-step:last-child { padding-bottom: 26px; }
body.theme-omani.pg-training-courses .om-step-rail {
flex: 0 0 48px;
width: 48px;
position: relative;
z-index: 1;
}
/* النقطة المليانة = رقم الخطوة، والهالة البيضا بتقطع الخط تحتها */
body.theme-omani.pg-training-courses .om-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(145deg, #003452 0%, #5c3092 100%);
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: .04em;
box-shadow: 0 0 0 7px #fff;
}
body.theme-omani.pg-training-courses .om-step-main {
flex: 1 1 auto;
min-width: 0;
padding-top: 4px;
}
body.theme-omani.pg-training-courses .om-step-title {
margin: 0;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
color: #003452;
text-transform: uppercase;
letter-spacing: .07em;
}
body.theme-omani.pg-training-courses .om-step-title::after {
content: "";
display: block;
width: 62px;
height: 3px;
margin-top: 14px;
border-radius: 3px;
background: linear-gradient(90deg, #003452 0%, #5c3092 100%);
}
body.theme-omani.pg-training-courses .om-step-body { padding-top: 22px; }
/* عناوين المحتوى الداخلية: بنفسجي، أصغر من عنوان الخطوة */
body.theme-omani.pg-training-courses .om-step-body h6 {
color: #5c3092;
font-weight: 700;
letter-spacing: .01em;
}
body.theme-omani.pg-training-courses .om-step-body .year-heading { color: #003452; }
/* كروت الجدول جوة الخطوة: نفس زوايا الـ28 وحد بنفسجي فاتح */
body.theme-omani.pg-training-courses .om-step-body .session-card {
border-radius: 28px !important;
border-color: #e6e2ee !important;
}
/* التنبيهات جوة الخطوات: من غير حدود صريحة عشان الشكل يفضل بلا صناديق */
body.theme-omani.pg-training-courses .om-step-body .alert-info {
background: #f7f5fb;
border-color: #e6e2ee;
color: #2a2440;
border-radius: 18px;
}
/* --- العُماني / خطوات مرقّمة: ضبط بعد المعاينة --- */
/* شريط التواصل: بار عرضه كامل بتدرّج كحلي→بنفسجي فوق الخطوات */
body.theme-omani.pg-training-courses .om-steps-top { display: block; margin-bottom: 36px; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px 34px;
width: 100%;
max-width: none;
margin: 0;
padding: 18px 30px;
background: linear-gradient(115deg, #003452 0%, #5c3092 100%);
border: 0;
border-radius: 28px;
box-shadow: none;
}
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-head {
border-inline-end: 0;
padding-inline-end: 0;
gap: 14px;
}
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-head > .bi { color: rgba(255,255,255,.85); }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-head strong { color: #fff; font-size: .95rem; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-head span { color: rgba(255,255,255,.7); font-size: .76rem; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-list { gap: 8px 28px; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-list li { font-size: .84rem; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-list li .bi { color: rgba(255,255,255,.72); }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-list a { color: #fff; }
body.theme-omani.pg-training-courses .om-steps-top .inst-cra-list a:hover { color: #fff; text-decoration: underline; }
/* الخط أوضح شوية */
body.theme-omani.pg-training-courses .om-steps::before { opacity: .5; }
/* إيقاع أهدأ: مسافة أقل تحت الخطوة + شيل الفراغ الأخير جوة البانل */
body.theme-omani.pg-training-courses .om-step { padding-bottom: 56px; }
body.theme-omani.pg-training-courses .om-step-body .row > [class*="col-"]:last-child > .space30:last-child { height: 0; }
/* عناوين المحتوى بنفسجية (بتغلب لون الثيم الكحلي) */
body.theme-omani.pg-training-courses .om-step-body h6 { color: #5c3092 !important; }
body.theme-omani.pg-training-courses .om-step-body .year-heading { color: #003452 !important; }
/* زرار التسجيل جوة كروت الجدول: كبسولة متدرّجة بدل نص عريان */
body.theme-omani.pg-training-courses .om-step-body #searresultscourses-btn2 {
background: linear-gradient(115deg, #003452 0%, #5c3092 100%) !important;
border: 0 !important;
color: #fff !important;
border-radius: 30px !important;
font-weight: 700;
padding: 9px 26px !important;
}
/* سلايدر أقل من عدد الخانات: توسيط بدل ما يفضل نص الصف فاضي */
body.theme-omani.pg-training-courses .om-step-body .owl-stage { margin-inline: auto; }
/* عربي (RTL): تدرّج الشريط معكوس عشان الكحلي يفضل ورا اسم المعهد،
ومفيش تباعد حروف على العناوين العربية (بيكسّر الوصل). */
body.theme-omani.pg-training-courses[dir="rtl"] .om-steps-top .inst-cra {
background: linear-gradient(245deg, #003452 0%, #5c3092 100%);
}
body.theme-omani.pg-training-courses[dir="rtl"] .om-step-title { letter-spacing: 0; }
/* رسالة "مفيش جلسات السنة دي": كانت صندوقين بينهم فاصل أبيض.
هنا عنوان زي عناوين السنين + ملحوظة واحدة بزوايا مستديرة. */
body.theme-omani.pg-training-courses .om-step-body .fee-box-wrap-2022 {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
body.theme-omani.pg-training-courses .om-step-body .custom-head-additional {
background: transparent !important;
margin: 0;
padding: 0;
}
body.theme-omani.pg-training-courses .om-step-body .schedulehead-h4 {
font-size: 1.4rem;
font-weight: 600;
color: #003452 !important;
margin: 0 0 14px;
padding: 0;
}
body.theme-omani.pg-training-courses .om-step-body .custom-text-no-course {
background: #f7f5fb !important;
border: 1px solid #e6e2ee;
border-radius: 18px;
padding: 14px 20px !important;
}
body.theme-omani.pg-training-courses .om-step-body .custom-text-no-course p {
margin: 0;
color: #2a2440;
}
/* عناوين السنين جوة خطوة الجدول: مقاس واحد للاتنين وبدون خط فاصل */
body.theme-omani.pg-training-courses .om-step-body .custom-head-additional {
border: 0 !important;
box-shadow: none !important;
}
body.theme-omani.pg-training-courses .om-step-body .year-heading,
body.theme-omani.pg-training-courses .om-step-body .schedulehead-h4 {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #003452 !important;
margin: 0 0 14px !important;
border: 0 !important;
}
/* محاذاة كتلة "مفيش جلسات" على نفس بداية العنوان (شيل هوامش الـgrid) */
body.theme-omani.pg-training-courses .om-step-body .fee-box-wrap-2022 > .row,
body.theme-omani.pg-training-courses .om-step-body .custom-head-additional {
margin-left: 0;
margin-right: 0;
}
body.theme-omani.pg-training-courses .om-step-body .fee-box-wrap-2022 > .row > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
/* ===== inner pages — soft stacked cards + timeline (2026-09-08) =====
المعهد العُماني الأول: الصفحات الداخلية المشتركة (عن المعهد، العملاء، الأسئلة،
التنزيلات، الدورات العامة، الدورات الداخلية، اتصل بنا، جانب النماذج) بقى ليها
نسخ خاصة بالثيم تحت app/Views/themes/omani/institute/**، ولغتها البصرية هنا:
- كروت طرية عريضة مكدّسة رأسيًا بزوايا 28px، تحت كل كرت "ظل ورقة" تانية.
- الأيقونة دايمًا في قرص متدرّج (كحلي → بنفسجي) على *جنب* الكلام مش فوقه.
- القوائم اللي فيها تسلسل (ماذا نقدّم / الشروط / الخطوات / مجموعات الأسئلة)
بقت خط زمني رأسي: خط متدرّج على بداية السطر وعليه أقراص/أرقام.
كل القواعد مسبوقة بـ body.theme-omani فالمعهد وباقي المعاهد ما بيتأثروش.
الاتجاه: inset-inline-start / margin-inline / text-align:start فقط. */
body.theme-omani .omsc-about,
body.theme-omani .omsc-clients,
body.theme-omani .omsc-faq,
body.theme-omani .omsc-dl,
body.theme-omani .omsc-pub,
body.theme-omani .omsc-ih { background: #f3f1f8; padding: 46px 0 58px; }
body.theme-omani .omsc-contact { background: #f3f1f8; padding: 40px 0 46px; }
/* عنوان القسم: نص على بداية السطر وبعده خط متدرّج بيمتد لآخر العرض */
body.theme-omani .omsc-h {
display: flex; align-items: center; gap: 18px;
max-width: 940px; margin: 46px auto 26px;
font-size: 1.3rem; font-weight: 700; color: #003452;
text-transform: uppercase; letter-spacing: .07em; line-height: 1.35;
}
body.theme-omani .omsc-h > span { flex: 0 1 auto; }
body.theme-omani .omsc-h::after {
content: ''; flex: 1 1 40px; height: 3px; border-radius: 3px;
background: linear-gradient(to right, #5c3092, rgba(92, 48, 146, 0));
}
body.theme-omani[dir="rtl"] .omsc-h::after { background: linear-gradient(to left, #5c3092, rgba(92, 48, 146, 0)); }
body.theme-omani .omsc-clients .omsc-h:first-of-type,
body.theme-omani .omsc-dl .omsc-h:first-of-type,
body.theme-omani .omsc-ih .omsc-h:first-of-type { margin-top: 0; }
/* ---- الكرت الطري المكدّس ---- */
body.theme-omani .omsc-stack { display: flex; flex-direction: column; gap: 24px; max-width: 940px; margin: 0 auto; }
body.theme-omani .omsc-stack--tight { gap: 16px; max-width: none; }
body.theme-omani .omsc-card {
position: relative; z-index: 0;
display: flex; align-items: flex-start; gap: 26px;
background: #fff; border: 1px solid #ece8f4; border-radius: 28px;
padding: 28px 32px; box-shadow: 0 14px 34px rgba(0, 52, 82, .07);
transition: transform .25s, box-shadow .25s, border-color .25s;
}
/* "الورقة" اللي تحت الكرت — إحساس التكديس */
body.theme-omani .omsc-card::before {
content: ''; position: absolute; z-index: -1;
inset-inline-start: 24px; inset-inline-end: 24px; bottom: -10px; height: 24px;
background: #fff; border: 1px solid #ece8f4; border-top: 0;
border-radius: 0 0 26px 26px; opacity: .75;
box-shadow: 0 12px 26px rgba(0, 52, 82, .07);
}
body.theme-omani .omsc-card:hover { transform: translateY(-4px); border-color: #d9d0ea; box-shadow: 0 22px 44px rgba(92, 48, 146, .15); }
body.theme-omani .omsc-card-body { flex: 1 1 auto; min-width: 0; }
body.theme-omani .omsc-card-body h2 {
font-size: 1.2rem; font-weight: 700; color: #003452;
text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; line-height: 1.4;
}
body.theme-omani .omsc-card-body p { margin: 0; color: #5b6673; line-height: 1.8; font-size: .97rem; }
/* القرص المتدرّج — دايمًا على جنب الكلام */
body.theme-omani .omsc-disc {
flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%);
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-size: 2rem; line-height: 1;
box-shadow: 0 10px 24px rgba(92, 48, 146, .28), 0 0 0 8px rgba(92, 48, 146, .07);
}
body.theme-omani .omsc-disc .bi { line-height: 1; }
body.theme-omani .omsc-disc--sm { width: 56px; height: 56px; font-size: 1.3rem; box-shadow: 0 8px 18px rgba(92, 48, 146, .24), 0 0 0 6px rgba(92, 48, 146, .07); }
body.theme-omani .omsc-disc--xs { width: 40px; height: 40px; font-size: 1rem; box-shadow: 0 6px 14px rgba(92, 48, 146, .22); }
body.theme-omani .omsc-disc--onDark { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); box-shadow: 0 0 0 8px rgba(255, 255, 255, .07); }
/* ---- الخط الزمني ---- */
body.theme-omani .omsc-tl { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; position: relative; }
body.theme-omani .omsc-tl::before {
content: ''; position: absolute; inset-inline-start: 29px; top: 0; bottom: 0;
width: 5px; border-radius: 5px; background: linear-gradient(180deg, #003452, #5c3092);
}
body.theme-omani .omsc-tl-item { position: relative; padding-inline-start: 94px; margin-bottom: 18px; }
body.theme-omani .omsc-tl-item:last-child { margin-bottom: 0; }
body.theme-omani .omsc-tl-dot {
position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
width: 62px; height: 62px; border-radius: 50%;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 1.45rem; font-weight: 700; line-height: 1;
box-shadow: 0 10px 22px rgba(92, 48, 146, .26), 0 0 0 5px #f3f1f8;
}
body.theme-omani .omsc-tl--num .omsc-tl-dot { font-size: 1.3rem; }
body.theme-omani .omsc-tl-card {
display: flex; align-items: center; gap: 18px;
background: #fff; border: 1px solid #ece8f4; border-radius: 28px;
padding: 20px 26px; text-decoration: none !important; color: #16202b;
box-shadow: 0 10px 26px rgba(0, 52, 82, .06);
transition: transform .22s, box-shadow .22s, border-color .22s;
}
body.theme-omani a.omsc-tl-card:hover { transform: translateY(-3px); border-color: #5c3092; box-shadow: 0 18px 36px rgba(92, 48, 146, .15); }
body.theme-omani .omsc-tl-card--static { cursor: default; }
body.theme-omani .omsc-tl-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
body.theme-omani .omsc-tl-body strong { font-size: 1.02rem; font-weight: 700; color: #003452; line-height: 1.4; }
body.theme-omani .omsc-tl-body > span { font-size: .93rem; color: #5b6673; line-height: 1.7; }
body.theme-omani .omsc-tl-go { flex: 0 0 auto; font-size: 1.25rem; color: #5c3092; transition: transform .22s; }
body.theme-omani a.omsc-tl-card:hover .omsc-tl-go { transform: translateX(4px); }
body.theme-omani[dir="rtl"] a.omsc-tl-card:hover .omsc-tl-go { transform: translateX(-4px); }
/* ---- الأسئلة الشائعة: كل مجموعة محطة على الخط الزمني ---- */
body.theme-omani .omsc-tl--faq .omsc-tl-dot { top: 38px; transform: none; }
body.theme-omani .omsc-tl--faq .omsc-tl-item { margin-bottom: 24px; }
body.theme-omani .omsc-faq-card { background: #fff; border: 1px solid #ece8f4; border-radius: 28px; padding: 22px 28px 8px; box-shadow: 0 12px 30px rgba(0, 52, 82, .06); }
body.theme-omani .omsc-faq-h { font-size: 1.02rem; font-weight: 700; color: #5c3092; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
body.theme-omani .omsc-faq-item { border-top: 1px solid #efecf6; }
body.theme-omani .omsc-faq-item:first-of-type { border-top: 0; }
body.theme-omani .omsc-faq-item > summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 15px 0; font-weight: 600; color: #16202b; font-size: .97rem; line-height: 1.5;
}
body.theme-omani .omsc-faq-item > summary::-webkit-details-marker { display: none; }
body.theme-omani .omsc-faq-item > summary::marker { content: ''; }
body.theme-omani .omsc-faq-item > summary .bi { flex: 0 0 auto; color: #5c3092; font-size: 1rem; transition: transform .2s; }
body.theme-omani .omsc-faq-item[open] > summary { color: #5c3092; }
body.theme-omani .omsc-faq-item[open] > summary .bi { transform: rotate(45deg); }
body.theme-omani .omsc-faq-a { padding: 0 0 16px; }
body.theme-omani .omsc-faq-a p { margin: 0; color: #5b6673; line-height: 1.85; font-size: .94rem; }
/* ---- شريط النداء المتدرّج ---- */
body.theme-omani .omsc-band {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
max-width: 940px; margin: 36px auto 0; padding: 26px 34px;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%); color: #fff;
border-radius: 28px; box-shadow: 0 18px 40px rgba(0, 52, 82, .22);
}
body.theme-omani .omsc-band::before {
content: ''; position: absolute; inset-inline-end: -70px; top: -80px;
width: 230px; height: 230px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .08);
}
body.theme-omani .omsc-band-text { position: relative; margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.6; }
body.theme-omani .omsc-band-btn,
body.theme-omani .omsc-btn-onDark {
position: relative; background: #fff !important; border-color: #fff !important; color: #5c3092 !important;
border-radius: 30px; padding: 10px 28px; font-weight: 700; box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
body.theme-omani .omsc-band-btn:hover,
body.theme-omani .omsc-btn-onDark:hover { background: #efeaf7 !important; border-color: #efeaf7 !important; color: #3f1f6b !important; }
/* ---- العملاء: صفوف القطاعات ---- */
body.theme-omani .omsc-sectors { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
body.theme-omani .omsc-sectors li {
display: flex; align-items: center; gap: 16px;
background: #fff; border: 1px solid #ece8f4; border-radius: 28px; padding: 13px 22px;
box-shadow: 0 8px 22px rgba(0, 52, 82, .05);
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.theme-omani .omsc-sectors li:hover { transform: translateY(-3px); border-color: #5c3092; box-shadow: 0 16px 32px rgba(92, 48, 146, .14); }
body.theme-omani .omsc-sector-name { font-weight: 600; color: #003452; font-size: .98rem; line-height: 1.45; }
/* ---- كروت خاصة ---- */
body.theme-omani .omsc-card--request { max-width: 940px; margin: 36px auto 0; }
body.theme-omani .omsc-card--dark {
position: relative; overflow: hidden; max-width: 940px; margin: 36px auto 0;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%); border-color: transparent; color: #fff;
box-shadow: 0 18px 40px rgba(0, 52, 82, .22);
}
body.theme-omani .omsc-card--dark::before { display: none; }
body.theme-omani .omsc-card--dark::after {
content: ''; position: absolute; inset-inline-end: -80px; bottom: -110px;
width: 260px; height: 260px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .08);
}
body.theme-omani .omsc-card--dark:hover { transform: none; box-shadow: 0 22px 46px rgba(0, 52, 82, .28); }
body.theme-omani .omsc-card--dark .omsc-card-body { position: relative; }
body.theme-omani .omsc-card--dark .omsc-card-body h2 { color: #fff; }
body.theme-omani .omsc-checks { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
body.theme-omani .omsc-checks li { display: flex; align-items: flex-start; gap: 10px; color: #eef1f6; font-size: .95rem; line-height: 1.65; }
body.theme-omani .omsc-checks li .bi { flex: 0 0 auto; color: #fff; font-size: 1.05rem; margin-top: 3px; }
body.theme-omani .omsc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
body.theme-omani .omsc-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }
body.theme-omani .omsc-cta .btn, body.theme-omani .omsc-actions .btn { border-radius: 30px; padding: 10px 28px; font-weight: 600; }
/* ---- مقدمة البانر (جوّه فالعناصر كلها spans) ---- */
body.theme-omani .omsc-intro { display: block; max-width: 880px; margin-inline: auto; }
body.theme-omani .omsc-intro-rule {
display: block; width: 68px; height: 3px; border-radius: 3px; margin: 0 auto 16px;
background: linear-gradient(90deg, rgba(255, 255, 255, .2), #fff, rgba(255, 255, 255, .2));
}
body.theme-omani .omsc-intro-text { display: block; font-size: 1.04rem; line-height: 1.95; text-align: center; }
/* ---- اتصل بنا: عمود البيانات ---- */
body.theme-omani .omsc-contact-col .omsc-h { max-width: none; margin: 0 0 14px; }
body.theme-omani .omsc-contact-lead { color: #5b6673; line-height: 1.85; margin: 0 0 24px; max-width: 640px; }
body.theme-omani .omsc-card--row { align-items: center; padding: 16px 24px; }
body.theme-omani .omsc-card--row .omsc-card-body { display: flex; flex-direction: column; gap: 3px; }
body.theme-omani .omsc-card--row b { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #5c3092; }
body.theme-omani .omsc-card--row a { color: #003452; font-weight: 600; text-decoration: none; word-break: break-word; }
body.theme-omani .omsc-card--row a:hover { color: #5c3092; text-decoration: underline; }
body.theme-omani .omsc-contact-plain { color: #003452; font-weight: 600; }
body.theme-omani .omsc-contact-links { margin-top: 28px; }
/* ---- العمود الجانبي للنماذج ---- */
body.theme-omani .omsc-side-card { background: #fff; border: 1px solid #ece8f4; border-radius: 28px; padding: 24px 22px; box-shadow: 0 14px 34px rgba(0, 52, 82, .08); }
body.theme-omani .omsc-side-h { font-size: 1.02rem; font-weight: 700; color: #003452; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #efecf6; line-height: 1.4; }
body.theme-omani .omsc-side-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
body.theme-omani .omsc-side-list li { display: flex; align-items: center; gap: 12px; }
body.theme-omani .omsc-side-list a { color: #003452; font-weight: 600; font-size: .9rem; text-decoration: none; word-break: break-word; }
body.theme-omani .omsc-side-list a:hover { color: #5c3092; text-decoration: underline; }
body.theme-omani .omsc-side-h6 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #5c3092; margin: 0 0 14px; }
body.theme-omani .omsc-side-steps { list-style: none; margin: 0; padding: 0; position: relative; }
body.theme-omani .omsc-side-steps::before { content: ''; position: absolute; inset-inline-start: 13px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #003452, #5c3092); }
body.theme-omani .omsc-side-steps li { position: relative; padding-inline-start: 42px; margin-bottom: 15px; color: #5b6673; font-size: .89rem; line-height: 1.65; }
body.theme-omani .omsc-side-steps li:last-child { margin-bottom: 0; }
body.theme-omani .omsc-side-num {
position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, #003452, #5c3092); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
box-shadow: 0 0 0 4px #fff;
}
/* ---- الشاشات الأصغر ---- */
@media (max-width: 991px) {
body.theme-omani .omsc-checks { grid-template-columns: 1fr; }
body.theme-omani .omsc-contact-col .omsc-h { margin-top: 30px; }
}
@media (max-width: 767px) {
body.theme-omani .omsc-sectors { grid-template-columns: 1fr; }
body.theme-omani .omsc-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 22px; }
body.theme-omani .omsc-card--row { flex-direction: row; align-items: center; }
body.theme-omani .omsc-disc { width: 64px; height: 64px; font-size: 1.6rem; }
body.theme-omani .omsc-tl::before { inset-inline-start: 21.5px; }
body.theme-omani .omsc-tl-item { padding-inline-start: 66px; }
body.theme-omani .omsc-tl-dot { width: 48px; height: 48px; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(92, 48, 146, .24), 0 0 0 5px #f3f1f8; }
body.theme-omani .omsc-tl-card { padding: 16px 20px; border-radius: 24px; }
body.theme-omani .omsc-band { flex-direction: column; align-items: flex-start; text-align: start; padding: 24px 24px; }
body.theme-omani .omsc-faq-card { padding: 20px 20px 6px; }
body.theme-omani .omsc-h { font-size: 1.12rem; }
}
/* (2026-09-08) الرقم الشبح اتشال: المراجعة المستقلة لقت خمس مواقع وقعت في نمط
"رقم + أيقونة + عنوان كابيتال في عمود ضيّق". الكرت هنا بقى قرص الأيقونة + الكلام بس. */
body.theme-omani .omsc-stack .omsc-card[data-n]::after { content: none; }
/* الخط الزمني: تلاشي طرفَي الخط عشان ما يبانش مقطوع فجأة */
body.theme-omani .omsc-tl::before {
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 24px, #000 calc(100% - 24px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 24px, #000 calc(100% - 24px), rgba(0,0,0,0) 100%);
}
/* الأسئلة: الكروت طويلة والقرص فوق مش في النص، فالخط بيتربط من قرص لقرص
(وصلة لكل عنصر) بدل خط واحد على القائمة كلها. */
body.theme-omani .omsc-tl--faq::before { display: none; }
body.theme-omani .omsc-tl--faq .omsc-tl-item:not(:last-child)::before {
content: ''; position: absolute; inset-inline-start: 29px; top: 69px; bottom: -93px;
width: 5px; border-radius: 5px; background: linear-gradient(180deg, #003452, #5c3092);
}
@media (max-width: 767px) {
body.theme-omani .omsc-tl--faq .omsc-tl-item:not(:last-child)::before { inset-inline-start: 21.5px; top: 62px; bottom: -86px; }
}
/* اتصل بنا: صندوق الفورم بنفس لغة الكروت (زوايا 28px وظل طري) وحقول كبسولية */
body.theme-omani .omsc-contact .contact-left .box4 {
background: #fff; border: 1px solid #ece8f4; border-radius: 28px;
padding: 26px 20px; box-shadow: 0 14px 34px rgba(0, 52, 82, .07);
}
body.theme-omani .omsc-contact .contact-left .box4 h5 {
font-size: 1.02rem; font-weight: 700; color: #003452;
text-transform: uppercase; letter-spacing: .05em; margin: 0;
}
body.theme-omani .omsc-contact .contact-left input.form-control { border-radius: 30px; padding-inline: 18px; }
body.theme-omani .omsc-contact .contact-left textarea.form-control { border-radius: 18px !important; padding-inline: 18px !important; }
body.theme-omani .omsc-contact #submit_contact { border-radius: 30px; padding: 10px 30px; font-weight: 600; }
/* العمود الجانبي: توسيع المسافة بين الأرقام عشان وصلة الخط تبان أوضح */
body.theme-omani .omsc-side-steps li { margin-bottom: 20px; }
body.theme-omani .omsc-side-num { box-shadow: 0 0 0 3px #fff; }
/* --- training-courses fix f76e814e644c2e904ab5e6d59438e490 --- */
/* العُماني: أقنعة دائرية بصفوف متبادلة الإزاحة */
body.theme-omani .inst-logos{background:#f7f5fb}
body.theme-omani .inst-logos-h{color:#003452;font-weight:700}
body.theme-omani .inst-logos-grid{grid-template-columns:repeat(6,1fr);gap:20px 14px}
body.theme-omani .inst-logos-item{background:#fff;border-radius:50%;width:118px;height:118px;min-height:0;margin-inline:auto;box-shadow:0 6px 16px rgba(0,52,82,.1)}
body.theme-omani .inst-logos-item:nth-child(12n+7),body.theme-omani .inst-logos-item:nth-child(12n+8),body.theme-omani .inst-logos-item:nth-child(12n+9),body.theme-omani .inst-logos-item:nth-child(12n+10),body.theme-omani .inst-logos-item:nth-child(12n+11),body.theme-omani .inst-logos-item:nth-child(12n+12){transform:translateY(14px)}
body.theme-omani .inst-logos-item img{max-height:52px;max-width:72%}
/* --- training-courses fix 2b0f0a451d43e4c73d97ae95f378a6b0 --- */
/* العُماني: رأس بتدرّج فيه التاريخ، البيانات كبسولات تحته، وزر بعرض البطاقة. */
body.theme-omani.pg-training-courses .session-card{display:flex!important;flex-direction:column;padding:0!important;overflow:hidden;border-radius:28px!important}
body.theme-omani.pg-training-courses .session-card > ul{width:100%!important;margin:0!important;padding:14px 18px!important;display:flex;flex-wrap:wrap;gap:8px}
body.theme-omani.pg-training-courses .session-card li{background:#f7f5fb;border-radius:20px;padding:4px 12px;font-size:.8rem}
body.theme-omani.pg-training-courses .session-card li:first-child{order:-1;flex-basis:100%;background:linear-gradient(120deg,#003452,#5c3092);color:#fff;border-radius:0;margin:-14px -18px 6px;padding:12px 18px;font-weight:700}
body.theme-omani.pg-training-courses .session-card li:first-child i{color:#fff!important}
body.theme-omani.pg-training-courses .session-card .price-box{position:static!important;order:2;margin:0 18px;border-radius:16px!important;background:#f7f5fb!important;border:0!important;text-align:center}
body.theme-omani.pg-training-courses .session-card > form{order:3;padding:12px 18px 16px}
body.theme-omani.pg-training-courses .session-card .btn{width:100%;border-radius:30px!important}
/* (2026-09-08) حائط الشعارات كان بيخرج 403px بره الشاشة على الموبايل: القاعدة كانت
بتثبّت 6 أعمدة ودوائر 118px، وده أعرض من 390px. الأعمدة والقطر بيصغروا مع الشاشة. */
@media (max-width: 991px) {
body.theme-omani .inst-logos-grid { grid-template-columns: repeat(4, 1fr); }
body.theme-omani .inst-logos-item { width: 104px; height: 104px; }
}
@media (max-width: 575px) {
body.theme-omani .inst-logos-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
body.theme-omani .inst-logos-item { width: 92px; height: 92px; }
body.theme-omani .inst-logos-item img { max-height: 42px; }
}
/* ============================================================
(2026-09-08) العُماني — صفحات القوائم الأربعة: سحابة كبسولات
------------------------------------------------------------
/categories و /cities و /articles و /blogs كانت بتتفرج بنفس
شبكة البطاقات المتساوية اللي في تسع مواقع. هنا بقت سحابة
كبسولات: كل مدخل حبة واحدة عرضها من طول اسمه، والسطر بيتلفّ
لوحده. مفيش صور ولا خانات متساوية — الشكل نفسه بيقول إن دي
قايمة أسماء مش كتالوج منتجات.
الأصناف كلها بادئتها omcc- فما بتلمسش أي قاعدة قديمة.
============================================================ */
body.theme-omani .omcc-section {
background: #fff;
padding: 34px 0 48px;
}
/* السطر اللي فوق السحابة: النص اللي كان بيتكرّر جوّه كل بطاقة
("دورات تدريبية في" / "الدورات") بيتقال هنا مرة واحدة. */
body.theme-omani .omcc-eyebrow {
margin: 0 0 20px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #5c3092;
text-align: start;
}
body.theme-omani .omcc-cloud {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 0;
}
body.theme-omani .omcc-chip {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
/* 44ch: من غير الحد ده عنوان مقال طويل بياخد السطر كله
وتضيع فكرة السحابة. */
max-width: min(100%, 44ch);
padding-block: 11px;
padding-inline: 20px 14px;
border-radius: 999px;
border: 1px solid #e6dcf6;
background: #f3effa;
color: #003452;
font-size: .95rem;
font-weight: 600;
line-height: 1.45;
text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease,
transform .18s ease, box-shadow .18s ease;
}
/* لونين بالتبادل: السحابة تبقى فيها نَفَس بدل حايط لون واحد. */
body.theme-omani .omcc-chip:nth-of-type(2n) {
background: #eaf2f8;
border-color: #d7e6f1;
}
/* التصنيفات المخصّصة (صفحاتها الخاصة) — كبسولة مفرّغة تفرّقها عن الباقي. */
body.theme-omani .omcc-chip-alt,
body.theme-omani .omcc-chip-alt:nth-of-type(2n) {
background: #fff;
border-color: #cbb8e6;
}
body.theme-omani .omcc-chip-label {
min-width: 0;
overflow-wrap: anywhere;
}
body.theme-omani .omcc-chip-meta {
flex: none;
white-space: nowrap;
font-size: .74rem;
font-weight: 500;
color: #5a6b7c;
padding-inline-start: 10px;
border-inline-start: 1px solid rgba(0, 52, 82, .16);
}
body.theme-omani .omcc-chip-arrow {
flex: none;
font-size: 1.3rem;
line-height: 1;
color: #5c3092;
opacity: .6;
transition: color .18s ease, opacity .18s ease;
}
body.theme-omani .omcc-chip:hover,
body.theme-omani .omcc-chip:focus,
body.theme-omani .omcc-chip:focus-visible {
background: linear-gradient(120deg, #003452, #5c3092);
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 52, 82, .18);
text-decoration: none;
}
body.theme-omani .omcc-chip:hover .omcc-chip-meta,
body.theme-omani .omcc-chip:focus .omcc-chip-meta,
body.theme-omani .omcc-chip:focus-visible .omcc-chip-meta {
color: rgba(255, 255, 255, .82);
border-inline-start-color: rgba(255, 255, 255, .38);
}
body.theme-omani .omcc-chip:hover .omcc-chip-arrow,
body.theme-omani .omcc-chip:focus .omcc-chip-arrow,
body.theme-omani .omcc-chip:focus-visible .omcc-chip-arrow {
color: #fff;
opacity: 1;
}
body.theme-omani .omcc-chip:focus-visible {
outline: 2px solid #5c3092;
outline-offset: 3px;
}
body.theme-omani .omcc-empty {
margin: 0;
padding: 14px 20px;
border-radius: 999px;
background: #f3effa;
color: #003452;
font-weight: 600;
}
@media (max-width: 767px) {
body.theme-omani .omcc-section { padding: 26px 0 36px; }
body.theme-omani .omcc-cloud { gap: 10px; }
body.theme-omani .omcc-chip {
max-width: 100%;
padding-block: 10px;
padding-inline: 16px 12px;
font-size: .89rem;
}
body.theme-omani .omcc-chip-meta { font-size: .7rem; padding-inline-start: 8px; }
body.theme-omani .omcc-chip-arrow { font-size: 1.15rem; }
}
/* عناوين المقالات والمدوّنات أطول بكتير من أسماء التصنيفات والمدن، فحد
الـ44ch كان بيكسر العنوان لأربع سطور والكبسولة تبقى بالونة. الحد هنا أوسع
عشان الغالبية تقف في سطر أو اتنين، والسحابة تفضل صفوف مش شبكة. */
body.theme-omani #article_list .omcc-chip,
body.theme-omani #blog_list .omcc-chip {
max-width: min(100%, 62ch);
}
/* ── (2026-09-09) صفحة الدورة على الموبايل ──────────────────────
الأصل بيخبّي كتلة الديسكتوب ويرجّع أكورديون بوتستراب العام، فبيضيع
شكل الثيم ويتخبّى المحتوى. تخطيط الثيم ده عمود واحد وعنده قواعده
للشاشات الصغيرة، فبنعرضه هو. متقيّد بالثيم — المعهد زي ما هو.
───────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
body.theme-omani.pg-training-courses #coursedetails-content-section .coursedetails-content-section-desktop { display: block; }
body.theme-omani.pg-training-courses #coursedetails-content-section .coursedetails-content-section-mobile { display: none; }
body.theme-omani.pg-training-courses .coursedetails-content-section-desktop { margin-inline: 0; }
}
/* ============================================================
(2026-09-09) العُماني — صفحة اتصل بنا: لوحة واحدة
------------------------------------------------------------
الفورم والبيانات كانوا صندوقين متجاورين (نفس شكل باقي المعاهد).
هنا لوحة واحدة بزوايا 40px وتدرّج خفيف — الشكل المميّز للعُماني —
والفاصل بين نصّيها خط رفيع بدل حافة صندوق تاني، عشان العين تقراهم
حاجة واحدة مش اتنين.
البيانات كبسولات بنفس لغة .omcc-chip في /categories، والحقول
كبسولات كاملة الاستدارة عشان الشكلين يتكلّموا نفس اللغة.
كل الأصناف بادئتها omcu- فما بتلمسش أي قاعدة قديمة.
============================================================ */
body.theme-omani .omcu-section {
background: #fff;
padding: 34px 0 56px;
}
body.theme-omani .omcu-panel {
display: grid;
/* عمود البيانات ثابت نسبيًا والفورم بياخد الباقي: الفورم هو الفعل
الرئيسي في الصفحة فبياخد المساحة الأكبر. */
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: 40px;
padding: 44px 48px;
border-radius: 40px;
border: 1px solid #e6dcf6;
background: linear-gradient(140deg, #f6f2fc 0%, #f0f5f9 58%, #fbfaff 100%);
box-shadow: 0 18px 44px rgba(0, 52, 82, .08);
}
/* الفاصل خط رفيع جوّه اللوحة مش حافة صندوق — منطقي عشان يقلب مع RTL. */
body.theme-omani .omcu-form {
min-width: 0;
padding-inline-start: 40px;
border-inline-start: 1px solid rgba(92, 48, 146, .16);
}
body.theme-omani .omcu-side { min-width: 0; }
body.theme-omani .omcu-eyebrow {
margin: 0 0 8px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #5c3092;
}
body.theme-omani .omcu-name {
margin: 0 0 12px;
font-size: 1.85rem;
font-weight: 700;
line-height: 1.25;
color: #003452;
}
body.theme-omani .omcu-lead {
margin: 0 0 26px;
/* حد القراءة (~70 حرف كحد أقصى في نظام التصميم)؛ عند 58ch النص
بيوصل تقريبًا لعرض الكبسولات تحته فالعمود بيبان مرصوص. */
max-width: 58ch;
color: #46586a;
line-height: 1.75;
}
body.theme-omani .omcu-pills {
list-style: none;
margin: 0 0 26px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
body.theme-omani .omcu-pill {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid #e6dcf6;
background: #f3effa;
color: #003452;
text-decoration: none;
transition: background .18s ease, border-color .18s ease, color .18s ease,
transform .18s ease, box-shadow .18s ease;
}
/* لونين بالتبادل: نفس نَفَس سحابة الكبسولات في /categories. */
body.theme-omani .omcu-pills li:nth-child(2n) .omcu-pill {
background: #eaf2f8;
border-color: #d7e6f1;
}
body.theme-omani .omcu-pill .bi {
flex: none;
font-size: 1.05rem;
line-height: 1;
color: #5c3092;
}
body.theme-omani .omcu-pill-t {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
body.theme-omani .omcu-pill-k {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #5a6b7c;
}
body.theme-omani .omcu-pill-v {
font-size: .95rem;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
/* ساعات العمل مش رابط، فمالهاش حالة hover ولا مؤشر يد. */
body.theme-omani .omcu-pill--static { cursor: default; }
body.theme-omani a.omcu-pill:hover,
body.theme-omani a.omcu-pill:focus,
body.theme-omani a.omcu-pill:focus-visible {
background: linear-gradient(120deg, #003452, #5c3092);
border-color: transparent;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(0, 52, 82, .18);
text-decoration: none;
}
body.theme-omani a.omcu-pill:hover .bi,
body.theme-omani a.omcu-pill:focus .bi,
body.theme-omani a.omcu-pill:focus-visible .bi { color: #fff; }
body.theme-omani a.omcu-pill:hover .omcu-pill-k,
body.theme-omani a.omcu-pill:focus .omcu-pill-k,
body.theme-omani a.omcu-pill:focus-visible .omcu-pill-k { color: rgba(255, 255, 255, .84); }
body.theme-omani a.omcu-pill:focus-visible,
body.theme-omani .omcu-go:focus-visible {
outline: 2px solid #5c3092;
outline-offset: 3px;
}
body.theme-omani .omcu-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
body.theme-omani .omcu-go {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid #cbb8e6;
background: #fff;
color: #003452;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.theme-omani .omcu-go .bi { font-size: 1rem; color: #5c3092; }
body.theme-omani .omcu-go:hover,
body.theme-omani .omcu-go:focus {
background: #003452;
border-color: #003452;
color: #fff;
text-decoration: none;
}
body.theme-omani .omcu-go:hover .bi,
body.theme-omani .omcu-go:focus .bi { color: #fff; }
/* ── الفورم: حقول كبسولة ───────────────────────────────────────
الثيم بيفرض border-radius:4px !important على كل .form-control و.btn
(أول الملف)، فلازم !important هنا عشان الاستدارة الكاملة تعدّي —
ده استثناء موضعي داخل .omcu-form بس.
───────────────────────────────────────────────────────────── */
body.theme-omani .omcu-form .inst-cform-h {
margin: 0 0 18px;
font-size: 1.15rem;
font-weight: 700;
color: #003452;
}
body.theme-omani .omcu-form .form-control {
border-radius: 999px !important;
border: 1px solid #e2e6ec;
background: #fff;
height: auto;
padding: 12px 22px;
font-size: .95rem;
color: #003452;
box-shadow: none;
}
/* التكست إيريا مش كبسولة (سطور متعددة) لكن بزوايا اللوحة الكبيرة. */
body.theme-omani .omcu-form textarea.form-control {
border-radius: 26px !important;
min-height: 130px;
line-height: 1.6;
}
body.theme-omani .omcu-form .form-control::placeholder { color: #5a6b7c; opacity: 1; }
body.theme-omani .omcu-form .form-control:focus {
border-color: #5c3092;
box-shadow: 0 0 0 3px rgba(92, 48, 146, .14);
outline: none;
}
body.theme-omani .omcu-form .inst-cform-actions { margin-top: 22px; }
body.theme-omani .omcu-form #submit_contact {
border-radius: 999px !important;
border: 0;
padding: 13px 40px;
background: linear-gradient(120deg, #003452, #5c3092);
color: #fff !important;
font-weight: 700;
box-shadow: 0 10px 22px rgba(0, 52, 82, .18);
transition: filter .18s ease, transform .18s ease;
}
body.theme-omani .omcu-form #submit_contact:hover,
body.theme-omani .omcu-form #submit_contact:focus {
filter: brightness(1.12);
transform: translateY(-1px);
}
@media (max-width: 991px) {
body.theme-omani .omcu-panel {
grid-template-columns: 1fr;
gap: 28px;
padding: 32px 26px;
border-radius: 32px;
}
/* عمود واحد: الفاصل بقى خط أفقي فوق الفورم بدل رأسي على جنبه. */
body.theme-omani .omcu-form {
padding-inline-start: 0;
padding-top: 28px;
border-inline-start: 0;
border-top: 1px solid rgba(92, 48, 146, .16);
}
}
@media (max-width: 575px) {
body.theme-omani .omcu-section { padding: 24px 0 40px; }
body.theme-omani .omcu-panel { padding: 24px 18px; border-radius: 26px; }
body.theme-omani .omcu-name { font-size: 1.5rem; }
body.theme-omani .omcu-pill { padding: 11px 16px; gap: 11px; }
body.theme-omani .omcu-pill-v { font-size: .88rem; }
body.theme-omani .omcu-form .form-control { padding: 11px 18px; }
body.theme-omani .omcu-go { flex: 1 1 100%; justify-content: center; }
body.theme-omani .omcu-form #submit_contact { width: 100%; }
}
/* على 390px خانة كود الدولة (33% من الصف، من _institute.css) بتقصّ
الـplaceholder فيبان "Country C". الصف بيتفكّ لعمود هنا عشان النصّين
يتقروا كاملين — أفضل من تصغير الخط. */
@media (max-width: 575px) {
body.theme-omani .omcu-form .inst-cform-row--split { display: block; }
body.theme-omani .omcu-form .inst-cform-cc {
max-width: 100%;
margin-bottom: 16px;
}
}
/* ============================================================
(2026-09-09) العُماني — صفحة التنزيلات: لوحة "اختيار + معاينة"
------------------------------------------------------------
الصفحة كانت خط زمني بأربع بنود متساوية + كرت "اطلب الكتيب" — نفس
الهيكل اللي كان عند باقي المعاهد. هنا لوحة واحدة بزوايا 28px
(شكل العُماني) مقسومة نصّين: كبسولات اختيار (أداة تمييز العُماني)
ومعاينة ثابتة للمستند المميّز.
ليه نصّين مش عمود واحد: الوزن بيبقى غير متساوي بشكل واضح — ملف
واحد بصورة ووصف وزرار كبير، والباقي كبسولات سطر واحد بدون وصف.
كل الأصناف بادئتها omdl- فمش بتلمس أي قاعدة قديمة (.omsc-* سايبة
زي ما هي لأن صفحات تانية بتستعملها).
============================================================ */
body.theme-omani .omdl-section {
background: #fff;
padding: 34px 0 56px;
}
body.theme-omani .omdl-panel {
display: grid;
/* عمود الاختيار أعرض: هو اللي فيه ست خيارات، والمعاينة ملف واحد. */
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: 30px;
/* المعاينة بتاخد ارتفاع محتواها بس: من غير كده اللوح المتدرّج
بيتمدّ لطول عمود الاختيار وبيسيب فراغ ملوّن فاضي تحت الملاحظة. */
align-items: start;
padding: 30px;
border-radius: 28px;
border: 1px solid #e6dcf6;
background: #fff;
box-shadow: 0 18px 44px rgba(0, 52, 82, .08);
}
/* ── النص الأول: الاختيار ───────────────────────────────── */
body.theme-omani .omdl-pick { min-width: 0; }
body.theme-omani .omdl-eyebrow {
margin: 0 0 8px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .16em;
color: #5c3092;
}
body.theme-omani .omdl-name {
margin: 0 0 12px;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.25;
color: #003452;
}
body.theme-omani .omdl-lead {
margin: 0 0 24px;
max-width: 62ch; /* حد القراءة في نظام التصميم */
color: #46586a;
font-size: .96rem;
line-height: 1.75;
}
/* عنوان المجموعة: بيفصل الملفات عن القوائم الحيّة، فالبنود مش كتلة
واحدة متساوية الوزن. */
body.theme-omani .omdl-group {
margin: 0 0 10px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #46586a;
}
body.theme-omani .omdl-pills {
list-style: none;
margin: 0 0 26px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body.theme-omani .omdl-pills--live { margin-bottom: 0; }
body.theme-omani .omdl-pill {
position: relative;
display: flex;
align-items: center;
gap: 13px;
padding: 11px 20px;
border-radius: 999px;
border: 1px solid #e6dcf6;
background: #f3effa;
color: #003452;
transition: background .18s ease, border-color .18s ease,
transform .18s ease, box-shadow .18s ease;
}
/* القوائم الحيّة بلون تاني: مش ملفات، فمش لازم تبان زي إخواتها. */
body.theme-omani .omdl-pill--live {
background: #eaf2f8;
border-color: #d7e6f1;
}
body.theme-omani .omdl-pill-i {
flex: none;
font-size: 1.05rem;
line-height: 1;
color: #5c3092;
}
body.theme-omani .omdl-pill-t {
flex: 1 1 auto;
min-width: 0;
font-size: .95rem;
font-weight: 600;
line-height: 1.4;
color: #003452;
text-decoration: none;
}
body.theme-omani a.omdl-pill-t:hover,
body.theme-omani a.omdl-pill-t:focus { color: #5c3092; text-decoration: underline; }
/* الكبسولة الحيّة كلها مساحة نقر: الرابط بيتمدد فوق الكبسولة. */
body.theme-omani .omdl-pill-full::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
body.theme-omani .omdl-pill--live:hover,
body.theme-omani .omdl-pill--live:focus-within {
background: #e0edf6;
border-color: #5c3092;
transform: translateY(-2px);
}
body.theme-omani .omdl-pill-full:focus-visible {
outline: 2px solid #5c3092;
outline-offset: 3px;
}
/* الكبسولة المحدَّدة (المستند المعروض في المعاينة): مصمتة بتدرّج
الموقع عشان تربط النصّين ببعض بصريًا. */
body.theme-omani .omdl-pill--on {
background: linear-gradient(120deg, #003452, #5c3092);
border-color: transparent;
box-shadow: 0 10px 22px rgba(0, 52, 82, .18);
}
body.theme-omani .omdl-pill--on .omdl-pill-i,
body.theme-omani .omdl-pill--on .omdl-pill-t { color: #fff; }
body.theme-omani .omdl-pill-now {
flex: none;
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
/* أبيض بشفافية 88% فوق التدرّج الكحلي — التباين فوق 7:1. */
color: rgba(255, 255, 255, .88);
}
/* زرار الـPDF جوّه الكبسولة: رقاقة صغيرة محدَّدة بخط — شكل مختلف
تمامًا عن زرار المعاينة الكبير، فمفيش زرار متكرر بنفس الشكل. */
body.theme-omani .omdl-chip {
flex: none;
border: 1px solid #5c3092;
background: #fff;
color: #5c3092;
border-radius: 999px;
padding: 5px 15px;
font-size: .74rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.4;
cursor: pointer;
transition: background .18s ease, color .18s ease;
}
body.theme-omani .omdl-chip:hover,
body.theme-omani .omdl-chip:focus { background: #5c3092; color: #fff; }
body.theme-omani .omdl-chip:focus-visible {
outline: 2px solid #003452;
outline-offset: 2px;
}
/* ── النص الثاني: المعاينة ──────────────────────────────── */
body.theme-omani .omdl-view {
min-width: 0;
padding: 26px;
border-radius: 22px;
border: 1px solid #e6dcf6;
background: linear-gradient(150deg, #f6f2fc 0%, #eaf2f8 100%);
}
body.theme-omani .omdl-view-tag {
margin: 0 0 14px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #5c3092;
}
/* ورقة مصغّرة: شريط رأس + صفوف بثلاث خانات (دورة / مدينة / تاريخ).
زخرفة بحتة بتقول للعين "ده جدول" من غير صورة حقيقية. */
body.theme-omani .omdl-sheet {
display: flex;
flex-direction: column;
gap: 9px;
padding: 16px;
margin-bottom: 20px;
border-radius: 16px;
background: #fff;
border: 1px solid #e6dcf6;
box-shadow: 0 8px 20px rgba(0, 52, 82, .07);
}
body.theme-omani .omdl-sheet-head {
height: 14px;
border-radius: 999px;
background: linear-gradient(120deg, #003452, #5c3092);
}
body.theme-omani .omdl-sheet-row {
display: flex;
gap: 8px;
align-items: center;
}
body.theme-omani .omdl-sheet-row i {
height: 7px;
border-radius: 999px;
background: #e4e9f0;
}
body.theme-omani .omdl-sheet-row i:nth-child(1) { flex: 5 1 0; }
body.theme-omani .omdl-sheet-row i:nth-child(2) { flex: 2 1 0; background: #ece5f6; }
body.theme-omani .omdl-sheet-row i:nth-child(3) { flex: 1 1 0; background: #dfe9f2; }
body.theme-omani .omdl-sheet-row:nth-child(2n) i:nth-child(1) { flex: 4 1 0; }
body.theme-omani .omdl-view-h {
margin: 0 0 8px;
font-size: 1.16rem;
font-weight: 700;
line-height: 1.4;
color: #003452;
}
body.theme-omani .omdl-view-p {
margin: 0 0 16px;
color: #46586a;
font-size: .94rem;
line-height: 1.75;
}
body.theme-omani .omdl-facts {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0 0 20px;
}
body.theme-omani .omdl-facts span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 13px;
border-radius: 999px;
background: #fff;
border: 1px solid #dfd4f0;
font-size: .78rem;
font-weight: 600;
color: #003452;
}
body.theme-omani .omdl-facts .bi { color: #5c3092; font-size: .9rem; }
/* الفعل الرئيسي في الصفحة: زرار واحد كبير، والباقي رقاقات أو روابط. */
body.theme-omani .omdl-cta {
display: block;
width: 100%;
border: 0;
border-radius: 999px;
padding: 14px 28px;
background: linear-gradient(120deg, #003452, #5c3092);
color: #fff;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 22px rgba(0, 52, 82, .18);
transition: filter .18s ease, transform .18s ease;
}
body.theme-omani .omdl-cta:hover,
body.theme-omani .omdl-cta:focus { filter: brightness(1.12); transform: translateY(-1px); }
body.theme-omani .omdl-cta:focus-visible {
outline: 2px solid #003452;
outline-offset: 3px;
}
body.theme-omani .omdl-open {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
color: #46326e;
font-size: .9rem;
font-weight: 600;
text-decoration: underline;
}
body.theme-omani .omdl-open:hover,
body.theme-omani .omdl-open:focus { color: #003452; }
body.theme-omani .omdl-open .bi { font-size: 1rem; }
body.theme-omani .omdl-note {
margin: 16px 0 0;
font-size: .82rem;
line-height: 1.65;
color: #46586a;
}
@media (max-width: 991px) {
body.theme-omani .omdl-panel {
grid-template-columns: 1fr;
gap: 26px;
padding: 24px;
}
}
@media (max-width: 575px) {
body.theme-omani .omdl-section { padding: 24px 0 40px; }
body.theme-omani .omdl-panel { padding: 18px; border-radius: 26px; }
body.theme-omani .omdl-name { font-size: 1.4rem; }
body.theme-omani .omdl-view { padding: 20px; }
/* على 390px العنوان بيلف لسطرين جوّه نفس الصف — الأيقونة والرقاقة
بيفضلوا جنبه ومتمركزين، عشان الكبسولة تفضل كبسولة مش ثلاث سطور. */
body.theme-omani .omdl-pill {
flex-wrap: wrap;
row-gap: 6px;
padding: 12px 18px;
border-radius: 22px;
}
body.theme-omani .omdl-pill-t { flex: 1 1 auto; }
/* لو العنوان طويل والرقاقة لفّت لسطر لوحدها، تفضل في آخر الصف
مش في أوله — عشان كل الرقاقات تتقرا على نفس الحافة. */
body.theme-omani .omdl-chip { margin-inline-start: auto; }
/* الوسم لوحده بينزل سطر تحت: العنوان + الوسم في صف واحد بيتخنقوا. */
body.theme-omani .omdl-pill--on .omdl-pill-now {
flex: 0 0 100%;
text-align: end;
}
}
/* ================================================================
العُماني — صفحة "عن المعهد": مسار رأسي بكبسولات (2026-09-09)
----------------------------------------------------------------
ليه الشكل ده: الصفحة القديمة كانت كروت مكدّسة + خط زمني بأيقونات، وهي نفس
بنية الملف المشترك اللي بتتكرر عند الأحد عشر معهدًا. هنا التخطيط نفسه بقى
هو المحتوى: خط واحد متدرّج (كحلي #003452 → بنفسجي #5c3092) نازل على بداية
السطر، وعليه أربع كبسولات-محطات قاطعة للخط، والكلام جارٍ جنبه من غير أي صندوق.
الكبسولة هي أداة تمييز العُماني في DESIGN-SYSTEMS.md، فالصفحة فضلت من نفس
الموقع من غير ما تكرّر شكل الكروت.
مفيش صناديق بيضا للنص عمدًا: الصندوق هو اللي كان بيخلّي الصفحة تبان زي
صفحات باقي المعاهد. النص على خلفية القسم نفسها (#f3f1f8) وتباينه 5.2:1.
كل المسافات من سلّم الـ4، والاتجاه بخصائص منطقية بس عشان العربي.
القواعد كلها جديدة ومسبوقة بـ body.theme-omani — مفيش قاعدة قديمة اتعدّلت.
================================================================ */
body.theme-omani .omp-path { position: relative; max-width: 820px; margin-inline: auto; }
/* الخط: بيبدأ من نص أول كبسولة وبيتلاشى تحت عشان ما يبانش مقطوع فجأة */
body.theme-omani .omp-path::before {
content: ''; position: absolute; inset-inline-start: 20px; top: 24px; bottom: 0;
width: 4px; border-radius: 4px;
background: linear-gradient(180deg, #003452, #5c3092);
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), rgba(0, 0, 0, 0) 100%);
}
body.theme-omani .omp-stop { position: relative; margin-bottom: 40px; }
body.theme-omani .omp-stop:last-of-type { margin-bottom: 24px; }
/* المحطة: كبسولة قاعدة *فوق* الخط، والهالة بلون خلفية القسم بتقطع الخط عندها */
body.theme-omani .omp-label {
position: relative; z-index: 1;
display: inline-flex; align-items: center;
margin: 0 0 16px; padding: 9px 24px;
background: linear-gradient(120deg, #003452, #5c3092);
color: #fff; border-radius: 30px;
font-size: 1.02rem; font-weight: 700; line-height: 1.4;
box-shadow: 0 0 0 6px #f3f1f8, 0 10px 22px rgba(92, 48, 146, .22);
}
/* الكلام مزاح جنب الخط، وعرضه محدود بحوالي 66 حرف للقراية */
body.theme-omani .omp-body { padding-inline-start: 52px; }
body.theme-omani .omp-body p { margin: 0; max-width: 66ch; color: #5b6673; font-size: 1rem; line-height: 1.9; }
body.theme-omani .omp-lead { margin-bottom: 16px !important; font-weight: 600; color: #003452 !important; }
/* القيم: أربع كبسولات صغيرة جوّه المحطة (مش شبكة كروت) */
body.theme-omani .omp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
body.theme-omani .omp-chip {
background: #fff; border: 1px solid #d9d0ea; border-radius: 30px;
padding: 7px 18px; color: #003452; font-size: .93rem; font-weight: 600; line-height: 1.5;
box-shadow: 0 6px 14px rgba(0, 52, 82, .05);
}
/* أنواع الدورات: صف كبسولات-روابط، الوصف كله في الجملة اللي فوقها */
body.theme-omani .omp-routes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
body.theme-omani .omp-route {
display: inline-flex; align-items: center;
padding: 8px 22px; border: 2px solid #5c3092; border-radius: 30px;
background: #fff; color: #5c3092; font-size: .95rem; font-weight: 700;
text-decoration: none; line-height: 1.5;
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
body.theme-omani .omp-route:hover,
body.theme-omani .omp-route:focus-visible {
background: linear-gradient(120deg, #003452, #5c3092);
border-color: transparent; color: #fff; transform: translateY(-2px);
}
/* الخاتمة: سطر تواصل عند تلاشي الخط — مش زرار وحيد في نص الصفحة */
body.theme-omani .omp-end {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
padding-inline-start: 52px; margin: 0; color: #5b6673; font-size: .96rem; line-height: 1.8;
}
body.theme-omani .omp-end-t { font-weight: 700; color: #003452; }
body.theme-omani .omp-end a {
color: #5c3092; font-weight: 600; text-decoration: underline;
text-underline-offset: 3px; word-break: break-word;
}
body.theme-omani .omp-end a:hover { color: #003452; }
@media (max-width: 767px) {
/* على 390px الإزاحة 52px بتاكل عرض النص، فالخط والإزاحة بيصغروا مع بعض */
body.theme-omani .omp-path::before { inset-inline-start: 15px; width: 3px; top: 22px; }
body.theme-omani .omp-label { padding: 8px 18px; font-size: .95rem; box-shadow: 0 0 0 5px #f3f1f8, 0 8px 18px rgba(92, 48, 146, .2); }
body.theme-omani .omp-body,
body.theme-omani .omp-end { padding-inline-start: 34px; }
body.theme-omani .omp-body p { font-size: .97rem; line-height: 1.85; }
body.theme-omani .omp-stop { margin-bottom: 32px; }
body.theme-omani .omp-route { padding: 8px 18px; font-size: .92rem; }
}
/* ================================================================
العُماني — /faq: حيطة كبسولات في عمودين متداخلين (2026-09-09)
----------------------------------------------------------------
ليه الشكل ده: صفحة الأسئلة القديمة كانت تلات مجموعات بعناوين ثابتة +
أكورديون مقفول + شريط CTA في الآخر — وهي نفس بنية الملف المشترك اللي
بتتكرر عند الأحد عشر معهدًا، فالصفحة كانت بتتقري نفس القراية مهما اتغيّر
اللون. هنا مفيش مجموعات ولا عناوين مجموعات ولا طيّ: كل سؤال كبسولة
إجابتها مفتوحة جوّاها، والكبسولات مرصوصة بـ CSS columns فبتتداخل في
عمودين بأطوال مختلفة (masonry بدون أي جافاسكريبت).
التفرقة الموضوعية بلون الحافة بس: كحلي = التسجيل والرسوم، بنفسجي =
الحضور والشهادة، متدرّج = التدريب للمؤسسات. اللون تزيين مش معلومة —
كل سؤال مفهوم لوحده، فمفيش حاجة بتضيع على حد مش شايف الفرق.
الكبسولة بزوايا 28px هي أداة تمييز العُماني في DESIGN-SYSTEMS.md،
فالصفحة فضلت من نفس الموقع من غير ما تكرّر شكل باقي المعاهد.
المسافات كلها من سلّم الـ4، والاتجاه بخصائص منطقية بس عشان العربي.
كل القواعد جديدة ومسبوقة بـ body.theme-omani — مفيش قاعدة قديمة اتعدّلت.
(قواعد .omsc-faq-* القديمة بقت غير مستعملة في الصفحة دي وسيبتها زي ما هي.)
================================================================ */
body.theme-omani .omfq { background: #f3f1f8; padding: 46px 0 58px; }
/* عمودين متداخلين: الأعمدة بتتوازن لوحدها فبيطلع إيقاع أطوال مختلف،
مش صفوف متساوية زي الشبكة. */
body.theme-omani .omfq-wall {
max-width: 1060px;
margin-inline: auto;
column-count: 2;
column-gap: 26px;
}
body.theme-omani .omfq-cap {
position: relative;
/* الكبسولة ما تتقسمش بين عمودين — لازم تفضل كتلة واحدة */
break-inside: avoid;
-webkit-column-break-inside: avoid;
display: block;
margin: 0 0 26px;
padding: 24px 28px;
padding-inline-start: 44px;
background: #fff;
border: 1px solid #ece8f4;
border-radius: 28px;
box-shadow: 0 12px 30px rgba(0, 52, 82, .06);
transition: transform .22s, box-shadow .22s, border-color .22s;
}
body.theme-omani .omfq-cap:hover {
transform: translateY(-3px);
border-color: #ded4ee;
box-shadow: 0 20px 40px rgba(92, 48, 146, .14);
}
/* الحافة: شريط مستدير جوّه الكبسولة (مش border على الإطار) عشان يقبل
التدرّج ويفضل بعيد عن انحناء الـ28px من غير ما يتقصّ. */
body.theme-omani .omfq-cap::before {
content: '';
position: absolute;
inset-block: 24px;
inset-inline-start: 22px;
width: 6px;
border-radius: 6px;
background: #003452;
}
body.theme-omani .omfq-cap--pay::before { background: #003452; }
body.theme-omani .omfq-cap--sit::before { background: #5c3092; }
body.theme-omani .omfq-cap--org::before { background: linear-gradient(180deg, #003452, #5c3092); }
body.theme-omani .omfq-q {
margin: 0 0 10px;
font-size: 1.05rem;
font-weight: 700;
color: #003452;
line-height: 1.5;
}
/* عرض القراية ~62 حرف: العمود لوحده عرضه ~500px فالنص ما يمتدّش */
body.theme-omani .omfq-a {
margin: 0;
max-width: 62ch;
color: #56616e;
font-size: .95rem;
line-height: 1.85;
}
/* مدخلا الحيطة: سؤال التسجيل وسؤال الدورة الداخلية أكبر وبخلفية متدرّجة
خفيفة — عشان الكبسولات ما تبقاش كلها بنفس الوزن. */
body.theme-omani .omfq-cap--lg {
padding-block: 32px;
background: linear-gradient(140deg, #ffffff 40%, #f6f2fd);
}
body.theme-omani .omfq-cap--lg::before { width: 8px; inset-block: 30px; }
body.theme-omani .omfq-cap--lg .omfq-q { font-size: 1.32rem; margin-bottom: 12px; }
body.theme-omani .omfq-cap--lg .omfq-a { font-size: 1.02rem; color: #4a5561; }
/* كبسولة التواصل: جوّه الحيطة في النص، مش شريط خاتمة تحت الصفحة */
body.theme-omani .omfq-cap--ask {
background: linear-gradient(130deg, #003452, #5c3092);
border-color: transparent;
box-shadow: 0 18px 38px rgba(0, 52, 82, .24);
}
body.theme-omani .omfq-cap--ask:hover {
border-color: transparent;
box-shadow: 0 24px 46px rgba(0, 52, 82, .3);
}
body.theme-omani .omfq-cap--ask::before { background: rgba(255, 255, 255, .6); }
body.theme-omani .omfq-cap--ask .omfq-q { color: #fff; margin-bottom: 14px; }
body.theme-omani .omfq-reach {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
body.theme-omani .omfq-reach a {
color: #fff;
font-size: .95rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-word;
}
body.theme-omani .omfq-reach a:hover { color: #e7ddf7; }
@media (max-width: 860px) {
/* عمود واحد: عمودين على شاشة ضيقة بيخلّوا سطر القراية 30 حرف */
body.theme-omani .omfq-wall { column-count: 1; max-width: 620px; }
}
@media (max-width: 575px) {
body.theme-omani .omfq { padding: 28px 0 40px; }
body.theme-omani .omfq-cap {
margin-bottom: 18px;
padding: 20px 20px;
padding-inline-start: 32px;
border-radius: 24px;
}
body.theme-omani .omfq-cap::before { inset-block: 20px; inset-inline-start: 15px; width: 5px; }
body.theme-omani .omfq-cap--lg { padding-block: 24px; }
body.theme-omani .omfq-cap--lg::before { width: 6px; inset-block: 24px; }
body.theme-omani .omfq-cap--lg .omfq-q { font-size: 1.16rem; }
body.theme-omani .omfq-q { font-size: 1.02rem; }
}
/* أقراص الروابط جوّه الكبسولة: بيانات حقيقية (مدن / مسارات) مش زخرفة.
موجودة في تلات كبسولات بس — لو اتحطّت تحت كل سؤال هترجع تعمل "نفس
السطر المتكرّر" اللي المفروض المعمار ده يتخلّص منه. */
body.theme-omani .omfq-pins {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 0;
padding: 0;
}
body.theme-omani .omfq-pin {
display: inline-block;
padding: 6px 16px;
border: 1px solid #d9d0ea;
border-radius: 30px;
background: #fbfaff;
color: #46297a;
font-size: .86rem;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
transition: background .2s, color .2s, border-color .2s;
}
body.theme-omani .omfq-pin:hover,
body.theme-omani .omfq-pin:focus-visible {
background: #5c3092;
border-color: #5c3092;
color: #fff;
}
/* ===================================================================
(2026-09-09) /services/in-house-courses + /services/public-courses
المعهد العُماني الأول — إضافة في آخر الملف، مفيش قاعدة قديمة اتغيّرت.
السبب: الصفحتان كانتا بنفس معمار العشرة معاهد التانية (٣ خطوات مرقّمة +
٤ مزايا في شبكة | ٣ مزايا + ٣ شروط + زرارين خاتمة). الأشكال بس اللي كانت
بتختلف، فالقراية كانت واحدة. المعمار اتغيّر في الفيوهات، وده تنسيقه.
الصفحتان مختلفتان عن بعض عن قصد:
- الداخلية: مسار رأسي على عمود، محطتان كلام ومحطة تالتة هي النموذج.
- العامة: حيطة كبسولات في عمودين متداخلين، بلا عناوين أقسام ولا مسار.
الاتجاه: خصائص منطقية بس (inset-inline-start / padding-inline / border-inline)
عشان النسختين العربية والإنجليزية.
=================================================================== */
/* ---------- /services/in-house-courses: مسار المحطات ---------- */
body.theme-omani .omih { background: #f3f1f8; padding: 42px 0 58px; }
/* العمود: خط متدرّج واحد ماشي من أول محطة لآخر محطة. الأرقام غايبة عن قصد —
الترقيم (01/02/03) هو العلامة المشتركة اللي المعمار ده بيتخلّص منها. */
body.theme-omani .omih-path {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 940px;
position: relative;
}
body.theme-omani .omih-stop { position: relative; padding-inline-start: 62px; margin-bottom: 22px; }
body.theme-omani .omih-stop:last-child { margin-bottom: 0; }
/* الخط اتقسم قطع بين نقطة ونقطة (مش خط واحد على طول الـ
) عشان يقف عند
نقطة المحطة الأخيرة بالظبط: النموذج هو نهاية المسار، مش محطة الخط بيعدّيها.
ارتفاع القطعة = باقي المحطة (100% - 44) + الفاصل (22) + نص النقطة الجاية (44). */
body.theme-omani .omih-stop:not(:last-child)::before {
content: '';
position: absolute;
inset-inline-start: 13px;
top: 44px;
height: calc(100% + 22px);
width: 6px;
border-radius: 6px;
background: linear-gradient(180deg, #003452, #5c3092);
}
/* نقطة المحطة: مركزها على مركز العمود (13 + 3 = 16px). */
body.theme-omani .omih-dot {
position: absolute;
inset-inline-start: 2px;
top: 30px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 7px solid #5c3092;
box-shadow: 0 0 0 5px #f3f1f8;
}
/* المحطة الأخيرة (النموذج) نقطتها مصمتة: نهاية المسار مش محطة عبور. */
body.theme-omani .omih-dot--end { background: #5c3092; border-color: #003452; }
body.theme-omani .omih-cap {
background: #fff;
border: 1px solid #ece8f4;
border-radius: 28px;
padding: 26px 32px;
box-shadow: 0 14px 34px rgba(0, 52, 82, .07);
}
body.theme-omani .omih-t {
margin: 0 0 12px;
font-size: 1.24rem;
font-weight: 700;
color: #003452;
line-height: 1.35;
}
body.theme-omani .omih-cap p {
margin: 0 0 14px;
max-width: 68ch;
color: #414c58;
font-size: 1rem;
line-height: 1.9;
}
body.theme-omani .omih-cap p:last-child { margin-bottom: 0; }
/* الميزة البارزة: واحدة بس من الأربعة، والتلاتة الباقيين في الفقرة اللي
تحتها — عشان ما تبقاش شبكة ٤ نقاط متساوية زي باقي المواقع. */
body.theme-omani .omih-pull {
border-inline-start: 5px solid #5c3092;
padding-inline-start: 18px;
margin: 20px 0 16px !important;
font-size: 1.1rem;
font-weight: 700;
color: #46297a;
line-height: 1.6;
}
/* ---------- محطة النموذج ---------- */
body.theme-omani .omih-cap--form {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%);
border-color: transparent;
color: #fff;
padding: 28px 28px 30px;
box-shadow: 0 18px 42px rgba(0, 52, 82, .24);
}
body.theme-omani .omih-cap--form::after {
content: '';
position: absolute;
inset-inline-end: -90px;
top: -110px;
width: 260px;
height: 260px;
border-radius: 50%;
border: 26px solid rgba(255, 255, 255, .07);
}
body.theme-omani .omih-t--onDark { position: relative; color: #fff; margin-bottom: 18px; }
body.theme-omani .omih-form { position: relative; }
body.theme-omani #message_inhouse:not(:empty) { margin-bottom: 16px; }
/* لوح أبيض جوّه الكبسولة الداكنة: الحقول محتاجة خلفية فاتحة عشان التباين. */
body.theme-omani .omih-panel {
background: #fff;
border-radius: 22px;
padding: 24px 26px 26px;
color: #003452;
}
body.theme-omani .omih-fs {
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid #efecf6;
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #5c3092;
line-height: 1.5;
}
body.theme-omani .omih-fs--2 { margin-top: 26px; }
body.theme-omani .omih-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
}
/* حقول النموذج جوّه .omih-cap، فلازم تتحرّر من قاعدة فقرات الكلام
(max-width: 68ch وmargin سفلي) — القاعدة دي أقوى في الأولوية، فالمحدّد هنا
بيذكر p صراحةً عشان يكسبها. من غير كده الحقل العريض بيقف عند 605px. */
body.theme-omani .omih-cap p.omih-f { margin: 0; min-width: 0; max-width: none; }
body.theme-omani .omih-f--full { grid-column: 1 / -1; }
body.theme-omani .omih-lbl {
display: block;
margin: 0 0 6px;
font-size: .82rem;
font-weight: 600;
color: #3d4752;
line-height: 1.5;
}
body.theme-omani .omih-panel .form-control {
display: block;
width: 100%;
height: auto;
padding: 11px 16px;
border: 1px solid #d9d0ea;
border-radius: 14px;
background: #fbfaff;
color: #003452;
font-size: .95rem;
line-height: 1.5;
box-shadow: none;
}
body.theme-omani .omih-panel .form-control:focus {
border-color: #5c3092;
box-shadow: 0 0 0 3px rgba(92, 48, 146, .2);
outline: 0;
}
body.theme-omani .omih-panel textarea.form-control { min-height: 116px; resize: vertical; }
body.theme-omani .omih-cap p.omih-sub { margin-top: 10px; }
body.theme-omani .omih-panel .btn {
border-radius: 30px;
padding: 11px 34px;
font-weight: 700;
}
/* ---------- /services/public-courses: حيطة الكبسولات ---------- */
body.theme-omani .ompc { background: #f3f1f8; padding: 42px 0 58px; }
/* عمودان متداخلان بأطوال مختلفة (CSS columns، بدون JS). */
body.theme-omani .ompc-wall {
max-width: 980px;
margin: 0 auto;
column-count: 2;
column-gap: 22px;
}
body.theme-omani .ompc-cap {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 22px;
background: #fff;
border: 1px solid #ece8f4;
border-radius: 28px;
padding: 24px 28px;
box-shadow: 0 10px 26px rgba(0, 52, 82, .06);
}
body.theme-omani .ompc-cap p {
margin: 0 0 12px;
color: #414c58;
font-size: .97rem;
line-height: 1.85;
}
body.theme-omani .ompc-cap p:last-child { margin-bottom: 0; }
body.theme-omani .ompc-cap strong { color: #003452; font-weight: 700; }
/* كبسولة الصدارة بتفرد على العمودين: هي مدخل الصفحة مش بند فيها. */
body.theme-omani .ompc-cap--lead {
column-span: all;
-webkit-column-span: all;
padding: 30px 34px;
background: linear-gradient(135deg, #fbfaff 0%, #f2edfa 100%);
border-color: #ded4f0;
}
body.theme-omani .ompc-lead {
max-width: 70ch;
font-size: 1.1rem !important;
color: #33404d !important;
line-height: 1.9 !important;
}
body.theme-omani .ompc-cities { font-size: .93rem !important; color: #4a5561 !important; }
body.theme-omani .ompc-cap a {
color: #46297a;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
body.theme-omani .ompc-cap a:hover,
body.theme-omani .ompc-cap a:focus-visible { color: #003452; }
/* الأحجام مختلفة عن قصد: الكبسولات المتساوية هي اللي بتخلّي الصفحة تتقري
كشبكة بنود، وهو بالظبط اللي المعمار ده بيهرب منه. */
/* كبسولة الإلغاء بتفرد على العمودين كمان: بتقفل الحيطة بسطر عريض بدل ما
العمودين يسيبوا فراغ مسنّن في الآخر، وهي أطول بند فمكانها الطبيعي عريض. */
body.theme-omani .ompc-cap--wide { column-span: all; -webkit-column-span: all; }
/* الكبسولة العريضة بتاخد عرض الحيطة كلها، فالسطر لازم يتحدّ عشان القراية. */
body.theme-omani .ompc-cap--wide p { max-width: 72ch; }
body.theme-omani .ompc-cap--sm { padding: 20px 24px; }
body.theme-omani .ompc-cap--sm p { font-size: .93rem; }
body.theme-omani .ompc-cap--lg { padding: 28px 30px; }
body.theme-omani .ompc-cap--lg p { font-size: 1.02rem; line-height: 1.95; }
/* عنوان على كبسولتين بس من الستة، فمفيش نمط "عنوان + سطر وصف" متكرّر. */
body.theme-omani .ompc-t {
margin: 0 0 10px;
font-size: 1.06rem;
font-weight: 700;
color: #003452;
line-height: 1.4;
}
/* رابط التسجيل: قرص جوّه كبسولة "التأكيد والدفع" — مكانه الطبيعي جنب الكلام
اللي بيشرحه، مش زرار خاتمة في آخر الصفحة. */
body.theme-omani .ompc-go { margin-top: 14px !important; }
body.theme-omani .ompc-go a {
display: inline-block;
padding: 8px 22px;
border-radius: 30px;
background: #5c3092;
color: #fff;
font-size: .92rem;
font-weight: 700;
text-decoration: none;
transition: background .2s;
}
body.theme-omani .ompc-go a:hover,
body.theme-omani .ompc-go a:focus-visible { background: #003452; color: #fff; }
/* ---------- الموبايل ---------- */
@media (max-width: 767px) {
/* عمود واحد: عمودان على 390px بيخلّوا سطر القراية أقل من 30 حرف. */
body.theme-omani .ompc-wall { column-count: 1; max-width: 620px; }
body.theme-omani .omih-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
body.theme-omani .omih { padding: 28px 0 42px; }
body.theme-omani .ompc { padding: 28px 0 42px; }
/* العمود بيرفع لـ4px والنقطة بتصغر عشان المسافة الجانبية ما تاكلش
عرض النص على الشاشة الضيقة. */
body.theme-omani .omih-stop { padding-inline-start: 40px; margin-bottom: 18px; }
body.theme-omani .omih-stop:not(:last-child)::before { inset-inline-start: 9px; top: 35px; width: 4px; height: calc(100% + 18px); }
body.theme-omani .omih-dot { inset-inline-start: 0; top: 24px; width: 22px; height: 22px; border-width: 6px; box-shadow: 0 0 0 4px #f3f1f8; }
body.theme-omani .omih-cap { padding: 20px; border-radius: 24px; }
body.theme-omani .omih-cap--form { padding: 20px 16px 22px; }
body.theme-omani .omih-panel { padding: 18px 16px 20px; border-radius: 18px; }
body.theme-omani .omih-t { font-size: 1.12rem; }
body.theme-omani .omih-pull { font-size: 1.02rem; padding-inline-start: 14px; }
body.theme-omani .omih-panel .btn { width: 100%; }
body.theme-omani .ompc-cap { padding: 20px; border-radius: 24px; margin-bottom: 16px; }
body.theme-omani .ompc-cap--lead { padding: 22px 20px; }
body.theme-omani .ompc-lead { font-size: 1.02rem !important; }
body.theme-omani .ompc-cap--lg { padding: 22px 20px; }
}
/* ============================================================================
(2026-09-09) العملاء: سحابة كبسولات بدل شبكة القطاعات
----------------------------------------------------------------------------
ليه: الكتلة القديمة (.omsc-sectors) كانت ١٠ بنود متساوية في عمودين بنفس ترتيب
باقي المعاهد وتحت عنوان "القطاعات التي نخدمها" — نفس القراءة عند الـ11 مهما
اختلف اللون. الجديد بيتبع أداة تمييز العُماني (كبسولات مرصوصة) لكنه بيغيّر
المعمار نفسه: مفيش عنوان قسم، ومفيش صفوف منتظمة، والأوزان مش متساوية.
ملاحظة: قواعد .omsc-sectors فوق بقت غير مستعملة في /clients واتسيبت كما هي
عشان ما نلمسش قاعدة قديمة من غير داعي.
============================================================================ */
/* السحابة: flex-wrap — الصفوف بتتكوّن من عرض الكبسولات نفسها مش من أعمدة ثابتة */
body.theme-omani .om-cloud {
list-style: none;
margin: 0;
padding: 0;
/* الصندوق نفسه بيبدأ من حافة الحاوية (مش متوسّط) عشان يتلاقى مع عنوان
حائط الشعارات تحته، والحافة النهائية تفضل مشرشرة */
max-width: 900px;
display: flex;
flex-wrap: wrap;
align-items: center;
/* محاذاة من جهة البداية وحافة نهاية مشرشرة: السحابة المتوسّطة بتبان
كودجت متناظر، والمشرشرة بتبان سحابة فعلاً وبتتماشى مع عنوان حائط
الشعارات تحتها اللي بيبدأ من نفس الحافة */
justify-content: flex-start;
gap: 12px 14px;
}
/* الكبسولة الأساس (الحجم الصغير): اسم القطاع بس — بلا أيقونة ولا رقم ولا وصف */
body.theme-omani .om-pill {
max-width: 100%;
border-radius: 999px;
background: #fff;
border: 1px solid #e6dff3;
color: #003452;
font-weight: 600;
line-height: 1.4;
text-align: center;
box-shadow: 0 6px 16px rgba(0, 52, 82, .06);
transition: transform .2s, border-color .2s, box-shadow .2s;
}
body.theme-omani .om-pill--sm { padding: 9px 20px; font-size: .92rem; }
body.theme-omani .om-pill--md { padding: 12px 26px; font-size: 1.04rem; border-color: #d9cdee; }
/* الكبسولتان الكبيرتان: متدرّج الهوية (كحلي → بنفسجي) وأبيض فوقه — تباين عالي،
ووظيفتها إنها تكسر انتظام السحابة مش إنها ادعاء إنهم الأكبر */
body.theme-omani .om-pill--lg {
padding: 17px 36px;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%);
box-shadow: 0 16px 34px rgba(92, 48, 146, .22);
}
/* إزاحة رأسية متفاوتة: من غيرها الكبسولات بتصطف على خط واحد وترجع تبان كصفوف */
body.theme-omani .om-pill:nth-child(3n) { margin-block-start: 16px; }
body.theme-omani .om-pill:nth-child(4n) { margin-block-end: 14px; }
body.theme-omani .om-pill:hover {
transform: translateY(-3px);
border-color: #5c3092;
box-shadow: 0 16px 32px rgba(92, 48, 146, .16);
}
body.theme-omani .om-pill--lg:hover { border-color: transparent; box-shadow: 0 20px 40px rgba(92, 48, 146, .3); }
/* نداء التواصل: سطر هادي بكبسولة عمل، بدل الشريط المتدرّج العريض اللي كان بيقفل
الصفحة بنفس طريقة باقي المواقع */
body.theme-omani .om-cloud-ask {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin: 38px 0 0;
max-width: 900px;
justify-content: flex-start;
color: #5b6673;
font-size: 1rem;
line-height: 1.7;
text-align: start;
}
body.theme-omani .om-pill-act {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 11px 28px;
font-weight: 600;
color: #fff;
text-decoration: none;
background: linear-gradient(135deg, #003452 0%, #5c3092 100%);
box-shadow: 0 12px 26px rgba(92, 48, 146, .22);
transition: filter .2s, transform .2s;
}
body.theme-omani .om-pill-act:hover,
body.theme-omani .om-pill-act:focus-visible { color: #fff; filter: brightness(1.12); transform: translateY(-2px); }
/* الموبايل: الأسماء الطويلة لازم تلف جوّه الكبسولة، والحجم الكبير بينزل عشان
ما يعملش تمرير أفقي على 390px */
@media (max-width: 767px) {
body.theme-omani .om-cloud { gap: 10px; }
body.theme-omani .om-pill--sm { padding: 8px 16px; font-size: .88rem; }
body.theme-omani .om-pill--md { padding: 10px 20px; font-size: .95rem; }
body.theme-omani .om-pill--lg { padding: 14px 24px; font-size: 1.08rem; }
body.theme-omani .om-pill:nth-child(3n) { margin-block-start: 8px; }
body.theme-omani .om-pill:nth-child(4n) { margin-block-end: 6px; }
body.theme-omani .om-cloud-ask { margin-top: 30px; font-size: .95rem; }
}
/* ============================================================================
العُماني — /register و/in-house-training-proposal و/course-finder (2026-09-09)
المشكلة اللي القسم ده بيحلّها: التلات صفحات كانت بتتقري نسخة واحدة عند الـ11
معهد — شريط "STEP 1" ملوّن، شبكة حقول، شريط "STEP 2"، وعمود جانبي فيه بيانات
المعهد و"ماذا يحدث بعد الإرسال" بتلات بنود. اللون كان الفرق الوحيد.
الحل معماري مش لوني، وكل صفحة من التلاتة ليها معمار مختلف عن أختها:
/register → لوحة واحدة بزوايا 28px مقسومة (فورم + كبسولات إرشادية عمودية)
/in-house → مسار كبسولي بمحطتين، والفورم هو المحطة الأخيرة جوّه كبسولة داكنة
/course-finder → الباحث جوّه كبسولة كبيرة، وتحته سحابة كبسولات التخصصات
كله بلغة العُماني المعروفة: زوايا 28px، تدرّج كحلي #003452 → بنفسجي #5c3092،
وكبسولات (أداة التمييز بتاعة الموقع في DESIGN-SYSTEMS.md).
============================================================================ */
/* ───────────────────────── /register: لوحة واحدة مقسومة ───────────────────────── */
body.theme-omani #register-section.omreg { background: #f3f1f8; padding: 34px 0 58px; }
body.theme-omani .omreg-panel {
background: #fff;
border: 1px solid #ece8f4;
border-radius: 28px;
box-shadow: 0 22px 54px rgba(0, 52, 82, .09);
overflow: hidden;
}
body.theme-omani .omreg-head { padding: 30px 34px 22px; border-bottom: 1px solid #efecf6; }
body.theme-omani .omreg-eyebrow {
display: block; margin-bottom: 8px;
font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5c3092;
}
body.theme-omani .omreg-title { margin: 0; font-size: 1.9rem; font-weight: 700; color: #003452; line-height: 1.25; }
/* القسمة: عمودان جوّه نفس اللوحة — مش كرتين منفصلين زي الأصل. الشبكة بتقلب
لوحدها في RTL، فالخط الفاصل بـborder-inline-start يفضل ناحية الفورم دايمًا */
body.theme-omani .omreg-split { display: grid; grid-template-columns: minmax(0, 1fr) 306px; }
body.theme-omani .omreg-main { min-width: 0; padding: 22px 26px 30px; }
body.theme-omani .omreg-rail {
min-width: 0; padding: 26px 24px 34px;
border-inline-start: 1px solid #efecf6;
background: linear-gradient(180deg, #faf9fd, #fff);
}
/* عناوين الأقسام: مافيش شرايط. الـspan بتاع "Step 1" جاي من ملف اللغة (مش مسموح
نلمسه) فبيتخفي هنا، والباقي بيبقى سطر هادي على خط شعري بشرطة متدرّجة */
body.theme-omani #register-section.omreg .tabHead > span { display: none; }
body.theme-omani.pg-training-courses #register-section.omreg .tabHead {
position: relative;
background: none !important;
border-radius: 0 !important;
padding: 0 0 10px !important;
margin: 10px 0 20px !important;
border-bottom: 1px solid #e8e3f2;
color: #003452;
font-size: .82rem; font-weight: 700;
letter-spacing: .14em !important; text-transform: uppercase !important;
}
body.theme-omani.pg-training-courses #register-section.omreg .tabHead::after {
content: ''; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
width: 58px; height: 3px; border-radius: 3px;
background: linear-gradient(90deg, #003452, #5c3092);
}
body.theme-omani.pg-training-courses #register-section.omreg .tabContent {
border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
body.theme-omani #register-section.omreg .box4,
body.theme-omani #register-section.omreg .search-inner-box {
background: transparent !important; box-shadow: none !important;
}
/* الحقول: كبسولية بس مش دائرية تمامًا — اللوحة نفسها هي الشكل الأساسي هنا */
body.theme-omani.pg-training-courses #register-section.omreg .form-control {
height: 44px; border-radius: 14px; border: 1px solid #ded7ee; background: #fff; font-size: .94rem;
}
body.theme-omani.pg-training-courses #register-section.omreg textarea.form-control { height: auto; }
body.theme-omani #register-section.omreg .form-control:focus {
border-color: #5c3092; box-shadow: 0 0 0 3px rgba(92, 48, 146, .14);
}
body.theme-omani #register-section.omreg h6 {
margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b6673;
}
body.theme-omani #register-section.omreg h5 {
font-size: .95rem; font-weight: 700; color: #003452; margin: 0 0 4px;
}
/* تبويبتا الدفع: كبسولة مقسومة (segmented) بدل تبويبات بحدود */
body.theme-omani #register-section.omreg .nav-tabs {
border: 0; display: inline-flex; gap: 6px; margin: 0 0 18px;
background: #f1eef8; border-radius: 999px; padding: 5px;
}
body.theme-omani #register-section.omreg .nav-tabs .nav-link {
border: 0; border-radius: 999px; padding: 9px 20px;
display: inline-flex; align-items: center; gap: 6px;
font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: #4a3f63;
}
body.theme-omani #register-section.omreg .nav-tabs .nav-link.active {
background: linear-gradient(135deg, #003452, #5c3092); color: #fff;
}
/* صندوق المشاركين: الأصل بيلوّنه بـstyle داخل الماركب (رمادي بزوايا 3px)، وده
بيكسر لغة الصفحة. :has() بيوصل للأب من غير ما نلمس ملف مشترك */
body.theme-omani #register-section.omreg div[style]:has(> #participants) {
background: #f8f6fc !important; border: 1px solid #ece8f4 !important; border-radius: 22px !important;
}
/* الأزرار: كبسولات. الزر الصغير بتاع البحث عن البريد مستثنى (له مكان مطلق) */
body.theme-omani #register-section.omreg #register,
body.theme-omani #register-section.omreg #payment,
body.theme-omani #register-section.omreg #add_participants,
body.theme-omani #register-section.omreg #remove_participants {
border: 0; border-radius: 999px; padding: 11px 26px; font-weight: 700; font-size: .88rem;
}
body.theme-omani #register-section.omreg #payment { background: linear-gradient(135deg, #003452, #5c3092); color: #fff; }
body.theme-omani #register-section.omreg #register { background: #f1eef8; color: #3f1f6b; }
body.theme-omani #register-section.omreg #add_participants,
body.theme-omani #register-section.omreg #remove_participants { background: #003452; color: #fff; }
/* الكبسولات الإرشادية في النص الأصغر */
body.theme-omani .omreg-cap {
display: block; margin-bottom: 12px;
border: 1px solid #ece8f4; border-radius: 22px; background: #fff; padding: 16px 18px;
box-shadow: 0 8px 20px rgba(0, 52, 82, .05);
}
body.theme-omani .omreg-cap--line,
body.theme-omani .omreg-cap--act {
display: flex; align-items: center; gap: 10px;
border-radius: 999px; padding: 12px 18px;
color: #003452; font-weight: 600; font-size: .88rem; text-decoration: none;
}
body.theme-omani .omreg-cap--line .bi, body.theme-omani .omreg-cap--act .bi { flex: 0 0 auto; color: #5c3092; font-size: 1.05rem; }
body.theme-omani .omreg-cap--line span { min-width: 0; overflow-wrap: anywhere; }
body.theme-omani a.omreg-cap:hover { border-color: #5c3092; color: #5c3092; text-decoration: none; }
body.theme-omani .omreg-cap--act {
background: linear-gradient(135deg, #003452, #5c3092); border-color: transparent; color: #fff; font-weight: 700;
}
body.theme-omani .omreg-cap--act .bi { color: #fff; }
body.theme-omani a.omreg-cap--act:hover { color: #fff; border-color: transparent; filter: brightness(1.12); }
body.theme-omani .omreg-cap-k {
display: block; margin-bottom: 10px;
font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5c3092;
}
body.theme-omani .omreg-cap-k--loose { margin: 24px 0 10px; color: #5b6673; }
body.theme-omani .omreg-cap-note { margin: 10px 0 0; font-size: .78rem; color: #5b6673; line-height: 1.6; }
body.theme-omani .omreg-fees-empty { margin: 0; font-size: .86rem; color: #5b6673; line-height: 1.6; }
/* صندوق الرسوم اللي بيحطه register.js: يتقرا جوّه الكبسولة من غير ما يخرج عن عرضها */
body.theme-omani .omreg-fees .row { margin: 0; }
body.theme-omani .omreg-fees [class^="col-"] { padding: 0; }
body.theme-omani .omreg-fees .fees-box {
border-radius: 16px; padding: 12px 14px; background: #f1eef8; color: #003452;
}
body.theme-omani .omreg-fees .fees-box h6 { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #5b6673; margin: 0 0 4px; }
body.theme-omani .omreg-fees .fees-box h4 { font-size: 1.3rem; font-weight: 700; color: #5c3092; margin: 0; }
@media (max-width: 991px) {
body.theme-omani .omreg-split { grid-template-columns: minmax(0, 1fr); }
body.theme-omani .omreg-head { padding: 24px 20px 18px; }
body.theme-omani .omreg-title { font-size: 1.5rem; }
body.theme-omani .omreg-main { padding: 16px 14px 24px; }
body.theme-omani .omreg-rail {
padding: 22px 18px 28px;
border-inline-start: 0; border-top: 1px solid #efecf6; background: #faf9fd;
}
body.theme-omani .omreg-panel { border-radius: 22px; }
}
/* ─────────────────── /in-house: مسار كبسولي بمحطتين ─────────────────── */
body.theme-omani #register-section.omih { background: #f3f1f8; padding: 34px 0 62px; }
body.theme-omani .omih-title { margin: 0 0 28px; font-size: 1.9rem; font-weight: 700; color: #003452; line-height: 1.25; }
body.theme-omani .omih-track { list-style: none; margin: 0; padding: 0; position: relative; }
/* خط المسار: بيربط المحطتين وبيوقف عند التانية — مش زخرفة، هو اللي بيقول إن
الفورم محطة أخيرة مش قسم زي أي قسم */
body.theme-omani .omih-track::before {
content: ''; position: absolute; inset-inline-start: 19px; top: 26px; bottom: 70px; width: 3px;
border-radius: 3px; background: linear-gradient(180deg, #003452, #5c3092);
}
body.theme-omani .omih-station { position: relative; padding-inline-start: 68px; margin-bottom: 26px; }
body.theme-omani .omih-station:last-child { margin-bottom: 0; }
body.theme-omani .omih-dot {
position: absolute; inset-inline-start: 0; top: 18px;
width: 40px; height: 40px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #003452, #5c3092); color: #fff; font-weight: 700; font-size: .95rem;
box-shadow: 0 0 0 6px #f3f1f8;
}
body.theme-omani .omih-cap { border-radius: 28px; padding: 26px 30px; }
body.theme-omani .omih-cap--light { background: #fff; border: 1px solid #ece8f4; box-shadow: 0 14px 34px rgba(0, 52, 82, .07); }
body.theme-omani .omih-cap--dark {
background: linear-gradient(135deg, #003452 0%, #43226b 55%, #5c3092 100%);
color: #fff; box-shadow: 0 26px 58px rgba(0, 52, 82, .26);
}
body.theme-omani .omih-cap-h { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; color: #003452; }
body.theme-omani .omih-cap-h--onDark { color: #fff; }
body.theme-omani .omih-facts { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
body.theme-omani .omih-facts li {
display: flex; align-items: baseline; gap: 8px;
border: 1px solid #e6dff3; border-radius: 999px; background: #faf9fd; padding: 9px 18px;
}
body.theme-omani .omih-facts strong { font-size: 1.2rem; font-weight: 700; color: #5c3092; }
body.theme-omani .omih-facts span { font-size: .85rem; color: #5b6673; }
body.theme-omani .omih-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.theme-omani .omih-reach-k {
width: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5b6673;
}
body.theme-omani .omih-chan {
display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
border: 1px solid #ded7ee; border-radius: 999px; padding: 9px 18px;
color: #003452; font-weight: 600; font-size: .87rem; text-decoration: none; overflow-wrap: anywhere;
}
body.theme-omani .omih-chan .bi { flex: 0 0 auto; color: #5c3092; }
body.theme-omani .omih-chan:hover { border-color: #5c3092; color: #5c3092; text-decoration: none; }
/* الفورم على الكبسولة الداكنة: عنوان المجموعة في الهامش والحقول جنبه — إيقاع
مختلف عن اللوحة المقسومة بتاعة /register، ومفيش شرايط أقسام خالص */
body.theme-omani .omih-msg { margin: 0 0 12px; }
body.theme-omani .omih-msg:empty { display: none; }
body.theme-omani .omih-group {
display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 18px 26px;
padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .18);
}
body.theme-omani .omih-group:first-of-type { border-top: 0; padding-block-start: 4px; }
body.theme-omani .omih-group-label {
display: flex; align-items: flex-start; gap: 10px;
font-size: .92rem; font-weight: 700; color: #fff; line-height: 1.5;
}
body.theme-omani .omih-group-n {
flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .36); font-size: .78rem;
}
body.theme-omani .omih-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; min-width: 0; }
body.theme-omani .omih-f { margin: 0; min-width: 0; }
body.theme-omani .omih-f--full { grid-column: 1 / -1; }
body.theme-omani .omih-lab {
display: block; margin: 0 0 6px;
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .88);
}
body.theme-omani .omih-form .form-control {
display: block; width: 100%; height: 46px; padding: 8px 15px;
border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px;
background: #fff; color: #1f2a37; font-size: .94rem;
}
body.theme-omani .omih-form textarea.form-control { height: auto; min-height: 112px; }
body.theme-omani .omih-form .form-control:focus {
outline: 0; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); background: #fff;
}
body.theme-omani .omih-send { padding-block-start: 20px; }
body.theme-omani .omih-btn {
border: 0; border-radius: 999px; padding: 13px 34px; font-weight: 700; font-size: .92rem;
background: #fff; color: #3f1f6b; box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
body.theme-omani .omih-btn:hover, body.theme-omani .omih-btn:focus-visible { background: #efeaf7; color: #3f1f6b; }
@media (max-width: 991px) {
body.theme-omani .omih-group { grid-template-columns: minmax(0, 1fr); gap: 12px; }
body.theme-omani .omih-cap { padding: 22px 18px; border-radius: 22px; }
body.theme-omani .omih-station { padding-inline-start: 0; }
body.theme-omani .omih-track::before { display: none; }
body.theme-omani .omih-dot { position: static; margin-bottom: 12px; box-shadow: none; }
body.theme-omani .omih-title { font-size: 1.5rem; }
}
@media (max-width: 575px) {
body.theme-omani .omih-fields { grid-template-columns: minmax(0, 1fr); }
}
/* ───────────── /course-finder: كبسولة كبيرة + سحابة تخصصات ───────────── */
body.theme-omani .omcf-hero {
background: linear-gradient(135deg, #003452 0%, #43226b 55%, #5c3092 100%);
color: #fff; padding: 54px 0 80px;
border-end-start-radius: 28px; border-end-end-radius: 28px;
}
body.theme-omani .omcf-hero-eyebrow {
display: block; margin-bottom: 10px;
font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .84);
}
body.theme-omani .omcf-hero-h { margin: 0; font-size: 2.3rem; font-weight: 700; line-height: 1.2; color: #fff; }
body.theme-omani .omcf-hero-p { margin: 12px 0 0; max-width: 64ch; font-size: 1.02rem; line-height: 1.75; color: rgba(255, 255, 255, .93); }
/* الكبسولة الكبيرة راكبة على حرف الرأس — هي بطلة الصفحة، مش سطر أدوات في صندوق */
body.theme-omani .omcf-searchsec { margin-top: -46px; }
body.theme-omani .omcf-pod {
background: #fff; border: 1px solid #ece8f4; border-radius: 40px; padding: 26px 32px;
box-shadow: 0 26px 58px rgba(0, 52, 82, .14);
}
body.theme-omani .omcf-pod-q { margin: 0 0 18px; font-size: .95rem; color: #5b6673; line-height: 1.6; }
body.theme-omani .omcf-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
body.theme-omani .omcf-slot { display: block; min-width: 0; flex: 1 1 210px; }
body.theme-omani .omcf-slot--comp { flex: 2 1 320px; }
body.theme-omani .omcf-slot-lab {
display: block; margin: 0 0 6px;
font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5c3092;
}
body.theme-omani .omcf-form select {
width: 100%; height: 48px; padding-inline: 20px;
border: 1px solid #ded7ee !important; border-radius: 999px !important; background: #faf9fd !important;
color: #003452; font-size: .94rem;
}
/* chosen بيحط width:500px بالإيد على الودجت — بيعمل تمرير أفقي على 390px */
body.theme-omani .omcf-slot .chosen-container { width: 100% !important; max-width: 100%; }
body.theme-omani .omcf-slot .chosen-container-multi .chosen-choices {
min-height: 48px; padding: 7px 16px;
border: 1px solid #ded7ee !important; border-radius: 999px !important; background: #faf9fd !important; box-shadow: none;
}
body.theme-omani .omcf-go {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding-inline: 30px; border: 0; border-radius: 999px;
font-weight: 700; font-size: .92rem; color: #fff;
background: linear-gradient(135deg, #003452, #5c3092);
box-shadow: 0 14px 30px rgba(92, 48, 146, .26);
}
body.theme-omani .omcf-go:hover, body.theme-omani .omcf-go:focus-visible { filter: brightness(1.12); color: #fff; }
body.theme-omani .omcf-results { padding: 30px 0 0; }
body.theme-omani .omcf-cloudsec { padding: 36px 0 64px; }
body.theme-omani .omcf-cloud-lead {
margin: 0 0 20px;
font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5c3092;
}
/* السحابة نفسها هي أداة تمييز العُماني (om-cloud/om-pill من /clients). الفرق
الوحيد هنا إن كل قرص رابط، فالحشو اتنقل للرابط عشان القرص كله يبقى قابل للنقر */
body.theme-omani .omcf-cloudsec .om-cloud { max-width: none; }
body.theme-omani .omcf-cloudsec .om-pill { padding: 0; }
body.theme-omani .omcf-cloudsec .om-pill-lnk { display: block; padding: 9px 20px; color: inherit; text-decoration: none; }
body.theme-omani .omcf-cloudsec .om-pill--md .om-pill-lnk { padding: 12px 26px; }
body.theme-omani .omcf-cloudsec .om-pill--lg .om-pill-lnk { padding: 17px 36px; }
body.theme-omani .omcf-cloudsec .om-pill-lnk:hover { color: inherit; text-decoration: none; }
@media (max-width: 991px) {
body.theme-omani .omcf-hero { padding: 40px 0 66px; }
body.theme-omani .omcf-hero-h { font-size: 1.7rem; }
body.theme-omani .omcf-hero-p { font-size: .95rem; }
body.theme-omani .omcf-pod { border-radius: 28px; padding: 20px 18px; }
body.theme-omani .omcf-go { width: 100%; justify-content: center; }
body.theme-omani .omcf-cloudsec .om-pill-lnk { padding: 8px 16px; }
body.theme-omani .omcf-cloudsec .om-pill--md .om-pill-lnk { padding: 10px 20px; }
body.theme-omani .omcf-cloudsec .om-pill--lg .om-pill-lnk { padding: 14px 24px; }
}
/* ── تصحيحات قياس (2026-09-09) ─────────────────────────────────────────────
الثلاثة اللي تحت اتكشفوا بالقياس بعد أول تنفيذ:
1) أزرار الفورم بتاخد ألوانها من قواعد .btn-primary/.btn-secondary بـ!important
في _brand.css، فكان نص "Register and Pay Later" و"Request Now" بيختفي
(نص غامق على خلفية غامقة). لازم !important هنا كمان.
2) find-my-course.css بيتحمّل بعد ملف الثيم وبيمسك #fc-banner و#fc-search
بـid — تخصيص أعلى من أي كلاس — فصورة بانر المعهد كانت بتغطّي التدرّج
والنص الأبيض بقى على خلفية فاتحة (تباين مكسور).
3) خط المسار في /in-house كان بيكمل نازل تحت المحطة الأخيرة.
------------------------------------------------------------------------ */
/* 1) /register — التبويبات والأزرار */
body.theme-omani #register-section.omreg .nav-tabs .nav-link {
background: transparent !important; color: #4a3f63 !important;
}
body.theme-omani #register-section.omreg .nav-tabs .nav-link.active {
background: linear-gradient(135deg, #003452, #5c3092) !important; color: #fff !important;
}
body.theme-omani #register-section.omreg .nav-tabs .nav-link svg { color: currentColor; }
body.theme-omani #register-section.omreg #payment,
body.theme-omani #register-section.omreg #payment:hover,
body.theme-omani #register-section.omreg #payment:focus {
background: linear-gradient(135deg, #003452, #5c3092) !important; border-color: transparent !important; color: #fff !important;
}
/* الزر التاني ثانوي: خلفية فاتحة ونص بنفسجي غامق (تباين > 7:1) — وثابت عند
المرور كمان، لأن قاعدة عامة بتخلّي نص الأزرار أبيض عند hover */
body.theme-omani #register-section.omreg #register,
body.theme-omani #register-section.omreg #register:hover,
body.theme-omani #register-section.omreg #register:focus {
background: #ece7f6 !important; border-color: #ece7f6 !important; color: #3f1f6b !important;
}
body.theme-omani #register-section.omreg #add_participants,
body.theme-omani #register-section.omreg #add_participants:hover,
body.theme-omani #register-section.omreg #remove_participants,
body.theme-omani #register-section.omreg #remove_participants:hover {
background: #003452 !important; border-color: #003452 !important; color: #fff !important;
}
/* 2) /in-house — زر الإرسال أبيض على الكبسولة الداكنة */
body.theme-omani .omih-cap--dark .omih-btn,
body.theme-omani .omih-cap--dark .omih-btn:hover,
body.theme-omani .omih-cap--dark .omih-btn:focus {
background: #fff !important; border-color: #fff !important; color: #3f1f6b !important;
}
/* 3) /in-house — خط المسار بين المحطتين بس، مش نازل تحت الأخيرة */
body.theme-omani .omih-track::before { display: none; }
body.theme-omani .omih-station:not(:last-child)::before {
content: ''; position: absolute; inset-inline-start: 19px; top: 64px; bottom: -46px; width: 3px;
border-radius: 3px; background: linear-gradient(180deg, #003452, #5c3092);
}
@media (max-width: 991px) {
body.theme-omani .omih-station:not(:last-child)::before { display: none; }
}
/* 4) /course-finder — الرأس بتاعنا يغلب #fc-banner بتاع find-my-course.css */
body.theme-omani #fc-banner.omcf-hero {
background: linear-gradient(135deg, #003452 0%, #43226b 55%, #5c3092 100%) !important;
min-height: 0 !important;
border-bottom: 0 !important;
padding: 54px 0 80px !important;
}
body.theme-omani #fc-search.omcf-searchsec { margin-top: -46px !important; margin-bottom: 0 !important; padding: 0 !important; }
body.theme-omani .omcf-results .search-resultwrap { margin-top: 0; }
/* الحقول: تخصيص أعلى من قاعدة #fc-search القديمة عشان اللون والحواف يتطابقوا مع الكبسولة */
body.theme-omani #fc-search.omcf-searchsec .omcf-form select {
border: 1px solid #ded7ee !important; border-radius: 999px !important; background: #faf9fd !important;
}
body.theme-omani #fc-search.omcf-searchsec .chosen-container-multi .chosen-choices {
border: 1px solid #ded7ee !important; border-radius: 999px !important; background: #faf9fd !important;
}
@media (max-width: 991px) {
body.theme-omani #fc-banner.omcf-hero { padding: 40px 0 70px !important; }
}
/* عنوان /in-house على نفس حافة الكبسولات: عمود النقاط (68px) بيبقى هامش المسار
لوحده، والعنوان جزء من العمود اللي فيه المحتوى */
@media (min-width: 992px) {
body.theme-omani .omih-title { padding-inline-start: 68px; }
}
/* ══════════════════════════════════════════════════════════════════════════
(2026-09-09) العُماني — تفاصيل المقال وتفاصيل المدونة: معماران مختلفان
══════════════════════════════════════════════════════════════════════════
المشكلة اللي بنحلها: الصفحتين كانوا بيتقروا بالحرف زي أي معهد تاني — بلوك لوجو
فوق العنوان، تاريخ، نص بعرض العمود كله، وريل يمين فيه أربع كروت متطابقة.
الحل مش لون: الصفحتين اتبنوا من هيكلين مختلفين، ومختلفين عن بعض كمان:
• المقال = لوحة (سطح مصمت بزوايا 28px) في نص الشاشة، والمرتبطة كبسولات
عايمة تحتها بأربعة أحجام ومعالجات مختلفة.
• المدونة = بلا أي سطح: مسار رأسي بمحطات كبسولية على الحافة المنطقية،
والمرتبطة قائمة قراءة هادية في المحطة الأخيرة.
عمود القراءة في الاتنين 68 حرف (~65–75 المطلوبة)، والاتجاهات كلها منطقية
(inset-inline / padding-inline) عشان العربي والإنجليزي بنفس الملف.
────────────────────────────────────────────────────────────────────────── */
/* ── المقال: القسم واللوحة ─────────────────────────────────────────────── */
/* أرضية بنفسجية باهتة بتنطفي لأبيض: بتفصل اللوحة عن الصفحة من غير خط ولا إطار. */
body.theme-omani .omad-sec {
padding: 30px 0 62px;
background: linear-gradient(180deg, #f6f3fc 0, #f6f3fc 230px, #fff 430px);
}
body.theme-omani .omad-crumbs { margin-bottom: 20px; }
body.theme-omani .omad-crumbs .breadcrumb { background: transparent; padding: 0; margin: 0; }
/* عرض اللوحة = 68 حرف + حشو الجانبين (48px × 2)، فعمود القراءة بيطلع بالمقاس
المطلوب بالظبط بدل ما يتمدد على عرض الحاوية. */
body.theme-omani .omad-panel {
max-width: 760px;
margin-inline: auto;
background: #fff;
border: 1px solid #e8e2f6;
border-radius: 28px;
box-shadow: 0 20px 52px rgba(92, 48, 146, .10);
overflow: hidden;
padding-bottom: 44px;
}
/* رأس اللوحة: العنوان والتاريخ جوّه سطح داكن — ده اللي بيكسر تسلسل
«لوجو ← عنوان ← تاريخ» المكرر، ويخلي العنوان جزء من اللوحة مش سطر فوقها. */
body.theme-omani .omad-head {
background: linear-gradient(135deg, #003452 0%, #43226b 58%, #5c3092 100%);
color: #fff;
padding: 38px 48px 34px;
}
body.theme-omani .omad-eyebrow {
margin: 0 0 12px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: #ded4f2;
}
body.theme-omani .omad-title {
margin: 0 0 20px;
color: #fff;
font-weight: 700;
line-height: 1.22;
font-size: clamp(1.65rem, 1.15rem + 1.5vw, 2.4rem);
}
body.theme-omani .omad-date {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
padding: 7px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .34);
color: #fff;
font-size: .85rem;
}
body.theme-omani .omad-date i { font-size: 1rem; line-height: 1; }
/* جسم المقال: نفس نص قاعدة البيانات بالحرف، بتنسيق قراءة أوسع سطراً. */
body.theme-omani .omad-prose {
max-width: 68ch;
margin-inline: auto;
padding: 34px 0 0;
color: #2c2a37;
font-size: 1.02rem;
line-height: 1.85;
}
body.theme-omani .omad-prose p { margin: 0 0 18px; }
body.theme-omani .omad-prose h6 {
margin: 30px 0 12px;
font-size: 1.12rem;
font-weight: 700;
line-height: 1.4;
color: #3f1f6b;
}
body.theme-omani .omad-prose ul,
body.theme-omani .omad-prose ol { margin: 0 0 20px; padding-inline-start: 22px; }
body.theme-omani .omad-prose li { margin-bottom: 8px; }
body.theme-omani .omad-prose b,
body.theme-omani .omad-prose strong { color: #20304a; }
body.theme-omani .omad-prose a { color: #5c3092; text-decoration: underline; }
/* ── المقال: المرتبطة ككبسولات بأحجام مختلفة ───────────────────────────── */
/* المرتبطة أعرض من اللوحة (تباين مقصود) بس مش بعرض الشاشة كلها. */
body.theme-omani .omad-rel { margin: 58px auto 0; max-width: 1100px; }
body.theme-omani .omad-rel-h {
margin: 0 0 22px;
font-size: 1.25rem;
font-weight: 700;
color: #003452;
padding-bottom: 12px;
border-bottom: 2px solid rgba(92, 48, 146, .22);
}
body.theme-omani .omad-caps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
body.theme-omani .omad-cap { display: flex; }
body.theme-omani .omad-cap-lnk {
display: flex;
width: 100%;
text-decoration: none;
border-radius: 28px;
padding: 24px 30px;
transition: transform .2s ease, box-shadow .2s ease;
}
body.theme-omani .omad-cap-lnk:hover,
body.theme-omani .omad-cap-lnk:focus {
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(92, 48, 146, .18);
}
body.theme-omani .omad-cap-txt { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
body.theme-omani .omad-cap-title { font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
body.theme-omani .omad-cap-exc { font-size: .9rem; line-height: 1.6; }
body.theme-omani .omad-cap-date {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 15px;
border-radius: 999px;
font-size: .78rem;
white-space: nowrap;
background: #fff;
border: 1px solid #d9cff0;
color: #3f1f6b;
}
body.theme-omani .omad-cap-go {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: .82rem;
font-weight: 700;
white-space: nowrap;
}
body.theme-omani .omad-cap-go i { font-size: 1.3rem; line-height: 1; }
/* 1) الكبسولة الأولى: عريضة ومصمتة وأفقية — هي اللي بتشيل ثقل القسم. */
body.theme-omani .omad-cap--1 { flex: 1 1 100%; }
body.theme-omani .omad-cap--1 .omad-cap-lnk {
align-items: center;
gap: 26px;
padding: 30px 36px;
background: linear-gradient(135deg, #003452 0%, #43226b 58%, #5c3092 100%);
color: #fff;
}
body.theme-omani .omad-cap--1 .omad-cap-title { font-size: 1.32rem; }
body.theme-omani .omad-cap--1 .omad-cap-exc { color: #e6dff5; }
body.theme-omani .omad-cap--1 .omad-cap-date {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .34);
color: #fff;
}
/* 2) و3) كبسولتين جنب بعض بعرضين مش متساويين (56% / 44%) ومعالجتين مختلفتين:
واحدة مليانة بنفسجي فاتح، والتانية بيضا بحدّ — عشان ما يقروش كزوج متطابق. */
body.theme-omani .omad-cap--2 { flex: 1 1 calc(56% - 9px); }
body.theme-omani .omad-cap--3 { flex: 1 1 calc(44% - 9px); }
body.theme-omani .omad-cap--2 .omad-cap-lnk,
body.theme-omani .omad-cap--3 .omad-cap-lnk { flex-direction: column; gap: 12px; color: #2c2a37; }
body.theme-omani .omad-cap--2 .omad-cap-lnk { background: #f3eefb; border: 1px solid #e4dbf6; }
body.theme-omani .omad-cap--3 .omad-cap-lnk { background: #fff; border: 2px solid #ded4f2; }
body.theme-omani .omad-cap--3 .omad-cap-title { font-size: .96rem; }
body.theme-omani .omad-cap--2 .omad-cap-exc,
body.theme-omani .omad-cap--3 .omad-cap-exc { color: #4a4753; }
body.theme-omani .omad-cap--2 .omad-cap-txt,
body.theme-omani .omad-cap--3 .omad-cap-txt { order: 1; }
body.theme-omani .omad-cap--2 .omad-cap-date,
body.theme-omani .omad-cap--3 .omad-cap-date { order: 2; align-self: start; }
body.theme-omani .omad-cap--2 .omad-cap-go,
body.theme-omani .omad-cap--3 .omad-cap-go { order: 3; color: #5c3092; }
/* 4) شريط كبسولي كامل الاستدارة: أنحف عنصر في القسم، بيقفل الصف. */
body.theme-omani .omad-cap--4 { flex: 1 1 100%; }
body.theme-omani .omad-cap--4 .omad-cap-lnk {
align-items: center;
gap: 20px;
padding: 16px 34px;
border-radius: 999px;
background: #003452;
color: #fff;
}
body.theme-omani .omad-cap--4 .omad-cap-txt { flex-direction: row; align-items: baseline; gap: 14px; flex-wrap: wrap; }
body.theme-omani .omad-cap--4 .omad-cap-title { font-size: .98rem; }
body.theme-omani .omad-cap--4 .omad-cap-exc { color: #cfdae4; }
body.theme-omani .omad-cap--4 .omad-cap-date {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .32);
color: #fff;
}
@media (max-width: 991px) {
body.theme-omani .omad-head { padding: 28px 22px 26px; }
body.theme-omani .omad-prose { padding: 26px 22px 0; margin-inline: 0; }
body.theme-omani .omad-cap { flex: 1 1 100%; }
body.theme-omani .omad-cap-lnk { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px 22px; border-radius: 28px; }
body.theme-omani .omad-cap-date { align-self: start; }
body.theme-omani .omad-cap--1 .omad-cap-title { font-size: 1.12rem; }
body.theme-omani .omad-cap--4 .omad-cap-txt { flex-direction: column; gap: 6px; }
}
/* ══ المدونة: مسار كبسولي، بلا لوحة ═══════════════════════════════════════ */
body.theme-omani .ombd-sec { padding: 28px 0 64px; background: #fff; }
/* عمود الصفحة: عرض محدود ومتمركز في الحاوية، والمحتوى جوّاه ملزوق في حافته
المنطقية بعد عمود المسار (68px) — فالصفحة مش مايلة على جنب الشاشة. */
body.theme-omani .ombd-col { max-width: 940px; margin-inline: auto; }
body.theme-omani .ombd-crumbs { margin-bottom: 24px; }
body.theme-omani .ombd-crumbs .breadcrumb { background: transparent; padding: 0; margin: 0; }
/* العنوان بره المسار وبعرض قصير (26 حرف) عشان ينزل على أكتر من سطر ويشتغل
كمدخل للصفحة — عكس صفحة المقال اللي عنوانها جوّه رأس اللوحة. */
body.theme-omani .ombd-title {
margin: 0 0 34px;
max-width: 26ch;
color: #003452;
font-weight: 700;
line-height: 1.2;
font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.55rem);
}
body.theme-omani .ombd-track { list-style: none; margin: 0; padding: 0; }
body.theme-omani .ombd-station { position: relative; padding-inline-start: 68px; padding-bottom: 46px; }
body.theme-omani .ombd-station:last-child { padding-bottom: 0; }
/* علامة المحطة كبسولة (مش دايرة ولا رقم): الكبسولة هي أداة العُماني، والأرقام
والأسهم علامات مشتركة اتمنعت. */
body.theme-omani .ombd-stop {
position: absolute;
inset-inline-start: 0;
top: 6px;
width: 38px;
height: 20px;
border-radius: 999px;
background: linear-gradient(135deg, #003452, #5c3092);
box-shadow: 0 0 0 6px rgba(92, 48, 146, .10);
}
/* الخط بين المحطات بس — مش نازل تحت الأخيرة. */
body.theme-omani .ombd-station:not(:last-child)::before {
content: '';
position: absolute;
inset-inline-start: 17px;
top: 32px;
bottom: 8px;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, #5c3092, rgba(92, 48, 146, .18));
}
body.theme-omani .ombd-cap {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 20px;
border-radius: 999px;
background: #f3eefb;
border: 1px solid #e0d6f4;
color: #3f1f6b;
font-size: .9rem;
font-weight: 600;
}
body.theme-omani .ombd-cap i { font-size: 1rem; line-height: 1; }
/* نص المدونة: نفس محتوى قاعدة البيانات، بعرض قراية 68 حرف على حافة المسار.
أول فقرة أكبر شوية — معالجة طباعية للنص الموجود، بلا أي إضافة. */
body.theme-omani .ombd-prose { max-width: 68ch; color: #2c2a37; font-size: 1.03rem; line-height: 1.9; }
body.theme-omani .ombd-prose > p:first-child { font-size: 1.15rem; line-height: 1.75; color: #20304a; }
body.theme-omani .ombd-prose p { margin: 0 0 18px; }
body.theme-omani .ombd-prose h6 { margin: 30px 0 12px; font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: #003452; }
body.theme-omani .ombd-prose ul,
body.theme-omani .ombd-prose ol { margin: 0 0 20px; padding-inline-start: 22px; }
body.theme-omani .ombd-prose li { margin-bottom: 8px; }
body.theme-omani .ombd-prose b,
body.theme-omani .ombd-prose strong { color: #20304a; }
body.theme-omani .ombd-prose a { color: #5c3092; text-decoration: underline; }
/* المحطة الأخيرة: قائمة قراءة مفصولة بخط شعرة — بلا كروت وبلا كبسولات، عشان
تفضل مختلفة عن كبسولات صفحة المقال. */
body.theme-omani .ombd-rel-h { margin: 0 0 4px; font-size: 1.12rem; font-weight: 700; color: #003452; }
body.theme-omani .ombd-rel-list { list-style: none; margin: 0; padding: 0; max-width: 74ch; }
body.theme-omani .ombd-rel-item { border-top: 1px solid #eae4f7; }
body.theme-omani .ombd-rel-item:first-child { border-top: 0; }
body.theme-omani .ombd-rel-lnk { display: block; padding: 18px 0; text-decoration: none; color: inherit; }
body.theme-omani .ombd-rel-lnk:hover,
body.theme-omani .ombd-rel-lnk:focus { text-decoration: none; }
body.theme-omani .ombd-rel-t { display: block; margin-bottom: 7px; font-size: 1.02rem; font-weight: 700; line-height: 1.4; color: #20304a; }
body.theme-omani .ombd-rel-lnk:hover .ombd-rel-t { color: #5c3092; text-decoration: underline; }
body.theme-omani .ombd-rel-x { display: block; margin-bottom: 10px; font-size: .92rem; line-height: 1.7; color: #4a4753; }
body.theme-omani .ombd-rel-m { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .8rem; color: #635c72; }
body.theme-omani .ombd-rel-d { display: inline-flex; align-items: center; gap: 6px; }
body.theme-omani .ombd-rel-more { display: inline-flex; align-items: center; gap: 3px; color: #5c3092; font-weight: 700; }
body.theme-omani .ombd-rel-more i { font-size: 1.25rem; line-height: 1; }
/* إيقاع متبادل بدل «عنوان وتحته سطر وصف» في كل صف: الصفوف الزوجية بتحط العنوان
في عمود ضيق والوصف جنبه — نفس المحتوى بترتيب تاني، فالقائمة ما بتقراش كنمط
واحد متكرر. */
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-lnk {
display: grid;
grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
column-gap: 26px;
align-items: start;
}
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-t { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-x { grid-column: 2; grid-row: 1; }
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-m { grid-column: 2; grid-row: 2; }
/* الموبايل: الخط بيتشال والعلامة بتقف فوق محتوى محطتها — المحتوى كله مفتوح. */
@media (max-width: 991px) {
body.theme-omani .ombd-title { max-width: none; }
body.theme-omani .ombd-station { padding-inline-start: 0; padding-bottom: 34px; }
body.theme-omani .ombd-station:not(:last-child)::before { display: none; }
body.theme-omani .ombd-stop { position: static; display: block; margin-bottom: 14px; }
/* الموبايل: العمودين بيتحوّلوا لعمود واحد — القائمة تفضل مقروءة. */
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-lnk { display: block; }
body.theme-omani .ombd-rel-item:nth-child(even) .ombd-rel-t { margin-bottom: 7px; }
}
/* (2026-09-09) as-si3r kan taht zurar at-tasjeel (order:2 lil-price-box wa order
tilqa'i lil-zurar). at-tarteeb: at-tafaseel -> as-si3r -> at-tasjeel.
was-si3r baqa saf wahid mish slab rasi. */
body.theme-omani.pg-training-courses .session-card > ul{order:1}
body.theme-omani.pg-training-courses .session-card .price-box{
order:2;display:flex;align-items:baseline;justify-content:center;gap:10px;
padding:8px 14px!important;
}
body.theme-omani.pg-training-courses .session-card .price-tag{
display:flex;align-items:baseline;gap:10px;
}
body.theme-omani.pg-training-courses .session-card .price-tag .clearfix{display:none}
body.theme-omani.pg-training-courses .session-card .fee-usd{color:#5c3092;font-size:1.05rem}
body.theme-omani.pg-training-courses .session-card > .text-end{order:3;margin-top:12px!important;padding:0 18px 16px}
body.theme-omani.pg-training-courses .session-card > form{order:4}
body.theme-omani.pg-training-courses .session-card li:first-child{white-space:nowrap}
/* (2026-09-09) tlb: "saghghar at-tasmeem". al-kart kan fih slab lil-si3r gowwa
lawh tani, wal-masafat wasi3a. as-si3r baqa satr 3ala waraq al-kart. */
body.theme-omani.pg-training-courses .session-card > ul{padding:11px 14px!important;gap:6px}
body.theme-omani.pg-training-courses .session-card li{font-size:.76rem;padding:3px 10px}
body.theme-omani.pg-training-courses .session-card li:first-child{
margin:-11px -14px 4px;padding:9px 14px;font-size:.86rem
}
body.theme-omani.pg-training-courses .session-card .price-box{
background:transparent!important;padding:2px 14px 0!important;justify-content:flex-start;
}
body.theme-omani.pg-training-courses .session-card > .text-end{padding:0 14px 12px;margin-top:8px!important}
body.theme-omani.pg-training-courses .session-card .btn{padding:8px 14px!important;font-size:.82rem!important}
body.theme-omani.pg-training-courses .session-card .price-tag{
background:transparent!important;border:0!important;padding:0!important;border-radius:0!important;
}
/* ─────────────────────────────
(2026-09-09) نوافذ الاستفسار والاتصال: كانت بنفس الشكل بالحرف
في كل المواقع (رأس رمادي، حقول صناديق، زرار بعرض النافذة) —
والفرق لون بس. الاختلاف هنا في المعمار: مكان العنوان، شكل
الحقل، واستدارة الزرار وعرضه. الـmarkup ومعرّفات الحقول
(سيلزفورس) ما اتلمستش.
ملحوظة تانية: العلامة على h2 بلا كلاس (+ .inst-logos-h) بس.
كانت على كل h2 فنزلت على حاجات مش عناوين أقسام: تسمية حقل
(PHONE)، سطر مسار (ARCHIVE / DOWNLOADS)، سؤال في الأسئلة
الشائعة، وعنوان تمهيدي ارتفاعه 17px. العناوين المشتركة للأقسام
بتتكتب
بلا كلاس، واللي ليه كلاس عنده تنسيقه في ثيمه.
───────────────────────────── */
/* نافذة عُمان: النافذة نفسها كبسولة كبيرة، الحقول كبسولات، والزرار
كبسولة بتدرّج — نفس أداة الموقع. */
body.theme-omani .modal-content{border:0;border-radius:24px;overflow:hidden}
body.theme-omani .modal-header{background:linear-gradient(115deg,#003452,#5c3092);border:0;padding:18px 24px}
body.theme-omani .modal-title{color:#fff;font-weight:700;font-size:1.06rem}
body.theme-omani .modal-header .close svg{fill:#fff}
body.theme-omani .modal-content > p{padding:14px 24px 0;color:#6b6480;font-size:.87rem}
body.theme-omani .modal-body .form-control{border:1px solid #e2e6ec!important;border-radius:24px!important;padding-inline:16px}
body.theme-omani .modal-body .form-control:focus{border-color:#5c3092!important;box-shadow:none!important}
body.theme-omani .modal-body .btn-primary{
border-radius:26px!important;border:0!important;
background:linear-gradient(115deg,#003452,#5c3092)!important;font-weight:700}
/* ─────────────────────────────
(2026-09-09) صفحة الشروط والخصوصية: كانت بنفس التخطيط بالحرف
في الـ12 موقع — كتلة نص واحدة بنفس تسلسل البنود، والفرق لون بس.
النص القانوني ما اتغيّرش ولا حرف؛ اللي اتغيّر طريقة العرض:
ترقيم البنود، عدد الأعمدة، عرض سطر القراءة، وشكل العنوان.
───────────────────────────── */
/* عُمان — كبسولات: عنوان البند كبسولة بنفسجية، والنص عمود واحد
بمسافة داخلية. */
body.theme-omani.pg-policy-page .common-listing-section-wrap .box4 h5{
display:inline-block;margin:34px 0 10px;padding:7px 20px;
background:#f2eefa;color:#3f2470;border-radius:20px;font-size:.92rem}
body.theme-omani.pg-policy-page .common-listing-section-wrap .box4 p{line-height:1.85;padding-inline-start:4px}
/* ─────────────────────────────
(2026-09-09) خريطة الموقع: كانت نفس القائمة بنفس عدد الأعمدة
في الـ12 موقع. الروابط ما اتغيّرتش — اللي اتغيّر عدد الأعمدة
وشكل عنوان المجموعة والفواصل.
───────────────────────────── */
/* عُمان — كبسولات: عنوان المجموعة كبسولة، والروابط نفسها كبسولات
بتلتف من غير أعمدة. */
body.theme-omani.page-sitemap h5.no-margin{
display:inline-block;margin:28px 0 12px;padding:6px 18px;
background:#f2eefa;color:#3f2470;border-radius:18px;font-size:.9rem}
/* الكبسولات كانت flex-wrap: أسماء الدورات طويلة فكل كبسولة أخدت نص
العرض والصفحة بقت عمود واحد ضيّق. عمودين بكبسولات بتحافظ على
الأداة وبتملا العرض. */
body.theme-omani.page-sitemap .sitemap-list{
column-count:2;column-gap:26px}
body.theme-omani.page-sitemap .sitemap-list li{
background:#f7f5fb;border-radius:16px;padding:6px 16px;font-size:.84rem;
margin-bottom:6px;break-inside:avoid}
/* ─────────────────────────────
(2026-09-09) اللمسة الفنية: علامة واحدة مميّزة للموقع
كل معهد له علامة بتتكرّر على عناوين الأقسام (h2) في كل صفحاته.
العلامة مشتقّة من أداة الموقع نفسها، فهي بتقوّي الهوية بدل ما
تكون زينة عشوائية. CSS و::before/::after بس — مفيش تغيير markup.
ملحوظة: العلامة على عناوين الأقسام (h2) بس. عنوان الصفحة في البنر
عنده علامته الخاصة في كل ثيم أصلاً بمحدّدات فيها id، ومحاولة
إضافة علامة تانية فوقها كانت بتتغلب أو تتلخبط معاها.
───────────────────────────── */
/* عُمان — كبسولات: شرطة مستديرة بتدرّج الموقع. */
body.theme-omani h2:not([class]),
body.theme-omani h2.inst-logos-h{display:flex;align-items:center;gap:14px}
body.theme-omani h2:not([class])::before,
body.theme-omani h2.inst-logos-h::before{
content:"";flex:0 0 auto;width:30px;height:9px;border-radius:5px;
background:linear-gradient(115deg,#003452,#5c3092)}
/* ─────────────────────────────
(2026-09-10) تكملة فكّ التجمّع في قوائم الدورات
بعد الدفعة الأولى فضل أربعة متقاربين: أبفا لسه كروت مصوّرة
٤ في الصف، وبلَس/عُمان/عربي كروت متشابهة بأعداد أعمدة مختلفة.
كل واحد هنا بياخد أداته من DESIGN-SYSTEMS.md.
───────────────────────────── */
/* عُمان — كبسولات: الكرت بقى لوح مستدير عريض (اتنين في الصف)
وبياناته وسوم كبسولة — بدل كرت مربّع في أربع أعمدة. */
body.theme-omani.pg-training-courses #category_course_list,
body.theme-omani.pg-training-courses #course_list,
body.theme-omani.pg-training-courses .inst-tc #category_course_list,
body.theme-omani.pg-training-courses .inst-tc #course_list{
display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:18px}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting{
display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px 18px;
border:0!important;border-radius:22px!important;background:#fff!important;
box-shadow:0 3px 14px rgba(0,52,82,.08)!important;padding:16px 22px!important;height:100%}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-image{display:none!important}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-title{
grid-column:1;margin:0;font-size:.95rem;line-height:1.45}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-date,
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-language,
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-location{
grid-column:1;display:inline-block;background:#f7f5fb;border-radius:14px;
padding:3px 12px;margin:0 6px 0 0;font-size:.75rem}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting > form{grid-column:2;grid-row:1/-1;margin:0}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .space5,
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .space15{display:none}
/* ─────────────────────────────
(2026-09-10) صفحة تفاصيل المقال: فكّ التشابه
تمن مواقع كانت بنفس الشكل — عمود نص واحد في النص بعرض
490-694px. أسماء الحاويات مختلفة في كل ثيم بس الصورة واحدة.
اللي بيفرق شكل صفحة نص: عدد الأعمدة، عرض سطر القراءة، ووجود
إطار أو عمود جانبي. النص نفسه ما اتغيّرش.
───────────────────────────── */
/* عُمان — كبسولات: اللوح بزوايا كبيرة مدوّرة وشريط بيانات بلون فاتح
فوق المتن. */
body.theme-omani.pg-post-page .omad-panel{
border-radius:26px;padding:30px 34px;background:#fff;
box-shadow:0 4px 20px rgba(0,52,82,.08)}
/* أول عنصر في اللوح هو .omad-head ونصه أبيض على خلفية داكنة، فالشريط
الفاتح كان بيمسحه. الشريط اتنقل للمتن اللي بعد الرأس. */
body.theme-omani.pg-post-page .omad-panel > .omad-head{
border-radius:18px;padding:16px 20px;margin-bottom:22px;
background:linear-gradient(115deg,#003452,#5c3092)}
/* ─────────────────────────────
(2026-09-10) أيقونة الصيغة: الحضوري غير الافتراضي
الأيقونة كانت واحدة للحالتين — "حضورية" و"افتراضية" بنفس الرمز.
الصف الافتراضي عليه كلاس `.virtual` فهو اللي بيفرّق.
الرمز المختار هنا مش مستعمل كأيقونة صيغة في أي معهد تاني، ولا
بيساوي أيقونة الحضوري بتاعة المعهد ده — عشان الأطقم تفضل
مختلفة بين المواقع زي ما هي.
───────────────────────────── */
body.theme-omani.pg-training-courses .courselisting.virtual .course-language .bi-bookmarks-fill::before{content:"\f5ec"} /* tv-fill */
/* ─────────────────────────────
(2026-09-10) سجل المقالات والمدونات من غير تاريخ
نص التاريخ اتشال من القالب، والغلاف الفاضي بيتخفي هنا عشان
ما يسيبش فراغ (ولا أيقونة نتيمة في حالة القادة، ولا عمود
فاضي في جدول السعودي).
───────────────────────────── */
body.theme-omani .omcc-chip-meta{display:none}
/* ─────────────────────────────
(2026-09-11) صفحة نتايج البحث: فكّ التشابه
المراجعة الشاملة طلّعت إن الصفحة دي هي الوحيدة اللي لسه بنفس
التخطيط بالحرف في الـ11 موقع — نفس الكرت ونفس ترتيب البيانات،
والفرق لون الزرار والحدّ بس. كل موقع بياخد أداته.
───────────────────────────── */
/* عُمان — كبسولات: زوايا كبيرة مدوّرة ورأس السنة كبسولة بنفسجية. */
body.theme-omani.pg-search-page .courselisting{
background:#fff!important;border:0!important;border-radius:22px!important;
box-shadow:0 3px 16px rgba(0,52,82,.09)!important;
padding:20px 26px!important;margin-bottom:20px}
body.theme-omani.pg-search-page .course-title h6 a{color:#003452!important}
body.theme-omani.pg-search-page .custom-head-additional{
background:#5c3092!important;color:#fff!important;border-radius:999px!important;
padding-inline:18px!important}
body.theme-omani.pg-search-page .course-details-wrap{
background:#f7f5fb!important;border-radius:18px!important}
/* (2026-09-11) سهم الرجوع لفوق: كان نفس الزرار في الـ11 موقع (مربع 31px
بأيقونة دايرة). كل موقع بقى له شكله؛ السهم مرسوم بـCSS بدل الأيقونة. */
body.theme-omani #back-to-top{box-sizing:border-box;padding:0;overflow:visible}
body.theme-omani #back-to-top i{display:none}
body.theme-omani #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-omani #back-to-top{right:0!important;left:auto;width:42px;height:54px;border:0!important;
border-radius:10px 0 0 10px!important;background:var(--site-primary,#003452)!important;color:#fff;
box-shadow:inset 4px 0 0 var(--site-accent,#5c3092)}
body.theme-omani #back-to-top:hover{background:var(--site-accent,#5c3092)!important}
/* (2026-09-11) الفوتر: لمسة فنية — طلب صريح
شريط بألوان علم عُمان فوق اللوح، عمود الشعار بخلفية مخطّطة خفيفة،
شرطة قبل كل عنوان، والروابط بتتزحلق خطوة عند المرور. */
body.theme-omani .om-footer-panel{position:relative;overflow:hidden;border-radius:12px;
border-color:rgba(0,52,82,.35);box-shadow:0 18px 44px rgba(0,52,82,.09)}
body.theme-omani .om-footer-panel::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;
background:linear-gradient(90deg,#c8102e 0 44%,transparent 44% 56%,#00843d 56% 100%)}
body.theme-omani .om-footer-seg{padding-top:34px}
body.theme-omani .om-footer-brand{
background:repeating-linear-gradient(135deg,rgba(0,52,82,.035) 0 2px,transparent 2px 12px),
linear-gradient(170deg,#f6f9fc,#edf2f7)}
body.theme-omani .om-footer-label{display:flex;align-items:center;gap:10px}
body.theme-omani .om-footer-label::before{content:'';width:18px;height:2px;background:currentColor;flex:0 0 auto}
body.theme-omani .om-footer-list a{display:inline-block;transition:transform .18s ease,color .18s ease}
body.theme-omani .om-footer-list a:hover{transform:translateX(5px);text-decoration:none}
body.theme-omani[dir="rtl"] .om-footer-list a:hover{transform:translateX(-5px)}
body.theme-omani .om-footer-ico{border-radius:50%;transition:background .18s,color .18s,transform .18s}
body.theme-omani .om-footer-ico:hover{transform:translateY(-2px)}
/* ─────────────────────────────
(2026-09-11) قوائم الدورات: 3 بطاقات في الصف بدل 2 — طلب صريح
البطاقة بقت أضيق، فزر "سجل الآن" نزل من العمود الجانبي لآخر البطاقة
بعرضها (في عمود جانبي بعرض ~55px كان هيتزنق)، والكبسولات بتلفّ تحت
العنوان. الشكل المستدير والكبسولات زي ما هم.
───────────────────────────── */
body.theme-omani.pg-training-courses #category_course_list,
body.theme-omani.pg-training-courses #course_list,
body.theme-omani.pg-training-courses #category_course_list_by_name,
body.theme-omani.pg-training-courses .inst-tc #category_course_list,
body.theme-omani.pg-training-courses .inst-tc #course_list,
body.theme-omani.pg-training-courses .inst-tc #category_course_list_by_name{
grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting{
display:flex!important;flex-direction:column;align-items:stretch;gap:8px;padding:18px 18px 16px!important}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-title{margin-bottom:4px}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-date,
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-language,
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting .course-location{margin:0}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting > form{margin-top:auto!important;padding-top:6px}
body.theme-omani.pg-training-courses .courselist-style-inside .courselisting > form .btn{width:100%}
@media (max-width:1199px){
body.theme-omani.pg-training-courses #category_course_list,
body.theme-omani.pg-training-courses #course_list,
body.theme-omani.pg-training-courses #category_course_list_by_name,
body.theme-omani.pg-training-courses .inst-tc #category_course_list,
body.theme-omani.pg-training-courses .inst-tc #course_list,
body.theme-omani.pg-training-courses .inst-tc #category_course_list_by_name{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:767px){
body.theme-omani.pg-training-courses #category_course_list,
body.theme-omani.pg-training-courses #course_list,
body.theme-omani.pg-training-courses #category_course_list_by_name,
body.theme-omani.pg-training-courses .inst-tc #category_course_list,
body.theme-omani.pg-training-courses .inst-tc #course_list,
body.theme-omani.pg-training-courses .inst-tc #category_course_list_by_name{grid-template-columns:1fr!important}
}
/* (2026-09-11) "هذا الجزء فيه مساحة كبيرة فاضية" — طلب صريح.
البرواز كان repeat(4,1fr) ثابت من أيام ما كانوا أربع بلاطات، ودلوقتي
تلاتة، فالعمود الرابع فاضي على اليمين. من 768 وطالع عدد الأعمدة بقى
= عدد البلاطات (grid-auto-flow:column)، فبيملوا العرض ولو العدد اتغيّر
بيتظبط لوحده. تحت 768 قاعدة العمودين زي ما هي. */
@media (min-width:768px){
body.theme-omani .om-tiles-frame{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
}
/* الموبايل (عمودين): لما عدد البلاطات فردي، الأخيرة كانت لوحدها بنص
سطر فاضي جنبها — نفس مشكلة الفراغ بحجم أصغر. بتاخد العرض كله. */
@media (max-width:767px){
body.theme-omani .om-tiles-frame .om-tiles-tile:last-child:nth-child(odd){grid-column:1/-1;border-inline-start:0}
}
/* ─────────────────────────────
(2026-09-11) "We're here to help": لمسة فنية — طلب صريح
نفس فكرة البرواز الواحد بخطوط داخلية (مش كروت منفصلة)، بس:
- تحت العنوان شريط بألوان علم عُمان (زي الفوتر).
- جوّه البرواز تدرّج بنفسجي خفيف جداً، وعلامتين ركن بنفسجي.
- الأيقونة في دايرة 56px بتدرّج كحلي→بنفسجي، والأيقونة بيضا.
- رقم كبير باهت 01/02/03 في ركن كل بلاطة (counter).
- عند الوقوف: البلاطة بتطلع شوية، شريط بنفسجي بيتمد تحتها،
الدايرة بتلف حبة، وسهم بيظهر.
───────────────────────────── */
body.theme-omani .om-tiles-heading{position:relative;padding-bottom:16px}
body.theme-omani .om-tiles-heading::after{content:'';position:absolute;left:50%;bottom:0;width:72px;height:4px;
transform:translateX(-50%);border-radius:2px;
background:linear-gradient(90deg,#c8102e 0 42%,transparent 42% 58%,#00843d 58% 100%)}
body.theme-omani .om-tiles-frame{position:relative;counter-reset:omtile;border-radius:14px;overflow:hidden;
background:linear-gradient(135deg,rgba(92,48,146,.05) 0%,#fff 55%,rgba(0,52,82,.04) 100%);
box-shadow:0 14px 34px rgba(0,52,82,.07)}
body.theme-omani .om-tiles-frame::before,
body.theme-omani .om-tiles-frame::after{content:'';position:absolute;width:26px;height:26px;pointer-events:none;z-index:2}
body.theme-omani .om-tiles-frame::before{top:10px;inset-inline-start:10px;
border-top:3px solid var(--site-accent,#5c3092);border-inline-start:3px solid var(--site-accent,#5c3092)}
body.theme-omani .om-tiles-frame::after{bottom:10px;inset-inline-end:10px;
border-bottom:3px solid var(--site-accent,#5c3092);border-inline-end:3px solid var(--site-accent,#5c3092)}
body.theme-omani .om-tiles-tile{position:relative;counter-increment:omtile;padding:40px 18px 36px;gap:16px;
transition:background .2s ease,transform .2s ease}
body.theme-omani .om-tiles-tile::before{content:counter(omtile,decimal-leading-zero);position:absolute;top:12px;inset-inline-end:18px;
font-size:2.4rem;font-weight:800;line-height:1;color:rgba(0,52,82,.07);letter-spacing:-.02em;pointer-events:none}
body.theme-omani .om-tiles-tile::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:4px;
transform:translateX(-50%);background:var(--site-accent,#5c3092);border-radius:2px 2px 0 0;transition:width .25s ease}
body.theme-omani .om-tiles-tile:hover{background:rgba(92,48,146,.05);transform:translateY(-3px)}
body.theme-omani .om-tiles-tile:hover::after{width:60%}
body.theme-omani .om-tiles-icon{width:56px;height:56px;border-radius:50%;
background:linear-gradient(135deg,var(--site-primary,#003452) 0%,var(--site-accent,#5c3092) 100%);
box-shadow:0 8px 18px rgba(92,48,146,.28);transition:transform .25s ease}
body.theme-omani .om-tiles-icon img{width:26px;height:26px;filter:brightness(0) invert(1)}
body.theme-omani .om-tiles-icon i.bi{color:#fff;font-size:24px}
body.theme-omani .om-tiles-tile:hover .om-tiles-icon{transform:rotate(-8deg) scale(1.06)}
body.theme-omani .om-tiles-label{font-size:.98rem;position:relative}
body.theme-omani .om-tiles-label::after{content:'\2192';display:inline-block;margin-inline-start:8px;opacity:0;
transform:translateX(-6px);transition:opacity .2s,transform .2s;color:var(--site-accent,#5c3092)}
body.theme-omani[dir="rtl"] .om-tiles-label::after{content:'\2190';transform:translateX(6px)}
body.theme-omani .om-tiles-tile:hover .om-tiles-label::after{opacity:1;transform:translateX(0)}
@media (max-width:767px){
body.theme-omani .om-tiles-tile{padding:30px 12px 26px}
body.theme-omani .om-tiles-tile::before{font-size:1.8rem;top:8px;inset-inline-end:10px}
body.theme-omani .om-tiles-icon{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
body.theme-omani .om-tiles-tile,body.theme-omani .om-tiles-icon{transition:none}
body.theme-omani .om-tiles-tile:hover{transform:none}
body.theme-omani .om-tiles-tile:hover .om-tiles-icon{transform:none}
}
/* أيقونتين من التلاتة (public.svg / inhouse.svg) صور SVG فيها مربّع غامق
ورمز أبيض جوّاه — فلتر التبييض حوّل المربّع كله أبيض واختفى الرمز.
جوّه دايرة التدرّج الصورة بتستخبى ويترسم مكانها نفس الرمز بالأبيض
(تقويم للعامة، بيت للداخلية) — بالاسم مش بالترتيب، فلو الترتيب اتغيّر
الرمز بيفضل صح. أيقونة الأونلاين (bi-laptop) خط أصلاً وسليمة. */
body.theme-omani .om-tiles-icon:has(img[src*="public.svg"]) img,
body.theme-omani .om-tiles-icon:has(img[src*="inhouse.svg"]) img{opacity:0;position:absolute;width:0;height:0}
body.theme-omani .om-tiles-icon:has(img[src*="public.svg"]),
body.theme-omani .om-tiles-icon:has(img[src*="inhouse.svg"]){background-repeat:no-repeat;background-position:center;background-size:24px 24px,100% 100%}
body.theme-omani .om-tiles-icon:has(img[src*="public.svg"]){
background-image:url("data:image/svg+xml;utf8,"),
linear-gradient(135deg,var(--site-primary,#003452) 0%,var(--site-accent,#5c3092) 100%)}
body.theme-omani .om-tiles-icon:has(img[src*="inhouse.svg"]){
background-image:url("data:image/svg+xml;utf8,"),
linear-gradient(135deg,var(--site-primary,#003452) 0%,var(--site-accent,#5c3092) 100%)}
/* ─────────────────────────────
(2026-09-11) "Upcoming Classroom Courses": لمسة فنية وقراءة أسهل — طلب صريح
كان: صفوف لازقة 74px، التاريخ عمود بنفسجي واحد متصل، الشبكة 4 أعمدة
والتالت فاضي (~410px) لأن البيانات نزلت تحت العنوان، والخطوط 12px.
بقى: كل دورة بطاقة بيضا منفصلة (مسافة 10px)، 3 أعمدة (تاريخ | عنوان
وبيانات | سهم)، مربّع تاريخ لكل بطاقة، وخطوط أكبر بتسلسل واضح.
───────────────────────────── */
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list{
display:grid;gap:10px;border:0;border-radius:0;overflow:visible;background:transparent}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list li{border:0!important;margin:0}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list li:nth-child(even) a{background:#fff}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a{
grid-template-columns:92px minmax(0,1fr) 44px;gap:20px;min-height:92px;
padding:0 20px 0 0;background:#fff;border-radius:14px;overflow:hidden;
box-shadow:0 4px 14px rgba(0,52,82,.07);border:1px solid rgba(0,52,82,.06);
transition:background .18s,transform .18s,box-shadow .18s}
body.theme-omani[dir="rtl"] .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a{padding:0 0 0 20px}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover{
background:#f6f2fb!important;transform:translateY(-2px);box-shadow:0 12px 26px rgba(92,48,146,.14)}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover .inst-upcoming-title{color:var(--site-accent,#5c3092)}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover .inst-upcoming-meta,
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover .inst-upcoming-meta2{color:#4a5a6c}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover .inst-upcoming-meta2 i{color:var(--site-accent,#5c3092)}
/* مربّع التاريخ */
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-date{
width:92px;min-height:92px;height:100%;flex-direction:column;justify-content:center;gap:4px;
background:linear-gradient(160deg,var(--site-accent,#5c3092) 0%,#44206f 100%)}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-day{font-size:1.75rem;line-height:1;font-weight:800}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-month{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
body.theme-omani[dir="rtl"] .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-month{letter-spacing:normal;font-size:.8rem}
/* النص */
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-body{gap:7px;padding:16px 0}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-title{font-size:1.02rem;line-height:1.4;font-weight:700;transition:color .18s}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:.88rem;color:#4a5a6c}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-city{
display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;
background:rgba(92,48,146,.1);color:var(--site-accent,#5c3092)!important;font-weight:700;font-size:.8rem}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-meta2{gap:6px 0;font-size:.82rem;color:#5a6a7c}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-meta2 > span{display:inline-flex;align-items:center}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-meta2 > span + span::before{
content:'';width:4px;height:4px;border-radius:50%;background:#c3cbd4;margin:0 12px}
/* السهم */
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a::after{
width:40px;height:40px;border:1.5px solid rgba(0,52,82,.25);color:var(--site-primary,#003452);font-size:1rem}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover::after{
background:var(--site-accent,#5c3092);border-color:var(--site-accent,#5c3092);color:#fff}
@media (max-width:767px){
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a{grid-template-columns:70px minmax(0,1fr) 34px;gap:12px;min-height:80px;padding:0 12px 0 0}
body.theme-omani[dir="rtl"] .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a{padding:0 0 0 12px}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-date{width:70px;min-height:80px}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-day{font-size:1.4rem}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-body{padding:12px 0}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-title{font-size:.95rem}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a::after{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover{transform:none}
}
/* الوقوف: قاعدة قديمة بتخلّي لون الرابط أبيض (كانت خلفية الوقوف كحلي).
الخلفية بقت بنفسجي فاتح، فأي نص بيورث لون الرابط كان هيبقى أبيض على فاتح. */
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a{--link-hover-ink:var(--site-primary,#003452)}
body.theme-omani .inst-upcoming:not(.inst-upcoming-virtual) .inst-upcoming-list a:hover{color:var(--site-primary,#003452)!important}
/* ─────────────────────────────
(2026-09-11) "Available Cities": لمسة فنية — طلب صريح
نفس فكرة الخط اللي عليه محطات مرقّمة، بس:
- خلفية القسم نقط كحلي باهتة جداً زي خريطة، بتبهت عند الأطراف.
- الخط بقى مسار متدرّج بنفسجي→كحلي بدل الخط المتقطّع.
- الدايرة تدرّج كحلي→بنفسجي، حلقة بيضا أتخن وتوهّج بنفسجي خفيف.
- الاسم والرابط على بطاقة بيضا صغيرة بظل؛ عند الوقوف بتطلع حبة،
و"More Details" بتبقى كبسولة بنفسجي مليانة.
- زرار "Cities" كبسولة متدرّجة.
───────────────────────────── */
body.theme-omani .om-cities{
background-color:#f6f8fa;
background-image:radial-gradient(rgba(0,52,82,.09) 1.2px,transparent 1.4px);
background-size:18px 18px;
-webkit-mask-image:none}
body.theme-omani .om-cities > .container{position:relative}
/* المسار */
body.theme-omani .om-cities-card::before{
top:21px;height:3px;border-top:0!important;border-radius:2px;opacity:.55;
background:linear-gradient(90deg,var(--site-accent,#5c3092) 0%,var(--site-primary,#003452) 100%)}
body.theme-omani[dir="rtl"] .om-cities-card::before{
background:linear-gradient(270deg,var(--site-accent,#5c3092) 0%,var(--site-primary,#003452) 100%)}
/* المحطة */
body.theme-omani .om-cities-card::after{
width:48px;height:48px;border:4px solid #fff;font-size:.95rem;letter-spacing:.02em;
background:linear-gradient(135deg,var(--site-primary,#003452) 0%,var(--site-accent,#5c3092) 100%);
box-shadow:0 0 0 2px rgba(92,48,146,.55),0 8px 18px rgba(92,48,146,.28);
transition:transform .22s ease,box-shadow .22s ease}
body.theme-omani .om-cities-card:hover::after{
transform:scale(1.12) rotate(-6deg);
background:linear-gradient(135deg,var(--site-accent,#5c3092) 0%,#7b4bc0 100%);
box-shadow:0 0 0 2px var(--site-accent,#5c3092),0 12px 24px rgba(92,48,146,.38)}
/* بطاقة الاسم */
body.theme-omani .om-cities-body{gap:6px;margin-top:4px;padding:12px 16px 12px;min-width:130px;
background:#fff;border-radius:12px;box-shadow:0 6px 16px rgba(0,52,82,.08);
transition:transform .22s ease,box-shadow .22s ease}
body.theme-omani .om-cities-card:hover .om-cities-body{transform:translateY(-3px);box-shadow:0 12px 26px rgba(92,48,146,.16)}
body.theme-omani .om-cities-name{font-size:1rem;letter-spacing:.01em}
body.theme-omani .om-cities-card:hover .om-cities-name{color:var(--site-accent,#5c3092)}
body.theme-omani .om-cities-go{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;
font-size:.76rem;font-weight:600;color:var(--site-accent,#5c3092);background:rgba(92,48,146,.08);
transition:background .2s,color .2s}
body.theme-omani .om-cities-card:hover .om-cities-go{background:var(--site-accent,#5c3092);color:#fff}
/* زرار كل المدن */
body.theme-omani .om-cities-all{border-radius:999px!important;padding-inline:28px!important;
background:linear-gradient(135deg,var(--site-primary,#003452) 0%,var(--site-accent,#5c3092) 100%)!important;
box-shadow:0 10px 22px rgba(92,48,146,.25);border:0!important;color:#fff!important}
body.theme-omani .om-cities-all:hover{filter:brightness(1.1)}
@media (max-width:575px){
body.theme-omani .om-cities-body{min-width:0;width:100%;padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){
body.theme-omani .om-cities-card:hover::after,
body.theme-omani .om-cities-card:hover .om-cities-body{transform:none}
}
/* زرار "Cities": عند الوقوف النص والخلفية كانوا الاتنين كحلي (قاعدة وقوف
قديمة بتلوّن النص) فالكلمة بتختفي. النص أبيض والخلفية تدرّج بنفسجي. */
body.theme-omani .om-cities-foot .om-cities-all{--link-hover-ink:#fff}
body.theme-omani .om-cities-foot .om-cities-all:hover,
body.theme-omani .om-cities-foot .om-cities-all:focus{color:#fff!important;
background:linear-gradient(135deg,var(--site-accent,#5c3092) 0%,#7b4bc0 100%)!important}
/* المسار كان متدرّج جوّه كل بطاقة لوحدها، فعند كل حدّ بين مدينتين بيبان
لحام (كحلي جنب بنفسجي). بقى لون واحد شفاف فيبان خط واحد متصل.
والدايرة فوق الخط صراحةً (z-index) عشان الخط ما يعدّيش على الرقم. */
body.theme-omani .om-cities-card::before,
body.theme-omani[dir="rtl"] .om-cities-card::before{background:var(--site-accent,#5c3092);opacity:.35;z-index:0}
body.theme-omani .om-cities-card::after{z-index:2}
body.theme-omani .om-cities-body{position:relative;z-index:1}
/* ─────────────────────────────
(2026-09-12) "ليسوا في مستوى واحد" — طلب صريح، والاختيار: القص زي المعهد.
العنوان سطر أو سطرين، فالتاريخ والكلام والزرار تحته كانوا بينزلوا معاه.
ارتفاع ثابت = سطرين × 18.58 ≈ 37px (مفيش حشوة على العنوان هنا).
───────────────────────────── */
body.theme-omani.pg-training-courses #course_list .course-title,
body.theme-omani.pg-training-courses #category_course_list .course-title,
body.theme-omani.pg-training-courses #category_course_list_by_name .course-title,
body.theme-omani.pg-training-courses #coursefinder_list_courses .course-title{
display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
overflow:hidden;height:37px!important;box-sizing:border-box}
/* ─────────────────────────────
(2026-09-12) ترتيب خانات الفلتر ومحرّك البحث — طلب صريح:
"ننوّع في ترتيب الخانات مع الاحتفاظ دايمًا بالاسم في مكانه، بحيث ميبقاش
موقع شبه التاني في الترتيب".
الترتيب هنا بالـCSS بس (order) — الحقول نفسها ما اتلمستش: نفس الأسماء
ونفس الـids اللي الفلتر والـJS بيقروها، ونفس الحقول المخفية.
خانة اسم الدورة (search-input-main) سايبينها في مكانها الأول دايمًا.
المعهد مستنّى: كل القواعد مربوطة بـbody.theme-omani.
───────────────────────────── */
body.theme-omani.pg-training-courses #common-filter-box-modal-one #sort_cat{order:1}
body.theme-omani.pg-training-courses #common-filter-box-modal-one #sort_month{order:2}
body.theme-omani.pg-training-courses #common-filter-box-modal-one #sort_course_year{order:3}
body.theme-omani.pg-training-courses #common-filter-box-modal-one #sort_city{order:4}
body.theme-omani.pg-training-courses #common-filter-box-modal-one #sort_lang{order:5}
body.theme-omani .modal .form-group.row > .search-input-main{order:0}
body.theme-omani .modal .form-group.row > .year-search{order:1}
body.theme-omani .modal .form-group.row > .category-id{order:2}
body.theme-omani .modal .form-group.row > .city-id{order:3}
body.theme-omani .modal .form-group.row > .lang-id{order:4}
body.theme-omani .modal .form-group.row > .course-type{order:5}
body.theme-omani .modal .form-group.row > .month-search{order:6}
/* (2026-09-12) زرار Clear وزرار الكتيب وزرار البحث يفضلوا في مكانهم في الآخر:
في flex أي عنصر order:0 بيسبق اللي عنده order:1، فلما الخانات اتظبطت 1..5
الزراير كانت هتقفز لقدّام. هنا بيتثبتوا بعد الخانات. */
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.darkblue-color{order:90}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color,
body.theme-omani.pg-training-courses #common-filter-box-modal-one #download_brochure_category{order:91}
body.theme-omani .modal .form-group.row > .search-btn-main,
body.theme-omani .modal .form-group.row > [class*="search-btn"],
body.theme-omani .modal .form-group.row > .col-md-12:last-child{order:99}
/* ─────────────────────────────
(2026-09-12) ترتيب خانات فورمات الاستفسار/الكتيب/اتصل بيا — طلب صريح:
ننوّع الترتيب بين المواقع مع إبقاء خانات الاسم في مكانها.
الاسم الأول والأخير ثابتين فوق، وزرار الإرسال ثابت تحت (order:99 فوق)،
واللي بيتنقل: الشركة / الإيميل / التليفون / الرسالة.
بالـCSS بس (order + :has) — الحقول وأسماءها وids زي ما هي.
───────────────────────────── */
body.theme-omani .modal .form-group.row > div:has(#first_name_qe){order:1}
body.theme-omani .modal .form-group.row > div:has(#last_name_qe){order:2}
body.theme-omani .modal .form-group.row > div:has(#first_name_cb){order:1}
body.theme-omani .modal .form-group.row > div:has(#last_name_cb){order:2}
body.theme-omani .modal .form-group.row > div:has(#first_name_db){order:1}
body.theme-omani .modal .form-group.row > div:has(#last_name_db){order:2}
body.theme-omani .modal .form-group.row > div:has(#company_qe){order:3}
body.theme-omani .modal .form-group.row > div:has(#comments_qe){order:4}
body.theme-omani .modal .form-group.row > div:has(#phone_qe){order:5}
body.theme-omani .modal .form-group.row > div:has(#email_qe){order:6}
body.theme-omani .modal .form-group.row > div:has(#phone_cb){order:3}
body.theme-omani .modal .form-group.row > div:has(#company_cb){order:4}
body.theme-omani .modal .form-group.row > div:has(#phone_cb){order:3}
body.theme-omani .modal .form-group.row > div:has(#email_db){order:4}
body.theme-omani .modal .form-group.row > div:has(#company_db){order:5}
/* ─────────────────────────────
(2026-09-12) "نوّعت بس في حاجات طويلة وحاجات قصيرة — خلي الشكل قد بعض" — طلب صريح.
خانات النافذة أصلاً بعرض مختلف (col-md-3 / col-md-2 / col-md-1)، فبعد ما الترتيب
اتغيّر بقى في خانة طويلة وخانة قصيرة جنب بعض. هنا: اسم الدورة وزرار البحث بعرض
كامل، والست قوايم كلها نص العرض بالظبط — فالشكل منتظم مهما كان الترتيب.
───────────────────────────── */
body.theme-omani .modal .form-group.row > .search-input-main,
body.theme-omani .modal .form-group.row > .search-btn-main{flex:0 0 100%!important;max-width:100%!important}
body.theme-omani .modal .form-group.row > .course-type,
body.theme-omani .modal .form-group.row > .category-id,
body.theme-omani .modal .form-group.row > .city-id,
body.theme-omani .modal .form-group.row > .lang-id,
body.theme-omani .modal .form-group.row > .month-search,
body.theme-omani .modal .form-group.row > .year-search{flex:0 0 33.333%!important;max-width:33.333%!important}
@media (max-width:575px){
body.theme-omani .modal .form-group.row > .course-type,
body.theme-omani .modal .form-group.row > .category-id,
body.theme-omani .modal .form-group.row > .city-id,
body.theme-omani .modal .form-group.row > .lang-id,
body.theme-omani .modal .form-group.row > .month-search,
body.theme-omani .modal .form-group.row > .year-search{flex:0 0 100%!important;max-width:100%!important}
}
/* ─────────────────────────────
(2026-09-12) "الهيكل العام متقارب" — طلب صريح.
توحيد العرض خلّى كل النوافذ بنفس الهيكل (اسم فوق + تلات صفوف اتنين‑اتنين + زرار).
هنا كل موقع له شكل شبكة مختلف: صف تلاتة وبعده صف بعرض أوسع.
الاسم فوق دايمًا وزرار البحث تحت، والترتيب اللي اتظبط قبل كده زي ما هو.
───────────────────────────── */
body.theme-omani #main-search-popup .modal-dialog{max-width:760px!important}
body.theme-omani .modal .form-group.row > .course-type{flex:0 0 50%!important;max-width:50%!important}
body.theme-omani .modal .form-group.row > .category-id{flex:0 0 33.333%!important;max-width:33.333%!important}
body.theme-omani .modal .form-group.row > .city-id{flex:0 0 33.334%!important;max-width:33.334%!important}
body.theme-omani .modal .form-group.row > .lang-id{flex:0 0 50%!important;max-width:50%!important}
body.theme-omani .modal .form-group.row > .month-search{flex:0 0 100%!important;max-width:100%!important}
body.theme-omani .modal .form-group.row > .year-search{flex:0 0 33.333%!important;max-width:33.333%!important}
@media (max-width:575px){
/* (2026-09-12) طلب صريح: شكل بوب-أب البحث على الموبايل يتنوّع زي الديسكتوب.
كان كل المواقع بتسطّح الست خانات لـ100% فطلعوا 8 صفوف متطابقة.
العروض موزّعة حسب الترتيب المرئي لهذا الموقع تحديدًا (الترتيب مختلف
من موقع لموقع) عشان كل صف يملا عرضه من غير فراغات.
الاسم فوق وزرار البحث تحت زي ما اتفقنا. ليدرز ليه شكله الخاص أصلًا. */
body.theme-omani .modal .form-group.row > .year-search{flex:0 0 50%!important;max-width:50%!important}
body.theme-omani .modal .form-group.row > .category-id{flex:0 0 50%!important;max-width:50%!important}
body.theme-omani .modal .form-group.row > .city-id{flex:0 0 33.333%!important;max-width:33.333%!important}
body.theme-omani .modal .form-group.row > .lang-id{flex:0 0 33.333%!important;max-width:33.333%!important}
body.theme-omani .modal .form-group.row > .course-type{flex:0 0 33.334%!important;max-width:33.334%!important}
body.theme-omani .modal .form-group.row > .month-search{flex:0 0 100%!important;max-width:100%!important}
}
/* (2026-09-12) العرض حسب ترتيب العرض الفعلي — الصفوف بتملا بالكامل */
/* (2026-09-12) طلب صريح: زرار تحميل الكتيب تحت كلام البنر. */
body.theme-omani.pg-training-courses #common-banner-section-image .ub-banner-brochure{
display:inline-block;margin-top:14px}
/* (2026-09-12) طلب صريح: طالما فيه نسخة من زرار تحميل الكتيب في البنر، النسخة اللي في
شريط البحث/الفلتر تتشال — عشان ما يبقاش نفس الزرار مرتين في الصفحة. */
body.theme-omani.pg-training-courses #common-filter-box-modal-one #download_brochure_upcoming,
body.theme-omani.pg-training-courses #common-filter-box-modal-one #download_brochure_category,
body.theme-omani.pg-training-courses #common-filter-box-modal-one .menu-two.purple-color{display:none!important}
/* (2026-09-12) الفلتر كان بيروح ورا الكروت وانا بعمل سكرول: z-index:1 كان أقل من الكروت.
بقى 30 — فوق الكروت وفاضل تحت الهيدر (بيقف عند 128px). */
body.theme-omani.pg-training-courses #common-filter-box-modal-one{z-index:30!important}
body.theme-omani.pg-training-courses #course_list,
body.theme-omani.pg-training-courses #category_course_list,
body.theme-omani.pg-training-courses .courselisting{position:relative;z-index:0}
/* (2026-09-12) طلب صريح: بعد ما زرار الكتيب اتشال من الفلتر، الخانات تاخد عرض الصفحة كله
وتبقى متناسقة — كل خانة بنفس العرض والباقي للفراغ بينهم، وزرار Clear في آخره. */
/* (2026-09-12) tasheeh: al-muhaddid kan descendant, wa al-section yaluff qa'imat ad-dawrat,
fa-kan yatul form at-tasjil dakhil kul card wa yahris 'unwan ad-dawra. At-tahdid al-an 'ala form al-filter wahdah. */
body.theme-omani.pg-training-courses #common-filter-box-modal-one .col-md-12.p-0 > form{
width:100%!important;display:flex!important;flex-wrap:nowrap;align-items:center;gap:12px!important}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .col-md-12.p-0 > form > select{
flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;margin:0!important}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .col-md-12.p-0 > form > .menu-two{flex:0 0 auto!important}
@media (max-width:991px){
body.theme-omani.pg-training-courses #common-filter-box-modal-one .col-md-12.p-0 > form{flex-wrap:wrap}
body.theme-omani.pg-training-courses #common-filter-box-modal-one .col-md-12.p-0 > form > select{flex:1 1 45%!important}
}
/* (2026-09-12) طلب صريح: نفس فرد الكلام في بنر صفحات الأقسام
(#common-banner-section-icon) زي ما اتعمل في /training-courses. */
body.theme-omani.pg-training-courses #common-banner-section-icon .common-banner-text{max-width:none;flex:1 1 auto;width:100%}
/* (2026-09-12) طلب صريح: ترتيب خانات محرّك البحث في صفحة نتائج البحث يتنوّع في كل
معهد. خانة الاسم تفضل أول واحدة بعد العنوان وزرار البحث آخر واحد (نفس القاعدة
المتفق عليها). الغلاف .form-group.row أصلاً flex فالـorder بتشتغل عليه.
الفواصل (.space10/.space20) ارتفاعها صفر والمسافة جاية من margin-top بتاعها —
ولو اتسابت مكانها هتتجمّع فوق لما الخانات تترتّب، فاتشالت والمسافة بقت row-gap.
المعهد مالوش theme-* ولا pg-search-page على الـbody فمستحيل توصله القاعدة دي. */
body.theme-omani.pg-search-page .search-results-wrap-left .form-group{row-gap:10px}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .space10,body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .space20{display:none}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .search-input-main:first-child{order:0;margin-bottom:6px}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .search-input-main:not(:first-child){order:1}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .city-id{order:2}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .course-type{order:3}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .lang-id{order:4}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .category-id{order:5}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .month-search{order:6}
body.theme-omani.pg-search-page .search-results-wrap-left .form-group > .year-search{order:7}
body.theme-omani.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-omani.pg-search-page .search-results-wrap-left{flex:0 0 22%;max-width:22%}
body.theme-omani.pg-search-page .search-results-wrap-right{flex:0 0 78%;max-width:78%}
body.theme-omani.pg-search-page .search-results-wrap-left .box{position:sticky;top:120px;align-self:flex-start}
body.theme-omani.pg-search-page .search-results-wrap-left .box{padding:12px}
/* (2026-09-12) طلب صريح: تغيير أيقونات صفحة نتايج البحث، وكل معهد بثلاثي مختلف.
الـmask متطبّق على الـ