/* Container for the route list */
.route-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Unchanged: Space between each item */
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 0px; /* Added unit for consistency */
}

/* Each route item */
.route-item {
    display: flex;
    align-items: center;
    gap: 5px; /* Unchanged: Space between logo and link */
    background-color: var(--background-color-white); /* Replaced white with variable */
    border-bottom: 1px solid var(--color-primary); /* Replaced #28a745 with variable */
    border-radius: 0px; /* Unchanged: Rounded corners */
    padding: 5px; /* Unchanged */
}

/* RWGPS logo styling */
.route-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px; /* Unchanged: Square container for logo */
    height: 35px; /* Unchanged: Square container for logo */
    border: 1px solid var(--color-primary); /* Replaced #28a745 with variable */
    border-radius: 5px; /* Unchanged: Slightly rounded corners */
    background-color: var(--background-color-white); /* Replaced #ffffff with variable */
}

.route-logo img {
    max-width: 70%; /* Unchanged: Scale logo to fit */
    max-height: 70%;
}

/* Link styling */
.route-gpx {
    flex-grow: 1; /* Unchanged: Take up the remaining space */
    text-decoration: none; /* Unchanged: Remove underline */
    color: var(--color-success-dark); /* Replaced #28a745 with variable */
    padding: 5px; /* Unchanged */
    background-color: var(--background-color-light-grey); /* Replaced #f8f9fa with variable */
    border: 1px solid var(--color-success-dark); /* Replaced #28a745 with variable */
    border-radius: 5px; /* Unchanged: Slightly rounded corners */
}

/* Hover effects */
.route-item:hover {
    background-color: var(--background-color-hover); /* Replaced #f1f3f5 with variable */
}

.route-gpx:hover {
    text-decoration: underline; /* Unchanged: Add underline on hover */
}

.route-logo:hover {
    background-color: var(--background-color-logo-hover); /* Replaced #e8f5e9 with variable */
}