:root {
    --pui-primary: #1363df;
    --pui-primary-bright: #4d9fff;
    --pui-accent-grad: linear-gradient(135deg, #2b7bff 0%, #6d5efc 100%);
    --pui-radius: 18px;
    --pui-radius-pill: 999px;
    --pui-ease: cubic-bezier(.22, 1, .36, 1);
    --pui-dur: .38s;
    --pui-card-bg: #ffffff;
    --pui-card-border: rgba(8, 42, 94, .08);
    --pui-card-border-hover: rgba(19, 99, 223, .4);
    --pui-shadow: 0 6px 24px -12px rgba(8, 42, 94, .25);
    --pui-shadow-hover: 0 22px 48px -18px rgba(19, 99, 223, .38);
    --pui-avatar-ring: #ffffff;
}
body.dark-mode {
    --pui-card-bg: #2b313b;
    --pui-card-border: rgba(255, 255, 255, .07);
    --pui-card-border-hover: rgba(77, 159, 255, .55);
    --pui-shadow: 0 8px 30px -14px rgba(0, 0, 0, .7);
    --pui-shadow-hover: 0 26px 60px -20px rgba(0, 0, 0, .85);
    --pui-avatar-ring: #2b313b;
}

/* Grid gutters (columns are handled by the row-cols-* classes) */
.courses__grid-wrap { --bs-gutter-y: 1.75rem; }

/* ---------------------------------------------------------------------
   Page head + top filter bar (replaces the sidebar so the grid is full width)
   --------------------------------------------------------------------- */
.courses-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}
.courses-head__title { margin: 0; }

.courses-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 32px;
    border-radius: var(--pui-radius);
    border: 1px solid var(--pui-card-border);
    background: var(--pui-card-bg);
    box-shadow: var(--pui-shadow);
}
.courses-filterbar__filters { display: flex; flex-wrap: wrap; gap: 10px; }

/* Dropdown filter */
.pui-dd { position: relative; }
.pui-dd__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--pui-radius-pill);
    border: 1px solid var(--pui-card-border);
    background: transparent;
    color: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--pui-dur) var(--pui-ease), background-color var(--pui-dur) var(--pui-ease);
}
.pui-dd__btn:hover,
.pui-dd.open .pui-dd__btn {
    border-color: var(--pui-primary-bright);
    background: rgba(19, 99, 223, .06);
}
.pui-dd__btn .chev { transition: transform var(--pui-dur) var(--pui-ease); opacity: .8; }
.pui-dd.open .pui-dd__btn .chev { transform: rotate(180deg); }

.pui-dd__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 30;
    min-width: 230px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--pui-card-border);
    background: var(--pui-card-bg);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--pui-dur) var(--pui-ease),
                transform var(--pui-dur) var(--pui-ease),
                visibility var(--pui-dur) var(--pui-ease);
}
.pui-dd.open .pui-dd__panel { opacity: 1; visibility: visible; transform: none; }
.pui-dd__panel--scroll { max-height: 300px; overflow-y: auto; }
.pui-dd__panel .list-wrap { margin: 0; padding: 0; list-style: none; }
.pui-dd__panel .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 4px;
    margin: 0;
}
.pui-dd__panel .form-check-input {
    accent-color: var(--pui-primary);
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.pui-dd__panel .form-check-label { cursor: pointer; white-space: nowrap; transition: color var(--pui-dur) var(--pui-ease); }
.pui-dd__panel .form-check:hover .form-check-label { color: var(--pui-primary-bright); }

.courses-filterbar__order #order,
.courses-filterbar__order .orderby {
    border-radius: var(--pui-radius-pill) !important;
    border: 1px solid var(--pui-card-border) !important;
    background: transparent !important;
    padding: 10px 18px !important;
    font-weight: 600;
    min-width: 210px;
    cursor: pointer;
    color: inherit;
    transition: border-color var(--pui-dur) var(--pui-ease);
}
.courses-filterbar__order #order:focus { border-color: var(--pui-primary-bright) !important; outline: none; }

/* Dark mode: filter text should be white */
body.dark-mode .pui-dd__btn,
body.dark-mode .courses-filterbar__order #order,
body.dark-mode .courses-filterbar__order .orderby,
body.dark-mode .pui-dd__panel .form-check-label { color: #fff; }
body.dark-mode .courses-filterbar__order #order option { color: #000; }

@media (max-width: 767px) {
    .courses-filterbar { flex-direction: column; align-items: stretch; }
    .courses-filterbar__order #order { width: 100%; }
}

/* ---------------------------------------------------------------------
   Course card
   --------------------------------------------------------------------- */
.courses__item-two {
    height: 100%;
    margin: 0;
    border-radius: var(--pui-radius) !important;
    border: 1px solid var(--pui-card-border);
    box-shadow: var(--pui-shadow);
    overflow: hidden;
    transition: transform var(--pui-dur) var(--pui-ease),
                box-shadow var(--pui-dur) var(--pui-ease),
                border-color var(--pui-dur) var(--pui-ease);
}
.courses__item-two:hover {
    transform: translateY(-8px);
    box-shadow: var(--pui-shadow-hover);
    border-color: var(--pui-card-border-hover);
}

/* Thumbnail — overflow lives on the link so the zoom is clipped but the
   overlapping teacher avatar (a sibling) is NOT clipped. */
.courses__item-two-thumb { position: relative; }
.courses__item-two-thumb > .shine__animate-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* uniform, not-too-tall thumbnails */
}
.courses__item-two-thumb > .shine__animate-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pui-ease);
}
.courses__item-two:hover .courses__item-two-thumb > .shine__animate-link img { transform: scale(1.06); }

/* Teacher avatar ring */
.courses__item-two-thumb .author img {
    border: 3px solid var(--pui-avatar-ring);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}

/* Content */
.courses__item-two-content .title a { transition: color var(--pui-dur) var(--pui-ease); }
.courses__item-two:hover .courses__item-two-content .title a { color: var(--pui-primary-bright); }
.courses__item-two .courses__item-tag { border-radius: var(--pui-radius-pill) !important; }
body.dark-mode .courses__item-two .course-price,
body.dark-mode .courses__item-two .price .course-price { color: var(--pui-primary-bright); }

/* Discount / presell badges (rendered by the component) */
.pui-course-badges {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}
.pui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--pui-radius-pill);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55);
}
.pui-badge i { font-size: 12px; }
.pui-badge--off {
    background: linear-gradient(135deg, #ff5a5a 0%, #ff2e2e 100%);
    box-shadow: 0 8px 18px -8px rgba(255, 46, 46, .65);
    animation: pui-badge-pulse 2.4s var(--pui-ease) infinite;
}
.pui-badge--soon {
    background: linear-gradient(135deg, #fd7e14 0%, #fab123 100%);
    color: #3a2500;
    box-shadow: 0 8px 18px -8px rgba(250, 177, 35, .6);
}
@keyframes pui-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */
.all-courses-area .pagination { gap: 6px; flex-wrap: wrap; margin-top: 15px; }
.all-courses-area .pagination .page-link {
    border-radius: 12px !important;
    border: 1px solid var(--pui-card-border) !important;
    color: var(--pui-primary-bright) !important;
    transition: background-color var(--pui-dur) var(--pui-ease), color var(--pui-dur) var(--pui-ease);
}
body.dark-mode .all-courses-area .pagination .page-link { background: transparent; }
.all-courses-area .pagination .page-item.active .page-link {
    background-image: var(--pui-accent-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .courses__item-two,
    .courses__item-two-thumb > .shine__animate-link img,
    .pui-badge--off { transition: none !important; animation: none !important; }
}