/* Accordions */
.accordion_trafficloop .accordion {
    all: unset; /* Resets all inherited styles */
    background-color: #fff; /* Background color for the accordion */
    border-bottom: solid 1px #444; /* Adds a bottom border */
    color: #000; /* Text color */
    cursor: pointer; /* Changes the cursor to pointer on hover */
    padding: 18px; /* Padding for spacing */
    margin: 0 auto; /* Centers the accordion horizontally */
    width: 100%; /* Full width */
    max-width: 500px; /* Maximum width */
    text-align: left; /* Aligns text to the left */
    font-size: 17px; /* Font size */
    font-weight: bold; /* Font weight */
    outline: none; /* Removes outline */
    transition: 0.4s; /* Smooth transition for hover effects */
}

.accordion_trafficloop .active {
    background-color: #fff; /* Background color for active accordion */
}

.accordion_trafficloop .accordion:hover {
    background-color: #f0f0f0; /* Lighter background on hover */
}

.accordion_trafficloop .panel {
    margin: 12px auto; /* Adds vertical margin and centers horizontally */
    padding: 0 18px; /* Adds horizontal padding */
    background-color: white; /* Background color for the panel */
    max-height: 0; /* Initially hidden */
    max-width: 500px; /* Maximum width for the panel */
    text-align: left; /* Aligns text to the left */
    overflow: hidden; /* Hides overflowing content */
    transition: max-height 0.2s ease-out; /* Smooth transition for expanding/collapsing */
}

.accordion_trafficloop .panel ul {
    margin-left: 0; /* Removes left margin */
    margin-right: 0; /* Removes right margin */
    margin-top: 10px; /* Adds top margin */
}

.accordion_trafficloop .panel li {
    list-style-type: none; /* Removes default list styling */
    font-size: 17px; /* Font size for list items */
}

.accordion_trafficloop .panel a:hover {
    text-decoration: underline; /* Underlines links on hover */
}

.accordion_trafficloop .panel li::before {
    content: "\1F4CC "; /* Adds a pin emoji before list items */
}

.accordion_trafficloop .panel p {
    text-align: center; /* Centers the text */
    font-weight: bold; /* Bold font for text */
    text-decoration: underline; /* Underlines the text */
}

.accordion_trafficloop .accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px; /* Font size for the plus icon */
    color: #000; /* Color for the plus icon */
    float: right; /* Aligns the icon to the right */
    margin-left: 5px; /* Adds space between the text and icon */
}

.accordion_trafficloop .accordion.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/* End Accordions */

/* Media query for screens 768px and wider */
@media screen and (min-width: 768px) {
    .accordion_trafficloop .accordion {
        max-width: 80% !important; /* Adjusts accordion width for larger screens */
    }
    .accordion_trafficloop .panel {
        max-width: 80% !important; /* Adjusts panel width for larger screens */
    }
    .accordion_trafficloop .column-list {
        column-count: 2; /* Splits the list into 2 columns */
        column-gap: 20px; /* Adds spacing between columns */
        list-style: none; /* Removes default list styling */
        padding: 0; /* Removes padding */
    }
    .accordion_trafficloop div.panel {
        /* max-height: 100%; Uncomment this to make panel fully visible */
    }
}

/* Media query for screens 900px and wider */
@media screen and (min-width: 900px) {
    .accordion_trafficloop .column-list {
        column-count: 3; /* Splits the list into 3 columns */
    }
}