.pio-course-swiper {
    height: auto;
}

.pio-course-slide {
    max-width: 82vw;
    height: auto;
}

.pio-course-card {
    -\-pio-card-title-lines: 1;
    -\-pio-card-title-lh: 1.8;
    -\-pio-card-desc-lines: 2;
    -\-pio-card-desc-lh: 1.55;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;  
}

    .pio-course-card .card-title {
        -webkit-line-clamp: var(-\-pio-card-title-lines, 2);
        line-height: var(-\-pio-card-title-lh, 1.45);
        min-height: calc(var(-\-pio-card-title-lh, 1.45) * var(-\-pio-card-title-lines, 2) * 1em);
    }

    .pio-course-card .card-body p.pio-fs-7 {
        -webkit-line-clamp: var(-\-pio-card-desc-lines, 2);
        line-height: var(-\-pio-card-desc-lh, 1.55);
        min-height: calc(var(-\-pio-card-desc-lh, 1.55) * var(-\-pio-card-desc-lines, 2) * 1em);
    }

/* Layer the grey format tab over an orange offer tab extending inward. */
.pio-offer-price-banner {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    height: 24px;
    max-width: calc(100% - 24px);
    border-bottom-left-radius: 10px;
    overflow: hidden;
    color: #fff;
    pointer-events: none;
}

body[dir="rtl"] .pio-offer-price-banner {
    flex-direction: row;
}

.pio-offer-price-mode {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 3px 10px;
    border-bottom-left-radius: 10px;
    background: #647587;
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
}

.pio-offer-price-mode svg {
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
}

.pio-offer-price-mode > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pio-offer-banner-discount {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin-right: -10px;
    padding: 3px 20px 3px 10px;
    border-bottom-left-radius: 10px;
    background: var(-\-pio-primary-color, #FFA000);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* Availability icons remain grey; the corner badge identifies the active price. */
.pio-course-card .pio-icon-wrap,
.pio-course-card .pio-icon-wrap svg,
.pio-course-card .pio-icon-wrap .pio-sections-count,
.demo-related-item .pio-icon-wrap,
.demo-related-item .pio-icon-wrap .pio-sections-count,
.demo-related-item .demo-related-tag i,
.demo-related-item .demo-related-tag svg {
    color: #808080 !important;
}

/* Course language badge (_courseLanguageBadgeV2.cshtml): a tab hung from the
   card's top-left corner, the mirror of the price tab in the top-right one,
   in the same slate. Physically left on both page directions, because the
   price tab stays physically right on both. Unlike the price tab it takes
   the pointer, for its tooltip (the full language name).
   The icon is one 18px SVG: a faint globe with the letter (ع / E) inside it
   as a vector outline, already centred on the globe in the SVG itself. */
.pio-lang-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    height: 24px;
    padding: 0 9px;
    border-bottom-right-radius: 10px;
    background: #647587;
    color: #fff;
    white-space: nowrap;
    cursor: help;
}

    .pio-lang-badge > * {
        grid-area: 1 / 1;
    }

.pio-lang-badge__icon {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
}

.pio-lang-badge__globe {
    fill: currentColor;
    opacity: .35;
}

/* The letter, solid. The gap around it is cut out of the globe by a mask
   (#pioLangCutAr / #pioLangCutEn in _VersionTwoLayout.cshtml), so it is
   transparent and works on any background - no painted halo. */
.pio-lang-badge__mark {
    fill: currentColor;
    stroke: none;
}

/* Any other language: its first letter, as text over the globe. */
.pio-lang-badge__code {
    position: relative;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 2px #647587, 0 0 2px #647587, 0 0 3px #647587;
}

/* Home page schedule cards (_ScheduleSection.cshtml): no price tab, and the
   thumbnail sits at the start edge, so the badge follows it - on the
   thumbnail's top corner, start side, on both page directions. */
.pio-sbanner-card .pio-lang-badge {
    top: .5rem;
    left: auto;
    right: auto;
    inset-inline-start: .5rem;
    border-radius: 0;
    border-start-start-radius: .5rem;
    border-end-end-radius: 10px;
}

body[data-bs-theme="dark"] .pio-lang-badge,
body[data-bs-theme="dark"] .pio-lang-badge span {
    color: #fff !important;
}

/* Inline variant (ViewData["LangBadgeInline"]): sits in the card's
   training-format icon row, before the recorded / interactive icons, in the
   same grey as them - no tab, no corner. The letter's halo takes the card
   background instead of the slate so it still lifts off the globe lines. */
.pio-lang-badge.pio-lang-badge--inline {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #808080;
}

    .pio-lang-badge--inline .pio-lang-badge__icon {
        width: 1.2em;
        height: 1.2em;
    }

    .pio-lang-badge--inline .pio-lang-badge__globe {
        opacity: .45;
    }

    .pio-lang-badge--inline .pio-lang-badge__code {
        text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
    }

body[data-bs-theme="dark"] .pio-lang-badge.pio-lang-badge--inline,
body[data-bs-theme="dark"] .pio-lang-badge.pio-lang-badge--inline span {
    color: #808080 !important;
}

/* Course language as Ar / En inside a circle - the cards' icon row (inline
   badge above) and the schedule / related-course tags. Takes the colour of
   whatever holds it, so it matches the icons or the tag text beside it. */
.pio-lang-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.375rem;
    height: 1.375rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: .5625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    direction: ltr;
}

/* Header search results: scaled to the small training-format icons beside it
   (sized in em of the row text, so it matches whatever size the row uses). */
.autocomplete-results-holder .pio-lang-circle {
    width: 2.1em;
    height: 2.1em;
    font-size: .68em;
    border-width: 1.2px;
}

body[data-bs-theme="dark"] .pio-lang-badge--inline .pio-lang-badge__code {
    text-shadow: 0 0 2px #111111, 0 0 2px #111111, 0 0 3px #111111;
}

/* "View details" on every card - course, diploma, package, offer and related
   cards, and the schedule cards (home, schedule page) - one compact size.
   It keeps its width (no shrink, no second line), so a long price beside it
   cannot push it onto two lines; the price takes what is left and, only when
   even that is too narrow, drops the old price above the new one.
   responsive.css pads every .pio-btn 10px 24px !important from 576px up -
   hence the !important on padding here.
   inline-flex is what centres the label in the 28px: a .btn is inline-block,
   where align-items does nothing and line-height 1 leaves the text at the top.
   Scoped to these buttons only - not .btn - so check/radio buttons and the
   other .btn controls keep their own layout. */
.pio-course-card .pio-btn-signIn,
.pio-sched2-card .pio-sched2-details,
.pio-sbanner-card .pio-sbanner-details {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 10px !important;
    font-size: .6875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.pio-course-card .price-offers {
    min-width: 0;
}

/* subject cards: sections count as a corner badge on the interactive icon */
.pio-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pio-sections-count {
    position: absolute;
    top: -7px;
    inset-inline-start: -9px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: clamp(0.5143rem, calc(0.4973rem + 0.0725vw), 0.5625rem);
    font-weight: 600;
    line-height: 2;
    color: var(-\-pio-primary-color, #F5821F);
    background: #fff;
    border: 1px solid currentColor;
    cursor: help;
}

.pio-icon-wrap[data-pio-tip] {
    cursor: help;
}

.pio-tip-bubble {
    -\-pio-tip-bg: #333;
    -\-pio-tip-fg: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1080;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 4px 8px;
    border-radius: 4px;
    background: var(-\-pio-tip-bg);
    color: var(-\-pio-tip-fg);
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 500;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

    .pio-tip-bubble.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .pio-tip-bubble::after {
        content: "";
        position: absolute;
        top: 100%;
        left: var(-\-pio-tip-arrow, 50%);
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: var(-\-pio-tip-bg);
    }

    .pio-tip-bubble.is-below::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: var(-\-pio-tip-bg);
    }

.pio-reveal {
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}

    .pio-reveal.pio-reveal-below,
    .pio-reveal.pio-reveal-above {
        opacity: 0;
        transition: none;
    }

    .pio-reveal.pio-reveal-below {
        transform: translate3d(0, 48px, 0);
    }

    .pio-reveal.pio-reveal-above {
        transform: translate3d(0, -48px, 0);
    }

@media (prefers-reduced-motion: reduce) {
    .pio-reveal.pio-reveal-below,
    .pio-reveal.pio-reveal-above {
        opacity: 1;
        transform: none;
    }
}

body[data-bs-theme="dark"] .pio-course-card {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-bs-theme="dark"] .pio-tip-bubble {
    -\-pio-tip-bg: #fff;
    -\-pio-tip-fg: #212529;
}

/* keep the sections-count corner badge in the primary color, bg matches the dark card */
body[data-bs-theme="dark"] .bento-card .pio-sections-count,
body[data-bs-theme="dark"] .pio-sections-count {
    color: var(-\-pio-primary-color) !important;
    background: #111111;
}

.pio-course-card {
    -\-pio-card-lift: 1.025;
    -\-pio-card-hover-bg: #f7f8fa;
    -\-pio-card-hover-muted: #343a40;
    -\-pio-card-hover-shadow: 0 16px 38px rgba(16, 32, 43, 0.2);
}

body[data-bs-theme="dark"] .pio-course-card {
    -\-pio-card-hover-bg: #161616;
    -\-pio-card-hover-muted: #adb5bd;
    -\-pio-card-hover-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
}

.pio-course-swiper .pio-course-card:hover,
.pio-course-swiper .pio-course-card:focus-within,
.pio-offers-grid .pio-course-card:hover,
.pio-offers-grid .pio-course-card:focus-within {
    background-color: var(-\-pio-card-hover-bg);
    box-shadow: var(-\-pio-card-hover-shadow);
}

    .pio-course-swiper .pio-course-card:hover .text-secondary,
    .pio-course-swiper .pio-course-card:focus-within .text-secondary,
    .pio-offers-grid .pio-course-card:hover .text-secondary,
    .pio-offers-grid .pio-course-card:focus-within .text-secondary {
        color: var(-\-pio-card-hover-muted) !important;
    }

.pio-course-swiper::part(container) {
    overflow-x: clip;
    overflow-y: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .pio-course-swiper .pio-course-card,
    .pio-offers-grid .pio-course-card {
        transition: opacity .28s ease, transform .36s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease;
    }

    .pio-course-swiper .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):hover,
    .pio-course-swiper .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):focus-within,
    .pio-offers-grid .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):hover,
    .pio-offers-grid .pio-course-card:not(.pio-reveal-below):not(.pio-reveal-above):focus-within {
        transform: scale(var(-\-pio-card-lift, 1.025));
    }
}