/* Keep the course badge anchored to its thumbnail in Tutor and Elementor. */
.tutor-course-card .tutor-course-thumbnail {
    position: relative;
}

.tutor-course-thumbnail > .gn-course-free-badge {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 4px;
    background: #542c5e;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .07em;
    text-transform: uppercase;
    box-shadow: 0 2px 7px rgb(45 24 50 / 15%);
    pointer-events: none;
}

/* Primary buttons: normal, hover, focus, active and visited use the same brand colours. */
body .tutor-btn.tutor-btn-primary,
body .tutor-btn.tutor-btn-primary:is(:hover, :focus, :focus-visible, :active, :visited),
body .btn-primary,
body .btn-primary:is(:hover, :focus, :focus-visible, :active, :visited),
body .button-primary,
body .button-primary:is(:hover, :focus, :focus-visible, :active, :visited),
body .gn-button-primary,
body .gn-button-primary:is(:hover, :focus, :focus-visible, :active, :visited),
body .elementor-element.elementor-element-7a24753 .elementor-button.elementor-button-link,
body .elementor-element.elementor-element-7a24753 .elementor-button.elementor-button-link:is(:hover, :focus, :focus-visible, :active, :visited) {
    background: #542c5e !important;
    background-color: #542c5e !important;
    border-color: #542c5e !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body .tutor-btn.tutor-btn-primary :is(span, i),
body .btn-primary :is(span, i),
body .button-primary :is(span, i),
body .gn-button-primary :is(span, i),
body .elementor-element.elementor-element-7a24753 .elementor-button.elementor-button-link :is(span, i) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.gn-course-filter-panel {
    position: relative;
    z-index: 2;
    margin: 0 0 28px;
    padding: 0 0 22px;
    border-bottom: 1px solid #e9e1eb;
    font-family: inherit;
}

.gn-course-filter-panel[hidden],
.etlms-course-list-col[data-gn-course-categories][hidden] {
    display: none !important;
}

.gn-course-filter-panel .gn-course-filter-label {
    margin: 0 0 14px;
    color: #38233d;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
}

.gn-course-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

body .gn-course-filter-panel .gn-course-filter-button {
    appearance: none;
    min-height: 42px;
    margin: 0;
    padding: 9px 17px;
    border: 1px solid #d8c9dc;
    border-radius: 24px;
    background: #fff;
    color: #542c5e;
    -webkit-text-fill-color: #542c5e;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

body .gn-course-filter-panel .gn-course-filter-button:hover {
    border-color: #542c5e;
    background: #f5eff6;
}

body .gn-course-filter-panel .gn-course-filter-button[aria-pressed="true"] {
    border-color: #542c5e;
    background: #542c5e;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

body .gn-course-filter-panel .gn-course-filter-button:focus-visible {
    outline: 2px solid #542c5e;
    outline-offset: 3px;
}

.gn-course-filter-panel .gn-course-filter-status {
    margin: 13px 0 0;
    color: #746778;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .gn-course-filter-options {
        gap: 8px;
    }

    body .gn-course-filter-panel .gn-course-filter-button {
        min-height: 44px;
        padding: 9px 14px;
    }
}