/* Metro Component Variations - Extensions and Variations
 * Variations that extend core components but remain reusable across contexts.
 * Depends on: metro-core.css
 */

/* Metro Map Service Category Colors */
:root {
    /* Service Category Colors - Updated to match metro map visualization */
    --color-visa: #f39c12;        /* Orange - Visas line */
    --color-housing: #2ecc71;     /* Green - Housing line */
    --color-essentials: #ffc300;  /* Yellow - Essentials line */
    --color-business: #3498db;    /* Blue - Business line */
    --color-lifestyle: #f2677b;   /* Red/Pink - Lifestyle line */
}

/* Interchange step modifier - ensures proper vertical centering */
.metro-step.metro-interchange-step {
    align-items: center;
}

/* Service item - step containing service with code */
.metro-service-item {
    cursor: pointer;
    transition: all var(--transition-base);
}

.metro-service-item:hover {
    /* No transform on the container itself */
}

.metro-service-item:hover .metro-label {
    color: var(--metro-current-label-color);
    font-weight: 600;
    transform: translateX(8px); /* Move link text to the right */
    transition: transform var(--transition-base), color var(--transition-base), font-weight var(--transition-base);
}

/* Keep service code in place on hover */
.metro-service-item:hover .metro-service-code {
    transform: none; /* Don't move the code */
}

.metro-service-item:hover .metro-hinge {
    background: var(--metro-line-color);
    transform: translateY(-50%) translateX(-4px); /* Detach hinge by moving it left */
    transition: transform var(--transition-base), background var(--transition-base);
}

/* Service code styling - positioned on the left of title, outside link */
.metro-service-code {
    font-size: var(--font-size-xs);
    color: var(--color-text-medium);
    font-weight: 500;
    opacity: 0.7;
    margin-right: var(--spacing-sm);
    margin-left: var(--spacing-md); /* More padding on the left */
    flex-shrink: 0;
    pointer-events: none; /* Make it non-clickable */
}

/* Make only the label clickable */
.metro-service-item .metro-label {
    cursor: pointer;
}

/* Counter badge inside interchange circle and terminal station */
.metro-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-text-dark); /* Black color */
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    z-index: 4;
}

/* Terminal station wrapper */
.metro-terminal-wrapper {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-base);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-sm);
}

.metro-terminal-wrapper:hover {
    background-color: var(--color-paper);
}

/* Category-specific line - shorter line just for the terminal station */
.metro-category-line {
    min-height: auto;
    padding-bottom: 0;
}

.metro-category-line::before {
    height: 36px; /* Just tall enough for the terminal station */
    bottom: auto;
}

/* Level 2 title - slightly larger font size, black/gray color */
/* Need higher specificity to override .metro-step.upcoming .metro-label */
.metro-step.upcoming.metro-interchange-step .metro-label {
    font-size: var(--font-size-lg);
    color: var(--color-text-dark) !important; /* Black/gray instead of blue - use !important to override */
}

/* Level 3 title - black/gray color instead of blue */
/* Need higher specificity to override .metro-step.upcoming .metro-label */
.metro-step.upcoming.metro-service-item .metro-label {
    color: var(--color-text-dark) !important; /* Black/gray instead of blue - use !important to override */
}

/* Restricted and Prohibited tier titles - dark red color */
.metro-step.upcoming.metro-service-item .metro-label.tier-restricted,
.metro-step.upcoming.metro-service-item .metro-label.tier-prohibited {
    color: #8b0000 !important; /* Dark red for restricted/prohibited services */
}