/* ========================================
  					STATION PICKER CUSTOM ELEMENT
  				 ======================================== */
				station-picker {
					display: block;
					width: 100%;
					position: relative;
					font-family: 'yekanbakh', sans-serif;
				}

				.picker-container {
					position: relative;
					width: 100%;
				}

				/* Display area - shows selected station */
				.picker-display {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12px 16px;
					background: #ffffff;
					border: 2px solid #e0e0e0;
					border-radius: 26px;
					cursor: pointer;
					transition: all var(--transition-speed) ease;
					min-height: 48px;
					user-select: none;
					gap: 12px;
				}

				.picker-display:hover {
					border-color: var(--main-color);
				}

				.picker-display:focus-visible {
					outline: 3px solid var(--main-accent-color);
					outline-offset: 2px;
				}

				.picker-display.open {
					border-color: var(--main-accent-color);
					box-shadow: 0 0 0 4px rgba(246, 111, 6, 0.15);
				}

				.picker-display .selected-name {
					flex: 1;
					font-size: 1rem;
					color: var(--main-text-color);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.picker-display .selected-name.placeholder {
					color: #999;
				}

				.picker-display .arrow {
					font-size: 12px;
					color: #666;
					transition: transform var(--transition-speed) ease;
					flex-shrink: 0;
				}

				.picker-display.open .arrow {
					transform: rotate(180deg);
				}

				/* Color indicator in display */
				.picker-display .display-indicator {
					width: 20px;
					height: 20px;
					border-radius: 4px;
					flex-shrink: 0;
				}

				.picker-display .display-indicator.gradient {
					background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
				}

				/* Dropdown */
				.picker-dropdown {
					display: none;
					position: absolute;
					top: calc(100% + 4px);
					left: 0;
					right: 0;
					background: #ffffff;
					border: 2px solid #e0e0e0;
					border-radius: 8px;
					box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
					z-index: 1;
					max-height: 50vh;
					overflow: hidden;
					flex-direction: column;
				}

				.picker-dropdown.open {
					display: flex;
				}

				/* Dropdown above (when not enough space below) */
				.picker-dropdown.above {
					top: auto;
					bottom: calc(100% + 4px);
				}

				/* Search input */
				.picker-dropdown .search-input {
					width: 100%;
					padding: 10px 14px;
					border: none;
					border-bottom: 2px solid #e0e0e0;
					border-radius: 8px 8px 0 0;
					font-family: 'yekanbakh', sans-serif;
					font-size: 0.95rem;
					background: #f8f9fa;
					outline: none;
					transition: border-color var(--transition-speed) ease;
					flex-shrink: 0;
				}

				.picker-dropdown .search-input:focus {
					border-color: var(--main-accent-color);
					box-shadow: none;
				}

				.picker-dropdown .search-input::placeholder {
					color: #999;
				}

				/* Options list */
				.picker-dropdown .options-list {
					overflow-y: auto;
					flex: 1;
					padding: 4px 0;
					-webkit-overflow-scrolling: touch;
				}

				/* Scrollbar styling */
				.picker-dropdown .options-list::-webkit-scrollbar {
					width: 4px;
				}

				.picker-dropdown .options-list::-webkit-scrollbar-track {
					background: #f1f1f1;
				}

				.picker-dropdown .options-list::-webkit-scrollbar-thumb {
					background: var(--main-accent-color);
					border-radius: 4px;
				}

				/* Station option */
				.picker-dropdown .station-option {
					display: flex;
					align-items: center;
					gap: 12px;
					padding: 4px 14px;
					cursor: pointer;
					transition: background var(--transition-speed) ease;
					min-height: 44px;
					font-size: 0.95rem;
					color: var(--main-text-color);
				}

				.picker-dropdown .station-option:hover {
					background: #f0f0f0;
				}

				.picker-dropdown .station-option:focus-visible {
					outline: 3px solid var(--main-accent-color);
					outline-offset: -3px;
				}

				.picker-dropdown .station-option.selected {
					background: #fff3e6;
					font-weight: 600;
				}

				.picker-dropdown .station-option .color-indicator {
					width: 16px;
					height: 40px;
					border-radius: 4px;
					flex-shrink: 0;
				}

				.picker-dropdown .station-option .color-indicator.gradient {
					background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
				}

				.picker-dropdown .station-option .station-name {
					flex: 1;
				}

				.picker-dropdown .station-option .station-lines {
					font-size: 0.7rem;
					color: #999;
					background: #f0f0f0;
					padding: 2px 8px;
					border-radius: 10px;
					flex-shrink: 0;
				}

				.picker-dropdown .station-option.selected .station-lines {
					background: #ffe0cc;
				}

				/* No results */
				.picker-dropdown .no-results {
					padding: 20px;
					text-align: center;
					color: #999;
					font-size: 0.9rem;
				}

				/* Loading/empty state */
				.picker-dropdown .loading {
					padding: 20px;
					text-align: center;
					color: #999;
				}