.pio-course-swiper {
    height: 26rem;
}

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

.pio-course-card {
    border: none !important;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* subject cards: highlight the icon of the price currently shown */
.active-price-interactive {
    color: var(--pio-primary-color) !important;
}

.active-price-recorded {
    color: var(--pio-primary-color2) !important;
}

/* 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;
}

/* Instant CSS tooltip for the interactive icon (no native title delay).
   transition: none => appears the moment :hover fires. */
.pio-icon-wrap[data-pio-tip] {
    cursor: help;
}

.pio-icon-wrap[data-pio-tip]::after,
.pio-icon-wrap[data-pio-tip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    z-index: 30;
}

.pio-icon-wrap[data-pio-tip]::after {
    content: attr(data-pio-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.pio-icon-wrap[data-pio-tip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.pio-icon-wrap[data-pio-tip]:hover::after,
.pio-icon-wrap[data-pio-tip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* each swiper slide has its own transform (a stacking context), so a later
   card paints over the tooltip regardless of z-index. Lift the whole hovered
   slide above its neighbours while the tooltip is showing. */
.pio-course-slide:has(.pio-icon-wrap[data-pio-tip]:hover),
.swiper-slide-def:has(.pio-icon-wrap[data-pio-tip]:hover) {
    z-index: 30;
}

/* subject cards: course language as a letter badge on the image corner.
   The letter itself comes from languageBadge() in subjects_controllerV2.js -
   the localized language name reduced to its distinguishing initial - so a
   language added to the database later needs no rule here. */
.card:has(> .pio-lang-badge) {
    /* type 2's card already carries .position-relative; types 1 and 3 do not,
       and the badge must not escape to some further ancestor. */
    position: relative;
}

.pio-lang-badge {
    position: absolute;
    top: .625rem;
    inset-inline-end: .625rem;
    z-index: 2;
    /* a true circle, not a pill: languageBadge() emits ONE glyph per language
       (ع / A), so width and height can be equal and fixed */
    width: 1.575rem;
    height: 1.575rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pio-primary-color, #FFA000);
    color: #fff;
    /* Poppins is forced site-wide by `* { font-family }` and carries NO Arabic,
       so ع quietly fell back to some other face while the Latin A stayed
       Poppins - the two badges were set in two different typefaces. Every
       family listed here covers BOTH scripts, so whichever one the device has
       renders the pair consistently.
       !important is required to beat styleRTL.css's
       `body[dir="rtl"] * { font-family: "Almarai" !important }`, which is
       (0,1,1) + !important and would otherwise reclaim the Arabic side. */
    font-family: "Almarai", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif !important;
    font-size: clamp(0.8125rem, calc(0.78rem + 0.14vw), 0.9375rem);
    font-weight: 700;
    line-height: 0;
    /* the ring separates the disc from whatever the course photo happens to be
       behind it, and the drop shadow lifts it off the image - without both, an
       orange badge disappears into a warm-toned thumbnail */
    box-shadow: 0 0 0 0px rgba(255, 255, 255, .95),
                0 2px 6px rgba(0, 0, 0, .28);
    cursor: help;
    user-select: none;
}

/* Same instant tooltip as the sections-count badge, but opening DOWNWARD:
   this badge sits at the top of the card, so a tooltip above it would be
   clipped by the swiper. */
.pio-lang-badge[data-pio-tip]::after,
.pio-lang-badge[data-pio-tip]::before {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
    z-index: 30;
}

.pio-lang-badge[data-pio-tip]::after {
    content: attr(data-pio-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: clamp(0.6206rem, calc(0.597rem + 0.1005vw), 0.6875rem);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.pio-lang-badge[data-pio-tip]::before {
    content: "";
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #333;
}

.pio-lang-badge[data-pio-tip]:hover::after,
.pio-lang-badge[data-pio-tip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* each swiper slide has its own transform (a stacking context), so lift the
   hovered slide the same way the sections-count tooltip does */
.pio-course-slide:has(.pio-lang-badge[data-pio-tip]:hover),
.swiper-slide-def:has(.pio-lang-badge[data-pio-tip]:hover),
.swiper-slide:has(.pio-lang-badge[data-pio-tip]:hover) {
    z-index: 30;
}

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

    /* Course-language badge on the subject cards. The orange disc and white
       letter are deliberate in both themes, so only the shadow changes: the
       light-theme drop shadow disappears against a dark card, and the ring
       was dropped there, so this just deepens the shadow to keep the badge
       readable where it sits on a dark image. */
    .pio-lang-badge {
        box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    }

    /* interactive-icon tooltip: dark bubble in light mode (above),
       inverted to a white bubble with dark text in dark mode */
    .pio-icon-wrap[data-pio-tip]::after {
        background: #fff;
        color: #212529;
    }

    .pio-icon-wrap[data-pio-tip]::before {
        border-top-color: #fff;
    }

    /* keep the sections-count corner badge in the primary color, bg matches the dark card */
    .bento-card .pio-sections-count,
    .pio-sections-count {
        color: var(--pio-primary-color) !important;
        background: #111111;
    }
}