.info-panels-wrapper {
    background-color: var(--theme-bg);
    color: var(--theme-color);
    font-family: var(--font-family);
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.info-panels-layout-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.info-panels-content {
    flex: 1 1 0; /* Grow and shrink, but start from 0 height */
    overflow-y: auto;
    overflow-x: hidden; /* Disable native horizontal scrolling */
    min-height: 0; /* Allow content to shrink below natural size */
    /* Completely disable horizontal touch interactions */
    touch-action: pan-y;
    overscroll-behavior: none;
    /* Disable all native momentum scrolling */
    -webkit-overflow-scrolling: auto;
    /* Force programmatic control */
    scroll-behavior: auto;
}

/* Removed .is-animating styles - were causing interference */

.info-panels-header-buttons {
    flex: 0 0 auto; /* Don't grow, don't shrink, size based on content */
    z-index: 404;
}

.subpanels-container {
    display: flex;
    width: 300vw; /* 3 panels side by side, each 100vw */
    height: 100%; /* Take full height of parent */
    /* transition: transform 0.3s ease; */ /* Disabled to prevent interference with JS positioning */
    /* Initial positioning handled by JavaScript */
    transform: translateX(-100vw); /* Start at stops panel to avoid initial animation */
}

.subpanel {
    width: 100vw; /* Each panel takes exactly the viewport width */
    height: 100%; /* Take full height of parent container */
    flex-shrink: 0;
    overflow-y: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    flex-direction: column;
}

.subpanel.route-panel {
    position: relative;
}

#route-selectors-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 402;
}

.all-stops-selected-menu {
    background-color: rgb(53, 101, 248) !important;
    color: white !important;
}

.all-stops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 1rem 0;
    gap: 1rem;
}

.all-stops-grid > div {
    border-radius: 1rem;
    background-color: var(--theme-bg-closest-stop);
    padding: 1rem;
}


.incoming-wrapper {
    transition: 200ms;
}

.incoming-wrapper:hover {
    background-color: rgb(95, 95, 192);
}

.subpanel-inner {
    padding: 1rem;
    box-sizing: border-box;
    min-height: 100%;
    overflow-y: auto;
}