/* Full Width Header */
.full-width-header {
    background: var(--red);
    padding: 50px 0;
    color: #fff;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.header-titles h1 {
    font-weight: 800;
    font-size: 2.5rem;
    margin: 5px 0 0 0;
    line-height: 1.1;
}

.breadcrumbs {
    font-size: 0.85rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
}

.breadcrumbs a:hover {
    opacity: 0.8;
}

.header-search {
    position: relative;
    width: 100%;
    max-width: 300px;
}

.header-search input {
    width: 100%;
    padding: 10px 15px;
    border-radius: 4px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding-right: 40px;
    font-family: inherit;
}

.header-search input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.header-search button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* Layout & Sidebar */
.courses-section {
    padding: 60px 0;
    background: #fff;
}

.courses-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.sidebar {
    width: 280px;
    flex-shrink: 0;
}

.content-area {
    flex-grow: 1;
    width: 100%;
    /* Ensure grid works */
}

/* Reset Filters Button */
.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.btn-reset {
    font-size: 0.85rem;
    color: var(--red);
    text-decoration: underline;
    cursor: pointer;
}

.btn-reset:hover {
    text-decoration: none;
    color: var(--primary);
}

.filter-group {
    margin-bottom: 30px;
}

.filter-group h5 {
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-list li {
    margin-bottom: 12px;
}

.custom-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}

.custom-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #ddd;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    flex-shrink: 0;
    transition: 0.2s;
}

.custom-radio input[type="radio"]:checked {
    border-color: var(--red);
}

.custom-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--red);
    border-radius: 50%;
}

.custom-radio span {
    color: #555;
    font-size: 0.95rem;
}

.custom-radio:hover span {
    color: var(--red);
}

/* Content & Grid */
/* Active Filters Bar */
.active-filters-bar {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.filters-label i {
    color: var(--red, #c8102e);
}

.filter-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.filter-badge:hover {
    border-color: var(--red, #c8102e);
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.1);
}

.filter-badge .badge-label {
    color: #6c757d;
    font-weight: 600;
}

.filter-badge .badge-value {
    color: #212529;
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-badge .badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #dc3545;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.filter-badge .badge-remove:hover {
    background: #c82333;
    transform: rotate(90deg);
}

.filter-badge .badge-remove i {
    font-size: 0.7rem;
}

.clear-all-filters {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--red, #c8102e);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.clear-all-filters:hover {
    background: rgba(200, 16, 46, 0.1);
    transform: translateX(2px);
}

.clear-all-filters i {
    font-size: 1rem;
}

.results-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.results-meta p {
    color: #999;
    font-size: 0.9rem;
}

.courses-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.course-card-modern {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
}

.course-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.card-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.course-card-modern:hover .card-img img {
    transform: scale(1.05);
}

.card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.course-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.course-title a {
    color: var(--primary);
    text-decoration: none;
}

.course-title a:hover {
    color: var(--red);
}

.course-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    flex: 1;
    margin-bottom: 20px;
}

.course-footer {
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.course-footer img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.inst-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.7rem;
}

.course-footer span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    /* Allow text to truncate if too long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}

/* View Details Button */
.btn-view-course {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: margin-right 0.2s;
}

.btn-view-course:hover {
    margin-right: -3px;
    /* Subtle movement effect */
}

.pagination-area {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* Custom Pagination Styling */
.pagination-area .pagination,
.pagination-area nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 8px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-area .page-item,
.pagination-area nav li {
    display: inline-block;
    list-style: none;
}

.pagination-area .page-link,
.pagination-area nav a,
.pagination-area nav span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 15px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Hide the "Showing X to Y of Z results" and pagination navigation wrapper text/elements */
.pagination-area nav div:first-child {
    display: none;
}

.pagination-area nav div:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Specific fix for Tailwind-style pagination generated by Laravel */
.pagination-area nav div div p {
    display: none;
}

/* Style for active page */
.pagination-area .page-item.active .page-link,
.pagination-area nav li.active span,
.pagination-area nav li[aria-current="page"] span,
.pagination-area nav span.aria-current {
    background: var(--red) !important;
    border-color: var(--red) !important;
    color: #fff !important;
}

.pagination-area .page-link:hover:not(.disabled),
.pagination-area nav a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.pagination-area .page-item.disabled .page-link,
.pagination-area nav li.disabled span,
.pagination-area nav span[aria-disabled="true"] {
    background: #f8f9fa;
    color: #ccc;
    cursor: not-allowed;
    border-color: #eee;
}

/* Ensure icons/text inside pagination are styled */
.pagination-area nav svg {
    width: 20px;
    height: 20px;
}

/* For mobile responsiveness */
@media (max-width: 576px) {
    .pagination-area .page-link,
    .pagination-area nav a,
    .pagination-area nav span {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.85rem;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .courses-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        margin-bottom: 30px;
    }

    .sidebar-wrapper {
        display: flex;
        gap: 30px;
        overflow-x: auto;
        padding-bottom: 15px;
        /* Increase padding for scrollbar */
        -webkit-overflow-scrolling: touch;
        /* Scroll Hint Shadow */
        background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
            linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-attachment: local, local, scroll, scroll;
    }

    .filter-group {
        min-width: 200px;
        flex-shrink: 0;
        /* Important for horizontal scrolling */
    }

    .courses-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .courses-grid-modern {
        grid-template-columns: 1fr;
    }

    .header-search {
        max-width: 100%;
    }

    .sidebar-wrapper {
        flex-direction: column;
        /* Revert to column on very small screens if easier, but horizontal is often better for filters */
        /* Keeping horizontal scroll for consistency with general mobile pattern or stack them?
            Original said "flex-direction: column" on 576px.
            Let's keep it column for very small screens if that was the original intent for better readability,
            OR keep it horizontal. The user asked for better UX. Stacking them on mobile might take too much vertical space.
            I will switch to horizontal scrolling for 576px as well to save vertical space,
            but for now I will respect the original media query direction unless I see a strong reason to change.
            Actually, the original CSS had .sidebar-wrapper { flex-direction: column } at max-width: 576px.
            I will keep that to avoid breaking the layout unexpectedy, but add a visual divider.
         */
        flex-direction: column;
        overflow-x: visible;
        background: none;
        /* Remove scroll hints */
    }

    .filter-group {
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .filter-group:last-child {
        border-bottom: none;
    }
}