/* Locations list styling */
.locations {
    position: absolute;
    /* Use both top and bottom to lock container between 79% and 95% */
    top: 79%;
    bottom: 5.5%; /* Lock bottom edge above 95% line (100% - 95% = 5%, add 0.5% buffer) */
    left: 2%;
    color: white;
    /* Responsive font sizing using viewport units to prevent crossing lines */
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    font-family: var(--app-font-family, Arial, Helvetica, sans-serif);
    line-height: 1.4; /* Slightly reduced to fit more content */
    animation: fadeSlideUp 1s ease forwards;
    animation-delay: 1.7s;
    opacity: 0;
    text-align: left;
    /* Height is automatically constrained by top and bottom positioning */
    /* No need for max-height when using both top and bottom */
    overflow-y: auto;
    overflow-x: hidden;
    /* Ensure container itself doesn't extend beyond bounds */
    box-sizing: border-box;
}

/* Responsive adjustments for locations */
/* Always maintain the constraint: top and bottom positioning locks it between lines */
@media (max-height: 600px) {
    .locations {
        font-size: clamp(0.6rem, 0.8vw, 0.8rem);
        bottom: 6%; /* More buffer on smaller screens */
        line-height: 1.3;
    }
    
    .location-title {
        margin-bottom: 0.3rem;
    }
    
    .location {
        margin-bottom: 0.1rem;
    }
}

@media (max-height: 500px) {
    .locations {
        font-size: clamp(0.5rem, 0.7vw, 0.7rem);
        bottom: 6.5%; /* Even more buffer */
        line-height: 1.25;
    }
    
    .location-title {
        margin-bottom: 0.25rem;
    }
    
    .location {
        margin-bottom: 0.08rem;
    }
}

/* On very small viewports, reduce further */
@media (max-height: 400px) {
    .locations {
        font-size: clamp(0.45rem, 0.6vw, 0.6rem);
        bottom: 7%; /* Maximum buffer */
        line-height: 1.2;
    }
    
    .location-title {
        margin-bottom: 0.2rem;
    }
    
    .location {
        margin-bottom: 0.05rem;
    }
}

.location-title {
    color: white;
    margin-bottom: 0.4rem; /* Reduced margin */
    margin-top: 0;
}

.location {
    color: #808080;
    margin-bottom: 0.15rem; /* Reduced margin */
    margin-top: 0;
}

.location.current {
    color: white;
}