.tw-collapse.tw-collapse {
    visibility: visible
}
.tw-collapse {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-rows: 1fr auto;
    border-bottom: 1px solid;
    padding: 10px;
    cursor: pointer;
}
.tw-collapse-title,.tw-collapse>input[type=checkbox],.tw-collapse-content {
    grid-column-start: 1;
    grid-row-start: 1
}
.tw-collapse>input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
    cursor: pointer;
}
.tw-collapse-content {
    grid-row-start: 2;
    overflow: hidden;
    max-height: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: default;
    transition: padding .2s ease-in-out,background-color .2s ease-in-out
}
.tw-collapse-content p {
    padding: 30px;
}
.tw-collapse-open .tw-collapse-content,.tw-collapse:focus:not(.tw-collapse-close) .tw-collapse-content,.tw-collapse:not(.tw-collapse-close) input[type=checkbox]:checked~.tw-collapse-content {
    max-height: none
}
.tw-collapse-plus .tw-collapse-title:after {
    position: absolute;
    display: block;
    height: .5rem;
    width: .5rem;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    top: .9rem;
    right: 1.4rem;
    content: "+";
    pointer-events: none
}
.tw-collapse-open.tw-collapse-plus .tw-collapse-title:after,.tw-collapse-plus:focus:not(.tw-collapse-close) .tw-collapse-title:after,.tw-collapse-plus:not(.tw-collapse-close) input[type=checkbox]:checked~.tw-collapse-title:after {
    content: "\2212"
}
main .comment {
   display: block;
}

/* --- Category filters on one line under the search --- */
div.search-courses-communities {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    max-width: 900px !important;   /* room for the 3 labels; remove to keep 700px */
}
/* status tabs and search box stay full-width on their own rows */
div.search-courses-communities > .status-filters,
div.search-courses-communities > form {
    flex: 0 0 100%;
    width: 100%;
}
/* the 3 category dropdowns share the row equally, and stack on mobile */
div.search-courses-communities > .categories-filter,
div.search-courses-communities > .secondary-categories-filter,
div.search-courses-communities > .tertiary-categories-filter {
    flex: 1 1 200px;
    min-width: 0;
}
div.search-courses-communities > div > select {
    width: 100%;
}

/* --- Tabs above the search: My courses / Favorites / Catalog --- */
div.status-filters {
    gap: 10px !important;   /* space between the three tabs */
}

@media (min-width: 1024px) {
    div.status-filters {
        gap: 40px !important;   /* space between the three tabs */
    }
}

div.status-filters .status-filter-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    text-transform: none !important;   /* no more ALL CAPS */
    letter-spacing: normal !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2e2a39 !important;         /* same as the section headlines */
    opacity: .7;                       /* set to 1 for identical weight/color */
    padding: 2px 0 8px !important;
    height: auto !important;
    min-height: 0 !important;
    transition: opacity .2s ease, border-color .2s ease;
}

div.status-filters .status-filter-btn:hover {
    opacity: 1;
    background: transparent !important;
}

/* active tab: teal underline instead of the filled pill */
div.status-filters .status-filter-btn.active {
    opacity: 1;
    border-bottom-color: #5fd3cb !important;
}

/* icons after the labels */
div.status-filters .status-filter-favorites::after,
div.status-filters .status-filter-all::after {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* gold star on Favorites */
div.status-filters .status-filter-favorites::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6b21b'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E");
}

/* eye on Catalog */
div.status-filters .status-filter-all::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e2a39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* --- Hide the "My Courses" headline (communities headline kept) --- */
h1.courses-title {
    display: none !important;
}

/* --- Category badge on the top-left of course cards --- */
a.tw-card[data-category] {
    position: relative;
}
a.tw-card[data-category]:not([data-category=""])::before {
    content: attr(data-category);
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}