/* Metro Search Context Overrides - Search Page-Specific Styling
 * Context-specific styles that don't belong in core or variants.
 * Depends on: metro-core.css and metro-variants.css
 */

/* Search container - extends metro-steps for search results */
.search-metro-steps {
    position: relative;
    padding-left: 25px; /* Match metro-core.css */
}

/* Level 1 content (category terminal station) - moved 8px right */
.accordion-category > .search-metro-steps {
    padding-left: 36px; /* 25px + 8px - moves content 8px right */
}

/* Move the vertical line 8px to the right to match content shift */
.accordion-category > .search-metro-steps::before {
    left: 16px; /* Move line 8px to the right */
    border-radius: 5px 5px 0 0; /* Remove bottom border-radius, keep top */
}

/* Adjust terminal station position to align with moved line */
/* Original: terminal at -37px, line at 0, padding 25px */
/* New: line at 8px, padding 33px */
/* Terminal needs to move 8px right relative to step to align with line: -37px + 8px = -29px */
/* Moved 1px further left: -29px - 1px = -30px */
.accordion-category > .search-metro-steps .metro-terminal-step.category-terminal-station .metro-terminal {
    left: -31px; /* -29px - 1px to move square 1px left */
}

.search-metro-steps::before {
    content: '';
    position: absolute;
    left: 0;
    top: -0px;
    bottom: 0;
    width: 14px;
    background: var(--search-metro-line-color, var(--metro-line-color));
    border-radius: 5px;
    z-index: 0;
}

/* Remove top border-radius for level 2 stations (interchange stations in subcategory grid) */
.subcategory-grid .search-metro-steps::before {
    border-radius: 0 0 5px 5px; /* Remove top border-radius, keep bottom */
}

/* Interchange step styling for search results */
.metro-interchange-step {
    cursor: pointer;
    min-height: 48px; /* Make interchange station rows taller */
    display: flex;
    align-items: center; /* Center vertically */
}

/* Category terminal station - now part of unified metro-steps container */
.metro-terminal-step.category-terminal-station {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-base);
    min-height: 48px; /* Match interchange step height for consistency */
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Match metro-step margin-bottom */
}

.metro-terminal-step.category-terminal-station:hover {
    background-color: var(--color-paper);
}

/* Hide line above terminal station when it's the first step */
.metro-terminal-step.category-terminal-station:first-child::after {
    content: '';
    position: absolute;
    left: -25px;
    top: 0;
    width: 14px;
    height: calc(50% - 18px); /* Cover top half minus terminal station radius */
    background: var(--color-paper, var(--color-white));
    z-index: 1;
}

/* Adjust hide line position for level 1 content */
/* This pseudo-element hides the line above the terminal station */
/* Original: left -25px (relative to step), line at 0, padding 25px */
/* New: line at 8px, padding 33px, so hide element moves 8px right: -25px + 8px = -17px */
.accordion-category > .search-metro-steps .metro-terminal-step.category-terminal-station:first-child::after {
    left: -20px; /* -25px + 8px to align with moved line */
    width: 14px; /* Match line width */
}

/* Hide Level 1 metro line when accordion is closed */
.accordion-category > .search-metro-steps.accordion-closed::before {
    display: none;
}