/* Container */

.csfl-container {

    width: 100%;

    margin-bottom: 20px;

}



/* --- Accordion Styles --- */

.csfl-accordion {

    margin-bottom: 10px;

    border: 1px solid #e0e0e0;

    border-radius: 6px;

    overflow: hidden;

}



/* Base style for accordion titles */

.csfl-accordion-title {

    list-style: none;

    padding: 16px 20px;

    background-color: #f9f9f9;

    font-size: 18px;

    font-weight: bold;

    color: #333333; /* Default dark text */

    cursor: pointer;

    position: relative;

    display: block; 

    transition: background-color 0.2s ease, color 0.2s ease;

}



/* Remove default browser arrows */

.csfl-accordion-title::-webkit-details-marker {

    display: none;

}



/* Custom Accordion Arrow indicator */

.csfl-accordion-title::after {

    content: "▼";

    font-size: 12px;

    color: currentColor; /* Magic! Inherits the text color seamlessly */

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%) rotate(-90deg); /* Pointing right when closed */

    transition: transform 0.3s ease;

}



/* --- NEW: Hover and Active States for Accordion --- */

/* Hover State */

.csfl-accordion-title:hover {

    background-color: #f1f1f1;

    color: #03f8c5; /* Turns text & arrow highlight color on hover */

}



/* Open/Active State */

.csfl-accordion[open] > .csfl-accordion-title {

    color: #03f8c5; /* Turns text & arrow highlight color when open */

}



/* Arrow rotation when accordion is open */

.csfl-accordion[open] > .csfl-accordion-title::after {

    transform: translateY(-50%) rotate(0deg); /* Pointing down when open */

}



/* Content inside the accordion */

.csfl-accordion-content {

    padding: 10px 20px 20px 20px;

    background-color: #fff;

    border-top: 1px solid #e0e0e0;

}



/* Nested Accordions */

.csfl-accordion-content .csfl-accordion {

    border: none;

    border-bottom: 1px solid #e0e0e0;

    border-radius: 0;

    margin-bottom: 0;

}

.csfl-accordion-content .csfl-accordion-title {

    background-color: #fff;

    padding: 12px 0;

    font-size: 16px;

    font-weight: 600;

}

.csfl-accordion-content .csfl-accordion-title::after {

    right: 0;

}

.csfl-accordion-content .csfl-accordion-content {

    padding: 5px 0 15px 15px; 

    border-top: none;

}





/* --- File List Styles --- */

.csfl-file-list {

    list-style: none;

    padding-left: 0;

    margin: 0;

}



.csfl-file-item {

    border-bottom: 1px solid #e0e0e0; 

    padding: 12px 0; 

    position: relative;

    display: flex;

    align-items: center; 

}



.csfl-file-item:last-child {

    border-bottom: none;

}

.csfl-accordion-content .csfl-file-item {

    border-bottom: 1px dashed #eaeaea;

}

.csfl-accordion-content .csfl-file-item:last-child {

    border-bottom: none;

}



.csfl-file-item-link {

    text-decoration: none; 

    color: inherit; 

    display: flex; 

    align-items: center;

    width: 100%; 

}



.csfl-file-icon {

    width: 24px;

    height: 24px;

    margin-right: 16px; 

    flex-shrink: 0;

}



.csfl-file-name {

    color: #333333;

    font-size: 16px; 

    font-weight: normal; 

    transition: color 0.2s ease; 

}



/* Hover state for the actual file names */

.csfl-file-item-link:hover .csfl-file-name {

    color: #03f8c5; 

}