/*
 * CEP Design System — Shared Styles
 * Migrated from cep-brand-complete-v6.css
 * Keep this file loaded on both Arabic and English pages.
 */

/* =========================================================
   CEP — Continuing Education Platform
   Makkah Colleges
   New Learning Theme Customisation
   ========================================================= */

:root {
    --cep-navy: #02285B;
    --cep-blue: #003780;
    --cep-gold: #827746;
    --cep-gold-dark: #776C3F;

    --cep-text: #1E293B;
    --cep-muted: #64748B;

    --cep-bg: #F6F8FB;
    --cep-surface: #FFFFFF;
    --cep-border: #E2E8F0;

    --cep-success: #198754;
    --cep-warning: #D97706;
    --cep-danger: #DC3545;

    --cep-radius-sm: 8px;
    --cep-radius: 12px;
    --cep-radius-lg: 16px;

    --cep-shadow-sm:
        0 2px 8px rgba(2, 40, 91, .06);

    --cep-shadow:
        0 8px 24px rgba(2, 40, 91, .08);
}


/* =========================================================
   GLOBAL
   ========================================================= */

body {
    background-color: var(--cep-bg);
    color: var(--cep-text);
}

a {
    color: var(--cep-blue);
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

a:hover,
a:focus {
    color: var(--cep-navy);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cep-navy);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html[lang^="ar"] body {
    font-family:
        "IBM Plex Sans Arabic",
        Tahoma,
        Arial,
        sans-serif;
}

html[lang^="en"] body {
    font-family:
        "Inter",
        Arial,
        sans-serif;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar,
.topbar {
    background-color: var(--cep-navy);
    color: #fff;
}

.top-bar a,
.topbar a {
    color: rgba(255,255,255,.9);
}

.top-bar a:hover,
.topbar a:hover {
    color: #fff;
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.navbar {
    background-color: #fff;
}

.navbar .nav-link {
    color: var(--cep-navy);
    font-weight: 500;
    position: relative;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--cep-blue);
}

/* CEP gold active/hover marker */
.navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 4px;
    height: 2px;
    background: var(--cep-gold);
    transition:
        left .2s ease,
        right .2s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    left: .75rem;
    right: .75rem;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    border-radius: var(--cep-radius-sm);
    font-weight: 600;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: var(--cep-blue);
    border-color: var(--cep-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--cep-navy);
    border-color: var(--cep-navy);
    box-shadow:
        0 6px 18px rgba(2,40,91,.18);
}

.btn-secondary {
    background-color: var(--cep-gold-dark);
    border-color: var(--cep-gold-dark);
}


/* =========================================================
   CARDS
   ========================================================= */

.card {
    border: 1px solid var(--cep-border);
    border-radius: var(--cep-radius);
    box-shadow: var(--cep-shadow-sm);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--cep-shadow);
}


/* =========================================================
   BLOCKS
   ========================================================= */

.block {
    background: var(--cep-surface);
    border: 1px solid var(--cep-border);
    border-radius: var(--cep-radius);
    box-shadow: var(--cep-shadow-sm);
}

.block .card-title,
.block .block-title,
.block h3 {
    color: var(--cep-navy);
    font-weight: 600;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
    border: 1px solid var(--cep-border);
    border-radius: var(--cep-radius);
    box-shadow: var(--cep-shadow);
    padding: .5rem;
}

.dropdown-item {
    border-radius: 7px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #F1F5F9;
    color: var(--cep-blue);
}


/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select,
.custom-select {
    border-color: var(--cep-border);
    border-radius: var(--cep-radius-sm);
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--cep-blue);
    box-shadow:
        0 0 0 .2rem rgba(0,55,128,.12);
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.breadcrumb {
    background: transparent;
}

.breadcrumb a {
    color: var(--cep-blue);
}

.breadcrumb-item.active {
    color: var(--cep-muted);
}


/* =========================================================
   TABLES
   ========================================================= */

.table {
    --bs-table-bg: transparent;
}

.table thead th {
    color: var(--cep-navy);
    font-weight: 600;
    border-bottom-color: var(--cep-border);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--cep-border);
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border-radius: var(--cep-radius);
}

.alert-info {
    border-color: rgba(0,55,128,.22);
}

.alert-success {
    border-color: rgba(25,135,84,.22);
}


/* =========================================================
   SIDEBAR / DRAWER
   ========================================================= */

.drawer,
[data-region="drawer"] {
    border-color: var(--cep-border);
}

.drawer .list-group-item,
[data-region="drawer"] .list-group-item {
    border-radius: 8px;
}

.drawer .list-group-item.active,
[data-region="drawer"] .list-group-item.active {
    background: var(--cep-navy);
    color: #fff;
}


/* =========================================================
   COURSE CONTENT
   ========================================================= */

.course-section {
    border-radius: var(--cep-radius);
}

.activity-item {
    border-radius: var(--cep-radius-sm);
}

.activity-item:hover {
    background-color: #F8FAFC;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.badge-primary,
.bg-primary {
    background-color: var(--cep-blue) !important;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(0,55,128,.28);
    outline-offset: 2px;
}


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .breadcrumb {
    direction: rtl;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .card,
    .block {
        border-radius: 10px;
    }

    .navbar .nav-link::after {
        display: none;
    }
}
/* =========================================================
   CEP — Toggle sidebar labels
   Fix hidden sidebar item names on hover/focus
   ========================================================= */

.item-link > .text {
    opacity: 0;
    visibility: hidden;

    background: #FFFFFF !important;
    color: #02285B !important;

    border: 1px solid #E2E8F0;
    border-radius: 8px;

    padding: 8px 12px !important;

    box-shadow: 0 6px 18px rgba(2, 40, 91, 0.14);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;

    white-space: nowrap;

    transition:
        opacity .18s ease,
        visibility .18s ease;

    pointer-events: none;
    z-index: 9999;
}

.item-link:hover > .text,
.item-link:focus > .text,
.item-link:focus-visible > .text {
    opacity: 1 !important;
    visibility: visible !important;
}

.item-link > .text > span {
    color: #02285B !important;
}

/* =========================================================
   CEP HERO PRIMARY CTA — FORCE FILLED GOLD BUTTON
   Use custom CSS class: cep-hero-primary
   ========================================================= */

/* Support the class whether the builder puts it on the
   link/button itself or on a parent wrapper. */
.cep-hero-primary,
.cep-hero-primary > a,
.cep-hero-primary a,
.cep-hero-primary > button,
.cep-hero-primary button,
.cep-hero-primary .btn,
a.cep-hero-primary,
button.cep-hero-primary,
.btn.cep-hero-primary {
    background: #827746 !important;
    background-color: #827746 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #827746 !important;
    box-shadow: none !important;
}

/* Make nested text/icons inherit the white CTA color. */
.cep-hero-primary *,
.cep-hero-primary a *,
.cep-hero-primary button *,
a.cep-hero-primary *,
button.cep-hero-primary * {
    color: #FFFFFF !important;
}

/* Hover / focus / active state */
.cep-hero-primary:hover,
.cep-hero-primary:focus,
.cep-hero-primary:active,
.cep-hero-primary:hover > a,
.cep-hero-primary:focus > a,
.cep-hero-primary:active > a,
.cep-hero-primary a:hover,
.cep-hero-primary a:focus,
.cep-hero-primary a:active,
.cep-hero-primary button:hover,
.cep-hero-primary button:focus,
.cep-hero-primary button:active,
.cep-hero-primary .btn:hover,
.cep-hero-primary .btn:focus,
.cep-hero-primary .btn:active,
a.cep-hero-primary:hover,
a.cep-hero-primary:focus,
a.cep-hero-primary:active,
button.cep-hero-primary:hover,
button.cep-hero-primary:focus,
button.cep-hero-primary:active,
.btn.cep-hero-primary:hover,
.btn.cep-hero-primary:focus,
.btn.cep-hero-primary:active {
    background: #6F653B !important;
    background-color: #6F653B !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #6F653B !important;
    box-shadow: 0 6px 18px rgba(2, 40, 91, .18) !important;
}

/* Keep the button visually filled even if the theme uses
   pseudo-elements for hover/overlay effects. */
.cep-hero-primary::before,
.cep-hero-primary::after,
.cep-hero-primary a::before,
.cep-hero-primary a::after,
.cep-hero-primary button::before,
.cep-hero-primary button::after {
    border-color: #827746 !important;
}

/* =========================================================
   CEP HERO SECONDARY CTA — OUTLINE
   Optional custom CSS class: cep-hero-secondary
   ========================================================= */

.cep-hero-secondary,
.cep-hero-secondary > a,
.cep-hero-secondary a,
.cep-hero-secondary > button,
.cep-hero-secondary button,
.cep-hero-secondary .btn,
a.cep-hero-secondary,
button.cep-hero-secondary,
.btn.cep-hero-secondary {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.cep-hero-secondary *,
.cep-hero-secondary a *,
.cep-hero-secondary button * {
    color: #FFFFFF !important;
}

.cep-hero-secondary:hover,
.cep-hero-secondary:focus,
.cep-hero-secondary:active,
.cep-hero-secondary a:hover,
.cep-hero-secondary a:focus,
.cep-hero-secondary a:active,
.cep-hero-secondary button:hover,
.cep-hero-secondary button:focus,
.cep-hero-secondary button:active,
.cep-hero-secondary .btn:hover,
.cep-hero-secondary .btn:focus,
.cep-hero-secondary .btn:active,
a.cep-hero-secondary:hover,
a.cep-hero-secondary:focus,
a.cep-hero-secondary:active,
button.cep-hero-secondary:hover,
button.cep-hero-secondary:focus,
button.cep-hero-secondary:active,
.btn.cep-hero-secondary:hover,
.btn.cep-hero-secondary:focus,
.btn.cep-hero-secondary:active {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    color: #02285B !important;
    border-color: #FFFFFF !important;
}

/* =========================================================
   CEP HERO RTL / CTA SPACING
   ========================================================= */

html[dir="rtl"] .cep-hero-row {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .cep-hero-row h1,
html[dir="rtl"] .cep-hero-row h2,
html[dir="rtl"] .cep-hero-row h3,
html[dir="rtl"] .cep-hero-row p {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .cep-hero-primary {
    margin-left: 12px !important;
}

@media (max-width: 767.98px) {
    .cep-hero-primary,
    .cep-hero-secondary {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}

/* =========================================================
   CEP FEATURED COURSES — MOODLE BUILDER
   Apply to Courses element with custom class:
   cep-featured-course-grid
   ========================================================= */

/* Section-level spacing and RTL behavior */
.cep-featured-course-grid {
    direction: rtl;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
}

.cep-featured-course-grid,
.cep-featured-course-grid * {
    box-sizing: border-box;
}

/* Keep carousel / grid items evenly spaced */
.cep-featured-course-grid .owl-stage,
.cep-featured-course-grid .slick-track,
.cep-featured-course-grid .splide__list,
.cep-featured-course-grid .swiper-wrapper {
    align-items: stretch;
}

.cep-featured-course-grid .owl-item,
.cep-featured-course-grid .slick-slide,
.cep-featured-course-grid .splide__slide,
.cep-featured-course-grid .swiper-slide {
    height: auto;
    padding: 8px 10px 18px;
}

/* Course cards — support the common mb2builder / Moodle card wrappers */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course,
    .card
) {
    height: 100%;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(2, 40, 91, .10) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #02285B !important;
    box-shadow: 0 10px 28px rgba(2, 40, 91, .08);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

/* Some mb2builder layouts put the visual card on a nested wrapper */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course
) > :is(
    .inner,
    .course-inner,
    .course-item-inner,
    .card-body
) {
    height: 100%;
    background: #FFFFFF !important;
    color: #02285B !important;
}

/* Hover treatment */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course,
    .card
):hover {
    transform: translateY(-4px);
    border-color: rgba(130, 119, 70, .34) !important;
    box-shadow: 0 16px 38px rgba(2, 40, 91, .13);
}

/* Course image */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course,
    .card
) img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

/* Avoid rounded image corners fighting with the card corners */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course,
    .card
) img:first-child {
    border-radius: 0 !important;
}

/* Text/content area */
.cep-featured-course-grid :is(
    .course-content,
    .course-details,
    .course-info,
    .card-body,
    .content
) {
    padding: 18px 18px 20px;
    text-align: right;
}

/* Course title */
.cep-featured-course-grid :is(
    .course-title,
    .course-name,
    .coursename,
    .title,
    h3,
    h4
),
.cep-featured-course-grid :is(
    .course-title,
    .course-name,
    .coursename,
    .title,
    h3,
    h4
) a {
    color: #02285B !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: right !important;
    text-decoration: none !important;
}

/* Limit long course names to a clean 2–3 line block where supported */
.cep-featured-course-grid :is(
    .course-title,
    .course-name,
    .coursename,
    .title,
    h3,
    h4
) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Instructor, date and secondary metadata */
.cep-featured-course-grid :is(
    .teacher,
    .teachers,
    .course-teacher,
    .course-meta,
    .meta,
    .date,
    .course-date,
    small
) {
    color: #64748B !important;
    line-height: 1.6;
    text-align: right;
}

/* Price / Free status */
.cep-featured-course-grid :is(
    .price,
    .course-price,
    .courseprice,
    .enrolment-price,
    .free
) {
    color: #827746 !important;
    font-weight: 700 !important;
}

/* Generic links inside course cards */
.cep-featured-course-grid :is(
    .course-item,
    .course-card,
    .courses-item,
    .course-box,
    .mb2-course,
    .mb2-course-item,
    .item-course,
    .card
) a {
    transition: color .2s ease, background-color .2s ease;
}

/* Badges such as New / My course */
.cep-featured-course-grid .badge,
.cep-featured-course-grid :is(
    .course-badge,
    .badge-course,
    .course-label,
    .label
) {
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-weight: 700 !important;
    line-height: 1.1;
}

.cep-featured-course-grid .badge:first-of-type,
.cep-featured-course-grid :is(
    .course-badge,
    .badge-course,
    .course-label,
    .label
):first-of-type {
    background: #D9FBE9 !important;
    color: #116149 !important;
}

/* Course preview / primary action */
.cep-featured-course-grid :is(
    .btn,
    .button,
    .course-button,
    .course-link
) {
    border-radius: 999px !important;
}

.cep-featured-course-grid :is(
    .btn-primary,
    .button-primary,
    .course-button
) {
    background: #827746 !important;
    border-color: #827746 !important;
    color: #FFFFFF !important;
}

.cep-featured-course-grid :is(
    .btn-primary,
    .button-primary,
    .course-button
):hover,
.cep-featured-course-grid :is(
    .btn-primary,
    .button-primary,
    .course-button
):focus {
    background: #6F653B !important;
    border-color: #6F653B !important;
    color: #FFFFFF !important;
}

/* Carousel navigation — keep controls outside the cards */
.cep-featured-course-grid .owl-nav,
.cep-featured-course-grid .slick-arrow,
.cep-featured-course-grid .splide__arrows {
    z-index: 5;
}

.cep-featured-course-grid .owl-nav button,
.cep-featured-course-grid .slick-prev,
.cep-featured-course-grid .slick-next,
.cep-featured-course-grid .splide__arrow,
.cep-featured-course-grid .swiper-button-prev,
.cep-featured-course-grid .swiper-button-next {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(2, 40, 91, .12) !important;
    background: #FFFFFF !important;
    color: #02285B !important;
    box-shadow: 0 7px 20px rgba(2, 40, 91, .10);
}

.cep-featured-course-grid .owl-nav button:hover,
.cep-featured-course-grid .slick-prev:hover,
.cep-featured-course-grid .slick-next:hover,
.cep-featured-course-grid .splide__arrow:hover,
.cep-featured-course-grid .swiper-button-prev:hover,
.cep-featured-course-grid .swiper-button-next:hover {
    background: #02285B !important;
    color: #FFFFFF !important;
}

/* Pager dots */
.cep-featured-course-grid .owl-dots,
.cep-featured-course-grid .slick-dots,
.cep-featured-course-grid .splide__pagination,
.cep-featured-course-grid .swiper-pagination {
    margin-top: 18px;
}

.cep-featured-course-grid .owl-dot span,
.cep-featured-course-grid .slick-dots button,
.cep-featured-course-grid .splide__pagination__page {
    background: #CBD5E1 !important;
}

.cep-featured-course-grid .owl-dot.active span,
.cep-featured-course-grid .slick-dots .slick-active button,
.cep-featured-course-grid .splide__pagination__page.is-active {
    background: #003780 !important;
}

/* RTL consistency */
html[dir="rtl"] .cep-featured-course-grid,
html[dir="rtl"] .cep-featured-course-grid :is(
    .course-content,
    .course-details,
    .course-info,
    .card-body,
    .content
) {
    direction: rtl;
    text-align: right;
}

/* Tablet */
@media (max-width: 991.98px) {
    .cep-featured-course-grid {
        max-width: 760px;
    }

    .cep-featured-course-grid :is(
        .course-item,
        .course-card,
        .courses-item,
        .course-box,
        .mb2-course,
        .mb2-course-item,
        .item-course,
        .card
    ) {
        min-height: 400px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .cep-featured-course-grid {
        max-width: 100%;
        padding-inline: 6px;
    }

    .cep-featured-course-grid .owl-item,
    .cep-featured-course-grid .slick-slide,
    .cep-featured-course-grid .splide__slide,
    .cep-featured-course-grid .swiper-slide {
        padding-inline: 4px;
    }

    .cep-featured-course-grid :is(
        .course-item,
        .course-card,
        .courses-item,
        .course-box,
        .mb2-course,
        .mb2-course-item,
        .item-course,
        .card
    ) {
        min-height: 0;
        border-radius: 16px !important;
    }

    .cep-featured-course-grid .owl-nav button,
    .cep-featured-course-grid .slick-prev,
    .cep-featured-course-grid .slick-next,
    .cep-featured-course-grid .splide__arrow,
    .cep-featured-course-grid .swiper-button-prev,
    .cep-featured-course-grid .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }
}

/* =========================================================
   CEP TRAINING PATHS — CATEGORIES
   Apply to Categories element with custom class:
   cep-training-paths-grid
   ========================================================= */

.cep-training-paths-grid {
    direction: rtl;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

.cep-training-paths-grid,
.cep-training-paths-grid * {
    box-sizing: border-box;
}

/* Equal-height category items */
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
) {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(2, 40, 91, .10) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #02285B !important;
    box-shadow: 0 8px 24px rgba(2, 40, 91, .07);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

/* Common nested wrappers used by category tiles */
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category
) > :is(
    .inner,
    .category-inner,
    .category-item-inner,
    .card-body,
    .content
) {
    height: 100%;
    background: #FFFFFF !important;
    color: #02285B !important;
}

/* Hover */
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
):hover {
    transform: translateY(-5px);
    border-color: rgba(130, 119, 70, .38) !important;
    box-shadow: 0 16px 38px rgba(2, 40, 91, .12);
}

/* Category image */
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
) img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Category text area */
.cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
) {
    padding: 20px 22px 24px !important;
    background: #FFFFFF !important;
    color: #02285B !important;
    text-align: right !important;
}

/* Titles */
.cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h3,
    h4
),
.cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h3,
    h4
) a {
    color: #02285B !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    text-align: right !important;
}

/* Descriptions */
.cep-training-paths-grid :is(
    .category-description,
    .category-desc,
    .description,
    .desc,
    p,
    li,
    small
) {
    color: #64748B !important;
    line-height: 1.8 !important;
    text-align: right !important;
}

/* Links */
.cep-training-paths-grid a {
    color: #003780;
}

.cep-training-paths-grid a:hover,
.cep-training-paths-grid a:focus {
    color: #827746;
}

/* Small gold accent line for the title/content area */
.cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
)::before {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin: 0 0 14px auto;
    border-radius: 999px;
    background: #827746;
}

/* Any category action/button */
.cep-training-paths-grid :is(
    .btn,
    .button,
    .category-button,
    .category-link
) {
    border-radius: 999px !important;
    background: #02285B !important;
    border-color: #02285B !important;
    color: #FFFFFF !important;
}

.cep-training-paths-grid :is(
    .btn,
    .button,
    .category-button,
    .category-link
):hover,
.cep-training-paths-grid :is(
    .btn,
    .button,
    .category-button,
    .category-link
):focus {
    background: #827746 !important;
    border-color: #827746 !important;
    color: #FFFFFF !important;
}

/* RTL consistency */
html[dir="rtl"] .cep-training-paths-grid,
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
) {
    direction: rtl;
    text-align: right !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .cep-training-paths-grid {
        max-width: 900px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .cep-training-paths-grid {
        max-width: 100%;
        padding-inline: 4px;
    }

    .cep-training-paths-grid :is(
        .category-item,
        .categories-item,
        .cat-item,
        .category-box,
        .mb2-category,
        .mb2-category-item,
        .item-category,
        .card
    ) {
        border-radius: 16px !important;
    }

    .cep-training-paths-grid :is(
        .category-content,
        .category-details,
        .category-info,
        .card-body,
        .content
    ) {
        padding: 18px !important;
    }
}

/* =========================================================
   CEP TRAINING PATHS — RTL ORDER & HIDE DESCRIPTIONS
   ========================================================= */

/* Hide category descriptions completely on the front page */
.cep-training-paths-grid :is(
    .category-description,
    .category-desc,
    .description,
    .desc,
    .category-summary,
    .summary,
    .category-text,
    .category-excerpt
),
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
) :is(p, ul, ol) {
    display: none !important;
}

/* Force category grid to begin from the right and flow right-to-left */
html[dir="rtl"] .cep-training-paths-grid,
html[dir="rtl"] .cep-training-paths-grid .row,
html[dir="rtl"] .cep-training-paths-grid :is(
    .categories,
    .categories-list,
    .category-list,
    .items,
    .items-list,
    .grid,
    .grid-row
) {
    direction: rtl !important;
}

/* Bootstrap / builder columns inherit RTL ordering and alignment */
html[dir="rtl"] .cep-training-paths-grid [class*="col-"] {
    direction: rtl !important;
    text-align: right !important;
}

/* Ensure each card title is aligned to the right */
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h3,
    h4
),
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h3,
    h4
) a {
    direction: rtl !important;
    text-align: right !important;
}

/* With descriptions hidden, tighten the card spacing */
.cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
) {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
}

/* Keep the gold accent aligned with RTL titles */
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
)::before {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* =========================================================
   CEP TRAINING PATHS — HARD RTL + HIDE ALL DESCRIPTIONS
   Strong override for New Learning / Mb2Builder Categories
   ========================================================= */

/* 1) Hide category descriptions regardless of the exact
   description class used by the theme. */
.cep-training-paths-grid [class*="description"],
.cep-training-paths-grid [class*="Description"],
.cep-training-paths-grid [class*="summary"],
.cep-training-paths-grid [class*="Summary"],
.cep-training-paths-grid [class*="excerpt"],
.cep-training-paths-grid [class*="Excerpt"],
.cep-training-paths-grid [class*="-desc"],
.cep-training-paths-grid [class^="desc"],
.cep-training-paths-grid [class*="_desc"],
.cep-training-paths-grid .category-text,
.cep-training-paths-grid .categorytext,
.cep-training-paths-grid .item-text,
.cep-training-paths-grid .itemtext,
.cep-training-paths-grid .cat-text,
.cep-training-paths-grid .cattext {
    display: none !important;
}

/* Mb2Builder category descriptions may contain raw paragraphs
   or lists without a useful description class. Keep headings
   and links, but suppress descriptive blocks. */
.cep-training-paths-grid :is(p, ul, ol, dl) {
    display: none !important;
}

/* Hide list-item description fragments while keeping any list
   that is part of navigation outside this Categories element untouched. */
.cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
) li {
    display: none !important;
}

/* 2) HARD visual RTL order.
   Mb2Builder commonly uses Bootstrap .row + col-* wrappers.
   Reverse the visual flex order, then restore RTL inside cards. */
.cep-training-paths-grid.row,
.cep-training-paths-grid > .row,
.cep-training-paths-grid .row {
    flex-direction: row-reverse !important;
}

/* Some builder versions use generic flex/grid wrappers. */
.cep-training-paths-grid :is(
    .items,
    .items-list,
    .category-items,
    .categories-items,
    .category-list,
    .categories-list,
    .grid,
    .grid-row
) {
    direction: rtl !important;
}

/* Restore Arabic text direction on every category column/card. */
html[dir="rtl"] .cep-training-paths-grid [class*="col-"],
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-item,
    .categories-item,
    .cat-item,
    .category-box,
    .mb2-category,
    .mb2-category-item,
    .item-category,
    .card
) {
    direction: rtl !important;
    text-align: right !important;
}

/* Titles always align right. */
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
),
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
) a {
    direction: rtl !important;
    text-align: right !important;
}

/* Compact spacing now that descriptions are removed. */
.cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
) {
    padding-bottom: 18px !important;
    min-height: 0 !important;
}

/* Prevent hidden descriptive content from reserving vertical space
   in common builder wrappers. */
.cep-training-paths-grid :is(
    .category-description-wrap,
    .description-wrap,
    .summary-wrap,
    .desc-wrap
) {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =========================================================
   CEP TRAINING PATHS — CENTER CATEGORY TITLES
   ========================================================= */

/* Center the training-path/category names under each image */
.cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
),
.cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
) a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
}

/* Override previous RTL title alignment only for this Categories element */
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
),
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-title,
    .category-name,
    .categoryname,
    .title,
    h2,
    h3,
    h4,
    h5
) a {
    direction: rtl !important;
    text-align: center !important;
}

/* Center the small gold accent line with the title */
.cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
)::before,
html[dir="rtl"] .cep-training-paths-grid :is(
    .category-content,
    .category-details,
    .category-info,
    .card-body,
    .content
)::before {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================
   CEP FIX
   TinyMCE Source Code / Dialog Above Moodle Page Builder
   ========================================================== */

/*
 * TinyMCE puts dialogs such as:
 * - Source code
 * - Insert link
 * - Insert media
 * - Table dialogs
 * inside .tox-tinymce-aux
 *
 * Keep this complete dialog layer above Moodle/Page Builder.
 */
body .tox.tox-tinymce-aux,
body .tox-tinymce-aux {
    position: relative !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}


/* Dialog wrapper */

body .tox .tox-dialog-wrap {
    z-index: 2147483001 !important;
    pointer-events: auto !important;
}


/*
 * The dark transparent layer must remain
 * BEHIND the actual TinyMCE dialog.
 */
body .tox .tox-dialog-wrap__backdrop {
    z-index: 0 !important;
    pointer-events: auto !important;
}


/* Actual Source Code dialog */

body .tox .tox-dialog {
    position: relative !important;

    z-index: 10 !important;

    opacity: 1 !important;

    pointer-events: auto !important;
}


/* Dialog body */

body .tox .tox-dialog__body,
body .tox .tox-dialog__body-content,
body .tox .tox-dialog__content-js {
    position: relative !important;

    z-index: 11 !important;

    pointer-events: auto !important;

    opacity: 1 !important;
}


/* Source code textarea / editor area */

body .tox .tox-textarea,
body .tox textarea,
body .tox .tox-textfield {
    position: relative !important;

    z-index: 12 !important;

    pointer-events: auto !important;

    user-select: text !important;

    -webkit-user-select: text !important;
}


/* Dialog header + buttons */

body .tox .tox-dialog__header,
body .tox .tox-dialog__footer {
    position: relative !important;

    z-index: 12 !important;

    pointer-events: auto !important;
}


/* ==========================================================
   Prevent CEP/Page Builder content from covering editor
   ========================================================== */

body.editing .cep-live-lecture-source,
body.editing .cep-teams-live,
body.editing .cep-announcement-block {
    z-index: 0 !important;
}


/*
 * Moodle page content does not need extreme z-index values.
 */
body.editing .block,
body.editing .block-content,
body.editing .content {
    isolation: auto !important;
}


/* ==========================================================
   Moodle native modal safety
   ========================================================== */

body .modal-backdrop {
    z-index: 1040 !important;
}


body .modal {
    z-index: 1055 !important;
}


/*
 * TinyMCE must always stay above Moodle native modals
 * when its own dialog is opened.
 */
body .tox-tinymce-aux {
    z-index: 2147483000 !important;
}