.clickable {
    cursor: pointer; /* Makes it clickable */
    user-select: none; /* Prevents text selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Edge */
}

.mask-custom {
    backdrop-filter: blur(4px);
    background-color: rgba(255,0,0,0.3);
}

.filter-btn.active {
    background-color: #0d6efd;
    color: white;
}

/* Success */
.gif-container {
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-gif {
    width: 75%; /* Scales to 75% of parent div */
    height: auto; /* Maintains aspect ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center it */
}

@@keyframes fadeOut {
    from {
        opacity: 0; /* Fully visible */
    }

    to {
        opacity: 1; /* Fully transparent */
    }
}

.fade-out {
    animation: fadeOut 2s ease-in-out forwards; /* Adjust duration as needed */
}

.play-once {
    animation: fadeOutToHide 0s linear 6s forwards; /* Hides after 3 seconds */
}

@@keyframes fadeOutToHide {
    to {
        visibility: hidden;
        opacity: 0;
    }
}

/* fail */

.black-white-transparent {
    filter: grayscale(100%); /* Converts to black and white */
    opacity: 0.5; /* 50% transparency */
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 0;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Add horizontal scroll if needed */
    white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.3rem; /* Tighter spacing */
}

    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.3rem; /* Tighter spacing for slashes */
    }

@media (max-width: 576px) {
    .breadcrumb {
        font-size: 0.5rem; /* Smaller font on mobile */
    }
}

/* ================================
   Badge (Course & Lesson Items)
================================== */
.badge-block {
    width: 80px;
    text-align: center;
}

    .badge-block img {
        max-width: 48px;
        width: 100%;
        height: auto;
    }

    .badge-block .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        display: block;
        margin-top: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ================================
   Section Badge (Category Icon)
================================== */
.section-badge {
    max-width: 75px;
    width: 100%;
    height: auto;
}

/* Matches visual height of text */
.section-title {
    font-size: 1.25rem;
    white-space: nowrap;
    margin: 0;
}

/* ================================
   Section Header Alignment
================================== */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* ================================
   Responsive Adjustments
================================== */
@media (max-width: 576px) {
    .badge-block {
        width: 36px;
        margin: 0.2rem !important;
    }

        .badge-block img {
            max-width: 28px;
        }

        .badge-block .badge {
            font-size: 0.5rem;
            padding: 0.1rem 0.2rem;
        }

    .section-badge {
        max-width: 28px;
    }

    .section-title {
        font-size: 1rem;
    }
}


/* Quest Partial View */
#filter-buttons .btn {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

@media (max-width: 400px) {
    #filter-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Foldable items */
ul.nested {
    margin-left: 1.5rem;
    list-style-type: none;
}

.hidden {
    display: none;
}

.toggle-button {
    cursor: pointer;
    margin-right: 4px;
    background: none;
    border: none;
    font-weight: bold;
    font-size: 1rem;
}

    .toggle-button.open::after {
        content: "▼";
    }

    .toggle-button:not(.open)::after {
        content: "▶";
    }

ul.catalog-tree {
    list-style-type: none;
    padding-left: 0;
}

    ul.catalog-tree .nested {
        margin-left: 1.5rem;
    }