

.country-list {
    padding: 8px;
    background-color: var(--country-list-background-color);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-group-item {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* General styling for the accordion */
.accordion-item {
    border: 0px;
}

.accordion-button {
    font-weight: bold;
    background-color: var(--accordion-button-background);
    color: var(--accordion-button-text-color);
    border-bottom: 1px solid var(--accordion-button-border-color);
    transition: all 0.3s ease;
}

.accordion-button::after {
    color: #a5da15;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>");
}

/* Hover effect for the accordion header */
.accordion-button:hover {
    background-color: var(--accordion-button-hover-background-color);
    color: var(--country-text-hover);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Active (selected/open) accordion header */
.accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
    color: var(--accordion-button-selected-text-color);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.accordion-button:focus {
    border-color: #86b6fe00;
}

/* Styling for the accordion body */
.accordion-body {
    background-color: var(--accordion-body-background-color);
    color: var(--accordion-body-text-color);
    border-top: 1px solid var(--accordion-body-border-color);
    padding: 15px;
}

/* Optional: Customize the list inside the accordion */
.list-group-item {
    font-size: 0.95rem;
    color: #444;
    transition: all 0.3s ease;
}

/* Hover effect for list items */
.list-group-item:hover {
    background-color: var(--list-group-item-hover-background-color);
    color: var(--list-group-item-hover-text-color);
    cursor: pointer;
}

/* Selected/active list item */
.list-group-item.active {
    background-color: var(--list-group-item-active-background-color);
    color: var(--list-group-item-active-text-color);
}