/* Events Pills Styling */
.events-pills {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.events-pills .nav-item {
    margin-right: 10px;
    margin-bottom: 10px;
}

.events-pills .nav-link {
    border-radius: 4px;
    padding: 10px 20px;
    color: #111330;
    background: rgba(239, 87, 68, 0.1);
    transition: all 0.3s ease;
    font-weight: 600;
    border: none;
}

.events-pills .nav-link.active {
    color: #ffffff;
    background: #ef5744;
    border: none;
}

.events-pills .nav-link:hover:not(.active) {
    color: #ef5744;
    background: rgba(239, 87, 68, 0.2);
    border: none;
}

/* Events Accordion Styling */
.events-accordion .accordion-item {
    border: none;
    border-bottom: 1px solid rgba(17, 19, 48, 0.1);
    margin-bottom: 0;
    background: transparent;
}

.events-accordion .accordion-item:last-child {
    border-bottom: none;
}

.events-accordion .accordion-button {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    color: #111330;
    font-weight: 500;
    position: relative;
}

.events-accordion .accordion-button:not(.collapsed) {
    color: #ef5744;
    background: transparent;
    box-shadow: none;
}

.events-accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
}

.events-accordion .accordion-button::after {
    display: none;
}

/* Toggle icon styles for events accordion */
.events-accordion .accordion-button {
    padding-right: 40px; /* Make space for the toggle icon */
}

.events-accordion .accordion-button::after {
    display: none; /* Hide the default bootstrap icon */
}

.events-accordion .toggle-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #111330;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.events-accordion .toggle-icon::before {
    content: "+";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.events-accordion .accordion-button:not(.collapsed) .toggle-icon {
    background-color: #ef5744;
}

.events-accordion .accordion-button:not(.collapsed) .toggle-icon::before {
    content: "−";
}

/* Animation for accordions */
.events-accordion .accordion-collapse {
    transition: all 0.3s ease-in-out;
}

.events-accordion .accordion-body {
    padding: 0 0 20px 0;
}

/* Make sure events section doesn't break original FAQ styling */
#eventsCategoryPills, #eventsCategoryPillsContent {
    font-family: inherit;
}

/* Ensure mobile responsiveness */
@media (max-width: 767px) {
    .events-pills .nav-item {
        margin-bottom: 8px;
    }
    
    .events-pills .nav-link {
        padding: 8px 15px;
        font-size: 14px;
    }
}