﻿
.pio-course-card {
    overflow: hidden;
}
    .pio-course-card .pio-offer-badge {
        position: absolute;
        top: 12px;
        inset-inline-start: 12px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        width: auto;
        background: var(--pio-primary-color, #F5821F);
        color: #fff;
        font-weight: 700;
        font-size: .75rem;
        letter-spacing: .3px;
        line-height: 1;
        padding: 6px 11px;
        border-radius: 999px;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 8px rgba(0, 0, 0, .22);
        pointer-events: none;
        user-select: none;
    }

.pio-offers-grid {
    margin-inline: 0;
}

    .pio-offers-grid > [class*="col-"] {
        display: flex;
        justify-content: center;
    }

    .pio-offers-grid .pio-course-card {
        max-width: 300px;
        min-height: 428px;
    }


    .pio-offers-grid .card-title.two-lines {
        min-height: 2.4rem; 
    }

.pio-course-card .pio-offer-subject {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.25rem; 
}
.pio-offers-grid .card-text {
    min-height: 30px;
}

.pio-offers-search input.pio-btn-filter {
    text-align: start;
    cursor: text;
    user-select: text;
    padding-inline-end: 34px; 
}

    .pio-offers-search input.pio-btn-filter::placeholder {
        opacity: .55;
    }

.pio-offers-search {
    min-width: 200px;
}

.pio-offers-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none;
}

.pio-offers-pager {
    --pio-pager-color: var(--pio-primary-color, #F5821F);
}

    .pio-offers-pager .pio-pager-nav {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border: 1px solid var(--pio-pager-color);
        border-radius: 8px;
        background: transparent;
        color: var(--pio-pager-color);
        font-size: .875rem;
        line-height: 1.6;
        white-space: nowrap;
        transition: background-color .15s, color .15s;
    }

        .pio-offers-pager .pio-pager-nav:hover:not(:disabled) {
            background: var(--pio-pager-color);
            color: #fff;
        }

        .pio-offers-pager .pio-pager-nav:disabled {
            opacity: .4;
            cursor: default;
        }

body[dir="rtl"] .pio-offers-pager .pio-pager-nav i {
    transform: rotate(180deg);
}

.pio-offers-pager .pio-pager-num {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: .875rem;
    line-height: 1;
    transition: background-color .15s, color .15s;
}

    .pio-offers-pager .pio-pager-num:hover:not(.active) {
        background: rgba(245, 130, 31, .1);
    }

    .pio-offers-pager .pio-pager-num.active {
        background: var(--pio-pager-color);
        color: #fff;
        font-weight: 600;
    }

.pio-offers-pager .pio-pager-gap {
    padding: 0 2px;
    opacity: .6;
    user-select: none;
}

body[data-bs-theme="dark"] .pio-course-card .pio-offer-badge {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.pio-offers-busy .pio-hero-heading,
.pio-offers-busy .pio-offers-grid,
.pio-offers-busy .pio-offers-pager {
    opacity: .45;
    transition: opacity .15s ease;
}