.pio-sched2-page {
    -\-pio-sched2-media: 34%;
    -\-pio-sched2-radius: 10px;
    -\-pio-sched2-card-bg: #fff;
    -\-pio-sched2-card-border: rgba(0, 0, 0, .10);
    -\-pio-sched2-price-old: #9AA3AD;
}

body[data-bs-theme="dark"] .pio-sched2-page {
    -\-pio-sched2-card-bg: #111;
    -\-pio-sched2-card-border: rgba(255, 255, 255, .08);
}

/* ---------- hero ---------- */

.pio-sched2-hero {
    -\-pio-legal-hero-bg: #0a1525;
    -\-pio-legal-hero-tint: #152847;
    background: linear-gradient(135deg, var(-\-pio-legal-hero-tint) 0%, rgba(21, 40, 71, 0) 45%), var(-\-pio-legal-hero-bg);
    color: #fff;
    padding: 76px 0 var(-\-pio-inner-hero-pad-bottom);
}

/* "THE SCHEDULE", preceded by the short rule from the design. */
.pio-sched2-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}

.pio-sched2-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 58px;
    height: 2px;
    background: currentColor;
}

.pio-sched2-hero-title {
    margin: 0 0 18px;
    font-size: clamp(1.9rem, calc(1.2rem + 2.2vw), 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(-\-pio-primary-color, #F5821F);
}

.pio-sched2-hero-text {
    max-width: 620px;
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
}

/* ---------- filter strip ----------
   The strip and its controls are deliberately NOT restyled here: they keep
   the site's shared look from style.css (the same bar the product/subject
   search page uses), so every filter bar on the site matches. The only
   addition is breathing room between the strip and the first row of cards. */

.pio-sched2-page .pio-filter-bar {
    margin-bottom: 1.75rem;
}

.pio-sched2-page .pio-clear-filters {
    justify-content: center;
    flex: 0 0 auto;
    gap: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-start: 0.15rem;
    padding: 0;
    border: 1px solid rgba(215, 38, 61, 0.3);
    border-radius: 50%;
    background: rgba(215, 38, 61, 0.07);
    color: #D7263D;
    font-size: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .pio-sched2-page .pio-clear-filters svg {
        display: none;
    }

    .pio-sched2-page .pio-clear-filters::before {
        content: "";
        display: block;
        width: 0.82rem;
        height: 0.82rem;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='scale(0.78)' d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3Cpath transform='translate(283,240) scale(0.66)' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='scale(0.78)' d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3Cpath transform='translate(283,240) scale(0.66)' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .pio-sched2-page .pio-clear-filters:hover,
    .pio-sched2-page .pio-clear-filters:focus-visible {
        background: #D7263D;
        border-color: #D7263D;
        color: #fff;
        box-shadow: 0 5px 14px rgba(215, 38, 61, 0.26);
        text-decoration: none;
    }

body[data-bs-theme="dark"] .pio-sched2-page .pio-clear-filters {
    border-color: rgba(255, 107, 126, 0.34);
    background: rgba(255, 107, 126, 0.12);
    color: #FF6B7E;
}

    body[data-bs-theme="dark"] .pio-sched2-page .pio-clear-filters:hover,
    body[data-bs-theme="dark"] .pio-sched2-page .pio-clear-filters:focus-visible {
        background: #D7263D;
        border-color: #D7263D;
        color: #fff;
    }

/* ---------- grid ---------- */

.pio-sched2-grid {
    -\-bs-gutter-x: 1.5rem;
}

/* pio-schedules.css caps every grid card at 300px and centres it - the split
   card needs the full column width instead. */
.pio-sched2-grid > [class*="col-"] {
    justify-content: stretch;
}

.pio-sched2-grid .pio-course-card.pio-sched2-card {
    max-width: none;
}

/*
    The row is mx-0, so Bootstrap's half-gutter on every column would inset the
    outer cards from the container edge (and out of line with the filter strip
    above). Keep the gutter only BETWEEN cards: single column drops both sides;
    two per row drops the start side of the first card and the end side of the
    second. Logical sides, so the Arabic layout mirrors correctly. Each column
    keeps the same total padding, so both cards stay the same width.
*/
.pio-sched2-grid > [class*="col-"] {
    padding-inline: 0;
}

@media (min-width: 992px) {
    .pio-sched2-grid > [class*="col-"]:nth-child(odd) {
        padding-inline: 0 calc(var(-\-bs-gutter-x) * .5);
    }

    .pio-sched2-grid > [class*="col-"]:nth-child(even) {
        padding-inline: calc(var(-\-bs-gutter-x) * .5) 0;
    }
}

/* ---------- card shell ---------- */

.pio-sched2-card {
    /* Anchor for the format, offer and start-day tabs. */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(-\-pio-sched2-card-bg);
    border: 1px solid var(-\-pio-sched2-card-border) !important;
    border-radius: var(-\-pio-sched2-radius);
}

@media (prefers-reduced-motion: no-preference) {
    .pio-sched2-card {
        transition: box-shadow .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
    }

    .pio-sched2-card:hover,
    .pio-sched2-card:focus-within {
        transform: translateY(-2px);
        box-shadow: var(-\-pio-card-hover-shadow, 0 16px 38px rgba(16, 32, 43, .2));
    }
}

/* ---------- media panel ----------
   The design runs the photo edge to edge with no padding, cropped to fill. */

.pio-sched2-media {
    flex: 0 0 auto;
    background: rgba(0, 0, 0, .04);
    overflow: hidden;
}

body[data-bs-theme="dark"] .pio-sched2-media {
    background: rgba(255, 255, 255, .05);
}

.pio-sched2-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- body ---------- */

.pio-sched2-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.875rem 1.25rem 1.5625rem;
}

.pio-sched2-title-link {
    color: inherit;
}

.pio-sched2-title {
    margin-bottom: .625rem;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
    /* pio-course-card.css reserves two title lines via min-height; the split
       card is wider, so let a one-line title sit tight instead. */
    min-height: 0;
}

/* ---------- date / time meta ---------- */

/* Dates and time wrap by item. */
.pio-sched2-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
    min-width: 0;
    margin-bottom: .5rem;
}

.pio-sched2-meta-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    font-size: .75rem;
    line-height: 1.6;
    white-space: nowrap;
    opacity: .85;
}

.pio-sched2-meta-item:first-child {
    flex: 0 1 auto;
}

.pio-sched2-meta-item > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep the start-day tab beside the format and offer tabs at the card top. */
.pio-sched2-badges {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    max-width: calc(100% - 24px);
    height: 24px;
    pointer-events: none;
}

body[dir="rtl"] .pio-sched2-badges {
    flex-direction: row;
}

.pio-sched2-badges .pio-offer-price-banner {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 auto;
    max-width: none;
}

.pio-sched2-rel {
    position: relative;
    z-index: 2;
    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-blue-color);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* The design's third line shows the weekdays in the brand blue. */
.pio-sched2-days {
    margin-bottom: .5rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(-\-pio-blue-color, #055386);
    opacity: 1;
}

.pio-sched2-tags {
    margin-bottom: .5rem;
}

/* ---------- actions ----------
   Buttons and price always share one line, at every width - a wrapped row
   makes neighbouring cards disagree depending on price length. The price keeps
   its natural width; Details shrinks to fit whatever is left, and the group
   is capped so it does not balloon on the wide single-column card. */

.pio-sched2-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .625rem;
    margin-top: auto;
    padding-top: .5rem;
}

.pio-sched2-buttons {
    flex: 0 1 200px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .375rem;
}

.pio-sched2-details {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Details is the design's secondary: white face, grey hairline, dark label. */
.pio-sched2-details {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .22);
    color: inherit;
}

.pio-sched2-details:hover,
.pio-sched2-details:focus-visible {
    border-color: var(-\-pio-primary-color, #F5821F);
    color: var(-\-pio-primary-color, #F5821F);
}

body[data-bs-theme="dark"] .pio-sched2-details {
    border-color: rgba(255, 255, 255, .25);
}

/* The design's cart button: same height as Details, square. At rest it is a
   grey outline with a grey mark and no fill; hover (and "in cart") fills it
   with the accent. */
.pio-sched2-cart {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    align-self: center;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .22);
    color: #8A939C;
}

.pio-sched2-cart:hover,
.pio-sched2-cart:focus-visible,
.pio-sched2-cart.is-in {
    background: var(-\-pio-primary-color, #F5821F);
    border-color: var(-\-pio-primary-color, #F5821F);
    color: #fff;
}

body[data-bs-theme="dark"] .pio-sched2-cart {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #ADB5BD;
}

body[data-bs-theme="dark"] .pio-sched2-cart:hover,
body[data-bs-theme="dark"] .pio-sched2-cart:focus-visible,
body[data-bs-theme="dark"] .pio-sched2-cart.is-in {
    background: var(-\-pio-primary-color, #F5821F);
    border-color: var(-\-pio-primary-color, #F5821F);
    color: #fff;
}

.pio-sched2-price {
    flex: 0 0 auto;
    margin-inline-start: auto;
    white-space: nowrap;
    font-size: 1.25rem;
    font-weight: 700;
}

/* The currency comes from style.css's .price::after (attr(data-currency)) at
   near body size - the design sets it much smaller than the amount. */
.pio-sched2-price .price::after {
    margin-inline-start: 3px;
    font-size: .55em;
    font-weight: 600;
}

.pio-sched2-price sub.price {
    bottom: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(-\-pio-sched2-price-old);
}

/* ---------- >= 576px: card turns horizontal ---------- */

@media (min-width: 576px) {
    .pio-sched2-card {
        flex-direction: row;
        align-items: stretch;
    }

    .pio-sched2-media {
        flex: 0 0 var(-\-pio-sched2-media);
        max-width: var(-\-pio-sched2-media);
    }
}

/*
    992px - 1199px: two cards per row with the column at its narrowest, so the
    one-line action row needs the room back - a slimmer photo, tighter body
    padding and a slightly smaller price.
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pio-sched2-page {
        -\-pio-sched2-media: 30%;
    }

    .pio-sched2-body {
        padding-inline: 1rem;
    }

    .pio-sched2-details {
        padding: 0 6px;
        font-size: .75rem;
    }

    .pio-sched2-price {
        font-size: 1.125rem;
    }
}

/* ---------- < 576px: phones, card is stacked ---------- */

@media (max-width: 575.98px) {
    .pio-sched2-page .container {
        padding-inline: .75rem !important;
    }

    .pio-sched2-hero {
        padding: 48px 0 52px;
    }

    .pio-sched2-media {
        height: 170px;
    }

    .pio-sched2-body {
        padding: 1.3125rem 1.125rem 1.4375rem;
    }

    .pio-sched2-meta {
        gap: .5rem;
    }

    .pio-sched2-meta-item {
        font-size: .6875rem;
    }
}