/* ==========================================================================
   DARK THEME - Template V2
   ==========================================================================
   HOW THIS FILE WORKS
   - The theme toggle (upperSection_controller.js) sets data-bs-theme="dark"
     on <body>; everything here is nested inside that selector via native
     CSS nesting, so it only applies in dark mode.
   - Light mode is the DEFAULT styling (style.css); this file only overrides.

   CONVENTIONS
   - Never use physical left/right for spacing in new rules; use the logical
     properties (inset-inline-start/end, padding-inline, margin-inline)
     so both AR (RTL) and EN (LTR) work without extra overrides.
     Bootstrap ms-2 / me-2 style utilities are unreliable in this project.
   - Keep the section order below when adding rules; every section matches
     a section in style.css.

   THE HEADER IS NOT IN THIS FILE
   - Everything that styles #pio-navbar-sticky - including its dark-theme and
     inverted-header rules - now lives in pio-header.css, next to the header's
     light, RTL and responsive rules. Sections 1, 2 and 11 below used to hold
     those; they moved out whole. Do not add header rules back here.

   TABLE OF CONTENTS
     0. Theme variables
     1. Global & overlays          (header parts moved -> pio-header.css)
     2. Header & navigation        (moved entirely -> pio-header.css)
     3. Index (home page)
     4. B2B page & gear carousel
     5. Theme-aware assets (dual image system)
     6. Courses, cards & components
     7. Training library
     8. Footer & statistics
     9. Bento cards (always light, even in dark mode)
    10. Responsive dark-theme adjustments
    11. Light-theme asset counterparts  (moved -> pio-header.css)
   ========================================================================== */
/* floating-label notch + certificate accordions stay light */
body[data-bs-theme="dark"] .form-floating > .form-control-plaintext ~ label::after,
body[data-bs-theme="dark"] .form-floating > .form-control:focus ~ label::after,
body[data-bs-theme="dark"] .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
body[data-bs-theme="dark"] .form-floating > .form-select ~ label::after,
body[data-bs-theme="dark"] .certificates-accordion .accordion-item {
    background: #FFF;
}

body[data-bs-theme="dark"] .pio-statistics-sub {
    color: #F5F5F5;
}

body[data-bs-theme="dark"] input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px transparent inset;
    -webkit-text-fill-color: #fff;
}

body[data-bs-theme="dark"] .spinner,
body[data-bs-theme="dark"] .burger-menu-background {
    background: rgba(0,0,0,0.85);
}

body[data-bs-theme="dark"] .pio-filter-bar {
    background: #191919;
}

/* course topics: lock icon + disabled rows stay muted grey */
body[data-bs-theme="dark"] .topics-accordion .fa-lock {
    color: #9aa0a6;
}

body[data-bs-theme="dark"] .topics-accordion .disabled span {
    color: #9aa0a6 !important;
}
/* ======================================================================
   3. INDEX (HOME PAGE)
   ====================================================================== */
body[data-bs-theme="dark"] .service-section-dark {
    color: #000;
}

body[data-bs-theme="dark"] .sig-mobile-card {
    background: #000;
    color: #fff;
}

body[data-bs-theme="dark"] .signature-section {
    background: #000;
    color: #ffffff;
}
/* bottom fade of the hero scene blends into the dark page
   (left/right 0 here means "full width" - direction-neutral, OK) */
body[data-bs-theme="dark"] .pio-hero-scene::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    background: linear-gradient(to bottom, transparent 0%, #000000 100%);
    z-index: 6;
    pointer-events: none;
}
/* ======================================================================
   4. B2B PAGE & GEAR CAROUSEL
   ====================================================================== */
body[data-bs-theme="dark"] .pio-b2b-header {
    background: #fff;
    color: #000;
}

    body[data-bs-theme="dark"] .pio-b2b-header .content-wrapper .pio-hero-content,
    body[data-bs-theme="dark"] .pio-b2b-header .content-wrapper .description {
        color: #000;
    }
/* Stats. Four cards under the hero, each its own surface (style.css owns
   the layout). They no longer borrow .pio-statistics-about, so there is
   nothing here to out-specify: this is simply what the cards look like on a
   black page, and AboutUsV2's fade is untouched further down.

   The text colour is stated rather than inherited. The old bar got white
   text from `.pio-statistics-about span { color:#fff !important }`, and
   these spans are no longer inside that class. */
body[data-bs-theme="dark"] .pio-b2b-stat {
    color: #fff;
    background: #141414;
    border: 0;
}

body[data-bs-theme="dark"] .pio-b2b-stat-label,
body[data-bs-theme="dark"] .pio-b2b-stat-note {
    color: #fff;
}
/* gear carousel */
/* Mirror of the 1px black border in style.css - white here, same weight.
   border-color only: the 1px and the style already come from the base rule,
   so the two cannot drift apart. */
body[data-bs-theme="dark"] .gear-card-inner {
    background: rgba(255, 255, 255, 0.05);
    border-color: #fff;
}

    body[data-bs-theme="dark"] .gear-card-inner span {
        color: #fff;
    }
/* "Why Pioneers" tiles: the white rounded outline the design calls for.
   Both classes are on the same element deliberately - `swiper-slide .card`
   further down this file sets `border: 0`, and it both outweighs a single
   class and comes later, so a plain .pio-b2b-why-tile rule would be zeroed
   out no matter what colour it named. Doubling the class outranks it, and
   the full shorthand puts the width back that `border: 0` took away. */
body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile {
    border: 1px solid #fff;
}
    /* Mirror of the hover in style.css. There the page is light so the tile
   goes dark; here the page is dark so it goes light.

   Doubling the class again for the reason spelled out just above - the
   `.card, swiper-slide .card` rule further down this file sets
   background-color, and a single class would lose to it. With the class
   doubled plus :hover this outranks both that rule and the light-mode
   hover in style.css, so it wins on specificity rather than on the bundle
   happening to load this file last. */
    body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:hover,
    body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:focus-within {
        background-color: #fefefe;
        border-color: #fefefe;
    }
        /* Class doubled here too, and for a sharper reason than the background
   above. Further down this file (the `.card .card-body .card-title,
   .card .card-title, .card .card-text ...` group) dark mode paints every
   card's text white. Under body[data-bs-theme="dark"] that selector scores
   (0,4,1) - and the obvious `.pio-b2b-why-tile:hover .card-title` scores
   (0,4,1) too. An exact tie, broken by source order, and that rule sits
   ~250 lines BELOW this one. So the hover colour was being applied and
   then immediately overwritten, which is why the text stayed white on the
   white hover panel.

   Doubling the class takes this to (0,5,1) and it wins outright, rather
   than depending on where in the file it happens to sit.

   .cards-description is targeted rather than .card-text even though the
   element carries both: it is the more specific name and matches what
   style.css uses for the light-mode mirror. */
        body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:hover .card-title,
        body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:hover .cards-description,
        body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:focus-within .card-title,
        body[data-bs-theme="dark"] .pio-why-gifs.pio-b2b-why-tile:focus-within .cards-description {
            color: #000620;
        }

body[data-bs-theme="dark"] .gear-outer-circle img,
body[data-bs-theme="dark"] .gear-inner img {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}
/* B2B form always keeps a white background */
body[data-bs-theme="dark"] .pio-b2b-form {
    color: #000;
}

    body[data-bs-theme="dark"] .pio-b2b-form .form-control,
    body[data-bs-theme="dark"] .pio-b2b-form .form-select {
        background-color: #F5F5F5 !important;
        color: #000 !important;
    }

    body[data-bs-theme="dark"] .pio-b2b-form .form-select {
        color-scheme: light;
    }

    body[data-bs-theme="dark"] .pio-b2b-form .form-select option {
        background-color: #fff;
        color: #000;
    }

    body[data-bs-theme="dark"] .pio-b2b-form .pio-form-label {
        color: #495057 !important;
    }
    /* floating-label notch fix for the B2B form */
    body[data-bs-theme="dark"] .pio-b2b-form .form-floating > .form-control:focus ~ label::after,
    body[data-bs-theme="dark"] .pio-b2b-form .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
    body[data-bs-theme="dark"] .pio-b2b-form .form-floating > .form-select ~ label::after {
        background: #fff !important;
    }

body[data-bs-theme="dark"] .pio-inner-training {
    -\-pio-training-panel-bg: #111111;
}

    body[data-bs-theme="dark"] .pio-inner-training *,
    body[data-bs-theme="dark"] .pio-inner-training span {
        color: #ffffff;
    }

body[data-bs-theme="dark"] .pio-mix-blend-mode {
    filter: invert(1);
    mix-blend-mode: difference;
}
/* B2B in-person section */
body[data-bs-theme="dark"] .pio-in-person-section {
    background-color: var(-\-body-background);
}

body[data-bs-theme="dark"] .pio-b2b-inPerson-text {
    color: rgba(255, 255, 255, 0.7);
}

body[data-bs-theme="dark"] .pio-in-person-title {
    color: #fff;
}
/* ======================================================================
   5. THEME-AWARE ASSETS (dual image system)
   Markup carries BOTH images; the theme decides which one is visible.
   ====================================================================== */
body[data-bs-theme="dark"] .img-dark-theme {
    display: block !important;
}

body[data-bs-theme="dark"] .img-light-theme {
    display: none !important;
}

body[data-bs-theme="dark"] .buisness-bg {
    background: var(-\-bs-white);
}
/* B2B "why us" gifs: swap to the white (_W) variants */
body[data-bs-theme="dark"] .img-pre-assessment {
    content: url('../../../assets/img/b2b-imgs/Pre-assessment_Session_W.gif');
}

body[data-bs-theme="dark"] .img-right-training-type {
    content: url('../../../assets/img/b2b-imgs/Choose_the_Right_Training_Type_W.gif');
}

body[data-bs-theme="dark"] .img-professional-instructors {
    content: url('../../../assets/img/b2b-imgs/Professional_Instructors_W.gif');
}

body[data-bs-theme="dark"] .img-reporting-evaluation {
    content: url('../../../assets/img/b2b-imgs/Reporting_and_Evaluation_W.gif');
}

body[data-bs-theme="dark"] .img-needs-analysis {
    content: url('../../../assets/img/b2b-imgs/Training_Needs_Analysis_W.gif');
}

body[data-bs-theme="dark"] .img-appropriate-training {
    content: url('../../../assets/img/b2b-imgs/Choose_Appropriate_Training_W.gif');
}
/* ======================================================================
   6. COURSES, CARDS & COMPONENTS
   ====================================================================== */
body[data-bs-theme="dark"] .filter-dropdown-container {
    background: #111111;
}
/* NOTE: the mobile V2 filter panel INVERTS against the page theme (like the
   buy modal) - white panel on the dark page. That lives in style.css, not
   here, so there is deliberately no dark override for it. */
body[data-bs-theme="dark"] .card,
body[data-bs-theme="dark"] swiper-slide .card {
    background-color: #000000;
    border: 0;
}
/* style.css gives .swiper-box-shadow .card a soft grey drop shadow
   INSTEAD of a border ("shadow instaed of border", as the comment there
   says). That reads as a lift on a light page, but a grey shadow on a
   black card sits on black paper - so there is nothing for it to fall on
   and it renders as a haze around the card instead of depth beneath it.

   Dark mode drops the shadow and separates the card the way the rest of
   this theme does, with a hairline. 0.08 alpha is deliberately at the edge
   of visible: enough to find the card's edge against the page, not enough
   to read as a drawn border.

   The !important on the border is required, not habit - the style.css rule
   it overrides is itself `border: none !important`. */
body[data-bs-theme="dark"] .swiper-box-shadow .card {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* cart page V2: the remove (trash) button is dark by default -> make it
   white on the dark page (buttons don't reliably inherit color, and FA may
   render the icon as an <svg> with its own fill) */
body[data-bs-theme="dark"] .cart-remove-btn,
body[data-bs-theme="dark"] .cart-remove-btn i,
body[data-bs-theme="dark"] .cart-remove-btn svg,
body[data-bs-theme="dark"] .cart-remove-btn svg path {
    color: #fff !important;
    fill: #fff !important;
}

    body[data-bs-theme="dark"] .cart-remove-btn:hover,
    body[data-bs-theme="dark"] .cart-remove-btn:hover i,
    body[data-bs-theme="dark"] .cart-remove-btn:hover svg,
    body[data-bs-theme="dark"] .cart-remove-btn:hover svg path {
        color: #dc3545 !important;
        fill: #dc3545 !important;
    }
/* training-method badge: the light side darkens the amber for contrast on
   white - on the dark page the plain amber is the readable one */
body[data-bs-theme="dark"] .cart-prod-method {
    background-color: rgba(255, 160, 0, .16);
    color: var(-\-pio-primary-color);
}
/* cart revalidation states: every light-side colour is a DARKENED tint
   picked for contrast on white, so each one is lifted back to its bright
   form here - dark backgrounds need the opposite direction */
body[data-bs-theme="dark"] .cart-alert-danger {
    border-color: rgba(220, 53, 69, .5);
    background-color: rgba(220, 53, 69, .16);
    color: #ff8a94;
}

body[data-bs-theme="dark"] .cart-alert-btn:hover {
    background-color: rgba(220, 53, 69, .25);
}

body[data-bs-theme="dark"] .cart-row-blocked {
    background-color: rgba(220, 53, 69, .12);
}

body[data-bs-theme="dark"] .cart-status-badge.is-danger {
    background-color: rgba(220, 53, 69, .2);
    color: #ff8a94;
}

body[data-bs-theme="dark"] .cart-status-badge.is-warn {
    background-color: rgba(255, 160, 0, .18);
    color: var(-\-pio-primary-color);
}

body[data-bs-theme="dark"] .cart-status-badge.is-info {
    background-color: color-mix(in srgb, var(-\-pio-blue-color) 18%, transparent);
    color: #4ecfe6;
}

body[data-bs-theme="dark"] .cart-line-action.is-required {
    background-color: rgba(220, 53, 69, .16);
    color: #ff8a94;
}

body[data-bs-theme="dark"] .cart-pay-guard.is-actionable {
    background-color: rgba(220, 53, 69, .14);
    color: #ff8a94;
}
/* certificates accordion: the neutral greys are translucent and carry over,
   only the surfaces that need to read as "raised" are restated */
body[data-bs-theme="dark"] .cart-cert-card.is-included {
    background-color: rgba(255, 255, 255, .04);
}
/* certificate scans are light documents - keep the plate light in both
   themes so a white certificate never disappears into it */
body[data-bs-theme="dark"] .cart-cert-img {
    background-color: rgba(255, 255, 255, .9);
}

body[data-bs-theme="dark"] .cart-certs-count {
    background-color: rgba(255, 255, 255, .14);
}
/* the sticky summary floats over the list: give it the page's own surface
   so rows scrolling behind it never show through */
body[data-bs-theme="dark"] .cart-summary {
    background-color: var(-\-body-background, #000);
}
/* floating sticky Add-to-Cart bar: dark surface on the dark page */
body[data-bs-theme="dark"] .sticky-cta-inner {
    background: #1a1a1a;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .5);
}

body[data-bs-theme="dark"] .sticky-cta-name {
    color: #fff;
}
/* the about-course card is intentionally kept light */
body[data-bs-theme="dark"] .pio-about-course .card {
    background-color: #ffffff;
    color: #000;
}

body[data-bs-theme="dark"] select {
    color: var(-\-bs-white);
    color-scheme: dark;
}

body[data-bs-theme="dark"] select option,
body[data-bs-theme="dark"] select optgroup {
    background-color: #1c1c1c;
    color: var(-\-bs-white);
}

body[data-bs-theme="dark"] .pio-nav-btn {
    border-color: #fff;
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}
/* ...but the schedule arrows sit on a bento card that stays WHITE even in
   dark mode, so white-on-white hides them - keep those arrows dark */
body[data-bs-theme="dark"] .schedule-card .schedule-nav-btn,
body[data-bs-theme="dark"] .cert-card .cert-nav-btn {
    border-color: #000;
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
}
/* kept for reference: cards used to get a visible border in dark mode
.courses-section .card,
.diploma-bundles .card,
.pio-packages .card,
.pio-webinar-cards .card,
.smart-training-cards .card,
.crew-cards,
.pio-b2b-form,
.pio-cart-card {
    border: 1.5px solid #343434;
} */

body[data-bs-theme="dark"] .card .card-body .card-text,
body[data-bs-theme="dark"] .card .card-body .card-title,
body[data-bs-theme="dark"] .card .card-text,
body[data-bs-theme="dark"] .card .card-title,
body[data-bs-theme="dark"] .card .card-description {
    color: var(-\-bs-white);
}
/* course prices */
body[data-bs-theme="dark"] .price-offers span {
    color: var(-\-bs-white);
}
/* diploma bundles & their running-border animation */
body[data-bs-theme="dark"] .diploma-bundles .card.activeBundle {
    border: 2px solid var(-\-pio-blue-color);
}

body[data-bs-theme="dark"] .card1.activeBundle .go-corner,
body[data-bs-theme="dark"] .card1.activeBundle::before {
    background: #111111;
}

body[data-bs-theme="dark"] .card1.activeBundle .go-arrow svg path {
    stroke: var(-\-bs-white);
}

body[data-bs-theme="dark"] .bento-card span.disabled {
    color: #ababab80 !important;
}

body[data-bs-theme="dark"] .diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(1) {
    background: linear-gradient(90deg, transparent, #262525);
}

body[data-bs-theme="dark"] .diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(2) {
    background: linear-gradient(180deg, transparent, #262525);
}

body[data-bs-theme="dark"] .diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(3) {
    background: linear-gradient(270deg, transparent, #262525);
}

body[data-bs-theme="dark"] .diplomaBundleSwiper .card.activeBundle .animation-stroke:nth-child(4) {
    background: linear-gradient(360deg, transparent, #262525);
}
/* kept for reference: dark accordions (currently default styling is used)
.accordion-button:not(.collapsed),
.pio-videos-accordion .accordion-item .accordion-header .accordion-button,
.pio-videos-accordion .accordion-item .accordion-collapse .accordion-body {
    background-color: #262525;
    color: #fff;
} */
/* popovers & their arrows
   (border-left/right here draw the arrow TRIANGLE, not layout spacing -
    the rtl-* classes are applied per-direction from the markup) */
body[data-bs-theme="dark"] .popover-custom {
    background-color: #262525;
}

    body[data-bs-theme="dark"] .popover-custom .card-body {
        color: #fff !important;
    }

body[data-bs-theme="dark"] .popover-right .popover-content:after,
body[data-bs-theme="dark"] .rtl-popover-right .popover-content:after {
    border-right: 17px solid #262525;
}

body[data-bs-theme="dark"] .popover-left .popover-content:after,
body[data-bs-theme="dark"] .rtl-popover-left .popover-content:after {
    border-left: 17px solid #262525;
}
/* testimonials */
body[data-bs-theme="dark"] .pio-testimonials .card {
    background: var(-\-bs-white);
}

body[data-bs-theme="dark"] .custom-swiper-button-prev,
body[data-bs-theme="dark"] .custom-swiper-button-next {
    color: #fff;
    background-color: rgba(0,0,0,20%);
}
/* hero/background image sections */
body[data-bs-theme="dark"] .pio-background-img {
    color: var(-\-bs-white);
}
    /* NO OVERLAY OVERRIDE HERE, DELIBERATELY.
       The base rule in style.css already serves both themes:

           linear-gradient(to var(--rotate-directional),
               rgba(var(--color-value), 1)   20%,
               rgba(var(--color-value), 0.9) 45%,
               rgba(var(--color-value), 0)   65%)

       --color-value is 255,255,255 in light and 0,0,0 here, so one rule
       produces a white scrim on one theme and a black one on the other,
       with identical stop positions - which means identical coverage, for
       free and permanently.

       This file used to override it with a softer, longer black gradient,
       on the reasoning that black reads heavier than white at the same
       opacity. It does, slightly - but the cost was that the dark hero
       covered visibly less of its image than the light one, and side by
       side the two themes looked like different designs rather than the
       same design in two colours.

       If the black ever does need to be lighter than the white, change the
       STOPS here rather than reaching for a whole new gradient, and change
       only the opacities - the 20/45/65 positions are what keep the two
       themes covering the same area. */

body[data-bs-theme="dark"] .inquiry-label {
    color: #fff;
    font-weight: 900;
}
/* forgot password link */
body[data-bs-theme="dark"] .pio-forgot-link {
    color: var(-\-bs-body-color, #ccc) !important;
}
/* ======================================================================
   7. TRAINING LIBRARY
   ====================================================================== */
body[data-bs-theme="dark"] .tl-card {
    background: #111111;
    border: 0 solid #000;
}
/* ======================================================================
   8. FOOTER & STATISTICS
   ====================================================================== */
body[data-bs-theme="dark"] .footer {
    background-color: #111111;
    color: #fff;
}

body[data-bs-theme="dark"] .pio-footer-items ul a,
body[data-bs-theme="dark"] .footer-icons a,
body[data-bs-theme="dark"] .footer-text a,
body[data-bs-theme="dark"] .pio-rights {
    color: #fff !important;
}

    body[data-bs-theme="dark"] .pio-footer-items ul a:hover,
    body[data-bs-theme="dark"] .footer-icons a:hover {
        color: var(-\-pio-primary-color);
    }
/* Clients marquee (B2B only): sits flush on the page rather than as a
   lighter band across it - the logos already carry their own contrast. */

body[data-bs-theme="dark"] .b2b-our-clients {
    background: linear-gradient(180deg, #111111 50%, #00000000 100%);
}


body[data-bs-theme="dark"] .pio-slide-show {
    background: #00000000;
}

body[data-bs-theme="dark"] .about-features-section {
    color: var(-\-text-color);
}

body[data-bs-theme="dark"] .pio-statistics-about {
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

    body[data-bs-theme="dark"] .pio-statistics-about span {
        color: #fff !important;
    }
/* AboutUsV2 hero: the video fades into the page behind the stat cards, so
   the colour it fades TO is the page colour - white above, black here.
   style.css owns the gradient itself; only the end colour moves. */
body[data-bs-theme="dark"] .pio-about-hero {
    -\-pio-about-hero-fade: #000;
}
/* Our History panel: a white veil lifts the photo on a white page, but on a
   black one it is the one bright rectangle in the section. Same idea, other
   direction - the panel darkens the photo instead. Its text is #fff in both
   themes (it sits on a photo, not on the page), so only the veil moves. */
body[data-bs-theme="dark"] .pio-about-history {
    -\-pio-about-panel-veil: rgba(0,0,0,.45);
    -\-pio-about-panel-edge: rgba(255,255,255,.08);
}

body[data-bs-theme="dark"] .header-hero {
    -\-pio-hero-keyline: rgba(255,255,255,.5);
}

    body[data-bs-theme="dark"] .pio-statistics-about .primary-color {
        color: var(-\-pio-blue-color) !important;
    }
/* ======================================================================
   9. BENTO CARDS
   Product/inner pages: bento cards stay WHITE even in dark mode,
   so all their text is forced back to the light-theme colors.
   ====================================================================== */
body[data-bs-theme="dark"] .bento-card {
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.03);
    border-radius: 0.5rem;
    overflow: hidden;
    color: #212529 !important;
    position: relative;
}

body[data-bs-theme="dark"] .bento-card-header {
    background-color: #fff !important;
    border-bottom: 1px solid #f2f2f2 !important;
    padding: 0.75rem 1.25rem 0.75rem;
    font-weight: 500;
    color: #212529 !important;
}

    body[data-bs-theme="dark"] .bento-card-header span {
        color: #212529 !important;
    }

body[data-bs-theme="dark"] .bento-card-body {
    background-color: #fff !important;
    color: #212529 !important;
}

body[data-bs-theme="dark"] .bento-card-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.0635rem, calc(0.9978rem + 0.2802vw), 1.25rem);
    color: #212529 !important;
}

body[data-bs-theme="dark"] .bento-card-text,
body[data-bs-theme="dark"] .bento-card p,
body[data-bs-theme="dark"] .bento-card li,
body[data-bs-theme="dark"] .bento-card h6,
body[data-bs-theme="dark"] .bento-card span {
    color: #212529 !important;
}

body[data-bs-theme="dark"] .bento-card .btn-pio-primary span,
body[data-bs-theme="dark"] .bento-card .btn-pio-primary a,
body[data-bs-theme="dark"] .bento-card .btn-pio-primary p,
body[data-bs-theme="dark"] .bento-card .btn-pio-primary h6,
body[data-bs-theme="dark"] .bento-card .btn-pio-primary li {
    color: #fff !important;
}

body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary span,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary a,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary p,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary h6,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary li {
    color: var(-\-pio-primary-color) !important;
}
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary:hover span,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary:hover a,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary:hover p,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary:hover h6,
body[data-bs-theme="dark"] .bento-card .btn-pio-outline-primary:hover li {
    color: #fff !important;
}
/* ======================================================================
   9b. CART
   ====================================================================== */
body[data-bs-theme="dark"] .selected-courses-page .selected-course-remove i,
body[data-bs-theme="dark"] .selected-course-remove .fa-trash-can {
    color: #fff !important;
    opacity: 1 !important;
}
/* ======================================================================
   9c. NAVBAR LOGGED-IN USER CHIP + USER MENU
   (the cart popup INVERTS against the page theme like the buy/login
   modals - its two-way rules live in style.css; the user menu follows
   the page theme, so its dark side lives here)
   ====================================================================== */
body[data-bs-theme="dark"] .pio-user-name {
    color: #fff;
}

body[data-bs-theme="dark"] .user-menu-name,
body[data-bs-theme="dark"] .user-menu-item,
body[data-bs-theme="dark"] .user-menu-account-name {
    color: #fff;
}

body[data-bs-theme="dark"] .user-menu-email,
body[data-bs-theme="dark"] .user-menu-section {
    color: #9aa0a6;
}

body[data-bs-theme="dark"] .user-menu-divider {
    border-color: rgba(255, 255, 255, .12);
}

body[data-bs-theme="dark"] .user-menu-item:hover {
    background: rgba(255, 255, 255, .07);
}

body[data-bs-theme="dark"] .user-menu-item.is-current {
    background: color-mix(in srgb, var(-\-pio-blue-color) 16%, transparent);
}

body[data-bs-theme="dark"] .user-menu-tile {
    background: color-mix(in srgb, var(-\-pio-blue-color) 45%, transparent);
}

body[data-bs-theme="dark"] .user-menu-item .user-menu-tile i {
    color: #fff;
}

body[data-bs-theme="dark"] .user-menu .user-menu-item.user-menu-signout {
    color: #ff6b7a;
}

body[data-bs-theme="dark"] .user-menu .user-menu-item.user-menu-signout:hover {
    background: rgba(255, 107, 122, .1);
}

body[data-bs-theme="dark"] .user-menu-signout .user-menu-tile {
    background: rgba(255, 107, 122, .14);
}

body[data-bs-theme="dark"] .user-menu-item.user-menu-signout .user-menu-tile i {
    color: #ff6b7a;
}

body[data-bs-theme="dark"] .user-menu-item.user-menu-signout:hover .user-menu-tile {
    background: #dc3545;
}

body[data-bs-theme="dark"] .user-menu-item.user-menu-signout:hover .user-menu-tile i {
    color: #fff;
}

body[data-bs-theme="dark"] .user-menu-logout {
    color: #ff6b7a;
    border-color: rgba(255, 107, 122, .4);
}

    body[data-bs-theme="dark"] .user-menu-logout:hover {
        background: #dc3545;
        color: #fff;
    }
/* ======================================================================
   USER ACCOUNT POPOVER (Inverted Dark Mode -> White)
   ====================================================================== */
body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    color: #212529 !important;
}

    body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover p {
        color: #212529 !important;
        border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    }

        body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover p span {
            color: #6c757d !important;
        }

    body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover ul {
        border-bottom-color: rgba(0, 0, 0, 0.1) !important;
    }

        body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover ul li a {
            color: #212529 !important;
        }

            body[data-bs-theme="dark"] .logged-in-user-anchors-holder .user-account-popover ul li a:hover {
                background-color: rgba(0, 0, 0, 0.04) !important;
            }
/* ======================================================================
   9b. DIPLOMA PLANS
   The plan cards stay WHITE like the bento cards they feed, so their
   text is forced back to the light-theme colors; only the section
   heading and hint sit on the dark page background.
   ====================================================================== */
body[data-bs-theme="dark"] .diploma-plans-title {
    color: #fff !important;
}

body[data-bs-theme="dark"] .diploma-plans-sub {
    color: rgba(255, 255, 255, 0.65) !important;
}

body[data-bs-theme="dark"] .diploma-plan-card {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

    body[data-bs-theme="dark"] .diploma-plan-card:hover:not(:disabled) {
        border-color: var(-\-pio-blue-color);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
    }

    body[data-bs-theme="dark"] .diploma-plan-card.is-active {
        border-color: var(-\-pio-blue-color);
        box-shadow: inset 0 0 0 2px var(-\-pio-blue-color), 0 10px 26px rgba(0, 0, 0, 0.6);
    }

body[data-bs-theme="dark"] .diploma-plan-name {
    color: #16232b !important;
}

body[data-bs-theme="dark"] .diploma-plan-meta,
body[data-bs-theme="dark"] .diploma-plan-desc {
    color: #6a7b85 !important;
}

body[data-bs-theme="dark"] .diploma-plan-price-was {
    color: #98a6ae !important;
}

body[data-bs-theme="dark"] .diploma-plan-price-now,
body[data-bs-theme="dark"] .diploma-plan-action {
    color: var(-\-pio-blue-color) !important;
}
/* ======================================================================
   10. RESPONSIVE DARK-THEME ADJUSTMENTS
   ====================================================================== */
/* NOTE - the hero overlay is deliberately NOT overridden for tablets here
   either, for the same reason as the desktop one above: both themes share
   responsive.css's rule from 1024px down, so both behave identically.

   Worth knowing about that shared rule, though it is not a dark-mode
   issue: it sets `background: rgba(var(--color-value)) !important`, and
   rgba() with three arguments is fully opaque. So between 768 and 1024 the
   overlay is a solid block and the photograph behind it is not visible at
   all - in EITHER theme. Below 768 it does not matter, because the view
   drops the image there anyway (ng-class bg-none, isSmallScreen is
   width < 768). Fixing that belongs in responsive.css where it would apply
   to both themes at once, not here where it would split them apart again. */

/* small screens / mobile */
@media (max-width: 991px) {
    body[data-bs-theme="dark"] .filtarationDropdownMobile {
        background: #393939;
    }

    body[data-bs-theme="dark"] .pio-statistics-about {
        background: var(-\-bs-white) !important;
    }

    body[data-bs-theme="dark"] .pio-statistics-sub span {
        color: var(-\-bs-black) !important;
    }
}

/* ==========================================================================
   12. INVERTED HEADER (navbar sitting on a hero that fights the theme)
   ==========================================================================
   The B2B hero is deliberately the OPPOSITE of the site theme:

        theme    .pio-b2b-header      .pio-parent-header (fixed, sits on it)
        light    #000 (>=768px only)  #fff   <- white bar on a black hero
        dark     #fff (all widths)    #000   <- black bar on a white hero

   Both readings are wrong, so the navbar takes the hero's palette instead of
   the body's for as long as it is over the hero. Add .pio-header-invert to
   #pio-navbar-sticky and it flips; remove it and the navbar is its normal self.
   The page toggles it on scroll (see the script at the bottom of B2B.cshtml) -
   a permanent flip would leave a black bar over white content further down.

   !important on the background because section 1 above sets
   .pio-parent-header { background: var(--body-background) !important }.
   The selectors here carry body[data-bs-theme=...] so they out-specify it
   whatever order the bundle happens to concatenate the files in.

   background-image, not the background shorthand, for the search icon: the
   shorthand would reset background-size, which style.css sets to 20px.
   ========================================================================== */

body[data-bs-theme="dark"] .pio-popular-tab {
    color: rgba(255, 255, 255, 0.6);
}

body[data-bs-theme="dark"] .pio-popular-tab:hover,
body[data-bs-theme="dark"] .pio-popular-tab:focus-visible {
    color: var(-\-pio-primary-color, #FFA000);
}

body[data-bs-theme="dark"] .pio-popular-tab.is-active,
body[data-bs-theme="dark"] .pio-popular-tab.is-active:hover,
body[data-bs-theme="dark"] .pio-explore-panel .pio-popular-tabs .pio-explore-tab.is-active,
body[data-bs-theme="dark"] .pio-explore-panel .pio-popular-tabs .pio-explore-tab.is-active:hover {
    color: #FFF;
}


/* Home schedule section - tiles design. style.css drives every colour in it
   from these variables, so dark mode only has to swap them. */
body[data-bs-theme="dark"] .pio-tiles-section {
    -\-pio-tiles-band-bg: #0b0b0b;
    -\-pio-tiles-card-bg: #161616;
    -\-pio-tiles-bar-bg: #1d2330;
    -\-pio-tiles-title: #fff;
    -\-pio-tiles-muted: #9097a3;
    -\-pio-tiles-sep: #3a3f4a;
}

/* Home schedule section - banner design. Same idea: style.css reads these. */
body[data-bs-theme="dark"] .pio-sbanner-section {
    -\-pio-sbanner-bg: #0b0b0b;
    -\-pio-sbanner-side-bg: #141414;
    -\-pio-sbanner-border: rgba(255, 255, 255, .1);
    /* Matches the site's dark cards: #000 with the pio-course-card dark border. */
    -\-pio-sbanner-card-bg: #000;
    -\-pio-sbanner-card-border: rgba(255, 255, 255, .08);
    -\-pio-sbanner-title: #fff;
    -\-pio-sbanner-text: rgba(255, 255, 255, .82);
    -\-pio-sbanner-muted: #9097a3;
    /* The active tab text goes white: the navy of the light theme is too dark on black. */
    -\-pio-sbanner-tab-active: #fff;
    -\-pio-sbanner-arrow-bg: #1d1d1d;
    -\-pio-sbanner-meta-icon: #7cc4f0;
    -\-pio-sbanner-chip-bg: rgba(255, 255, 255, .08);
    -\-pio-sbanner-chip-text: #fff;
}