/* Course Finder */
.course-finder-page,
.course-detail-page,
.course-compare-page {
    --course-primary: #6d5fe3;
    --course-primary-dark: #5748cf;
    --course-amber: #f4a51c;
    --course-ink: #1f2937;
    --course-muted: #6b7280;
    --course-border: #e8eaf1;
    --course-soft: #f7f7fc;
    color: var(--course-ink);
    font-size: 14px;
    padding-bottom: 100px
}

.course-finder-page button,
.course-finder-page input,
.course-finder-page select,
.course-detail-page button,
.course-compare-page button,
.course-compare-page input {
    font-size: inherit
}

.course-hero {
    background: linear-gradient(118deg, #1786df 0%, #367ee2 48%, #6c62e2 100%);
    border-radius: 18px;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    box-shadow: 0 14px 32px rgba(46, 105, 207, .2);
    margin-bottom: 20px
}

.course-hero-copy,
.course-hero-tools,
.course-toolbar-actions,
.course-hero-copy>div:first-child {
    display: flex;
    align-items: center
}

.course-hero-copy {
    gap: 16px
}

.course-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    justify-content: center;
    font-size: 30px
}

.course-hero h1 {
    font-size: 25px;
    color: #fff;
    margin: 0 0 3px;
    font-weight: 750
}

.course-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .82)
}

.course-hero-tools {
    gap: 10px
}

.course-search {
    height: 46px;
    width: min(360px, 33vw);
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 0 10px 0 15px;
    color: #8a94a6
}

.course-search input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    padding: 0 10px;
    color: #273142
}

.course-search button {
    border: 0;
    background: transparent;
    color: var(--course-primary);
    font-size: 19px
}

.course-icon-button {
    width: 42px;
    height: 42px;
    border: 1px solid var(--course-border);
    border-radius: 10px;
    background: #fff;
    color: #5e6472;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none
}

.course-hero .course-icon-button {
    height: 46px;
    width: 46px;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    color: #fff
}

.course-icon-button:hover,
.course-icon-button.active {
    background: #f0eefe;
    color: var(--course-primary);
    border-color: #cfc9ff
}

.course-export-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px
}

.course-filter-card {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(27, 39, 78, .045);
    margin-bottom: 22px
}

.course-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) auto auto;
    gap: 11px
}

.course-filter-input,
.course-control {
    height: 42px;
    border: 1px solid #dfe2ea;
    background: #fff;
    border-radius: 9px;
    padding: 0 12px;
    color: #4b5563;
    outline: 0;
    width: 100%
}

.course-filter-input:focus,
.course-control:focus,
.course-advanced-filters input:focus {
    border-color: var(--course-primary);
    box-shadow: 0 0 0 3px rgba(109, 95, 227, .1)
}

.course-multi-select .course-filter-input {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.course-multi-menu {
    min-width: 220px;
    padding: 10px;
    max-height: 310px;
    overflow: auto
}

.course-multi-menu label {
    display: block;
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer
}

.course-multi-menu label:hover {
    background: #f6f5ff
}

.course-multi-title {
    display: flex;
    justify-content: space-between;
    padding: 5px 6px 9px;
    border-bottom: 1px solid var(--course-border);
    margin-bottom: 4px
}

.course-multi-title button {
    border: 0;
    background: none;
    color: var(--course-primary)
}

.course-filter-button,
.course-amber-button {
    background: var(--course-amber) !important;
    color: #fff !important;
    border: 1px solid var(--course-amber) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap
}

.course-filter-button:hover,
.course-amber-button:hover {
    background: #de920e !important
}

.course-reset-button {
    background: #fff !important;
    color: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center
}

.course-advanced-filters {
    border-top: 1px solid var(--course-border);
    margin-top: 16px;
    padding-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}

.course-advanced-heading {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.course-advanced-heading strong,
.course-advanced-heading span {
    display: block
}

.course-advanced-heading span {
    font-size: 12px;
    color: var(--course-muted);
    margin-top: 2px
}

.course-advanced-heading>svg {
    font-size: 24px;
    color: var(--course-primary)
}

.course-advanced-filters label span {
    display: block;
    font-size: 12px;
    color: var(--course-muted);
    margin-bottom: 5px
}

.course-advanced-filters input {
    width: 100%;
    height: 39px;
    border: 1px solid #dfe2ea;
    border-radius: 8px;
    padding: 0 10px;
    outline: 0
}

.course-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.course-results-toolbar h2 {
    font-size: 18px;
    margin: 0 0 2px
}

.course-results-toolbar p {
    margin: 0;
    color: var(--course-muted);
    font-size: 12px
}

.course-toolbar-actions {
    gap: 9px
}

.course-toolbar-actions .course-control {
    width: auto;
    min-width: 170px
}

.course-save-search {
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--course-primary);
    display: flex;
    align-items: center;
    gap: 5px
}

.course-view-toggle {
    display: flex;
    border: 1px solid var(--course-border);
    border-radius: 9px;
    padding: 3px;
    background: #fff
}

.course-view-toggle button {
    width: 35px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8a92a3;
    font-size: 18px
}

.course-view-toggle button.active {
    background: var(--course-primary);
    color: #fff
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.course-card {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 15px;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(21, 30, 62, .055);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: .2s
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(34, 43, 81, .1);
    border-color: #d9d4ff
}

.course-card-topline {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px
}

.course-select-check {
    margin: 0;
    display: inline-flex;
    cursor: pointer
}

.course-select-check input {
    position: absolute;
    opacity: 0
}

.course-select-check span {
    display: block;
    width: 19px;
    height: 19px;
    border: 1.5px solid #cdd2dc;
    border-radius: 5px;
    background: #fff;
    position: relative
}

.course-select-check input:checked+span {
    background: var(--course-primary);
    border-color: var(--course-primary)
}

.course-select-check input:checked+span:after {
    content: "";
    position: absolute;
    width: 9px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    left: 4px;
    top: 4px
}

.course-compare-toggle {
    border: 0;
    background: #f4f2ff;
    color: var(--course-primary);
    border-radius: 20px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px !important
}

.course-compare-toggle.active {
    background: var(--course-primary);
    color: #fff
}

.course-bookmark {
    margin-left: auto;
    color: #98a0ae;
    font-size: 20px
}

.course-tags {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0
}

.course-level-badge {
    display: inline-block;
    background: #ebe9ff;
    color: #5d50d4;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap
}

.course-location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--course-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.course-title {
    font-weight: 750;
    font-size: 16px;
    line-height: 1.35;
    color: #232a38;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 43px
}

.course-title:hover {
    color: var(--course-primary)
}

.course-university {
    display: block;
    color: var(--course-muted);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0 12px
}

.course-meta-line {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4f5867;
    font-size: 12px;
    margin: 4px 0
}

.course-meta-line svg {
    color: var(--course-primary);
    font-size: 16px
}

.course-intakes {
    margin: 10px 0
}

.course-intakes>strong {
    display: block;
    font-size: 12px;
    margin-bottom: 7px
}

.course-intake-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.course-intake-pills span {
    background: #fff8e7;
    color: #b77609;
    border: 1px solid #f6dda9;
    border-radius: 18px;
    padding: 4px 7px;
    font-size: 10px;
    white-space: nowrap
}

.course-fees {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 10px;
    background: #f8f8fc;
    border: 1px solid #ececf3;
    margin: 13px 0;
    overflow: hidden
}

.course-fees>div {
    padding: 10px
}

.course-fees>div+div {
    border-left: 1px solid #e4e5ec
}

.course-fees span,
.course-fees strong {
    display: block
}

.course-fees span {
    color: var(--course-muted);
    font-size: 10px;
    margin-bottom: 3px
}

.course-fees strong {
    font-size: 12px;
    color: #303745
}

.course-card-actions {
    margin-top: auto;
    display: grid;
    gap: 7px
}

.course-card-actions .btn,
.course-detail-actions .btn,
.course-compare-actions-row .btn {
    height: 39px;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.course-details-link {
    text-align: center;
    color: var(--course-primary);
    font-size: 12px;
    font-weight: 650;
    text-decoration: none
}

.course-suggest-button {
    background: #fff !important;
    color: #db8d08 !important;
    border: 1px solid #e8a42c !important
}

.course-suggest-button:hover {
    background: #fff8e8 !important
}

.course-preference-button,
.course-primary-button {
    background: var(--course-primary) !important;
    color: #fff !important;
    border: 1px solid var(--course-primary) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px
}

.course-preference-button:hover,
.course-primary-button:hover {
    background: var(--course-primary-dark) !important
}

.course-outline-button {
    background: #fff !important;
    color: var(--course-primary) !important;
    border: 1px solid var(--course-primary) !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center
}

.course-cancel-button {
    border: 1px solid var(--course-border) !important
}

.course-results-list {
    display: grid;
    gap: 11px
}

.course-list-row {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 13px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 20px 52px minmax(220px, 1.25fr) minmax(360px, 1.65fr) minmax(220px, .9fr) 118px;
    gap: 16px;
    align-items: center;
    min-height: 126px;
    overflow: visible;
    box-shadow: 0 5px 18px rgba(21, 30, 62, .04)
}

.course-list-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e9f5ff, #eeeaff);
    color: var(--course-primary);
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center
}

.course-list-identity {
    min-width: 0
}

.course-list-identity .course-tags {
    margin: 0 0 5px
}

.course-list-identity .course-title {
    font-size: 14px;
    min-height: auto;
    -webkit-line-clamp: 1
}

.course-list-identity .course-university {
    margin: 3px 0 0
}

.course-list-facts {
    display: grid;
    grid-template-columns: minmax(90px, .75fr) minmax(150px, 1.25fr) minmax(110px, 1fr);
    gap: 14px;
    min-width: 0;
    align-items: start
}

.course-list-facts>div {
    display: flex;
    gap: 7px;
    min-width: 0;
    font-size: 11px;
    overflow: hidden
}

.course-list-facts>div>span {
    min-width: 0;
    overflow-wrap: anywhere
}

.course-list-facts>div>svg {
    color: var(--course-primary);
    font-size: 17px;
    margin-top: 2px
}

.course-list-facts small,
.course-list-facts span {
    display: block
}

.course-list-facts small {
    color: var(--course-muted);
    margin-bottom: 3px
}

.course-list-facts .course-intake-pills {
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 48px
}

.course-fees-horizontal {
    margin: 0;
    min-width: 0
}

.course-fees-horizontal>div {
    min-width: 0
}

.course-fees-horizontal strong {
    overflow-wrap: anywhere
}

.course-list-actions,
.course-table-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

.course-list-actions .course-icon-button,
.course-table-actions .course-icon-button {
    width: 35px;
    height: 35px;
    font-size: 17px
}

.course-table-wrap,
.course-comparison-wrap {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 13px;
    overflow: auto
}

.course-table {
    margin: 0;
    min-width: 1200px
}

.course-table th {
    background: #f7f7fb;
    font-size: 11px;
    color: #596273;
    white-space: nowrap
}

.course-table td {
    font-size: 11px;
    vertical-align: middle
}

.course-table td>a {
    color: #272f3d;
    text-decoration: none;
    display: block;
    max-width: 260px
}

.course-table td small {
    display: block;
    color: var(--course-muted);
    margin-top: 3px
}

.course-table .course-intake-pills {
    max-width: 180px
}

.course-state {
    background: #fff;
    border: 1px dashed #d8d9e6;
    border-radius: 16px;
    text-align: center;
    padding: 70px 20px
}

.course-state>svg {
    font-size: 46px;
    color: var(--course-primary)
}

.course-state h3 {
    font-size: 19px;
    margin: 13px 0 4px
}

.course-state p {
    color: var(--course-muted);
    margin-bottom: 18px
}

.course-skeleton {
    pointer-events: none;
    animation: coursePulse 1.4s infinite
}

.course-skeleton span {
    display: block;
    height: 18px;
    background: #eceef4;
    border-radius: 6px;
    margin: 8px 0
}

.course-skeleton span:nth-child(2) {
    width: 55%
}

.course-skeleton span:nth-child(3) {
    height: 45px
}

.course-skeleton span:nth-child(4) {
    width: 70%
}

.course-skeleton span:nth-child(5) {
    height: 70px
}

.course-skeleton span:nth-child(6) {
    height: 42px
}

@keyframes coursePulse {
    50% {
        opacity: .55
    }
}

.course-pagination {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 12px;
    margin-top: 18px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    color: var(--course-muted);
    font-size: 12px
}

.course-pagination>div:first-child {
    justify-self: start
}

.course-pagination>strong {
    justify-self: end
}

.course-pagination select {
    border: 1px solid var(--course-border);
    border-radius: 6px;
    padding: 4px
}

.course-page-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.course-page-buttons button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: #f0f1f5;
    color: #4b5563
}

.course-page-buttons button.active {
    background: var(--course-primary);
    color: #fff
}

.course-page-buttons button:disabled {
    opacity: .4
}

.course-pagination strong {
    color: var(--course-primary)
}

.course-compare-bar {
    position: fixed;
    z-index: 1040;
    bottom: 20px;
    left: calc(50% + 110px);
    transform: translateX(-50%);
    width: min(900px, calc(100vw - 280px));
    background: #242138;
    color: #fff;
    border-radius: 15px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 16px 50px rgba(15, 13, 29, .3)
}

.course-compare-summary {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap
}

.course-compare-summary span,
.course-compare-summary strong {
    display: block
}

.course-compare-summary span {
    font-size: 10px;
    color: #c6c2d9
}

.course-compare-icon {
    width: 38px;
    height: 38px;
    background: var(--course-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px
}

.course-compare-chips {
    display: flex;
    gap: 6px;
    flex: 1;
    overflow: hidden
}

.course-compare-chips button {
    border: 1px solid #514c6e;
    background: #34304a;
    color: #ddd9ed;
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    white-space: nowrap
}

.course-compare-bar .course-primary-button {
    white-space: nowrap
}

.course-bulk-bar {
    position: fixed;
    z-index: 1039;
    bottom: 92px;
    left: calc(50% + 110px);
    transform: translateX(-50%);
    width: min(960px, calc(100vw - 280px));
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #dcd8ff;
    border-radius: 13px;
    box-shadow: 0 12px 40px rgba(48, 38, 118, .16);
    display: flex;
    align-items: center;
    gap: 9px
}

.course-bulk-bar>div:first-child {
    margin-right: auto
}

.course-bulk-bar>div:first-child strong {
    margin-right: 7px
}

.course-bulk-bar>div:first-child button {
    border: 0;
    background: transparent;
    color: var(--course-primary)
}

.course-bulk-bar>button {
    height: 37px;
    border: 0;
    background: #f5f3ff;
    color: var(--course-primary);
    border-radius: 8px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 5px
}

.course-bulk-bar .course-outline-button {
    height: 37px
}

.course-action-modal {
    border: 0;
    border-radius: 15px
}

.course-action-modal .modal-header,
.course-action-modal .modal-footer {
    border-color: var(--course-border)
}

.course-action-modal .modal-title {
    font-size: 18px
}

.course-modal-summary {
    background: #f7f7fb;
    border-radius: 10px;
    padding: 11px;
    margin-bottom: 16px
}

.course-modal-summary>div {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 8px;
    padding: 5px
}

.course-modal-summary span {
    color: var(--course-muted);
    font-size: 11px
}

.course-modal-summary strong {
    font-size: 12px
}

.course-form-field {
    display: block;
    margin-top: 12px
}

.course-form-field>span {
    display: block;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: 5px
}

.course-form-field select {
    width: 100%;
    height: 43px;
    border: 1px solid #dfe2ea;
    border-radius: 8px;
    padding: 0 10px
}

.course-action-modal .modal-footer .btn {
    display: flex;
    gap: 6px;
    align-items: center
}

/* Course detail */
.course-detail-hero {
    background: linear-gradient(120deg, #147fdc, #6d5fe3);
    color: #fff;
    border-radius: 18px;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px
}

.course-detail-hero h1 {
    color: #fff;
    font-size: 28px;
    max-width: 800px;
    margin: 12px 0 6px
}

.course-detail-hero a {
    color: #fff;
    font-weight: 650;
    text-decoration: none
}

.course-detail-hero p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, .82)
}

.course-detail-hero-actions {
    display: flex;
    gap: 9px
}

.course-glass-button,
.course-detail-hero .course-outline-button {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    display: flex;
    align-items: center;
    gap: 7px
}

.course-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px
}

.course-detail-layout main {
    display: grid;
    gap: 16px
}

.course-detail-layout aside {
    display: grid;
    align-content: start;
    gap: 16px
}

.course-detail-card {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(30, 38, 70, .045)
}

.course-section-title {
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--course-border);
    padding-bottom: 14px;
    margin-bottom: 17px
}

.course-section-title>svg {
    font-size: 25px;
    color: var(--course-primary)
}

.course-section-title h2,
.course-detail-card h2 {
    font-size: 16px;
    margin: 0 0 2px
}

.course-section-title p {
    font-size: 11px;
    color: var(--course-muted);
    margin: 0
}

.course-detail-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.course-detail-field {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f8fc;
    border-radius: 10px;
    padding: 12px
}

.course-detail-field>svg {
    color: var(--course-primary);
    font-size: 22px
}

.course-detail-field span,
.course-detail-field strong {
    display: block
}

.course-detail-field span {
    font-size: 10px;
    color: var(--course-muted)
}

.course-detail-field strong {
    font-size: 13px;
    margin-top: 2px
}

.course-intake-timeline {
    display: flex;
    gap: 8px;
    margin-top: 17px;
    overflow: auto
}

.course-intake-timeline>div {
    min-width: 130px;
    padding: 11px;
    border: 1px solid var(--course-border);
    border-radius: 9px
}

.course-intake-timeline span {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ece9ff;
    color: var(--course-primary);
    font-size: 10px
}

.course-intake-timeline strong,
.course-intake-timeline small {
    display: block;
    margin-top: 6px
}

.course-intake-timeline small {
    color: var(--course-muted);
    font-size: 9px
}

.course-requirement {
    display: flex;
    gap: 10px;
    padding: 12px;
    background: #f8f8fc;
    border-radius: 10px;
    margin-top: 9px
}

.course-requirement>svg {
    color: var(--course-primary);
    font-size: 21px
}

.course-requirement span,
.course-requirement strong {
    display: block
}

.course-requirement span {
    color: var(--course-muted);
    font-size: 10px
}

.course-requirement strong {
    font-size: 13px;
    margin-top: 3px
}

.course-empty-copy {
    color: var(--course-muted);
    margin: 0
}

.course-related-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f1ff;
    color: var(--course-primary);
    font-weight: 650;
    text-decoration: none;
    padding: 13px;
    border-radius: 9px
}

.course-fee-detail>div {
    padding: 15px 0;
    border-bottom: 1px solid var(--course-border)
}

.course-fee-detail span,
.course-fee-detail strong,
.course-fee-detail small {
    display: block
}

.course-fee-detail span {
    font-size: 11px;
    color: var(--course-muted)
}

.course-fee-detail strong {
    font-size: 20px;
    margin: 2px 0
}

.course-fee-detail small {
    color: var(--course-muted);
    font-size: 10px
}

.course-fee-detail>p {
    font-size: 10px;
    color: var(--course-muted);
    display: flex;
    gap: 5px;
    margin: 12px 0 0
}

.course-detail-actions {
    display: grid;
    gap: 8px
}

.course-record-info p {
    display: flex;
    justify-content: space-between;
    margin: 12px 0
}

.course-record-info span {
    color: var(--course-muted);
    font-size: 11px
}

.course-record-info strong {
    font-size: 11px
}

.course-detail-loading {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    animation: coursePulse 1.4s infinite
}

.course-detail-loading span {
    height: 60px;
    background: #eceef4;
    border-radius: 10px;
    margin: 12px;
    display: block
}

/* Comparison */
.course-compare-header {
    background: #fff;
    border: 1px solid var(--course-border);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px
}

.course-compare-header>div {
    display: flex;
    align-items: center;
    gap: 11px
}

.course-compare-header>div:first-child>span {
    width: 46px;
    height: 46px;
    background: #eeecff;
    color: var(--course-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px
}

.course-compare-header h1 {
    font-size: 21px;
    margin: 0
}

.course-compare-header p {
    margin: 3px 0 0;
    color: var(--course-muted);
    font-size: 11px
}

.course-add-compare {
    height: 40px;
    display: flex;
    border: 1px solid var(--course-border);
    border-radius: 9px;
    position: relative;
    overflow: visible;
    background: #fff
}

.course-add-compare input {
    width: 140px;
    border: 0;
    outline: 0;
    padding: 0 10px
}

.course-compare-suggestions {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    padding: 6px;
    border: 1px solid var(--course-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(26, 31, 55, .16)
}

.course-compare-suggestions button {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 8px;
    text-align: left
}

.course-compare-suggestions button:hover {
    background: #f5f3ff
}

.course-compare-suggestions strong,
.course-compare-suggestions span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.course-compare-suggestions strong {
    font-size: 11px;
    color: var(--course-ink)
}

.course-compare-suggestions span {
    margin-top: 2px;
    font-size: 9px;
    color: var(--course-muted)
}

.course-compare-header .course-outline-button {
    height: 40px
}

.course-comparison-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px;
    width: 100%
}

.course-comparison-table th,
.course-comparison-table td {
    border-right: 1px solid var(--course-border);
    border-bottom: 1px solid var(--course-border);
    padding: 13px;
    vertical-align: top
}

.course-comparison-table th:last-child,
.course-comparison-table td:last-child {
    border-right: 0
}

.course-comparison-table thead th {
    min-width: 220px;
    background: #fafafe;
    position: relative
}

.course-comparison-table thead th:first-child {
    min-width: 175px
}

.course-compare-cap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eceaff;
    color: var(--course-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 10px
}

.course-comparison-table thead a,
.course-comparison-table thead small,
.course-comparison-table thead em {
    display: block
}

.course-comparison-table thead a {
    font-size: 13px;
    font-weight: 750;
    color: #29303d;
    text-decoration: none
}

.course-comparison-table thead small {
    font-size: 10px;
    color: var(--course-muted);
    margin: 5px 0
}

.course-comparison-table thead em {
    font-size: 9px;
    font-style: normal;
    color: var(--course-primary)
}

.course-remove-compare {
    position: absolute;
    right: 9px;
    top: 9px;
    border: 0;
    background: transparent;
    color: #9aa1ae;
    font-size: 18px
}

.course-comparison-table tbody th {
    font-size: 11px;
    background: #fafafe
}

.course-comparison-table tbody th>span {
    display: block;
    width: max-content;
    margin-top: 5px;
    background: #fff1d6;
    color: #b36f00;
    font-size: 8px;
    padding: 2px 5px;
    border-radius: 10px
}

.course-comparison-table tbody td {
    font-size: 11px
}

.course-different-cell>span {
    font-weight: 650
}

.course-lowest-fee {
    background: #edfdf3 !important;
    color: #12733a
}

.course-best-value {
    display: block;
    width: max-content;
    background: #c9f2d8;
    color: #12733a;
    border-radius: 10px;
    padding: 3px 6px;
    margin-bottom: 5px
}

.course-compare-actions-row td {
    display: grid;
    gap: 7px
}

.course-compare-actions-row a {
    text-align: center;
    color: var(--course-primary);
    font-size: 10px;
    text-decoration: none
}

@media(max-width:1399px) {
    .course-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .course-list-row {
        grid-template-columns: 20px 48px minmax(200px, 1.2fr) minmax(300px, 1.5fr) 112px
    }

    .course-list-row>.course-fees {
        display: none
    }

    .course-filter-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .course-filter-button,
    .course-reset-button {
        grid-column: auto
    }

    .course-compare-bar,
    .course-bulk-bar {
        left: calc(50% + 70px);
        width: min(900px, calc(100vw - 190px))
    }
}

@media(max-width:991px) {

    .course-hero,
    .course-results-toolbar,
    .course-compare-header {
        align-items: stretch;
        flex-direction: column
    }

    .course-search {
        width: 100%;
        flex: 1
    }

    .course-filter-row {
        grid-template-columns: repeat(2, 1fr)
    }

    .course-advanced-filters {
        grid-template-columns: repeat(2, 1fr)
    }

    .course-toolbar-actions {
        flex-wrap: wrap
    }

    .course-list-row {
        grid-template-columns: auto auto 1fr auto
    }

    .course-list-facts {
        grid-column: 3/5
    }

    .course-compare-bar,
    .course-bulk-bar {
        left: 50%;
        width: calc(100vw - 30px)
    }

    .course-compare-chips {
        display: none
    }

    .course-detail-layout {
        grid-template-columns: 1fr
    }

    .course-detail-layout aside {
        grid-template-columns: repeat(2, 1fr)
    }

    .course-record-info {
        grid-column: 1/-1
    }
}

@media(max-width:767px) {

    .course-finder-page,
    .course-detail-page,
    .course-compare-page {
        font-size: 13px
    }

    .course-hero,
    .course-detail-hero {
        padding: 20px;
        border-radius: 14px
    }

    .course-hero-tools,
    .course-detail-hero {
        flex-direction: column
    }

    .course-grid {
        grid-template-columns: 1fr
    }

    .course-filter-row,
    .course-advanced-filters {
        grid-template-columns: 1fr
    }

    .course-results-toolbar {
        align-items: flex-start
    }

    .course-toolbar-actions {
        width: 100%
    }

    .course-toolbar-actions .course-control {
        flex: 1;
        min-width: 140px
    }

    .course-save-search {
        display: none
    }

    .course-list-row {
        grid-template-columns: auto 1fr auto;
        padding: 12px
    }

    .course-list-icon {
        display: none
    }

    .course-list-facts {
        grid-column: 2/4;
        grid-template-columns: repeat(2, 1fr)
    }

    .course-list-facts>div:last-child {
        display: none
    }

    .course-list-row>.course-fees {
        display: none
    }

    .course-pagination {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px
    }

    .course-pagination>strong {
        display: none
    }

    .course-bulk-bar {
        bottom: 92px;
        overflow: auto
    }

    .course-bulk-bar>button:nth-of-type(1),
    .course-bulk-bar>button:nth-of-type(2) {
        font-size: 0
    }

    .course-bulk-bar>button svg {
        font-size: 18px
    }

    .course-compare-bar {
        bottom: 15px
    }

    .course-compare-summary {
        margin-right: auto
    }

    .course-compare-bar .course-primary-button {
        font-size: 11px
    }

    .course-detail-hero-actions {
        flex-wrap: wrap
    }

    .course-detail-fields,
    .course-detail-layout aside {
        grid-template-columns: 1fr
    }

    .course-detail-layout aside .course-record-info {
        grid-column: auto
    }

    .course-compare-header>div:last-child {
        flex-wrap: wrap
    }

    .course-add-compare {
        flex: 1
    }

    .course-add-compare input {
        width: 100%
    }
}